@duro-app/ui 0.12.2 → 0.14.0

package/src/components/Callout/Callout.stories.tsx

@@ -0,0 +1,97 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Callout} from './Callout'
+
+const meta: Meta<typeof Callout> = {
+  title: 'Components/Callout',
+  component: Callout,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['error', 'success', 'warning', 'info'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Callout>
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children:
+      'A new version of the application is available. Please save your work and refresh the page to get the latest features and security updates.',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children:
+      "It looks like your certificate isn't installed yet. Install the .p12 file from your email, then click the button below. After installing the certificate, you may need to close and reopen your browser for it to be recognized.",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children:
+      'Your account has been created and your certificate is installed. You can now access all resources assigned to your groups. Check your email for a welcome guide with next steps.',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children:
+      'We could not verify your identity. This may happen if your invite link has expired or was already used. Please contact your administrator to request a new invitation.',
+  },
+}
+
+export const ShortText: Story = {
+  name: 'Short text (still wraps)',
+  args: {
+    variant: 'info',
+    children: 'System update available.',
+  },
+}
+
+export const NoIcon: Story = {
+  args: {
+    variant: 'warning',
+    icon: false,
+    children: 'This callout has no icon — behaves like a simple box.',
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Callout variant="error">
+        We could not verify your identity. This may happen if your invite link has expired or was
+        already used. Please contact your administrator.
+      </Callout>
+      <Callout variant="success">
+        Your account has been created and your certificate is installed. You can now access all
+        resources assigned to your groups.
+      </Callout>
+      <Callout variant="warning">
+        It looks like your certificate is not installed yet. Install the .p12 file from your email,
+        then click the button below.
+      </Callout>
+      <Callout variant="info">
+        A new version of the application is available. Please save your work and refresh the page to
+        get the latest features.
+      </Callout>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const callouts = canvas.getAllByRole('note')
+    await expect(callouts.length).toBe(4)
+  },
+}

package/src/components/Callout/Callout.tsx

@@ -0,0 +1,39 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {Icon} from '../Icon'
+import type {IconName} from '../Icon'
+import {styles} from './styles.css'
+
+export type CalloutVariant = 'error' | 'success' | 'warning' | 'info'
+
+const defaultIcons: Record<CalloutVariant, IconName> = {
+  info: 'info-circle-filled',
+  warning: 'alert-triangle-filled',
+  success: 'check-circle-filled',
+  error: 'x-circle-filled',
+}
+
+interface CalloutProps {
+  variant?: CalloutVariant
+  /** Built-in icon name, custom ReactNode, or false to hide. Defaults to variant icon. */
+  icon?: IconName | ReactNode | false
+  children: ReactNode
+}
+
+function resolveIcon(icon: CalloutProps['icon'], variant: CalloutVariant): ReactNode | null {
+  if (icon === false) return null
+  if (icon === undefined) return <Icon name={defaultIcons[variant]} size={36} />
+  if (typeof icon === 'string') return <Icon name={icon as IconName} size={36} />
+  return icon
+}
+
+export function Callout({variant = 'info', icon, children}: CalloutProps) {
+  const resolvedIcon = resolveIcon(icon, variant)
+
+  return (
+    <html.div role="note" style={[styles.base, styles[variant]]}>
+      {resolvedIcon && <html.span style={styles.icon}>{resolvedIcon}</html.span>}
+      {children}
+    </html.div>
+  )
+}

package/src/components/Callout/index.ts

@@ -0,0 +1 @@
+export {Callout, type CalloutVariant} from './Callout'

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

