Skip to content

Commit 4ea41cc

Browse files
codegen-sh[bot]codegen-sh[bot]
committed
feat: initialize React Router 7 todo starter with monorepo architecture
- Set up monorepo structure with Turbo and Bun - Configure shared packages: ui, utils, config - Implement React Router 7 todo app with SSR - Add Tailwind CSS v4 with shadcn/ui components - Set up Zustand for state management - Add comprehensive testing with Vitest - Include TypeScript configuration and path mapping - Add development documentation and cursor rules - Configure Biome for linting and formatting Features: - Full CRUD operations for todos - Filtering (all, active, completed) - In-memory storage as requested - Responsive design with modern UI - Comprehensive test coverage - Developer-friendly setup
0 parents  commit 4ea41cc

39 files changed

+1884
-0
lines changed

‎.cursorrules/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Cursor Rules for React Router 7 Todo Starter
2+
3+
This directory contains cursor rules to help maintain consistency and best practices across the codebase.
4+
5+
## Available Rules
6+
7+
- `react-router-7.md` - React Router 7 specific patterns and conventions
8+
- `monorepo.md` - Monorepo structure and workspace management
9+
- `ui-components.md` - Component library patterns and shadcn/ui conventions
10+
- `testing.md` - Testing patterns and best practices
11+
- `typescript.md` - TypeScript conventions and patterns
12+
13+
## Usage
14+
15+
These rules are automatically loaded by Cursor IDE when working in this repository. They provide context-aware suggestions and maintain consistency across the codebase.
16+

‎.cursorrules/monorepo.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Monorepo Cursor Rules
2+
3+
## Package Structure
4+
- `apps/` - Applications (todo-app)
5+
- `packages/` - Shared packages (ui, utils, config)
6+
- Each package has its own package.json with proper exports
7+
8+
## Workspace Dependencies
9+
- Use `workspace:*` for internal package dependencies
10+
- Keep external dependencies in sync across packages
11+
- Use peerDependencies for shared libraries like React
12+
13+
## Import Patterns
14+
```tsx
15+
// Import from workspace packages
16+
import { Button } from '@todo-starter/ui';
17+
import { cn, type Todo } from '@todo-starter/utils';
18+
19+
// Import from local files
20+
import { TodoItem } from '~/components/todo-item';
21+
import type { Route } from './+types/home';
22+
```
23+
24+
## Package Naming
25+
- Use scoped packages: `@todo-starter/package-name`
26+
- Keep names descriptive and consistent
27+
- Use kebab-case for package names
28+
29+
## Scripts and Tasks
30+
- Define scripts at both root and package level
31+
- Use Turbo for orchestrating build tasks
32+
- Prefer package-specific scripts for development
33+
34+
## TypeScript Configuration
35+
- Extend base config from `@todo-starter/config`
36+
- Use path mapping for workspace packages
37+
- Keep tsconfig.json files minimal and focused
38+
39+
## Best Practices
40+
- Keep packages focused and single-purpose
41+
- Avoid circular dependencies between packages
42+
- Use proper exports in package.json
43+
- Document package APIs and usage patterns
44+

‎.cursorrules/react-router-7.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# React Router 7 Cursor Rules
2+
3+
## Route Structure
4+
- Use file-based routing in `app/routes/`
5+
- Route files should export default component and optional meta, loader, action functions
6+
- Use `+types` for route-specific TypeScript types
7+
8+
## Component Patterns
9+
```tsx
10+
// Route component example
11+
import type { Route } from './+types/home';
12+
13+
export const meta: Route.MetaFunction = () => {
14+
return [
15+
{ title: 'Page Title' },
16+
{ name: 'description', content: 'Page description' }
17+
];
18+
};
19+
20+
export default function Home() {
21+
return <div>Content</div>;
22+
}
23+
```
24+
25+
## Data Loading
26+
- Use loaders for server-side data fetching
27+
- Use actions for form submissions and mutations
28+
- Prefer server-side data loading over client-side when possible
29+
30+
## Error Handling
31+
- Implement ErrorBoundary components for route-level error handling
32+
- Use isRouteErrorResponse for proper error type checking
33+
34+
## Navigation
35+
- Use Link component for internal navigation
36+
- Use NavLink for navigation with active states
37+
- Prefer declarative navigation over imperative
38+
39+
## Best Practices
40+
- Keep route components focused on layout and data orchestration
41+
- Extract business logic into custom hooks or utilities
42+
- Use proper TypeScript types from route type definitions
43+
- Implement proper loading and error states
44+

