@ankhorage/zora 10.0.0 → 11.0.0

package/src/components/form/Form.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { FormActions } from './FormActions';
-import { FormError } from './FormError';
-import { FormField } from './FormField';
-import type { FormProps } from './types';
-import { useFormController } from './useFormController';
-
-function FormInner<TName extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  fields,
-  values,
-  onChange,
-  onSubmit,
-  errors,
-  error,
-  loading = false,
-  disabled = false,
-  submitLabel = 'Submit',
-  actions,
-  footer,
-  validateOnChange = false,
-  testID,
-  interactionPolicy,
-}: FormProps<TName>) {
-  const controller = useFormController({
-    fields,
-    values,
-    errors,
-    onChange,
-    onSubmit,
-    validateOnChange,
-  });
-
-  return (
-    <Stack gap="m" testID={testID}>
-      <FormError error={error} />
-      {fields.map((field) => (
-        <FormField
-          key={field.name}
-          disabled={disabled}
-          error={controller.errors[field.name]}
-          field={field}
-          interactionPolicy={interactionPolicy}
-          loading={loading}
-          onChange={controller.setFieldValue}
-          value={values[field.name]}
-        />
-      ))}
-      <FormActions
-        disabled={disabled}
-        interactionPolicy={interactionPolicy}
-        loading={loading}
-        onSubmit={() => {
-          if (interactionPolicy === 'passive') return;
-
-          void controller.handleSubmit();
-        }}
-        submitLabel={submitLabel}
-      >
-        {actions}
-      </FormActions>
-      {footer ? <Box>{footer}</Box> : null}
-    </Stack>
-  );
-}
-
-/***
- * Composes fields and actions into a validated form layout.
- */
-export const Form = withZoraThemeScope(FormInner);

package/src/components/form/FormError.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormErrorProps } from './types';
-
-function FormErrorInner({
-  themeId: _themeId,
-  mode: _mode,
-  error,
-  testID,
-  interactionPolicy: _interactionPolicy,
-}: FormErrorProps) {
-  const { theme } = useZoraTheme();
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <Box borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
-      <Text color="error" variant="bodySmall">
-        {error}
-      </Text>
-    </Box>
-  );
-}
-
-/***
- * Displays a form-level validation or submission error message.
- */
-export const FormError = withZoraThemeScope(FormErrorInner);

package/src/components/form/FormField.tsx

