Initial commit
This commit is contained in:
Zhongwei Li
62
commands/add-shadcn-component.md
Normal file
62
commands/add-shadcn-component.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
description: Add a shadcn/ui component to the project
|
||||
---
|
||||
|
||||
# Add shadcn/ui Component
|
||||
|
||||
Install and configure a shadcn/ui component in your React + Vite project.
|
||||
|
||||
## Instructions
|
||||
|
||||
1. Ask which shadcn/ui component to add (button, card, dialog, form, etc.)
|
||||
2. Check if shadcn/ui is initialized (look for `components.json`)
|
||||
3. If not initialized, run:
|
||||
```bash
|
||||
bunx shadcn@latest init
|
||||
```
|
||||
4. Add the requested component:
|
||||
```bash
|
||||
bunx shadcn@latest add [component-name]
|
||||
```
|
||||
5. Show the component location (`components/ui/[component].tsx`)
|
||||
6. Provide usage example with TypeScript
|
||||
7. Suggest related components that work well together
|
||||
8. Check if Tailwind CSS is properly configured
|
||||
9. Verify that required dependencies are installed (check package.json)
|
||||
|
||||
## Popular Components
|
||||
|
||||
- button - Button component with variants
|
||||
- card - Card container with header/footer
|
||||
- dialog - Modal dialog/popup
|
||||
- form - Form components (use with TanStack Form)
|
||||
- input - Input field with variants
|
||||
- select - Select dropdown
|
||||
- table - Data table component
|
||||
- toast - Toast notifications
|
||||
- dropdown-menu - Dropdown menu
|
||||
- tabs - Tab navigation
|
||||
|
||||
## Usage Example
|
||||
|
||||
After adding a button component:
|
||||
|
||||
```typescript
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<Button variant="default" size="lg">
|
||||
Click me
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Framework-Specific Notes
|
||||
|
||||
- **React + Vite**: All components are client-side by default. No need for `'use client'` directive.
|
||||
- **TanStack Router**: Components can be used in route components, loaders, and layout files seamlessly.
|
||||
- **Component State**: Use React hooks (useState, useEffect, etc.) freely in any component without special directives.
|
||||
|
||||
Provide component-specific examples and customization tips.
|
||||
113
commands/create-component.md
Normal file
113
commands/create-component.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
description: Create a custom React component with Tailwind styling
|
||||
---
|
||||
|
||||
# Create Custom Component
|
||||
|
||||
Generate a custom React component with Tailwind CSS and TypeScript.
|
||||
|
||||
## Instructions
|
||||
|
||||
1. Ask for component details:
|
||||
- Component name
|
||||
- Component type (functional, with state, etc.)
|
||||
- Props needed
|
||||
- Styling requirements
|
||||
2. Create component file in appropriate location:
|
||||
- `src/components/` for shared components
|
||||
- `src/features/` for feature-specific components
|
||||
- `src/routes/` for route-specific components (TanStack Router)
|
||||
3. Generate component with:
|
||||
- TypeScript interface for props
|
||||
- Proper React patterns (hooks, composition, etc.)
|
||||
- Tailwind CSS classes
|
||||
- Accessibility attributes (ARIA labels, roles, etc.)
|
||||
- Responsive design
|
||||
4. Use cn() utility for conditional classes
|
||||
5. Export component and types
|
||||
6. Provide usage example
|
||||
|
||||
## Component Template
|
||||
|
||||
### Basic Component
|
||||
|
||||
```typescript
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MyComponentProps {
|
||||
title: string;
|
||||
variant?: "default" | "primary" | "secondary";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MyComponent({
|
||||
title,
|
||||
variant = "default",
|
||||
className,
|
||||
}: MyComponentProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg p-4",
|
||||
{
|
||||
"bg-gray-100": variant === "default",
|
||||
"bg-blue-500 text-white": variant === "primary",
|
||||
"bg-gray-800 text-white": variant === "secondary",
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
<h2 className="text-lg font-semibold">{title}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Interactive Component (with State)
|
||||
|
||||
```typescript
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface InteractiveComponentProps {
|
||||
initialCount?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InteractiveComponent({
|
||||
initialCount = 0,
|
||||
className,
|
||||
}: InteractiveComponentProps) {
|
||||
const [count, setCount] = useState(initialCount);
|
||||
|
||||
return (
|
||||
<div className={cn("flex items-center gap-2", className)}>
|
||||
<button
|
||||
onClick={() => setCount(count - 1)}
|
||||
className="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300 transition-colors"
|
||||
aria-label="Decrease count"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<span className="text-lg font-semibold" aria-live="polite">
|
||||
{count}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setCount(count + 1)}
|
||||
className="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300 transition-colors"
|
||||
aria-label="Increase count"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Framework-Specific Guidelines
|
||||
|
||||
- **React + Vite**: All components are client-side by default. Use React hooks (useState, useEffect, etc.) freely without any special directives.
|
||||
- **TanStack Router**: Components integrate seamlessly with route loaders, route context, and navigation hooks.
|
||||
- **Component Organization**: Follow Clean Architecture - separate UI components (`components/`), feature logic (`features/`), and routes (`routes/`).
|
||||
|
||||
Ensure proper typing, styling, and accessibility.
|
||||
420
commands/create-form.md
Normal file
420
commands/create-form.md
Normal file
@@ -0,0 +1,420 @@
|
||||
---
|
||||
description: Create a type-safe form with TanStack Form and Zod validation
|
||||
---
|
||||
|
||||
# Create Form
|
||||
|
||||
Generate a type-safe form using TanStack Form (@tanstack/react-form) with Zod validation and shadcn/ui components.
|
||||
|
||||
## Instructions
|
||||
|
||||
1. Install TanStack Form if not already installed:
|
||||
```bash
|
||||
bun add @tanstack/react-form zod
|
||||
```
|
||||
2. Optionally, install shadcn/ui components for UI:
|
||||
```bash
|
||||
bunx shadcn@latest add input button label
|
||||
```
|
||||
3. Ask for form fields and validation rules
|
||||
4. Create Zod schema for form validation
|
||||
5. Generate form component with:
|
||||
- TanStack Form `useForm` hook
|
||||
- Zod validators (`onChange`, `onSubmit`)
|
||||
- `form.Field` components for each field
|
||||
- Proper TypeScript types
|
||||
- Error handling and display
|
||||
- Submit handler with loading states
|
||||
6. Add accessibility attributes (labels, ARIA)
|
||||
7. Include validation feedback (errors, loading states)
|
||||
|
||||
## Form Example
|
||||
|
||||
### Basic TanStack Form with Zod Validation
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { z } from "zod";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
|
||||
const loginSchema = z.object({
|
||||
email: z.string().email("Invalid email address"),
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
});
|
||||
|
||||
export function LoginForm() {
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
validators: {
|
||||
onChange: loginSchema,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
// Handle form submission
|
||||
console.log("Form submitted:", value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
<form.Field
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Email</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
type="email"
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
{field.state.meta.errors.length > 0 && (
|
||||
<p className="text-sm text-destructive">
|
||||
{field.state.meta.errors.join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.Field
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Password</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
type="password"
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
/>
|
||||
{field.state.meta.errors.length > 0 && (
|
||||
<p className="text-sm text-destructive">
|
||||
{field.state.meta.errors.join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
children={([canSubmit, isSubmitting]) => (
|
||||
<Button type="submit" disabled={!canSubmit} className="w-full">
|
||||
{isSubmitting ? "Logging in..." : "Log In"}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Advanced: Field-Level and Form-Level Validation
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { z } from "zod";
|
||||
|
||||
const userSchema = z.object({
|
||||
username: z.string().min(3, "Username must be at least 3 characters"),
|
||||
email: z.string().email("Invalid email"),
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
confirmPassword: z.string(),
|
||||
});
|
||||
|
||||
export function RegisterForm() {
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
validators: {
|
||||
// Schema validation on every change
|
||||
onChange: userSchema,
|
||||
// Custom validation on submit
|
||||
onSubmit: ({ value }) => {
|
||||
if (value.password !== value.confirmPassword) {
|
||||
return {
|
||||
form: "Passwords do not match",
|
||||
fields: {
|
||||
confirmPassword: "Must match password",
|
||||
},
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
const response = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(value),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Registration failed");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
{(["username", "email", "password", "confirmPassword"] as const).map(
|
||||
(fieldName) => (
|
||||
<form.Field key={fieldName} name={fieldName}>
|
||||
{(field) => (
|
||||
<div>
|
||||
<label htmlFor={field.name}>
|
||||
{fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
|
||||
</label>
|
||||
<input
|
||||
id={field.name}
|
||||
type={fieldName.includes("password") ? "password" : "text"}
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
/>
|
||||
{field.state.meta.errors.map((error, i) => (
|
||||
<p key={i} className="text-sm text-red-500">
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
)
|
||||
)}
|
||||
|
||||
<form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
children={([canSubmit, isSubmitting]) => (
|
||||
<button type="submit" disabled={!canSubmit}>
|
||||
{isSubmitting ? "Registering..." : "Register"}
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Framework-Specific Patterns
|
||||
|
||||
### Async Validation with Debounce
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { z } from "zod";
|
||||
|
||||
const usernameSchema = z
|
||||
.string()
|
||||
.min(3, "Username must be at least 3 characters");
|
||||
|
||||
export function UsernameForm() {
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
username: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log("Valid username:", value.username);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="username"
|
||||
validators={{
|
||||
onChange: ({ value }) => {
|
||||
const result = usernameSchema.safeParse(value);
|
||||
return result.success ? undefined : result.error.errors[0].message;
|
||||
},
|
||||
onChangeAsyncDebounceMs: 500,
|
||||
onChangeAsync: async ({ value }) => {
|
||||
// Simulate API call to check username availability
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
const takenUsernames = ["admin", "test", "demo"];
|
||||
return takenUsernames.includes(value.toLowerCase())
|
||||
? "Username is already taken"
|
||||
: undefined;
|
||||
},
|
||||
}}
|
||||
children={(field) => (
|
||||
<div>
|
||||
<input
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
{field.state.meta.isValidating && (
|
||||
<span>Checking availability...</span>
|
||||
)}
|
||||
{field.state.meta.errors.map((error, i) => (
|
||||
<p key={i} className="text-red-500">
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### With shadcn/ui Components
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { z } from "zod";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
|
||||
const profileSchema = z.object({
|
||||
name: z.string().min(2, "Name must be at least 2 characters"),
|
||||
email: z.string().email("Invalid email address"),
|
||||
bio: z.string().max(200, "Bio must be less than 200 characters"),
|
||||
});
|
||||
|
||||
export function ProfileForm() {
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
email: "",
|
||||
bio: "",
|
||||
},
|
||||
validators: {
|
||||
onChange: profileSchema,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
await fetch("/api/profile", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(value),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Update Profile</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
<form.Field
|
||||
name="name"
|
||||
children={(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Name</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
/>
|
||||
{field.state.meta.errors.length > 0 && (
|
||||
<p className="text-sm text-destructive">
|
||||
{field.state.meta.errors[0]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.Field
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Email</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
type="email"
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
/>
|
||||
{field.state.meta.errors.length > 0 && (
|
||||
<p className="text-sm text-destructive">
|
||||
{field.state.meta.errors[0]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
children={([canSubmit, isSubmitting]) => (
|
||||
<Button type="submit" disabled={!canSubmit} className="w-full">
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Type-Safe**: Full TypeScript support with inferred types from Zod schemas
|
||||
- **Validation**: Synchronous and asynchronous validation with debounce
|
||||
- **Field-Level Validation**: `onChange`, `onBlur`, `onMount` validators per field
|
||||
- **Form-Level Validation**: Custom cross-field validation on submit
|
||||
- **State Management**: Built-in form state (canSubmit, isSubmitting, errors)
|
||||
- **Performance**: Efficient re-renders with granular subscriptions
|
||||
- **Framework Agnostic**: Works with React, Solid, Vue, and more
|
||||
|
||||
Ensure complete type safety and proper validation with TanStack Form.
|
||||
Reference in New Issue
Block a user