‎.cursorrules/ui-components.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# UI Components Cursor Rules
2+
3+
## Component Structure
4+
- Use forwardRef for components that need ref forwarding
5+
- Implement proper TypeScript interfaces
6+
- Use class-variance-authority for variant-based styling
7+
8+
## shadcn/ui Patterns
9+
```tsx
10+
// Component example
11+
import * as React from 'react';
12+
import { cva, type VariantProps } from 'class-variance-authority';
13+
import { cn } from '@todo-starter/utils';
14+
15+
const buttonVariants = cva(
16+
'base-classes',
17+
{
18+
variants: {
19+
variant: {
20+
default: 'default-classes',
21+
destructive: 'destructive-classes'
22+
},
23+
size: {
24+
default: 'default-size',
25+
sm: 'small-size'
26+
}
27+
},
28+
defaultVariants: {
29+
variant: 'default',
30+
size: 'default'
31+
}
32+
}
33+
);
34+
35+
export interface ButtonProps
36+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
37+
VariantProps<typeof buttonVariants> {
38+
asChild?: boolean;
39+
}
40+
41+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
42+
({ className, variant, size, asChild = false, ...props }, ref) => {
43+
const Comp = asChild ? Slot : 'button';
44+
return (
45+
<Comp
46+
className={cn(buttonVariants({ variant, size, className }))}
47+
ref={ref}
48+
{...props}
49+
/>
50+
);
51+
}
52+
);
53+
Button.displayName = 'Button';
54+
```
55+
56+
## Styling Guidelines
57+
- Use Tailwind CSS classes for styling
58+
- Leverage CSS variables for theming
59+
- Use cn() utility for conditional classes
60+
- Follow shadcn/ui color and spacing conventions
61+
62+
## Accessibility
63+
- Include proper ARIA attributes
64+
- Ensure keyboard navigation works
65+
- Use semantic HTML elements
66+
- Test with screen readers
67+
68+
## Component Organization
69+
- Keep components in `packages/ui/src/components/ui/`
70+
- Export all components from main index file
71+
- Group related components together
72+
- Use consistent naming conventions
73+
74+
## Best Practices
75+
- Prefer composition over complex props
76+
- Keep components focused and reusable
77+
- Document component APIs with TypeScript
78+
- Test components in isolation
79+

‎.gitignore‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Dependencies
2+
node_modules/
3+
.pnp
4+
.pnp.js
5+
6+
# Production builds
7+
build/
8+
dist/
9+
.next/
10+
out/
11+
12+
# Environment variables
13+
.env
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
# Logs
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
pnpm-debug.log*
24+
lerna-debug.log*
25+
bun-debug.log*
26+
27+
# Runtime data
28+
pids
29+
*.pid
30+
*.seed
31+
*.pid.lock
32+
33+
# Coverage directory used by tools like istanbul
34+
coverage/
35+
*.lcov
36+
37+
# nyc test coverage
38+
.nyc_output
39+
40+
# Dependency directories
41+
jspm_packages/
42+
43+
# TypeScript cache
44+
*.tsbuildinfo
45+
46+
# Optional npm cache directory
47+
.npm
48+
49+
# Optional eslint cache
50+
.eslintcache
51+
52+
# Optional stylelint cache
53+
.stylelintcache
54+
55+
# Microbundle cache
56+
.rpt2_cache/
57+
.rts2_cache_cjs/
58+
.rts2_cache_es/
59+
.rts2_cache_umd/
60+
61+
# Optional REPL history
62+
.node_repl_history
63+
64+
# Output of 'npm pack'
65+
*.tgz
66+
67+
# Yarn Integrity file
68+
.yarn-integrity
69+
70+
# parcel-bundler cache (https://parceljs.org/)
71+
.cache
72+
.parcel-cache
73+
74+
# Vite
75+
.vite
76+
77+
# Next.js build output
78+
.next
79+
80+
# Nuxt.js build / generate output
81+
.nuxt
82+
83+
# Gatsby files
84+
.cache/
85+
public
86+
87+
# Storybook build outputs
88+
.out
89+
.storybook-out
90+
storybook-static
91+
92+
# Temporary folders
93+
tmp/
94+
temp/
95+
96+
# Editor directories and files
97+
.vscode/
98+
.idea/
99+
*.swp
100+
*.swo
101+
*~
102+
103+
# OS generated files
104+
.DS_Store
105+
.DS_Store?
106+
._*
107+
.Spotlight-V100
108+
.Trashes
109+
ehthumbs.db
110+
Thumbs.db
111+
112+
# Turbo
113+
.turbo
114+
115+
# Biome
116+
.biome-cache
117+

0 commit comments

Comments
 (0)