react-vite-themes/dist/pages/Documentation/FormDocumentation.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 { Form } from '../../components/molecules/Form';
import { FormField } from '../../components/molecules/FormField';
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';
import { Input } from '../../components/atoms/Input';
import { Select } from '../../components/atoms/Select';
import { Button } from '../../components/atoms/Button';
export const FormDocumentation = () => {
    const handleFormSubmit = async (data) => {
        console.log('Form submitted:', data);
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('Form processed successfully!');
    };
    const handleFormCancel = () => {
        console.log('Form cancelled');
    };
    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: "Form Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "text-text-secondary max-w-4xl", children: "A comprehensive form component that provides validation, state management, and seamless integration with FormField components. Features real-time validation, customizable buttons, and flexible styling." })] }), _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 { Form } from '../../components/molecules/Form';", 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, children: [_jsx(FormField, { name: "name", label: "Full Name", children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `const handleFormSubmit = async (data: Record<string, unknown>) => {
  console.log('Form submitted:', data);
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
};

<Form onSubmit={handleFormSubmit}>
  <FormField name="name" label="Full Name">
    <Input placeholder="Enter your full name" />
  </FormField>
  <FormField name="email" label="Email Address">
    <Input type="email" placeholder="Enter your email" />
  </FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "With Validation" }), _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, showValidationErrors: true, submitButton: {
                                            text: 'Submit',
                                            variant: 'primary',
                                            size: 'md'
                                        }, children: [_jsx(FormField, { name: "name", label: "Full Name", required: true, helperText: "Enter your full name (e.g., John Doe)", children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", required: true, helperText: "Enter a valid email address", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) }), _jsx(FormField, { name: "category", label: "Category", required: true, helperText: "Select a category from the list", children: _jsx(Select, { placeholder: "Select a category", options: [
                                                        { value: 'option1', label: 'Option 1' },
                                                        { value: 'option2', label: 'Option 2' },
                                                        { value: 'option3', label: 'Option 3' }
                                                    ] }) })] }) }), _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}
>
  <FormField name="name" label="Full Name">
    <Input placeholder="Enter your full name" />
  </FormField>
  <FormField name="email" label="Email Address">
    <Input type="email" placeholder="Enter your email" />
  </FormField>
  <FormField name="category" label="Category" required>
    <Select 
      placeholder="Select a category"
      options={[
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]} 
    />
  </FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Custom Buttons" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, cancelButton: {
                                            text: 'Discard',
                                            variant: 'error',
                                            size: 'lg',
                                            onClick: handleFormCancel
                                        }, resetButton: {
                                            text: 'Clear Form',
                                            variant: 'neutral',
                                            size: 'lg',
                                            leftIcon: 'refresh'
                                        }, submitButton: {
                                            text: 'Save Changes',
                                            variant: 'success',
                                            size: 'lg'
                                        }, children: [_jsx(FormField, { name: "name", label: "Full Name", children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `<Form 
  onSubmit={handleFormSubmit}
  cancelButton={{
    text: 'Discard',
    variant: 'error',
    size: 'lg',
    onClick: handleFormCancel
  }}
  resetButton={{
    text: 'Clear Form',
    variant: 'neutral',
    size: 'lg',
    leftIcon: 'refresh'
  }}
  submitButton={{
    text: 'Save Changes',
    variant: 'success',
    size: 'lg'
  }}
>
  {/* Form fields */}
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Loading State" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-text-secondary mb-4", children: "The button below demonstrates the loading state with a spinning animation:" }), _jsx(Button, { variant: "primary", isLoading: true, size: "lg", children: "Submit" })] }) }), _jsx(CodeBlock, { code: `// Simple loading button example
<Button
  variant="primary"
  isLoading={true}  // Always show loading state
  size="lg"
>
  Submit
</Button>

// In a form, you can control the loading state:
<Form 
  onSubmit={handleSubmit}
  submitButton={{
    text: 'Submit',
    variant: 'primary',
    isLoading: isSubmitting  // Controlled by form state
  }}
>
  {/* Form fields */}
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Success Message" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsx(Form, { onSubmit: handleFormSubmit, showFormSuccess: true, formSuccessMessage: "Your form has been submitted successfully!", formSuccessVariant: "success", formMessagePosition: "top", validationSchema: {
                                            name: ValidationPresets.name()
                                        }, children: _jsx(FormField, { name: "name", label: "Full Name", required: true, children: _jsx(Input, { placeholder: "Enter your full name" }) }) }) }), _jsx(CodeBlock, { code: `<Form 
  onSubmit={handleFormSubmit}
  showFormSuccess={true}
  formSuccessMessage="Your form has been submitted successfully!"
  formSuccessVariant="success"
  formMessagePosition="top"
>
  {/* Form fields */}
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Disabled State" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsxs(Form, { onSubmit: handleFormSubmit, isDisabled: true, children: [_jsx(FormField, { name: "name", label: "Full Name", children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `<Form 
  onSubmit={handleFormSubmit}
  isDisabled={true}
>
  {/* Form fields */}
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "No Submit Button" }), _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", children: _jsx(Input, { placeholder: "Enter your full name" }) }), _jsx(FormField, { name: "email", label: "Email Address", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `<Form 
  onSubmit={handleFormSubmit}
  submitButton={false}
