@ossy/design-system 3.0.2 → 3.0.4

package/src/inputs/FileField.jsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useState } from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+import { Button } from '../button'
+import { UploadInput } from './Input.jsx'
+import { LocalFilePreview } from './LocalFilePreview.jsx'
+import { acceptsFile } from './acceptsFile.js'
+
+function commitResourceValue(name, value, onChange) {
+  onChange({
+    target: {
+      id: name,
+      name,
+      dataset: { ossyFileResourceReplace: 'true' },
+      value: JSON.stringify(value),
+    },
+  })
+}
+
+function resourceIdFromValue(value) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return typeof value.resourceId === 'string' ? value.resourceId : null
+  }
+  return null
+}
+
+function resourceIdsFromValue(value) {
+  if (!Array.isArray(value)) return []
+  return value
+    .map(item => (item && typeof item.resourceId === 'string' ? item.resourceId : null))
+    .filter(Boolean)
+}
+
+/**
+ * Default built-in file field: picker + local FileReader preview before a
+ * `resourceId` is set. Production apps should register `@ossy/design-system/input/file` /
+ * `@ossy/design-system/input/image` platform components for eager upload (see `@ossy/resources`).
+ */
+export function FileField({
+  name,
+  label,
+  value,
+  onChange,
+  accept,
+  min = 0,
+  max = 1,
+  disabled,
+  required,
+  style = {},
+  ...rest
+}) {
+  const [localFile, setLocalFile] = useState(null)
+  const [localFiles, setLocalFiles] = useState([])
+  const [acceptError, setAcceptError] = useState(null)
+  const multi = max > 1
+
+  const onSinglePick = useCallback(
+    e => {
+      const file = e.target.files?.[0]
+      e.target.value = ''
+      if (!file) return
+      if (!acceptsFile(file, accept)) {
+        setAcceptError(file.name)
+        return
+      }
+      setAcceptError(null)
+      setLocalFile(file)
+    },
+    [accept],
+  )
+
+  const onMultiPick = useCallback(
+    e => {
+      const picked = Array.from(e.target.files || [])
+      e.target.value = ''
+      if (!picked.length) return
+      const valid = picked.filter(f => acceptsFile(f, accept))
+      if (valid.length !== picked.length) {
+        setAcceptError('Some files were rejected by accept filter')
+      } else {
+        setAcceptError(null)
+      }
+      setLocalFiles(prev => {
+        const next = [...prev, ...valid].slice(0, max)
+        return next
+      })
+    },
+    [accept, max],
+  )
+
+  const removeMultiLocal = useCallback(index => {
+    setLocalFiles(prev => prev.filter((_, i) => i !== index))
+  }, [])
+
+  const removeMultiResource = useCallback(
+    resourceId => {
+      const ids = resourceIdsFromValue(value)
+      commitResourceValue(
+        name,
+        ids.filter(id => id !== resourceId).map(id => ({ resourceId: id })),
+        onChange,
+      )
+    },
+    [name, onChange, value],
+  )
+
+  if (multi) {
+    const refs = Array.isArray(value) ? value : []
+    const canAdd = refs.length + localFiles.length < max
+
+    return (
+      <View gap="s" style={style} {...rest}>
+        {refs.map(ref => (
+          <View key={ref.resourceId} layout="row" gap="s" alignItems="center">
+            <Text style={{ flex: 1, fontSize: 14 }}>{ref.resourceId}</Text>
+            <Button
+              type="button"
+              variant="command-danger"
+              prefix="close"
+              size="s"
+              disabled={disabled}
+              onClick={() => removeMultiResource(ref.resourceId)}
+              aria-label={`Remove ${label || name}`}
+            />
+          </View>
+        ))}
+        {localFiles.map((file, index) => (
+          <View key={`${file.name}-${index}`} layout="row" gap="s" alignItems="center">
+            <LocalFilePreview file={file} />
+            <Text style={{ flex: 1, fontSize: 14 }}>{file.name}</Text>
+            <Button
+              type="button"
+              variant="command-danger"
+              prefix="close"
+              size="s"
+              disabled={disabled}
+              onClick={() => removeMultiLocal(index)}
+            />
+          </View>
+        ))}
+        {canAdd && (
+          <UploadInput
+            id={name}
+            name={name}
+            accept={accept}
+            disabled={disabled}
+            required={required && refs.length === 0 && localFiles.length === 0}
+            multiple
+            onChange={onMultiPick}
+          />
+        )}
+        {acceptError && (
+          <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{acceptError}</Text>
+        )}
+        <Text style={{ fontSize: 12, opacity: 0.65 }}>
+          Stub field — register <code>@ossy/design-system/input/file</code> for upload.
+        </Text>
+      </View>
+    )
+  }
+
+  const resourceId = resourceIdFromValue(value)
+
+  return (
+    <View gap="s" style={style} {...rest}>
+      {(localFile || resourceId) && (
+        <View layout="row" gap="s" alignItems="center">
+          {localFile && <LocalFilePreview file={localFile} size="48px" />}
+          {resourceId && !localFile && (
+            <Text style={{ fontSize: 14 }}>{resourceId}</Text>
+          )}
+          {localFile && (
+            <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
+          )}
+        </View>
+      )}
+      <UploadInput
+        id={name}
+        name={name}
+        accept={accept}
+        disabled={disabled}
+        required={required && !resourceId && !localFile}
+        onChange={onSinglePick}
+      />
+      {acceptError && (
+        <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>
+          File not accepted: {acceptError}
+        </Text>
+      )}
+      {!resourceId && (
+        <Text style={{ fontSize: 12, opacity: 0.65 }}>
+          Stub field — register <code>@ossy/design-system/input/file</code> for upload.
+        </Text>
+      )}
+    </View>
+  )
+}

