hakumi_components 0.1.16.pre → 0.1.17.pre

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 (134) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +169 -23
  3. data/app/assets/javascripts/hakumi_components.js +12 -12
  4. data/app/assets/stylesheets/hakumi_components.css +1 -1
  5. data/app/components/hakumi/alert/component.html.erb +12 -8
  6. data/app/components/hakumi/alert/component.rb +18 -62
  7. data/app/components/hakumi/base_component.rb +13 -0
  8. data/app/components/hakumi/card/component.html.erb +14 -22
  9. data/app/components/hakumi/card/component.rb +38 -31
  10. data/app/components/hakumi/checkbox/component.html.erb +39 -21
  11. data/app/components/hakumi/checkbox/component.rb +12 -2
  12. data/app/components/hakumi/collapse/component.html.erb +2 -2
  13. data/app/components/hakumi/collapse/component.rb +1 -1
  14. data/app/components/hakumi/collapse/panel/component.rb +9 -0
  15. data/app/components/hakumi/color_picker/component.rb +0 -4
  16. data/app/components/hakumi/drawer/component.html.erb +7 -7
  17. data/app/components/hakumi/drawer/component.rb +12 -19
  18. data/app/components/hakumi/input/component.rb +0 -2
  19. data/app/components/hakumi/input/text_area/component.rb +0 -2
  20. data/app/components/hakumi/input_number/component.rb +3 -4
  21. data/app/components/hakumi/mentions/component.rb +0 -1
  22. data/app/components/hakumi/modal/component.html.erb +40 -0
  23. data/app/components/hakumi/modal/component.rb +24 -102
  24. data/app/components/hakumi/modal/confirm/component.html.erb +23 -0
  25. data/app/components/hakumi/modal/confirm/component.rb +23 -41
  26. data/app/components/hakumi/modal/error/component.rb +12 -11
  27. data/app/components/hakumi/modal/info/component.rb +12 -11
  28. data/app/components/hakumi/modal/success/component.rb +12 -11
  29. data/app/components/hakumi/modal/warning/component.rb +15 -10
  30. data/app/components/hakumi/popconfirm/component.html.erb +25 -25
  31. data/app/components/hakumi/popconfirm/component.rb +11 -27
  32. data/app/components/hakumi/rate/component.rb +0 -1
  33. data/app/components/hakumi/segmented/component.rb +0 -4
  34. data/app/components/hakumi/slider/component.rb +2 -6
  35. data/app/components/hakumi/statistic/component.rb +0 -4
  36. data/app/components/hakumi/switch/component.html.erb +4 -0
  37. data/app/components/hakumi/switch/component.rb +1 -2
  38. data/app/components/hakumi/table/component.rb +3 -229
  39. data/app/components/hakumi/table/concerns/columns.rb +1 -1
  40. data/app/components/hakumi/table/concerns/editable.rb +121 -0
  41. data/app/components/hakumi/table/concerns/ellipsis.rb +63 -0
  42. data/app/components/hakumi/table/concerns/fixed_columns.rb +87 -0
  43. data/app/components/hakumi/transfer/component.rb +0 -4
  44. data/app/controllers/{hakumi_components → hakumi}/components_controller.rb +2 -2
  45. data/app/form_builders/hakumi/form_builder.rb +217 -175
  46. data/app/helpers/hakumi/form_helper.rb +39 -0
  47. data/app/javascript/hakumi_components/controllers/base/registry_controller.js +83 -3
  48. data/app/javascript/hakumi_components/controllers/hakumi/affix_controller.js +0 -23
  49. data/app/javascript/hakumi_components/controllers/hakumi/alert_controller.js +2 -1
  50. data/app/javascript/hakumi_components/controllers/hakumi/button_controller.js +0 -7
  51. data/app/javascript/hakumi_components/controllers/hakumi/calendar_controller.js +0 -2
  52. data/app/javascript/hakumi_components/controllers/hakumi/color_picker_controller.js +1 -6
  53. data/app/javascript/hakumi_components/controllers/hakumi/date_picker_controller.js +28 -34
  54. data/app/javascript/hakumi_components/controllers/hakumi/drawer_controller.js +2 -1
  55. data/app/javascript/hakumi_components/controllers/hakumi/form_item_controller.js +9 -63
  56. data/app/javascript/hakumi_components/controllers/hakumi/mentions_controller.js +4 -11
  57. data/app/javascript/hakumi_components/controllers/hakumi/message_controller.js +1 -1
  58. data/app/javascript/hakumi_components/controllers/hakumi/modal_controller.js +4 -20
  59. data/app/javascript/hakumi_components/controllers/hakumi/notification_controller.js +1 -1
  60. data/app/javascript/hakumi_components/controllers/hakumi/popconfirm_controller.js +33 -27
  61. data/app/javascript/hakumi_components/controllers/hakumi/popover_controller.js +2 -23
  62. data/app/javascript/hakumi_components/controllers/hakumi/qr_code_controller.js +0 -20
  63. data/app/javascript/hakumi_components/controllers/hakumi/segmented_controller.js +0 -2
  64. data/app/javascript/hakumi_components/controllers/hakumi/spin_controller.js +1 -19
  65. data/app/javascript/hakumi_components/controllers/hakumi/statistic_controller.js +0 -2
  66. data/app/javascript/hakumi_components/controllers/hakumi/table_controller.js +48 -74
  67. data/app/javascript/hakumi_components/controllers/hakumi/tag_controller.js +15 -14
  68. data/app/javascript/hakumi_components/controllers/hakumi/tag_group_controller.js +14 -13
  69. data/app/javascript/hakumi_components/controllers/hakumi/theme_controller.js +24 -1
  70. data/app/javascript/hakumi_components/controllers/hakumi/time_picker_controller.js +3 -7
  71. data/app/javascript/hakumi_components/controllers/hakumi/timeline_controller.js +0 -16
  72. data/app/javascript/hakumi_components/controllers/hakumi/transfer_controller.js +2 -2
  73. data/app/javascript/hakumi_components/controllers/hakumi/tree_controller.js +0 -2
  74. data/app/javascript/hakumi_components/controllers/hakumi/tree_select_controller.js +3 -3
  75. data/app/javascript/hakumi_components/controllers/hakumi/upload_controller.js +12 -26
  76. data/app/javascript/hakumi_components/core/persistence.js +3 -3
  77. data/app/javascript/hakumi_components/core/render_component.js +3 -1
  78. data/app/javascript/lib/validation_manager.js +101 -0
  79. data/app/javascript/stylesheets/_theme-tokens.scss +2 -1
  80. data/app/javascript/stylesheets/components/_modal.scss +13 -0
  81. data/app/services/{hakumi_components → hakumi}/component_handler.rb +1 -1
  82. data/app/services/hakumi/icon/loader.rb +2 -2
  83. data/app/services/hakumi/illustrations/loader.rb +3 -3
  84. data/app/views/hakumi/_drawer.html.erb +21 -0
  85. data/app/views/hakumi/_modal.html.erb +18 -0
  86. data/lib/hakumi_components/documentation.rb +127 -0
  87. data/lib/hakumi_components/engine.rb +13 -4
  88. data/lib/hakumi_components/rails/attribute_introspection.rb +1 -1
  89. data/lib/hakumi_components/rails/validation_introspection.rb +5 -5
  90. data/lib/hakumi_components/rails/validation_mapper.rb +484 -0
  91. data/lib/hakumi_components/rails.rb +2 -1
  92. data/lib/hakumi_components/version.rb +2 -2
  93. data/lib/hakumi_components.rb +3 -1
  94. data/lib/tasks/coverage.rake +37 -0
  95. data/sig/hakumi/base_component.rbs +5 -0
  96. data/sig/hakumi/checkbox/component.rbs +10 -0
  97. data/sig/hakumi/color_picker/component.rbs +0 -1
  98. data/sig/hakumi/form_builder.rbs +9 -1
  99. data/sig/{hakumi_components → hakumi}/rails/attribute_introspection.rbs +1 -1
  100. data/sig/{hakumi_components → hakumi}/rails/validation_introspection.rbs +1 -1
  101. data/sig/hakumi/rails/validation_mapper.rbs +53 -0
  102. data/sig/{hakumi_components → hakumi}/rails.rbs +1 -1
  103. data/sig/hakumi/segmented/component.rbs +0 -1
  104. data/sig/hakumi/slider/component.rbs +0 -1
  105. data/sig/hakumi/statistic/component.rbs +0 -2
  106. data/sig/hakumi/table/component.rbs +3 -4
  107. data/sig/hakumi/table/concerns/columns.rbs +2 -1
  108. data/sig/hakumi/table/concerns/editable.rbs +40 -0
  109. data/sig/hakumi/table/concerns/ellipsis.rbs +27 -0
  110. data/sig/hakumi/table/concerns/fixed_columns.rbs +33 -0
  111. data/sig/hakumi/transfer/component.rbs +0 -1
  112. data/sig/{hakumi_components.rbs → hakumi.rbs} +20 -3
  113. data/sig/rails/active_model/validations/comparison_validator.rbs +6 -0
  114. metadata +44 -29
  115. data/app/views/hakumi_components/_drawer.html.erb +0 -3
  116. data/app/views/hakumi_components/_modal.html.erb +0 -3
  117. /data/app/views/{hakumi_components → hakumi}/_admin_panel.html.erb +0 -0
  118. /data/app/views/{hakumi_components → hakumi}/_affix.html.erb +0 -0
  119. /data/app/views/{hakumi_components → hakumi}/_alert.html.erb +0 -0
  120. /data/app/views/{hakumi_components → hakumi}/_confirm.html.erb +0 -0
  121. /data/app/views/{hakumi_components → hakumi}/_message.html.erb +0 -0
  122. /data/app/views/{hakumi_components → hakumi}/_notification.html.erb +0 -0
  123. /data/app/views/{hakumi_components → hakumi}/_popconfirm.html.erb +0 -0
  124. /data/app/views/{hakumi_components → hakumi}/_popover.html.erb +0 -0
  125. /data/app/views/{hakumi_components → hakumi}/_qr_code.html.erb +0 -0
  126. /data/app/views/{hakumi_components → hakumi}/_result.html.erb +0 -0
  127. /data/app/views/{hakumi_components → hakumi}/_segmented.html.erb +0 -0
  128. /data/app/views/{hakumi_components → hakumi}/_skeleton.html.erb +0 -0
  129. /data/app/views/{hakumi_components → hakumi}/_spin.html.erb +0 -0
  130. /data/app/views/{hakumi_components → hakumi}/_statistic.html.erb +0 -0
  131. /data/app/views/{hakumi_components → hakumi}/_table.html.erb +0 -0
  132. /data/app/views/{hakumi_components → hakumi}/_tag.html.erb +0 -0
  133. /data/app/views/{hakumi_components → hakumi}/_timeline.html.erb +0 -0
  134. /data/app/views/{hakumi_components → hakumi}/_tree.html.erb +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3a8dd617e9d2de8d3db3296397eb5f8d452ad1632b5021033951a063cf2638f1
