@duro-app/ui 0.12.2 → 0.14.0

package/src/components/Cluster/Cluster.stories.tsx

@@ -0,0 +1,92 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {css, html} from 'react-strict-dom'
+import {Cluster} from './Cluster'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+const meta: Meta<typeof Cluster> = {
+  title: 'Layout/Cluster',
+  component: Cluster,
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Cluster>
+
+const localStyles = css.create({
+  tag: {
+    backgroundColor: colors.accent,
+    color: colors.accentContrast,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderRadius: 12,
+    fontSize: '0.75rem',
+    whiteSpace: 'nowrap',
+  },
+  narrow: {
+    maxWidth: 300,
+  },
+})
+
+const Tag = ({children}: {children: string}) => (
+  <html.span style={localStyles.tag}>{children}</html.span>
+)
+
+export const Default: Story = {
+  args: {
+    gap: 'sm',
+    align: 'start',
+    justify: 'start',
+  },
+  render: (args) => (
+    <Cluster {...args}>
+      <Tag>React</Tag>
+      <Tag>TypeScript</Tag>
+      <Tag>Design Systems</Tag>
+      <Tag>Tokens</Tag>
+      <Tag>Storybook</Tag>
+    </Cluster>
+  ),
+}
+
+export const ManyTags: Story = {
+  render: () => (
+    <html.div style={localStyles.narrow}>
+      <Cluster gap="xs">
+        <Tag>React</Tag>
+        <Tag>TypeScript</Tag>
+        <Tag>Design Systems</Tag>
+        <Tag>CSS</Tag>
+        <Tag>Tokens</Tag>
+        <Tag>Storybook</Tag>
+        <Tag>Accessibility</Tag>
+        <Tag>Performance</Tag>
+      </Cluster>
+    </html.div>
+  ),
+}
+
+export const Centered: Story = {
+  render: () => (
+    <Cluster gap="sm" justify="center">
+      <Tag>Filter A</Tag>
+      <Tag>Filter B</Tag>
+      <Tag>Filter C</Tag>
+    </Cluster>
+  ),
+}

package/src/components/Cluster/Cluster.tsx

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import type {SpacingKey} from '../Stack/Stack'
+
+interface ClusterProps {
+  gap?: SpacingKey
+  align?: 'start' | 'center' | 'end'
+  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,
+} as const
+
+const justifyMap = {
+  start: styles.justifyStart,
+  center: styles.justifyCenter,
+  end: styles.justifyEnd,
+  between: styles.justifyBetween,
+} as const
+
+export function Cluster({gap = 'sm', align = 'start', justify = 'start', children}: ClusterProps) {
+  return (
+    <html.div style={[styles.base, gapMap[gap], alignMap[align], justifyMap[justify]]}>
+      {children}
+    </html.div>
+  )
+}

package/src/components/Cluster/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: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  alignStart: {alignItems: 'flex-start'},
+  alignCenter: {alignItems: 'center'},
+  alignEnd: {alignItems: 'flex-end'},
+  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/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,54 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {EmptyState} from './EmptyState'
+import {Button} from '../Button/Button'
+import {StatusIcon} from '../StatusIcon/StatusIcon'
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+}
+
+export default meta
+type Story = StoryObj<typeof EmptyState>
+
+export const Default: Story = {
+  args: {message: 'No items found'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('No items found')).toBeInTheDocument()
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    message: 'Nothing to show here',
+    icon: <StatusIcon name="forbidden" variant="muted" size={48} />,
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Nothing to show here')).toBeInTheDocument()
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    message: 'No results match your search',
+    action: <Button variant="secondary">Clear filters</Button>,
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('No results match your search')).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: 'Clear filters'})).toBeInTheDocument()
+  },
+}
+
+export const WithIconAndAction: Story = {
+  args: {
+    message: 'Your inbox is empty',
+    icon: <StatusIcon name="check-done" variant="success" size={48} />,
+    action: <Button variant="primary">Refresh</Button>,
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Your inbox is empty')).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: 'Refresh'})).toBeInTheDocument()
+  },
+}

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,19 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+interface EmptyStateProps {
+  message: string
+  icon?: ReactNode
+  action?: ReactNode
+}
+
+export function EmptyState({message, icon, action}: EmptyStateProps) {
+  return (
+    <html.div style={styles.root}>
+      {icon}
+      <html.p style={styles.message}>{message}</html.p>
+      {action && <html.div style={styles.action}>{action}</html.div>}
+    </html.div>
+  )
+}

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

