@wix/patterns 1.385.0 → 1.388.0

package/src/components/CmsFieldManagement/CmsFieldModal.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { CustomActionModal } from '../ActionModal';
+import { CmsFieldForm } from './CmsFieldForm';
+import { CmsFieldModalState } from './CmsFieldModalState';
+
+export const CmsFieldModal = observer(
+  ({ state }: { state: CmsFieldModalState }) => {
+    const { formState } = state;
+
+    return (
+      <CustomActionModal
+        dataHook="cms-field-modal"
+        state={state.modal}
+        onAfterClose={() => state.reset()}
+        title={formState?.mode === 'edit' ? 'Edit field' : 'Add a field'}
+        content={formState ? <CmsFieldForm state={formState} /> : null}
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel"
+      />
+    );
+  },
+);

package/src/components/CmsFieldManagement/CmsFieldModalState.ts

@@ -0,0 +1,100 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ConditionalModalState, type ToastConfig } from '@wix/bex-core';
+import { Field, SchemaConfig } from '../../types/SchemaConfig';
+import { CmsFormState } from './CmsFormState';
+import { toFieldSpec } from './toFieldSpec';
+import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
+
+export class CmsFieldModalState {
+  private readonly getSchema: () => SchemaConfig;
+  private readonly resolveError: (e: unknown) => ToastConfig;
+  readonly modal: ConditionalModalState<null>;
+  formState: CmsFormState | null = null;
+
+  constructor(
+    getSchema: () => SchemaConfig,
+    resolveError: (e: unknown) => ToastConfig,
+  ) {
+    this.getSchema = getSchema;
+    this.resolveError = resolveError;
+    this.modal = new ConditionalModalState({
+      onConfirm: () => this.submit(),
+    });
+
+    makeObservable(this, {
+      formState: observable.ref,
+      open: action,
+      reset: action,
+    });
+  }
+
+  open(fieldId?: string) {
+    const schemaConfig = this.getSchema();
+
+    this.formState = new CmsFormState({
+      schemaConfig,
+      getValidationRules: getFieldTypeValidationRulesList,
+    });
+
+    if (fieldId) {
+      const field = schemaConfig.fields[fieldId];
+      if (!field) {
+        console.warn(`[CmsFieldModalState] Missing field "${fieldId}"`);
+        return;
+      }
+
+      this.formState.setMode('edit');
+      this.formState.loadField(field);
+    }
+
+    this.modal.open(null);
+  }
+
+  reset() {
+    this.formState = null;
+  }
+
+  private async submit(): Promise<void> {
+    const { formState } = this;
+    if (!formState) {
+      return;
+    }
+    const schemaConfig = this.getSchema();
+
+    if (formState.hasInvalidFields || !formState.properties.type) {
+      formState.enableShowValidationError();
+      throw new Error('validation');
+    }
+
+    try {
+      const { type, ...rest } = formState.properties;
+      const fieldSpec = toFieldSpec({ ...rest, type }, formState.fieldRules);
+
+      if (formState.mode === 'edit') {
+        if (!formState.editingFieldId) {
+          throw new Error('Missing editing field id for CMS field update');
+        }
+        if (!schemaConfig.fieldActions?.editField) {
+          throw new Error(
+            'SchemaConfig.fieldActions.editField is not configured',
+          );
+        }
+        await schemaConfig.fieldActions.editField(
+          formState.editingFieldId,
+          fieldSpec,
+        );
+        schemaConfig.refresh?.();
+        return;
+      }
+
+      if (!schemaConfig.fieldActions?.addField) {
+        throw new Error('SchemaConfig.fieldActions.addField is not configured');
+      }
+      await schemaConfig.fieldActions.addField(fieldSpec as Field);
+      schemaConfig.refresh?.();
+    } catch (e) {
+      formState.setErrorToastConfig(this.resolveError(e));
+      throw e;
+    }
+  }
+}