package/src/inputs/Input.jsx

@@ -0,0 +1,209 @@
+import React, { useId, useRef } from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+import { Button } from '../button'
+import { useLocale } from '../locale/index.js'
+
+const inputStyles = `
+  [data-component="input"] {
+    box-sizing: border-box;
+    max-width: 100%;
+    min-width: 0;
+    padding: var(--space-s, 8px) var(--space-m, 16px);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--separator-primary);
+    border-radius: var(--roundness-rounded, 99999px);
+    font-size: var(--text-default-font-size, 16px);
+    font-family: var(--text-default-font-family, sans-serif);
+    font-weight: var(--text-default-font-weight, 400);
+    line-height: 1;
+    color: var(--text-default-color, CanvasText);
+    background-color: var(--surface-primary);
+    box-shadow: none;
+  }
+
+  [data-component="input"]::placeholder {
+    color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
+  }
+
+  [data-component="input"]:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 1px var(--color-accent);
+  }
+
+  [data-component="input"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
+    background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
+    border-color: var(--separator-primary);
+  }
+`
+
+export const Input = ({ placeholder, 'aria-label': ariaLabel, ...props }) => {
+  const { t } = useLocale()
+  return (
+  <>
+    <style href="@ossy/design-system/input" precedence='high'>
+    {inputStyles}
+    </style>
+    <input
+      data-component="input"
+      placeholder={placeholder != null ? t(placeholder) : undefined}
+      aria-label={ariaLabel != null ? t(ariaLabel) : undefined}
+      {...props}
+    />
+  </>
+  )
+}
+
+export const InputTitle = ({ variant = 'breadcrumb', ...props }) => (
+  <>
+    <style href={`@ossy/design-system/input-title/${variant}`} precedence='high'>
+    {`
+      [data-component="input-title"][data-input-title-variant="${variant}"] {
+        box-sizing: border-box;
+        max-width: 100%;
+        min-width: 0;
+        font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
+        line-height: var(--text-${variant}-line-height, 1);
+        font-size: var(--text-${variant}-font-size, 18px);
+        font-weight: var(--text-${variant}-font-weight, 500);
+        letter-spacing: var(--text-${variant}-letter-spacing, 0);
+        color: var(--text-${variant}-color, var(--text-default-color));
+        border: none;
+        background-color: transparent;
+      }
+
+      [data-component="input-title"][data-input-title-variant="${variant}"]::placeholder {
+        color: color-mix(in srgb, var(--text-default-color) 45%, transparent);
+      }
+
+      [data-component="input-title"][data-input-title-variant="${variant}"]:focus {
+        outline: none;
+      }
+    `}
+    </style>
+    <input data-component="input-title" data-input-title-variant={variant} {...props}/>
+  </>
+)
+
+export const Textarea = props => (
+  <>
+    <style href="@ossy/design-system/textarea" precedence='high'>
+    {`
+      [data-component="textarea"] {
+        box-sizing: border-box;
+        height: 120px;
+        width: 100%;
+        max-width: 100%;
+        font-family: var(--text-default-font-family, sans-serif);
+        padding: var(--space-s, 8px) var(--space-m, 16px);
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--separator-primary);
+        border-radius: var(--space-m, 16px);
+        font-size: var(--text-default-font-size, 16px);
+        font-weight: var(--text-default-font-weight, 400);
+        line-height: var(--text-default-line-height, 1.5);
+        color: var(--text-default-color, CanvasText);
+        background-color: var(--surface-primary);
+        resize: vertical;
+      }
+
+      [data-component="textarea"]::placeholder {
+        color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
+      }
+      
+      [data-component="textarea"]:focus {
+        outline: none;
+        border-color: var(--color-accent);
+        box-shadow: 0 0 0 1px var(--color-accent);
+      }
+
+      [data-component="textarea"]:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+        color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
+        background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
+      }
+    `}
+    </style>
+    <textarea data-component="textarea" {...props}/>
+  </>
+)
+
+export const Select = props => (
+  <>
+  <style href="@ossy/design-system/input" precedence='high'>
+    {inputStyles}
+    </style>
+    <select data-component="input" {...props}/>
+  </>
+)
+
+export const UploadInput = ({
+  id,
+  name,
+  icon = 'math-plus',
+  text,
+  surface = 'primary',
+  style = {},
+  accept,
+  disabled,
+  required,
+  ...props
+}) => {
+  const { t } = useLocale()
+  const generatedId = useId()
+  const inputRef = useRef(null)
+  const label = text ?? t('design-system.upload.label')
+  const inputId = id ?? name ?? generatedId
+
+  const openFilePicker = () => {
+    if (!disabled) {
+      inputRef.current?.click()
+    }
+  }
+
+  return (
+    <>
+      <View
+        as="label"
+        htmlFor={inputId}
+        selectable={!disabled}
+        surface={surface}
+        inset="l"
+        roundness="m"
+        gap="s"
+        onClick={openFilePicker}
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          ...style,
+        }}
+      >
+        <Button as="span" prefix={icon} variant="cta" style={{ padding: 'var(--space-m)' }} disabled={disabled} />
+        <Text>{label}</Text>
+      </View>
+      <input
+        ref={inputRef}
+        id={inputId}
+        name={name}
+        type="file"
+        accept={accept}
+        disabled={disabled}
+        required={required}
+        style={{ display: 'none' }}
+        {...props}
+      />
+    </>
+  )
+}
+
+/** @deprecated Use {@link UploadInput} */
+export const Upload = UploadInput

