react-vite-themes/dist/pages/Documentation/FormFieldDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { FormField } from '../../components/molecules/FormField';
import { Form } from '../../components/molecules/Form';
import { Input } from '../../components/atoms/Input';
import { Select } from '../../components/atoms/Select';
import { Checkbox } from '../../components/atoms/Checkbox';
import { GroupedInput } from '../../components/molecules/GroupedInput';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Typography } from '../../components/atoms/Typography';
import { ValidationPresets } from '../../components/molecules/MultiStepForm/validationHelpers';
export const FormFieldDocumentation = () => {
    const handleFormSubmit = (data) => {
        console.log('Form submitted:', data);
    };
    return (_jsx("div", { className: "bg-background text-text-primary min-h-screen p-8", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "mb-12", children: [_jsx(Typography, { variant: "h1", size: "xl", weight: "bold", className: "mb-4", children: "FormField Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "text-text-secondary max-w-4xl", children: "A form field wrapper that provides label, validation, error handling, and helper text. Integrates seamlessly with the Form component for automatic field management and validation." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-12 p-6", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Import" }), _jsx(CodeBlock, { code: "import { FormField } from '../../components/molecules/FormField';", language: "typescript" })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, submitButton: false, children: [_jsx(FormField, { name: "name", label: "Full Name", required: true, children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `<Form onSubmit={handleFormSubmit} submitButton={false}>
  <FormField name="name" label="Full Name" required placeholder="Enter your full name" />
  <FormField name="email" label="Email Address" required type="email" placeholder="Enter your email" />
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "With Helper Text" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, submitButton: false, children: [_jsx(FormField, { name: "username", label: "Username", required: true, helperText: "Choose a unique username that will be displayed publicly", children: _jsx(Input, { placeholder: "Enter username" }) }), _jsx(FormField, { name: "password", label: "Password", required: true, helperText: "Must be at least 8 characters with uppercase, lowercase, and number", children: _jsx(Input, { type: "password", placeholder: "Enter password" }) })] }) }), _jsx(CodeBlock, { code: `<FormField 
  name="username" 
  label="Username" 
  required
  helperText="Choose a unique username that will be displayed publicly"
  placeholder="Enter username"
/>

<FormField 
  name="password" 
  label="Password" 
  required
  helperText="Must be at least 8 characters with uppercase, lowercase, and number"
  type="password"
  placeholder="Enter password"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Different Input Types" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, submitButton: false, children: [_jsx(FormField, { name: "category", label: "Category", required: true, children: _jsx(Select, { placeholder: "Select a category", options: [
                                                        { value: 'tech', label: 'Technology' },
                                                        { value: 'design', label: 'Design' },
                                                        { value: 'business', label: 'Business' },
                                                        { value: 'marketing', label: 'Marketing' }
                                                    ] }) }), _jsx(FormField, { name: "message", label: "Message", children: _jsx(Input, { as: "textarea", placeholder: "Enter your message..." }) }), _jsx(FormField, { name: "search", label: "Search", children: _jsx(GroupedInput, { placeholder: "Search products...", leftButton: {
                                                        children: "🔍"
                                                    }, rightButton: {
                                                        children: "Clear"
                                                    } }) })] }) }), _jsx(CodeBlock, { code: `<FormField name="category" label="Category" required>
  <Select
    placeholder="Select a category"
    options={[
      { value: 'tech', label: 'Technology' },
      { value: 'design', label: 'Design' },
      { value: 'business', label: 'Business' },
      { value: 'marketing', label: 'Marketing' }
    ]}
  />
</FormField>

<FormField name="message" label="Message" as="textarea" placeholder="Enter your message..." />

<FormField name="search" label="Search">
  <GroupedInput 
    placeholder="Search products..."
    leftButton={{
      children: "🔍"
    }}
    rightButton={{
      children: "Clear"
    }}
  />
</FormField>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Checkboxes and Toggles" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, submitButton: false, children: [_jsx(FormField, { name: "terms", label: "Terms and Conditions", required: true, children: _jsx(Checkbox, { label: "I agree to the terms and conditions" }) }), _jsx(FormField, { name: "notifications", label: "Email Notifications", children: _jsx(Checkbox, { label: "Receive email notifications about updates" }) })] }) }), _jsx(CodeBlock, { code: `<FormField name="terms" label="Terms and Conditions" required>
  <Checkbox label="I agree to the terms and conditions" />
</FormField>

<FormField name="notifications" label="Email Notifications">
  <Checkbox label="Receive email notifications about updates" />
</FormField>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Validation Examples" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, validationSchema: {
                                            name: ValidationPresets.name(),
                                            email: ValidationPresets.email(),
                                            category: { required: true }
                                        }, validateOnChange: true, validateOnBlur: true, submitButton: false, children: [_jsx(FormField, { name: "name", label: "Full Name", required: true, children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `import { ValidationPresets } from '../../components/molecules/MultiStepForm/validationHelpers';

<Form 
  onSubmit={handleFormSubmit}
  validationSchema={{
    name: ValidationPresets.name(),
    email: ValidationPresets.email(),
    category: { required: true }
  }}
  validateOnChange={true}
  validateOnBlur={true}
  submitButton={false}
>
  <FormField name="name" label="Full Name" required placeholder="Enter your full name" />
  <FormField name="email" label="Email Address" required type="email" placeholder="Enter your email" />
  <FormField name="category" label="Category" required>
    <Select
      placeholder="Select a category"
      options={[
        { value: 'tech', label: 'Technology' },
        { value: 'design', label: 'Design' },
        { value: 'business', label: 'Business' }
      ]}
    />
  </FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Complex Form Example" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, validationSchema: {
                                            name: ValidationPresets.name(),
                                            email: ValidationPresets.email(),
                                            category: { required: true },
                                            message: { maxLength: 500 }
                                        }, validateOnChange: true, validateOnBlur: true, submitButton: false, children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(FormField, { name: "name", label: "Full Name", required: true, children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }), _jsx(FormField, { name: "message", label: "Message", helperText: "Maximum 500 characters", children: _jsx(Input, { as: "textarea", placeholder: "Enter your message..." }) })] }) }), _jsx(CodeBlock, { code: `import { ValidationPresets } from '../../components/molecules/MultiStepForm/validationHelpers';

<Form 
  onSubmit={handleFormSubmit}
  validationSchema={{
    name: ValidationPresets.name(),
    email: ValidationPresets.email(),
    category: { required: true },
    message: { maxLength: 500 }
  }}
  validateOnChange={true}
  validateOnBlur={true}
  submitButton={false}
>
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <FormField name="name" label="Full Name" required>
      <Input placeholder="Enter your full name" />
    </FormField>
    <FormField name="email" label="Email Address" required>
      <Input type="email" placeholder="Enter your email" />
    </FormField>
  </div>
  <FormField name="category" label="Category" required>
    <Select
      placeholder="Select a category"
      options={[
        { value: 'tech', label: 'Technology' },
        { value: 'design', label: 'Design' },
        { value: 'business', label: 'Business' },
        { value: 'marketing', label: 'Marketing' }
      ]}
    />
  </FormField>
  <FormField 
    name="message" 
    label="Message"
    helperText="Maximum 500 characters"
  >
    <Input as="textarea" placeholder="Enter your message..." />
  </FormField>
  <FormField name="terms" label="Agreements" required>
    <Checkbox label="I agree to the terms and conditions" />
  </FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Available Validation Presets" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "mb-4", children: [_jsx(Typography, { variant: "p", size: "md", className: "mb-4", children: "Use predefined validation presets for common field types:" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "h3", size: "sm", weight: "semibold", className: "mb-2", children: "ValidationPresets" }), _jsxs("ul", { className: "list-none p-0 m-0 space-y-1", children: [_jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 email()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 phone()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 name()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 username()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 password()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 url()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 zipCode()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 creditCard()" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 numeric(min, max)" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 alphaOnly(min, max)" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 noNumbers(min, max)" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 select(allowedValues)" })] })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "h3", size: "sm", weight: "semibold", className: "mb-2", children: "VALIDATION_RULES" }), _jsxs("ul", { className: "list-none p-0 m-0 space-y-1", children: [_jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 REQUIRED" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 EMAIL" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 PASSWORD" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 PHONE" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 URL" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 NAME" }), _jsx("li", { className: "text-text-secondary font-mono text-sm", children: "\u2022 USERNAME" })] })] })] })] }), _jsx(CodeBlock, { code: `import { ValidationPresets } from '../../components/molecules/MultiStepForm/validationHelpers';
import { VALIDATION_RULES } from '../../utils/validation';

// Using ValidationPresets
validationSchema={{
  name: ValidationPresets.name(),
  email: ValidationPresets.email(),
  password: ValidationPresets.password()
}}

// Using VALIDATION_RULES
validationSchema={{
  name: VALIDATION_RULES.NAME,
  email: VALIDATION_RULES.EMAIL,
  password: VALIDATION_RULES.PASSWORD
}}`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Prop" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Type" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Default" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "name" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "-" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Field name for form state management" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "label" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Label text for the field" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "children" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "ReactNode" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "-" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Input component to wrap" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "className" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "required" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "false" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show required indicator (*)" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "helperText" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Helper text shown below field" })] })] })] }) }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Best Practices" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "\u2705 Do" }), _jsxs("ul", { className: "list-none p-0 m-0", children: [_jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use descriptive labels that clearly identify the field" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Mark required fields with the required prop" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Provide helpful helper text for complex fields" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use consistent field names across your application" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Group related fields together in forms" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use appropriate input types for the data being collected" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Provide clear error messages when validation fails" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use predefined validation presets for common field types" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "\u274C Don't" }), _jsxs("ul", { className: "list-none p-0 m-0", children: [_jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use vague or unclear labels" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't forget to mark required fields" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use overly long helper text" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use inconsistent field naming conventions" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't place unrelated fields together" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use generic input types when specific ones are available" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't show technical error messages to users" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't create custom regex patterns when presets are available" })] })] })] })] })] }) }));
};