@@ -0,0 +1,45 @@
+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({
+  base: {
+    padding: spacing.md,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    overflow: 'hidden', // contain the float
+  },
+  icon: {
+    float: 'left',
+    marginRight: spacing.sm,
+    marginBottom: spacing.xs,
+    marginTop: 2,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  error: {
+    backgroundColor: colors.errorBg,
+    borderColor: colors.errorBorder,
+    color: colors.errorText,
+  },
+  success: {
+    backgroundColor: colors.successBg,
+    borderColor: colors.successBorder,
+    color: colors.successText,
+  },
+  warning: {
+    backgroundColor: colors.warningBg,
+    borderColor: colors.warningBorder,
+    color: colors.warningText,
+  },
+  info: {
+    backgroundColor: colors.infoBg,
+    borderColor: colors.infoBorder,
+    color: colors.infoText,
+  },
+})

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,119 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Card} from './Card'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['elevated', 'outlined', 'filled', 'interactive'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'compact', 'full'],
+    },
+    header: {control: 'text'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Elevated: Story = {
+  args: {
+    variant: 'elevated',
+    header: 'Elevated Card',
+    children: 'This card has a shadow and larger radius, like a page-level container.',
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Elevated Card')).toBeInTheDocument()
+    await expect(canvas.getByText(/shadow and larger radius/)).toBeInTheDocument()
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    variant: 'outlined',
+    header: 'Outlined Card',
+    children: 'A bordered card section with a title.',
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Outlined Card')).toBeInTheDocument()
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    children: 'A subtle filled card without border or shadow.',
+  },
+}
+
+export const Interactive: Story = {
+  args: {
+    variant: 'interactive',
+    children: 'Hover me! I translate up and show an accent border.',
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText(/Hover me/)).toBeInTheDocument()
+  },
+}
+
+export const Compact: Story = {
+  args: {
+    variant: 'outlined',
+    size: 'compact',
+    header: 'Compact',
+    children: 'Less padding for tighter layouts.',
+  },
+}
+
+export const Full: Story = {
+  args: {
+    variant: 'elevated',
+    size: 'full',
+    header: 'Full Padding',
+    children: 'Extra padding for page-level card containers.',
+  },
+}
+
+const gridStyles = css.create({
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gap: 16,
+  },
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  muted: {color: colors.textMuted, fontSize: '0.875rem'},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={gridStyles.stack}>
+      <html.div style={gridStyles.grid}>
+        <Card variant="elevated" header="Elevated">
+          <html.span style={gridStyles.muted}>Shadow + border</html.span>
+        </Card>
+        <Card variant="outlined" header="Outlined">
+          <html.span style={gridStyles.muted}>Border only</html.span>
+        </Card>
+        <Card variant="filled">
+          <html.span style={gridStyles.muted}>Background only</html.span>
+        </Card>
+        <Card variant="interactive">
+          <html.span style={gridStyles.muted}>Hover to interact</html.span>
+        </Card>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Elevated')).toBeInTheDocument()
+    await expect(canvas.getByText('Outlined')).toBeInTheDocument()
+    await expect(canvas.getByText('Background only')).toBeInTheDocument()
+    await expect(canvas.getByText('Hover to interact')).toBeInTheDocument()
+  },
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,35 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled' | 'interactive'
+export type CardSize = 'default' | 'compact' | 'full'
+
+interface CardProps {
+  variant?: CardVariant
+  size?: CardSize
+  header?: string
+  onClick?: () => void
+  children: ReactNode
+}
+
+const sizeMap = {
+  default: styles.sizeDefault,
+  compact: styles.sizeCompact,
+  full: styles.sizeFull,
+} as const
+
+export function Card({
+  variant = 'outlined',
+  size = 'default',
+  header,
+  onClick,
+  children,
+}: CardProps) {
+  return (
+    <html.div onClick={onClick} style={[styles.base, styles[variant], sizeMap[size]]}>
+      {header && <html.div style={styles.header}>{header}</html.div>}
+      {children}
+    </html.div>
+  )
+}

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

