@ossy/design-system 3.0.2 → 3.0.4

package/src/fields/Fields.stories.jsx

@@ -0,0 +1,357 @@
+import React, { useState } from 'react'
+import { ComponentSlotsProvider } from '../component-slots'
+import { Input } from '../inputs'
+import { Button } from '../button'
+import { View } from '../view'
+import {
+  Fields,
+  applyFieldChange,
+  FIELD_TYPES,
+  DEFAULT_FORM_FIELD_SLOTS,
+} from './index.js'
+
+const mutedTextStyle = {
+  fontSize: 14,
+  color: 'color-mix(in srgb, var(--text-default-color, CanvasText) 72%, transparent)',
+  marginBottom: 'var(--space-m)',
+}
+
+const dataPreviewStyle = {
+  margin: 0,
+  padding: 'var(--space-s)',
+  background: 'var(--color-secondary)',
+  color: 'var(--text-default-color, CanvasText)',
+  borderRadius: 'var(--space-xs)',
+  border: '1px solid var(--separator-primary)',
+  fontSize: 12,
+  overflow: 'auto',
+}
+
+export default {
+  title: 'Design System/Forms/Fields',
+  component: Fields,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+const shell = (story, initial = {}) => {
+  const Shell = () => {
+    const [data, setData] = useState(initial)
+    return (
+      <View
+        surface="primary"
+        inset="m"
+        roundness="m"
+        gap="m"
+        style={{ maxWidth: 480, fontFamily: 'system-ui, sans-serif' }}
+      >
+        {story(data, e => setData(prev => applyFieldChange(prev, e)))}
+        <pre style={dataPreviewStyle}>{JSON.stringify(data, null, 2)}</pre>
+      </View>
+    )
+  }
+  return <Shell />
+}
+
+export const AllAllowedTypes = () =>
+  shell((data, onChange) => (
+    <>
+      <p style={mutedTextStyle}>
+        Allowed API types: {FIELD_TYPES.join(', ')}
+      </p>
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[
+          { name: 'Title', type: 'text', required: true },
+          { name: 'Summary', type: 'textarea' },
+          { name: 'Body', type: 'richtext' },
+          { name: 'Count', type: 'number' },
+          { name: 'Kind', type: 'select', options: ['A', 'B', 'C'] },
+          { name: 'Tags', type: 'multiselect', options: ['x', 'y', 'z'] },
+          { name: 'Hero', type: 'file', accept: 'image/*' },
+          { name: 'Attachments', type: 'file', max: 3 },
+          { name: 'Cover', type: 'image' },
+          { name: 'Published', type: 'boolean' },
+          { name: 'Start date', type: 'date' },
+          { name: 'Vacation', type: 'date-range' },
+          { name: 'Blackouts', type: 'date-ranges' },
+        ]}
+      />
+    </>
+  ), {
+    Title: 'Example',
+    Kind: 'B',
+    Tags: ['x'],
+    Published: false,
+    'Start date': Date.parse('2025-01-15T00:00:00.000Z'),
+    Vacation: { start: Date.parse('2025-07-01T00:00:00.000Z'), end: Date.parse('2025-07-14T00:00:00.000Z') },
+    Blackouts: [
+      { start: Date.parse('2025-12-24T00:00:00.000Z'), end: Date.parse('2025-12-26T00:00:00.000Z') },
+    ],
+  })
+
+export const Text = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Label', type: 'text' }]} />
+    ),
+    { Label: 'Hello' },
+  )
+
+export const Textarea = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Notes', type: 'textarea' }]}
+      />
+    ),
+    { Notes: 'Multi\nline' },
+  )
+
+export const Richtext = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Article', type: 'richtext' }]} />
+    ),
+    { Article: '# Heading\n\nParagraph.' },
+  )
+
+export const Number = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Amount', type: 'number' }]} />
+    ),
+    { Amount: 42 },
+  )
+
+export const Select = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Choice', type: 'select', options: ['One', 'Two', 'Three'] }]}
+      />
+    ),
+    { Choice: 'Two' },
+  )
+
+export const MultiselectTags = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[
+          {
+            name: 'Skills',
+            type: 'multiselect',
+            options: ['React', 'Design', 'Writing'],
+          },
+        ]}
+      />
+    ),
+    { Skills: ['React', 'Custom skill'] },
+  )
+
+export const File = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Attachment', type: 'file', accept: '.pdf,image/*' }]}
+      />
+    ),
+    {},
+  )
+
+export const FileMulti = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Gallery', type: 'file', accept: 'image/*', max: 3 }]}
+      />
+    ),
+    { Gallery: [{ resourceId: 'mock-res-1' }] },
+  )
+
+export const Image = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Cover', type: 'image' }]} />
+    ),
+    {},
+  )
+
+const MockUploadFileField = ({ name, onChange }) => (
+  <Button
+    type="button"
+    variant="neutral"
+    onClick={() =>
+      onChange({
+        target: {
+          name,
+          id: name,
+          dataset: { ossyFileResourceReplace: 'true' },
+          value: JSON.stringify({ resourceId: 'storybook-mock-resource' }),
+        },
+      })
+    }
+  >
+    Mock upload
+  </Button>
+)
+
+/** Mock `@ossy/design-system/input/file` via component slots. */
+export const FileWithMockPlatformSlot = () => {
+  const Shell = () => {
+    const [data, setData] = useState({})
+    return (
+      <View
+        surface="primary"
+        inset="m"
+        roundness="m"
+        gap="m"
+        style={{ maxWidth: 480, fontFamily: 'system-ui, sans-serif' }}
+      >
+        <ComponentSlotsProvider
+          slots={{
+            ...DEFAULT_FORM_FIELD_SLOTS,
+            '@ossy/design-system/input/file': MockUploadFileField,
+          }}
+        >
+          <Fields
+            data={data}
+            onChange={e => setData(prev => applyFieldChange(prev, e))}
+            fields={[{ name: 'Avatar', type: 'file', accept: 'image/*' }]}
+          />
+        </ComponentSlotsProvider>
+        <pre style={dataPreviewStyle}>{JSON.stringify(data, null, 2)}</pre>
+      </View>
+    )
+  }
+  return <Shell />
+}
+
+export const Boolean = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Agree', type: 'boolean' }]} />
+    ),
+    { Agree: true },
+  )
+
+export const DateField = () =>
+  shell(
+    (data, onChange) => (
+      <Fields data={data} onChange={onChange} fields={[{ name: 'Due', type: 'date' }]} />
+    ),
+    { Due: '2026-06-01' },
+  )
+
+DateField.storyName = 'Date'
+
+export const DateRange = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Vacation', type: 'date-range' }]}
+      />
+    ),
+    {
+      Vacation: {
+        start: Date.parse('2025-07-01T00:00:00.000Z'),
+        end: Date.parse('2025-07-14T00:00:00.000Z'),
+      },
+    },
+  )
+
+export const DateRanges = () =>
+  shell(
+    (data, onChange) => (
+      <Fields
+        data={data}
+        onChange={onChange}
+        fields={[{ name: 'Blackouts', type: 'date-ranges' }]}
+      />
+    ),
+    {
+      Blackouts: [
+        {
+          start: Date.parse('2025-12-24T00:00:00.000Z'),
+          end: Date.parse('2025-12-26T00:00:00.000Z'),
+        },
+        {
+          start: Date.parse('2026-01-01T00:00:00.000Z'),
+          end: Date.parse('2026-01-02T00:00:00.000Z'),
+        },
+      ],
+    },
+  )
+
+const TomatoTextField = ({ label, value, onChange, style = {}, ...rest }) => (
+  <Input
+    {...rest}
+    id={label}
+    type="text"
+    value={value ?? ''}
+    onChange={onChange}
+    style={{
+      minWidth: '50%',
+      ...style,
+      borderColor: 'tomato',
+      borderWidth: 2,
+      borderStyle: 'solid',
+    }}
+  />
+)
+
+/** Override `@ossy/design-system/input/text` via component slots. */
+export const SlotOverrideFormFieldText = () => {
+  const Shell = () => {
+    const [data, setData] = useState({ Title: 'Custom slot' })
+    return (
+      <View
+        surface="primary"
+        inset="m"
+        roundness="m"
+        gap="m"
+        style={{ maxWidth: 480, fontFamily: 'system-ui, sans-serif' }}
+      >
+        <p style={{ ...mutedTextStyle, marginBottom: 'var(--space-s)' }}>
+          <code>@ossy/design-system/input/text</code> uses a custom component registered on that
+          slot key.
+        </p>
+        <ComponentSlotsProvider
+          slots={{
+            ...DEFAULT_FORM_FIELD_SLOTS,
+            '@ossy/design-system/input/text': TomatoTextField,
+          }}
+        >
+          <Fields
+            data={data}
+            onChange={e => setData(prev => applyFieldChange(prev, e))}
+            fields={[{ name: 'Title', type: 'text', required: true }]}
+          />
+        </ComponentSlotsProvider>
+        <pre style={dataPreviewStyle}>{JSON.stringify(data, null, 2)}</pre>
+      </View>
+    )
+  }
+  return <Shell />
+}

