shadcn-rails 0.2.0 → 0.2.1

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 (152) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +66 -2
  3. data/README.md +21 -8
  4. data/__mocks__/@floating-ui/dom.js +67 -0
  5. data/app/assets/javascripts/shadcn/controllers/combobox_controller.js +23 -2
  6. data/app/assets/javascripts/shadcn/controllers/context_menu_controller.js +4 -31
  7. data/app/assets/javascripts/shadcn/controllers/dropdown_controller.js +32 -41
  8. data/app/assets/javascripts/shadcn/controllers/hover_card_controller.js +29 -55
  9. data/app/assets/javascripts/shadcn/controllers/popover_controller.js +29 -54
  10. data/app/assets/javascripts/shadcn/controllers/select_controller.js +26 -8
  11. data/app/assets/javascripts/shadcn/controllers/tooltip_controller.js +28 -59
  12. data/app/assets/javascripts/shadcn/index.js +7 -1
  13. data/app/assets/javascripts/shadcn/utils/floating.js +179 -0
  14. data/app/assets/stylesheets/shadcn/base.css +32 -0
  15. data/app/components/shadcn/accordion_component.html.erb +8 -0
  16. data/app/components/shadcn/accordion_component.rb +6 -15
  17. data/app/components/shadcn/alert_component.html.erb +6 -0
  18. data/app/components/shadcn/alert_component.rb +0 -18
  19. data/app/components/shadcn/alert_dialog_component.html.erb +12 -0
  20. data/app/components/shadcn/alert_dialog_component.rb +7 -27
  21. data/app/components/shadcn/aspect_ratio_component.html.erb +7 -0
  22. data/app/components/shadcn/aspect_ratio_component.rb +4 -19
  23. data/app/components/shadcn/avatar_component.html.erb +20 -0
  24. data/app/components/shadcn/avatar_component.rb +8 -36
  25. data/app/components/shadcn/badge_component.html.erb +1 -0
  26. data/app/components/shadcn/badge_component.rb +0 -11
  27. data/app/components/shadcn/base_component.rb +15 -2
  28. data/app/components/shadcn/breadcrumb_component.html.erb +5 -0
  29. data/app/components/shadcn/breadcrumb_component.rb +6 -16
  30. data/app/components/shadcn/button_component.html.erb +18 -0
  31. data/app/components/shadcn/button_component.rb +1 -41
  32. data/app/components/shadcn/card_component.html.erb +8 -0
  33. data/app/components/shadcn/card_component.rb +2 -6
  34. data/app/components/shadcn/checkbox_component.html.erb +32 -0
  35. data/app/components/shadcn/checkbox_component.rb +4 -43
  36. data/app/components/shadcn/collapsible_component.html.erb +8 -0
  37. data/app/components/shadcn/collapsible_component.rb +6 -15
  38. data/app/components/shadcn/context_menu_component.html.erb +11 -0
  39. data/app/components/shadcn/context_menu_component.rb +6 -26
  40. data/app/components/shadcn/dialog_component.html.erb +14 -0
  41. data/app/components/shadcn/dialog_component.rb +8 -29
  42. data/app/components/shadcn/drawer_component.html.erb +12 -0
  43. data/app/components/shadcn/drawer_component.rb +7 -27
  44. data/app/components/shadcn/dropdown_menu_component.html.erb +14 -0
  45. data/app/components/shadcn/dropdown_menu_component.rb +9 -29
  46. data/app/components/shadcn/field_component.rb +7 -8
  47. data/app/components/shadcn/hover_card_component.html.erb +12 -0
  48. data/app/components/shadcn/hover_card_component.rb +7 -26
  49. data/app/components/shadcn/input_component.html.erb +18 -0
  50. data/app/components/shadcn/input_component.rb +2 -27
  51. data/app/components/shadcn/input_otp_component.rb +3 -3
  52. data/app/components/shadcn/kbd_component.html.erb +1 -0
  53. data/app/components/shadcn/kbd_component.rb +3 -10
  54. data/app/components/shadcn/label_component.html.erb +3 -0
  55. data/app/components/shadcn/label_component.rb +2 -18
  56. data/app/components/shadcn/menubar_component.html.erb +6 -0
  57. data/app/components/shadcn/menubar_component.rb +4 -15
  58. data/app/components/shadcn/native_select_component.html.erb +22 -0
  59. data/app/components/shadcn/native_select_component.rb +9 -39
  60. data/app/components/shadcn/navigation_menu_component.html.erb +6 -0
  61. data/app/components/shadcn/navigation_menu_component.rb +4 -15
  62. data/app/components/shadcn/pagination_component.html.erb +5 -0
  63. data/app/components/shadcn/pagination_component.rb +11 -15
  64. data/app/components/shadcn/popover_component.html.erb +15 -0
  65. data/app/components/shadcn/popover_component.rb +10 -30
  66. data/app/components/shadcn/progress_component.html.erb +13 -0
  67. data/app/components/shadcn/progress_component.rb +6 -26
  68. data/app/components/shadcn/radio_group_component.html.erb +8 -0
  69. data/app/components/shadcn/radio_group_component.rb +12 -26
  70. data/app/components/shadcn/scroll_area_component.html.erb +7 -0
  71. data/app/components/shadcn/scroll_area_component.rb +4 -16
  72. data/app/components/shadcn/select_component.html.erb +46 -0
  73. data/app/components/shadcn/select_component.rb +6 -80
  74. data/app/components/shadcn/separator_component.html.erb +5 -0
  75. data/app/components/shadcn/separator_component.rb +6 -14
  76. data/app/components/shadcn/sheet_component.html.erb +12 -0
  77. data/app/components/shadcn/sheet_component.rb +7 -27
  78. data/app/components/shadcn/sidebar_component.rb +2 -2
  79. data/app/components/shadcn/skeleton_component.html.erb +1 -0
  80. data/app/components/shadcn/skeleton_component.rb +4 -2
  81. data/app/components/shadcn/slider_component.html.erb +12 -0
  82. data/app/components/shadcn/slider_component.rb +2 -21
  83. data/app/components/shadcn/spinner_component.html.erb +18 -0
  84. data/app/components/shadcn/spinner_component.rb +2 -30
  85. data/app/components/shadcn/switch_component.html.erb +72 -0
  86. data/app/components/shadcn/switch_component.rb +4 -82
  87. data/app/components/shadcn/table_component.html.erb +9 -0
  88. data/app/components/shadcn/table_component.rb +2 -10
  89. data/app/components/shadcn/tabs_component.html.erb +8 -0
  90. data/app/components/shadcn/tabs_component.rb +4 -17
  91. data/app/components/shadcn/textarea_component.html.erb +13 -0
  92. data/app/components/shadcn/textarea_component.rb +6 -22
  93. data/app/components/shadcn/toast_component.html.erb +36 -0
  94. data/app/components/shadcn/toast_component.rb +6 -54
  95. data/app/components/shadcn/toggle_component.html.erb +12 -0
  96. data/app/components/shadcn/toggle_component.rb +6 -21
  97. data/app/components/shadcn/toggle_group_component.html.erb +14 -0
  98. data/app/components/shadcn/toggle_group_component.rb +6 -29
  99. data/app/components/shadcn/tooltip_component.html.erb +20 -0
  100. data/app/components/shadcn/tooltip_component.rb +13 -38
  101. data/lib/generators/shadcn/add/USAGE +24 -0
  102. data/lib/generators/shadcn/add/add_generator.rb +279 -0
  103. data/lib/generators/shadcn/install/USAGE +22 -0
  104. data/lib/generators/shadcn/install/install_generator.rb +8 -3
  105. data/lib/generators/shadcn/install/templates/initializer.rb.tt +7 -27
  106. data/lib/generators/shadcn/install/templates/shadcn.yml.tt +15 -31
  107. data/lib/shadcn/rails/version.rb +1 -1
  108. metadata +47 -45
  109. data/.dockerignore +0 -40
  110. data/CLAUDE.md +0 -612
  111. data/PROGRESS.md +0 -495
  112. data/Rakefile +0 -95
  113. data/__tests__/controllers/__snapshots__/calendar_controller.test.js.snap +0 -13
  114. data/__tests__/controllers/__snapshots__/popover_controller.test.js.snap +0 -46
  115. data/__tests__/controllers/__snapshots__/sheet_controller.test.js.snap +0 -111
  116. data/__tests__/controllers/__snapshots__/tabs_controller.test.js.snap +0 -27
  117. data/__tests__/controllers/accordion_controller.test.js +0 -904
  118. data/__tests__/controllers/calendar_controller.test.js +0 -1370
  119. data/__tests__/controllers/carousel_controller.test.js +0 -912
  120. data/__tests__/controllers/checkbox_controller.test.js +0 -454
  121. data/__tests__/controllers/collapsible_controller.test.js +0 -407
  122. data/__tests__/controllers/combobox_controller.test.js +0 -971
  123. data/__tests__/controllers/context_menu_controller.test.js +0 -905
  124. data/__tests__/controllers/date_picker_controller.test.js +0 -636
  125. data/__tests__/controllers/dialog_controller.test.js +0 -878
  126. data/__tests__/controllers/drawer_controller.test.js +0 -995
  127. data/__tests__/controllers/menubar_controller.test.js +0 -737
  128. data/__tests__/controllers/navigation_menu_controller.test.js +0 -599
  129. data/__tests__/controllers/popover_controller.test.js +0 -982
  130. data/__tests__/controllers/radio_group_controller.test.js +0 -640
  131. data/__tests__/controllers/resizable_controller.test.js +0 -680
  132. data/__tests__/controllers/select_controller.test.js +0 -678
  133. data/__tests__/controllers/sheet_controller.test.js +0 -986
  134. data/__tests__/controllers/slider_controller.test.js +0 -1036
  135. data/__tests__/controllers/switch_controller.test.js +0 -424
  136. data/__tests__/controllers/tabs_controller.test.js +0 -907
  137. data/__tests__/controllers/toggle_group_controller.test.js +0 -839
  138. data/__tests__/controllers/tooltip_controller.test.js +0 -808
  139. data/__tests__/helpers/stimulus-test-helper.js +0 -203
  140. data/babel.config.cjs +0 -5
  141. data/bin/bump +0 -321
  142. data/bin/console +0 -11
  143. data/bin/release +0 -205
  144. data/bin/setup +0 -8
  145. data/bin/test +0 -75
  146. data/jest.config.js +0 -19
  147. data/jest.setup.js +0 -8
  148. data/lib/generators/shadcn/component/component_generator.rb +0 -188
  149. data/lib/generators/shadcn/theme/theme_generator.rb +0 -128
  150. data/package-lock.json +0 -7438
  151. data/package.json +0 -71
  152. data/rollup.config.js +0 -29
