shadcn-rails 0.1.0 → 0.2.0

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.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -1
  3. data/CLAUDE.md +151 -2
  4. data/PROGRESS.md +30 -20
  5. data/README.md +89 -1398
  6. data/Rakefile +66 -0
  7. data/__tests__/controllers/combobox_controller.test.js +56 -51
  8. data/__tests__/controllers/context_menu_controller.test.js +280 -2
  9. data/__tests__/controllers/menubar_controller.test.js +5 -4
  10. data/__tests__/controllers/navigation_menu_controller.test.js +5 -4
  11. data/__tests__/controllers/popover_controller.test.js +35 -60
  12. data/__tests__/controllers/select_controller.test.js +5 -1
  13. data/app/assets/javascripts/shadcn/controllers/base_menu_controller.js +266 -0
  14. data/app/assets/javascripts/shadcn/controllers/combobox_controller.js +13 -8
  15. data/app/assets/javascripts/shadcn/controllers/command_controller.js +5 -1
  16. data/app/assets/javascripts/shadcn/controllers/context_menu_controller.js +61 -105
  17. data/app/assets/javascripts/shadcn/controllers/dropdown_controller.js +49 -170
  18. data/app/assets/javascripts/shadcn/controllers/menubar_controller.js +10 -7
  19. data/app/assets/javascripts/shadcn/controllers/navigation_menu_controller.js +10 -6
  20. data/app/assets/javascripts/shadcn/controllers/popover_controller.js +7 -7
  21. data/app/assets/javascripts/shadcn/controllers/select_controller.js +12 -10
  22. data/app/assets/javascripts/shadcn/controllers/sidebar_controller.js +24 -14
  23. data/app/assets/javascripts/shadcn/index.js +2 -0
  24. data/app/assets/stylesheets/shadcn/components.css +12 -0
  25. data/app/components/shadcn/command_list_component.rb +29 -14
  26. data/app/components/shadcn/context_menu_checkbox_item_component.rb +76 -0
  27. data/app/components/shadcn/context_menu_content_component.rb +37 -14
  28. data/app/components/shadcn/context_menu_item_component.rb +3 -2
  29. data/app/components/shadcn/context_menu_radio_group_component.rb +42 -0
  30. data/app/components/shadcn/context_menu_radio_item_component.rb +76 -0
  31. data/app/components/shadcn/dropdown_menu_checkbox_item_component.rb +76 -0
  32. data/app/components/shadcn/dropdown_menu_content_component.rb +45 -16
  33. data/app/components/shadcn/dropdown_menu_radio_group_component.rb +42 -0
  34. data/app/components/shadcn/dropdown_menu_radio_item_component.rb +76 -0
  35. data/app/components/shadcn/menubar_content_component.rb +45 -20
  36. data/app/components/shadcn/menubar_sub_content_component.rb +21 -8
  37. data/app/components/shadcn/radio_group_item_component.rb +32 -6
  38. data/app/components/shadcn/resizable_panel_group_component.rb +27 -16
  39. data/app/components/shadcn/select_component.rb +23 -6
  40. data/bin/bump +321 -0
  41. data/bin/release +205 -0
  42. data/bin/test +75 -0
  43. data/jest.config.js +1 -1
  44. data/lib/shadcn/rails/version.rb +1 -1
  45. data/package-lock.json +27 -4
  46. data/package.json +4 -1
  47. metadata +11 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 91e663eb5a019fc790f77760827732cadc390370b571b56b67d86615a94d7b4e
4
- data.tar.gz: 6ebd1786b43b3ff9c67f53741455d259f295bde129ec5c71af020c9e9946d4a1
3
+ metadata.gz: 6ed3ecfa5b3774e31da3ea629fe24151b003bdb80ab5e3032e726987e7756327
4
+ data.tar.gz: bdb60df75e3eac0c4e3e1eeea2a1d121865964d2aaf878ab3a037ef435f0f333
5
5
  SHA512:
