feat: add page component

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

@@ -0,0 +1,19 @@
+import { Button, SimpleGrid } from '@mantine/core'
+import { UiBack, UiCard, UiPage, UiStack } from '@pubkey-ui/core'
+
+export function DemoFeaturePage() {
+  return (
+    <UiCard title="Page">
+      <UiPage title="Page title" leftAction={<UiBack />} rightAction={<Button variant="outline">Right action</Button>}>
+        <UiCard title="Card with Grid inside Page">
+          <SimpleGrid cols={2}>
+            <UiStack>1</UiStack>
+            <UiStack>2</UiStack>
+            <UiStack>3</UiStack>
+            <UiStack>4</UiStack>
+          </SimpleGrid>
+        </UiCard>
+      </UiPage>
+    </UiCard>
+  )
+}

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

@@ -1,5 +1,5 @@
 import { Grid, NavLink } from '@mantine/core'
-import { UiContainer, UiNotFound, UiStack } from '@pubkey-ui/core'
+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'
@@ -15,6 +15,7 @@ import { DemoFeatureLoader } from './demo-feature-loader'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
 import { DemoFeatureNotFound } from './demo-feature-not-found'
+import { DemoFeaturePage } from './demo-feature-page'
 import { DemoFeatureSearchInput } from './demo-feature-search-input'
 import { DemoFeatureStack } from './demo-feature-stack'
 import { DemoFeatureTabRoutes } from './demo-feature-tab-routes'
