@ankhorage/zora 0.5.3 → 0.6.1

package/src/patterns/auth/OtpForm.tsx

@@ -0,0 +1,80 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import type { OtpFormProps } from './types';
+
+type OtpFieldName = 'otp';
+
+export function OtpForm({
+  length = 6,
+  otpLabel = 'Code',
+  resendLabel = 'Resend code',
+  resendDisabled = false,
+  resendLoading = false,
+  loading = false,
+  disabled = false,
+  error,
+  submitLabel = 'Verify code',
+  onSubmit,
+  onResend,
+  testID,
+}: OtpFormProps) {
+  const resolvedLength = Math.max(1, length);
+  const [values, setValues] = React.useState<FormValues<OtpFieldName>>({
+    otp: '',
+  });
+  const fields = React.useMemo<readonly FormFieldConfig<OtpFieldName>[]>(
+    () => [
+      {
+        name: 'otp',
+        label: otpLabel,
+        type: 'otp',
+        maxLength: resolvedLength,
+        rules: [{ kind: 'required' }, { kind: 'minLength', value: resolvedLength }],
+      },
+    ],
+    [otpLabel, resolvedLength],
+  );
+
+  const handleSubmit = React.useCallback(
+    (formValues: FormValues<OtpFieldName>) =>
+      onSubmit({
+        otp: formValues.otp.trim(),
+      }),
+    [onSubmit],
+  );
+
+  return (
+    <Form
+      actions={
+        onResend ? (
+          <Stack direction="row" gap="s" wrap="wrap">
+            <Button
+              disabled={disabled || loading || resendDisabled}
+              emphasis="ghost"
+              loading={resendLoading}
+              onPress={() => {
+                void onResend();
+              }}
+              size="s"
+              tone="neutral"
+            >
+              {resendLabel}
+            </Button>
+          </Stack>
+        ) : undefined
+      }
+      disabled={disabled}
+      error={error}
+      fields={fields}
+      loading={loading}
+      onChange={setValues}
+      onSubmit={handleSubmit}
+      submitLabel={submitLabel}
+      testID={testID}
+      values={values}
+    />
+  );
+}

package/src/patterns/auth/SignInForm.tsx

@@ -0,0 +1,111 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import type { SignInFormProps } from './types';
+import {
+  defaultIdentifiers,
+  normalizeIdentifierKind,
+  resolveIdentifierLabel,
+  resolveIdentifierRules,
+  resolveIdentifierType,
+} from './utils';
+
+type SignInFieldName = 'identifier' | 'secret';
+
+export function SignInForm({
+  identifiers = defaultIdentifiers,
+  identifierLabel,
+  secretLabel = 'Password',
+  forgotPasswordLabel = 'Forgot password',
+  signUpLabel = 'Sign up',
+  loading = false,
+  disabled = false,
+  error,
+  submitLabel = 'Sign in',
+  onSubmit,
+  onForgotPassword,
+  onSignUp,
+  testID,
+}: SignInFormProps) {
+  const [values, setValues] = React.useState<FormValues<SignInFieldName>>({
+    identifier: '',
+    secret: '',
+  });
+  const hasActions = Boolean(onForgotPassword ?? onSignUp);
+  const fields = React.useMemo<readonly FormFieldConfig<SignInFieldName>[]>(
+    () => [
+      {
+        name: 'identifier',
+        label: identifierLabel ?? resolveIdentifierLabel(identifiers),
+        type: resolveIdentifierType(identifiers),
+        autoCapitalize: 'none',
+        rules: resolveIdentifierRules(identifiers),
+      },
+      {
+        name: 'secret',
+        label: secretLabel,
+        type: 'password',
+        rules: [{ kind: 'required' }],
+      },
+    ],
+    [identifierLabel, identifiers, secretLabel],
+  );
+
+  const handleSubmit = React.useCallback(
+    (formValues: FormValues<SignInFieldName>) =>
+      onSubmit({
+        identifier: formValues.identifier.trim(),
+        identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers),
+        secret: formValues.secret,
+      }),
+    [identifiers, onSubmit],
+  );
+
+  return (
+    <Form
+      actions={
+        hasActions ? (
+          <Stack direction="row" gap="s" wrap="wrap">
+            {onForgotPassword ? (
+              <Button
+                disabled={disabled || loading}
+                emphasis="ghost"
+                onPress={() => {
+                  void onForgotPassword();
+                }}
+                size="s"
+                tone="neutral"
+              >
+                {forgotPasswordLabel}
+              </Button>
+            ) : null}
+            {onSignUp ? (
+              <Button
+                disabled={disabled || loading}
+                emphasis="ghost"
+                onPress={() => {
+                  void onSignUp();
+                }}
+                size="s"
+                tone="neutral"
+              >
+                {signUpLabel}
+              </Button>
+            ) : null}
+          </Stack>
+        ) : undefined
+      }
+      disabled={disabled}
+      error={error}
+      fields={fields}
+      loading={loading}
+      onChange={setValues}
+      onSubmit={handleSubmit}
+      submitLabel={submitLabel}
+      testID={testID}
+      values={values}
+    />
+  );
+}