4
- data.tar.gz: e0c7cd5b4e0a481780bfd23d21484f868f27af1634cf16fd68a6411479843980
3
+ metadata.gz: 266fdc5f238c66ebd468b2d65efc3293197442f23f724a6685aa27f76c719b80
4
+ data.tar.gz: 50c5490c4f78725878a12a517ff9de18e8c376922e47df1dcc9a6c9783e1a7d2
5
5
  SHA512:
6
- metadata.gz: d877aebe66b66b309762d09077ebe6ac27c89a7a0c9a25d8af8b8bcf97ef1a266ac88a025df216a985354b2018f6240b1a941b6b557838c318e1488beaef17bb
7
- data.tar.gz: d2f887ac18633b53d081442a81a9cb4753af33020a189a5056893cbf315b69ac52f5e213dbec740775caee9ff385629a71c4aa3e4660d452960fc16132c22bb6
6
+ metadata.gz: b0bf88beaabfa3c7cbd2bfbe8018f17f78c6426626ce02e7fa25930f9d006aa6a39929388311ee22ba4e4f84a3f973495224f1a307251b26cb264c8878d7885c
7
+ data.tar.gz: 130f98a4e79a8262acf6113ca5738078a236cf2baf6a2fc809248eeb0e699a192670d06809144d1bcffc6613caede8bba045ed33a26ff82b8da2b34795218699
data/README.md CHANGED
@@ -20,10 +20,10 @@
20
20
 
