diff --git a/apps/web/src/app/features/demo/demo-feature-info-table.tsx b/apps/web/src/app/features/demo/demo-feature-info-table.tsx new file mode 100644 index 0000000..082b13f --- /dev/null +++ b/apps/web/src/app/features/demo/demo-feature-info-table.tsx @@ -0,0 +1,19 @@ +import { Button, rem } from '@mantine/core' +import { UiAvatar, UiCard, UiInfoItems, UiInfoTable, UiStack } from '@pubkey-ui/core' + +export function DemoFeatureInfoTable() { + const info: UiInfoItems = [ + ['Name', 'John Doe'], + ['Email', 'john@example.com'], + ['Phone', '555-555-5555'], + ['Components', ], + ['Avatar', ], + ] + return ( + + + + + + ) +} diff --git a/apps/web/src/app/features/demo/demo-feature.tsx b/apps/web/src/app/features/demo/demo-feature.tsx index d33fe6a..07b0071 100644 --- a/apps/web/src/app/features/demo/demo-feature.tsx +++ b/apps/web/src/app/features/demo/demo-feature.tsx @@ -12,6 +12,7 @@ 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 { DemoFeatureInfoTable } from './demo-feature-info-table' import { DemoFeatureLoader } from './demo-feature-loader' import { DemoFeatureLogo } from './demo-feature-logo' import { DemoFeatureMenu } from './demo-feature-menu' @@ -43,6 +44,7 @@ export function DemoFeature() { { path: 'grid-routes', label: 'Grid Routes', element: }, { path: 'group', label: 'Group', element: }, { path: 'header', label: 'Header', element: }, + { path: 'info-table', label: 'Info Table', element: }, { path: 'loader', label: 'Loader', element: }, { path: 'logo', label: 'Logo', element: }, { path: 'menu', label: 'Menu', element: }, diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts index 8d655b6..7f2e109 100644 --- a/packages/core/src/lib/index.ts +++ b/packages/core/src/lib/index.ts @@ -12,6 +12,7 @@ export * from './ui-grid-routes' export * from './ui-group' export * from './ui-header' export * from './ui-helpers' +export * from './ui-info-table' export * from './ui-layout' export * from './ui-loader' export * from './ui-logo' diff --git a/packages/core/src/lib/ui-info-table/index.ts b/packages/core/src/lib/ui-info-table/index.ts new file mode 100644 index 0000000..739a8bb --- /dev/null +++ b/packages/core/src/lib/ui-info-table/index.ts @@ -0,0 +1 @@ +export * from './ui-info-table' diff --git a/packages/core/src/lib/ui-info-table/ui-info-table.tsx b/packages/core/src/lib/ui-info-table/ui-info-table.tsx new file mode 100644 index 0000000..692a647 --- /dev/null +++ b/packages/core/src/lib/ui-info-table/ui-info-table.tsx @@ -0,0 +1,23 @@ +import { Table, TableProps } from '@mantine/core' +import { ReactNode } from 'react' + +export type UiInfoItem = [ReactNode, ReactNode] | undefined +export type UiInfoItems = UiInfoItem[] +export type UiInfoTableProps = TableProps & { items: UiInfoItems; tdw?: string } + +export function UiInfoTable({ items, tdw = '25%', ...props }: UiInfoTableProps) { + const filtered = items.filter(Boolean) as [ReactNode, ReactNode][] + if (!filtered.length) return null + return ( + + + {filtered.map(([key, value], index) => ( + + {key} + {value} + + ))} + +
+ ) +} diff --git a/packages/core/src/lib/ui-logo-mark/index.ts b/packages/core/src/lib/ui-logo-mark/index.ts deleted file mode 100644 index fead7bf..0000000 --- a/packages/core/src/lib/ui-logo-mark/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ui-logo-mark' -export * from './ui-logo-mark-black' -export * from './ui-logo-mark-white' diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx deleted file mode 100644 index 1649ea0..0000000 --- a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { UiLogoMarkProps } from './ui-logo-mark' - -export function UiLogoMarkBlack({ height, width, ...props }: UiLogoMarkProps = {}) { - return ( - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx deleted file mode 100644 index 5690245..0000000 --- a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { UiLogoMarkProps } from './ui-logo-mark' - -export function UiLogoMarkWhite({ height, width, ...props }: UiLogoMarkProps = {}) { - return ( - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx deleted file mode 100644 index 68d8a0a..0000000 --- a/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useUiColorScheme } from '../ui-theme' -import { SVGProps } from 'react' -import { UiLogoMarkBlack } from './ui-logo-mark-black' -import { UiLogoMarkWhite } from './ui-logo-mark-white' - -export interface UiLogoMarkProps extends SVGProps { - height?: number - width?: number -} -export function UiLogoMark(props: UiLogoMarkProps = {}) { - const { colorScheme } = useUiColorScheme() - - return colorScheme === 'dark' ? : -} diff --git a/packages/core/src/lib/ui-theme/use-ui-breakpoints.tsx b/packages/core/src/lib/ui-theme/use-ui-breakpoints.tsx deleted file mode 100644 index e475240..0000000 --- a/packages/core/src/lib/ui-theme/use-ui-breakpoints.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { useMantineTheme } from '@mantine/core' -import { useMediaQuery } from '@mantine/hooks' - -export function useUiBreakpoints() { - const { breakpoints } = useMantineTheme() - const isSm = useMediaQuery(`(max-width: ${breakpoints.sm})`) - const isMd = useMediaQuery(`(max-width: ${breakpoints.md})`) - - return { - isSm: isSm ?? false, - isMd: isMd ?? false, - } -} diff --git a/packages/generators/src/generators/component/component-generator-schema.d.ts b/packages/generators/src/generators/component/component-generator-schema.d.ts index cacda1c..8319596 100644 --- a/packages/generators/src/generators/component/component-generator-schema.d.ts +++ b/packages/generators/src/generators/component/component-generator-schema.d.ts @@ -27,6 +27,7 @@ export interface ComponentGeneratorSchema { | 'grid-routes' | 'group' | 'header' + | 'info-table' | 'helpers' | 'layout' | 'loader' diff --git a/packages/generators/src/generators/component/component-generator-schema.json b/packages/generators/src/generators/component/component-generator-schema.json index ae52019..e745dd6 100644 --- a/packages/generators/src/generators/component/component-generator-schema.json +++ b/packages/generators/src/generators/component/component-generator-schema.json @@ -29,6 +29,7 @@ "grid-routes", "group", "header", + "info-table", "helpers", "layout", "loader", diff --git a/packages/generators/src/generators/component/component-types.ts b/packages/generators/src/generators/component/component-types.ts index ee34717..06e314f 100644 --- a/packages/generators/src/generators/component/component-types.ts +++ b/packages/generators/src/generators/component/component-types.ts @@ -15,6 +15,7 @@ export const componentTypes: ComponentGeneratorSchema['type'][] = [ 'group', 'header', 'helpers', + 'info-table', 'layout', 'loader', 'logo', diff --git a/packages/generators/src/generators/component/files/avatar/__prefixFileName__-avatar.tsx.template b/packages/generators/src/generators/component/files/avatar/__prefixFileName__-avatar.tsx.template index 29ec904..3410044 100644 --- a/packages/generators/src/generators/component/files/avatar/__prefixFileName__-avatar.tsx.template +++ b/packages/generators/src/generators/component/files/avatar/__prefixFileName__-avatar.tsx.template @@ -1,15 +1,15 @@ import { Avatar, AvatarProps, Tooltip } from '@mantine/core' import { getColorByIndex, getIntFromString } from '../<%= prefixFileName %>-helpers' -import { UiAnchor } from '../<%= prefixFileName %>-anchor' +import { <%= prefix.className %>Anchor } from '../<%= prefixFileName %>-anchor' -export type UiAvatarProps = Omit & { +export type <%= prefix.className %>AvatarProps = Omit & { url?: string | null name?: string | null to?: string tooltipLabel?: string } -export function UiAvatar({ url, name, to, tooltipLabel, ...props }: UiAvatarProps) { +export function <%= prefix.className %>Avatar({ url, name, to, tooltipLabel, ...props }: <%= prefix.className %>AvatarProps) { const firstLetter = name?.charAt(0) ?? '?' const content = url?.length ? ( @@ -20,7 +20,7 @@ export function UiAvatar({ url, name, to, tooltipLabel, ...props }: UiAvatarProp ) - const anchor = {content} + const anchor = <<%= prefix.className %>Anchor to={to}>{content}Anchor> return tooltipLabel ? ( diff --git a/packages/generators/src/generators/component/files/dashboard-grid/__prefixFileName__-dashboard-grid.tsx.template b/packages/generators/src/generators/component/files/dashboard-grid/__prefixFileName__-dashboard-grid.tsx.template index 4f470c2..ca17e5b 100644 --- a/packages/generators/src/generators/component/files/dashboard-grid/__prefixFileName__-dashboard-grid.tsx.template +++ b/packages/generators/src/generators/component/files/dashboard-grid/__prefixFileName__-dashboard-grid.tsx.template @@ -1,6 +1,6 @@ import { SimpleGrid, Text, UnstyledButton, useMantineTheme } from '@mantine/core' import { ComponentType } from 'react' -import { getColorByIndex } from '../ui-helpers' +import { getColorByIndex } from '../<%= prefix.fileName %>-helpers' import { use<%= prefix.className %>Theme } from '../<%= prefix.fileName %>-theme' import classes from './<%= prefix.fileName %>-dashboard-grid.module.css' diff --git a/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template b/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template index 2d75bae..d3df403 100644 --- a/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template +++ b/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template @@ -44,7 +44,7 @@ export function <%= prefix.className %>GridRoutes({ basePath, routes, leftColPro {links} - }>{router} + Loader />}>{router} ) diff --git a/packages/generators/src/generators/component/files/info-table/__prefixFileName__-info-table.tsx.template b/packages/generators/src/generators/component/files/info-table/__prefixFileName__-info-table.tsx.template new file mode 100644 index 0000000..f986e66 --- /dev/null +++ b/packages/generators/src/generators/component/files/info-table/__prefixFileName__-info-table.tsx.template @@ -0,0 +1,23 @@ +import { Table, TableProps } from '@mantine/core' +import { ReactNode } from 'react' + +export type <%= prefix.className %>InfoItem = [ReactNode, ReactNode] | undefined +export type <%= prefix.className %>InfoItems = <%= prefix.className %>InfoItem[] +export type <%= prefix.className %>InfoTableProps = TableProps & { items: <%= prefix.className %>InfoItems; tdw?: string } + +export function <%= prefix.className %>InfoTable({ items, tdw = '25%', ...props }: <%= prefix.className %>InfoTableProps) { + const filtered = items.filter(Boolean) as [ReactNode, ReactNode][] + if (!filtered.length) return null + return ( + + + {filtered.map(([key, value], index) => ( + + {key} + {value} + + ))} + +
+ ) +} diff --git a/packages/generators/src/generators/component/files/info-table/index.ts.template b/packages/generators/src/generators/component/files/info-table/index.ts.template new file mode 100644 index 0000000..ae23f87 --- /dev/null +++ b/packages/generators/src/generators/component/files/info-table/index.ts.template @@ -0,0 +1 @@ +export * from './<%= prefixFileName %>-info-table' diff --git a/packages/generators/src/generators/component/files/select-enum/__prefixFileName__-select-enum.tsx.template b/packages/generators/src/generators/component/files/select-enum/__prefixFileName__-select-enum.tsx.template index dbe6a22..a1ffb60 100644 --- a/packages/generators/src/generators/component/files/select-enum/__prefixFileName__-select-enum.tsx.template +++ b/packages/generators/src/generators/component/files/select-enum/__prefixFileName__-select-enum.tsx.template @@ -1,6 +1,6 @@ import { MultiSelect, MultiSelectProps, Select, SelectProps } from '@mantine/core' -export function UiMultiSelectEnum({ +export function <%= prefix.className %>MultiSelectEnum({ values, setValues, options, @@ -20,7 +20,7 @@ export function UiMultiSelectEnum({ ) } -export function UiSelectEnum({ +export function <%= prefix.className %>SelectEnum({ value, setValue, options, diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-info-table.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-info-table.tsx.template new file mode 100644 index 0000000..082b13f --- /dev/null +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-info-table.tsx.template @@ -0,0 +1,19 @@ +import { Button, rem } from '@mantine/core' +import { UiAvatar, UiCard, UiInfoItems, UiInfoTable, UiStack } from '@pubkey-ui/core' + +export function DemoFeatureInfoTable() { + const info: UiInfoItems = [ + ['Name', 'John Doe'], + ['Email', 'john@example.com'], + ['Phone', '555-555-5555'], + ['Components', ], + ['Avatar', ], + ] + return ( + + + + + + ) +} 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 index 98a4ad0..6e86e15 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template @@ -12,6 +12,7 @@ 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 { DemoFeatureInfoTable } from './demo-feature-info-table' import { DemoFeatureLoader } from './demo-feature-loader' import { DemoFeatureLogo } from './demo-feature-logo' import { DemoFeatureMenu } from './demo-feature-menu' @@ -43,6 +44,7 @@ export function DemoFeature() { { path: 'grid-routes', label: 'Grid Routes', element: }, { path: 'group', label: 'Group', element: }, { path: 'header', label: 'Header', element: }, + { path: 'info-table', label: 'Info Table', element: }, { path: 'loader', label: 'Loader', element: }, { path: 'logo', label: 'Logo', element: }, { path: 'menu', label: 'Menu', element: },