@duro-app/ui 0.12.1 → 0.14.0

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,24 @@
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type SpinnerSize = 'sm' | 'md' | 'lg'
+
+interface SpinnerProps {
+  size?: SpinnerSize
+  label?: string
+}
+
+const sizeMap = {
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+} as const
+
+export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
+  return (
+    <html.div role="status" style={styles.root}>
+      <html.div style={[styles.spinner, sizeMap[size]]} aria-hidden />
+      <html.span style={styles.srOnly}>{label}</html.span>
+    </html.div>
+  )
+}

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

@@ -0,0 +1,47 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+const spin = css.keyframes({
+  '0%': {transform: 'rotate(0deg)'},
+  '100%': {transform: 'rotate(360deg)'},
+})
+
+export const styles = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  spinner: {
+    borderRadius: '50%',
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderTopColor: colors.accent,
+    animationName: spin,
+    animationDuration: '0.6s',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+  },
+  sm: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+  },
+  md: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+  },
+  lg: {
+    width: 40,
+    height: 40,
+    borderWidth: 3,
+  },
+  srOnly: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+  },
+})

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,103 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {css, html} from 'react-strict-dom'
+import {Stack} from './Stack'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+const meta: Meta<typeof Stack> = {
+  title: 'Layout/Stack',
+  component: Stack,
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'stretch'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+const localStyles = css.create({
+  box: {
+    backgroundColor: colors.accent,
+    color: colors.accentContrast,
+    padding: spacing.sm,
+    borderRadius: 4,
+    textAlign: 'center',
+    fontSize: '0.875rem',
+  },
+  label: {
+    fontSize: '0.75rem',
+    color: colors.textMuted,
+  },
+})
+
+const Box = ({children}: {children: string}) => (
+  <html.div style={localStyles.box}>{children}</html.div>
+)
+
+export const Default: Story = {
+  args: {
+    gap: 'md',
+    align: 'stretch',
+  },
+  render: (args) => (
+    <Stack {...args}>
+      <Box>First item</Box>
+      <Box>Second item</Box>
+      <Box>Third item</Box>
+    </Stack>
+  ),
+}
+
+export const Tight: Story = {
+  render: () => (
+    <Stack gap="xs">
+      <Box>Tight spacing (4px)</Box>
+      <Box>Between items</Box>
+      <Box>For related content</Box>
+    </Stack>
+  ),
+}
+
+export const Spacious: Story = {
+  render: () => (
+    <Stack gap="xl">
+      <Box>Section one</Box>
+      <Box>Section two</Box>
+      <Box>Section three</Box>
+    </Stack>
+  ),
+}
+
+export const CenterAligned: Story = {
+  render: () => (
+    <Stack gap="md" align="center">
+      <Box>Short</Box>
+      <Box>A wider content block</Box>
+      <Box>Medium</Box>
+    </Stack>
+  ),
+}
+
+export const AllGaps: Story = {
+  render: () => {
+    const gaps = ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'] as const
+    return (
+      <Stack gap="xl">
+        {gaps.map((g) => (
+          <Stack key={g} gap={g}>
+            <html.span style={localStyles.label}>gap="{g}"</html.span>
+            <Box>A</Box>
+            <Box>B</Box>
+          </Stack>
+        ))}
+      </Stack>
+    )
+  },
+}

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,33 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type SpacingKey = 'xs' | 'sm' | 'ms' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'
+
+interface StackProps {
+  gap?: SpacingKey
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  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,
+  stretch: styles.alignStretch,
+} as const
+
+export function Stack({gap = 'md', align = 'stretch', children}: StackProps) {
+  return <html.div style={[styles.base, gapMap[gap], alignMap[align]]}>{children}</html.div>
+}

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

@@ -0,0 +1,21 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  alignStart: {alignItems: 'flex-start'},
+  alignCenter: {alignItems: 'center'},
+  alignEnd: {alignItems: 'flex-end'},
+  alignStretch: {alignItems: 'stretch'},
+  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/StatusIcon/StatusIcon.stories.tsx

@@ -0,0 +1,81 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {StatusIcon} from './StatusIcon'
+
+const meta: Meta<typeof StatusIcon> = {
+  title: 'Components/StatusIcon',
+  component: StatusIcon,
+  argTypes: {
+    name: {
+      control: 'select',
+      options: ['x-circle', 'check-circle', 'check-done', 'clock', 'forbidden'],
+    },
+    variant: {
+      control: 'select',
+      options: ['error', 'success', 'warning', 'muted'],
+    },
+    size: {control: 'number'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StatusIcon>
+
+export const Error: Story = {
+  args: {name: 'x-circle', variant: 'error'},
+}
+
+export const Success: Story = {
+  args: {name: 'check-circle', variant: 'success'},
+}
+
+export const Warning: Story = {
+  args: {name: 'clock', variant: 'warning'},
+}
+
+export const Muted: Story = {
+  args: {name: 'forbidden', variant: 'muted'},
+}
+
+export const CheckDone: Story = {
+  args: {name: 'check-done', variant: 'success'},
+}
+
+export const CustomSize: Story = {
+  args: {name: 'check-circle', variant: 'success', size: 24},
+}
+
+const gridStyles = css.create({
+  grid: {display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 24},
+  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8},
+  label: {fontSize: '0.875rem', color: '#888'},
+})
+
+export const AllIcons: Story = {
+  render: () => (
+    <html.div style={gridStyles.grid}>
+      {(['x-circle', 'check-circle', 'check-done', 'clock', 'forbidden'] as const).map((name) => (
+        <html.div key={name} style={gridStyles.cell}>
+          <StatusIcon name={name} variant="muted" />
+          <html.span style={gridStyles.label}>{name}</html.span>
+        </html.div>
+      ))}
+    </html.div>
+  ),
+}
+
+const rowStyles = css.create({
+  row: {display: 'flex', gap: 24, alignItems: 'center'},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={rowStyles.row}>
+      <StatusIcon name="x-circle" variant="error" />
+      <StatusIcon name="check-circle" variant="success" />
+      <StatusIcon name="clock" variant="warning" />
+      <StatusIcon name="forbidden" variant="muted" />
+    </html.div>
+  ),
+}

package/src/components/StatusIcon/StatusIcon.tsx

@@ -0,0 +1,24 @@
+import {html} from 'react-strict-dom'
+import {Icon} from '../Icon'
+import type {IconName} from '../Icon'
+import {styles} from './styles.css'
+
+export type StatusIconName = Extract<
+  IconName,
+  'x-circle' | 'check-circle' | 'check-done' | 'clock' | 'forbidden'
+>
+export type StatusIconVariant = 'error' | 'success' | 'warning' | 'info' | 'muted'
+
+interface StatusIconProps {
+  name: StatusIconName
+  size?: number
+  variant?: StatusIconVariant
+}
+
+export function StatusIcon({name, size = 48, variant = 'muted'}: StatusIconProps) {
+  return (
+    <html.div style={[styles.root, styles[variant]]}>
+      <Icon name={name} size={size} />
+    </html.div>
+  )
+}

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

@@ -0,0 +1,27 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: spacing.md,
+  },
+  error: {
+    color: colors.error,
+  },
+  success: {
+    color: colors.success,
+  },
+  warning: {
+    color: colors.warning,
+  },
+  info: {
+    color: colors.info,
+  },
+  muted: {
+    color: colors.textMuted,
+  },
+})

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,88 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Switch} from './Switch'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  args: {
+    onCheckedChange: fn(),
+  },
+  argTypes: {
+    checked: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+    defaultChecked: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {children: 'Enable notifications'},
+  play: async ({canvas, userEvent, args}) => {
+    const switchEl = canvas.getByRole('switch')
+    await expect(switchEl).toBeInTheDocument()
+    await expect(switchEl).not.toBeChecked()
+
+    await userEvent.click(switchEl)
+    await expect(args.onCheckedChange).toHaveBeenCalledWith(true)
+  },
+}
+
+export const Checked: Story = {
+  args: {defaultChecked: true, children: 'Already enabled'},
+  play: async ({canvas}) => {
+    const switchEl = canvas.getByRole('switch')
+    await expect(switchEl).toBeChecked()
+  },
+}
+
+export const Disabled: Story = {
+  args: {disabled: true, children: 'Cannot toggle'},
+  play: async ({canvas, userEvent, args}) => {
+    const switchEl = canvas.getByRole('switch')
+    await expect(switchEl).toBeDisabled()
+
+    await userEvent.click(switchEl)
+    await expect(args.onCheckedChange).not.toHaveBeenCalled()
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {disabled: true, defaultChecked: true, children: 'Locked on'},
+  play: async ({canvas}) => {
+    const switchEl = canvas.getByRole('switch')
+    await expect(switchEl).toBeDisabled()
+    await expect(switchEl).toBeChecked()
+  },
+}
+
+export const WithoutLabel: Story = {
+  args: {name: 'darkMode'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('switch')).toBeInTheDocument()
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Switch>Unchecked</Switch>
+      <Switch defaultChecked>Checked</Switch>
+      <Switch disabled>Disabled</Switch>
+      <Switch disabled defaultChecked>
+        Disabled checked
+      </Switch>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const switches = canvas.getAllByRole('switch')
+    await expect(switches.length).toBe(4)
+  },
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,78 @@
+import {type ReactNode, useCallback, useRef} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+
+interface SwitchProps {
+  /** Controlled checked state. */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onCheckedChange?: (checked: boolean) => void
+  /** Prevents user interaction. */
+  disabled?: boolean
+  /** Form field name for the hidden input. */
+  name?: string
+  /** Value submitted when checked. */
+  value?: string
+  /** Label content rendered beside the switch. */
+  children?: ReactNode
+}
+
+export function Switch({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  name,
+  value,
+  children,
+}: SwitchProps) {
+  const [checked, setChecked] = useControllableValue(
+    controlledChecked,
+    defaultChecked,
+    onCheckedChange,
+  )
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleClick = useCallback(() => {
+    if (disabled) return
+    setChecked(!checked)
+    // Keep hidden input in sync for form submission
+    if (inputRef.current) {
+      inputRef.current.checked = !checked
+    }
+  }, [disabled, checked, setChecked])
+
+  return (
+    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+      <html.input
+        ref={inputRef}
+        type="checkbox"
+        role="switch"
+        name={name}
+        value={value}
+        checked={controlledChecked !== undefined ? controlledChecked : undefined}
+        defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
+        disabled={disabled}
+        aria-checked={checked}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onCheckedChange?.(e.target.checked)
+        }}
+        style={styles.input}
+      />
+      <html.button
+        type="button"
+        tabIndex={-1}
+        aria-hidden
+        disabled={disabled}
+        onClick={handleClick}
+        style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}
+      >
+        <html.span style={[styles.thumb, checked && styles.thumbChecked]} />
+      </html.button>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}

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

@@ -0,0 +1,71 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    cursor: 'pointer',
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    lineHeight: typography.lineHeight,
+  },
+  rootDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  track: {
+    position: 'relative',
+    width: 36,
+    height: 20,
+    borderRadius: radii.full,
+    borderWidth: 0,
+    padding: 0,
+    cursor: 'inherit',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {default: 0, ':focus-visible': 2},
+    outlineStyle: 'solid',
+    outlineColor: colors.accent,
+    outlineOffset: 2,
+    flexShrink: 0,
+  },
+  trackUnchecked: {
+    backgroundColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+  },
+  trackChecked: {
+    backgroundColor: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+    },
+  },
+  thumb: {
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    width: 16,
+    height: 16,
+    borderRadius: radii.full,
+    backgroundColor: '#fff',
+    transitionProperty: 'transform',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  thumbChecked: {
+    transform: 'translateX(16px)',
+  },
+  input: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+    overflow: 'hidden',
+  },
+})