package/src/fields/applyFieldChange.js

@@ -0,0 +1,132 @@
+function setAtPath(obj, path, value) {
+  if (path.length === 0) return obj
+  const [head, ...rest] = path
+  if (rest.length === 0) {
+    return { ...obj, [head]: value }
+  }
+  const prevChild = obj[head]
+  const child =
+    prevChild && typeof prevChild === 'object' && !Array.isArray(prevChild)
+      ? prevChild
+      : {}
+  return { ...obj, [head]: setAtPath(child, rest, value) }
+}
+
+function changePathFromTarget(t) {
+  if (t.type === 'radio') {
+    return [t.name]
+  }
+  if (typeof t.id === 'string' && t.id.length > 0) {
+    return t.id.split('.')
+  }
+  if (typeof t.name === 'string' && t.name.length > 0) {
+    return [t.name]
+  }
+  return []
+}
+
+/**
+ * Immutable update for document `content` keyed by template field names.
+ *
+ * - Dotted `id` paths map to nested keys (split on `.`).
+ * - Legacy multiselect: checkboxes with `data-ossy-multiselect` and `data-ossy-option`.
+ * - Tags-style multiselect: `data-ossy-multiselect-replace` with `id` = field name and
+ *   `value` = JSON.stringify(string[]).
+ * - File fields: `data-ossy-file-resource-replace` with `value` = JSON.stringify(
+ *   `{ resourceId }` or `{ resourceId }[]`).
+ *
+ * @param {Record<string, unknown>} data
+ * @param {import('react').ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | { target: Partial<HTMLInputElement> & { dataset?: DOMStringMap, value?: string } }} event
+ * @returns {Record<string, unknown>}
+ */
+export function applyFieldChange(data, event) {
+  const base =
+    data === undefined || data === null
+      ? {}
+      : typeof data === 'object' && !Array.isArray(data)
+        ? { ...data }
+        : {}
+
+  const t = event?.target
+  if (!t) return base
+
+  if (t.dataset?.ossyMultiselectReplace === 'true') {
+    const fieldName = typeof t.id === 'string' ? t.id : ''
+    if (!fieldName) return base
+    let next
+    try {
+      next = JSON.parse(t.value || '[]')
+    } catch {
+      return base
+    }
+    if (!Array.isArray(next) || !next.every(x => typeof x === 'string')) return base
+    return { ...base, [fieldName]: next }
+  }
+
+  if (t.dataset?.ossyFileResourceReplace === 'true') {
+    const fieldName = typeof t.name === 'string' && t.name ? t.name : (typeof t.id === 'string' ? t.id : '')
+    if (!fieldName) return base
+    let next
+    try {
+      next = JSON.parse(t.value || 'null')
+    } catch {
+      return base
+    }
+    return { ...base, [fieldName]: next }
+  }
+
+  if (t.dataset?.ossyDateRangeReplace === 'true') {
+    const fieldName = typeof t.id === 'string' ? t.id : (typeof t.name === 'string' ? t.name : '')
+    if (!fieldName) return base
+    let next
+    try {
+      next = JSON.parse(t.value || 'null')
+    } catch {
+      return base
+    }
+    if (!next || typeof next !== 'object' || Array.isArray(next)) return base
+    return { ...base, [fieldName]: next }
+  }
+
+  if (t.dataset?.ossyDateRangesReplace === 'true') {
+    const fieldName = typeof t.id === 'string' ? t.id : (typeof t.name === 'string' ? t.name : '')
+    if (!fieldName) return base
+    let next
+    try {
+      next = JSON.parse(t.value || '[]')
+    } catch {
+      return base
+    }
+    if (!Array.isArray(next)) return base
+    return { ...base, [fieldName]: next }
+  }
+
+  if (t.type === 'checkbox' && t.dataset?.ossyMultiselect === 'true') {
+    const fieldName = t.name
+    const option = t.dataset?.ossyOption
+    if (!fieldName || option === undefined) return base
+    const prev = Array.isArray(base[fieldName]) ? [...base[fieldName]] : []
+    const next = t.checked
+      ? [...new Set([...prev, option])]
+      : prev.filter(x => x !== option)
+    return { ...base, [fieldName]: next }
+  }
+
+  let value
+  if (t.type === 'checkbox') {
+    value = t.checked
+  } else if (t.type === 'file') {
+    value = t.files?.[0]
+  } else if (t.type === 'number') {
+    value = t.value === '' || t.value === undefined || t.value === null
+      ? undefined
+      : Number(t.value)
+  } else {
+    value = t.value
+  }
+
+  const path = changePathFromTarget(t)
+  if (path.length === 0) return base
+
+  return setAtPath(base, path, value)
+}