@@ -1,157 +0,0 @@
-import { Field } from '@ankhorage/surface';
-import React from 'react';
-
-import { TextInput } from '../../features/form/text-input/public';
-import { Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldConfig, FormFieldControlProps, FormFieldProps } from './types';
-import { hasRequiredRule } from './validation';
-
-function isControlFieldProps<TName extends string>(
-  props: FormFieldProps<TName>,
-): props is FormFieldControlProps<TName> {
-  return 'field' in props;
-}
-
-function resolveKeyboardType(field: FormFieldConfig) {
-  if (field.keyboardType) {
-    return field.keyboardType;
-  }
-
-  if (field.type === 'email') {
-    return 'email-address';
-  }
-
-  if (field.type === 'number' || field.type === 'otp') {
-    return 'number-pad';
-  }
-
-  if (field.type === 'tel') {
-    return 'phone-pad';
-  }
-
-  if (field.type === 'url') {
-    return 'url';
-  }
-
-  return undefined;
-}
-
-function resolveAutoCapitalize(field: FormFieldConfig) {
-  if (field.autoCapitalize) {
-    return field.autoCapitalize;
-  }
-
-  if (['email', 'password', 'url'].includes(field.type ?? 'text')) {
-    return 'none';
-  }
-
-  return undefined;
-}
-
-function resolveTextContentType(field: FormFieldConfig) {
-  if (field.textContentType) {
-    return field.textContentType;
-  }
-
-  if (field.type === 'email') {
-    return 'emailAddress';
-  }
-
-  if (field.type === 'password') {
-    return 'password';
-  }
-
-  if (field.type === 'otp') {
-    return 'oneTimeCode';
-  }
-
-  return undefined;
-}
-
-function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
-  return (
-    <Stack gap="xs">
-      <Text variant="label" weight="semiBold">
-        {label}
-      </Text>
-      {description ? (
-        <Text emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </Stack>
-  );
-}
-
-function FormFieldInner<TName extends string = string>(props: FormFieldProps<TName>) {
-  if (!isControlFieldProps(props)) {
-    const {
-      themeId: _themeId,
-      mode: _mode,
-      label,
-      description,
-      helperText,
-      children,
-      interactionPolicy: _interactionPolicy,
-      ...fieldProps
-    } = props;
-
-    return (
-      <Field {...fieldProps} helperText={helperText} label={renderLabel(label, description)}>
-        {children}
-      </Field>
-    );
-  }
-
-  const {
-    themeId: _themeId,
-    mode: _mode,
-    field,
-    value,
-    error,
-    disabled = false,
-    loading = false,
-    onChange,
-    testID,
-    interactionPolicy,
-  } = props;
-  const fieldDisabled = disabled || loading || field.disabled;
-  const required = field.required ?? hasRequiredRule(field.rules);
-
-  return (
-    <Field
-      disabled={fieldDisabled}
-      errorText={error}
-      helperText={field.helperText}
-      invalid={Boolean(error)}
-      label={renderLabel(field.label, field.description)}
-      readOnly={field.readOnly}
-      required={required}
-      testID={testID ?? field.testID}
-    >
-      <TextInput
-        accessibilityLabel={typeof field.label === 'string' ? field.label : undefined}
-        autoCapitalize={resolveAutoCapitalize(field)}
-        autoComplete={field.autoComplete}
-        disabled={fieldDisabled}
-        interactionPolicy={interactionPolicy}
-        invalid={Boolean(error)}
-        keyboardType={resolveKeyboardType(field)}
-        maxLength={field.maxLength}
-        onChangeText={(nextValue) => onChange(field.name, nextValue)}
-        placeholder={field.placeholder}
-        readOnly={field.readOnly}
-        secureTextEntry={field.secureTextEntry ?? field.type === 'password'}
-        textContentType={resolveTextContentType(field)}
-        value={value}
-      />
-    </Field>
-  );
-}
-
-/***
- * Connects a controlled form value to a labeled input field with error handling.
- */
-export const FormField = withZoraThemeScope(FormFieldInner);

package/src/components/form/meta.ts

@@ -1,98 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const formMeta = {
-  name: 'Form',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Form orchestration component; not represented as a manifest node in v1.',
-  events: {
-    submit: {
-      label: 'Submit',
-      eventType: 'form.submit',
-      description: 'Emitted when the form submits its current values.',
-      payloadFields: [
-        {
-          path: 'payload.values',
-          type: 'record',
-          label: 'Values',
-          description: 'Submitted form values keyed by field name.',
-        },
-      ],
-    },
-  },
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const formActionsMeta = {
-  name: 'FormActions',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Form helper component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const formErrorMeta = {
-  name: 'FormError',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Form helper component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const formFieldMeta = {
-  name: 'FormField',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: ['TextInput'],
-  blueprint: {
-    label: 'Form field',
-    defaultProps: {
-      label: 'Label',
-    },
-  },
-  props: {
-    label: {
-      type: 'string',
-      category: 'Content',
-      label: 'Label',
-      default: 'Label',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-    },
-    helperText: {
-      type: 'string',
-      category: 'Content',
-      label: 'Helper text',
-    },
-    required: {
-      type: 'boolean',
-      category: 'Validation',
-      label: 'Required',
-      default: false,
-    },
-    invalid: {
-      type: 'boolean',
-      category: 'Validation',
-      label: 'Invalid',
-      default: false,
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-    readOnly: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Read-only',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/patterns/form-field/index.ts

@@ -1 +0,0 @@
-export { FormField } from './FormField';

package/src/patterns/form-field/types.ts

@@ -1,16 +0,0 @@
-import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface FormFieldProps
-  extends
-    ZoraBaseProps,
-    Pick<
-      Omit<SurfaceFieldProps, 'mode' | 'themeId'>,
-      'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required'
-    > {
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  helperText?: React.ReactNode;
-}