21
21
  ## About The Project
22
22
 
23
- Hakumi Components is a comprehensive UI component library for Ruby on Rails applications, inspired by Ant Design. It provides 55+ production-ready, accessible components with light/dark theme support, combining the power of ViewComponent, Stimulus, and modern CSS.
23
+ Hakumi Components is a comprehensive UI component library for Ruby on Rails applications, inspired by Ant Design. It provides 65 production-ready, accessible components with light/dark theme support, combining the power of ViewComponent, Stimulus, and modern CSS.
24
24
 
25
25
  **✨ Key Features:**
26
- - 🎨 **55+ Components** - Button, Form, Table, Modal, Menu, Calendar, and more
26
+ - 🎨 **65 Components** - Button, Form, Table, Modal, Menu, Calendar, and more
27
27
  - 🌓 **Light/Dark Theme** - Built-in theme support with CSS variables
28
28
  - 📦 **Rails Engine** - Drop-in integration with ViewComponent
29
29
  - ⚡ **Modern Stack** - Stimulus controllers with clean JavaScript API
@@ -64,7 +64,11 @@ Hakumi Components is a comprehensive UI component library for Ruby on Rails appl
64
64
  **1. Add the gem to your Gemfile:**
65
65
 
66
66
  ```ruby
67
- gem 'hakumi_components', '~> 0.1.0.pre'
67
+ # Always use the latest pre-release version (recommended during development)
68
+ gem 'hakumi_components', '>= 0.1.0.pre'
69
+
70
+ # Or pin to a specific version for stability
71
+ gem 'hakumi_components', '0.1.16.pre'
68
72
  ```