package/src/fields/fieldTranslationKeys.js

@@ -0,0 +1,18 @@
+/**
+ * Resource-anchored field copy keys: `{schemaId}.{fieldName}.{suffix}`.
+ *
+ * @param {string} schemaId Resource schema id (e.g. `@ossy/authentication/sign-up`)
+ * @param {string} fieldName Field `name` from resource schema
+ * @param {'label' | 'placeholder' | 'description'} suffix
+ */
+export function fieldTranslationKey (schemaId, fieldName, suffix) {
+  return `${schemaId}.${fieldName}.${suffix}`
+}
+
+/**
+ * @param {Record<string, string> | null | undefined} messages
+ * @param {string} key
+ */
+export function hasTranslation (messages, key) {
+  return messages?.[key] != null
+}

package/src/fields/fieldTypes.js

@@ -0,0 +1,25 @@
+/**
+ * Field `type` values accepted for resource template definitions (aligned with
+ * Ossy API validation). Keep in sync with `ALLOWED_FIELD_TYPES` in the API.
+ *
+ * @readonly
+ */
+export const FIELD_TYPES = Object.freeze([
+  'text',
+  'textarea',
+  'richtext',
+  'number',
+  'select',
+  'multiselect',
+  'file',
+  'boolean',
+  'date',
+  'timestamp',
+  'date-range',
+  'date-ranges',
+  'email',
+  'id',
+])
+
+/** @deprecated Use {@link FIELD_TYPES} */
+export const RESOURCE_TEMPLATE_FIELD_TYPES = FIELD_TYPES