@@ -0,0 +1,25 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.xl,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+    lineHeight: typography.lineHeight,
+  },
+  action: {
+    marginTop: spacing.sm,
+  },
+})

package/src/components/Field/Field.stories.tsx

@@ -0,0 +1,92 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Field} from './Field'
+import {Input} from '../Input/Input'
+
+const meta: Meta = {
+  title: 'Components/Field',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>Username</Field.Label>
+      <Input placeholder="Enter username" />
+      <Field.Description>3-32 characters, letters and numbers only.</Field.Description>
+    </Field.Root>
+  ),
+  play: async ({canvas}) => {
+    // Label is associated with input via htmlFor/id
+    const input = canvas.getByPlaceholderText('Enter username')
+    await expect(input).toBeInTheDocument()
+
+    const label = canvas.getByText('Username')
+    await expect(label).toBeInTheDocument()
+    await expect(label.tagName).toBe('LABEL')
+
+    // Description text is present
+    await expect(canvas.getByText('3-32 characters, letters and numbers only.')).toBeInTheDocument()
+
+    // Input should reference description via aria-describedby
+    await expect(input).toHaveAttribute('aria-describedby')
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <Field.Root invalid>
+      <Field.Label>Email</Field.Label>
+      <Input variant="error" placeholder="Enter email" />
+      <Field.Error>Please enter a valid email address.</Field.Error>
+    </Field.Root>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Enter email')
+    await expect(input).toHaveAttribute('aria-invalid', 'true')
+
+    // Error message with alert role
+    const error = canvas.getByRole('alert')
+    await expect(error).toBeInTheDocument()
+    await expect(error).toHaveTextContent('Please enter a valid email address.')
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400},
+})
+
+export const FormExample: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Field.Root>
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="johndoe" />
+        <Field.Description>Must be unique.</Field.Description>
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input type="password" placeholder="At least 12 characters" />
+        <Field.Description>Minimum 12 characters.</Field.Description>
+      </Field.Root>
+      <Field.Root invalid>
+        <Field.Label>Confirm Password</Field.Label>
+        <Input type="password" variant="error" />
+        <Field.Error>Passwords do not match.</Field.Error>
+      </Field.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // All labels rendered
+    await expect(canvas.getByText('Username')).toBeInTheDocument()
+    await expect(canvas.getByText('Password')).toBeInTheDocument()
+    await expect(canvas.getByText('Confirm Password')).toBeInTheDocument()
+
+    // Error field has alert
+    const alert = canvas.getByRole('alert')
+    await expect(alert).toHaveTextContent('Passwords do not match.')
+  },
+}

package/src/components/Field/Field.tsx