package/src/components/CmsFieldManagement/CmsFormState.ts

@@ -0,0 +1,238 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import type { ToastConfig } from '@wix/bex-core';
+import type { Field, SchemaConfig } from '../../types/SchemaConfig';
+import {
+  isPIISupportedByFieldType,
+  isSelectableFieldType,
+} from './fieldTypeUtils';
+import type {
+  FieldProperties,
+  FieldPropertiesState,
+  FieldRules,
+  SelectableFieldTypes,
+  ValidationRule,
+} from './types';
+
+export interface CmsFormStateParams {
+  schemaConfig: SchemaConfig;
+  getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
+  mode?: 'new' | 'edit';
+  editingFieldId?: string;
+}
+
+function defaultProperties(): FieldPropertiesState {
+  return {
+    type: undefined,
+    name: '',
+    isPii: false,
+    helpText: '',
+  };
+}
+
+// TODO: confirm vs cms-web
+const NAME_MAX_LENGTH = 50;
+
+export class CmsFormState {
+  readonly schemaConfig: SchemaConfig;
+  readonly getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
+
+  properties: FieldPropertiesState = defaultProperties();
+  fieldRules: FieldRules = { validationRules: {} };
+  mode: 'new' | 'edit';
+  editingFieldId: string | undefined;
+  touchedFields: Set<keyof FieldProperties> = new Set();
+  showValidationError: boolean = false;
+  errorToastConfig: ToastConfig | undefined = undefined;
+
+  constructor(params: CmsFormStateParams) {
+    this.schemaConfig = params.schemaConfig;
+    this.getValidationRules = params.getValidationRules;
+    this.mode = params.mode ?? 'new';
+    this.editingFieldId = params.editingFieldId;
+
+    makeObservable(this, {
+      properties: observable.ref,
+      fieldRules: observable.ref,
+      mode: observable.ref,
+      editingFieldId: observable.ref,
+      touchedFields: observable,
+      showValidationError: observable.ref,
+      errorToastConfig: observable.ref,
+
+      fieldTypeError: computed,
+      nameError: computed,
+      hasInvalidFields: computed,
+      visibleErrors: computed,
+      supportedValidationRules: computed,
+      validationErrorMessage: computed,
+
+      setProperty: action,
+      setValidationRule: action.bound,
+      blurField: action,
+      enableShowValidationError: action,
+      setMode: action,
+      setErrorToastConfig: action,
+      loadField: action,
+      reset: action,
+
+      hideValidationError: action.bound,
+      changeType: action.bound,
+      changeName: action.bound,
+      setIsPii: action.bound,
+      setHelpText: action.bound,
+    });
+  }
+
+  get fieldTypeError(): string | undefined {
+    if (!this.properties.type) {
+      return 'Field type is required';
+    }
+    return undefined;
+  }
+
+  get nameError(): string | undefined {
+    const name = this.properties.name.trim();
+    if (!name) {
+      return 'Field name is required';
+    }
+    if (name.length > NAME_MAX_LENGTH) {
+      return `Field name must be ${NAME_MAX_LENGTH} characters or fewer`;
+    }
+    return undefined;
+  }
+
+  get hasInvalidFields(): boolean {
+    return !!(this.fieldTypeError || this.nameError);
+  }
+
+  // Spec §3 specifies booleans; returning the error string directly is more useful for rendering
+  // (one property read instead of two). Deviation is intentional — update spec if accepted.
+  get visibleErrors(): {
+    type: string | undefined;
+    name: string | undefined;
+  } {
+    const { showValidationError, touchedFields } = this;
+    return {
+      type: showValidationError ? this.fieldTypeError : undefined,
+      name:
+        showValidationError || touchedFields.has('name')
+          ? this.nameError
+          : undefined,
+    };
+  }
+
+  get supportedValidationRules(): ValidationRule[] {
+    return this.properties.type
+      ? this.getValidationRules(this.properties.type)
+      : [];
+  }
+
+  get validationErrorMessage(): string {
+    return (
+      this.fieldTypeError ||
+      this.nameError ||
+      'Please fix the errors before saving'
+    );
+  }
+
+  setProperty<K extends keyof FieldPropertiesState>(
+    key: K,
+    value: FieldPropertiesState[K],
+  ) {
+    this.properties = { ...this.properties, [key]: value };
+  }
+
+  setValidationRule(rule: ValidationRule, value: unknown) {
+    this.fieldRules = {
+      ...this.fieldRules,
+      validationRules: { ...this.fieldRules.validationRules, [rule]: value },
+    };
+  }
+
+  blurField(field: keyof FieldProperties) {
+    this.touchedFields.add(field);
+  }
+
+  enableShowValidationError() {
+    this.showValidationError = true;
+  }
+
+  setMode(mode: 'new' | 'edit') {
+    this.mode = mode;
+  }
+
+  setErrorToastConfig(cfg: ToastConfig | undefined) {
+    this.errorToastConfig = cfg;
+  }
+
+  reset() {
+    this.properties = defaultProperties();
+    this.fieldRules = { validationRules: {} };
+    this.editingFieldId = undefined;
+    this.touchedFields.clear();
+    this.showValidationError = false;
+    this.errorToastConfig = undefined;
+  }
+
+  hideValidationError() {
+    this.showValidationError = false;
+  }
+
+  changeType(v: SelectableFieldTypes) {
+    this.setProperty('type', v);
+    this._onTypeChange(v);
+  }
+
+  changeName(v: string) {
+    this.setProperty('name', v);
+  }
+
+  setIsPii(v: boolean) {
+    this.setProperty('isPii', v);
+  }
+
+  setHelpText(v: string) {
+    this.setProperty('helpText', v);
+  }
+
+  loadField(field: Field) {
+    const mappedType: SelectableFieldTypes | undefined = isSelectableFieldType(
+      field.type,
+    )
+      ? field.type
+      : undefined;
+    this.properties = {
+      type: mappedType,
+      name: field.displayName,
+      isPii: field.isPii ?? false,
+      helpText: field.helpText ?? '',
+    };
+    this.fieldRules = {
+      validationRules: {
+        ...(field.validation?.required !== undefined && {
+          required: field.validation.required,
+        }),
+        ...(field.validation?.stringLengthRange !== undefined && {
+          charactersLimit: field.validation.stringLengthRange,
+        }),
+      },
+    };
+    this.editingFieldId = field.id;
+    this.errorToastConfig = undefined;
+  }
+
+  private _onTypeChange(newType: SelectableFieldTypes) {
+    const supported = new Set(this.getValidationRules(newType));
+    this.fieldRules = {
+      validationRules: Object.fromEntries(
+        Object.entries(this.fieldRules.validationRules).filter(([k]) =>
+          supported.has(k as ValidationRule),
+        ),
+      ),
+    };
+    if (!isPIISupportedByFieldType(newType)) {
+      this.properties = { ...this.properties, isPii: false };
+    }
+    this.touchedFields.clear();
+  }
+}

