@duro-app/ui 0.12.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -17,14 +17,14 @@
   },
   "files": [
     "dist",
-    "src/strict.css",
-    "src/global-reset.css"
+    "src"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
@@ -38,7 +38,7 @@
     "react-strict-dom": "^0.0.55"
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.3.0"
+    "@duro-app/tokens": "^0.4.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,76 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Alert} from './Alert'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['error', 'success', 'warning', 'info'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Error: Story = {
+  args: {variant: 'error', children: 'Something went wrong. Please try again.'},
+  play: async ({canvas}) => {
+    const alert = canvas.getByRole('alert')
+    await expect(alert).toBeInTheDocument()
+    await expect(alert).toHaveTextContent('Something went wrong. Please try again.')
+  },
+}
+
+export const Success: Story = {
+  args: {variant: 'success', children: 'Account created successfully!'},
+  play: async ({canvas}) => {
+    const alert = canvas.getByRole('alert')
+    await expect(alert).toHaveTextContent('Account created successfully!')
+  },
+}
+
+export const Warning: Story = {
+  args: {variant: 'warning', children: 'Your session will expire in 5 minutes.'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('alert')).toBeInTheDocument()
+  },
+}
+
+export const Info: Story = {
+  args: {variant: 'info', children: 'A new version is available.'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('alert')).toBeInTheDocument()
+  },
+}
+
+export const NoIcon: Story = {
+  args: {
+    variant: 'info',
+    icon: false,
+    children: 'This alert has no icon.',
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Alert variant="error">Error: Something went wrong.</Alert>
+      <Alert variant="success">Success: Operation completed.</Alert>
+      <Alert variant="warning">Warning: Check your input.</Alert>
+      <Alert variant="info">Info: System update available.</Alert>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const alerts = canvas.getAllByRole('alert')
+    await expect(alerts.length).toBe(4)
+  },
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,45 @@
+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 AlertVariant = 'error' | 'success' | 'warning' | 'info'
+
+const defaultIcons: Record<AlertVariant, IconName> = {
+  info: 'info-circle-filled',
+  warning: 'alert-triangle-filled',
+  success: 'check-circle-filled',
+  error: 'x-circle-filled',
+}
+
+interface AlertProps {
+  variant?: AlertVariant
+  /** Built-in icon name, custom ReactNode, or false to hide. Defaults to variant icon. */
+  icon?: IconName | ReactNode | false
+  children: ReactNode
+}
+
+function resolveIcon(icon: AlertProps['icon'], variant: AlertVariant): ReactNode | null {
+  if (icon === false) return null
+  if (icon === undefined) return <Icon name={defaultIcons[variant]} size={18} />
+  if (typeof icon === 'string') return <Icon name={icon as IconName} size={18} />
+  return icon
+}
+
+export function Alert({variant = 'info', icon, children}: AlertProps) {
+  const resolvedIcon = resolveIcon(icon, variant)
+
+  return (
+    <html.div role="alert" style={[styles.base, styles[variant]]}>
+      {resolvedIcon ? (
+        <>
+          <html.div style={styles.iconWrap}>{resolvedIcon}</html.div>
+          <html.div style={styles.content}>{children}</html.div>
+        </>
+      ) : (
+        children
+      )}
+    </html.div>
+  )
+}

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

@@ -0,0 +1,50 @@
+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: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+    padding: spacing.md,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+  },
+  iconWrap: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 1,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+  },
+  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/Badge/Badge.stories.tsx

@@ -0,0 +1,94 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Badge} from './Badge'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'warning', 'error', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  args: {children: 'Badge'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Badge')).toBeInTheDocument()
+  },
+}
+
+export const Success: Story = {
+  args: {variant: 'success', children: 'Active'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Active')).toBeInTheDocument()
+  },
+}
+
+export const Warning: Story = {
+  args: {variant: 'warning', children: 'Expiring'},
+}
+
+export const Error: Story = {
+  args: {variant: 'error', children: 'Expired'},
+}
+
+export const Info: Story = {
+  args: {variant: 'info', children: 'Updated'},
+}
+
+export const Small: Story = {
+  args: {variant: 'success', size: 'sm', children: 'sm'},
+}
+
+const stackStyles = css.create({
+  row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <html.div style={stackStyles.row}>
+        <Badge>Default</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="error">Error</Badge>
+        <Badge variant="info">Info</Badge>
+      </html.div>
+      <html.div style={stackStyles.row}>
+        <Badge size="sm">Default</Badge>
+        <Badge variant="success" size="sm">
+          Success
+        </Badge>
+        <Badge variant="warning" size="sm">
+          Warning
+        </Badge>
+        <Badge variant="error" size="sm">
+          Error
+        </Badge>
+        <Badge variant="info" size="sm">
+          Info
+        </Badge>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Each variant appears twice: once in md row, once in sm row
+    await expect(canvas.getAllByText('Default').length).toBe(2)
+    await expect(canvas.getAllByText('Success').length).toBe(2)
+    await expect(canvas.getAllByText('Warning').length).toBe(2)
+    await expect(canvas.getAllByText('Error').length).toBe(2)
+    await expect(canvas.getAllByText('Info').length).toBe(2)
+  },
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,21 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
+export type BadgeSize = 'sm' | 'md'
+
+interface BadgeProps {
+  variant?: BadgeVariant
+  size?: BadgeSize
+  children: ReactNode
+}
+
+const sizeMap = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+} as const
+
+export function Badge({variant = 'default', size = 'md', children}: BadgeProps) {
+  return <html.span style={[styles.base, sizeMap[size], styles[variant]]}>{children}</html.span>
+}

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

