react-vite-themes
Version:
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.
270 lines (263 loc) • 31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Form } from '../../components/molecules/Form';
import { FormField } from '../../components/molecules/FormField';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Alert } from '../../components/atoms/Alert';
import { Input, DateInput } from '../../components/atoms/Input';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Tabs } from '../../components/molecules/Tabs';
import { VALIDATION_RULES } from '../../utils/validation';
import './ComponentDocumentation.scss';
const FormDocumentation = () => {
const handleSubmit = (data) => {
console.log('Form submitted:', data);
return new Promise((resolve) => {
setTimeout(() => {
alert('Form submitted successfully!');
resolve(true);
}, 2000); // 2 second delay to clearly show loading state
});
};
const tabs = [
{
id: 'overview',
label: 'Overview',
icon: 'info',
content: (_jsxs("div", { className: "overview-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "shield-check", size: "lg" }) }), _jsx("h3", { children: "Built-in Validation" }), _jsx("p", { children: "Comprehensive validation system with real-time feedback, custom rules, and cross-field validation support." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "zap", size: "lg" }) }), _jsx("h3", { children: "Real-time Feedback" }), _jsx("p", { children: "Instant validation feedback with customizable timing (on change, on blur, or on submit)." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "accessibility", size: "lg" }) }), _jsx("h3", { children: "Accessibility First" }), _jsx("p", { children: "Full accessibility support with ARIA attributes, screen reader compatibility, and keyboard navigation." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "code", size: "lg" }) }), _jsx("h3", { children: "TypeScript Ready" }), _jsx("p", { children: "Complete TypeScript support with proper type safety and IntelliSense for all validation rules." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "calendar", size: "lg" }) }), _jsx("h3", { children: "Custom Calendar" }), _jsx("p", { children: "Modern, theme-consistent date picker with custom styling and enhanced user experience." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "eye", size: "lg" }) }), _jsx("h3", { children: "Password Toggle" }), _jsxs("p", { children: ["Built-in password visibility toggle with eye/eye-off icons. Simply add ", _jsxs("code", { children: ["showPasswordToggle=", true] }), " to any password input for instant functionality."] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "spinner", size: "lg" }) }), _jsx("h3", { children: "Automatic Loading States" }), _jsx("p", { children: "Automatic loading states for submit buttons with spinner, text changes, and disabled states during form submission." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-icon", children: _jsx(Icon, { name: "check-circle", size: "lg" }) }), _jsx("h3", { children: "Clean Validation" }), _jsx("p", { children: "Hide native browser validation messages and use our clean, consistent validation feedback system." })] })] }))
},
{
id: 'basic',
label: 'Basic Usage',
icon: 'play',
content: (_jsxs("div", { children: [_jsxs("section", { className: "basic-usage-section", children: [_jsx("h2", { children: "Basic Form" }), _jsx("p", { children: "Create a simple form with validation and submit button." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL
}, submitButton: {
text: 'Submit',
isFullWidth: true
}, children: [_jsx(FormField, { name: "name", label: "Name", required: true, children: _jsx(Input, { placeholder: "Enter your name" }) }), _jsx(FormField, { name: "email", label: "Email", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `<Form
variant="elevated"
onSubmit={handleSubmit}
validationSchema={{
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL
}}
submitButton={{
text: 'Submit',
isFullWidth: true
}}
>
<FormField name="name" label="Name" required>
<Input placeholder="Enter your name" />
</FormField>
<FormField name="email" label="Email" required>
<Input type="email" placeholder="Enter your email" />
</FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "form-variants-section", children: [_jsx("h2", { children: "Form Variants" }), _jsx("p", { children: "Choose from different form visual styles." }), _jsxs("div", { className: "variants-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Elevated" }), _jsx(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED
}, submitButton: { text: 'Submit', size: 'sm' }, children: _jsx(FormField, { name: "name", label: "Name", required: true, children: _jsx(Input, { placeholder: "Enter name" }) }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Bordered" }), _jsx(Form, { variant: "bordered", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED
}, submitButton: { text: 'Submit', size: 'sm' }, children: _jsx(FormField, { name: "name", label: "Name", required: true, children: _jsx(Input, { placeholder: "Enter name" }) }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Glass" }), _jsx(Form, { variant: "glass", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED
}, submitButton: { text: 'Submit', size: 'sm' }, children: _jsx(FormField, { name: "name", label: "Name", required: true, children: _jsx(Input, { placeholder: "Enter name" }) }) })] })] })] }), _jsxs("section", { className: "loading-state-section", children: [_jsx("h2", { children: "Loading State Demo" }), _jsx("p", { children: "See the automatic loading state in action. The submit button will show a spinner and \"Submitting...\" text for 2 seconds." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL
}, submitButton: {
text: 'Submit Form',
isFullWidth: true
}, children: [_jsx(FormField, { name: "name", label: "Name", required: true, children: _jsx(Input, { placeholder: "Enter your name" }) }), _jsx(FormField, { name: "email", label: "Email", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) })] }) }), _jsx(CodeBlock, { code: `// This form demonstrates automatic loading states
<Form
variant="elevated"
onSubmit={handleSubmit}
validationSchema={{
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL
}}
submitButton={{
text: 'Submit Form',
isFullWidth: true
}}
>
<FormField name="name" label="Name" required>
<Input placeholder="Enter your name" />
</FormField>
<FormField name="email" label="Email" required>
<Input type="email" placeholder="Enter your email" />
</FormField>
</Form>
// The handleSubmit function returns a Promise
const handleSubmit = (data: any) => {
return new Promise((resolve) => {
setTimeout(() => {
alert('Form submitted successfully!');
resolve(true);
}, 2000); // 2 second delay
});
};`, language: "tsx" })] })] })] }))
},
{
id: 'validation',
label: 'Validation',
icon: 'shield',
content: (_jsxs("div", { children: [_jsxs("section", { className: "validation-overview-section", children: [_jsx("h2", { children: "Validation Overview" }), _jsx("p", { children: "Our form validation system provides comprehensive validation capabilities with real-time feedback." }), _jsxs(Alert, { variant: "info", title: "Automatic Loading States", children: ["The Form component automatically handles loading states for any button with ", _jsx("code", { children: "type=\"submit\"" }), ". This includes the ", _jsx("code", { children: "submitButton" }), " prop and any custom submit buttons within the form."] })] }), _jsxs("section", { className: "complete-validation-section", children: [_jsx("h2", { children: "Complete Validation Example" }), _jsx("p", { children: "A comprehensive form with various validation types and real-time feedback." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL,
password: VALIDATION_RULES.REQUIRED,
confirmPassword: VALIDATION_RULES.REQUIRED,
birthDate: VALIDATION_RULES.REQUIRED
}, submitButton: {
text: 'Create Account',
isFullWidth: true
}, 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: "password", label: "Password", required: true, children: _jsx(Input, { placeholder: "Create a password", type: "password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true }) }), _jsx(FormField, { name: "confirmPassword", label: "Confirm Password", required: true, children: _jsx(Input, { placeholder: "Confirm your password", type: "password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true }) }), _jsx(FormField, { name: "birthDate", label: "Date of Birth", required: true, children: _jsx(DateInput, { placeholder: "Select your birth date", maxDate: new Date().toISOString().split('T')[0] }) })] }) }), _jsx(CodeBlock, { code: `<Form
variant="elevated"
onSubmit={handleSubmit}
validationSchema={{
name: VALIDATION_RULES.REQUIRED,
email: VALIDATION_RULES.EMAIL,
password: VALIDATION_RULES.REQUIRED,
confirmPassword: VALIDATION_RULES.REQUIRED,
birthDate: VALIDATION_RULES.REQUIRED
}}
submitButton={{
text: 'Create Account',
isFullWidth: true
}}
>
<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>
<FormField name="password" label="Password" required>
<Input
type="password"
placeholder="Create a password"
showPasswordToggle={true}
/>
</FormField>
<FormField name="confirmPassword" label="Confirm Password" required>
<Input
type="password"
placeholder="Confirm your password"
showPasswordToggle={true}
/>
</FormField>
<FormField name="birthDate" label="Date of Birth" required>
<DateInput
placeholder="Select your birth date"
maxDate={new Date().toISOString().split('T')[0]}
/>
</FormField>
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "validation-rules-section", children: [_jsx("h2", { children: "Available Validation Rules" }), _jsx("p", { children: "Use these pre-built validation rules or create custom ones." }), _jsx(Card, { variant: "neutral", style: "elevated", className: "rules-card", children: _jsx("div", { className: "rules-grid", children: Object.entries(VALIDATION_RULES).map(([name]) => (_jsxs("div", { className: "rule-item", children: [_jsx("code", { children: name }), _jsx("span", { children: getRuleDescription(name) })] }, name))) }) })] })] }))
},
{
id: 'advanced',
label: 'Advanced',
icon: 'zap',
content: (_jsxs("div", { children: [_jsxs("section", { className: "cross-field-validation-section", children: [_jsx("h2", { children: "Cross-Field Validation" }), _jsx("p", { children: "Validate fields based on other field values using custom validation functions." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
email: VALIDATION_RULES.EMAIL,
password: VALIDATION_RULES.REQUIRED,
confirmPassword: {
required: true,
custom: (value, allValues = {}) => {
if (value !== allValues.password) {
return 'Passwords must match';
}
return null;
}
}
}, submitButton: {
text: 'Update Password',
isFullWidth: true
}, children: [_jsx(FormField, { name: "email", label: "Email", required: true, children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) }), _jsx(FormField, { name: "password", label: "New Password", required: true, children: _jsx(Input, { placeholder: "Enter new password", type: "password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true }) }), _jsx(FormField, { name: "confirmPassword", label: "Confirm Password", required: true, children: _jsx(Input, { placeholder: "Confirm new password", type: "password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true }) })] }) }), _jsx(CodeBlock, { code: `<Form
validationSchema={{
email: VALIDATION_RULES.EMAIL,
password: VALIDATION_RULES.REQUIRED,
confirmPassword: {
required: true,
custom: (value, allValues) => {
if (value !== allValues.password) {
return 'Passwords must match';
}
return null;
}
}
}}
>
{/* Form fields */}
</Form>`, language: "tsx" })] })] }), _jsxs("section", { className: "custom-calendar-section", children: [_jsx("h2", { children: "Custom Calendar Integration" }), _jsx("p", { children: "Use our custom calendar component for enhanced date selection with theme-consistent styling." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs(Form, { variant: "elevated", onSubmit: handleSubmit, validationSchema: {
name: VALIDATION_RULES.REQUIRED,
eventDate: VALIDATION_RULES.REQUIRED,
endDate: VALIDATION_RULES.REQUIRED
}, submitButton: {
text: 'Create Event',
isFullWidth: true
}, children: [_jsx(FormField, { name: "name", label: "Event Name", required: true, children: _jsx(Input, { placeholder: "Enter event name" }) }), _jsx(FormField, { name: "eventDate", label: "Start Date", required: true, children: _jsx(DateInput, { placeholder: "Select start date", minDate: new Date().toISOString().split('T')[0] }) }), _jsx(FormField, { name: "endDate", label: "End Date", required: true, children: _jsx(DateInput, { placeholder: "Select end date", minDate: new Date().toISOString().split('T')[0] }) })] }) }), _jsx(CodeBlock, { code: `<Form validationSchema={{...}}>
<FormField name="eventDate" label="Start Date" required>
<DateInput
placeholder="Select start date"
minDate={new Date().toISOString().split('T')[0]}
/>
</FormField>
<FormField name="endDate" label="End Date" required>
<DateInput
placeholder="Select end date"
minDate={new Date().toISOString().split('T')[0]}
/>
</FormField>
</Form>`, language: "tsx" })] })] })] }))
},
{
id: 'api',
label: 'API Reference',
icon: 'code',
content: (_jsxs("div", { children: [_jsxs("section", { className: "api-reference-section", children: [_jsx("h2", { children: "Form Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "'default' | 'elevated' | 'glass' | 'bordered'" }), _jsx("td", { children: "'default'" }), _jsx("td", { children: "Form visual style" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onSubmit" }), _jsx("td", { children: "(data: Record<string, any>) => void" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Form submission handler" })] }), _jsxs("tr", { children: [_jsx("td", { children: "validationSchema" }), _jsx("td", { children: "Record<string, ValidationRule>" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Validation rules for fields" })] }), _jsxs("tr", { children: [_jsx("td", { children: "validateOnChange" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Validate on field change" })] }), _jsxs("tr", { children: [_jsx("td", { children: "validateOnBlur" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "true" }), _jsx("td", { children: "Validate on field blur" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isDisabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable form submission" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isLoading" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show loading state (automatically handled during submission)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "submitButton" }), _jsx("td", { children: "{ text?, variant?, size?, isFullWidth?, leftIcon?, rightIcon?, isDisabled? } | boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Configure submit button or enable/disable it" })] }), _jsxs("tr", { children: [_jsx("td", { children: "cancelButton" }), _jsx("td", { children: "{ text?, variant?, size?, isFullWidth?, leftIcon?, rightIcon?, isDisabled?, onClick? } | boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Configure cancel button or enable/disable it" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showActions" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "true" }), _jsx("td", { children: "Show/hide the actions section with buttons" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showValidationErrors" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "true" }), _jsx("td", { children: "Show validation error messages" })] })] })] }) }) }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "FormField Props" }), _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "name" }), _jsx("td", { children: "string" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Field name (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "label" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Field label" })] }), _jsxs("tr", { children: [_jsx("td", { children: "required" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show required indicator" })] }), _jsxs("tr", { children: [_jsx("td", { children: "helperText" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Helper text below field" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Input component" })] })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "Input Props (Common)" }), _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "type" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'text'" }), _jsx("td", { children: "Input type (text, email, password, etc.)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "placeholder" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Placeholder text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: "string | ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Left icon (string for icon name, ReactNode for custom)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIcon" }), _jsx("td", { children: "string | ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Right icon (string for icon name, ReactNode for custom)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showPasswordToggle" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Enable password visibility toggle (eye/eye-off icons)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Input size variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isDisabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable the input" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isInvalid" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show invalid state styling" })] })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "DateInput Props" }), _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "value" }), _jsx("td", { children: "Date | undefined" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Selected date value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onChange" }), _jsx("td", { children: "(date: Date | null) => void" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Date change handler" })] }), _jsxs("tr", { children: [_jsx("td", { children: "placeholder" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'Select date'" }), _jsx("td", { children: "Placeholder text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "minDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Minimum selectable date (YYYY-MM-DD)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "maxDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Maximum selectable date (YYYY-MM-DD)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: "string | ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Left icon for the input" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Input size variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isDisabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable the date input" })] })] })] }) })] })] }), _jsxs("section", { className: "validation-rules-reference", children: [_jsx("h2", { children: "Validation Rules Reference" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "rules-reference-card mb-4", children: [_jsx("h3", { children: "ValidationRule Interface" }), _jsx(CodeBlock, { code: `interface ValidationRule {
required?: boolean;
minLength?: number;
maxLength?: number;
pattern?: RegExp;
email?: boolean;
url?: boolean;
min?: number;
max?: number;
custom?: (value: any, allValues: Record<string, any>) => string | null;
}`, language: "typescript" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "rules-reference-card", children: [_jsx("h3", { children: "Pre-built Validation Rules" }), _jsx(CodeBlock, { code: `// Available validation rules
VALIDATION_RULES.REQUIRED // Required field
VALIDATION_RULES.EMAIL // Email format
VALIDATION_RULES.URL // URL format
VALIDATION_RULES.MIN_LENGTH_3 // Minimum 3 characters
VALIDATION_RULES.MIN_LENGTH_8 // Minimum 8 characters
VALIDATION_RULES.MAX_LENGTH_50 // Maximum 50 characters
VALIDATION_RULES.MAX_LENGTH_100 // Maximum 100 characters
VALIDATION_RULES.NUMBER // Numeric value
VALIDATION_RULES.MIN_NUMBER_0 // Minimum value 0
VALIDATION_RULES.MAX_NUMBER_100 // Maximum value 100
VALIDATION_RULES.PHONE // Phone number format
VALIDATION_RULES.PASSWORD // Password strength`, language: "typescript" })] })] })] }))
}
];
return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Form Component" }), _jsx("p", { className: "component-description", children: "A powerful form component with built-in validation, real-time feedback, and flexible field management. Supports complex validation scenarios, cross-field validation, and excellent accessibility." })] }), _jsx(Tabs, { tabs: tabs, variant: "default", size: "md", defaultActiveTab: "overview" })] }) }));
};
// Helper function for rule descriptions
const getRuleDescription = (ruleName) => {
const descriptions = {
REQUIRED: 'Field is required',
EMAIL: 'Must be a valid email address',
URL: 'Must be a valid URL',
MIN_LENGTH_3: 'Minimum 3 characters',
MIN_LENGTH_8: 'Minimum 8 characters',
MAX_LENGTH_50: 'Maximum 50 characters',
MAX_LENGTH_100: 'Maximum 100 characters',
NUMBER: 'Must be a number',
MIN_NUMBER_0: 'Minimum value 0',
MAX_NUMBER_100: 'Maximum value 100',
PHONE: 'Must be a valid phone number',
PASSWORD: 'Password strength validation'
};
return descriptions[ruleName] || 'Custom validation rule';
};
export default FormDocumentation;