69
73
 
70
74
  **2. Run the installer:**
@@ -92,7 +96,11 @@ If you prefer manual setup or the generator doesn't work for your setup:
92
96
  **1. Add the gem:**
93
97
 
94
98
  ```ruby
95
- gem 'hakumi_components', '~> 0.1.0.pre'
99
+ # Always use the latest pre-release version
100
+ gem 'hakumi_components', '>= 0.1.0.pre'
101
+
102
+ # Or pin to a specific version
103
+ gem 'hakumi_components', '0.1.16.pre'
96
104
  ```
97
105
 
98
106
  **2. Install dependencies:**
@@ -100,11 +108,17 @@ gem 'hakumi_components', '~> 0.1.0.pre'
100
108
  ```bash
101
109
  bundle install
102
110
 
103
- # Using Yarn
111
+ # Using Yarn - latest pre-release
104
112
  yarn add @hakumi-dev/hakumi-components@pre
105
113
 
106
- # Using npm
114
+ # Using Yarn - specific version
115
+ yarn add @hakumi-dev/hakumi-components@0.1.16-pre
116
+
117
+ # Using npm - latest pre-release
107
118
  npm install @hakumi-dev/hakumi-components@pre
119
+
120
+ # Using npm - specific version
121
+ npm install @hakumi-dev/hakumi-components@0.1.16-pre
108
122
  ```
