feat: add not-found component

apps/web/src/app/app-routes.tsx

@@ -1,4 +1,4 @@
-import { UiThemeLink } from '@pubkey-ui/core'
+import { UiNotFound, UiThemeLink } from '@pubkey-ui/core'
 import { lazy } from 'react'
 import { Link, Navigate, RouteObject, useRoutes } from 'react-router-dom'
 import { DemoFeature } from './features'
@@ -17,6 +17,7 @@ const routes: RouteObject[] = [
   { path: '/dashboard', element: <DashboardFeature /> },
   { path: '/demo/*', element: <DemoFeature /> },
   { path: '/dev', element: <DevFeature /> },
+  { path: '*', element: <UiNotFound /> },
 ]
 
 export function AppRoutes() {

apps/web/src/app/features/demo/demo-feature-not-found.tsx

@@ -0,0 +1,10 @@
+import { UiCardTitle, UiNotFound, UiStack } from '@pubkey-ui/core'
+
+export function DemoFeatureNotFound() {
+  return (
+    <UiStack>
+      <UiCardTitle>NotFound</UiCardTitle>
+      <UiNotFound />
+    </UiStack>
+  )
+}

apps/web/src/app/features/demo/demo-feature.tsx

@@ -1,5 +1,5 @@
 import { Grid, NavLink } from '@mantine/core'
-import { UiContainer, UiStack } from '@pubkey-ui/core'
+import { UiContainer, UiNotFound, UiStack } from '@pubkey-ui/core'
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
@@ -11,6 +11,7 @@ import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
+import { DemoFeatureNotFound } from './demo-feature-not-found'
 import { DemoFeatureSearchInput } from './demo-feature-search-input'
 import { DemoFeatureStack } from './demo-feature-stack'
 import { DemoFeatureTabRoutes } from './demo-feature-tab-routes'
@@ -33,6 +34,7 @@ export function DemoFeature() {
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
     { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
     { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },
+    { path: 'not-found', label: 'Not Found', element: <DemoFeatureNotFound /> },
     { path: 'search-input', label: 'Search Input', element: <DemoFeatureSearchInput /> },
     { path: 'stack', label: 'Stack', element: <DemoFeatureStack /> },
     { path: 'tab-routes', label: 'Tab Routes', element: <DemoFeatureTabRoutes /> },
@@ -43,6 +45,7 @@ export function DemoFeature() {
   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 (

packages/core/src/lib/index.ts

@@ -9,6 +9,7 @@ export * from './ui-header'
 export * from './ui-layout'
 export * from './ui-logo'
 export * from './ui-menu'
+export * from './ui-not-found'
 export * from './ui-search-input'
 export * from './ui-stack'
 export * from './ui-tab-routes'

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

@@ -1 +1,2 @@
 export * from './ui-card'
+export * from './ui-card-title'

packages/core/src/lib/ui-not-found/index.ts

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

packages/core/src/lib/ui-not-found/ui-not-found.module.css

@@ -0,0 +1,34 @@
+.root {
+  padding-top: rem(80px);
+  padding-bottom: rem(80px);
+}
+
+.label {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+  line-height: 1;
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+  color: var(--mantine-color-gray-2);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}
+
+.description {
+  max-width: rem(500px);
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}

packages/core/src/lib/ui-not-found/ui-not-found.tsx

@@ -0,0 +1,22 @@
+import { Button, Container, Group, Text, Title } from '@mantine/core'
+import { useUiTheme } from '../ui-theme'
+import classes from './ui-not-found.module.css'
+
+export function UiNotFound({ to = '/' }: { to?: string }) {
+  const { Link } = useUiTheme()
+  return (
+    <Container className={classes.root}>
+      <div className={classes.label}>404</div>
+      <Title className={classes.title}>You have found a secret place.</Title>
+      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+        Unfortunately, this is only a 404 page. You may have mistyped the address, or the page has been moved to another
+        URL.
+      </Text>
+      <Group justify="center">
+        <Button variant="subtle" size="md" component={Link} to={to}>
+          Take me back!
+        </Button>
+      </Group>
+    </Container>
+  )
+}

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

@@ -25,6 +25,7 @@ export interface ComponentGeneratorSchema {
     | 'layout'
     | 'logo'
     | 'menu'
+    | 'not-found'
     | 'search-input'
     | 'stack'
     | 'tab-routes'

packages/generators/src/generators/component/component-generator-schema.json

@@ -27,6 +27,7 @@
         "layout",
         "logo",
         "menu",
+        "not-found",
         "search-input",
         "stack",
         "tab-routes",

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

@@ -1 +1,2 @@
 export * from './<%= prefixFileName %>-card'
+export * from './<%= prefixFileName %>-card-title'

packages/generators/src/generators/component/files/not-found/__prefixFileName__-not-found.module.css.template

@@ -0,0 +1,34 @@
+.root {
+  padding-top: rem(80px);
+  padding-bottom: rem(80px);
+}
+
+.label {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+  line-height: 1;
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+  color: var(--mantine-color-gray-2);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}
+
+.description {
+  max-width: rem(500px);
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}

packages/generators/src/generators/component/files/not-found/__prefixFileName__-not-found.tsx.template

@@ -0,0 +1,22 @@
+import { Button, Container, Group, Text, Title } from '@mantine/core'
+import { use<%= prefix.className %>Theme } from '../<%= prefix.fileName %>-theme'
+import classes from './<%= prefix.fileName %>-not-found.module.css'
+
+export function <%= prefix.className %>NotFound({ to = '/' }: { to?: string }) {
+  const { Link } = use<%= prefix.className %>Theme()
+  return (
+    <Container className={classes.root}>
+      <div className={classes.label}>404</div>
+      <Title className={classes.title}>You have found a secret place.</Title>
+      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+        Unfortunately, this is only a 404 page. You may have mistyped the address, or the page has been moved to another
+        URL.
+      </Text>
+      <Group justify="center">
+        <Button variant="subtle" size="md" component={Link} to={to}>
+          Take me back!
+        </Button>
+      </Group>
+    </Container>
+  )
+}

packages/generators/src/generators/component/files/not-found/index.ts.template

@@ -0,0 +1 @@
+export * from './<%= prefix.fileName %>-not-found'

packages/generators/src/generators/components/components.ts

@@ -12,6 +12,7 @@ export const components: ComponentGeneratorSchema['type'][] = [
   'layout',
   'logo',
   'menu',
+  'not-found',
   'search-input',
   'stack',
   'tab-routes',

packages/generators/src/generators/feature/files/demo/demo-feature-not-found.tsx.template

@@ -0,0 +1,10 @@
+import { UiCardTitle, UiNotFound, UiStack } from '@pubkey-ui/core'
+
+export function DemoFeatureNotFound() {
+  return (
+    <UiStack>
+      <UiCardTitle>NotFound</UiCardTitle>
+      <UiNotFound />
+    </UiStack>
+  )
+}

packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template

@@ -1,5 +1,5 @@
 import { Grid, NavLink } from '@mantine/core'
-import { <%= prefix.className %>Container, <%= prefix.className %>Stack } from '<%= uiImport %>'
+import { <%= prefix.className %>Container, <%= prefix.className %>NotFound, <%= prefix.className %>Stack } from '<%= uiImport %>'
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
@@ -11,6 +11,7 @@ import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
+import { DemoFeatureNotFound } from './demo-feature-not-found'
 import { DemoFeatureSearchInput } from './demo-feature-search-input'
 import { DemoFeatureStack } from './demo-feature-stack'
 import { DemoFeatureTabRoutes } from './demo-feature-tab-routes'
@@ -33,6 +34,7 @@ element: ReactNode
 { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
 { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
 { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },
+{ path: 'not-found', label: 'Not Found', element: <DemoFeatureNotFound /> },
 { path: 'search-input', label: 'Search Input', element: <DemoFeatureSearchInput /> },
 { path: 'stack', label: 'Stack', element: <DemoFeatureStack /> },
 { path: 'tab-routes', label: 'Tab Routes', element: <DemoFeatureTabRoutes /> },
@@ -43,6 +45,7 @@ element: ReactNode
 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 (