Skip to content

Update llms.txt import documentation structure #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 3, 2025
Merged

Update llms.txt import documentation structure #110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 119 additions & 5 deletions llms.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ The `FormError` component provides standardized form-level error handling, compl
### FormError Component Usage

```typescript
// Import form-aware FormError component
import { FormError } from '@lambdacurry/forms';

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

## Basic Form Setup Pattern

## Import Structure

The `@lambdacurry/forms` library follows a clear import structure:

### Form-Aware Components (from `@lambdacurry/forms`)
These components automatically integrate with React Router forms and Remix Hook Form context:
- `TextField` - Form-aware text input with automatic validation
- `Textarea` - Form-aware textarea with automatic validation
- `Checkbox` - Form-aware checkbox with automatic validation
- `Switch` - Form-aware switch/toggle with automatic validation
- `RadioGroup` - Form-aware radio group with automatic validation
- `RadioGroupItem` - Individual radio items for RadioGroup
- `DatePicker` - Form-aware date picker with automatic validation
- `DropdownMenuSelect` - Form-aware dropdown select with automatic validation
- `OtpInput` - Form-aware OTP/PIN input with automatic validation
- `FormError` - Component for displaying form-level errors
- `FormLabel`, `FormControl`, `FormDescription`, `FormMessage` - Form field components
- `useFormField` - Hook for accessing form field context
- Data table components: `DataTableRouterForm`, `DataTableRouterToolbar`, etc.

### UI Components (from `@lambdacurry/forms/ui`)
These are the underlying UI components without form integration:
- `Button` - Button component with variants
- `Calendar` - Calendar component for date selection
- `Badge` - Badge/chip component for labels
- `Dialog` - Modal dialog component
- `Popover` - Popover/tooltip component
- `Select` - Basic select dropdown
- `Separator` - Visual separator/divider
- `Slider` - Range slider component
- `Table` - Table components for data display
- `Tabs` - Tab navigation component
- `Command` - Command palette/search component
- Field variants: `CheckboxField`, `TextareaField`, `TextField`, `SwitchField`, etc.
- And many more UI primitives

## Component Reference

### Complete List of Form-Aware Components (`@lambdacurry/forms`)
```typescript
// Form input components (automatically integrate with form context)
import {
TextField, // Text input with validation
Textarea, // Multi-line text input with validation
Checkbox, // Checkbox with validation
Switch, // Toggle switch with validation
RadioGroup, // Radio button group with validation
RadioGroupItem, // Individual radio button
DatePicker, // Date selection with validation
DropdownMenuSelect, // Dropdown select with validation
OtpInput, // OTP/PIN input with validation

// Form structure components
FormError, // Form-level error display
FormLabel, // Form field labels
FormControl, // Form field wrapper
FormDescription, // Form field descriptions
FormMessage, // Form field error messages
useFormField, // Hook for form field context

// Data table components
DataTableRouterForm,
DataTableRouterToolbar,
useDataTableUrlState,
} from '@lambdacurry/forms';
```

### Complete List of UI Components (`@lambdacurry/forms/ui`)
```typescript
// Basic UI components (no form integration)
import {
// Buttons and actions
Button, // Button with variants

// Form inputs (non-form-aware versions)
CheckboxField, // Checkbox without form integration
TextareaField, // Textarea without form integration
TextField, // Text input without form integration
SwitchField, // Switch without form integration
RadioGroupField, // Radio group without form integration
DatePickerField, // Date picker without form integration
DropdownMenuSelectField, // Dropdown without form integration
OtpInputField, // OTP input without form integration
FormErrorField, // Error display without form integration

// Layout and navigation
Dialog, // Modal dialogs
Popover, // Popover/tooltips
Tabs, // Tab navigation
Separator, // Visual dividers

// Data display
Table, // Table components
Badge, // Labels and badges
Calendar, // Calendar component

// Form primitives
Label, // Basic labels
Select, // Basic select dropdown
Slider, // Range slider
Command, // Command palette

// Data table system
DataTable, // Data table components
DataTableFilter, // Table filtering

// Utilities
DebouncedInput, // Debounced input
} from '@lambdacurry/forms/ui';
```
Comment on lines +154 to +196
Copy link

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify that every UI component in the reference list actually exists in the published package

The list includes FormErrorField, CheckboxField, RadioGroupField, etc. Some of these wrappers may not be exported yet (or may use different names). A mismatch will break copy-pasted examples.

Run this quick check to confirm exports against the current package build:

🏁 Script executed:

#!/bin/bash
# lists exports from the installed package bundle
npm pack @lambdacurry/forms --silent
tar -xzf lambdacurry-forms-*.tgz
fd --extension ts -E 'node_modules' -x sed -n 's/^export .* \(.*\) .*/\1/p' {} \; | sort -u | grep -E 'FormErrorField|CheckboxField|RadioGroupField'

Length of output: 259

🏁 Script executed:

#!/bin/bash
# Download and unpack the published package
npm pack @lambdacurry/forms --silent
tar -xzf lambdacurry-forms-*.tgz

# Detect top-level package directory inside the tarball
PKG_DIR=$(tar -tzf lambdacurry-forms-*.tgz | head -1 | cut -d/ -f1)
echo "Inspecting exports in $PKG_DIR/"

# Search across all files for the specific exports
for name in FormErrorField CheckboxField RadioGroupField; do
  echo "Checking export for $name:"
  grep -R "export .*${name}" "$PKG_DIR" -n || echo "  ✗ $name not found"
done

Length of output: 2123

Update UI imports to match actual exports

I confirmed in @lambdacurry/forms v0.18.0 that:

  • FormErrorField → exported as FormErrorField
  • RadioGroupField → exported as RadioGroupField
  • CheckboxField → not exported (the component is exported as Checkbox)

Please adjust your import list in llms.txt (lines 154–196) accordingly, and verify the remaining field wrappers (e.g. TextareaField, DatePickerField, DropdownMenuSelectField, OtpInputField) align with their actual export names in @lambdacurry/forms/ui.

  • Rename CheckboxField to Checkbox
  • Confirm each component name matches the package’s dist/ui/index.d.ts exports
🤖 Prompt for AI Agents 
In llms.txt between lines 154 and 196, update the import statements from
'@lambdacurry/forms/ui' to reflect the actual exported component names in
version 0.18.0. Specifically, rename CheckboxField to Checkbox, and verify that
all other imported components such as TextareaField, DatePickerField,
DropdownMenuSelectField, OtpInputField, and RadioGroupField exactly match their
export names in the package's dist/ui/index.d.ts file. Adjust any mismatches to
ensure the import list is accurate and consistent with the package exports.


### 1. Required Imports
```typescript
import { zodResolver } from '@hookform/resolvers/zod';
import { RemixFormProvider, useRemixForm, getValidatedFormData } from 'remix-hook-form';
import { z } from 'zod';
import { useFetcher, type ActionFunctionArgs } from 'react-router';