package/src/inputs/Input.stories.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Input, InputTitle, Textarea, Select, Upload } from './Input.jsx'
+import { View } from '../view'
+
+export default {
+  title: 'Design System/Inputs/Input',
+  component: Input,
+  render: () => (
+    <View gap="m" style={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Input />
+      <InputTitle />
+      <Textarea />
+      <Select>
+        <option>Foo</option>
+        <option>Bar</option>
+      </Select>
+      <Upload />
+    </View>
+  ),
+}
+
+export const Default = {}

package/src/inputs/LocalFilePreview.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { View } from '../view'
+
+/**
+ * Thumbnail preview for a local {@link File} via FileReader (data URL).
+ *
+ * @param {{ file: File, size?: string, style?: import('react').CSSProperties }} props
+ */
+export function LocalFilePreview({ file, size = '32px', style = {} }) {
+  const [src, setSrc] = useState(undefined)
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined)
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = e => setSrc(e.target?.result)
+    reader.readAsDataURL(file)
+  }, [file])
+
+  if (!file) return null
+
+  const isImage = file.type?.startsWith('image/')
+
+  if (!isImage) {
+    return (
+      <View
+        width={size}
+        height={size}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 'var(--space-s)',
+          background: 'var(--color-secondary)',
+          fontSize: 10,
+          overflow: 'hidden',
+          ...style,
+        }}
+        aria-hidden
+      >
+        {file.name?.slice(0, 3) || '?'}
+      </View>
+    )
+  }
+
+  return (
+    <View
+      as="img"
+      src={src}
+      alt=""
+      width={size}
+      height={size}
+      style={{
+        objectFit: 'cover',
+        borderRadius: 'var(--space-s)',
+        background: 'var(--color-secondary)',
+        ...style,
+      }}
+    />
+  )
+}

package/src/inputs/acceptsFile.js

@@ -0,0 +1,24 @@
+/**
+ * Client-side check that a {@link File} matches an HTML `accept` string.
+ *
+ * @param {File} file
+ * @param {string | undefined} accept
+ * @returns {boolean}
+ */
+export function acceptsFile(file, accept) {
+  if (!accept || typeof accept !== 'string' || !accept.trim()) return true
+  const name = file?.name || ''
+  const type = file?.type || ''
+  return accept.split(',').some(part => {
+    const rule = part.trim().toLowerCase()
+    if (!rule) return false
+    if (rule.startsWith('.')) {
+      return name.toLowerCase().endsWith(rule)
+    }
+    if (rule.endsWith('/*')) {
+      const prefix = rule.slice(0, -1)
+      return type.toLowerCase().startsWith(prefix)
+    }
+    return type.toLowerCase() === rule
+  })
+}

package/src/inputs/index.js

@@ -0,0 +1,4 @@
+export * from './Input.jsx'
+export { LocalFilePreview } from './LocalFilePreview.jsx'
+export { FileField } from './FileField.jsx'
+export { acceptsFile } from './acceptsFile.js'