package/src/patterns/auth/SignUpForm.tsx

@@ -0,0 +1,76 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import type { SignUpFormProps } from './types';
+
+const defaultSignUpFields = [
+  {
+    name: 'email',
+    label: 'Email',
+    type: 'email',
+    autoCapitalize: 'none',
+    rules: [{ kind: 'required' }, { kind: 'email' }],
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    rules: [{ kind: 'required' }, { kind: 'minLength', value: 8 }],
+  },
+] as const satisfies readonly FormFieldConfig[];
+
+function createValues(fields: readonly FormFieldConfig[]): FormValues {
+  const values = fields.reduce<Record<string, string>>((nextValues, field) => {
+    nextValues[field.name] = '';
+    return nextValues;
+  }, {});
+
+  return values;
+}
+
+export function SignUpForm({
+  fields = defaultSignUpFields,
+  signInLabel = 'Sign in',
+  loading = false,
+  disabled = false,
+  error,
+  submitLabel = 'Sign up',
+  onSubmit,
+  onSignIn,
+  testID,
+}: SignUpFormProps) {
+  const [values, setValues] = React.useState<FormValues>(() => createValues(fields));
+
+  return (
+    <Form
+      actions={
+        onSignIn ? (
+          <Stack direction="row" gap="s" wrap="wrap">
+            <Button
+              disabled={disabled || loading}
+              emphasis="ghost"
+              onPress={() => {
+                void onSignIn();
+              }}
+              size="s"
+              tone="neutral"
+            >
+              {signInLabel}
+            </Button>
+          </Stack>
+        ) : undefined
+      }
+      disabled={disabled}
+      error={error}
+      fields={fields}
+      loading={loading}
+      onChange={setValues}
+      onSubmit={onSubmit}
+      submitLabel={submitLabel}
+      testID={testID}
+      values={values}
+    />
+  );
+}

package/src/patterns/auth/index.ts

@@ -0,0 +1,17 @@
+export { ForgotPasswordForm } from './ForgotPasswordForm';
+export { OtpForm } from './OtpForm';
+export { SignInForm } from './SignInForm';
+export { SignUpForm } from './SignUpForm';
+export type {
+  AuthFormBaseProps,
+  AuthIdentifierKind,
+  ForgotPasswordFormProps,
+  ForgotPasswordFormValues,
+  OtpFormProps,
+  OtpFormValues,
+  SignInFormProps,
+  SignInFormValues,
+  SignUpFormField,
+  SignUpFormProps,
+  SignUpFormValues,
+} from './types';

package/src/patterns/auth/types.ts