6
- metadata.gz: 91bc71ef5c64f298fd17fadfdec2674fb2478e6942a3e6466d7ad226b06f46bbdcb348738613d6c8d7fa28b936c141701148a0492bcde44e18af4a1ecbb1058a
7
- data.tar.gz: a65da33bedb5affa1c8ecae55bbae1e149910f06fdaa4ee1df45822e95ab2179ce799fbc1630e3ade61ccab6af815b9c533aa7d4110f5fcc08bdf75a84dfd4a9
6
+ metadata.gz: 7f2ac29443aecaa53f1a989d070bb8d390e4b96308f0509b021129af1a8e27f1016b87938a17cc831fd0aca2e54f821c3a24561bb930637da0d5e5efe6fba5c2
7
+ data.tar.gz: '09d5d7e5293bf5ea755ac9911a049799d0a38464e16432c1597d18d860f401a874980a5f6f304e8ee9e9b2c8a1f1046957eabce7883d71f964b8cbdb09a7e96e'
data/CHANGELOG.md CHANGED
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.2.0] - 2025-11-27
11
+
10
12
  ## [0.1.0] - 2024-11-27
11
13
 
12
14
  ### Added
@@ -50,5 +52,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
50
52
  - Accessibility guidelines
51
53
  - Installation instructions for various JavaScript bundlers
52
54
 
53
- [Unreleased]: https://github.com/iheanyi/shadcn-rails/compare/v0.1.0...HEAD
55
+ [Unreleased]: https://github.com/iheanyi/shadcn-rails/compare/v0.2.0...HEAD
56
+ [0.2.0]: https://github.com/iheanyi/shadcn-rails/compare/v0.1.0...v0.2.0
54
57
  [0.1.0]: https://github.com/iheanyi/shadcn-rails/releases/tag/v0.1.0
data/CLAUDE.md CHANGED
@@ -177,13 +177,162 @@ bundle exec rake test
177
177
  # Run component tests only
178
178
  bundle exec rake test_components
179
179
 
180
- # Start dummy app
181
- cd test/dummy && rails server
180
+ # Build JavaScript (from project root)
181
+ npm run build
182
+
183
+ # Start dummy app for local development (RECOMMENDED)
184
+ cd test/dummy && bin/dev
182
185
 
183
186
  # Start Lookbook previews
184
187
  cd test/dummy && rails lookbook:preview