package/src/components/CmsFieldManagement/Sections/BasicsSection.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Box } from '@wix/design-system';
+import type { CmsFormState } from '../CmsFormState';
+import { isPIISupportedByFieldType } from '../fieldTypeUtils';
+import { FieldTypeSelect } from '../formFields/FieldTypeSelect';
+import { FieldNameInput } from '../formFields/FieldNameInput';
+import { FieldPiiToggle } from '../formFields/FieldPiiToggle';
+
+interface Props {
+  state: CmsFormState;
+}
+
+const _BasicsSection = ({ state }: Props) => {
+  const { properties, visibleErrors, mode } = state;
+
+  return (
+    <Box direction="vertical" gap="SP4">
+      <FieldTypeSelect
+        label="Field Type"
+        value={properties.type}
+        onChange={state.changeType}
+        disabled={mode === 'edit'}
+        error={visibleErrors.type}
+      />
+
+      <FieldNameInput
+        label="Field Name"
+        value={properties.name}
+        onChange={state.changeName}
+        onBlur={() => state.blurField('name')}
+        error={visibleErrors.name}
+      />
+
+      {isPIISupportedByFieldType(properties.type) && (
+        <FieldPiiToggle
+          label="Personally Identifiable Information (PII)"
+          checked={properties.isPii}
+          onChange={state.setIsPii}
+        />
+      )}
+    </Box>
+  );
+};
+
+export const BasicsSection = observer(_BasicsSection);

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Box, Divider, Input, Text } from '@wix/design-system';
+import { ChevronDown, ChevronRight } from '@wix/wix-ui-icons-common';
+import type { CmsFormState } from '../CmsFormState';
+import { ValidationSubSection } from './ValidationSubSection';
+
+interface Props {
+  state: CmsFormState;
+}
+
+const _ValidationAndDefaultsSection = ({ state }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const hasValidation = state.supportedValidationRules.length > 0;
+
+  return (
+    <Box direction="vertical">
+      <div
+        role="button"
+        tabIndex={0}
+        style={{
+          cursor: 'pointer',
+          padding: '16px 0 16px 0',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+        }}
+        onClick={() => setIsOpen((v) => !v)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsOpen((v) => !v);
+          }
+        }}
+      >
+        {isOpen ? <ChevronDown size="18px" /> : <ChevronRight size="18px" />}
+        <Text weight="bold">Validation and defaults</Text>
+      </div>
+
+      {isOpen && (
+        <Box direction="vertical" gap="SP0">
+          {hasValidation && (
+            <Box direction="vertical" gap="SP4" paddingBottom="SP4">
+              <Text weight="bold">Validation</Text>
+              <ValidationSubSection state={state} />
+              <Divider />
+            </Box>
+          )}
+
+          <Box direction="vertical" gap="SP4" paddingBottom="SP4">
+            <Text weight="bold">Help text</Text>
+            <Input
+              ariaLabel="Help text"
+              value={state.properties.helpText}
+              onChange={(e) => state.setHelpText(e.target.value)}
+            />
+            <Divider />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export const ValidationAndDefaultsSection = observer(
+  _ValidationAndDefaultsSection,
+);

package/src/components/CmsFieldManagement/Sections/ValidationSubSection.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Box } from '@wix/design-system';
+import type { StringLengthRange } from '../../../types/SchemaConfig';
+import type { CmsFormState } from '../CmsFormState';
+import type { ValidationRule } from '../types';
+import { RequiredToggle } from '../formFields/RequiredToggle';
+import { CharactersLimitInput } from '../formFields/CharactersLimitInput';
+
+interface Props {
+  state: CmsFormState;
+}
+
+const _ValidationSubSection = ({ state }: Props) => {
+  const { supportedValidationRules, fieldRules } = state;
+
+  return (
+    <Box direction="vertical" gap="SP4">
+      {supportedValidationRules.map((rule: ValidationRule) => {
+        if (rule === 'required') {
+          return (
+            <RequiredToggle
+              key="required"
+              label="Required"
+              checked={Boolean(fieldRules.validationRules.required)}
+              onChange={(v) => state.setValidationRule('required', v)}
+            />
+          );
+        }
+        if (rule === 'charactersLimit') {
+          return (
+            <CharactersLimitInput
+              key="charactersLimit"
+              minLabel="Min characters"
+              maxLabel="Max characters"
+              value={
+                (fieldRules.validationRules.charactersLimit as
+                  | StringLengthRange
+                  | undefined) ?? {}
+              }
+              onChange={(v) => state.setValidationRule('charactersLimit', v)}
+            />
+          );
+        }
+        return null;
+      })}
+    </Box>
+  );
+};
+
+export const ValidationSubSection = observer(_ValidationSubSection);

package/src/components/CmsFieldManagement/fieldTypeUtils.ts

@@ -0,0 +1,17 @@
+import type { PatternsFieldType } from '../../types/SchemaConfig';
+import type { SelectableFieldTypes } from './types';
+
+const SELECTABLE_FIELD_TYPES = new Set<PatternsFieldType>([
+  'SHORT_TEXT',
+  'NUMBER',
+  'BOOLEAN',
+  'DATE',
+]);
+
+export const isSelectableFieldType = (
+  t: PatternsFieldType,
+): t is SelectableFieldTypes => SELECTABLE_FIELD_TYPES.has(t);
+
+export const isPIISupportedByFieldType = (
+  t: SelectableFieldTypes | undefined,
+): boolean => t === 'SHORT_TEXT';

package/src/components/CmsFieldManagement/fieldValidationRulesMap.ts

@@ -0,0 +1,18 @@
+import type { SelectableFieldTypes, ValidationRule } from './types';
+
+// Sourced from cms-web packages/auto-cms-field-types/src/field-types-metadata.json validations[] per type.
+//
+// TODO: cross-check this map against cms-web before GA. The ValidationSection UI in Phase 3 renders
+// rule inputs based on this map — a wrong entry surfaces as the wrong set of inputs for a field type.
+// Updating this file is the single place to fix any mismatch; no downstream changes required.
+const fieldValidationRulesMap: Record<SelectableFieldTypes, ValidationRule[]> =
+  {
+    SHORT_TEXT: ['required', 'charactersLimit'],
+    NUMBER: ['required'],
+    BOOLEAN: ['required'],
+    DATE: ['required'],
+  };
+
+export const getFieldTypeValidationRulesList = (
+  t: SelectableFieldTypes,
+): ValidationRule[] => fieldValidationRulesMap[t] ?? [];

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, FormField, NumberInput } from '@wix/design-system';
+import type { StringLengthRange } from '../../../types/SchemaConfig';
+
+export interface CharactersLimitInputProps {
+  minLabel: string;
+  maxLabel: string;
+  value: StringLengthRange;
+  onChange: (v: StringLengthRange) => void;
+}
+
+export const CharactersLimitInput = ({
+  minLabel,
+  maxLabel,
+  value,
+  onChange,
+}: CharactersLimitInputProps) => (
+  <Box gap="SP3">
+    <FormField label={minLabel}>
+      <NumberInput
+        value={value.minLength}
+        onChange={(v) => onChange({ ...value, minLength: v ?? undefined })}
+        min={0}
+      />
+    </FormField>
+    <FormField label={maxLabel}>
+      <NumberInput
+        value={value.maxLength}
+        onChange={(v) => onChange({ ...value, maxLength: v ?? undefined })}
+        min={0}
+      />
+    </FormField>
+  </Box>
+);

package/src/components/CmsFieldManagement/formFields/FieldNameInput.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+
+export interface FieldNameInputProps {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  onBlur?: () => void;
+  error?: string;
+}
+
+export const FieldNameInput = ({
+  label,
+  value,
+  onChange,
+  onBlur,
+  error,
+}: FieldNameInputProps) => (
+  <FormField
+    required
+    label={label}
+    status={error ? 'error' : undefined}
+    statusMessage={error}
+  >
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+    />
+  </FormField>
+);

package/src/components/CmsFieldManagement/formFields/FieldPiiToggle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormField, ToggleSwitch } from '@wix/design-system';
+
+export interface FieldPiiToggleProps {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+}
+
+export const FieldPiiToggle = ({
+  label,
+  checked,
+  onChange,
+  disabled,
+}: FieldPiiToggleProps) => (
+  <FormField label={label}>
+    <ToggleSwitch
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+      disabled={disabled}
+    />
+  </FormField>
+);