package/src/fields/index.js

@@ -0,0 +1,13 @@
+export { FIELD_TYPES, RESOURCE_TEMPLATE_FIELD_TYPES } from './fieldTypes.js'
+export { normalizeFieldType, resolveFieldDef } from './normalizeFieldType.js'
+export { applyFieldChange } from './applyFieldChange.js'
+export {
+  fieldTranslationKey,
+  hasTranslation,
+} from './fieldTranslationKeys.js'
+export {
+  Fields,
+  DEFAULT_FORM_FIELD_SLOTS,
+} from './Fields.jsx'
+export { DatePicker } from './DatePicker.jsx'
+export * from './time.js'

package/src/fields/normalizeFieldType.js

@@ -0,0 +1,26 @@
+/**
+ * Normalize template field `type` to the canonical editor type.
+ * `image` is an alias for `file` with default `accept: 'image/*'` when accept is omitted.
+ *
+ * @param {string | undefined} type
+ * @returns {{ type: string, defaultAccept?: string }}
+ */
+export function normalizeFieldType(type) {
+  const raw = typeof type === 'string' ? type.trim() : ''
+  if (raw === 'image') return { type: 'file', defaultAccept: 'image/*' }
+  return { type: raw || 'text' }
+}
+
+/**
+ * @param {{ type?: string, accept?: string, min?: number, max?: number } & Record<string, unknown>} field
+ * @returns {typeof field & { type: string, accept?: string, max: number }}
+ */
+export function resolveFieldDef(field) {
+  const { type: canonical, defaultAccept } = normalizeFieldType(field?.type)
+  return {
+    ...field,
+    type: canonical,
+    accept: field?.accept ?? defaultAccept,
+    max: field?.max ?? 1,
+  }
+}

