feat: implement UiAnchor component

.github/workflows/ci.yml

@@ -16,6 +16,7 @@ jobs:
     name: Nx Cloud - Main Job
     uses: nrwl/ci/.github/workflows/[email protected]
     with:
+      node-version: 20.10.0
       main-branch-name: main
       number-of-agents: 3
       init-commands: |
@@ -31,4 +32,5 @@ jobs:
     name: Nx Cloud - Agents
     uses: nrwl/ci/.github/workflows/[email protected]
     with:
+      node-version: 20.10.0
       number-of-agents: 3

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>
+  )
+}

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 /> },

package.json

@@ -11,6 +11,7 @@
     "sync-schemas": "ts-node ./tools/scripts/sync-schemas.ts"
   },
   "private": true,
+  "packageManager": "[email protected]",
   "dependencies": {
     "@coral-xyz/anchor": "^0.29.0",
     "@mantine/core": "^7.3.0",

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'

packages/core/src/lib/ui-anchor/index.ts

@@ -0,0 +1 @@
+export * from './ui-anchor'

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
+  )
+}

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": {

packages/generators/src/generators/component/component-generator-schema.d.ts

@@ -15,6 +15,7 @@ export interface ComponentGeneratorSchema {
    */
   type:
     | 'alert'
+    | 'anchor'
     | 'back'
     | 'card'
     | 'container'

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",

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',

packages/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
+  )
+}

packages/generators/src/generators/component/files/anchor/index.ts.template

@@ -0,0 +1 @@
+export * from './<%= prefixFileName %>-anchor'

packages/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": {

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 /> },",

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>
+  )
+}

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 /> },