185
188
  ```
186
189
 
190
+ ## Local Testing with bin/dev
191
+
192
+ **IMPORTANT**: Always use `bin/dev` instead of `rails server` when testing locally. This ensures:
193
+ 1. JavaScript is automatically rebuilt when files change (via esbuild watch mode)
194
+ 2. CSS is automatically rebuilt when Tailwind classes change
195
+ 3. Changes to Stimulus controllers are immediately available
196
+
197
+ ```bash
198
+ # Start the development server (from test/dummy)
199
+ cd test/dummy && bin/dev
200
+
201
+ # If port 3000 is in use, kill existing processes first:
202
+ lsof -ti:3000 | xargs kill -9 2>/dev/null
203
+ rm -f tmp/pids/server.pid
204
+ bin/dev
205
+ ```
206
+
207
+ The development server runs:
208
+ - Rails server on port 3000
209
+ - esbuild in watch mode for JavaScript bundling
210
+ - Tailwind CSS in watch mode
211
+
212
+ **Note**: After modifying Stimulus controllers in `app/assets/javascripts/shadcn/controllers/`, you must also run `npm run build` from the project root to update the npm package distribution files.
213
+
214
+ ## Regression Testing
215
+
216
+ When making changes to interactive components, always verify:
217
+
218
+ ### Context Menu
219
+ 1. **Open/Close**: Right-click to open, click outside or press Escape to close
220
+ 2. **Double right-click**: Right-clicking twice in quick succession should reposition the menu
221
+ 3. **Keyboard navigation**: Arrow keys, Home/End, Enter/Space for selection
222
+ 4. **Scroll lock**: Background should not scroll when menu is open
223
+ 5. **Animation**: Smooth fade-in/out animation (100ms)
224
+ 6. **Positioning**: Menu stays within viewport bounds
225
+
226
+ ### Radio Group
227
+ 1. **Labels are clickable**: Clicking the label should select the radio
228
+ 2. **Descriptions render**: Items with descriptions show them below the label
229
+ 3. **Keyboard navigation**: Tab to focus, arrow keys to move between items
230
+ 4. **Single selection**: Only one item can be selected at a time
231
+
232
+ ### Dropdown Menu
233
+ 1. **All item types**: Test items, checkboxes, radio groups, separators, labels
234
+ 2. **Keyboard shortcuts**: Display correctly with proper styling
235
+ 3. **Submenus**: Open on hover, close when moving away
236
+
237
+ ### Dialog/Sheet/Drawer
238
+ 1. **Focus trap**: Tab should cycle within the modal
239
+ 2. **Escape closes**: Pressing Escape should close the modal
240
+ 3. **Overlay click**: Clicking the overlay should close (unless modal)
241
+ 4. **Body scroll lock**: Background should not scroll when open
242
+
243
+ ### Testing with Playwright
244
+
245
+ Use the MCP Playwright tools for automated testing:
246
+
247
+ ```javascript
248
+ // Navigate to docs page
249
+ mcp__playwright__browser_navigate({ url: "http://localhost:3000/docs/context-menu" })
250
+
251
+ // Take a snapshot to see the page state
252
+ mcp__playwright__browser_snapshot()
253
+
254
+ // Right-click to open context menu (use browser_run_code for context menu)
255
+ mcp__playwright__browser_run_code({
256
+ code: `await page.locator('[data-shadcn--context-menu-target="trigger"]').click({ button: 'right' })`
257
+ })
258
+
259
+ // Press Escape to close
260
+ mcp__playwright__browser_press_key({ key: "Escape" })
261
+ ```
262
+
263
+ ### Bug-Fixing Workflow
264
+
265
+ **IMPORTANT**: When fixing reported bugs, follow this workflow:
266
+
267
+ 1. **Reproduce via Playwright** - Use MCP Playwright tools to confirm the bug exists
268
+ 2. **Write a failing Jest test** - Create a test in `__tests__/controllers/` that captures the bug
269
+ 3. **Fix the bug** - Update the controller/component code
270
+ 4. **Verify Jest test passes** - Run `npm test` to confirm the fix
271
+ 5. **Verify via Playwright** - Use MCP Playwright again to confirm the bug is fixed
272
+
273
+ This ensures:
274
+ - Bugs are properly understood before fixing
275
+ - Regression tests prevent the bug from returning
276
+ - Fixes are verified both in isolation (Jest) and integration (Playwright)
277
+
278
+ ```bash
279
+ # Run Jest tests
280
+ npm test
281
+
282
+ # Run specific test file
283
+ npm test -- context_menu_controller.test.js
284
+
285
+ # Run tests with coverage
286
+ npm test -- --coverage
287
+ ```
288
+
289
+ ## Test-First Development
290
+
291
+ **IMPORTANT**: Always run tests for files you modify to ensure they still pass.
292
+
293
+ ### Testing Guidelines
294
+
295
+ 1. **Before making changes**: Run relevant tests to understand current behavior
296
+ 2. **After making changes**: Run all affected tests to ensure nothing breaks
297
+ 3. **When fixing bugs**: Write a failing test first, then fix the bug
298
+ 4. **When adding features**: Write tests alongside the new code
299
+
300
+ ### Running Tests
301
+
302
+ ```bash
303
+ # Run all Ruby tests
304
+ bundle exec rake test
305
+
306
+ # Run specific component test
307
+ bundle exec ruby -Ilib:test test/components/context_menu_component_test.rb
308
+
309
+ # Run all Jest tests
310
+ npm test
311
+
312
+ # Run specific Jest test file
313
+ npm test -- context_menu_controller.test.js
314
+
315
+ # Run tests with coverage
316
+ npm test -- --coverage
317
+ ```
318
+
319
+ ### Test Coverage Expectations
320
+
321
+ - **Ruby Components**: Each component should have tests for:
322
+ - Default rendering
323
+ - All variants and sizes
324
+ - Slot rendering
325
+ - Accessibility attributes (ARIA)
326
+ - Custom class names and HTML options
327
+
328
+ - **JavaScript Controllers**: Each Stimulus controller should have tests for:
329
+ - Initialization and connect
330
+ - Value changes
331
+ - Target interactions
332
+ - Event handling (click, keyboard, etc.)
333
+ - Edge cases and error handling
334
+ - Cleanup on disconnect
335
+
187
336
  ## Patterns to Follow
188
337
 
189
338
  ### 1. Component Variants
data/PROGRESS.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  Reference: https://ui.shadcn.com/docs/components
8
8
 
9
- ### ✅ Implemented Components (47/59)
9
+ ### ✅ Implemented Components (57/59)
10
10
 
11
11
  | Component | shadcn/ui Docs | Status |
12
12
  |-----------|----------------|--------|
@@ -19,29 +19,40 @@ Reference: https://ui.shadcn.com/docs/components
19
19
  | Breadcrumb | [docs](https://ui.shadcn.com/docs/components/breadcrumb) | ✅ Complete |
20
20
  | Button | [docs](https://ui.shadcn.com/docs/components/button) | ✅ Complete |
21
21
  | Button Group | N/A | ✅ Complete |
22
+ | Calendar | [docs](https://ui.shadcn.com/docs/components/calendar) | ✅ Complete |
22
23
  | Card | [docs](https://ui.shadcn.com/docs/components/card) | ✅ Complete |
23
- | Command | [docs](https://ui.shadcn.com/docs/components/command) | ✅ Complete |
24
+ | Carousel | [docs](https://ui.shadcn.com/docs/components/carousel) | ✅ Complete |
24
25
  | Checkbox | [docs](https://ui.shadcn.com/docs/components/checkbox) | ✅ Complete |
25
26
  | Collapsible | [docs](https://ui.shadcn.com/docs/components/collapsible) | ✅ Complete |
27
+ | Combobox | [docs](https://ui.shadcn.com/docs/components/combobox) | ✅ Complete |
28
+ | Command | [docs](https://ui.shadcn.com/docs/components/command) | ✅ Complete |
29
+ | Context Menu | [docs](https://ui.shadcn.com/docs/components/context-menu) | ✅ Complete |
30
+ | Date Picker | [docs](https://ui.shadcn.com/docs/components/date-picker) | ✅ Complete |
26
31
  | Dialog | [docs](https://ui.shadcn.com/docs/components/dialog) | ✅ Complete |
27
32
  | Drawer | [docs](https://ui.shadcn.com/docs/components/drawer) | ✅ Complete (animations added) |
28
33
  | Dropdown Menu | [docs](https://ui.shadcn.com/docs/components/dropdown-menu) | ✅ Complete |
34
+ | Empty | N/A | ✅ Complete |
29
35
  | Field | N/A | ✅ Complete |
30
36
  | Hover Card | [docs](https://ui.shadcn.com/docs/components/hover-card) | ✅ Complete |
31
37
  | Input | [docs](https://ui.shadcn.com/docs/components/input) | ✅ Complete |
32
38
  | Input Group | N/A | ✅ Complete |
33
39
  | Input OTP | [docs](https://ui.shadcn.com/docs/components/input-otp) | ✅ Complete |
40
+ | Item | N/A | ✅ Complete |
34
41
  | Kbd | N/A | ✅ Complete |
35
42
  | Label | [docs](https://ui.shadcn.com/docs/components/label) | ✅ Complete |
43
+ | Menubar | [docs](https://ui.shadcn.com/docs/components/menubar) | ✅ Complete |
36
44
  | Native Select | N/A | ✅ Complete |
45
+ | Navigation Menu | [docs](https://ui.shadcn.com/docs/components/navigation-menu) | ✅ Complete |
37
46
  | Pagination | [docs](https://ui.shadcn.com/docs/components/pagination) | ✅ Complete |
38
47
  | Popover | [docs](https://ui.shadcn.com/docs/components/popover) | ✅ Complete |
39
48
  | Progress | [docs](https://ui.shadcn.com/docs/components/progress) | ✅ Complete |
40
49
  | Radio Group | [docs](https://ui.shadcn.com/docs/components/radio-group) | ✅ Complete |
50
+ | Resizable | [docs](https://ui.shadcn.com/docs/components/resizable) | ✅ Complete |
41
51
  | Scroll Area | [docs](https://ui.shadcn.com/docs/components/scroll-area) | ✅ Complete |
42
52
  | Select | [docs](https://ui.shadcn.com/docs/components/select) | ✅ Complete |
43
53
  | Separator | [docs](https://ui.shadcn.com/docs/components/separator) | ✅ Complete |
44
54
  | Sheet | [docs](https://ui.shadcn.com/docs/components/sheet) | ✅ Complete |
55
+ | Sidebar | [docs](https://ui.shadcn.com/docs/components/sidebar) | ✅ Complete |
45
56
  | Skeleton | [docs](https://ui.shadcn.com/docs/components/skeleton) | ✅ Complete |
46
57
  | Slider | [docs](https://ui.shadcn.com/docs/components/slider) | ✅ Complete |
47
58
  | Spinner | N/A | ✅ Complete |
@@ -55,33 +66,32 @@ Reference: https://ui.shadcn.com/docs/components
55
66
  | Tooltip | [docs](https://ui.shadcn.com/docs/components/tooltip) | ✅ Complete |
56
67
  | Typography | N/A | ✅ Complete |
57
68
 
58
- ### ❌ Missing Components (12/59)
69
+ ### ❌ Missing Components (2/59)
59
70
 
60
71
  | Component | shadcn/ui Docs | Priority | Complexity | Notes |
61
72
  |-----------|----------------|----------|------------|-------|
62
- | **High Priority** |
63
- | Calendar | [docs](https://ui.shadcn.com/docs/components/calendar) | High | High | Date selection, requires date library integration |
64
- | Data Table | [docs](https://ui.shadcn.com/docs/components/data-table) | High | High | Sortable, filterable data grid |
65
- | Date Picker | [docs](https://ui.shadcn.com/docs/components/date-picker) | High | High | Calendar + Popover composition |
66
- | Form | [docs](https://ui.shadcn.com/docs/components/form) | High | Medium | Form builder integration with Rails |
67
- | Navigation Menu | [docs](https://ui.shadcn.com/docs/components/navigation-menu) | High | Medium | Site navigation with dropdowns |
68
- | Sidebar | [docs](https://ui.shadcn.com/docs/components/sidebar) | High | Medium | App sidebar layout pattern |
69
- | **Medium Priority** |
70
- | Carousel | [docs](https://ui.shadcn.com/docs/components/carousel) | Medium | Medium | Image/content slider |
71
- | Context Menu | [docs](https://ui.shadcn.com/docs/components/context-menu) | Medium | Medium | Right-click menu |
72
- | Menubar | [docs](https://ui.shadcn.com/docs/components/menubar) | Medium | Medium | Desktop menu bar |
73
- | Resizable | [docs](https://ui.shadcn.com/docs/components/resizable) | Medium | Medium | Resizable panels |
74
- | Sonner | [docs](https://ui.shadcn.com/docs/components/sonner) | Medium | Low | Toast alternative (we have Toast) |
75
- | **Low Priority** |
73
+ | Data Table | [docs](https://ui.shadcn.com/docs/components/data-table) | Medium | High | Sortable, filterable data grid |
76
74
  | Chart | [docs](https://ui.shadcn.com/docs/components/chart) | Low | High | Requires charting library |
77
75
 
76
+ **Skipped Components:**
77
+ - **Sonner** - We have Toast component which serves the same purpose
78
+ - **Form** - Rails has excellent form helpers; using Field component pattern instead
79
+
78
80
  ### ✅ Recently Implemented
79
81
  | Component | Status | Notes |
80
82
  |-----------|--------|-------|
81
- | Empty | ✅ Complete | Empty state placeholder with media, title, description, and content slots |
82
- | Item | ✅ Complete | Flexible flex container with variants and subcomponents |
83
+ | Calendar | ✅ Complete | Date selection grid with full keyboard navigation |
84
+ | Date Picker | ✅ Complete | Calendar + Popover composition |
85
+ | Carousel | ✅ Complete | Image/content slider with navigation |
86
+ | Context Menu | ✅ Complete | Right-click menu |
87
+ | Menubar | ✅ Complete | Desktop menu bar with submenus |
88
+ | Navigation Menu | ✅ Complete | Site navigation with dropdowns |
89
+ | Resizable | ✅ Complete | Draggable resizable panels |
90
+ | Sidebar | ✅ Complete | App sidebar layout with 20+ subcomponents |
83
91
  | Command | ✅ Complete | Command palette with search, keyboard navigation, dialog variant |
84
- | Combobox | ✅ Complete | Autocomplete input with searchable dropdown, form integration, keyboard navigation |
92
+ | Combobox | ✅ Complete | Autocomplete input with searchable dropdown, form integration |
93
+ | Empty | ✅ Complete | Empty state placeholder with media, title, description slots |
94
+ | Item | ✅ Complete | Flexible flex container with variants and subcomponents |
85
95
 
86
96
  ### Priority Roadmap
87
97