@@ -0,0 +1,67 @@
+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'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+export const styles = css.create({
+  base: {
+    backgroundColor: colors.bgCard,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+  },
+  // Variants
+  elevated: {
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    boxShadow: shadows.md,
+  },
+  outlined: {
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  },
+  filled: {
+    borderRadius: radii.md,
+  },
+  interactive: {
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.accent,
+    },
+    backgroundColor: {
+      default: colors.bgCard,
+      ':hover': colors.bgCardHover,
+    },
+    cursor: 'pointer',
+    transitionProperty: 'background-color, border-color, transform',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    transform: {
+      default: 'translateY(0)',
+      ':hover': 'translateY(-2px)',
+    },
+  },
+  // Sizes (padding)
+  sizeDefault: {
+    padding: spacing.lg,
+  },
+  sizeCompact: {
+    padding: spacing.md,
+  },
+  sizeFull: {
+    padding: spacing.xl,
+  },
+  // Header
+  header: {
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
+    marginBottom: spacing.md,
+  },
+})

package/src/components/Checkbox/Checkbox.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 {Checkbox} from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    checked: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+    defaultChecked: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {children: 'Accept terms and conditions'},
+  play: async ({canvas, userEvent, args}) => {
+    const checkbox = canvas.getByRole('checkbox')
+    await expect(checkbox).toBeInTheDocument()
+    await expect(checkbox).toBeEnabled()
+
+    await userEvent.click(checkbox)
+    await expect(args.onChange).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const Checked: Story = {
+  args: {defaultChecked: true, children: 'Already checked'},
+  play: async ({canvas}) => {
+    const checkbox = canvas.getByRole('checkbox')
+    await expect(checkbox).toBeChecked()
+  },
+}
+
+export const Disabled: Story = {
+  args: {disabled: true, children: 'Disabled option'},
+  play: async ({canvas, userEvent, args}) => {
+    const checkbox = canvas.getByRole('checkbox')
+    await expect(checkbox).toBeDisabled()
+
+    await userEvent.click(checkbox)
+    await expect(args.onChange).not.toHaveBeenCalled()
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {disabled: true, defaultChecked: true, children: 'Disabled checked'},
+  play: async ({canvas}) => {
+    const checkbox = canvas.getByRole('checkbox')
+    await expect(checkbox).toBeDisabled()
+    await expect(checkbox).toBeChecked()
+  },
+}
+
+export const WithoutLabel: Story = {
+  args: {name: 'solo'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('checkbox')).toBeInTheDocument()
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Checkbox>Unchecked</Checkbox>
+      <Checkbox defaultChecked>Checked</Checkbox>
+      <Checkbox disabled>Disabled</Checkbox>
+      <Checkbox disabled defaultChecked>
+        Disabled checked
+      </Checkbox>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(4)
+  },
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,73 @@
+import {type ReactNode, useState, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+interface CheckboxProps {
+  name?: string
+  value?: string
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  children?: ReactNode
+}
+
+export function Checkbox({
+  name,
+  value,
+  checked: controlledChecked,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+  children,
+}: CheckboxProps) {
+  const isControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isControlled ? controlledChecked : internalChecked
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked)
+      }
+      onChange?.(e)
+    },
+    [isControlled, onChange],
+  )
+
+  return (
+    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+      <html.input
+        type="checkbox"
+        name={name}
+        value={value}
+        checked={isControlled ? controlledChecked : undefined}
+        defaultChecked={!isControlled ? defaultChecked : undefined}
+        disabled={disabled}
+        onChange={handleChange}
+        style={styles.input}
+      />
+      <html.span
+        style={[styles.box, isChecked ? styles.boxChecked : styles.boxUnchecked]}
+        aria-hidden
+      >
+        <svg
+          width={12}
+          height={12}
+          viewBox="0 0 12 12"
+          fill="none"
+          style={{opacity: isChecked ? 1 : 0}}
+        >
+          <polyline
+            points="2.5 6 5 8.5 9.5 3.5"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </html.span>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}

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

@@ -0,0 +1,57 @@
+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',
+  },
+  box: {
+    width: 18,
+    height: 18,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: radii.sm,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  boxUnchecked: {
+    backgroundColor: colors.bg,
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+  },
+  boxChecked: {
+    backgroundColor: colors.accent,
+    borderColor: colors.accent,
+  },
+  check: {
+    width: 12,
+    height: 12,
+    color: colors.accentContrast,
+  },
+  input: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+    overflow: 'hidden',
+  },
+})