@duro-app/ui 0.12.2 → 0.14.1

package/src/components/Input/Input.tsx

@@ -0,0 +1,77 @@
+import {html} from 'react-strict-dom'
+import {useFieldContext} from '../Field/FieldContext'
+import {useInputGroupContext} from '../InputGroup/InputGroupContext'
+import {styles} from './styles.css'
+
+type StrictInputProps = React.ComponentProps<typeof html.input>
+export type InputType = NonNullable<StrictInputProps['type']>
+
+export type InputVariant = 'default' | 'error'
+
+interface InputProps {
+  variant?: InputVariant
+  type?: InputType
+  name?: string
+  placeholder?: string
+  required?: boolean
+  minLength?: number
+  pattern?: string
+  autoComplete?:
+    | 'on'
+    | 'off'
+    | 'email'
+    | 'username'
+    | 'current-password'
+    | 'new-password'
+    | 'name'
+    | 'tel'
+    | 'url'
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export function Input({
+  variant = 'default',
+  type = 'text',
+  name,
+  placeholder,
+  required,
+  minLength,
+  pattern,
+  autoComplete,
+  value,
+  defaultValue,
+  disabled,
+  onChange,
+}: InputProps) {
+  const ctx = useFieldContext()
+  const groupCtx = useInputGroupContext()
+
+  // react-strict-dom omits web-only `pattern` from its types, but the
+  // underlying DOM element supports it. Type-assert to pass it through.
+  const extraProps = pattern !== undefined ? {pattern} : undefined
+
+  return (
+    <html.input
+      id={ctx?.controlId}
+      type={type}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      minLength={minLength}
+      autoComplete={autoComplete}
+      value={value}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      aria-describedby={
+        ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
+      }
+      aria-invalid={ctx?.invalid || variant === 'error' || undefined}
+      onChange={onChange}
+      style={[styles.base, styles[variant], groupCtx?.inGroup && styles.inGroup]}
+      {...(extraProps as Record<string, unknown>)}
+    />
+  )
+}

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

@@ -0,0 +1,60 @@
+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: {
+    boxSizing: 'border-box',
+    width: '100%',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    backgroundColor: colors.bg,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: radii.sm,
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': 1,
+    },
+  },
+  default: {
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+      ':focus': colors.accent,
+    },
+  },
+  error: {
+    borderColor: {
+      default: colors.error,
+      ':focus': colors.error,
+    },
+  },
+  inGroup: {
+    borderWidth: 0,
+    borderRadius: 0,
+    outlineWidth: 0,
+  },
+})

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,119 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {InputGroup} from './InputGroup'
+import {Input} from '../Input/Input'
+
+const meta: Meta = {
+  title: 'Components/InputGroup',
+}
+
+export default meta
+type Story = StoryObj
+
+const onCopy = fn()
+
+export const EndAddon: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <Input placeholder="Certificate password" />
+        <InputGroup.Addon onClick={onCopy}>Copy</InputGroup.Addon>
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Certificate password')
+    await expect(input).toBeInTheDocument()
+
+    const button = canvas.getByRole('button', {name: 'Copy'})
+    await expect(button).toBeInTheDocument()
+  },
+}
+
+export const StartAddon: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">https://</InputGroup.Addon>
+        <Input placeholder="example.com" />
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('https://')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('example.com')).toBeInTheDocument()
+  },
+}
+
+export const BothSides: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">https://</InputGroup.Addon>
+        <Input placeholder="example.com" />
+        <InputGroup.Addon onClick={() => {}}>Go</InputGroup.Addon>
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('https://')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('example.com')).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: 'Go'})).toBeInTheDocument()
+  },
+}
+
+export const ClickableAddon: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <Input placeholder="Click the addon" />
+        <InputGroup.Addon onClick={onCopy}>Copy</InputGroup.Addon>
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const button = canvas.getByRole('button', {name: 'Copy'})
+    await userEvent.click(button)
+    await expect(onCopy).toHaveBeenCalled()
+  },
+}
+
+export const StandaloneInput: Story = {
+  name: 'Standalone Input (unchanged)',
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <Input placeholder="Regular input, no group" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Regular input, no group')
+    await expect(input).toBeInTheDocument()
+  },
+}
+
+const layoutStyles = css.create({
+  container: {maxWidth: 400},
+  stack: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={layoutStyles.stack}>
+      <InputGroup.Root>
+        <Input placeholder="End addon" />
+        <InputGroup.Addon onClick={() => {}}>Copy</InputGroup.Addon>
+      </InputGroup.Root>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">@</InputGroup.Addon>
+        <Input placeholder="Start addon" />
+      </InputGroup.Root>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">https://</InputGroup.Addon>
+        <Input placeholder="Both sides" />
+        <InputGroup.Addon onClick={() => {}}>Go</InputGroup.Addon>
+      </InputGroup.Root>
+      <Input placeholder="Standalone (no group)" />
+    </html.div>
+  ),
+}

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,60 @@
+import type {ReactNode} from 'react'
+import {useMemo} from 'react'
+import {css, html} from 'react-strict-dom'
+import {InputGroupContext} from './InputGroupContext'
+import {styles} from './styles.css'
+
+// --- Root ---
+interface RootProps {
+  children: ReactNode
+}
+
+function Root({children}: RootProps) {
+  const ctx = useMemo(() => ({inGroup: true}), [])
+
+  return (
+    <InputGroupContext.Provider value={ctx}>
+      <html.div style={styles.wrapper}>{children}</html.div>
+    </InputGroupContext.Provider>
+  )
+}
+
+// --- Addon ---
+const dynamicStyles = css.create({
+  minWidth: (value: number | string) => ({minWidth: value}),
+})
+
+interface AddonProps {
+  position?: 'start' | 'end'
+  onClick?: () => void
+  disabled?: boolean
+  /** Optional minimum width to prevent layout shift (e.g. Copy → Copied!) */
+  minWidth?: number | string
+  children: ReactNode
+}
+
+function Addon({position = 'end', onClick, disabled, minWidth, children}: AddonProps) {
+  const positionStyle = position === 'start' ? styles.addonStart : styles.addonEnd
+  const style = [
+    styles.addon,
+    positionStyle,
+    onClick && !disabled && styles.addonClickable,
+    disabled && styles.addonDisabled,
+    minWidth != null && dynamicStyles.minWidth(minWidth),
+  ]
+
+  if (onClick) {
+    return (
+      <html.button type="button" onClick={onClick} disabled={disabled} style={style}>
+        {children}
+      </html.button>
+    )
+  }
+
+  return <html.span style={style}>{children}</html.span>
+}
+
+export const InputGroup = {
+  Root,
+  Addon,
+}