109
123
 
110
124
  **3. Setup JavaScript:**
@@ -164,16 +178,88 @@ Rails.application.config.action_view.default_form_builder = Hakumi::FormBuilder
164
178
  <% end %>
165
179
  ```
166
180
 
167
- ### Component Categories
168
-
169
- - **Layout**: Divider, Flex, Grid, Layout, Space, Splitter
170
- - **Navigation**: Breadcrumb, Dropdown, Menu, Pagination, Steps, Tabs
171
- - **Data Display**: Avatar, Badge, Card, Table, Tag, Timeline, Tooltip, Tree
172
- - **Form Controls**: Button, Checkbox, ColorPicker, DatePicker, Input, Select, Radio, Slider, Switch
173
- - **Feedback**: Alert, Drawer, Message, Modal, Notification, Progress, Spin
174
- - **Typography**: Link, Paragraph, Text, Title
175
-
176
- _For detailed component documentation, please refer to the [Component Guide](#) (coming soon)_
181
+ ### Component Reference
182
+
183
+ Browse all **65 components** organized by category. Each component includes detailed documentation, examples, and API reference.
184
+
185
+ #### General (4)
186
+ - [Button](./app/components/hakumi/button/docs/README.md) - Clickable button element
187
+ - [Float Button](./app/components/hakumi/float_button/docs/README.md) - Floating action button
188
+ - [Icon](./app/components/hakumi/icon/docs/README.md) - Icon display component
189
+ - [Typography](./app/components/hakumi/typography/docs/README.md) - Text styling and formatting
190
+
191
+ #### Layout (6)
192
+ - [Divider](./app/components/hakumi/divider/docs/README.md) - Horizontal or vertical divider line
193
+ - [Flex](./app/components/hakumi/flex/docs/README.md) - Flexbox layout container
194
+ - [Grid](./app/components/hakumi/grid/docs/README.md) - Grid layout system
195
+ - [Layout](./app/components/hakumi/layout/docs/README.md) - Page layout structure
196
+ - [Space](./app/components/hakumi/space/docs/README.md) - Spacing between elements
197
+ - [Splitter](./app/components/hakumi/splitter/docs/README.md) - Resizable split panels
198
+
199
+ #### Navigation (6)
200
+ - [Anchor](./app/components/hakumi/anchor/docs/README.md) - Anchor navigation for page sections
201
+ - [Breadcrumb](./app/components/hakumi/breadcrumb/docs/README.md) - Breadcrumb navigation trail
202
+ - [Dropdown](./app/components/hakumi/dropdown/docs/README.md) - Dropdown menu
203
+ - [Menu](./app/components/hakumi/menu/docs/README.md) - Navigation menu
204
+ - [Pagination](./app/components/hakumi/pagination/docs/README.md) - Pagination controls
205
+ - [Steps](./app/components/hakumi/steps/docs/README.md) - Step-by-step navigation
206
+
207
+ #### Data Entry (18)
208
+ - [Autocomplete](./app/components/hakumi/autocomplete/docs/README.md) - Input with autocomplete suggestions
209
+ - [Cascader](./app/components/hakumi/cascader/docs/README.md) - Cascading selection dropdown
210
+ - [Checkbox](./app/components/hakumi/checkbox/docs/README.md) - Checkbox input
211
+ - [Color Picker](./app/components/hakumi/color_picker/docs/README.md) - Color selection input
212
+ - [Date Picker](./app/components/hakumi/date_picker/docs/README.md) - Date selection input
213
+ - [Form](./app/components/hakumi/form/docs/README.md) - Form wrapper with validation
214
+ - [Input](./app/components/hakumi/input/docs/README.md) - Text input field
215
+ - [Input Number](./app/components/hakumi/input_number/docs/README.md) - Numeric input field
216
+ - [Mentions](./app/components/hakumi/mentions/docs/README.md) - @mentions input
217
+ - [Radio](./app/components/hakumi/radio/docs/README.md) - Radio button input
218
+ - [Rate](./app/components/hakumi/rate/docs/README.md) - Star rating input
219
+ - [Select](./app/components/hakumi/select/docs/README.md) - Dropdown select input
220
+ - [Slider](./app/components/hakumi/slider/docs/README.md) - Range slider input
221
+ - [Switch](./app/components/hakumi/switch/docs/README.md) - Toggle switch input
222
+ - [Time Picker](./app/components/hakumi/time_picker/docs/README.md) - Time selection input
223
+ - [Transfer](./app/components/hakumi/transfer/docs/README.md) - Dual list transfer
224
+ - [Tree Select](./app/components/hakumi/tree_select/docs/README.md) - Tree structure select
225
+ - [Upload](./app/components/hakumi/upload/docs/README.md) - File upload component
226
+
227
+ #### Data Display (20)
228
+ - [Avatar](./app/components/hakumi/avatar/docs/README.md) - User avatar display
229
+ - [Badge](./app/components/hakumi/badge/docs/README.md) - Badge and status dot
230
+ - [Calendar](./app/components/hakumi/calendar/docs/README.md) - Calendar display
231
+ - [Card](./app/components/hakumi/card/docs/README.md) - Card container
232
+ - [Carousel](./app/components/hakumi/carousel/docs/README.md) - Image/content carousel
233
+ - [Collapse](./app/components/hakumi/collapse/docs/README.md) - Collapsible accordion panels
234
+ - [Descriptions](./app/components/hakumi/descriptions/docs/README.md) - Description list display
235
+ - [Empty](./app/components/hakumi/empty/docs/README.md) - Empty state placeholder
236
+ - [Image](./app/components/hakumi/image/docs/README.md) - Image display with preview
237
+ - [Popover](./app/components/hakumi/popover/docs/README.md) - Popover overlay
238
+ - [QR Code](./app/components/hakumi/qr_code/docs/README.md) - QR code generator
239
+ - [Segmented](./app/components/hakumi/segmented/docs/README.md) - Segmented control
240
+ - [Statistic](./app/components/hakumi/statistic/docs/README.md) - Statistic display
241
+ - [Table](./app/components/hakumi/table/docs/README.md) - Data table
242
+ - [Tabs](./app/components/hakumi/tabs/docs/README.md) - Tab navigation
243
+ - [Tag](./app/components/hakumi/tag/docs/README.md) - Tag label
244
+ - [Timeline](./app/components/hakumi/timeline/docs/README.md) - Timeline display
245
+ - [Tooltip](./app/components/hakumi/tooltip/docs/README.md) - Tooltip overlay
246
+ - [Tour](./app/components/hakumi/tour/docs/README.md) - Guided tour
247
+ - [Tree](./app/components/hakumi/tree/docs/README.md) - Tree structure display
248
+
249
+ #### Feedback (10)
250
+ - [Alert](./app/components/hakumi/alert/docs/README.md) - Alert message display
251
+ - [Drawer](./app/components/hakumi/drawer/docs/README.md) - Slide-out drawer panel
252
+ - [Message](./app/components/hakumi/message/docs/README.md) - Global message notification
253
+ - [Modal](./app/components/hakumi/modal/docs/README.md) - Modal dialog
254
+ - [Notification](./app/components/hakumi/notification/docs/README.md) - Notification message
255
+ - [Popconfirm](./app/components/hakumi/popconfirm/docs/README.md) - Confirmation popover
256
+ - [Progress](./app/components/hakumi/progress/docs/README.md) - Progress indicator
257
+ - [Result](./app/components/hakumi/result/docs/README.md) - Result status page
258
+ - [Skeleton](./app/components/hakumi/skeleton/docs/README.md) - Skeleton loading placeholder
259
+ - [Spin](./app/components/hakumi/spin/docs/README.md) - Loading spinner
260
+
261
+ #### Other (1)
262
+ - [Affix](./app/components/hakumi/affix/docs/README.md) - Pin element to viewport
177
263
 
178
264
  ## JavaScript API
179
265
 
@@ -261,13 +347,24 @@ If components don't respond to interactions:
261
347
  ### Version mismatches
262
348
 
263
349
  Keep gem and npm versions in sync:
350
+
351
+ ```ruby
352
+ # Gemfile - pin to specific version
353
+ gem 'hakumi_components', '0.1.16.pre'
354
+ ```
355
+ ```bash
356
+ # package.json - matching version
357
+ yarn add @hakumi-dev/hakumi-components@0.1.16-pre
358
+ ```
359
+
360
+ Or use dynamic versioning to always get the latest:
264
361
  ```ruby
