Skip to content

Commit 5e92efd

Browse files
jaruesinkjaruesink
authored
Merge pull request #110 from lambda-curry/codegen-bot/update-import-documentation-1753719505
2 parents b004b8a + 6856082 commit 5e92efd

1 file changed

Lines changed: 119 additions & 5 deletions

File tree

‎llms.txt‎

Lines changed: 119 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ The `FormError` component provides standardized form-level error handling, compl
1919
### FormError Component Usage
2020

2121
```typescript
22+
// Import form-aware FormError component
2223
import { FormError } from '@lambdacurry/forms';
2324

2425
// Basic usage - looks for errors._form by default
@@ -83,16 +84,128 @@ export const action = async ({ request }: ActionFunctionArgs) => {
8384

8485
## Basic Form Setup Pattern
8586

87+
## Import Structure
88+
89+
The `@lambdacurry/forms` library follows a clear import structure:
90+
91+
### Form-Aware Components (from `@lambdacurry/forms`)
92+
These components automatically integrate with React Router forms and Remix Hook Form context:
93+
- `TextField` - Form-aware text input with automatic validation
94+
- `Textarea` - Form-aware textarea with automatic validation
95+
- `Checkbox` - Form-aware checkbox with automatic validation
96+
- `Switch` - Form-aware switch/toggle with automatic validation
97+
- `RadioGroup` - Form-aware radio group with automatic validation
98+
- `RadioGroupItem` - Individual radio items for RadioGroup
99+
- `DatePicker` - Form-aware date picker with automatic validation
100+
- `DropdownMenuSelect` - Form-aware dropdown select with automatic validation
101+
- `OtpInput` - Form-aware OTP/PIN input with automatic validation
102+
- `FormError` - Component for displaying form-level errors
103+
- `FormLabel`, `FormControl`, `FormDescription`, `FormMessage` - Form field components
104+
- `useFormField` - Hook for accessing form field context
105+
- Data table components: `DataTableRouterForm`, `DataTableRouterToolbar`, etc.
106+
107+
### UI Components (from `@lambdacurry/forms/ui`)
108+
These are the underlying UI components without form integration:
109+
- `Button` - Button component with variants
110+
- `Calendar` - Calendar component for date selection
111+
- `Badge` - Badge/chip component for labels
112+
- `Dialog` - Modal dialog component
113+
- `Popover` - Popover/tooltip component
114+
- `Select` - Basic select dropdown
115+
- `Separator` - Visual separator/divider
116+
- `Slider` - Range slider component
117+
- `Table` - Table components for data display
118+
- `Tabs` - Tab navigation component
119+
- `Command` - Command palette/search component
120+
- Field variants: `CheckboxField`, `TextareaField`, `TextField`, `SwitchField`, etc.
121+
- And many more UI primitives
122+
123+
## Component Reference
124+
125+
### Complete List of Form-Aware Components (`@lambdacurry/forms`)
126+
```typescript
127+
// Form input components (automatically integrate with form context)
128+
import {
129+
TextField, // Text input with validation
130+
Textarea, // Multi-line text input with validation
131+
Checkbox, // Checkbox with validation
132+
Switch, // Toggle switch with validation
133+
RadioGroup, // Radio button group with validation
134+
RadioGroupItem, // Individual radio button
135+
DatePicker, // Date selection with validation
136+
DropdownMenuSelect, // Dropdown select with validation
137+
OtpInput, // OTP/PIN input with validation
138+
139+
// Form structure components
140+
FormError, // Form-level error display
141+
FormLabel, // Form field labels
142+
FormControl, // Form field wrapper
143+
FormDescription, // Form field descriptions
144+
FormMessage, // Form field error messages
145+
useFormField, // Hook for form field context
146+
147+
// Data table components
148+
DataTableRouterForm,
149+
DataTableRouterToolbar,
150+
useDataTableUrlState,
151+
} from '@lambdacurry/forms';
152+
```
153+
154+
### Complete List of UI Components (`@lambdacurry/forms/ui`)
155+
```typescript
156+
// Basic UI components (no form integration)
157+
import {
158+
// Buttons and actions
159+
Button, // Button with variants
160+
161+
// Form inputs (non-form-aware versions)
162+
CheckboxField, // Checkbox without form integration
163+
TextareaField, // Textarea without form integration
164+
TextField, // Text input without form integration
165+
SwitchField, // Switch without form integration
166+
RadioGroupField, // Radio group without form integration
167+
DatePickerField, // Date picker without form integration
168+
DropdownMenuSelectField, // Dropdown without form integration
169+
OtpInputField, // OTP input without form integration
170+
FormErrorField, // Error display without form integration
171+
172+
// Layout and navigation
173+
Dialog, // Modal dialogs
174+
Popover, // Popover/tooltips
175+
Tabs, // Tab navigation
176+
Separator, // Visual dividers
177+
178+
// Data display
179+
Table, // Table components
180+
Badge, // Labels and badges
181+
Calendar, // Calendar component
182+
183+
// Form primitives
184+
Label, // Basic labels
185+
Select, // Basic select dropdown
186+
Slider, // Range slider
187+
Command, // Command palette
188+
189+
// Data table system
190+
DataTable, // Data table components
191+
DataTableFilter, // Table filtering
192+
193+
// Utilities
194+
DebouncedInput, // Debounced input
195+
} from '@lambdacurry/forms/ui';
196+
```
197+
86198
### 1. Required Imports
87199
```typescript
88200
import { zodResolver } from '@hookform/resolvers/zod';
89201
import { RemixFormProvider, useRemixForm, getValidatedFormData } from 'remix-hook-form';
90202
import { z } from 'zod';
91203
import { useFetcher, type ActionFunctionArgs } from 'react-router';
92204

93-
// Import form components including FormError
205+
// Import form-aware components from main package
94206
import { TextField, Checkbox, FormError } from '@lambdacurry/forms';
95-
import { Button } from '@lambdacurry/forms/ui/button';
207+
// Import UI components from /ui subpath
208+
import { Button } from '@lambdacurry/forms/ui';
96209
```
97210

98211
### 2. Zod Schema Definition
@@ -784,8 +897,8 @@ import {
784897
DatePicker,
785898
DropdownMenuSelect
786899
} from '@lambdacurry/forms';
787-
import { Button } from '@lambdacurry/forms/ui/button';
788-
import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui/dropdown-menu-select-field';
900+
import { Button } from '@lambdacurry/forms/ui';
901+
import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui';
789902
import { RemixFormProvider, useRemixForm, getValidatedFormData, createFormData } from 'remix-hook-form';
790903
import { useFetcher, type ActionFunctionArgs } from 'react-router';
791904
import { z } from 'zod';
@@ -1218,7 +1331,8 @@ This comprehensive example serves as a complete reference for implementing any f
12181331
- Automatically integrates with form context and validation state
12191332

12201333
### Important Reminders:
1221-
- 🔥 **Always import from `@lambdacurry/forms`** for form-aware components
1334+
- 🔥 **Import form-aware components from `@lambdacurry/forms`** - these automatically integrate with form context
1335+
- 🔥 **Import UI components from `@lambdacurry/forms/ui`** - these are the underlying UI primitives
12221336
- 🔥 **Use `createFormData()` for custom submissions** to ensure proper formatting
12231337
- 🔥 **All components are accessible by default** - no additional ARIA setup needed
12241338
- 🔥 **Form context is automatic** - no need to pass `control` props manually

0 commit comments

Comments
 (0)