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.
143 lines (141 loc) • 19.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { FormWizard } from '../../components/molecules/FormWizard';
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 { Input } from '../../components/atoms/Input';
import { Checkbox } from '../../components/atoms/Checkbox';
import { ValidationPresets } from '../../components/molecules/MultiStepForm/validationHelpers';
export const FormWizardDocumentation = () => {
const handleComplete = async (data) => {
console.log('All steps completed:', data);
await new Promise(resolve => setTimeout(resolve, 1000));
};
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: "FormWizard Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "text-text-secondary max-w-4xl", children: "A form collection component that allows users to navigate between independent forms. Each form has a Save button and users can jump between forms using the navigation buttons at the top." })] }), _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 { FormWizard } from '../../components/molecules/FormWizard';", 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: _jsx(FormWizard, { steps: [
{
title: "Personal Info",
component: (_jsxs(Form, { id: "form-step-0", children: [_jsx(FormField, { name: "firstName", label: "First Name", children: _jsx(Input, { placeholder: "Enter your first name" }) }), _jsx(FormField, { name: "lastName", label: "Last Name", children: _jsx(Input, { placeholder: "Enter your last name" }) })] })),
validationSchema: {
firstName: ValidationPresets.name(),
lastName: ValidationPresets.name()
}
},
{
title: "Contact",
component: (_jsxs(Form, { id: "form-step-1", children: [_jsx(FormField, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) }), _jsx(FormField, { name: "phone", label: "Phone", children: _jsx(Input, { type: "tel", placeholder: "Enter your phone number" }) })] })),
validationSchema: {
email: ValidationPresets.email(),
phone: ValidationPresets.phone()
}
},
{
title: "Preferences",
component: (_jsxs(Form, { id: "form-step-2", children: [_jsx(FormField, { name: "newsletter", label: "Newsletter", children: _jsx(Checkbox, { label: "Subscribe to newsletter" }) }), _jsx(FormField, { name: "notifications", label: "Notifications", children: _jsx(Checkbox, { label: "Receive notifications" }) })] }))
}
], onComplete: handleComplete }) }), _jsx(CodeBlock, { code: `const handleComplete = async (data: Record<string, unknown>) => {
console.log('All forms saved:', data);
};
<FormWizard
steps={[
{
title: "Personal Info",
component: (
<Form id="form-step-0">
<FormField name="firstName" label="First Name">
<Input placeholder="Enter your first name" />
</FormField>
<FormField name="lastName" label="Last Name">
<Input placeholder="Enter your last name" />
</FormField>
</Form>
),
validationSchema: {
firstName: ValidationPresets.name(),
lastName: ValidationPresets.name()
}
},
{
title: "Preferences",
component: (
<Form id="form-step-1">
<FormField name="newsletter" label="Newsletter">
<Checkbox label="Subscribe to newsletter" />
</FormField>
<FormField name="notifications" label="Notifications">
<Checkbox label="Receive notifications" />
</FormField>
</Form>
)
}
]}
onComplete={handleComplete}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Sidebar Layout" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsx(FormWizard, { layout: "sidebar", steps: [
{
title: "Personal Info",
component: (_jsxs(Form, { id: "sidebar-form-1", children: [_jsx(FormField, { name: "firstName", label: "First Name", children: _jsx(Input, { placeholder: "Enter your first name" }) }), _jsx(FormField, { name: "lastName", label: "Last Name", children: _jsx(Input, { placeholder: "Enter your last name" }) })] })),
validationSchema: {
firstName: ValidationPresets.name(),
lastName: ValidationPresets.name()
}
},
{
title: "Contact Info",
component: (_jsxs(Form, { id: "sidebar-form-2", children: [_jsx(FormField, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) }), _jsx(FormField, { name: "phone", label: "Phone", children: _jsx(Input, { type: "tel", placeholder: "Enter your phone number" }) })] })),
validationSchema: {
email: ValidationPresets.email(),
phone: ValidationPresets.phone()
}
},
{
title: "Preferences",
component: (_jsxs(Form, { id: "sidebar-form-3", children: [_jsx(FormField, { name: "newsletter", label: "Newsletter", children: _jsx(Checkbox, { label: "Subscribe to newsletter" }) }), _jsx(FormField, { name: "notifications", label: "Notifications", children: _jsx(Checkbox, { label: "Receive notifications" }) })] }))
}
], onComplete: handleComplete }) }), _jsx(CodeBlock, { code: `<FormWizard
layout="sidebar"
steps={[
{
title: "Personal Info",
component: (
<Form id="sidebar-form-1">
<FormField name="firstName" label="First Name">
<Input placeholder="Enter your first name" />
</FormField>
<FormField name="lastName" label="Last Name">
<Input placeholder="Enter your last name" />
</FormField>
</Form>
),
validationSchema: {
firstName: ValidationPresets.name(),
lastName: ValidationPresets.name()
}
},
// ... more forms
]}
onComplete={handleComplete}
/>`, language: "tsx" })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Navigation Options" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Restricted Navigation" }), _jsx("div", { className: "mb-4", children: _jsx(FormWizard, { allowSkipSteps: false, steps: [
{
title: "Personal Info",
component: (_jsxs(Form, { id: "form-nav-1", children: [_jsx(FormField, { name: "firstName", label: "First Name", children: _jsx(Input, { placeholder: "Enter your first name" }) }), _jsx(FormField, { name: "lastName", label: "Last Name", children: _jsx(Input, { placeholder: "Enter your last name" }) })] })),
validationSchema: {
firstName: ValidationPresets.name(),
lastName: ValidationPresets.name()
}
},
{
title: "Contact Info",
component: (_jsxs(Form, { id: "form-nav-2", children: [_jsx(FormField, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Enter your email" }) }), _jsx(FormField, { name: "phone", label: "Phone", children: _jsx(Input, { type: "tel", placeholder: "Enter your phone number" }) })] })),
validationSchema: {
email: ValidationPresets.email(),
phone: ValidationPresets.phone()
}
},
{
title: "Preferences",
component: (_jsxs(Form, { id: "form-nav-3", children: [_jsx(FormField, { name: "newsletter", label: "Newsletter", children: _jsx(Checkbox, { label: "Subscribe to newsletter" }) }), _jsx(FormField, { name: "notifications", label: "Notifications", children: _jsx(Checkbox, { label: "Receive notifications" }) })] }))
}
], onComplete: handleComplete }) })] })] }), _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: "steps" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "FormWizardStep[]" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "required" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Array of form configurations" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "onComplete" }), _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: "Called when all forms are completed" })] }), _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' | 'numbered' | 'icons'" }), _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: "Style of form indicators (when enabled)" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "layout" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'horizontal' | 'vertical' | 'sidebar'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'horizontal'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Layout arrangement (horizontal, vertical, or sidebar)" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showStepIndicator" }), _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/hide form navigation buttons" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showProgressBar" }), _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/hide progress bar" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "allowSkipSteps" }), _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: "Allow jumping to any form" })] })] })] }) }) })] }), _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: "Keep forms focused and independent" }), _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 clear and descriptive form titles" }), _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: "Enable navigation between 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: "Validate each form 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 Save buttons for each form" })] })] }), _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 too many 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-error", children: "Don't skip 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 use unclear form titles" }), _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 different validation strategies" }), _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 disable form navigation" })] })] })] })] })] }) }));
};