// Import form components including FormError
// Import form-aware components from main package
import { TextField, Checkbox, FormError } from '@lambdacurry/forms';
import { Button } from '@lambdacurry/forms/ui/button';
// Import UI components from /ui subpath
import { Button } from '@lambdacurry/forms/ui';
```

### 2. Zod Schema Definition
Expand Down Expand Up @@ -784,8 +897,8 @@ import {
DatePicker,
DropdownMenuSelect
} from '@lambdacurry/forms';
import { Button } from '@lambdacurry/forms/ui/button';
import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui/dropdown-menu-select-field';
import { Button } from '@lambdacurry/forms/ui';
import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui';
import { RemixFormProvider, useRemixForm, getValidatedFormData, createFormData } from 'remix-hook-form';
Comment on lines +900 to 902
Copy link

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing FormError import breaks the comprehensive example

<FormError /> is used later on line 1109, but the import statement on 890-902 omits it, causing a compile-time error.

-import { 
-  TextField, 
-  Textarea, 
-  Checkbox, 
-  RadioGroup, 
-  DatePicker,
-  DropdownMenuSelect 
-} from '@lambdacurry/forms';
+import { 
+  TextField, 
+  Textarea, 
+  Checkbox, 
+  RadioGroup, 
+  DatePicker,
+  DropdownMenuSelect,
+  FormError              // <-- add
+} from '@lambdacurry/forms';

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In llms.txt around lines 900 to 902, the import statements from
'@lambdacurry/forms/ui' are missing the FormError component, which is used later
on line 1109. To fix this, add FormError to the import list from
'@lambdacurry/forms/ui' alongside Button and DropdownMenuSelectItem to ensure
the component is properly imported and avoid compile-time errors.

import { useFetcher, type ActionFunctionArgs } from 'react-router';
import { z } from 'zod';
Expand Down Expand Up @@ -1218,7 +1331,8 @@ This comprehensive example serves as a complete reference for implementing any f
- Automatically integrates with form context and validation state

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