feat: implement grid-routes component

pubkeyapp · Jan 9, 2024 · 2a2431d · 2a2431d
1 parent b49a724
commit 2a2431d
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 46 deletions.
diff --git a/apps/web/src/app/features/demo/demo-feature-grid-routes.tsx b/apps/web/src/app/features/demo/demo-feature-grid-routes.tsx
@@ -0,0 +1,41 @@
+import { SimpleGrid } from '@mantine/core'
+import { UiCard, UiGridRoutes } from '@pubkey-ui/core'
+
+export function DemoFeatureGridRoutes() {
+  return (
+    <UiCard title="Grid Routes">
+      <UiGridRoutes
+        basePath="/demo/grid-routes"
+        routes={[
+          {
+            path: 'overview',
+            label: 'Overview',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <UiCard title="Overview">Overview</UiCard>
+              </SimpleGrid>
+            ),
+          },
+          {
+            path: 'content',
+            label: 'Content',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <UiCard title="Content">Content</UiCard>
+              </SimpleGrid>
+            ),
+          },
+          {
+            path: 'settings',
+            label: 'Settings',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <UiCard title="Settings">Settings</UiCard>
+              </SimpleGrid>
+            ),
+          },
+        ]}
+      />
+    </UiCard>
+  )
+}
diff --git a/apps/web/src/app/features/demo/demo-feature.tsx b/apps/web/src/app/features/demo/demo-feature.tsx
@@ -1,7 +1,5 @@
-import { Grid, NavLink } from '@mantine/core'
-import { UiNotFound, UiPage, UiStack } from '@pubkey-ui/core'
+import { UiGridRoutes, UiPage } 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'
@@ -10,6 +8,7 @@ import { DemoFeatureCopy } from './demo-feature-copy'
 import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
 import { DemoFeatureDebug } from './demo-feature-debug'
 import { DemoFeatureForm } from './demo-feature-form'
+import { DemoFeatureGridRoutes } from './demo-feature-grid-routes'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
 import { DemoFeatureLoader } from './demo-feature-loader'
