Skip to content

Commit 2275c30

Browse files
tenphitenphi
authored
feat(CommandMenu): add component (#720)
1 parent 20db19d commit 2275c30

39 files changed

+4161
-332
lines changed

‎.changeset/serious-meals-work.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": minor
3+
---
4+
5+
Add CommandMenu component.

‎.changeset/tidy-planets-yawn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": minor
3+
---
4+
5+
Changed HotKeys API. Use `children` to pass hotkeys instead of `keys` prop.

‎.cursor/rules/guidelines.mdc

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

0 commit comments

Comments
 (0)