@@ -0,0 +1,51 @@
+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: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.fontWeightMedium,
+    lineHeight: 1,
+    borderRadius: radii.full,
+    whiteSpace: 'nowrap',
+  },
+  sizeMd: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+  },
+  sizeSm: {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    fontSize: '0.625rem',
+  },
+  default: {
+    backgroundColor: colors.bgCardHover,
+    color: colors.textMuted,
+  },
+  success: {
+    backgroundColor: colors.successBg,
+    color: colors.successText,
+  },
+  warning: {
+    backgroundColor: colors.warningBg,
+    color: colors.warningText,
+  },
+  error: {
+    backgroundColor: colors.errorBg,
+    color: colors.errorText,
+  },
+  info: {
+    backgroundColor: colors.infoBg,
+    color: colors.infoText,
+  },
+})

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,130 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Button} from './Button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    onClick: fn(),
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'link', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'small'],
+    },
+    fullWidth: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {variant: 'primary', children: 'Primary Button'},
+  play: async ({args, canvas, userEvent}) => {
+    const button = canvas.getByRole('button', {name: 'Primary Button'})
+    await expect(button).toBeInTheDocument()
+    await expect(button).toBeEnabled()
+
+    await userEvent.click(button)
+    await expect(args.onClick).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const Secondary: Story = {
+  args: {variant: 'secondary', children: 'Secondary Button'},
+  play: async ({canvas}) => {
+    const button = canvas.getByRole('button', {name: 'Secondary Button'})
+    await expect(button).toBeInTheDocument()
+    await expect(button).toBeEnabled()
+  },
+}
+
+export const Link: Story = {
+  args: {variant: 'link', children: 'Link Button'},
+  play: async ({args, canvas, userEvent}) => {
+    const button = canvas.getByRole('button', {name: 'Link Button'})
+    await userEvent.click(button)
+    await expect(args.onClick).toHaveBeenCalled()
+  },
+}
+
+export const Danger: Story = {
+  args: {variant: 'danger', children: 'Delete'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('button', {name: 'Delete'})).toBeInTheDocument()
+  },
+}
+
+export const Small: Story = {
+  args: {variant: 'primary', size: 'small', children: 'Small'},
+}
+
+export const FullWidth: Story = {
+  args: {variant: 'primary', fullWidth: true, children: 'Full Width'},
+}
+
+export const Disabled: Story = {
+  args: {variant: 'primary', disabled: true, children: 'Disabled'},
+  play: async ({args, canvas, userEvent}) => {
+    const button = canvas.getByRole('button', {name: 'Disabled'})
+    await expect(button).toBeDisabled()
+
+    await userEvent.click(button)
+    await expect(args.onClick).not.toHaveBeenCalled()
+  },
+}
+
+const rowStyles = css.create({
+  row: {display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={rowStyles.stack}>
+      <html.div style={rowStyles.row}>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="danger">Danger</Button>
+      </html.div>
+      <html.div style={rowStyles.row}>
+        <Button variant="primary" size="small">
+          Small Primary
+        </Button>
+        <Button variant="secondary" size="small">
+          Small Secondary
+        </Button>
+        <Button variant="danger" size="small">
+          Small Danger
+        </Button>
+      </html.div>
+      <html.div style={rowStyles.row}>
+        <Button variant="primary" disabled>
+          Disabled Primary
+        </Button>
+        <Button variant="secondary" disabled>
+          Disabled Secondary
+        </Button>
+        <Button variant="danger" disabled>
+          Disabled Danger
+        </Button>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(10)
+
+    const disabledButtons = buttons.filter((b: HTMLElement) => (b as HTMLButtonElement).disabled)
+    await expect(disabledButtons.length).toBe(3)
+  },
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type ButtonVariant = 'primary' | 'secondary' | 'link' | 'danger'
+export type ButtonSize = 'default' | 'small'
+
+interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  fullWidth?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit'
+  onClick?: () => void
+  children: ReactNode
+}
+
+const sizeMap = {
+  default: styles.sizeDefault,
+  small: styles.sizeSmall,
+} as const
+
+export function Button({
+  variant = 'primary',
+  size = 'default',
+  fullWidth = false,
+  disabled = false,
+  type = 'button',
+  onClick,
+  children,
+}: ButtonProps) {
+  return (
+    <html.button
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+      style={[
+        styles.base,
+        sizeMap[size],
+        styles[variant],
+        fullWidth && styles.fullWidth,
+        disabled && styles.disabled,
+      ]}
+    >
+      {children}
+    </html.button>
+  )
+}

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

@@ -0,0 +1,107 @@
+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: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    lineHeight: typography.lineHeight,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    cursor: 'pointer',
+    transitionProperty: 'background-color, border-color, color, opacity',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    textDecoration: 'none',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+  },
+  sizeDefault: {
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  sizeSmall: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+  },
+  primary: {
+    backgroundColor: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+      ':active': colors.accentHover,
+    },
+    borderColor: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+    },
+    color: colors.accentContrast,
+  },
+  secondary: {
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderColor: colors.border,
+    color: colors.textMuted,
+  },
+  link: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    color: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+    },
+    textDecoration: {
+      default: 'none',
+      ':hover': 'underline',
+    },
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+  danger: {
+    backgroundColor: {
+      default: colors.error,
+      ':hover': colors.errorHover,
+      ':active': colors.errorHover,
+    },
+    borderColor: {
+      default: colors.error,
+      ':hover': colors.errorHover,
+    },
+    color: colors.errorContrast,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+})