@@ -0,0 +1,67 @@
+import type React from 'react';
+
+import type { FormFieldConfig, FormValues } from '../../components/form';
+
+export type AuthIdentifierKind = 'email' | 'phone' | 'username';
+
+export interface AuthFormBaseProps {
+  loading?: boolean;
+  disabled?: boolean;
+  error?: React.ReactNode;
+  submitLabel?: React.ReactNode;
+  testID?: string;
+}
+
+export interface SignInFormValues {
+  identifier: string;
+  identifierKind: AuthIdentifierKind;
+  secret: string;
+}
+
+export interface SignInFormProps extends AuthFormBaseProps {
+  identifiers?: readonly AuthIdentifierKind[];
+  identifierLabel?: React.ReactNode;
+  secretLabel?: React.ReactNode;
+  forgotPasswordLabel?: React.ReactNode;
+  signUpLabel?: React.ReactNode;
+  onSubmit: (values: SignInFormValues) => void | Promise<void>;
+  onForgotPassword?: () => void | Promise<void>;
+  onSignUp?: () => void | Promise<void>;
+}
+
+export type SignUpFormValues = FormValues;
+export type SignUpFormField = FormFieldConfig;
+
+export interface SignUpFormProps extends AuthFormBaseProps {
+  fields?: readonly SignUpFormField[];
+  signInLabel?: React.ReactNode;
+  onSubmit: (values: SignUpFormValues) => void | Promise<void>;
+  onSignIn?: () => void | Promise<void>;
+}
+
+export interface ForgotPasswordFormValues {
+  identifier: string;
+  identifierKind: AuthIdentifierKind;
+}
+
+export interface ForgotPasswordFormProps extends AuthFormBaseProps {
+  identifiers?: readonly AuthIdentifierKind[];
+  identifierLabel?: React.ReactNode;
+  signInLabel?: React.ReactNode;
+  onSubmit: (values: ForgotPasswordFormValues) => void | Promise<void>;
+  onSignIn?: () => void | Promise<void>;
+}
+
+export interface OtpFormValues {
+  otp: string;
+}
+
+export interface OtpFormProps extends AuthFormBaseProps {
+  length?: number;
+  otpLabel?: React.ReactNode;
+  resendLabel?: React.ReactNode;
+  resendDisabled?: boolean;
+  resendLoading?: boolean;
+  onSubmit: (values: OtpFormValues) => void | Promise<void>;
+  onResend?: () => void | Promise<void>;
+}

package/src/patterns/auth/utils.ts

@@ -0,0 +1,80 @@
+import type { FormFieldConfig, ValidationRule } from '../../components/form';
+import type { AuthIdentifierKind } from './types';
+
+export const defaultIdentifiers = ['email'] as const satisfies readonly AuthIdentifierKind[];
+
+const identifierLabels: Record<AuthIdentifierKind, string> = {
+  email: 'Email',
+  phone: 'Phone',
+  username: 'Username',
+};
+
+function includesIdentifier(
+  identifiers: readonly AuthIdentifierKind[],
+  identifier: AuthIdentifierKind,
+): boolean {
+  return identifiers.includes(identifier);
+}
+
+export function resolveIdentifierLabel(identifiers: readonly AuthIdentifierKind[]): string {
+  if (identifiers.length === 1) {
+    return identifierLabels[identifiers[0] ?? 'email'];
+  }
+
+  return identifiers.map((identifier) => identifierLabels[identifier]).join(', or ');
+}
+
+export function resolveIdentifierType(
+  identifiers: readonly AuthIdentifierKind[],
+): FormFieldConfig['type'] {
+  if (identifiers.length !== 1) {
+    return 'text';
+  }
+
+  const [identifier] = identifiers;
+
+  if (identifier === 'email') {
+    return 'email';
+  }
+
+  if (identifier === 'phone') {
+    return 'tel';
+  }
+
+  return 'text';
+}
+
+export function resolveIdentifierRules(
+  identifiers: readonly AuthIdentifierKind[],
+): readonly ValidationRule[] {
+  if (identifiers.length === 1 && identifiers[0] === 'email') {
+    return [{ kind: 'required' }, { kind: 'email' }];
+  }
+
+  return [{ kind: 'required' }];
+}
+
+export function normalizeIdentifierKind(
+  identifier: string,
+  identifiers: readonly AuthIdentifierKind[],
+): AuthIdentifierKind {
+  const normalizedIdentifier = identifier.trim();
+
+  if (identifiers.length === 1) {
+    return identifiers[0] ?? 'email';
+  }
+
+  if (includesIdentifier(identifiers, 'email') && normalizedIdentifier.includes('@')) {
+    return 'email';
+  }
+
+  if (includesIdentifier(identifiers, 'phone') && /^[+()\d\s.-]+$/.test(normalizedIdentifier)) {
+    return 'phone';
+  }
+
+  if (includesIdentifier(identifiers, 'username')) {
+    return 'username';
+  }
+
+  return identifiers[0] ?? 'email';
+}