feat: implement UiAnchor component

pubkeyapp · Jan 9, 2024 · 3824239 · 3824239
1 parent 4f28f26
commit 3824239
Show file tree

Hide file tree

Showing 17 changed files with 320 additions and 0 deletions.
diff --git a/apps/web/src/app/features/demo/demo-feature-anchor.tsx b/apps/web/src/app/features/demo/demo-feature-anchor.tsx
@@ -0,0 +1,16 @@
+import { SimpleGrid } from '@mantine/core'
+import { UiAnchor, UiCard } from '@pubkey-ui/core'
+
+export function DemoFeatureAnchor() {
+  return (
+    <UiCard title="Anchor">
+      <SimpleGrid cols={2}>
+        <UiAnchor to="/">Anchor with To</UiAnchor>
+        <UiAnchor href="https://google.com" target="_blank">
+          Anchor without To
+        </UiAnchor>
+        <UiAnchor>Anchor without To</UiAnchor>
+      </SimpleGrid>
+    </UiCard>
+  )
+}
diff --git a/apps/web/src/app/features/demo/demo-feature.tsx b/apps/web/src/app/features/demo/demo-feature.tsx
@@ -3,6 +3,7 @@ import { UiNotFound, UiPage, UiStack } from '@pubkey-ui/core'
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
+import { DemoFeatureAnchor } from './demo-feature-anchor'
 import { DemoFeatureBack } from './demo-feature-back'
 import { DemoFeatureCard } from './demo-feature-card'
 import { DemoFeatureCopy } from './demo-feature-copy'