package/src/components/InputGroup/InputGroupContext.ts

@@ -0,0 +1,11 @@
+import {createContext, useContext} from 'react'
+
+interface InputGroupContextValue {
+  inGroup: boolean
+}
+
+export const InputGroupContext = createContext<InputGroupContextValue | null>(null)
+
+export function useInputGroupContext() {
+  return useContext(InputGroupContext)
+}

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

@@ -0,0 +1,61 @@
+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({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'stretch',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':focus-within': colors.accent,
+    },
+    borderRadius: radii.sm,
+    overflow: 'hidden',
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  addon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    backgroundColor: colors.bgCardHover,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+    userSelect: 'none',
+    borderWidth: 0,
+  },
+  addonStart: {
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+  },
+  addonEnd: {
+    borderLeftWidth: 1,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.border,
+  },
+  addonClickable: {
+    cursor: 'pointer',
+    backgroundColor: {
+      default: colors.bgCardHover,
+      ':hover': colors.bgCard,
+      ':active': colors.bg,
+    },
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  addonDisabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+  },
+})

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,91 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {LinkButton} from './LinkButton'
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Components/LinkButton',
+  component: LinkButton,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'small'],
+    },
+    fullWidth: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LinkButton>
+
+export const Primary: Story = {
+  args: {href: '#', variant: 'primary', children: 'Get started'},
+  play: async ({canvas}) => {
+    const link = canvas.getByRole('link', {name: 'Get started'})
+    await expect(link).toBeInTheDocument()
+    await expect(link).toHaveAttribute('href', '#')
+  },
+}
+
+export const Secondary: Story = {
+  args: {href: '#', variant: 'secondary', children: 'Learn more'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('link', {name: 'Learn more'})).toBeInTheDocument()
+  },
+}
+
+export const Small: Story = {
+  args: {href: '#', size: 'small', children: 'Small link'},
+}
+
+export const FullWidth: Story = {
+  args: {href: '#', fullWidth: true, children: 'Full width link'},
+}
+
+export const ExternalLink: Story = {
+  args: {
+    href: 'https://example.com',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    children: 'External',
+  },
+  play: async ({canvas}) => {
+    const link = canvas.getByRole('link', {name: 'External'})
+    await expect(link).toHaveAttribute('target', '_blank')
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+  },
+}
+
+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}>
+        <LinkButton href="#">Primary</LinkButton>
+        <LinkButton href="#" variant="secondary">
+          Secondary
+        </LinkButton>
+      </html.div>
+      <html.div style={rowStyles.row}>
+        <LinkButton href="#" size="small">
+          Small Primary
+        </LinkButton>
+        <LinkButton href="#" variant="secondary" size="small">
+          Small Secondary
+        </LinkButton>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const links = canvas.getAllByRole('link')
+    await expect(links.length).toBe(4)
+  },
+}

package/src/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,42 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type LinkButtonVariant = 'primary' | 'secondary'
+export type LinkButtonSize = 'default' | 'small'
+
+interface LinkButtonProps {
+  href: string
+  variant?: LinkButtonVariant
+  size?: LinkButtonSize
+  fullWidth?: boolean
+  target?: '_blank' | '_self'
+  rel?: string
+  children: ReactNode
+}
+
+const sizeMap = {
+  default: styles.sizeDefault,
+  small: styles.sizeSmall,
+} as const
+
+export function LinkButton({
+  href,
+  variant = 'primary',
+  size = 'default',
+  fullWidth = false,
+  target,
+  rel,
+  children,
+}: LinkButtonProps) {
+  return (
+    <html.a
+      href={href}
+      target={target}
+      rel={rel}
+      style={[styles.base, sizeMap[size], styles[variant], fullWidth && styles.fullWidth]}
+    >
+      {children}
+    </html.a>
+  )
+}

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

@@ -0,0 +1,56 @@
+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,
+    cursor: 'pointer',
+    textDecoration: 'none',
+    transitionProperty: 'background-color, border-color, color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  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,
+    },
+    color: colors.accentContrast,
+  },
+  secondary: {
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    color: colors.textMuted,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+})