@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/settings/structuredDataSchemaTypes.ts

@@ -0,0 +1,308 @@
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from 'react';
+import type {
+  WorkbenchStructuredDataPath,
+  WorkbenchStructuredDataRecord,
+} from '@workbench-kit/workspace';
+
+export type { WorkbenchStructuredDataPath, WorkbenchStructuredDataRecord };
+
+export type WorkbenchStructuredDataFieldType =
+  'checkbox' | 'number' | 'select' | 'text' | 'text-array';
+
+export type WorkbenchStructuredDataFieldValue = boolean | number | string | readonly string[];
+
+export type WorkbenchStructuredDataFormErrors = Record<string, ReactNode>;
+
+export type WorkbenchStructuredDataSchemaFieldControl =
+  'checkbox' | 'color' | 'date' | 'number' | 'radio' | 'select' | 'text' | 'textarea';
+
+export interface WorkbenchStructuredDataSchemaSelectOption {
+  disabled?: boolean | undefined;
+  label?: string | undefined;
+  value: boolean | number | string;
+}
+
+export interface WorkbenchStructuredDataSchemaFieldDefinition {
+  default?: unknown;
+  description?: string | undefined;
+  enum?: readonly (boolean | number | string)[] | undefined;
+  enumNames?: readonly string[] | undefined;
+  format?: string | undefined;
+  items?: {
+    type?: string | undefined;
+  };
+  markdownDescription?: string | undefined;
+  max?: number | undefined;
+  maximum?: number | undefined;
+  maxLength?: number | undefined;
+  min?: number | undefined;
+  minimum?: number | undefined;
+  minLength?: number | undefined;
+  oneOf?:
+    | readonly {
+        const?: boolean | number | string | undefined;
+        description?: string | undefined;
+        title?: string | undefined;
+      }[]
+    | undefined;
+  pattern?: string | undefined;
+  selectable?: boolean | undefined;
+  title?: string | undefined;
+  type?: string | undefined;
+  'x-workbench-color'?: boolean | undefined;
+  ui?: {
+    control?: WorkbenchStructuredDataSchemaFieldControl | string | undefined;
+    /** Storage/display date pattern, e.g. `yyyy-MM-dd` or `yyyyMMdd`. */
+    dateFormat?: string | undefined;
+    enumLabels?: Record<string, string> | readonly string[] | undefined;
+    options?: readonly WorkbenchStructuredDataSchemaSelectOption[] | undefined;
+    placeholder?: string | undefined;
+    rows?: number | undefined;
+  };
+}
+
+export interface WorkbenchStructuredDataSchemaSectionSummary {
+  columns?: readonly string[] | undefined;
+  dataPath?: string | undefined;
+  fieldCount?: number | undefined;
+  fields?: readonly string[] | undefined;
+  id?: string | undefined;
+  sectionKey?: string | undefined;
+  title?: string | undefined;
+  type?: string | undefined;
+}
+
+export interface WorkbenchStructuredDataSchemaTableDefinition {
+  items?: Record<string, WorkbenchStructuredDataSchemaFieldDefinition> | undefined;
+  title?: string | undefined;
+}
+
+export interface WorkbenchStructuredDataSchemaDocument {
+  activePattern?: string | undefined;
+  pattern?: string | undefined;
+  patterns?: readonly {
+    pattern: string;
+    sections?: readonly WorkbenchStructuredDataSchemaSectionSummary[] | undefined;
+  }[];
+  sampleDraft?: unknown;
+  sampleDrafts?: Record<string, unknown> | undefined;
+  schema?: {
+    properties?: Record<string, WorkbenchStructuredDataSchemaFieldDefinition> | undefined;
+    sections?: readonly WorkbenchStructuredDataSchemaSectionSummary[] | undefined;
+    tables?: Record<string, WorkbenchStructuredDataSchemaTableDefinition> | undefined;
+  };
+  ui?: {
+    patterns?: Record<
+      string,
+      {
+        label?: string | undefined;
+        sections?: readonly WorkbenchStructuredDataSchemaSectionSummary[] | undefined;
+      }
+    >;
+  };
+}
+
+export type WorkbenchStructuredDataSchemaSectionAliases = Record<
+  string,
+  readonly WorkbenchStructuredDataPath[]
+>;
+
+export interface WorkbenchStructuredDataSchemaTableColumnInput {
+  maxColumns?: number | undefined;
+  preferredColumns?: readonly string[] | undefined;
+  rows: readonly WorkbenchStructuredDataRecord[];
+  schemaColumns?: readonly string[] | undefined;
+  sectionColumns?: readonly string[] | undefined;
+}
+
+export interface WorkbenchStructuredDataSchemaTableRowKeyInput {
+  row: WorkbenchStructuredDataRecord;
+  rowIndex: number;
+  value: unknown;
+}
+
+export interface WorkbenchStructuredDataFormOption {
+  disabled?: boolean;
+  label: ReactNode;
+  value: string;
+}
+
+export interface WorkbenchStructuredDataFormFieldBase {
+  defaultValue?: WorkbenchStructuredDataFieldValue;
+  description?: ReactNode;
+  disabled?: boolean;
+  id: string;
+  label: ReactNode;
+  metadata?: Record<string, unknown>;
+  path: WorkbenchStructuredDataPath;
+  readOnly?: boolean;
+  required?: boolean;
+  validationMessage?: ReactNode;
+  validate?: (
+    value: WorkbenchStructuredDataFieldValue,
+    data: WorkbenchStructuredDataRecord,
+    field: WorkbenchStructuredDataFormField,
+  ) => ReactNode | undefined;
+}
+
+export interface WorkbenchStructuredDataFormTextField extends WorkbenchStructuredDataFormFieldBase {
+  autocomplete?: string;
+  monospace?: boolean;
+  placeholder?: string;
+  type: 'text';
+}
+
+export interface WorkbenchStructuredDataFormNumberField extends WorkbenchStructuredDataFormFieldBase {
+  max?: number;
+  min?: number;
+  placeholder?: string;
+  step?: number;
+  type: 'number';
+}
+
+export interface WorkbenchStructuredDataFormSelectField extends WorkbenchStructuredDataFormFieldBase {
+  emptyOptionLabel?: ReactNode;
+  options: readonly WorkbenchStructuredDataFormOption[];
+  type: 'select';
+}
+
+export interface WorkbenchStructuredDataFormCheckboxField extends WorkbenchStructuredDataFormFieldBase {
+  type: 'checkbox';
+}
+
+export interface WorkbenchStructuredDataFormTextArrayField extends WorkbenchStructuredDataFormFieldBase {
+  addLabel?: ReactNode;
+  emptyLabel?: ReactNode;
+  itemLabel?: string;
+  itemPlaceholder?: string;
+  maxItems?: number;
+  minItems?: number;
+  removeLabel?: string;
+  type: 'text-array';
+}
+
+export interface WorkbenchStructuredDataTextArrayInputProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onChange'
+> {
+  addLabel?: ReactNode | undefined;
+  ariaDescribedBy?: string | undefined;
+  ariaLabel: string;
+  disabled?: boolean | undefined;
+  emptyLabel?: ReactNode | undefined;
+  maxItems?: number | undefined;
+  minItems?: number | undefined;
+  placeholder?: string | undefined;
+  readOnly?: boolean | undefined;
+  removeLabel?: string | undefined;
+  value?: unknown;
+  onValueChange?: ((value: string[]) => void) | undefined;
+}
+
+export interface WorkbenchStructuredDataSchemaFieldInputProps {
+  addTextArrayLabel?: ReactNode | undefined;
+  checkboxClassName?: string | undefined;
+  className?: string | undefined;
+  definition?: WorkbenchStructuredDataSchemaFieldDefinition | undefined;
+  fieldErrorId?: string | undefined;
+  fieldPath: string;
+  invalid?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  removeTextArrayLabel?: string | undefined;
+  textareaClassName?: string | undefined;
+  textArrayClassName?: string | undefined;
+  validationMessage?: ReactNode | undefined;
+  value: unknown;
+  onBlur?: (() => void) | undefined;
+  onValueChange?: ((value: unknown) => void) | undefined;
+}
+
+export type WorkbenchStructuredDataFormField =
+  | WorkbenchStructuredDataFormCheckboxField
+  | WorkbenchStructuredDataFormNumberField
+  | WorkbenchStructuredDataFormSelectField
+  | WorkbenchStructuredDataFormTextArrayField
+  | WorkbenchStructuredDataFormTextField;
+
+export interface WorkbenchStructuredDataTableColumn {
+  align?: 'end' | 'start';
+  id: string;
+  label: ReactNode;
+  path?: WorkbenchStructuredDataPath;
+  render?: (context: WorkbenchStructuredDataTableCellContext) => ReactNode;
+}
+
+export interface WorkbenchStructuredDataTableRow {
+  data: WorkbenchStructuredDataRecord;
+  id: string;
+  label?: ReactNode;
+  metadata?: Record<string, unknown>;
+}
+
+export interface WorkbenchStructuredDataTableCellContext {
+  column: WorkbenchStructuredDataTableColumn;
+  row: WorkbenchStructuredDataTableRow;
+  value: unknown;
+}
+
+export interface WorkbenchStructuredDataTable {
+  columns: readonly WorkbenchStructuredDataTableColumn[];
+  description?: ReactNode;
+  emptyLabel?: ReactNode;
+  id: string;
+  label?: ReactNode;
+  rows: readonly WorkbenchStructuredDataTableRow[];
+}
+
+export interface WorkbenchStructuredDataFormSection {
+  count?: number;
+  description?: ReactNode;
+  fields?: readonly WorkbenchStructuredDataFormField[];
+  id: string;
+  tables?: readonly WorkbenchStructuredDataTable[];
+  title: ReactNode;
+}
+
+export interface WorkbenchStructuredDataFormFieldChangeContext {
+  data: WorkbenchStructuredDataRecord;
+  field: WorkbenchStructuredDataFormField;
+  fieldId: string;
+  path: WorkbenchStructuredDataPath;
+  value: WorkbenchStructuredDataFieldValue;
+}
+
+export interface WorkbenchStructuredDataFormSubmitContext {
+  data: WorkbenchStructuredDataRecord;
+  event: FormEvent<HTMLFormElement>;
+}
+
+export interface WorkbenchStructuredDataFormCancelContext {
+  data: WorkbenchStructuredDataRecord;
+}
+
+export interface WorkbenchStructuredDataFormProps extends Omit<
+  ComponentPropsWithRef<'form'>,
+  'children' | 'defaultValue' | 'onCancel' | 'onChange' | 'onSubmit'
+> {
+  ariaLabel: string;
+  cancelLabel?: ReactNode;
+  data?: WorkbenchStructuredDataRecord;
+  defaultData?: WorkbenchStructuredDataRecord;
+  disabled?: boolean;
+  emptyLabel?: ReactNode;
+  errors?: WorkbenchStructuredDataFormErrors;
+  onCancel?: (context: WorkbenchStructuredDataFormCancelContext) => void;
+  onDataChange?: (
+    data: WorkbenchStructuredDataRecord,
+    context: WorkbenchStructuredDataFormFieldChangeContext,
+  ) => void;
+  onFieldChange?: (context: WorkbenchStructuredDataFormFieldChangeContext) => void;
+  onSubmit?: (
+    data: WorkbenchStructuredDataRecord,
+    context: WorkbenchStructuredDataFormSubmitContext,
+  ) => void;
+  readOnly?: boolean;
+  sections: readonly WorkbenchStructuredDataFormSection[];
+  showActions?: boolean;
+  submitLabel?: ReactNode;
+}