>
  <FormField name="name" label="Full Name">
    <Input placeholder="Enter your full name" />
  </FormField>
  <FormField name="email" label="Email Address">
    <Input type="email" placeholder="Enter your email" />
  </FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Form Variants" }), _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: "Default" }), _jsx(Form, { onSubmit: handleFormSubmit, submitButton: false, children: _jsx(FormField, { name: "name", label: "Name", children: _jsx(Input, { placeholder: "Enter name" }) }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Elevated" }), _jsx(Form, { onSubmit: handleFormSubmit, variant: "elevated", submitButton: false, children: _jsx(FormField, { name: "name", label: "Name", children: _jsx(Input, { placeholder: "Enter name" }) }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Outlined" }), _jsx(Form, { onSubmit: handleFormSubmit, variant: "default", submitButton: false, children: _jsx(FormField, { name: "name", label: "Name", children: _jsx(Input, { placeholder: "Enter name" }) }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Bordered" }), _jsx(Form, { onSubmit: handleFormSubmit, variant: "bordered", submitButton: false, children: _jsx(FormField, { name: "name", label: "Name", children: _jsx(Input, { placeholder: "Enter name" }) }) })] })] }), _jsx(CodeBlock, { code: `<Form variant="default">...</Form>
<Form variant="elevated">...</Form>
<Form variant="outlined">...</Form>
<Form variant="bordered">...</Form>
<Form variant="glass">...</Form>`, 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: "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: "Form content" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "variant" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'default' | 'elevated' | 'outlined' | 'bordered' | 'glass'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'default'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Form visual style" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "onSubmit" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "(data: Record<string, unknown>) => void | Promise<void>" }), _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: "Form submission handler" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "onCancel" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "() => void" }), _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: "Cancel button handler" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "isDisabled" }), _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: "Disable form interaction" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "isLoading" }), _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: "Deprecated: Use submitButton.isLoading instead" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "submitButton" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean | ButtonConfig" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Submit button configuration. ButtonConfig includes text, variant, size, isFullWidth, leftIcon, rightIcon, isDisabled, and isLoading properties." })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "cancelButton" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean | ButtonConfig" }), _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: "Cancel button configuration" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "resetButton" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean | ButtonConfig" }), _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: "Reset button configuration. Resets form to initial values when clicked." })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showActions" }), _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: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show action buttons" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "validationSchema" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "Record<string, ValidationRule>" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Form validation rules" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "validateOnChange" }), _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: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Validate on field change" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "validateOnBlur" }), _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: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Validate on field blur" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showValidationErrors" }), _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: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show validation error messages" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "initialValues" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "Record<string, unknown>" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Initial form values" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "autoFocus" }), _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: "Auto-focus the form" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "noValidate" }), _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: "Disable HTML5 validation" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showFormSuccess" }), _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: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show success message after successful submission" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "formSuccessMessage" }), _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: "'Form submitted successfully'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Custom success message to display" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "formSuccessVariant" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "Variant" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'success'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Visual style of the success message" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "formMessagePosition" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'top' | 'bottom'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'top'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Position of error and success messages" })] })] })] }) }) })] }), _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 ValidationPresets for common field types" }), _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" }), _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: "Handle loading states appropriately" }), _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 button 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-primary", children: "Validate on both change and blur" }), _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 cancel functionality when appropriate" }), _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 form variants for context" })] })] }), _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 create custom validation when presets exist" }), _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 ignore loading states" }), _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 button 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 validate only on submit" }), _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 error handling" }), _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 forms without proper validation" }), _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 mix form variants inconsistently" })] })] })] })] })] }) }));
};