@@ -0,0 +1,80 @@
+import {type ReactNode, useId, useMemo} from 'react'
+import {html} from 'react-strict-dom'
+import {FieldContext, useFieldContext} from './FieldContext'
+import {styles} from './styles.css'
+
+// --- Root ---
+interface RootProps {
+  invalid?: boolean
+  children: ReactNode
+}
+
+function Root({invalid = false, children}: RootProps) {
+  const id = useId()
+  const ctx = useMemo(
+    () => ({
+      controlId: `${id}-control`,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`,
+      invalid,
+    }),
+    [id, invalid],
+  )
+
+  return (
+    <FieldContext.Provider value={ctx}>
+      <html.div style={styles.root}>{children}</html.div>
+    </FieldContext.Provider>
+  )
+}
+
+// --- Label ---
+interface LabelProps {
+  children: ReactNode
+}
+
+function Label({children}: LabelProps) {
+  const ctx = useFieldContext()
+  return (
+    <html.label for={ctx?.controlId} style={styles.label}>
+      {children}
+    </html.label>
+  )
+}
+
+// --- Description ---
+interface DescriptionProps {
+  children: ReactNode
+}
+
+function Description({children}: DescriptionProps) {
+  const ctx = useFieldContext()
+  return (
+    <html.span id={ctx?.descriptionId} style={styles.description}>
+      {children}
+    </html.span>
+  )
+}
+
+// --- Error ---
+interface ErrorProps {
+  children?: ReactNode
+}
+
+function Error({children}: ErrorProps) {
+  const ctx = useFieldContext()
+  if (!ctx?.invalid && !children) return null
+
+  return (
+    <html.span id={ctx?.errorId} role="alert" style={styles.error}>
+      {children}
+    </html.span>
+  )
+}
+
+export const Field = {
+  Root,
+  Label,
+  Description,
+  Error,
+}

package/src/components/Field/FieldContext.ts

@@ -0,0 +1,14 @@
+import {createContext, useContext} from 'react'
+
+interface FieldContextValue {
+  controlId: string
+  descriptionId: string
+  errorId: string
+  invalid: boolean
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null)
+
+export function useFieldContext() {
+  return useContext(FieldContext)
+}

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

@@ -0,0 +1,25 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.xs,
+  },
+  label: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    color: colors.text,
+  },
+  description: {
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+  },
+  error: {
+    fontSize: typography.fontSizeXs,
+    color: colors.error,
+  },
+})

package/src/components/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,85 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {Fieldset} from './Fieldset'
+import {Field} from '../Field/Field'
+import {Input} from '../Input/Input'
+import {Button} from '../Button/Button'
+
+const meta: Meta<typeof Fieldset.Root> = {
+  title: 'Components/Fieldset',
+  component: Fieldset.Root,
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl'],
+    },
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Fieldset.Root>
+
+export const Default: Story = {
+  args: {gap: 'md'},
+  render: (args) => (
+    <Fieldset.Root {...args}>
+      <Fieldset.Legend>Account Information</Fieldset.Legend>
+      <Field.Root>
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="Enter username" />
+        <Field.Description>3-32 characters: letters, numbers, hyphens</Field.Description>
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input type="password" placeholder="Enter password" />
+        <Field.Description>At least 12 characters</Field.Description>
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Confirm Password</Field.Label>
+        <Input type="password" placeholder="Confirm password" />
+      </Field.Root>
+      <Button variant="primary" fullWidth>
+        Create Account
+      </Button>
+    </Fieldset.Root>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {gap: 'md', disabled: true},
+  render: (args) => (
+    <Fieldset.Root {...args}>
+      <Fieldset.Legend>Account Information</Fieldset.Legend>
+      <Field.Root>
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="Enter username" />
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input type="password" placeholder="Enter password" />
+      </Field.Root>
+      <Button variant="primary" fullWidth>
+        Submit
+      </Button>
+    </Fieldset.Root>
+  ),
+}
+
+export const CompactGap: Story = {
+  args: {gap: 'sm'},
+  render: (args) => (
+    <Fieldset.Root {...args}>
+      <Field.Root>
+        <Field.Label>Email</Field.Label>
+        <Input type="email" placeholder="you@example.com" />
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Name</Field.Label>
+        <Input placeholder="Your name" />
+      </Field.Root>
+      <Button variant="primary" fullWidth>
+        Save
+      </Button>
+    </Fieldset.Root>
+  ),
+}

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type FieldsetGap = 'xs' | 'sm' | 'ms' | 'md' | 'lg' | 'xl'
+
+const gapMap = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  ms: styles.gapMs,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+} as const
+
+// --- Root ---
+interface RootProps {
+  /** Disables all form controls within the fieldset */
+  disabled?: boolean
+  /** Gap between child elements */
+  gap?: FieldsetGap
+  children: ReactNode
+}
+
+function Root({disabled = false, gap = 'md', children}: RootProps) {
+  return (
+    <html.fieldset
+      disabled={disabled}
+      style={[styles.root, gapMap[gap], disabled && styles.disabled]}
+    >
+      {children}
+    </html.fieldset>
+  )
+}
+
+// --- Legend ---
+interface LegendProps {
+  children: ReactNode
+}
+
+function Legend({children}: LegendProps) {
+  return <html.legend style={styles.legend}>{children}</html.legend>
+}
+
+export const Fieldset = {
+  Root,
+  Legend,
+}

package/src/components/Fieldset/index.ts

@@ -0,0 +1 @@
+export {Fieldset, type FieldsetGap} from './Fieldset'

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

@@ -0,0 +1,33 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    // Reset native fieldset chrome
+    borderWidth: 0,
+    margin: 0,
+    padding: 0,
+    minWidth: 0,
+  },
+  legend: {
+    // Reset native legend quirks
+    padding: 0,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    color: colors.text,
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  gapXs: {gap: spacing.xs},
+  gapSm: {gap: spacing.sm},
+  gapMs: {gap: spacing.ms},
+  gapMd: {gap: spacing.md},
+  gapLg: {gap: spacing.lg},
+  gapXl: {gap: spacing.xl},
+})