@m5kdev/web-ui 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cursor/rules/web-ui.mdc +126 -0
- package/.turbo/turbo-build.log +5 -0
- package/.turbo/turbo-check-types.log +5 -0
- package/.turbo/turbo-lint$colon$fix.log +381 -0
- package/.turbo/turbo-lint.log +361 -0
- package/CHANGELOG.md +13 -0
- package/components.json +21 -0
- package/dist/tsconfig.lib.tsbuildinfo +1 -0
- package/package.json +5 -8
- package/translations/en/web-ui.json +192 -0
- package/tsconfig.json +27 -0
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
---
|
|
2
|
+
alwaysApply: true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Web UI Package Structure and Code Style
|
|
6
|
+
|
|
7
|
+
## Package Overview
|
|
8
|
+
|
|
9
|
+
The `@m5kdev/web-ui` package is a shared UI component library based on shadcn/ui, Radix UI, and Tailwind CSS. It provides a unified set of components for use across multiple applications in the monorepo.
|
|
10
|
+
|
|
11
|
+
## Directory Structure
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
packages/web-ui/
|
|
15
|
+
├── src/
|
|
16
|
+
│ ├── components/
|
|
17
|
+
│ │ ├── ui/ # shadcn/ui components (buttons, cards, dialogs, etc.)
|
|
18
|
+
│ │ ├── auth/ # Authentication-related components
|
|
19
|
+
│ │ ├── shared/ # Shared utility components
|
|
20
|
+
│ │ └── *.tsx # Custom extended components
|
|
21
|
+
│ ├── hooks/ # Custom React hooks
|
|
22
|
+
│ ├── lib/ # Utility functions
|
|
23
|
+
│ └── app.css # Global styles and Tailwind directives
|
|
24
|
+
├── components.json # shadcn/ui configuration
|
|
25
|
+
├── package.json
|
|
26
|
+
└── tsconfig.json
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Configuration
|
|
30
|
+
|
|
31
|
+
### shadcn/ui Configuration (`components.json`)
|
|
32
|
+
- Style: `new-york`
|
|
33
|
+
- RSC: `false` (client components)
|
|
34
|
+
- Icon Library: `lucide-react` and `@tabler/icons-react`
|
|
35
|
+
- CSS Variables: `true`
|
|
36
|
+
- Tailwind Prefix: none
|
|
37
|
+
- Path aliases:
|
|
38
|
+
- `#components` → components directory
|
|
39
|
+
- `#components/ui` → UI components
|
|
40
|
+
- `#lib` → library utilities
|
|
41
|
+
- `#hooks` → custom hooks
|
|
42
|
+
|
|
43
|
+
### Package Exports
|
|
44
|
+
- Main entry: `./src/index.ts`
|
|
45
|
+
- Types: `./src/index.ts`
|
|
46
|
+
- Individual components can be imported directly
|
|
47
|
+
|
|
48
|
+
## Component Patterns
|
|
49
|
+
|
|
50
|
+
### 1. shadcn/ui Components (in `ui/` directory)
|
|
51
|
+
|
|
52
|
+
Standard shadcn/ui component structure.
|
|
53
|
+
|
|
54
|
+
### 2. Custom Extended Components
|
|
55
|
+
|
|
56
|
+
Components that wrap or extend shadcn/ui components.
|
|
57
|
+
|
|
58
|
+
### 3. Component Groups (e.g., `auth/`)
|
|
59
|
+
|
|
60
|
+
Grouped components use default exports.
|
|
61
|
+
|
|
62
|
+
## Code Style Guidelines
|
|
63
|
+
|
|
64
|
+
### Component Structure
|
|
65
|
+
1. Import statements
|
|
66
|
+
2. Type/Interface definitions
|
|
67
|
+
3. Variant definitions (if using cva)
|
|
68
|
+
4. Component implementation
|
|
69
|
+
5. DisplayName assignment (for forwardRef)
|
|
70
|
+
6. Named exports
|
|
71
|
+
|
|
72
|
+
### Styling
|
|
73
|
+
- Use Tailwind CSS classes exclusively
|
|
74
|
+
- Utilize `cn()` utility for conditional classes
|
|
75
|
+
- Define variants with `cva` for component variations
|
|
76
|
+
- CSS variables for theming (defined in app.css)
|
|
77
|
+
|
|
78
|
+
### Props Patterns
|
|
79
|
+
- Extend HTML element props when appropriate
|
|
80
|
+
- Use `VariantProps` for variant typing
|
|
81
|
+
- `asChild` prop for Radix UI Slot pattern
|
|
82
|
+
- Destructure props with defaults
|
|
83
|
+
- Pass remaining props with spread operator
|
|
84
|
+
|
|
85
|
+
### TypeScript Patterns
|
|
86
|
+
- Explicit prop interfaces
|
|
87
|
+
- Use `React.forwardRef` for DOM element access
|
|
88
|
+
- Generic types where appropriate
|
|
89
|
+
- Avoid `any` - use proper typing
|
|
90
|
+
|
|
91
|
+
## Custom Hooks
|
|
92
|
+
|
|
93
|
+
Located in `src/hooks/`.
|
|
94
|
+
|
|
95
|
+
## Dependencies
|
|
96
|
+
|
|
97
|
+
### Core Dependencies
|
|
98
|
+
- `react` & `react-dom`: ^19.1.0
|
|
99
|
+
- `@radix-ui/*`: Various Radix UI primitives
|
|
100
|
+
- `class-variance-authority`: Component variants
|
|
101
|
+
- `clsx` & `tailwind-merge`: Class name utilities
|
|
102
|
+
- `tailwindcss-animate`: Animation utilities
|
|
103
|
+
- `lucide-react` & `@tabler/icons-react`: Icon library
|
|
104
|
+
- `motion`: Animation library
|
|
105
|
+
|
|
106
|
+
### Form & Interaction
|
|
107
|
+
- `react-hook-form`: Form handling
|
|
108
|
+
- `sonner`: Toast notifications
|
|
109
|
+
- `next-themes`: Theme management
|
|
110
|
+
|
|
111
|
+
## Best Practices
|
|
112
|
+
|
|
113
|
+
1. **Component Reusability**: Design components to be application-agnostic
|
|
114
|
+
2. **Prop Interfaces**: Always define explicit TypeScript interfaces
|
|
115
|
+
3. **Forwarding Refs**: Use for components that render DOM elements
|
|
116
|
+
4. **Accessibility**: Leverage Radix UI's built-in accessibility
|
|
117
|
+
5. **Styling Consistency**: Use predefined Tailwind classes and CSS variables
|
|
118
|
+
6. **No Barrel Exports**: Import components directly, avoid index.ts exports
|
|
119
|
+
|
|
120
|
+
## Adding New Components
|
|
121
|
+
|
|
122
|
+
1. **shadcn/ui components**: Place in `src/components/ui/`
|
|
123
|
+
2. **Custom components**: Place in `src/components/`
|
|
124
|
+
3. **Grouped components**: Create subdirectory (e.g., `src/components/feature/`)
|
|
125
|
+
4. **Hooks**: Add to `src/hooks/`
|
|
126
|
+
5. **Utilities**: Add to `src/lib/`
|