265
- # Gemfile
266
- gem 'hakumi_components', '~> 0.1.15.pre'
362
+ # Gemfile - always latest pre-release
363
+ gem 'hakumi_components', '>= 0.1.0.pre'
267
364
  ```
268
365
  ```bash
269
- # package.json
270
- yarn add @hakumi-dev/hakumi-components@0.1.15-pre
366
+ # package.json - always latest pre-release
367
+ yarn add @hakumi-dev/hakumi-components@pre
271
368
  ```
272
369
 
273
370
  ## Updating
@@ -278,13 +375,62 @@ To update to the latest version:
278
375
  # Update Ruby gem
279
376
  bundle update hakumi_components
280
377
 
281
- # Update npm package (always use latest pre-release)
378
+ # Update npm package to latest pre-release
282
379
  yarn add @hakumi-dev/hakumi-components@pre
283
380
  # or
284
- npm install @hakumi-dev/hakumi-components@pre --save
381
+ npm install @hakumi-dev/hakumi-components@pre
382
+ ```
383
+
384
+ **Version Strategy:**
385
+ - **During development:** Use `>= 0.1.0.pre` (gem) and `@pre` (npm) to always get the latest features
386
+ - **For production:** Pin to a specific version like `0.1.16.pre` for stability
387
+
388
+ **Note:** Currently in pre-release (`0.1.x.pre`). Stable `1.0.0` release coming soon.
389
+
390
+ ## Development
391
+
392
+ ### Local Playground
393
+
394
+ Want to see and test components locally? We have a built-in playground:
395
+
396
+ ```bash
397
+ # From the gem root directory
398
+ bin/playground
399
+ ```
400
+
401
+ Then visit http://localhost:3000 to browse all components and examples.
402
+
403
+ **Features:**
404
+ - 📋 Browse all 65 components
405
+ - 🎨 See examples in action
406
+ - 🔍 Test component behavior
407
+ - 💻 Perfect for development
408
+
409
+ The playground is located in `test/dummy/` and is **not included** in the published gem.
410
+
411
+ ### Adding Examples
412
+
413
+ To add a new example for testing:
414
+
415
+ ```bash
416
+ # Create a new example partial
417
+ touch test/dummy/app/views/test_examples/[component]/_[example_name].html.erb
285
418
  ```
286
419
 
287
- **Note:** Currently in pre-release. Use `@pre` tag to get the latest version.
420
+ It will automatically appear in the playground at `/test/[component]/[example_name]`.
421
+
422
+ ### Running Tests
423
+
424
+ ```bash
425
+ # All tests
426
+ bundle exec rake test
427
+
428
+ # Specific test file
429
+ bundle exec rake test TEST=test/components/hakumi/button/component_test.rb
430
+
431
+ # System tests (browser tests)
432
+ bundle exec rake test:system
433
+ ```
288
434
 
289
435
  ## Contributing
290
436