@@ -30,6 +31,7 @@ export function DemoFeature() {
     element: ReactNode
   }[] = [
     { path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },
+    { path: 'anchor', label: 'Anchor', element: <DemoFeatureAnchor /> },
     { path: 'back', label: 'Back', element: <DemoFeatureBack /> },
     { path: 'card', label: 'Card', element: <DemoFeatureCard /> },
     { path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },

diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -1,4 +1,5 @@
 export * from './ui-alert'
+export * from './ui-anchor'
 export * from './ui-back'
 export * from './ui-card'
 export * from './ui-container'

diff --git a/packages/core/src/lib/ui-anchor/index.ts b/packages/core/src/lib/ui-anchor/index.ts
@@ -0,0 +1 @@
+export * from './ui-anchor'
diff --git a/packages/core/src/lib/ui-anchor/ui-anchor.tsx b/packages/core/src/lib/ui-anchor/ui-anchor.tsx
@@ -0,0 +1,24 @@
+import { Anchor, AnchorProps } from '@mantine/core'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+
+export interface UiAnchorProps extends AnchorProps {
+  children: ReactNode
+  href?: string
+  to?: string
+  target?: HTMLAnchorElement['target']
+}
+
+export function UiAnchor({ children, href, target, to, ...props }: UiAnchorProps) {
+  return to ? (
+    <Anchor component={Link} to={to} target={target} {...props}>
+      {children}
+    </Anchor>
+  ) : href ? (
+    <Anchor component="a" href={href} target={target} {...props}>
+      {children}
+    </Anchor>
+  ) : (
+    children
+  )
+}
diff --git a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
@@ -121,6 +121,96 @@ exports[`component generator should create files for alert 1`] = `
 }
 `;
 
+exports[`component generator should create files for anchor 1`] = `
+{
+  ".prettierrc": {
+    "content": [
+      "{ "singleQuote": true }",
+    ],
+    "isBinary": false,
+    "path": "./.prettierrc",
+  },
+  "nx.json": {
+    "content": [
+      "{",
+      ""affected": { "defaultBase": "main" },",
+      ""targetDefaults": { "build": { "cache": true }, "lint": { "cache": true } }",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./nx.json",
+  },
+  "package.json": {
+    "content": [
+      "{",
+      ""name": "@proj/source",",
+      ""dependencies": {},",
+      ""devDependencies": {}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./package.json",
+  },
+  "test": {
+    "children": {
+      "index.ts": {
+        "content": [
+          "export * from './ui-anchor';",
+        ],
+        "isBinary": false,
+        "path": "./test/index.ts",
+      },
+      "ui-anchor.tsx": {
+        "content": [
+          "import { Anchor, AnchorProps } from '@mantine/core';",
+          "import { ReactNode } from 'react';",
+          "import { Link } from 'react-router-dom';",
+          "export interface UiAnchorProps extends AnchorProps {",
+          "children: ReactNode;",
+          "href?: string;",
+          "to?: string;",
+          "target?: HTMLAnchorElement['target'];",
+          "}",
+          "export function UiAnchor({",
+          "children,",
+          "href,",
+          "target,",
+          "to,",
+          "...props",
+          "}: UiAnchorProps) {",
+          "return to ? (",
+          "<Anchor component={Link} to={to} target={target} {...props}>",
+          "{children}",
+          "</Anchor>",
+          ") : href ? (",
+          "<Anchor component="a" href={href} target={target} {...props}>",
+          "{children}",
+          "</Anchor>",
+          ") : (",
+          "children",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/ui-anchor.tsx",
+      },
+    },
+    "path": "./test",
+  },
+  "tsconfig.base.json": {
+    "content": [
+      "{",
+      ""compilerOptions": {",
+      ""paths": {}",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./tsconfig.base.json",
+  },
+}
+`;
+
 exports[`component generator should create files for back 1`] = `
 {
   ".prettierrc": {

diff --git a/packages/generators/src/generators/component/component-generator-schema.d.ts b/packages/generators/src/generators/component/component-generator-schema.d.ts
@@ -15,6 +15,7 @@ export interface ComponentGeneratorSchema {
    */
   type:
     | 'alert'
+    | 'anchor'
     | 'back'
     | 'card'
     | 'container'

diff --git a/packages/generators/src/generators/component/component-generator-schema.json b/packages/generators/src/generators/component/component-generator-schema.json
@@ -17,6 +17,7 @@
       "description": "The type of component to create",
       "enum": [
         "alert",
+        "anchor",
         "back",
         "card",
         "container",

diff --git a/packages/generators/src/generators/component/component-types.ts b/packages/generators/src/generators/component/component-types.ts
@@ -2,6 +2,7 @@ import { ComponentGeneratorSchema } from './component-generator-schema'
 
 export const componentTypes: ComponentGeneratorSchema['type'][] = [
   'alert',
+  'anchor',
   'back',
   'card',
   'container',

diff --git a/...s/generators/src/generators/component/files/anchor/__prefixFileName__-anchor.tsx.template b/...s/generators/src/generators/component/files/anchor/__prefixFileName__-anchor.tsx.template
@@ -0,0 +1,24 @@
+import { Anchor, AnchorProps } from '@mantine/core'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+
+export interface <%= prefix.className %>AnchorProps extends AnchorProps {
+  children: ReactNode
+  href?: string
+  to?: string
+  target?: HTMLAnchorElement['target']
+}
+
+export function <%= prefix.className %>Anchor({ children, href, target, to, ...props }: <%= prefix.className %>AnchorProps) {
+  return to ? (
+    <Anchor component={Link} to={to} target={target} {...props}>
+      {children}
+    </Anchor>
+  ) : href ? (
+    <Anchor component="a" href={href} target={target} {...props}>
+      {children}
+    </Anchor>
+  ) : (
+    children
+  )
+}
diff --git a/packages/generators/src/generators/component/files/anchor/index.ts.template b/packages/generators/src/generators/component/files/anchor/index.ts.template
@@ -0,0 +1 @@
+export * from './<%= prefixFileName %>-anchor'
diff --git a/...ages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap b/...ages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
@@ -35,6 +35,7 @@ exports[`components generator should run successfully 1`] = `
       "index.ts": {
         "content": [
           "export * from './ui-alert';",
+          "export * from './ui-anchor';",
           "export * from './ui-back';",
           "export * from './ui-card';",
           "export * from './ui-container';",
@@ -138,6 +139,52 @@ exports[`components generator should run successfully 1`] = `
         },
         "path": "./test/ui-alert",
       },
+      "ui-anchor": {
+        "children": {
+          "index.ts": {
+            "content": [
+              "export * from './ui-anchor';",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-anchor/index.ts",
+          },
+          "ui-anchor.tsx": {
+            "content": [
+              "import { Anchor, AnchorProps } from '@mantine/core';",
+              "import { ReactNode } from 'react';",
+              "import { Link } from 'react-router-dom';",
+              "export interface UiAnchorProps extends AnchorProps {",
+              "children: ReactNode;",
+              "href?: string;",
+              "to?: string;",
+              "target?: HTMLAnchorElement['target'];",
+              "}",
+              "export function UiAnchor({",
+              "children,",
+              "href,",
+              "target,",
+              "to,",
+              "...props",
+              "}: UiAnchorProps) {",
+              "return to ? (",
+              "<Anchor component={Link} to={to} target={target} {...props}>",
+              "{children}",
+              "</Anchor>",
+              ") : href ? (",
+              "<Anchor component="a" href={href} target={target} {...props}>",
+              "{children}",
+              "</Anchor>",
+              ") : (",
+              "children",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-anchor/ui-anchor.tsx",
+          },
+        },
+        "path": "./test/ui-anchor",
+      },
       "ui-back": {
         "children": {
           "index.ts": {

diff --git a/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap b/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap
@@ -60,6 +60,27 @@ exports[`feature generator should create files for demo 1`] = `
         "isBinary": false,
         "path": "./test/demo-feature-alerts.tsx",
       },
+      "demo-feature-anchor.tsx": {
+        "content": [
+          "import { SimpleGrid } from '@mantine/core';",
+          "import { UiAnchor, UiCard } from '@pubkey-ui/core';",
+          "export function DemoFeatureAnchor() {",
+          "return (",
+          "<UiCard title="Anchor">",
+          "<SimpleGrid cols={2}>",
+          "<UiAnchor to="/">Anchor with To</UiAnchor>",
+          "<UiAnchor href="https://google.com" target="_blank">",
+          "Anchor without To",
+          "</UiAnchor>",
+          "<UiAnchor>Anchor without To</UiAnchor>",
+          "</SimpleGrid>",
+          "</UiCard>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/demo-feature-anchor.tsx",
+      },
       "demo-feature-back.tsx": {
         "content": [
           "import { UiBack, UiCard } from '@pubkey-ui/core';",
@@ -885,6 +906,7 @@ exports[`feature generator should create files for demo 1`] = `
           "import { ReactNode } from 'react';",
           "import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom';",
           "import { DemoFeatureAlerts } from './demo-feature-alerts';",
+          "import { DemoFeatureAnchor } from './demo-feature-anchor';",
           "import { DemoFeatureBack } from './demo-feature-back';",
           "import { DemoFeatureCard } from './demo-feature-card';",
           "import { DemoFeatureCopy } from './demo-feature-copy';",
@@ -911,6 +933,7 @@ exports[`feature generator should create files for demo 1`] = `
           "element: ReactNode;",
           "}[] = [",
           "{ path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },",
+          "{ path: 'anchor', label: 'Anchor', element: <DemoFeatureAnchor /> },",
           "{ path: 'back', label: 'Back', element: <DemoFeatureBack /> },",
           "{ path: 'card', label: 'Card', element: <DemoFeatureCard /> },",
           "{ path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },",

diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-anchor.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-anchor.tsx.template
@@ -0,0 +1,16 @@
+import { SimpleGrid } from '@mantine/core'
+import { <%= prefix.className %>Anchor, <%= prefix.className %>Card } from '<%= uiImport %>'
+
+export function DemoFeatureAnchor() {
+  return (
+    <<%= prefix.className %>Card title="Anchor">
+      <SimpleGrid cols={2}>
+        <<%= prefix.className %>Anchor to="/">Anchor with To</<%= prefix.className %>Anchor>
+        <<%= prefix.className %>Anchor href="https://google.com" target="_blank">
+          Anchor without To
+        </<%= prefix.className %>Anchor>
+        <<%= prefix.className %>Anchor>Anchor without To</<%= prefix.className %>Anchor>
+      </SimpleGrid>
+    </<%= prefix.className %>Card>
+  )
+}
diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template
@@ -3,6 +3,7 @@ import { <%= prefix.className %>NotFound, <%= prefix.className %>Page, <%= prefi
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
+import { DemoFeatureAnchor } from './demo-feature-anchor'
 import { DemoFeatureBack } from './demo-feature-back'
 import { DemoFeatureCard } from './demo-feature-card'
 import { DemoFeatureCopy } from './demo-feature-copy'
@@ -30,6 +31,7 @@ export function DemoFeature() {
     element: ReactNode
   }[] = [
     { path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },
+    { path: 'anchor', label: 'Anchor', element: <DemoFeatureAnchor /> },
     { path: 'back', label: 'Back', element: <DemoFeatureBack /> },
     { path: 'card', label: 'Card', element: <DemoFeatureCard /> },
     { path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },

diff --git a/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap b/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap
@@ -62,6 +62,27 @@ exports[`features generator should run successfully 1`] = `
             "isBinary": false,
             "path": "./test/demo/demo-feature-alerts.tsx",
           },
+          "demo-feature-anchor.tsx": {
+            "content": [
+              "import { SimpleGrid } from '@mantine/core';",
+              "import { UiAnchor, UiCard } from '@pubkey-ui/core';",
+              "export function DemoFeatureAnchor() {",
+              "return (",
+              "<UiCard title="Anchor">",
+              "<SimpleGrid cols={2}>",
+              "<UiAnchor to="/">Anchor with To</UiAnchor>",
+              "<UiAnchor href="https://google.com" target="_blank">",
+              "Anchor without To",
+              "</UiAnchor>",
+              "<UiAnchor>Anchor without To</UiAnchor>",
+              "</SimpleGrid>",
+              "</UiCard>",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/demo/demo-feature-anchor.tsx",
+          },
           "demo-feature-back.tsx": {
             "content": [
               "import { UiBack, UiCard } from '@pubkey-ui/core';",
@@ -887,6 +908,7 @@ exports[`features generator should run successfully 1`] = `
               "import { ReactNode } from 'react';",
               "import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom';",
               "import { DemoFeatureAlerts } from './demo-feature-alerts';",
+              "import { DemoFeatureAnchor } from './demo-feature-anchor';",
               "import { DemoFeatureBack } from './demo-feature-back';",
               "import { DemoFeatureCard } from './demo-feature-card';",
               "import { DemoFeatureCopy } from './demo-feature-copy';",
@@ -913,6 +935,7 @@ exports[`features generator should run successfully 1`] = `
               "element: ReactNode;",
               "}[] = [",
               "{ path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },",
+              "{ path: 'anchor', label: 'Anchor', element: <DemoFeatureAnchor /> },",
               "{ path: 'back', label: 'Back', element: <DemoFeatureBack /> },",
               "{ path: 'card', label: 'Card', element: <DemoFeatureCard /> },",
               "{ path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },",