@duro-app/ui 0.12.1 → 0.14.0

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,107 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {css, html} from 'react-strict-dom'
+import {Grid} from './Grid'
+import {Stack} from '../Stack/Stack'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {useContainerQuery} from '../../hooks/useContainerQuery'
+
+const meta: Meta<typeof Grid> = {
+  title: 'Layout/Grid',
+  component: Grid,
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+    },
+    columns: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+    },
+    minColumnWidth: {control: 'text'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Grid>
+
+const localStyles = css.create({
+  cell: {
+    backgroundColor: colors.accent,
+    color: colors.accentContrast,
+    padding: spacing.md,
+    borderRadius: 4,
+    textAlign: 'center',
+    fontSize: '0.875rem',
+  },
+  label: {
+    fontSize: '0.75rem',
+    color: colors.textMuted,
+  },
+})
+
+const Cell = ({children}: {children: string}) => (
+  <html.div style={localStyles.cell}>{children}</html.div>
+)
+
+export const FixedColumns: Story = {
+  args: {
+    gap: 'md',
+    columns: 3,
+  },
+  render: (args) => (
+    <Grid {...args}>
+      <Cell>1</Cell>
+      <Cell>2</Cell>
+      <Cell>3</Cell>
+      <Cell>4</Cell>
+      <Cell>5</Cell>
+      <Cell>6</Cell>
+    </Grid>
+  ),
+}
+
+export const AutoFit: Story = {
+  render: () => (
+    <Grid gap="md" minColumnWidth="200px">
+      <Cell>Card A</Cell>
+      <Cell>Card B</Cell>
+      <Cell>Card C</Cell>
+      <Cell>Card D</Cell>
+      <Cell>Card E</Cell>
+    </Grid>
+  ),
+}
+
+export const TwoColumns: Story = {
+  render: () => (
+    <Grid gap="lg" columns={2}>
+      <Cell>Left</Cell>
+      <Cell>Right</Cell>
+    </Grid>
+  ),
+}
+
+export const WithContainerQuery: Story = {
+  render: function Render() {
+    const {ref, size} = useContainerQuery<HTMLDivElement>()
+    const gap = size === 'compact' ? 'sm' : size === 'spacious' ? 'xl' : 'md'
+    const cols = size === 'compact' ? 1 : size === 'spacious' ? 4 : 2
+
+    return (
+      <html.div ref={ref}>
+        <Stack gap="sm">
+          <html.span style={localStyles.label}>
+            Container size: {size} — columns: {cols} — gap: {gap}
+          </html.span>
+          <Grid gap={gap} columns={cols as 1 | 2 | 3 | 4}>
+            <Cell>1</Cell>
+            <Cell>2</Cell>
+            <Cell>3</Cell>
+            <Cell>4</Cell>
+          </Grid>
+        </Stack>
+      </html.div>
+    )
+  },
+}

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,41 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import type {SpacingKey} from '../Stack/Stack'
+
+interface GridProps {
+  gap?: SpacingKey
+  columns?: 1 | 2 | 3 | 4 | 5 | 6
+  minColumnWidth?: string
+  children: ReactNode
+}
+
+const gapMap = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  ms: styles.gapMs,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  xxl: styles.gapXxl,
+  xxxl: styles.gapXxxl,
+} as const
+
+const columnsMap = {
+  1: styles.col1,
+  2: styles.col2,
+  3: styles.col3,
+  4: styles.col4,
+  5: styles.col5,
+  6: styles.col6,
+} as const
+
+export function Grid({gap = 'md', columns, minColumnWidth, children}: GridProps) {
+  const columnStyle = minColumnWidth
+    ? styles.autoFit(minColumnWidth)
+    : columns
+      ? columnsMap[columns]
+      : undefined
+
+  return <html.div style={[styles.base, gapMap[gap], columnStyle]}>{children}</html.div>
+}

package/src/components/Grid/styles.css.ts

@@ -0,0 +1,25 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    display: 'grid',
+  },
+  col1: {gridTemplateColumns: '1fr'},
+  col2: {gridTemplateColumns: 'repeat(2, 1fr)'},
+  col3: {gridTemplateColumns: 'repeat(3, 1fr)'},
+  col4: {gridTemplateColumns: 'repeat(4, 1fr)'},
+  col5: {gridTemplateColumns: 'repeat(5, 1fr)'},
+  col6: {gridTemplateColumns: 'repeat(6, 1fr)'},
+  autoFit: (minWidth: string) => ({
+    gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
+  }),
+  gapXs: {gap: spacing.xs},
+  gapSm: {gap: spacing.sm},
+  gapMs: {gap: spacing.ms},
+  gapMd: {gap: spacing.md},
+  gapLg: {gap: spacing.lg},
+  gapXl: {gap: spacing.xl},
+  gapXxl: {gap: spacing.xxl},
+  gapXxxl: {gap: spacing.xxxl},
+})

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {typePresets} from '@duro-app/tokens/tokens/type-presets.css'
+import {styles} from './styles.css'
+
+export type HeadingVariant =
+  | 'displayLg'
+  | 'displayMd'
+  | 'displaySm'
+  | 'headingXl'
+  | 'headingLg'
+  | 'headingMd'
+  | 'headingSm'
+
+interface HeadingProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6
+  variant?: HeadingVariant
+  color?: 'default' | 'muted' | 'accent'
+  align?: 'start' | 'center' | 'end'
+  children: ReactNode
+}
+
+const defaultVariantMap: Record<number, HeadingVariant> = {
+  1: 'headingXl',
+  2: 'headingLg',
+  3: 'headingMd',
+  4: 'headingSm',
+  5: 'headingSm',
+  6: 'headingSm',
+}
+
+const alignMap = {
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd,
+} as const
+
+export function Heading({level, variant, color = 'default', align, children}: HeadingProps) {
+  const resolvedVariant = variant ?? defaultVariantMap[level]
+  const style = [typePresets[resolvedVariant], styles[color], align && alignMap[align]]
+
+  if (level === 1) return <html.h1 style={style}>{children}</html.h1>
+  if (level === 2) return <html.h2 style={style}>{children}</html.h2>
+  if (level === 3) return <html.h3 style={style}>{children}</html.h3>
+  if (level === 4) return <html.h4 style={style}>{children}</html.h4>
+  if (level === 5) return <html.h5 style={style}>{children}</html.h5>
+  return <html.h6 style={style}>{children}</html.h6>
+}

package/src/components/Heading/styles.css.ts

@@ -0,0 +1,26 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+export const styles = css.create({
+  // Colors
+  default: {
+    color: colors.text,
+  },
+  muted: {
+    color: colors.textMuted,
+  },
+  accent: {
+    color: colors.accent,
+  },
+
+  // Alignment
+  alignStart: {
+    textAlign: 'start',
+  },
+  alignCenter: {
+    textAlign: 'center',
+  },
+  alignEnd: {
+    textAlign: 'end',
+  },
+})

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,168 @@
+import type {ReactNode} from 'react'
+
+export type IconName =
+  | 'x-circle'
+  | 'check-circle'
+  | 'check-done'
+  | 'clock'
+  | 'forbidden'
+  | 'info-circle'
+  | 'alert-triangle'
+  | 'shield'
+  | 'lock'
+  | 'key'
+  // Filled variants (solid shape with cutout symbol)
+  | 'info-circle-filled'
+  | 'alert-triangle-filled'
+  | 'check-circle-filled'
+  | 'x-circle-filled'
+  | 'shield-filled'
+  | 'lock-filled'
+
+/** Stroke-based icons (Feather/Lucide style) */
+const strokeIcons: Partial<Record<IconName, ReactNode>> = {
+  'x-circle': (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </>
+  ),
+  'check-circle': (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="16 10 11 15 8 12" />
+    </>
+  ),
+  'check-done': (
+    <>
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </>
+  ),
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </>
+  ),
+  forbidden: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+    </>
+  ),
+  'info-circle': (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </>
+  ),
+  'alert-triangle': (
+    <>
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </>
+  ),
+  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
+  lock: (
+    <>
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </>
+  ),
+  key: (
+    <>
+      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+    </>
+  ),
+}
+
+/**
+ * Filled icons — solid shape with evenodd cutout for the inner symbol.
+ * The cutout reveals the background color, so they work on any theme.
+ * Uses fill="currentColor" only, no stroke.
+ */
+const filledIcons: Partial<Record<IconName, ReactNode>> = {
+  // Filled circle with "i" cutout (dot + line)
+  'info-circle-filled': (
+    <path
+      fillRule="evenodd"
+      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-.75 6a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0zM11 11a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0v-5z"
+    />
+  ),
+  // Filled triangle with "!" cutout
+  'alert-triangle-filled': (
+    <path
+      fillRule="evenodd"
+      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM11 10a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0v-3zm.25 6a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0z"
+    />
+  ),
+  // Filled circle with checkmark cutout
+  'check-circle-filled': (
+    <path
+      fillRule="evenodd"
+      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.707 8.707a1 1 0 0 0-1.414-1.414L11 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l5-5z"
+    />
+  ),
+  // Filled circle with X cutout
+  'x-circle-filled': (
+    <path
+      fillRule="evenodd"
+      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293z"
+    />
+  ),
+  // Filled shield with checkmark cutout
+  'shield-filled': (
+    <path
+      fillRule="evenodd"
+      d="M12 1L3 5v7c0 6.5 8.5 10.5 9 10.73.5-.23 9-4.23 9-10.73V5l-9-4zm3.707 8.707a1 1 0 0 0-1.414-1.414L11 11.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
+    />
+  ),
+  // Filled lock body with stroke shackle
+  'lock-filled': (
+    <>
+      <path
+        d="M7 11V7a5 5 0 0 1 10 0v4"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+    </>
+  ),
+}
+
+interface IconProps {
+  name: IconName
+  size?: number
+}
+
+export function Icon({name, size = 24}: IconProps) {
+  const filled = filledIcons[name]
+  if (filled) {
+    return (
+      <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size}>
+        {filled}
+      </svg>
+    )
+  }
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      {strokeIcons[name]}
+    </svg>
+  )
+}

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export {Icon} from './Icon'
+export type {IconName} from './Icon'

package/src/components/Inline/Inline.stories.tsx

@@ -0,0 +1,88 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {css, html} from 'react-strict-dom'
+import {Inline} from './Inline'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+const meta: Meta<typeof Inline> = {
+  title: 'Layout/Inline',
+  component: Inline,
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'baseline', 'stretch'],
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Inline>
+
+const localStyles = css.create({
+  box: {
+    backgroundColor: colors.accent,
+    color: colors.accentContrast,
+    padding: spacing.sm,
+    borderRadius: 4,
+    textAlign: 'center',
+    fontSize: '0.875rem',
+  },
+  iconLg: {
+    fontSize: '1.25rem',
+  },
+})
+
+const Box = ({children}: {children: string}) => (
+  <html.div style={localStyles.box}>{children}</html.div>
+)
+
+export const Default: Story = {
+  args: {
+    gap: 'sm',
+    align: 'center',
+    justify: 'start',
+  },
+  render: (args) => (
+    <Inline {...args}>
+      <Box>One</Box>
+      <Box>Two</Box>
+      <Box>Three</Box>
+    </Inline>
+  ),
+}
+
+export const SpaceBetween: Story = {
+  render: () => (
+    <Inline gap="md" justify="between">
+      <Box>Left</Box>
+      <Box>Right</Box>
+    </Inline>
+  ),
+}
+
+export const IconAndText: Story = {
+  render: () => (
+    <Inline gap="xs" align="center">
+      <html.span style={localStyles.iconLg}>*</html.span>
+      <html.span>Label text</html.span>
+    </Inline>
+  ),
+}
+
+export const ButtonGroup: Story = {
+  render: () => (
+    <Inline gap="sm">
+      <Box>Save</Box>
+      <Box>Cancel</Box>
+      <Box>Delete</Box>
+    </Inline>
+  ),
+}

package/src/components/Inline/Inline.tsx

@@ -0,0 +1,45 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import type {SpacingKey} from '../Stack/Stack'
+
+interface InlineProps {
+  gap?: SpacingKey
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch'
+  justify?: 'start' | 'center' | 'end' | 'between'
+  children: ReactNode
+}
+
+const gapMap = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  ms: styles.gapMs,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  xxl: styles.gapXxl,
+  xxxl: styles.gapXxxl,
+} as const
+
+const alignMap = {
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd,
+  baseline: styles.alignBaseline,
+  stretch: styles.alignStretch,
+} as const
+
+const justifyMap = {
+  start: styles.justifyStart,
+  center: styles.justifyCenter,
+  end: styles.justifyEnd,
+  between: styles.justifyBetween,
+} as const
+
+export function Inline({gap = 'sm', align = 'center', justify = 'start', children}: InlineProps) {
+  return (
+    <html.div style={[styles.base, gapMap[gap], alignMap[align], justifyMap[justify]]}>
+      {children}
+    </html.div>
+  )
+}

package/src/components/Inline/styles.css.ts

@@ -0,0 +1,27 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+  },
+  alignStart: {alignItems: 'flex-start'},
+  alignCenter: {alignItems: 'center'},
+  alignEnd: {alignItems: 'flex-end'},
+  alignBaseline: {alignItems: 'baseline'},
+  alignStretch: {alignItems: 'stretch'},
+  justifyStart: {justifyContent: 'flex-start'},
+  justifyCenter: {justifyContent: 'center'},
+  justifyEnd: {justifyContent: 'flex-end'},
+  justifyBetween: {justifyContent: 'space-between'},
+  gapXs: {gap: spacing.xs},
+  gapSm: {gap: spacing.sm},
+  gapMs: {gap: spacing.ms},
+  gapMd: {gap: spacing.md},
+  gapLg: {gap: spacing.lg},
+  gapXl: {gap: spacing.xl},
+  gapXxl: {gap: spacing.xxl},
+  gapXxxl: {gap: spacing.xxxl},
+})

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,89 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Input} from './Input'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'error'],
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'email', 'number'],
+    },
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {placeholder: 'Enter text...'},
+  play: async ({args, canvas, userEvent}) => {
+    const input = canvas.getByPlaceholderText('Enter text...')
+    await expect(input).toBeInTheDocument()
+    await expect(input).toBeEnabled()
+
+    await userEvent.type(input, 'Hello world')
+    await expect(input).toHaveValue('Hello world')
+    await expect(args.onChange).toHaveBeenCalled()
+  },
+}
+
+export const Error: Story = {
+  args: {variant: 'error', placeholder: 'Invalid input'},
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Invalid input')
+    await expect(input).toHaveAttribute('aria-invalid', 'true')
+  },
+}
+
+export const Password: Story = {
+  args: {type: 'password', placeholder: 'Enter password'},
+  play: async ({canvas, userEvent}) => {
+    const input = canvas.getByPlaceholderText('Enter password')
+    await expect(input).toHaveAttribute('type', 'password')
+
+    await userEvent.type(input, 'secret123')
+    await expect(input).toHaveValue('secret123')
+  },
+}
+
+export const Disabled: Story = {
+  args: {placeholder: 'Disabled', disabled: true},
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Disabled')
+    await expect(input).toBeDisabled()
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Input placeholder="Default input" />
+      <Input variant="error" placeholder="Error input" />
+      <Input type="password" placeholder="Password input" />
+      <Input placeholder="Disabled" disabled />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const inputs = canvas.getAllByRole('textbox')
+    // password type is not role=textbox, so we expect 3
+    await expect(inputs.length).toBe(3)
+
+    const disabled = canvas.getByPlaceholderText('Disabled')
+    await expect(disabled).toBeDisabled()
+  },
+}