@@ -24,7 +23,6 @@ import { DemoFeatureTime } from './demo-feature-time'
 import { DemoFeatureToast } from './demo-feature-toast'
 
 export function DemoFeature() {
-  const { pathname } = useLocation()
   const demos: {
     path: string
     label: string
@@ -38,6 +36,7 @@ export function DemoFeature() {
     { path: 'dashboard-grid', label: 'Dashboard Grid', element: <DemoFeatureDashboardGrid /> },
     { path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },
     { path: 'form', label: 'Form', element: <DemoFeatureForm /> },
+    { path: 'grid-routes', label: 'Grid Routes', element: <DemoFeatureGridRoutes /> },
     { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
     { path: 'loader', label: 'Loader', element: <DemoFeatureLoader /> },
@@ -52,27 +51,9 @@ export function DemoFeature() {
     { path: 'toast', label: 'Toast', element: <DemoFeatureToast /> },
   ]
 
-  const routes = useRoutes([
-    { index: true, element: <Navigate to={demos[0].path} replace /> },
-    ...demos.map((demo) => ({ path: `${demo.path}/*`, element: demo.element })),
-    { path: '*', element: <UiNotFound to="/demo" /> },
-  ])
-
   return (
     <UiPage title="Demo">
-      <Grid>
-        <Grid.Col span={{ base: 12, sm: 2 }}>
-          {demos.map((demo) => {
-            const to = `/demo/${demo.path}`
-            return (
-              <NavLink active={pathname.startsWith(to)} component={Link} key={demo.path} label={demo.label} to={to} />
-            )
-          })}
-        </Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 10 }}>
-          <UiStack gap="xl">{routes}</UiStack>
-        </Grid.Col>
-      </Grid>
+      <UiGridRoutes basePath="/demo" routes={demos} />
     </UiPage>
   )
 }
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -7,6 +7,7 @@ export * from './ui-copy'
 export * from './ui-dashboard-grid'
 export * from './ui-debug'
 export * from './ui-form'
+export * from './ui-grid-routes'
 export * from './ui-group'
 export * from './ui-header'
 export * from './ui-layout'

diff --git a/packages/core/src/lib/ui-grid-routes/index.ts b/packages/core/src/lib/ui-grid-routes/index.ts
@@ -0,0 +1 @@
+export * from './ui-grid-routes'
diff --git a/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx b/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx
@@ -0,0 +1,48 @@
+import { Grid, GridColProps, GridProps, NavLink } from '@mantine/core'
+import { ReactNode, useMemo } from 'react'
+import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
+import { UiNotFound } from '../ui-not-found'
+
+export interface UiGridRoute {
+  path: string
+  label?: string
+  element: ReactNode
+}
+export interface UiGridRoutesProps extends GridProps {
+  basePath: string
+  routes: UiGridRoute[]
+  leftColProps?: GridColProps
+  rightColProps?: GridColProps
+}
+
+export function UiGridRoutes({ basePath, routes, leftColProps, rightColProps, ...props }: UiGridRoutesProps) {
+  const { pathname } = useLocation()
+
+  const links = useMemo(
+    () =>
+      routes
+        .filter((app) => app.label)
+        .map((app) => {
+          const to = `${basePath}/${app.path}`
+          return <NavLink active={pathname.startsWith(to)} component={Link} key={app.path} label={app.label} to={to} />
+        }),
+    [basePath, pathname, routes],
+  )
+
+  const router = useRoutes([
+    { index: true, element: <Navigate to={routes[0].path} replace /> },
+    ...routes.map((item) => ({ path: `${item.path}/*`, element: item.element })),
+    { path: '*', element: <UiNotFound to={basePath} /> },
+  ])
+
+  return (
+    <Grid {...props}>
+      <Grid.Col span={{ base: 12, sm: 2 }} {...rightColProps}>
+        {links}
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 10 }} {...leftColProps}>
+        {router}
+      </Grid.Col>
+    </Grid>
+  )
+}
diff --git a/packages/generators/src/generators/component/component-generator-schema.d.ts b/packages/generators/src/generators/component/component-generator-schema.d.ts
@@ -23,6 +23,7 @@ export interface ComponentGeneratorSchema {
     | 'dashboard-grid'
     | 'debug'
     | 'form'
+    | 'grid-routes'
     | 'group'
     | 'header'
     | 'layout'

diff --git a/packages/generators/src/generators/component/component-generator-schema.json b/packages/generators/src/generators/component/component-generator-schema.json
@@ -25,6 +25,7 @@
         "dashboard-grid",
         "debug",
         "form",
+        "grid-routes",
         "group",
         "header",
         "layout",

diff --git a/packages/generators/src/generators/component/component-types.ts b/packages/generators/src/generators/component/component-types.ts
@@ -10,6 +10,7 @@ export const componentTypes: ComponentGeneratorSchema['type'][] = [
   'dashboard-grid',
   'debug',
   'form',
+  'grid-routes',
   'group',
   'header',
   'layout',

diff --git a/...rs/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template b/...rs/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template
@@ -0,0 +1,48 @@
+import { Grid, GridColProps, GridProps, NavLink } from '@mantine/core'
+import { ReactNode, useMemo } from 'react'
+import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
+import { <%= prefix.className %>NotFound } from '../<%= prefix.fileName %>-not-found'
+
+export interface <%= prefix.className %>GridRoute {
+  path: string
+  label?: string
+  element: ReactNode
+}
+export interface <%= prefix.className %>GridRoutesProps extends GridProps {
+  basePath: string
+  routes: <%= prefix.className %>GridRoute[]
+  leftColProps?: GridColProps
+  rightColProps?: GridColProps
+}
+
+export function <%= prefix.className %>GridRoutes({ basePath, routes, leftColProps, rightColProps, ...props }: <%= prefix.className %>GridRoutesProps) {
+  const { pathname } = useLocation()
+
+  const links = useMemo(
+    () =>
+      routes
+        .filter((app) => app.label)
+        .map((app) => {
+          const to = `${basePath}/${app.path}`
+          return <NavLink active={pathname.startsWith(to)} component={Link} key={app.path} label={app.label} to={to} />
+        }),
+    [basePath, pathname, routes],
+  )
+
+  const router = useRoutes([
+    { index: true, element: <Navigate to={routes[0].path} replace /> },
+    ...routes.map((item) => ({ path: `${item.path}/*`, element: item.element })),
+    { path: '*', element: <<%= prefix.className %>NotFound to={basePath} /> },
+  ])
+
+  return (
+    <Grid {...props}>
+      <Grid.Col span={{ base: 12, sm: 2 }} {...rightColProps}>
+        {links}
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 10 }} {...leftColProps}>
+        {router}
+      </Grid.Col>
+    </Grid>
+  )
+}
diff --git a/packages/generators/src/generators/component/files/grid-routes/index.ts.template b/packages/generators/src/generators/component/files/grid-routes/index.ts.template
@@ -0,0 +1 @@
+export * from './<%= prefixFileName %>-grid-routes'
diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-grid-routes.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-grid-routes.tsx.template
@@ -0,0 +1,41 @@
+import { SimpleGrid } from '@mantine/core'
+import { <%= prefix.className %>Card, <%= prefix.className %>GridRoutes } from '<%= uiImport %>'
+
+export function DemoFeatureGridRoutes() {
+  return (
+    <<%= prefix.className %>Card title="Grid Routes">
+      <<%= prefix.className %>GridRoutes
+        basePath="/demo/grid-routes"
+        routes={[
+          {
+            path: 'overview',
+            label: 'Overview',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <<%= prefix.className %>Card title="Overview">Overview</<%= prefix.className %>Card>
+              </SimpleGrid>
+            ),
+          },
+          {
+            path: 'content',
+            label: 'Content',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <<%= prefix.className %>Card title="Content">Content</<%= prefix.className %>Card>
+              </SimpleGrid>
+            ),
+          },
+          {
+            path: 'settings',
+            label: 'Settings',
+            element: (
+              <SimpleGrid cols={2} spacing="md">
+                <<%= prefix.className %>Card title="Settings">Settings</<%= prefix.className %>Card>
+              </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
@@ -1,7 +1,5 @@
-import { Grid, NavLink } from '@mantine/core'
-import { <%= prefix.className %>NotFound, <%= prefix.className %>Page, <%= prefix.className %>Stack } from '<%= uiImport %>'
+import { <%= prefix.className %>GridRoutes, <%= prefix.className %>Page } from '<%= uiImport %>'
 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'
@@ -10,6 +8,7 @@ import { DemoFeatureCopy } from './demo-feature-copy'
 import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
 import { DemoFeatureDebug } from './demo-feature-debug'
 import { DemoFeatureForm } from './demo-feature-form'
+import { DemoFeatureGridRoutes } from './demo-feature-grid-routes'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
 import { DemoFeatureLoader } from './demo-feature-loader'
@@ -24,7 +23,6 @@ import { DemoFeatureTime } from './demo-feature-time'
 import { DemoFeatureToast } from './demo-feature-toast'
 
 export function DemoFeature() {
-  const { pathname } = useLocation()
   const demos: {
     path: string
     label: string
@@ -38,6 +36,7 @@ export function DemoFeature() {
     { path: 'dashboard-grid', label: 'Dashboard Grid', element: <DemoFeatureDashboardGrid /> },
     { path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },
     { path: 'form', label: 'Form', element: <DemoFeatureForm /> },
+    { path: 'grid-routes', label: 'Grid Routes', element: <DemoFeatureGridRoutes /> },
     { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
     { path: 'loader', label: 'Loader', element: <DemoFeatureLoader /> },
@@ -52,27 +51,9 @@ export function DemoFeature() {
     { path: 'toast', label: 'Toast', element: <DemoFeatureToast /> },
   ]
 
-  const routes = useRoutes([
-    { index: true, element: <Navigate to={demos[0].path} replace /> },
-    ...demos.map((demo) => ({ path: `${demo.path}/*`, element: demo.element })),
-    { path: '*', element: <<%= prefix.className %>NotFound to="/demo" /> },
-  ])
-
   return (
     <<%= prefix.className %>Page title="Demo">
-      <Grid>
-        <Grid.Col span={{ base: 12, sm: 2 }}>
-          {demos.map((demo) => {
-            const to = `/demo/${demo.path}`
-            return (
-              <NavLink active={pathname.startsWith(to)} component={Link} key={demo.path} label={demo.label} to={to} />
-            )
-          })}
-        </Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 10 }}>
-          <<%= prefix.className %>Stack gap="xl">{routes}</<%= prefix.className %>Stack>
-        </Grid.Col>
-      </Grid>
+      <<%= prefix.className %>GridRoutes basePath="/demo" routes={demos} />
     </<%= prefix.className %>Page>
   )
 }