package/src/list/List.jsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+
+/**
+ * Vertical list container — rows use {@link ListItem} (storage-style resource rows).
+ */
+export function List ({ children, ...props }) {
+  return (
+    <View stack {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @param {{
+ *   onClick?: (event: import('react').MouseEvent) => void,
+ *   href?: string,
+ *   selectable?: boolean,
+ *   selected?: boolean,
+ *   leading?: import('react').ReactNode,
+ *   trailing?: import('react').ReactNode,
+ *   meta?: import('react').ReactNode,
+ *   density?: 'compact' | 'comfortable',
+ *   children?: import('react').ReactNode,
+ *   'data-testid'?: string,
+ * }} props
+ */
+export function ListItem ({
+  onClick,
+  href,
+  selectable,
+  selected,
+  leading,
+  trailing,
+  meta,
+  density = 'compact',
+  children,
+  ...props
+}) {
+  const comfortable = density === 'comfortable'
+  const mainProps = {
+    gap: 'm',
+    layout: 'row',
+    alignItems: 'center',
+    inset: 'list-row-leading',
+    style: { flexGrow: 1, minWidth: 0, textDecoration: 'none', color: 'inherit', alignItems: comfortable ? 'flex-start' : 'center' },
+    ...(href ? { as: 'a', href } : {}),
+    onClick,
+  }
+
+  return (
+    <View
+      layout="row"
+      selectable={selectable}
+      data-selected={selected || undefined}
+      gap="m"
+      style={{
+        height: comfortable ? undefined : '56px',
+        minHeight: comfortable ? '72px' : undefined,
+        flexShrink: 0,
+        borderBottom: '1px solid var(--separator-primary)',
+        padding: comfortable ? 'var(--space-s) 0' : undefined,
+      }}
+      {...props}
+    >
+      <View {...mainProps}>
+        {leading}
+        {typeof children === 'string' || typeof children === 'number'
+          ? <Text style={{ flexShrink: 1, minWidth: 0 }}>{children}</Text>
+          : children}
+        <View style={{ flexGrow: 1 }} />
+        {meta}
+      </View>
+      {trailing ? (
+        <View inset="list-row-trailing">
+          {trailing}
+        </View>
+      ) : null}
+    </View>
+  )
+}
+
+List.Item = ListItem

package/src/list/List.stories.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Button } from '../button'
+import { Icon } from '../icons/Icon.jsx'
+import { Text } from '../text'
+import { List } from './List.jsx'
+
+export default {
+  title: 'Design System/Display/List',
+  component: List,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Vertical list container for storage-style resource rows. Use `List.Item` for each row — compact (56px) or comfortable density.',
+      },
+    },
+  },
+}
+
+export const Default = () => (
+  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
+    <List.Item
+      leading={<Icon name="folder" size="s" />}
+      meta={<Text variant="small">2.4 MB</Text>}
+      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
+    >
+      Project brief.pdf
+    </List.Item>
+    <List.Item
+      leading={<Icon name="file" size="s" />}
+      meta={<Text variant="small">128 KB</Text>}
+      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
+    >
+      Notes.md
+    </List.Item>
+    <List.Item
+      leading={<Icon name="folder" size="s" />}
+      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
+    >
+      Archive
+    </List.Item>
+  </List>
+)
+
+export const Selectable = () => (
+  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
+    <List.Item selectable leading={<Icon name="mail" size="s" />}>
+      Inbox
+    </List.Item>
+    <List.Item selectable selected leading={<Icon name="mail" size="s" />}>
+      Selected row
+    </List.Item>
+    <List.Item selectable leading={<Icon name="mail" size="s" />}>
+      Sent
+    </List.Item>
+  </List>
+)
+
+export const Comfortable = () => (
+  <List surface="primary" roundness="m" style={{ maxWidth: 520 }}>
+    <List.Item
+      density="comfortable"
+      leading={<Icon name="profile" size="m" />}
+      meta={<Text variant="small">Last active 2h ago</Text>}
+    >
+      <Text variant="heading-tertiary">Alex Rivera</Text>
+    </List.Item>
+    <List.Item
+      density="comfortable"
+      leading={<Icon name="profile" size="m" />}
+      meta={<Text variant="small">Invited</Text>}
+    >
+      <Text variant="heading-tertiary">Sam Chen</Text>
+    </List.Item>
+  </List>
+)
+
+export const WithLinks = () => (
+  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
+    <List.Item href="#" leading={<Icon name="home" size="s" />}>
+      Dashboard
+    </List.Item>
+    <List.Item href="#" leading={<Icon name="user-list" size="s" />}>
+      Team members
+    </List.Item>
+  </List>
+)

package/src/list/index.js

@@ -0,0 +1 @@
+export { List } from './List.jsx'