@@ -41,6 +42,7 @@ export function DemoFeature() {
     { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
     { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },
     { path: 'not-found', label: 'Not Found', element: <DemoFeatureNotFound /> },
+    { path: 'page', label: 'Page', element: <DemoFeaturePage /> },
     { path: 'search-input', label: 'Search Input', element: <DemoFeatureSearchInput /> },
     { path: 'stack', label: 'Stack', element: <DemoFeatureStack /> },
     { path: 'tab-routes', label: 'Tab Routes', element: <DemoFeatureTabRoutes /> },
@@ -55,7 +57,7 @@ export function DemoFeature() {
   ])
 
   return (
-    <UiContainer>
+    <UiPage title="Demo">
       <Grid>
         <Grid.Col span={{ base: 12, sm: 2 }}>
           {demos.map((demo) => {
@@ -69,6 +71,6 @@ export function DemoFeature() {
           <UiStack gap="xl">{routes}</UiStack>
         </Grid.Col>
       </Grid>
-    </UiContainer>
+    </UiPage>
   )
 }

apps/web/src/app/ui-x/ui-page.tsx

@@ -0,0 +1,34 @@
+import { Box, Group, Title } from '@mantine/core'
+import { UiContainer, UiGroup, UiStack } from '@pubkey-ui/core'
+import { ReactNode } from 'react'
+
+export function UiPage({
+  children,
+  leftAction,
+  rightAction,
+  title,
+}: {
+  children: ReactNode
+  leftAction?: ReactNode
+  rightAction?: ReactNode
+  title?: ReactNode
+}) {
+  return (
+    <UiContainer>
+      <UiStack>
+        <Box>
+          <UiGroup>
+            <Group>
+              {leftAction ? leftAction : null}
+              <Title order={2}>{title ?? ''}</Title>
+            </Group>
+            {rightAction ? <Group>{rightAction}</Group> : null}
+          </UiGroup>
+        </Box>
+        <UiStack my="xs" gap="xl">
+          {children}
+        </UiStack>
+      </UiStack>
+    </UiContainer>
+  )
+}

packages/core/src/lib/index.ts

@@ -13,6 +13,7 @@ export * from './ui-loader'
 export * from './ui-logo'
 export * from './ui-menu'
 export * from './ui-not-found'
+export * from './ui-page'
 export * from './ui-search-input'
 export * from './ui-stack'
 export * from './ui-tab-routes'

packages/core/src/lib/ui-group/ui-group.tsx

@@ -6,5 +6,9 @@ export interface UiGroupProps extends GroupProps {
 }
 
 export function UiGroup({ children, ...props }: UiGroupProps) {
-  return <Group {...props}>{children}</Group>
+  return (
+    <Group justify="space-between" {...props}>
+      {children}
+    </Group>
+  )
 }

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

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

packages/core/src/lib/ui-page/ui-page.tsx

@@ -0,0 +1,36 @@
+import { Box, Group, Title } from '@mantine/core'
+import { ReactNode } from 'react'
+import { UiContainer } from '../ui-container'
+import { UiGroup } from '../ui-group'
+import { UiStack } from '../ui-stack'
+
+export function UiPage({
+  children,
+  leftAction,
+  rightAction,
+  title,
+}: {
+  children: ReactNode
+  leftAction?: ReactNode
+  rightAction?: ReactNode
+  title?: ReactNode
+}) {
+  return (
+    <UiContainer>
+      <UiStack>
+        <Box>
+          <UiGroup>
+            <UiGroup>
+              {leftAction ? leftAction : null}
+              <Title order={2}>{title ?? ''}</Title>
+            </UiGroup>
+            {rightAction ? <Group>{rightAction}</Group> : null}
+          </UiGroup>
+        </Box>
+        <UiStack my="xs" gap="xl">
+          {children}
+        </UiStack>
+      </UiStack>
+    </UiContainer>
+  )
+}

packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap

@@ -2085,6 +2085,107 @@ exports[`component generator should create files for not-found 1`] = `
 }
 `;
 
+exports[`component generator should create files for page 1`] = `
+{
+  ".prettierrc": {
+    "content": [
+      "{ "singleQuote": true }",
+    ],
+    "isBinary": false,
+    "path": "./.prettierrc",
+  },
+  "nx.json": {
+    "content": [
+      "{",
+      ""affected": { "defaultBase": "main" },",
+      ""targetDefaults": {",
+      ""build": { "cache": true },",
+      ""lint": { "cache": true },",
+      ""e2e": { "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-page';",
+        ],
+        "isBinary": false,
+        "path": "./test/index.ts",
+      },
+      "ui-page.tsx": {
+        "content": [
+          "import { Box, Group, Title } from '@mantine/core';",
+          "import { ReactNode } from 'react';",
+          "import { UiContainer } from '../ui-container';",
+          "import { UiGroup } from '../ui-group';",
+          "import { UiStack } from '../ui-stack';",
+          "export function UiPage({",
+          "children,",
+          "leftAction,",
+          "rightAction,",
+          "title,",
+          "}: {",
+          "children: ReactNode;",
+          "leftAction?: ReactNode;",
+          "rightAction?: ReactNode;",
+          "title?: ReactNode;",
+          "}) {",
+          "return (",
+          "<UiContainer>",
+          "<UiStack>",
+          "<Box>",
+          "<UiGroup>",
+          "<Group>",
+          "{leftAction ? leftAction : null}",
+          "<Title order={2}>{title ?? ''}</Title>",
+          "</Group>",
+          "{rightAction ? <Group>{rightAction}</Group> : null}",
+          "</UiGroup>",
+          "</Box>",
+          "<UiStack my="xs" gap="xl">",
+          "{children}",
+          "</UiStack>",
+          "</UiStack>",
+          "</UiContainer>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/ui-page.tsx",
+      },
+    },
+    "path": "./test",
+  },
+  "tsconfig.base.json": {
+    "content": [
+      "{",
+      ""compilerOptions": {",
+      ""paths": {}",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./tsconfig.base.json",
+  },
+}
+`;
+
 exports[`component generator should create files for search-input 1`] = `
 {
   ".prettierrc": {

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

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

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

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

packages/generators/src/generators/component/component-types.ts

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

packages/generators/src/generators/component/files/loader/__prefixFileName__-loader.tsx.template

@@ -1,6 +1,6 @@
 import { Flex, Loader, LoaderProps } from '@mantine/core'
 
-export function UiLoader({
+export function <%= prefix.className %>Loader({
   size = 'xl',
   type = 'oval',
   flex = 'inline',

packages/generators/src/generators/component/files/page/__prefixFileName__-page.tsx.template

@@ -0,0 +1,36 @@
+import { Box, Group, Title } from '@mantine/core'
+import { ReactNode } from 'react'
+import { <%= prefix.className %>Container } from '../<%= prefix.fileName %>-container'
+import { <%= prefix.className %>Group } from '../<%= prefix.fileName %>-group'
+import { <%= prefix.className %>Stack } from '../<%= prefix.fileName %>-stack'
+
+export function <%= prefix.className %>Page({
+  children,
+  leftAction,
+  rightAction,
+  title,
+}: {
+  children: ReactNode
+  leftAction?: ReactNode
+  rightAction?: ReactNode
+  title?: ReactNode
+}) {
+  return (
+    <<%= prefix.className %>Container>
+      <<%= prefix.className %>Stack>
+        <Box>
+          <<%= prefix.className %>Group>
+            <Group>
+              {leftAction ? leftAction : null}
+              <Title order={2}>{title ?? ''}</Title>
+            </Group>
+            {rightAction ? <Group>{rightAction}</Group> : null}
+          </<%= prefix.className %>Group>
+        </Box>
+        <<%= prefix.className %>Stack my="xs" gap="xl">
+          {children}
+        </<%= prefix.className %>Stack>
+      </<%= prefix.className %>Stack>
+    </<%= prefix.className %>Container>
+  )
+}

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

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

packages/generators/src/generators/component/files/theme-switch/__prefixFileName__-theme-switch.tsx.template

@@ -1,16 +1,16 @@
 import { rem, Switch, SwitchProps, useMantineTheme } from '@mantine/core'
 import { IconMoonStars, IconSun } from '@tabler/icons-react'
-import { useUiColorScheme } from '../ui-theme'
+import { use<%= prefix.className %>ColorScheme } from '../<%= prefix.fileName %>-theme'
 
-export function UiThemeSwitch(props: SwitchProps) {
+export function <%= prefix.className %>ThemeSwitch(props: SwitchProps) {
   const theme = useMantineTheme()
 
   const sunIcon = <IconSun style={{width: rem(16), height: rem(16)}} stroke={2.5} color={theme.colors.yellow[4]}/>
 
   const moonIcon = (
     <IconMoonStars style={{width: rem(16), height: rem(16)}} stroke={2.5} color={theme.colors.brand[6]}/>
   )
-  const {toggleColorScheme, colorScheme} = useUiColorScheme()
+  const {toggleColorScheme, colorScheme} = use<%= prefix.className %>ColorScheme()
 
   return (
     <Switch