package/src/fields/time.js

@@ -0,0 +1,85 @@
+/**
+ * Form display ↔ persisted ms conversions (ADR 0004).
+ * Date-only values use UTC midnight of the calendar day.
+ */
+
+/**
+ * @param {unknown} value — ms number or legacy ISO/date string
+ * @returns {string} `YYYY-MM-DD` for `<input type="date">`
+ */
+export function msToDateInputValue(value) {
+  if (value == null || value === '') return ''
+  const ms = typeof value === 'number' ? value : Date.parse(String(value))
+  if (Number.isNaN(ms)) return ''
+  return new Date(ms).toISOString().slice(0, 10)
+}
+
+/**
+ * @param {string} value — `YYYY-MM-DD` from date input
+ * @returns {number | undefined}
+ */
+export function dateInputValueToMs(value) {
+  if (!value) return undefined
+  const ms = Date.parse(`${value}T00:00:00.000Z`)
+  return Number.isNaN(ms) ? undefined : ms
+}
+
+/**
+ * @param {unknown} value — ms number or legacy ISO string
+ * @returns {string} `YYYY-MM-DDTHH:mm` for `<input type="datetime-local">`
+ */
+export function msToDatetimeLocalValue(value) {
+  if (value == null || value === '') return ''
+  const ms = typeof value === 'number' ? value : Date.parse(String(value))
+  if (Number.isNaN(ms)) return ''
+  const d = new Date(ms)
+  const pad = n => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+/**
+ * @param {string} value — `YYYY-MM-DDTHH:mm` from datetime-local input (local time)
+ * @returns {number | undefined}
+ */
+export function datetimeLocalValueToMs(value) {
+  if (!value) return undefined
+  const ms = new Date(value).getTime()
+  return Number.isNaN(ms) ? undefined : ms
+}
+
+/**
+ * @param {unknown} value — ms number
+ * @param {string} [language]
+ * @returns {string}
+ */
+export function formatDisplayDate(value, language = 'en') {
+  if (value == null || value === '') return ''
+  const ms = typeof value === 'number' ? value : Date.parse(String(value))
+  if (Number.isNaN(ms)) return ''
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+  return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(ms))
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is { start: number, end: number }}
+ */
+export function isDateRangeValue(value) {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    typeof value.start === 'number' &&
+    !Number.isNaN(value.start) &&
+    typeof value.end === 'number' &&
+    !Number.isNaN(value.end)
+  )
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is Array<{ start: number, end: number }>}
+ */
+export function isDateRangesValue(value) {
+  return Array.isArray(value) && value.every(isDateRangeValue)
+}

package/src/form/FieldFactory.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Fields } from '../fields/Fields.jsx'
+import { useFormContext } from './FormContext.jsx'
+import { FormStatus } from './FormStatus.js'
+
+const BLOCKING_STATUSES = new Set([
+  FormStatus.Submitting,
+  FormStatus.Loading,
+  FormStatus.Disabled,
+])
+
+const fieldsetResetStyle = {
+  border: 'none',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+}
+
+/**
+ * Renders form fields from {@link FormContext}. Resolves controls via
+ * {@link Fields} and ADR 0006 input component ids. Wraps inputs in a disabled
+ * fieldset when the form status includes Submitting, Loading, or Disabled.
+ */
+export function FieldFactory () {
+  const { fields, data, onChange, status } = useFormContext()
+  const disabled = status.some(s => BLOCKING_STATUSES.has(s))
+
+  return (
+    <fieldset disabled={disabled} style={fieldsetResetStyle}>
+      <Fields fields={fields} data={data} onChange={onChange} />
+    </fieldset>
+  )
+}