Skip to content

Commit 04fcdfe

Browse files
tenphitenphi
committed
feat(CommandPalette): add new component
1 parent eec1cde commit 04fcdfe

23 files changed

+2817
-160
lines changed

‎.cursor/rules/guidelines.mdc

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
6+
# Description
7+
8+
Package name: `@cube-dev/ui-kit`
9+
10+
# Project Structure
11+
12+
## Component file structure (preferable)
13+
14+
/src/components/{category}/{ComponentName}/
15+
- {ComponentName}.tsx – implementation of the component
16+
- {ComponentName}.docs.mdx - documentation
17+
- {ComponentName}.stories.tsx - Storybook stories
18+
- {ComponentName}.test.tsx - Unit tests
19+
- index.tsx - re-export of all instances
20+
21+
## Icons
22+
23+
/src/icons/
24+
25+
# Commands
26+
27+
## Test
28+
29+
All tests: `$ pnpm test`
30+
Specific test: `$ pnpm test -- {TestFileName}`
31+
32+
## Build
33+
34+
`pnpm run build`
35+
36+
## Lint + Fix
37+
38+
`pnpm run fix`
39+
40+
# Stack
41+
42+
- `tasty` style helper.
43+
- `src/tasty` - sources
44+
- `src/stories/Tasty.docs.mdx` - documentation
45+
- `src/stories/Styles.docs.mdx` - custom tasty styles documentation
46+
- `src/stories/CreateComponent.docs.mdx` - create components using tasty helper.
47+
- Storybook v8.6
48+
- React and React DOM v18
49+
- `styled-components` v6
50+
- `react-aria` and `react-stately` with the latest versions.
51+
- `tabler/icons-react` - icons.
52+
53+
# Recomendations
54+
55+
- Use `DOCUMENTATION_GUIDELINES.md` for writing documentation for components.
56+
- Use icons from `/src/icons` if they have a required one. If not - use `tabler/icons-react`. If we need to customize the size or color of the icon, then wrap it with `<Icon/>` component and pass all required props there. Do not add any props to the tabler icons directly.
57+
58+
## Form System
59+
60+
- Form validation uses async rule-based system with built-in validators:
61+
- `required` - field is required
62+
- `type` - validates data type (email, url, number, etc.)
63+
- `pattern` - regex pattern validation
64+
- `min`/`max` - length/value constraints
65+
- `enum` - allowed values
66+
- `whitespace` - non-empty content
67+
- `validator` - custom async function
68+
- Form fields support direct integration without Field wrapper
69+
- Use `useForm` hook for form instance management
70+
- Form state includes validation, touched state, and error handling
71+
72+
## Testing
73+
74+
- Testing setup: Jest + React Testing Library + `@testing-library/react-hooks`
75+
- Test configuration: `src/test/setup.ts` with custom configurations
76+
- Testing utilities: `src/test/render.tsx` provides `renderWithRoot` wrapper
77+
- QA attributes: Use `qa` prop for e2e testing selectors (`data-qa`)
78+
- Test environment: Uses `jsdom` with React 18 act() environment
79+
- Coverage: Run `pnpm test-cover` for coverage reports
80+
81+
## Accessibility
82+
83+
- All components use React Aria hooks for accessibility
84+
- Keyboard navigation patterns are consistent across components
85+
- ARIA attributes are automatically managed by React Aria
86+
- Screen reader support is built-in with proper announcements
87+
- Focus management is handled automatically
88+
- Components support all standard ARIA labeling props
89+
90+
## TypeScript
91+
92+
- Interface naming: Use descriptive names with `Props` suffix for component props
93+
- Base props: Extend from `BaseProps` or `AllBaseProps` for standard properties
94+
- Form types: Use `FieldTypes` interface for form field type definitions
95+
- Style props: Use specific style prop interfaces (e.g., `ContainerStyleProps`)
96+
- Generic constraints: Use `extends` for type safety in form and field components
97+
98+
## Component Architecture
99+
100+
- Use `filterBaseProps` to separate design system props from DOM props
101+
- Export pattern: Use barrel exports with compound components (e.g., `Button.Group`)
102+
- Style system: Use `extractStyles` for separating style props from other props
103+
- Modifiers: Use `mods` prop for state-based styling
104+
- Sub-elements: Use `data-element` attribute for targeting specific parts in styles
105+
106+
## Style System (Tasty)
107+
108+
- Use `tasty` documentation
109+
- Use `tasty` custom styles with tasty syntax when possible.
110+
- Use `style` property only for dynamic styles and tokens (css custom properties).
111+
- Style categories: BASE, POSITION, BLOCK, COLOR, TEXT, DIMENSION, FLOW, CONTAINER, OUTER
112+
- Responsive values: Use arrays for breakpoint-based styling
113+
- Modifiers: Use object syntax for conditional styles
114+
- Sub-elements: Target inner elements using capitalized keys in styles
115+
- Style props: Direct style application without `styles` prop
116+
- CSS custom properties: Use `@token-name` syntax for design tokens
117+
- To declare a CSS animation use `styled-components` and then pass the animation name to the tasty styles.
118+
119+
## Export Patterns
120+
121+
- Compound components: Use `Object.assign` pattern for sub-components
122+
- Barrel exports: Each category has index.ts for re-exports
123+
- Main export: All components exported from `src/index.ts`
124+
- Type exports: Export component prop types for external use
125+
126+
## Development Workflow
127+
128+
- Branch naming: `[type/(task-name | scope)]` (e.g., `feat/button-group`)
129+
- Commit convention: `category: message` format
130+
- Changesets: Use `pnpm changeset` for version management
131+
- Code snippets: Use `jsx live=false` for documentation snippets
132+
- Storybook: Two modes - `stories` and `docs` for different outputs
133+
134+
## Performance
135+
136+
- Icon optimization: Reuse icon components, wrap with `<Icon/>` for customization
137+
- Style caching: Tasty system includes built-in style caching
138+
- Bundle size: Monitor with `pnpm size` command
139+
- Lazy loading: Use dynamic imports for large components
140+
141+
## Error Handling
142+
143+
- Form validation: Async error handling with Promise-based validation
144+
- Console suppression: Test setup includes act() warning suppression
145+
- Error boundaries: Use proper error boundaries in complex components
146+
- Validation state: Use `validationState` prop for field error states
147+
148+
# Description
149+
150+
Package name: `@cube-dev/ui-kit`
151+
152+
# Project Structure
153+
154+
## Component file structure (preferable)
155+
156+
/src/components/{category}/{ComponentName}/
157+
- {ComponentName}.tsx – implementation of the component
158+
- {ComponentName}.docs.mdx - documentation
159+
- {ComponentName}.stories.tsx - Storybook stories
160+
- {ComponentName}.test.tsx - Unit tests
161+
- index.tsx - re-export of all instances
162+
163+
## Icons
164+
165+
/src/icons/
166+
167+
# Commands
168+
169+
## Test
170+
171+
All tests: `$ pnpm test`
172+
Specific test: `$ pnpm test -- {TestFileName}`
173+
174+
## Build
175+
176+
`pnpm run build`
177+
178+
## Lint + Fix
179+
180+
`pnpm run fix`
181+
182+
# Stack
183+
184+
- `tasty` style helper.
185+
- `src/tasty` - sources
186+
- `src/stories/Tasty.docs.mdx` - documentation
187+
- `src/stories/Styles.docs.mdx` - custom tasty styles documentation
188+
- `src/stories/CreateComponent.docs.mdx` - create components using tasty helper.
189+
- Storybook v8.6
190+
- React and React DOM v18
191+
- `styled-components` v6
192+
- `react-aria` and `react-stately` with the latest versions.
193+
- `tabler/icons-react` - icons.
194+
195+
# Recomendations
196+
197+
- Use `DOCUMENTATION_GUIDELINES.md` for writing documentation for components.
198+
- Use icons from `/src/icons` if they have a required one. If not - use `tabler/icons-react`. If we need to customize the size or color of the icon, then wrap it with `<Icon/>` component and pass all required props there. Do not add any props to the tabler icons directly.
199+
200+
## Form System
201+
202+
- Form validation uses async rule-based system with built-in validators:
203+
- `required` - field is required
204+
- `type` - validates data type (email, url, number, etc.)
205+
- `pattern` - regex pattern validation
206+
- `min`/`max` - length/value constraints
207+
- `enum` - allowed values
208+
- `whitespace` - non-empty content
209+
- `validator` - custom async function
210+
- Form fields support direct integration without Field wrapper
211+
- Use `useForm` hook for form instance management
212+
- Form state includes validation, touched state, and error handling
213+
214+
## Testing
215+
216+
- Testing setup: Jest + React Testing Library + `@testing-library/react-hooks`
217+
- Test configuration: `src/test/setup.ts` with custom configurations
218+
- Testing utilities: `src/test/render.tsx` provides `renderWithRoot` wrapper
219+
- QA attributes: Use `qa` prop for e2e testing selectors (`data-qa`)
220+
- Test environment: Uses `jsdom` with React 18 act() environment
221+
- Coverage: Run `pnpm test-cover` for coverage reports
222+
223+
## Accessibility
224+
225+
- All components use React Aria hooks for accessibility
226+
- Keyboard navigation patterns are consistent across components
227+
- ARIA attributes are automatically managed by React Aria
228+
- Screen reader support is built-in with proper announcements
229+
- Focus management is handled automatically
230+
- Components support all standard ARIA labeling props
231+
232+
## TypeScript
233+
234+
- Interface naming: Use descriptive names with `Props` suffix for component props
235+
- Base props: Extend from `BaseProps` or `AllBaseProps` for standard properties
236+
- Form types: Use `FieldTypes` interface for form field type definitions
237+
- Style props: Use specific style prop interfaces (e.g., `ContainerStyleProps`)
238+
- Generic constraints: Use `extends` for type safety in form and field components
239+
240+
## Component Architecture
241+
242+
- Use `filterBaseProps` to separate design system props from DOM props
243+
- Export pattern: Use barrel exports with compound components (e.g., `Button.Group`)
244+
- Style system: Use `extractStyles` for separating style props from other props
245+
- Modifiers: Use `mods` prop for state-based styling
246+
- Sub-elements: Use `data-element` attribute for targeting specific parts in styles
247+
248+
## Style System (Tasty)
249+
250+
- Use `tasty` documentation
251+
- Use `tasty` custom styles with tasty syntax when possible.
252+
- Use `style` property only for dynamic styles and tokens (css custom properties).
253+
- Style categories: BASE, POSITION, BLOCK, COLOR, TEXT, DIMENSION, FLOW, CONTAINER, OUTER
254+
- Responsive values: Use arrays for breakpoint-based styling
255+
- Modifiers: Use object syntax for conditional styles
256+
- Sub-elements: Target inner elements using capitalized keys in styles
257+
- Style props: Direct style application without `styles` prop
258+
- CSS custom properties: Use `@token-name` syntax for design tokens
259+
- To declare a CSS animation use `styled-components` and then pass the animation name to the tasty styles.
260+
261+
## Export Patterns
262+
263+
- Compound components: Use `Object.assign` pattern for sub-components
264+
- Barrel exports: Each category has index.ts for re-exports
265+
- Main export: All components exported from `src/index.ts`
266+
- Type exports: Export component prop types for external use
267+
268+
## Development Workflow
269+
270+
- Branch naming: `[type/(task-name | scope)]` (e.g., `feat/button-group`)
271+
- Commit convention: `category: message` format
272+
- Changesets: Use `pnpm changeset` for version management
273+
- Code snippets: Use `jsx live=false` for documentation snippets
274+
- Storybook: Two modes - `stories` and `docs` for different outputs
275+
276+
## Performance
277+
278+
- Icon optimization: Reuse icon components, wrap with `<Icon/>` for customization
279+
- Style caching: Tasty system includes built-in style caching
280+
- Bundle size: Monitor with `pnpm size` command
281+
- Lazy loading: Use dynamic imports for large components
282+
283+
## Error Handling
284+
285+
- Form validation: Async error handling with Promise-based validation
286+
- Console suppression: Test setup includes act() warning suppression
287+
- Error boundaries: Use proper error boundaries in complex components
288+
- Validation state: Use `validationState` prop for field error states

0 commit comments

Comments
 (0)