@ossy/design-system 3.0.2 → 3.0.4

package/src/fields/Fields.jsx

@@ -0,0 +1,596 @@
+import React, { useCallback, useState } from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+import { Input, Textarea, Select } from '../inputs'
+import { FileField } from '../inputs/FileField.jsx'
+import { Button } from '../button'
+import { Tags } from '../tags'
+import { useSlot } from '../component-slots'
+import { useLocale } from '../locale/index.js'
+import { useOptionalFormContext } from '../form/FormContext.jsx'
+import { fieldTranslationKey, hasTranslation } from './fieldTranslationKeys.js'
+import { useInputSlot } from '../component-slots'
+import { designSystemInputId } from '@ossy/schema'
+import { resolveFieldDef } from './normalizeFieldType.js'
+import { DatePicker } from './DatePicker.jsx'
+import {
+  datetimeLocalValueToMs,
+  isDateRangeValue,
+  msToDatetimeLocalValue,
+} from './time.js'
+
+const fieldInputStyle = { minWidth: '50%' }
+const textareaStyle = {
+  minWidth: '100%',
+  minHeight: '125px',
+  lineHeight: '1.6',
+  maxWidth: '600px',
+}
+const richtextStyle = {
+  ...textareaStyle,
+  minHeight: '180px',
+}
+
+const TextField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <Input
+    {...rest}
+    id={name}
+    name={name}
+    type="text"
+    value={value ?? ''}
+    onChange={onChange}
+    style={{ ...fieldInputStyle, ...style }}
+  />
+)
+
+const EmailField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <Input
+    {...rest}
+    id={name}
+    name={name}
+    type="email"
+    value={value ?? ''}
+    onChange={onChange}
+    style={{ ...fieldInputStyle, ...style }}
+  />
+)
+
+const NumberField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <Input
+    {...rest}
+    id={name}
+    name={name}
+    type="number"
+    value={value === undefined || value === null ? '' : value}
+    onChange={onChange}
+    style={{ ...fieldInputStyle, ...style }}
+  />
+)
+
+const DateField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <DatePicker
+    {...rest}
+    id={name}
+    name={name}
+    value={value}
+    onChange={onChange}
+    style={{ ...fieldInputStyle, ...style }}
+  />
+)
+
+const DateRangeField = ({ name, label, value, onChange, style = {}, ...rest }) => {
+  const { t } = useLocale()
+  const range = isDateRangeValue(value) ? value : { start: undefined, end: undefined }
+
+  const commit = useCallback(
+    next => {
+      onChange({
+        target: {
+          id: name,
+          name,
+          dataset: { ossyDateRangeReplace: 'true' },
+          value: JSON.stringify(next),
+        },
+      })
+    },
+    [name, onChange],
+  )
+
+  const onStartChange = useCallback(
+    event => {
+      const start = event.target.value
+      commit({ start, end: range.end })
+    },
+    [commit, range.end],
+  )
+
+  const onEndChange = useCallback(
+    event => {
+      const end = event.target.value
+      commit({ start: range.start, end })
+    },
+    [commit, range.start],
+  )
+
+  return (
+    <View gap="m" style={style} {...rest}>
+      <View gap="xs">
+        <Text variant="small" style={{ fontWeight: 600 }}>{t('design-system.fields.dateRangeStart')}</Text>
+        <DatePicker name={`${name}.start`} value={range.start} onChange={onStartChange} />
+      </View>
+      <View gap="xs">
+        <Text variant="small" style={{ fontWeight: 600 }}>{t('design-system.fields.dateRangeEnd')}</Text>
+        <DatePicker name={`${name}.end`} value={range.end} onChange={onEndChange} />
+      </View>
+    </View>
+  )
+}
+
+const DateRangesField = ({ name, label, value, onChange, style = {}, ...rest }) => {
+  const { t } = useLocale()
+  const ranges = Array.isArray(value) ? value : []
+
+  const commit = useCallback(
+    next => {
+      onChange({
+        target: {
+          id: name,
+          name,
+          dataset: { ossyDateRangesReplace: 'true' },
+          value: JSON.stringify(next),
+        },
+      })
+    },
+    [name, onChange],
+  )
+
+  const updateRange = useCallback(
+    (index, patch) => {
+      const next = ranges.map((range, i) => (i === index ? { ...range, ...patch } : range))
+      commit(next)
+    },
+    [commit, ranges],
+  )
+
+  const addRange = useCallback(() => {
+    commit([...ranges, { start: undefined, end: undefined }])
+  }, [commit, ranges])
+
+  const removeRange = useCallback(
+    index => {
+      commit(ranges.filter((_, i) => i !== index))
+    },
+    [commit, ranges],
+  )
+
+  return (
+    <View gap="m" style={style} {...rest}>
+      {ranges.map((range, index) => (
+        <View
+          key={`${name}-range-${index}`}
+          gap="s"
+          surface="secondary"
+          roundness="m"
+          inset="s"
+        >
+          <View layout="row" justifyContent="space-between" alignItems="center">
+            <Text variant="small" style={{ fontWeight: 600 }}>
+              {t('design-system.fields.dateRangeItem', { index: index + 1 })}
+            </Text>
+            <Button
+              type="button"
+              variant="command-danger"
+              prefix="close"
+              size="s"
+              aria-label={t('design-system.fields.dateRangeRemove')}
+              onClick={() => removeRange(index)}
+            />
+          </View>
+          <View gap="xs">
+            <Text variant="small">{t('design-system.fields.dateRangeStart')}</Text>
+            <DatePicker
+              name={`${name}.${index}.start`}
+              value={range?.start}
+              onChange={event => updateRange(index, { start: event.target.value })}
+            />
+          </View>
+          <View gap="xs">
+            <Text variant="small">{t('design-system.fields.dateRangeEnd')}</Text>
+            <DatePicker
+              name={`${name}.${index}.end`}
+              value={range?.end}
+              onChange={event => updateRange(index, { end: event.target.value })}
+            />
+          </View>
+        </View>
+      ))}
+      <Button type="button" variant="neutral" prefix="math-plus" onClick={addRange}>
+        {t('design-system.fields.dateRangeAdd')}
+      </Button>
+    </View>
+  )
+}
+
+const TimestampField = ({ label, name, value, onChange, style = {}, ...rest }) => {
+  const commitMs = useCallback(
+    (inputValue) => {
+      const ms = datetimeLocalValueToMs(inputValue)
+      onChange({
+        target: {
+          id: name,
+          name,
+          type: 'number',
+          value: ms,
+        },
+      })
+    },
+    [name, onChange],
+  )
+
+  return (
+    <Input
+      {...rest}
+      id={name}
+      name={name}
+      type="datetime-local"
+      value={msToDatetimeLocalValue(value)}
+      onChange={(e) => commitMs(e.target.value)}
+      style={{ ...fieldInputStyle, ...style }}
+    />
+  )
+}
+
+const TextareaField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <Textarea
+    {...rest}
+    id={name}
+    name={name}
+    value={value ?? ''}
+    onChange={onChange}
+    rows={2}
+    cols={50}
+    style={{ ...textareaStyle, ...style }}
+  />
+)
+
+/** Plain multi-line input until a dedicated rich-text editor is wired. */
+const RichtextField = ({ label, name, value, onChange, style = {}, ...rest }) => (
+  <Textarea
+    {...rest}
+    id={name}
+    name={name}
+    value={value ?? ''}
+    onChange={onChange}
+    rows={6}
+    cols={50}
+    style={{ ...richtextStyle, ...style }}
+  />
+)
+
+const SelectField = ({ label, name, options = [], value, onChange, style = {}, ...rest }) => (
+  <Select
+    {...rest}
+    id={name}
+    name={name}
+    value={value ?? ''}
+    onChange={onChange}
+    style={{ ...fieldInputStyle, ...style }}
+  >
+    <option value="" />
+    {options.map(option => (
+      <option key={option} value={option}>
+        {option}
+      </option>
+    ))}
+  </Select>
+)
+
+/**
+ * Multiselect as a tag cloud (same interaction model as {@link Tags}): click to
+ * toggle. Suggested options plus any selected/custom tags appear in the cloud;
+ * the row below adds arbitrary tags not in `options`.
+ */
+const MultiselectTagsField = ({ name, label, options = [], value, onChange, style = {}, ...rest }) => {
+  const { t } = useLocale()
+  const selected = Array.isArray(value) ? value : []
+  const [draft, setDraft] = useState('')
+
+  const commit = useCallback(
+    next => {
+      onChange({
+        target: {
+          id: name,
+          name,
+          dataset: { ossyMultiselectReplace: 'true' },
+          value: JSON.stringify(next),
+        },
+      })
+    },
+    [name, onChange],
+  )
+
+  const toggleTag = useCallback(
+    tag => {
+      commit(
+        selected.includes(tag) ? selected.filter(t => t !== tag) : [...selected, tag],
+      )
+    },
+    [selected, commit],
+  )
+
+  const addDraft = useCallback(() => {
+    const t = draft.trim()
+    if (!t || selected.includes(t)) return
+    commit([...selected, t])
+    setDraft('')
+  }, [draft, selected, commit])
+
+  const cloudTags = [...new Set([...(options || []), ...selected])].sort((a, b) =>
+    a.localeCompare(b),
+  )
+
+  return (
+    <View gap="m" style={style} {...rest}>
+      {cloudTags.length > 0 ? (
+        <Tags tags={cloudTags} activeTags={selected} onSelect={toggleTag} size="s" gap="xs" />
+      ) : (
+        <Text as="span" style={{ fontSize: 14, opacity: 0.7 }}>
+          {t('design-system.fields.noTagSuggestions')}
+        </Text>
+      )}
+      <View layout="row" gap="s" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
+        <Input
+          type="text"
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              addDraft()
+            }
+          }}
+          placeholder={t('design-system.fields.addTagPlaceholder')}
+          style={{ minWidth: 140, flex: '1 1 140px', maxWidth: '100%' }}
+          aria-label={`Add tag for ${label}`}
+        />
+        <Button type="button" variant="neutral" onClick={addDraft}>
+          {t('design-system.fields.addTag')}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+const checkboxFieldStyles = `
+  [data-ossy-field-checkbox-track] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.375rem;
+    height: 1.375rem;
+    flex-shrink: 0;
+  }
+
+  [data-ossy-field-checkbox-track] input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  [data-ossy-field-checkbox-track] input:disabled {
+    cursor: not-allowed;
+  }
+
+  [data-ossy-field-checkbox-box] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.375rem;
+    height: 1.375rem;
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--separator-primary);
+    border-radius: var(--space-xs, 6px);
+    background-color: var(--surface-primary);
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+    pointer-events: none;
+  }
+
+  [data-ossy-field-checkbox-track] input:focus-visible + [data-ossy-field-checkbox-box] {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 1px var(--color-accent);
+  }
+
+  [data-ossy-field-checkbox-track] input:checked + [data-ossy-field-checkbox-box] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  [data-ossy-field-checkbox-mark] {
+    width: 0.3rem;
+    height: 0.55rem;
+    border: solid var(--surface-primary);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg) translate(-0.04rem, -0.04rem);
+    opacity: 0;
+    transition: opacity 0.12s ease;
+    box-sizing: border-box;
+  }
+
+  [data-ossy-field-checkbox-track] input:checked + [data-ossy-field-checkbox-box] [data-ossy-field-checkbox-mark] {
+    opacity: 1;
+  }
+
+  [data-ossy-field-checkbox-track] input:disabled + [data-ossy-field-checkbox-box] {
+    opacity: 0.55;
+  }
+`
+
+const BooleanField = ({ name, label, value, onChange, style = {}, disabled, ...rest }) => {
+  const { t } = useLocale()
+  return (
+  <>
+    <style href="@ossy/design-system/field-checkbox" precedence="medium">
+      {checkboxFieldStyles}
+    </style>
+    <label
+      data-ossy-field-checkbox
+      htmlFor={name}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-s, 8px)',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        minHeight: 'var(--space-l, 24px)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <span data-ossy-field-checkbox-track>
+        <input
+          id={name}
+          name={name}
+          type="checkbox"
+          checked={!!value}
+          onChange={onChange}
+          disabled={disabled}
+          aria-label={label || name}
+        />
+        <span data-ossy-field-checkbox-box aria-hidden="true">
+          <span data-ossy-field-checkbox-mark />
+        </span>
+      </span>
+      <Text
+        as="span"
+        style={{
+          fontSize: 'var(--text-default-font-size, 16px)',
+          fontFamily: 'var(--text-default-font-family, sans-serif)',
+          lineHeight: 1.2,
+          color: value
+            ? 'var(--text-default-color, CanvasText)'
+            : 'color-mix(in srgb, var(--text-default-color, CanvasText) 52%, transparent)',
+          userSelect: 'none',
+        }}
+      >
+        {value ? t('design-system.fields.booleanOn') : t('design-system.fields.booleanOff')}
+      </Text>
+    </label>
+  </>
+  )
+}
+
+const FIELD_COMPONENTS = {
+  text: TextField,
+  email: EmailField,
+  textarea: TextareaField,
+  richtext: RichtextField,
+  number: NumberField,
+  select: SelectField,
+  multiselect: MultiselectTagsField,
+  file: FileField,
+  image: FileField,
+  boolean: BooleanField,
+  date: DateField,
+  timestamp: TimestampField,
+  'date-range': DateRangeField,
+  'date-ranges': DateRangesField,
+}
+
+/**
+ * Default {@link ComponentSlotsProvider} `slots` map for {@link Fields}.
+ * Keys are canonical `@ossy/design-system/input/{type}`.
+ *
+ * @type {Record<string, import('react').ComponentType<any>>}
+ */
+export const DEFAULT_FORM_FIELD_SLOTS = Object.fromEntries(
+  Object.entries(FIELD_COMPONENTS).map(([type, Comp]) => [
+    designSystemInputId(type),
+    Comp,
+  ]),
+)
+
+function FormFieldRow({ field, data, onChange, schemaId }) {
+  const { t, messages } = useLocale()
+  const resolved = resolveFieldDef(field)
+  const { name, type, options, required, label: labelOverride, placeholder: placeholderOverride, description: descriptionOverride, accept, min, max, ...fieldRest } = resolved
+  const typeKey = typeof type === 'string' ? type.trim() : type || 'text'
+  const declaredType = typeof field.type === 'string' ? field.type.trim() : field.type || 'text'
+  const Slotted = useInputSlot(schemaId, declaredType === 'image' ? 'image' : typeKey)
+  const Fallback = FIELD_COMPONENTS[declaredType] || FIELD_COMPONENTS[typeKey] || TextField
+  const Field = Slotted === undefined ? Fallback : Slotted
+
+  const labelKey = labelOverride ?? (schemaId ? fieldTranslationKey(schemaId, name, 'label') : name)
+  const placeholderKey = placeholderOverride ?? (schemaId ? fieldTranslationKey(schemaId, name, 'placeholder') : undefined)
+  const descriptionKey = descriptionOverride ?? (schemaId ? fieldTranslationKey(schemaId, name, 'description') : undefined)
+
+  const displayLabel = labelOverride
+    ?? (schemaId && hasTranslation(messages, labelKey) ? t(labelKey) : name)
+  const placeholder = placeholderKey && hasTranslation(messages, placeholderKey)
+    ? placeholderKey
+    : undefined
+  const showDescription = descriptionKey && hasTranslation(messages, descriptionKey)
+
+  const fieldProps = {
+    ...fieldRest,
+    name,
+    label: displayLabel,
+    options,
+    required,
+    accept,
+    min,
+    max,
+    placeholder,
+    value: data[name],
+    onChange,
+  }
+
+  return (
+    <View gap="xs">
+      <Text as="label" htmlFor={name} variant="small" style={{ fontWeight: 'bold' }}>
+        {displayLabel}
+        {required ? ' *' : ''}
+      </Text>
+      {showDescription ? (
+        <Text variant="small" text={descriptionKey} style={{ opacity: 0.85, lineHeight: 1.35 }} />
+      ) : null}
+      {Field === null ? null : <Field {...fieldProps} />}
+    </View>
+  )
+}
+
+/**
+ * Renders labeled inputs for each entry in a template `fields` array.
+ * Use {@link applyFieldChange} to derive the next `data` object from native
+ * `onChange` events (and from multiselect tag commits).
+ *
+ * Resolves controls via {@link useInputSlot} (ADR 0006 input id chain) first, then built-ins
+ * in {@link DEFAULT_FORM_FIELD_SLOTS}. Pass {@link DEFAULT_FORM_FIELD_SLOTS} into
+ * {@link ComponentSlotsProvider} when you want slots to resolve without per-type fallbacks.
+ *
+ * @param {{
+ *   data: Record<string, unknown>,
+ *   onChange: import('react').ChangeEventHandler,
+ *   fields?: { name: string, type?: string, options?: string[] }[],
+ *   templateFields?: { name: string, type?: string, options?: string[] }[],
+ *   schemaId?: string,
+ * }} props
+ */
+export function Fields({ data, onChange, fields: fieldsProp, templateFields, schemaId: schemaIdProp, ...props }) {
+  const formCtx = useOptionalFormContext()
+  const schemaId = schemaIdProp ?? formCtx?.schemaId
+  const list = fieldsProp ?? templateFields ?? []
+
+  return (
+    <View gap="s" {...props}>
+      {list.map(field => (
+        <FormFieldRow key={field.name} field={field} data={data} onChange={onChange} schemaId={schemaId} />
+      ))}
+    </View>
+  )
+}