package/src/workbench/settings/structuredDataSchemaValidation.ts

@@ -0,0 +1,166 @@
+import type {
+  WorkbenchStructuredDataSchemaFieldDefinition,
+  WorkbenchStructuredDataSchemaSelectOption,
+} from './structuredDataSchemaTypes';
+import {
+  isWorkbenchStructuredDataSchemaDateField,
+  parseWorkbenchStructuredDataSchemaDateValue,
+} from './structuredDataSchemaDate';
+
+export const SCHEMA_FIELD_PATTERN_WARNING = 'Value does not match the required format.';
+export const SCHEMA_FIELD_DATE_WARNING = 'Value is not a valid date.';
+export const SCHEMA_FIELD_MIN_WARNING = 'Value is below the minimum allowed.';
+export const SCHEMA_FIELD_MAX_WARNING = 'Value is above the maximum allowed.';
+
+const SMALL_ENUM_RADIO_THRESHOLD = 4;
+
+export interface WorkbenchStructuredDataSchemaSelectFieldOption {
+  disabled?: boolean | undefined;
+  label: string;
+  value: string;
+}
+
+export function isWorkbenchStructuredDataSchemaColorField(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+): boolean {
+  if (!definition) return false;
+  return (
+    definition.format === 'color' ||
+    definition['x-workbench-color'] === true ||
+    definition.ui?.control === 'color'
+  );
+}
+
+export function hasWorkbenchStructuredDataSchemaSelectOptions(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+): boolean {
+  if (!definition) return false;
+  return Boolean(
+    definition.selectable ||
+    definition.oneOf?.length ||
+    definition.ui?.options?.length ||
+    definition.enum?.length,
+  );
+}
+
+export function shouldUseWorkbenchStructuredDataSchemaRadioControl(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+): boolean {
+  if (!definition || definition.ui?.control === 'select') return false;
+  if (definition.ui?.control === 'radio') return true;
+
+  const options = buildWorkbenchStructuredDataSchemaSelectOptions(definition);
+  return options.length > 0 && options.length <= SMALL_ENUM_RADIO_THRESHOLD;
+}
+
+export function buildWorkbenchStructuredDataSchemaSelectOptions(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+): readonly WorkbenchStructuredDataSchemaSelectFieldOption[] {
+  if (!definition) return [];
+
+  const uiOptions = definition.ui?.options;
+  if (uiOptions?.length) {
+    return uiOptions.map((option) => normalizeSchemaSelectOption(option));
+  }
+
+  const oneOfOptions = definition.oneOf;
+  if (oneOfOptions?.length) {
+    return oneOfOptions
+      .filter((option) => option.const !== undefined)
+      .map((option) => ({
+        label: option.title ?? String(option.const),
+        value: String(option.const),
+      }));
+  }
+
+  const enumValues = definition.enum;
+  if (!enumValues?.length) return [];
+
+  const enumLabels = resolveEnumLabels(definition, enumValues.length);
+  return enumValues.map((value, index) => ({
+    label: enumLabels[index] ?? String(value),
+    value: String(value),
+  }));
+}
+
+export function validateWorkbenchStructuredDataSchemaFieldValue(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+  value: unknown,
+): string | undefined {
+  if (!definition) return undefined;
+
+  if (definition.type === 'number' || definition.type === 'integer') {
+    if (value === '' || value === null || value === undefined) return undefined;
+    const numericValue = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numericValue)) return undefined;
+
+    const min = definition.minimum ?? definition.min;
+    const max = definition.maximum ?? definition.max;
+    if (min !== undefined && numericValue < min) return SCHEMA_FIELD_MIN_WARNING;
+    if (max !== undefined && numericValue > max) return SCHEMA_FIELD_MAX_WARNING;
+    return undefined;
+  }
+
+  if (typeof value !== 'string') return undefined;
+
+  const trimmed = value.trim();
+  if (isWorkbenchStructuredDataSchemaDateField(definition)) {
+    if (trimmed === '') return undefined;
+    if (!parseWorkbenchStructuredDataSchemaDateValue(trimmed, definition)) {
+      return SCHEMA_FIELD_DATE_WARNING;
+    }
+  }
+
+  if (definition.pattern) {
+    try {
+      const regex = new RegExp(definition.pattern);
+      if (trimmed !== '' && !regex.test(value)) {
+        return SCHEMA_FIELD_PATTERN_WARNING;
+      }
+    } catch {
+      return undefined;
+    }
+  }
+
+  const minLength = definition.minLength;
+  const maxLength = definition.maxLength;
+  if (minLength !== undefined && trimmed.length < minLength) {
+    return `Value must be at least ${minLength} characters.`;
+  }
+  if (maxLength !== undefined && trimmed.length > maxLength) {
+    return `Value must be at most ${maxLength} characters.`;
+  }
+
+  return undefined;
+}
+
+function normalizeSchemaSelectOption(
+  option: WorkbenchStructuredDataSchemaSelectOption,
+): WorkbenchStructuredDataSchemaSelectFieldOption {
+  return {
+    disabled: option.disabled,
+    label: option.label ?? String(option.value),
+    value: String(option.value),
+  };
+}
+
+function resolveEnumLabels(
+  definition: WorkbenchStructuredDataSchemaFieldDefinition,
+  enumLength: number,
+) {
+  const enumLabels = definition.ui?.enumLabels;
+  if (!enumLabels) {
+    return definition.enumNames ?? [];
+  }
+
+  if (Array.isArray(enumLabels)) {
+    return enumLabels;
+  }
+
+  const labelRecord = enumLabels as Record<string, string>;
+  return Array.from({ length: enumLength }, (_, index) => {
+    const enumValue = definition.enum?.[index];
+    if (enumValue === undefined) return '';
+    return labelRecord[String(enumValue)] ?? String(enumValue);
+  });
+}