@himakarinv/nativex 1.0.0

package/src/components/DynamicForm/DynamicForm.tsx

@@ -0,0 +1,741 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { colors, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { Checkbox, CheckboxShape, CheckboxSize } from '../Checkbox';
+import { Datepicker, type DatepickerDate } from '../Datepicker';
+import { HintError } from '../HintError';
+import { InputDropdown, InputDropdownSize, type InputDropdownItem } from '../InputDropdown';
+import { InputField, InputState } from '../InputField';
+import { Label } from '../Label';
+import {
+  Offcanvas,
+  OffcanvasPosition,
+  OffcanvasSize,
+  type OffcanvasFooterButton,
+} from '../Offcanvas';
+import { Textarea, TextareaVariant } from '../Textarea';
+import { Timepicker, type TimepickerTime } from '../Timepicker';
+import { clearToasts, showToast, Toast, ToastType } from '../Toast';
+import { Typeahead, type TypeaheadOption, type TypeaheadValue } from '../Typeahead';
+
+export const DynamicFormFieldType = {
+  Text: 'text',
+  Select: 'select',
+  Typeahead: 'typeahead',
+  Date: 'date',
+  Time: 'time',
+  Checkbox: 'checkbox',
+  Textarea: 'textarea',
+  Radio: 'radio',
+} as const;
+
+export type DynamicFormFieldType =
+  (typeof DynamicFormFieldType)[keyof typeof DynamicFormFieldType];
+
+export const DynamicFormLayout = {
+  Stack: 'stack',
+  Grid: 'grid',
+} as const;
+
+export type DynamicFormLayout = (typeof DynamicFormLayout)[keyof typeof DynamicFormLayout];
+
+export type DynamicFormSelectOption = {
+  label: string;
+  value: string;
+  handle?: string;
+};
+
+export type DynamicFormFieldValidation = {
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+};
+
+export type DynamicFormTypeaheadConfig = {
+  options?: TypeaheadOption[];
+  searchFn?: (query: string) => Promise<TypeaheadOption[]>;
+  getOptionsByIdsFn?: (ids: number[]) => Promise<TypeaheadOption[]>;
+  seedLabel?: string;
+  multiple?: boolean;
+};
+
+export type DynamicFormFieldConfig = {
+  key: string;
+  type: DynamicFormFieldType;
+  label: string;
+  placeholder?: string;
+  hint?: string;
+  defaultValue?: unknown;
+  disabled?: boolean;
+  rows?: number;
+  options?: DynamicFormSelectOption[];
+  showSuffix?: boolean;
+  typeahead?: DynamicFormTypeaheadConfig;
+  fullWidth?: boolean;
+  validation?: DynamicFormFieldValidation;
+};
+
+export type DynamicFormValue = Record<string, unknown>;
+
+export type DynamicFormProps = {
+  fields: DynamicFormFieldConfig[];
+  title?: string;
+  description?: string;
+  layout?: DynamicFormLayout;
+  submitLabel?: string;
+  resetLabel?: string;
+  showReset?: boolean;
+  showActions?: boolean;
+  formDisabled?: boolean;
+  useOffcanvas?: boolean;
+  offcanvasTitle?: string;
+  offcanvasTriggerLabel?: string;
+  openOffcanvasOnLoad?: boolean;
+  offcanvasCancelLabel?: string;
+  offcanvasSize?: OffcanvasSize;
+  offcanvasPosition?: OffcanvasPosition;
+  showToast?: boolean;
+  successToastHeader?: string;
+  successToastMessage?: string;
+  errorToastHeader?: string;
+  errorToastMessage?: string;
+  onSubmitted?: (value: DynamicFormValue) => void;
+  onSubmitInvalid?: () => void;
+  onReset?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const GRID_BREAKPOINT = spacing['7xl'] * 16 + spacing['6xl'] * 2;
+const STACK_MAX_WIDTH = spacing['7xl'] * 8 + spacing['4xl'];
+const OFFCANVAS_TITLE_ID = 'dynamic-form-offcanvas-title';
+
+function fieldSignature(fields: DynamicFormFieldConfig[]) {
+  return fields.map((field) => `${field.key}:${field.type}`).join('|');
+}
+
+function defaultValueForType(type: DynamicFormFieldType): unknown {
+  switch (type) {
+    case DynamicFormFieldType.Checkbox:
+      return false;
+    case DynamicFormFieldType.Date:
+    case DynamicFormFieldType.Time:
+    case DynamicFormFieldType.Typeahead:
+      return null;
+    default:
+      return '';
+  }
+}
+
+function initialValues(fields: DynamicFormFieldConfig[]): DynamicFormValue {
+  const next: DynamicFormValue = {};
+  fields.forEach((field) => {
+    next[field.key] = field.defaultValue !== undefined ? field.defaultValue : defaultValueForType(field.type);
+  });
+  return next;
+}
+
+function isBlank(value: unknown) {
+  return value == null || value === '';
+}
+
+function isTypeaheadEmpty(value: unknown) {
+  if (isBlank(value)) {
+    return true;
+  }
+  return Array.isArray(value) && value.length === 0;
+}
+
+function fieldError(field: DynamicFormFieldConfig, value: unknown): string {
+  const validation = field.validation;
+  if (!validation) {
+    return '';
+  }
+
+  if (validation.required) {
+    if (field.type === DynamicFormFieldType.Checkbox && value !== true) {
+      return `${field.label} is required`;
+    }
+    if (field.type === DynamicFormFieldType.Typeahead && isTypeaheadEmpty(value)) {
+      return `${field.label} is required`;
+    }
+    if (field.type !== DynamicFormFieldType.Checkbox && field.type !== DynamicFormFieldType.Typeahead && isBlank(value)) {
+      return `${field.label} is required`;
+    }
+  }
+
+  const text = value == null ? '' : String(value);
+  if (validation.minLength != null && text.length < validation.minLength) {
+    return `${field.label} must be at least ${validation.minLength} characters`;
+  }
+  if (validation.maxLength != null && text.length > validation.maxLength) {
+    return `${field.label} must not exceed ${validation.maxLength} characters`;
+  }
+  return '';
+}
+
+function isFormInvalid(fields: DynamicFormFieldConfig[], values: DynamicFormValue) {
+  return fields.some((field) => fieldError(field, values[field.key]));
+}
+
+function typeaheadSearch(field: DynamicFormFieldConfig) {
+  const config = field.typeahead;
+  if (config?.searchFn) {
+    return config.searchFn;
+  }
+  const options = config?.options ?? [];
+  return (query: string) => {
+    const term = query.trim().toLowerCase();
+    if (term.length < 2) {
+      return Promise.resolve([]);
+    }
+    return Promise.resolve(
+      options.filter(
+        (option) =>
+          option.label.toLowerCase().includes(term) ||
+          option.email?.toLowerCase().includes(term) ||
+          String(option.id).includes(term),
+      ),
+    );
+  };
+}
+
+function typeaheadResolve(field: DynamicFormFieldConfig) {
+  const config = field.typeahead;
+  if (config?.getOptionsByIdsFn) {
+    return config.getOptionsByIdsFn;
+  }
+  const options = config?.options ?? [];
+  if (!options.length) {
+    return undefined;
+  }
+  return (ids: number[]) => Promise.resolve(options.filter((option) => ids.includes(Number(option.id))));
+}
+
+function selectOptions(field: DynamicFormFieldConfig): InputDropdownItem[] {
+  return (field.options ?? []).map((option) => ({
+    label: option.label,
+    value: option.value,
+    handle: option.handle,
+  }));
+}
+
+function selectedSelectValue(value: unknown) {
+  return value != null && value !== '' ? String(value) : undefined;
+}
+
+function isFullWidthField(field: DynamicFormFieldConfig) {
+  if (field.fullWidth != null) {
+    return field.fullWidth;
+  }
+  return (
+    field.type === DynamicFormFieldType.Textarea ||
+    field.type === DynamicFormFieldType.Radio ||
+    field.type === DynamicFormFieldType.Checkbox
+  );
+}
+
+export function DynamicForm({
+  fields,
+  title = '',
+  description = '',
+  layout = DynamicFormLayout.Stack,
+  submitLabel = 'Submit',
+  resetLabel = 'Reset',
+  showReset = true,
+  showActions = true,
+  formDisabled = false,
+  useOffcanvas = false,
+  offcanvasTitle = '',
+  offcanvasTriggerLabel = 'Open form',
+  openOffcanvasOnLoad = false,
+  offcanvasCancelLabel = 'Cancel',
+  offcanvasSize = OffcanvasSize.Medium,
+  offcanvasPosition = OffcanvasPosition.End,
+  showToast: toastEnabled = true,
+  successToastHeader = 'Success',
+  successToastMessage = 'Form saved successfully.',
+  errorToastHeader = 'Validation error',
+  errorToastMessage = 'Please complete all required fields.',
+  onSubmitted,
+  onSubmitInvalid,
+  onReset,
+  style,
+}: DynamicFormProps) {
+  const { width } = useWindowDimensions();
+  const signature = useMemo(() => fieldSignature(fields), [fields]);
+  const [values, setValues] = useState<DynamicFormValue>(() => initialValues(fields));
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [offcanvasOpen, setOffcanvasOpen] = useState(false);
+  const didAutoOpen = useRef(false);
+  const signatureRef = useRef(signature);
+
+  useEffect(() => {
+    if (signatureRef.current !== signature) {
+      signatureRef.current = signature;
+      setValues(initialValues(fields));
+      setTouched({});
+    }
+  }, [fields, signature]);
+
+  useEffect(() => {
+    if (useOffcanvas && openOffcanvasOnLoad && !didAutoOpen.current) {
+      didAutoOpen.current = true;
+      setOffcanvasOpen(true);
+    }
+    if (!openOffcanvasOnLoad) {
+      didAutoOpen.current = false;
+    }
+  }, [useOffcanvas, openOffcanvasOnLoad]);
+
+  useEffect(() => {
+    if (!toastEnabled) {
+      return;
+    }
+    return () => {
+      clearToasts();
+    };
+  }, [toastEnabled]);
+
+  const twoColumn = layout === DynamicFormLayout.Grid && !isNative && width >= GRID_BREAKPOINT;
+  const showInlineHeader = Boolean((title || description) && !useOffcanvas);
+  const showInlineActions = showActions && !useOffcanvas;
+  const resolvedOffcanvasTitle = offcanvasTitle || title || 'Form';
+  const invalid = isFormInvalid(fields, values);
+  const submitDisabled = formDisabled || invalid;
+
+  const footerButtons: OffcanvasFooterButton[] = [
+    {
+      action: 'cancel',
+      label: offcanvasCancelLabel,
+      variant: ButtonVariant.LinkGray,
+    },
+    {
+      action: 'save',
+      label: submitLabel,
+      variant: ButtonVariant.Primary,
+      disabled: formDisabled,
+    },
+  ];
+
+  function patchValue(key: string, value: unknown) {
+    const field = fields.find((item) => item.key === key);
+    if (formDisabled || field?.disabled) {
+      return;
+    }
+    setValues((current) => ({ ...current, [key]: value }));
+    setTouched((current) => ({ ...current, [key]: true }));
+  }
+
+  function visibleError(field: DynamicFormFieldConfig) {
+    if (!touched[field.key]) {
+      return '';
+    }
+    return fieldError(field, values[field.key]);
+  }
+
+  function hasError(field: DynamicFormFieldConfig) {
+    return Boolean(visibleError(field));
+  }
+
+  function isFieldDisabled(field: DynamicFormFieldConfig) {
+    return formDisabled || Boolean(field.disabled);
+  }
+
+  function onSubmit() {
+    const allTouched: Record<string, boolean> = {};
+    fields.forEach((field) => {
+      allTouched[field.key] = true;
+    });
+    setTouched(allTouched);
+
+    if (isFormInvalid(fields, values)) {
+      onSubmitInvalid?.();
+      if (useOffcanvas && toastEnabled) {
+        showToast({
+          type: ToastType.Error,
+          header: errorToastHeader,
+          body: errorToastMessage,
+        });
+      }
+      return;
+    }
+
+    onSubmitted?.({ ...values });
+
+    if (useOffcanvas && toastEnabled) {
+      showToast({
+        type: ToastType.Success,
+        header: successToastHeader,
+        body: successToastMessage,
+      });
+      setOffcanvasOpen(false);
+    }
+  }
+
+  function onResetForm() {
+    const next: DynamicFormValue = {};
+    fields.forEach((field) => {
+      next[field.key] = defaultValueForType(field.type);
+    });
+    setValues(next);
+    setTouched({});
+    onReset?.();
+  }
+
+  function onFooterAction(action: string) {
+    if (action === 'cancel') {
+      setOffcanvasOpen(false);
+      return;
+    }
+    if (action === 'save') {
+      onSubmit();
+    }
+  }
+
+  function renderField(field: DynamicFormFieldConfig) {
+    const error = visibleError(field);
+    const disabled = isFieldDisabled(field);
+    const required = Boolean(field.validation?.required);
+    const hint = error ? '' : (field.hint ?? '');
+
+    switch (field.type) {
+      case DynamicFormFieldType.Text:
+        return (
+          <InputField
+            fullWidth
+            label={field.label}
+            required={required}
+            placeholder={field.placeholder ?? ''}
+            hint={hint}
+            error={error}
+            state={error ? InputState.Error : InputState.Default}
+            value={values[field.key] != null ? String(values[field.key]) : ''}
+            disabled={disabled}
+            inputId={field.key}
+            onValueChange={(value) => patchValue(field.key, value)}
+            onBlur={() => setTouched((current) => ({ ...current, [field.key]: true }))}
+          />
+        );
+      case DynamicFormFieldType.Select:
+        return (
+          <View>
+            <InputDropdown
+              label={field.label}
+              required={required}
+              placeholder={field.placeholder ?? 'Select an option'}
+              options={selectOptions(field)}
+              selectedValue={selectedSelectValue(values[field.key])}
+              suffix={field.showSuffix ?? false}
+              size={InputDropdownSize.Large}
+              disabled={disabled}
+              onSelectionChange={(item) => patchValue(field.key, item?.value ?? '')}
+            />
+            <HintError hint={hint} error={error} />
+          </View>
+        );
+      case DynamicFormFieldType.Typeahead:
+        return (
+          <Typeahead
+            label={field.label}
+            required={required}
+            placeholder={field.placeholder ?? ''}
+            helpText={hint}
+            error={error}
+            state={error ? InputState.Error : InputState.Default}
+            fullWidth
+            inputId={field.key}
+            disabled={disabled}
+            multiple={field.typeahead?.multiple ?? false}
+            seedLabel={field.typeahead?.seedLabel ?? ''}
+            searchFn={typeaheadSearch(field)}
+            getOptionsByIdsFn={typeaheadResolve(field)}
+            value={(values[field.key] as TypeaheadValue) ?? null}
+            onValueChange={(value) => patchValue(field.key, value)}
+          />
+        );
+      case DynamicFormFieldType.Date:
+        return (
+          <View>
+            <Datepicker
+              label={field.label}
+              required={required}
+              fullWidth
+              date={(values[field.key] as DatepickerDate | null) ?? null}
+              error={error}
+              disabled={disabled}
+              onDateChange={(date) => patchValue(field.key, date)}
+            />
+            {field.hint && !hasError(field) ? <HintError hint={field.hint} /> : null}
+          </View>
+        );
+      case DynamicFormFieldType.Time:
+        return (
+          <View>
+            <Timepicker
+              label={field.label}
+              required={required}
+              time={(values[field.key] as TimepickerTime | null) ?? null}
+              disabled={disabled}
+              onTimeChange={(time) => patchValue(field.key, time)}
+              style={styles.timepicker}
+            />
+            <HintError hint={hint} error={error} />
+          </View>
+        );
+      case DynamicFormFieldType.Checkbox:
+        return (
+          <View>
+            <Checkbox
+              inputId={field.key}
+              label={field.label}
+              required={required}
+              supportingText={field.hint ?? ''}
+              checked={Boolean(values[field.key])}
+              disabled={disabled}
+              size={CheckboxSize.Medium}
+              onCheckedChange={(checked) => patchValue(field.key, checked)}
+            />
+            {error ? <HintError error={error} /> : null}
+          </View>
+        );
+      case DynamicFormFieldType.Textarea:
+        return (
+          <Textarea
+            id={field.key}
+            label={field.label}
+            required={required}
+            placeholder={field.placeholder ?? ''}
+            hint={error || (field.hint ?? '')}
+            variant={error ? TextareaVariant.Danger : TextareaVariant.Default}
+            disabled={disabled}
+            value={values[field.key] != null ? String(values[field.key]) : ''}
+            rows={field.rows ?? 4}
+            maxLength={field.validation?.maxLength}
+            onValueChange={(value) => patchValue(field.key, value)}
+          />
+        );
+      case DynamicFormFieldType.Radio:
+        return (
+          <View accessibilityRole="radiogroup" accessibilityLabel={field.label}>
+            <View style={styles.legend}>
+              <Label text={field.label} required={required} />
+            </View>
+            <View style={styles.radioGroup}>
+              {(field.options ?? []).map((option) => (
+                <Checkbox
+                  key={`${field.key}-${option.value}`}
+                  inputId={`${field.key}-${option.value}`}
+                  label={option.label}
+                  checked={String(values[field.key] ?? '') === option.value}
+                  disabled={disabled}
+                  size={CheckboxSize.Medium}
+                  shape={CheckboxShape.Circle}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      patchValue(field.key, option.value);
+                    }
+                  }}
+                />
+              ))}
+            </View>
+            <HintError hint={hint} error={error} />
+          </View>
+        );
+      default:
+        return null;
+    }
+  }
+
+  const form = (
+    <View
+      style={[
+        styles.form,
+        formDisabled && styles.formDisabled,
+        layout === DynamicFormLayout.Grid && styles.formGrid,
+        useOffcanvas && styles.formInOffcanvas,
+      ]}>
+      {showInlineHeader ? (
+        <View style={styles.header}>
+          {title ? <Text style={styles.title}>{title}</Text> : null}
+          {description ? <Text style={styles.description}>{description}</Text> : null}
+        </View>
+      ) : null}
+
+      <View style={[styles.fields, twoColumn && styles.fieldsGrid]}>
+        {fields.map((field) => (
+          <View
+            key={field.key}
+            style={[
+              styles.field,
+              twoColumn && styles.fieldGrid,
+              twoColumn && isFullWidthField(field) && styles.fieldFull,
+            ]}>
+            {renderField(field)}
+          </View>
+        ))}
+      </View>
+
+      {showInlineActions ? (
+        <View style={styles.actions}>
+          <Button
+            label={submitLabel}
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Large}
+            disabled={submitDisabled}
+            onPress={onSubmit}
+          />
+          {showReset ? (
+            <Button
+              label={resetLabel}
+              variant={ButtonVariant.TertiaryGray}
+              size={ButtonSize.Large}
+              disabled={formDisabled}
+              onPress={onResetForm}
+            />
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <View style={[styles.shell, style]}>
+      {useOffcanvas ? (
+        <>
+          <Button
+            label={offcanvasTriggerLabel}
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            disabled={formDisabled}
+            onPress={() => setOffcanvasOpen(true)}
+          />
+          {toastEnabled ? <Toast /> : null}
+          <Offcanvas
+            visible={offcanvasOpen}
+            title={resolvedOffcanvasTitle}
+            titleId={OFFCANVAS_TITLE_ID}
+            closeAriaLabel="Close"
+            footerButtons={footerButtons}
+            size={offcanvasSize}
+            position={offcanvasPosition}
+            onCloseRequested={() => setOffcanvasOpen(false)}
+            onFooterAction={onFooterAction}>
+            {toastEnabled ? <Toast style={styles.offcanvasToast} /> : null}
+            {form}
+          </Offcanvas>
+        </>
+      ) : (
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+          nestedScrollEnabled
+          showsVerticalScrollIndicator>
+          {form}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  shell: {
+    width: '100%',
+    flex: 1,
+    minHeight: 0,
+  },
+  scroll: {
+    flex: 1,
+    width: '100%',
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: spacing['7xl'],
+  },
+  timepicker: {
+    alignSelf: 'flex-start',
+  },
+  form: {
+    width: '100%',
+    maxWidth: isNative ? '100%' : STACK_MAX_WIDTH,
+    gap: spacing.xl,
+  },
+  formGrid: {
+    maxWidth: '100%',
+  },
+  formInOffcanvas: {
+    maxWidth: '100%',
+  },
+  formDisabled: {
+    opacity: 0.85,
+  },
+  header: {
+    gap: spacing.sm,
+  },
+  title: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.xl,
+    lineHeight: typography.fontSize.xl * typography.lineHeight.tight,
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.gray.darkest,
+  },
+  description: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+    color: colors.gray.dark,
+  },
+  fields: {
+    gap: spacing.xl,
+  },
+  fieldsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    columnGap: spacing.xl,
+    rowGap: spacing.lg,
+  },
+  field: {
+    minWidth: 0,
+    width: '100%',
+  },
+  fieldGrid: {
+    width: '48%',
+    flexGrow: 1,
+  },
+  fieldFull: {
+    width: '100%',
+    flexGrow: 1,
+  },
+  legend: {
+    marginBottom: spacing.sm,
+  },
+  radioGroup: {
+    gap: spacing.md,
+  },
+  actions: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingTop: spacing.sm,
+  },
+  offcanvasToast: {
+    position: 'relative',
+    top: spacing.none,
+    right: spacing.none,
+    marginBottom: spacing.md,
+    alignSelf: 'flex-end',
+  },
+});