data/PROGRESS.md DELETED
@@ -1,495 +0,0 @@
1
- # shadcn-rails Documentation Progress
2
-
3
- ---
4
-
5
- ## Component Parity Audit (vs shadcn/ui)
6
-
7
- Reference: https://ui.shadcn.com/docs/components
8
-
9
- ### ✅ Implemented Components (57/59)
10
-
11
- | Component | shadcn/ui Docs | Status |
12
- |-----------|----------------|--------|
13
- | Accordion | [docs](https://ui.shadcn.com/docs/components/accordion) | ✅ Complete |
14
- | Alert | [docs](https://ui.shadcn.com/docs/components/alert) | ✅ Complete |
15
- | Alert Dialog | [docs](https://ui.shadcn.com/docs/components/alert-dialog) | ✅ Complete |
16
- | Aspect Ratio | [docs](https://ui.shadcn.com/docs/components/aspect-ratio) | ✅ Complete |
17
- | Avatar | [docs](https://ui.shadcn.com/docs/components/avatar) | ✅ Complete |
18
- | Badge | [docs](https://ui.shadcn.com/docs/components/badge) | ✅ Complete |
19
- | Breadcrumb | [docs](https://ui.shadcn.com/docs/components/breadcrumb) | ✅ Complete |
20
- | Button | [docs](https://ui.shadcn.com/docs/components/button) | ✅ Complete |
21
- | Button Group | N/A | ✅ Complete |
22
- | Calendar | [docs](https://ui.shadcn.com/docs/components/calendar) | ✅ Complete |
23
- | Card | [docs](https://ui.shadcn.com/docs/components/card) | ✅ Complete |
24
- | Carousel | [docs](https://ui.shadcn.com/docs/components/carousel) | ✅ Complete |
25
- | Checkbox | [docs](https://ui.shadcn.com/docs/components/checkbox) | ✅ Complete |
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 |
31
- | Dialog | [docs](https://ui.shadcn.com/docs/components/dialog) | ✅ Complete |
32
- | Drawer | [docs](https://ui.shadcn.com/docs/components/drawer) | ✅ Complete (animations added) |
33
- | Dropdown Menu | [docs](https://ui.shadcn.com/docs/components/dropdown-menu) | ✅ Complete |
34
- | Empty | N/A | ✅ Complete |
35
- | Field | N/A | ✅ Complete |
36
- | Hover Card | [docs](https://ui.shadcn.com/docs/components/hover-card) | ✅ Complete |
37
- | Input | [docs](https://ui.shadcn.com/docs/components/input) | ✅ Complete |
38
- | Input Group | N/A | ✅ Complete |
39
- | Input OTP | [docs](https://ui.shadcn.com/docs/components/input-otp) | ✅ Complete |
40
- | Item | N/A | ✅ Complete |
41
- | Kbd | N/A | ✅ Complete |
42
- | Label | [docs](https://ui.shadcn.com/docs/components/label) | ✅ Complete |
43
- | Menubar | [docs](https://ui.shadcn.com/docs/components/menubar) | ✅ Complete |
44
- | Native Select | N/A | ✅ Complete |
45
- | Navigation Menu | [docs](https://ui.shadcn.com/docs/components/navigation-menu) | ✅ Complete |
46
- | Pagination | [docs](https://ui.shadcn.com/docs/components/pagination) | ✅ Complete |
47
- | Popover | [docs](https://ui.shadcn.com/docs/components/popover) | ✅ Complete |
48
- | Progress | [docs](https://ui.shadcn.com/docs/components/progress) | ✅ Complete |
49
- | Radio Group | [docs](https://ui.shadcn.com/docs/components/radio-group) | ✅ Complete |
50
- | Resizable | [docs](https://ui.shadcn.com/docs/components/resizable) | ✅ Complete |
51
- | Scroll Area | [docs](https://ui.shadcn.com/docs/components/scroll-area) | ✅ Complete |
52
- | Select | [docs](https://ui.shadcn.com/docs/components/select) | ✅ Complete |
53
- | Separator | [docs](https://ui.shadcn.com/docs/components/separator) | ✅ Complete |
54
- | Sheet | [docs](https://ui.shadcn.com/docs/components/sheet) | ✅ Complete |
55
- | Sidebar | [docs](https://ui.shadcn.com/docs/components/sidebar) | ✅ Complete |
56
- | Skeleton | [docs](https://ui.shadcn.com/docs/components/skeleton) | ✅ Complete |
57
- | Slider | [docs](https://ui.shadcn.com/docs/components/slider) | ✅ Complete |
58
- | Spinner | N/A | ✅ Complete |
59
- | Switch | [docs](https://ui.shadcn.com/docs/components/switch) | ✅ Complete |
60
- | Table | [docs](https://ui.shadcn.com/docs/components/table) | ✅ Complete |
61
- | Tabs | [docs](https://ui.shadcn.com/docs/components/tabs) | ✅ Complete |
62
- | Textarea | [docs](https://ui.shadcn.com/docs/components/textarea) | ✅ Complete |
63
- | Toast | [docs](https://ui.shadcn.com/docs/components/toast) | ✅ Complete |
64
- | Toggle | [docs](https://ui.shadcn.com/docs/components/toggle) | ✅ Complete |
65
- | Toggle Group | [docs](https://ui.shadcn.com/docs/components/toggle-group) | ✅ Complete |
66
- | Tooltip | [docs](https://ui.shadcn.com/docs/components/tooltip) | ✅ Complete |
67
- | Typography | N/A | ✅ Complete |
68
-
69
- ### ❌ Missing Components (2/59)
70
-
71
- | Component | shadcn/ui Docs | Priority | Complexity | Notes |
72
- |-----------|----------------|----------|------------|-------|
73
- | Data Table | [docs](https://ui.shadcn.com/docs/components/data-table) | Medium | High | Sortable, filterable data grid |
74
- | Chart | [docs](https://ui.shadcn.com/docs/components/chart) | Low | High | Requires charting library |
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
-
80
- ### ✅ Recently Implemented
81
- | Component | Status | Notes |
82
- |-----------|--------|-------|
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 |
91
- | Command | ✅ Complete | Command palette with search, keyboard navigation, dialog variant |
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 |
95
-
96
- ### Priority Roadmap
97
-
98
- #### Phase 1: Quick Wins (Low complexity, high value) ✅ COMPLETED
99
- These can be implemented quickly and provide immediate value:
100
- 1. ~~**Button Group** - Simple wrapper component~~ ✅
101
- 2. ~~**Field** - Form field wrapper (label + input + error)~~ ✅
102
- 3. ~~**Input Group** - Input with prefix/suffix icons~~ ✅
103
- 4. ~~**Kbd** - Keyboard shortcut display~~ ✅
104
- 5. ~~**Spinner** - Loading animation~~ ✅
105
- 6. ~~**Typography** - Prose/text styles~~ ✅
106
-
107
- #### Phase 2: Form Ecosystem ✅ COMPLETED
108
- Build out form-related components:
109
- 1. ~~**Form** - Rails form builder integration~~ (using Field component)
110
- 2. ~~**Native Select** - Styled native select~~ ✅
111
- 3. ~~**Input OTP** - One-time password input~~ ✅
112
-
113
- #### Phase 3: Navigation & Layout
114
- Essential for app-like experiences:
115
- 1. **Navigation Menu** - Site navigation with dropdowns
116
- 2. **Sidebar** - App sidebar layout
117
- 3. **Menubar** - Desktop menu bar
118
- 4. **Context Menu** - Right-click menus
119
-
120
- #### Phase 4: Advanced Interactive Components
121
- Complex components requiring significant Stimulus work:
122
- 1. **Combobox** - Autocomplete/searchable select
123
- 2. **Command** - Command palette (cmd+k pattern)
124
- 3. **Calendar** - Date selection grid
125
- 4. **Date Picker** - Calendar + Popover composition
126
- 5. **Resizable** - Draggable panel resizing
127
- 6. **Carousel** - Image/content slider
128
-
129
- #### Phase 5: Data & Visualization
130
- Components for displaying data:
131
- 1. **Data Table** - Sortable, filterable tables
132
- 2. **Chart** - Data visualization (may skip, Rails apps often use Chartkick/etc)
133
-
134
- #### Likely to Skip
135
- - **Empty** - Easy to build custom, low standardization value
136
- - **Item** - Very generic, apps will customize heavily
137
- - **Sonner** - We already have Toast component
138
-
139
- ---
140
-
141
- ## Feature Parity Analysis (Implemented Components)
142
-
143
- Detailed comparison of our implementations vs shadcn/ui features.
144
-
145
- ### ✅ Full Parity (No Action Needed)
146
-
147
- | Component | Notes |
148
- |-----------|-------|
149
- | **Button** | All 6 variants, 6 sizes, loading state, href support ✅ |
150
- | **Dialog** | All slots (trigger, content, header, title, description, footer, close) ✅ |
151
- | **Accordion** | Single/multiple types, collapsible, default_value ✅ |
152
- | **Tabs** | TabsList, TabsTrigger, TabsContent, defaultValue ✅ |
153
- | **Alert** | default/destructive variants, title/description/icon slots ✅ |
154
- | **Badge** | All 4 variants (default, secondary, destructive, outline) ✅ |
155
- | **Toggle** | default/outline variants, sm/default/lg sizes, disabled ✅ |
156
- | **Toggle Group** | Single/multiple types, variants, sizes ✅ |
157
- | **Checkbox** | checked, disabled, indeterminate, form integration ✅ |
158
- | **Switch** | Basic toggle with label support ✅ |
159
- | **Slider** | value, min, max, step, disabled ✅ |
160
- | **Progress** | value prop, styling ✅ |
161
- | **Tooltip** | side, align, delay_duration, skip_delay_duration ✅ |
162
- | **Sheet** | All 4 sides (top, right, bottom, left), all slots ✅ |
163
- | **Card** | header, title, description, content, footer slots ✅ |
164
- | **Input** | type, placeholder, disabled, required ✅ |
165
- | **Textarea** | placeholder, disabled, rows ✅ |
166
- | **Label** | for attribute, styling ✅ |
167
- | **Separator** | horizontal/vertical orientation ✅ |
168
- | **Skeleton** | Basic skeleton loading ✅ |
169
- | **Avatar** | src, alt, fallback ✅ |
170
- | **Aspect Ratio** | ratio prop ✅ |
171
- | **Scroll Area** | Custom scrollbar styling ✅ |
172
- | **Table** | header, body, footer, row, cell, caption ✅ |
173
- | **Breadcrumb** | items, separator ✅ |
174
- | **Collapsible** | open, trigger, content ✅ |
175
- | **Alert Dialog** | All slots, cancel/action buttons ✅ |
176
- | **Hover Card** | trigger, content, positioning ✅ |
177
- | **Popover** | trigger, content, positioning ✅ |
178
- | **Radio Group** | items, disabled, default value ✅ |
179
- | **Select** | trigger, content, items, groups, separators ✅ |
180
- | **Pagination** | items, previous, next, ellipsis ✅ |
181
-
182
- ### ⚠️ Partial Parity (Features Missing)
183
-
184
- | Component | Our Implementation | Missing from shadcn/ui |
185
- |-----------|-------------------|------------------------|
186
- | **Dropdown Menu** | Basic items, labels, separators, groups | ❌ Checkbox items, ❌ Radio items, ❌ Submenus, ❌ Keyboard shortcut display |
187
- | **Drawer** | Full drawer with 4 directions and CSS animations | ❌ Swipe/gesture support (like Vaul) - planned future enhancement |
188
- | **Toast** | Basic toast with variants | Note: shadcn/ui deprecated Toast in favor of Sonner (React-specific). Our implementation is appropriate for Rails. |
189
-
190
- ### 📋 Feature Gap TODOs
191
-
192
- **Dropdown Menu Enhancements:**
193
- - [ ] Add `DropdownMenuCheckboxItem` - checkbox items within menu
194
- - [ ] Add `DropdownMenuRadioGroup` and `DropdownMenuRadioItem` - radio selection
195
- - [ ] Add `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` - nested submenus
196
- - [ ] Add keyboard shortcut display in menu items
197
- - Reference: https://ui.shadcn.com/docs/components/dropdown-menu
198
-
199
- **Drawer Enhancements:**
200
- - [ ] Add swipe/gesture support for mobile (slide to close)
201
- - [ ] Add responsive pattern example (Drawer on mobile, Dialog on desktop using media queries)
202
- - [ ] Consider snap points for partial drawer states
203
- - Reference: https://ui.shadcn.com/docs/components/drawer
204
-
205
- ---
206
-
207
- ## Completed Phases
208
-
209
- ### Phase 1: Docs Layout & Partials ✅
210
- - Created `docs_controller.rb` with component metadata
211
- - Created docs layout with sidebar navigation
212
- - Created reusable partials: `_code_example`, `_props_table`, `_demo_card`, `_stimulus_docs`
213
-
214
- ### Phase 2: Key Component Templates ✅
215
- - Button, Dialog, Tabs, Pagination documentation pages
216
-
217
- ### Phase 2b: File-based Code Examples ✅
218
- - Created `erb_example` helper for loading code examples from files
219
- - Solved ERB escaping issues
220
-
221
- ### Phase 2c: Convert Pages to File-based Examples ✅
222
- - All pages now use file-based code examples
223
-
224
- ### Phase 3: All Component Documentation Pages ✅
225
- Generated 35 component documentation pages:
226
- - Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar
227
- - Badge, Breadcrumb, Button, Card, Checkbox
228
- - Collapsible, Dialog, Drawer, Dropdown Menu, Hover Card
229
- - Input, Label, Pagination, Popover, Progress
230
- - Radio Group, Scroll Area, Select, Separator, Sheet
231
- - Skeleton, Slider, Switch, Table, Tabs
232
- - Textarea, Toast, Toggle, Toggle Group, Tooltip
233
-
234
- ### Bug Fixes ✅
235
- - Fixed Pagination component ordering bug (ellipses rendering after items)
236
- - Added regression tests for pagination ordering
237
- - Fixed CardComponent `with_content` method alias (was `with_content_slot`)
238
-
239
- ### Testing (Playwright) ✅
240
- - Verified all 35 component documentation pages load correctly
241
- - Tested interactive components:
242
- - Dialog: Opens with form fields, close button works
243
- - Accordion: Expands/collapses items correctly
244
- - Checkbox: Toggles checked state
245
- - All sidebar navigation links work
246
-
247
- ### Phase 5: Pagination Gem Integration ✅
248
- - Added Kaminari integration examples with controller and view code
249
- - Added will_paginate integration examples
250
- - Added Pagy integration examples
251
- - Added documentation for URL builder pattern
252
- - Added examples for window sizes and disabled states
253
-
254
- ### Phase 6: README Updates ✅
255
- - Documented JavaScript bundler setup (esbuild, importmap, webpack, Vite)
256
- - Added TypeScript configuration guide
257
- - Updated installation instructions
258
- - Added comprehensive component documentation with API references
259
-
260
- ### Phase 7: Documentation Site Evaluation ✅
261
- - Evaluated Bridgetown approach vs current Rails dummy app
262
- - **Decision**: Continue with Rails dummy app approach
263
- - Already functional and deployed locally
264
- - Renders actual shadcn-rails components
265
- - No separate build/deployment pipeline needed
266
- - Can be deployed to any Rails hosting (Heroku, Render, Fly.io)
267
- - Deferred Bridgetown as optional future enhancement for static SEO-friendly site
268
-
269
- ---
270
-
271
- ### Phase 4: Lookbook Previews ✅
272
- All 35 components now have Lookbook previews:
273
- - Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar
274
- - Badge, Breadcrumb, Button, Card, Checkbox
275
- - Collapsible, Dialog, Drawer, Dropdown Menu, Hover Card
276
- - Input, Label, Pagination, Popover, Progress
277
- - Radio Group, Scroll Area, Select, Separator, Sheet
278
- - Skeleton, Slider, Switch, Table, Tabs
279
- - Textarea, Toast, Toggle, Toggle Group, Tooltip
280
-
281
- ---
282
-
283
- ## Pending Phases
284
-
285
- ### Phase 8: Documentation Website Deployment
286
- - Deploy documentation site to production URL
287
- - Set up CI/CD for docs
288
- - Configure custom domain (optional)
289
-
290
- ---
291
-
292
- ## Known Issues & TODOs
293
-
294
- ### Dropdown Menu Component
295
- - [ ] **TODO**: Add checkbox items (`DropdownMenuCheckboxItem`)
296
- - [ ] **TODO**: Add radio items (`DropdownMenuRadioGroup`, `DropdownMenuRadioItem`)
297
- - [ ] **TODO**: Add submenus (`DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`)
298
- - [ ] **TODO**: Add keyboard shortcut display in menu items
299
- - Reference: https://ui.shadcn.com/docs/components/dropdown-menu
300
-
301
- ### Toast Component
302
- - [x] **BUG FIXED**: Toasts are now auto-closing/dismissing
303
- - [x] Close button functionality verified and working
304
- - [x] Auto-dismiss timer working (default 5000ms)
305
- - Note: Library exports ToastController in `index.js`. Docs layout uses inline controllers for CDN demo only.
306
- - Reference: https://ui.shadcn.com/docs/components/toast
307
-
308
- ### Drawer Component
309
- - [ ] **TODO**: Add mobile gesture support (slide/swipe to close)
310
- - [ ] Add responsive drawer example (drawer on mobile, dialog on desktop)
311
- - [ ] Consider snap points for partial drawer states
312
- - Reference: https://ui.shadcn.com/docs/components/drawer
313
-
314
- ### Stimulus Controllers (Library)
315
- **Status**: All 20 interactive components have controllers in `app/assets/javascripts/shadcn/controllers/`
316
-
317
- | Controller | File | Exported in index.js |
318
- |------------|------|---------------------|
319
- | Accordion | accordion_controller.js | ✅ |
320
- | Avatar | avatar_controller.js | ✅ |
321
- | Checkbox | checkbox_controller.js | ✅ |
322
- | Collapsible | collapsible_controller.js | ✅ |
323
- | Dialog | dialog_controller.js | ✅ |
324
- | Drawer | drawer_controller.js | ✅ |
325
- | Dropdown | dropdown_controller.js | ✅ |
326
- | HoverCard | hover_card_controller.js | ✅ |
327
- | Popover | popover_controller.js | ✅ |
328
- | RadioGroup | radio_group_controller.js | ✅ |
329
- | ScrollArea | scroll_area_controller.js | ✅ |
330
- | Select | select_controller.js | ✅ |
331
- | Sheet | sheet_controller.js | ✅ |
332
- | Slider | slider_controller.js | ✅ |
333
- | Switch | switch_controller.js | ✅ |
334
- | Tabs | tabs_controller.js | ✅ |
335
- | Toast | toast_controller.js | ✅ |
336
- | Toggle | toggle_controller.js | ✅ |
337
- | ToggleGroup | toggle_group_controller.js | ✅ |
338
- | Tooltip | tooltip_controller.js | ✅ |
339
-
340
- **User Installation**: Users must call `registerShadcnControllers(application)` to register all controllers.
341
-
342
- **Controller Verification (COMPLETED)**:
343
- - [x] All 20 controllers exist and match their components
344
- - [x] Targets, values, and actions verified for: accordion, checkbox, dialog, toast, tooltip
345
- - [x] Engine exposes JavaScript assets via asset paths
346
- - [x] Importmap configuration in gem (`config/importmap.rb`)
347
- - [x] Install generator sets up both importmap and bundler approaches
348
- - [ ] TODO: Create integration test that verifies all controllers load in fresh Rails app
349
-
350
- ### Testing Notes
351
- - All interactive components use Stimulus controllers
352
- - Test keyboard navigation for accessibility
353
- - Test disabled states render correctly
354
- - Test mobile responsiveness
355
-
356
- ---
357
-
358
- ## Lookbook Previews Status ✅
359
-
360
- **All 35 Components Have Previews:**
361
- - Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar
362
- - Badge, Breadcrumb, Button, Card, Checkbox
363
- - Collapsible, Dialog, Drawer, Dropdown Menu, Hover Card
364
- - Input, Label, Pagination, Popover, Progress
365
- - Radio Group, Scroll Area, Select, Separator, Sheet
366
- - Skeleton, Slider, Switch, Table, Tabs
367
- - Textarea, Toast, Toggle, Toggle Group, Tooltip
368
-
369
- ---
370
-
371
- ## Documentation Site Research
372
-
373
- **Recommendation**: Two-phase approach
374
-
375
- **Phase 1 (Immediate)**: Expand Lookbook + dummy app
376
- - Already installed, minimal effort
377
- - Great for developer reference
378
- - Deploy dummy app to accessible URL
379
-
380
- **Phase 2 (Medium-term)**: Bridgetown static site
381
- - Ruby-native, ViewComponent plugin available
382
- - Static output, SEO-friendly
383
- - Can render actual shadcn-rails components
384
- - Better for public-facing documentation
385
-
386
- ---
387
-
388
- ## Component Testing Checklist
389
-
390
- When testing documentation pages:
391
- 1. Page loads without errors
392
- 2. Demo cards render components correctly
393
- 3. Interactive components (buttons, toggles, etc.) work
394
- 4. Code examples display properly
395
- 5. Navigation links work
396
- 6. Responsive layout works
397
-
398
- ---
399
-
400
- ## File Locations
401
-
402
- - Documentation pages: `test/dummy/app/views/docs/`
403
- - Code examples: `test/dummy/app/code_examples/`
404
- - Components: `app/components/shadcn/`
405
- - Stimulus controllers: `app/assets/javascripts/shadcn/controllers/`
406
- - Stylesheets: `app/assets/stylesheets/shadcn/`
407
- - `base.css` - CSS variables, theme colors, animations
408
- - `components.css` - Component-specific styles (data-state, sliders, etc.)
409
- - `index.css` - Combined import for both files
410
- - `themes/*.css` - Theme presets (slate, stone, zinc, gray)
411
- - Lookbook previews: `test/components/previews/`
412
-
413
- ---
414
-
415
- ## TypeScript Discussion
416
-
417
- ### Current State
418
- All Stimulus controllers are written in plain JavaScript. This matches the Rails ecosystem's general approach.
419
-
420
- ### Should We Port to TypeScript?
421
-
422
- **Arguments FOR TypeScript:**
423
- - Better IDE support with autocomplete for targets, values, actions
424
- - Catch type errors at compile time
425
- - Self-documenting code with explicit types
426
- - Modern JS ecosystem trend
427
- - Easier for TypeScript-heavy teams to contribute
428
-
429
- **Arguments AGAINST TypeScript:**
430
- - Rails ecosystem predominantly uses plain JavaScript
431
- - Adds build complexity for consumers
432
- - Stimulus controllers are small and well-tested
433
- - Most Rails projects use importmaps (no build step) or simple bundlers
434
- - Would require shipping both .ts source and compiled .js
435
-
436
- **Recommendation: Provide TypeScript Definitions Only**
437
- - Keep source in JavaScript for maximum compatibility
438
- - Ship `.d.ts` type definition files alongside JavaScript
439
- - Users get IDE support without requiring TypeScript compilation
440
- - Follow the pattern of many npm packages
441
-
442
- **Type Definition Locations:**
443
- ```
444
- app/assets/javascripts/shadcn/
445
- ├── index.js
446
- ├── index.d.ts # Main type definitions
447
- ├── controllers/
448
- │ ├── dialog_controller.js
449
- │ ├── dialog_controller.d.ts
450
- │ ├── tabs_controller.js
451
- │ ├── tabs_controller.d.ts
452
- │ └── ...
453
- ```
454
-
455
- **Example Type Definition (dialog_controller.d.ts):**
456
- ```typescript
457
- import { Controller } from "@hotwired/stimulus"
458
-
459
- export default class DialogController extends Controller {
460
- static targets: ["trigger", "overlay", "content", "close"]
461
- static values: { open: { type: "Boolean", default: false } }
462
-
463
- triggerTarget: HTMLElement
464
- overlayTarget: HTMLElement
465
- contentTarget: HTMLElement
466
- closeTarget: HTMLElement
467
- openValue: boolean
468
-
469
- open(): void
470
- close(): void
471
- toggle(): void
472
- }
473
- ```
474
-
475
- ### TODO: Type Definitions ✅
476
- - [x] Create index.d.ts with registerShadcnControllers type
477
- - [x] Create .d.ts files for all 20 controllers
478
- - [x] Document TypeScript setup in README
479
-
480
- **Created type definition files:**
481
- - `app/assets/javascripts/shadcn/index.d.ts` - Main entry point types
482
- - `app/assets/javascripts/shadcn/controllers/*.d.ts` - Individual controller types (20 files)
483
-
484
- ---
485
-
486
- ## Future Improvements
487
-
488
- - [ ] Add more complex components: Command, Combobox, Date Picker
489
- - [ ] Form builder integration
490
- - [ ] Hotwire/Turbo integration helpers
491
- - [ ] Animation system (CSS transitions)
492
- - [ ] RTL support
493
- - [x] TypeScript definitions for Stimulus controllers (completed)
494
- - [ ] Visual regression tests with Percy or similar
495
- - [ ] Documentation site deployment (Fly.io in progress)
data/Rakefile DELETED
@@ -1,95 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require "bundler/gem_tasks"
4
- require "rake/testtask"
5
-
6
- Rake::TestTask.new(:test) do |t|
7
- t.libs << "test"
8
- t.libs << "lib"
9
- t.test_files = FileList["test/**/*_test.rb"]
10
- t.verbose = true
11
- end
12
-
13
- desc "Run component tests"
14
- Rake::TestTask.new(:test_components) do |t|
15
- t.libs << "test"
16
- t.libs << "lib"
17
- t.test_files = FileList["test/components/**/*_test.rb"]
18
- t.verbose = true
19
- end
20
-
21
- desc "Run generator tests"
22
- Rake::TestTask.new(:test_generators) do |t|
23
- t.libs << "test"
24
- t.libs << "lib"
25
- t.test_files = FileList["test/generators/**/*_test.rb"]
26
- t.verbose = true
27
- end
28
-
29
- task default: :test
30
-
31
- # Release tasks
32
- namespace :release do
33
- desc "Check if versions are in sync between Ruby gem and npm package"
34
- task :check_versions do
35
- ruby_version = File.read("lib/shadcn/rails/version.rb").match(/VERSION = "(.+?)"/)[1]
36
- npm_version = JSON.parse(File.read("package.json"))["version"]
37
-
38
- puts "Ruby gem version: #{ruby_version}"
39
- puts "npm package version: #{npm_version}"
40
-
41
- if ruby_version == npm_version
42
- puts "\n✓ Versions are in sync"
43
- else
44
- puts "\n✗ Versions are out of sync!"
45
- exit 1
46
- end
47
- end
48
-
49
- desc "Bump version (usage: rake 'release:bump[patch]' or rake 'release:bump[1.0.0]')"
50
- task :bump, [:type] do |_, args|
51
- type = args[:type] || "patch"
52
- system("bin/bump #{type}")
53
- end
54
-
55
- desc "Bump version without committing (usage: rake 'release:bump_only[patch]')"
56
- task :bump_only, [:type] do |_, args|
57
- type = args[:type] || "patch"
58
- system("bin/bump #{type} --no-commit")
59
- end
60
-
61
- desc "Build both gem and npm package"
62
- task :build do
63
- puts "Building npm package..."
64
- system("npm run build") || abort("npm build failed")
65
-
66
- puts "\nBuilding gem..."
67
- system("gem build shadcn-rails.gemspec") || abort("gem build failed")
68
-
69
- puts "\n✓ Both packages built successfully"
70
- end
71
-
72
- desc "Run all tests (Ruby and JavaScript)"
73
- task :test do
74
- system("bin/test") || abort("Tests failed")
75
- end
76
-
77
- desc "Prepare for release (check versions, run tests, build packages)"
78
- task prepare: [:check_versions, "release:test", :build]
79
-
80
- desc "Full release (run bin/release script)"
81
- task :publish do
82
- exec("bin/release")
83
- end
84
-
85
- desc "Dry run of release (shows what would happen)"
86
- task :dry_run do
87
- exec("bin/release --dry-run")
88
- end
89
- end
90
-
91
- desc "Show current version"
92
- task :version do
93
- require_relative "lib/shadcn/rails/version"
94
- puts Shadcn::Rails::VERSION
95
- end