@hakumi-dev/hakumi-components 0.1.17-pre → 0.1.18-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 (2) hide show
  1. package/README.md +92 -70
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -145,11 +145,33 @@ registerHakumiControllers(application)
145
145
  @import "@hakumi-dev/hakumi-components/styles";
146
146
  ```
147
147
 
148
- **5. (Optional) Configure FormBuilder:**
148
+ ## Configuration
149
+
150
+ You can configure HakumiComponents in an initializer:
149
151
 
150
152
  ```ruby
151
153
  # config/initializers/hakumi_components.rb
152
- Rails.application.config.action_view.default_form_builder = Hakumi::FormBuilder
154
+ HakumiComponents.configure do |config|
155
+ config.default_form_builder = true # Use HakumiComponents::FormBuilder as default
156
+ config.base_path = "hakumi/components" # Base URL path for component routes
157
+ end
158
+ ```
159
+
160
+ ### Available Configuration Options
161
+
162
+ | Option | Default | Description |
163
+ |--------|---------|-------------|
164
+ | `default_form_builder` | `false` | Use `HakumiComponents::FormBuilder` as the default form builder |
165
+ | `base_path` | `"hakumi/components"` | Base URL path for component routes (modals, drawers, etc.) |
166
+
167
+ ### Accessing Configuration
168
+
169
+ ```ruby
170
+ HakumiComponents.config.default_form_builder
171
+ # => true
172
+
173
+ HakumiComponents.config.base_path
174
+ # => "hakumi/components"
153
175
  ```
154
176
 
155
177
  ## Usage
@@ -158,19 +180,19 @@ Rails.application.config.action_view.default_form_builder = Hakumi::FormBuilder
158
180
 
159
181
  ```erb
160
182
  <%# Simple button %>
161
- <%= render Hakumi::Button::Component.new(type: :primary) do %>
183
+ <%= render HakumiComponents::Button::Component.new(type: :primary) do %>
162
184
  Click me
163
185
  <% end %>
164
186
 
165
187
  <%# Form with automatic validation detection %>
166
- <%= form_with model: @user, builder: Hakumi::FormBuilder do |f| %>
188
+ <%= form_with model: @user, builder: HakumiComponents::FormBuilder do |f| %>
167
189
  <%= f.text_field :email %>
168
190
  <%= f.text_field :name %>
169
191
  <%= f.submit "Save", type: :primary %>
170
192
  <% end %>
171
193
 
172
194
  <%# Modal with programmatic control %>
173
- <%= render Hakumi::Modal::Component.new(
195
+ <%= render HakumiComponents::Modal::Component.new(
174
196
  id: "my-modal",
175
197
  title: "Confirm Action"
176
198
  ) do %>
@@ -183,83 +205,83 @@ Rails.application.config.action_view.default_form_builder = Hakumi::FormBuilder
183
205
  Browse all **65 components** organized by category. Each component includes detailed documentation, examples, and API reference.
184
206
 
185
207
  #### 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
208
+ - [Button](./app/components/hakumi_components/button/docs/README.md) - Clickable button element
209
+ - [Float Button](./app/components/hakumi_components/float_button/docs/README.md) - Floating action button
210
+ - [Icon](./app/components/hakumi_components/icon/docs/README.md) - Icon display component
211
+ - [Typography](./app/components/hakumi_components/typography/docs/README.md) - Text styling and formatting
190
212
 
191
213
  #### 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
214
+ - [Divider](./app/components/hakumi_components/divider/docs/README.md) - Horizontal or vertical divider line
215
+ - [Flex](./app/components/hakumi_components/flex/docs/README.md) - Flexbox layout container
216
+ - [Grid](./app/components/hakumi_components/grid/docs/README.md) - Grid layout system
217
+ - [Layout](./app/components/hakumi_components/layout/docs/README.md) - Page layout structure
218
+ - [Space](./app/components/hakumi_components/space/docs/README.md) - Spacing between elements
219
+ - [Splitter](./app/components/hakumi_components/splitter/docs/README.md) - Resizable split panels
198
220
 
199
221
  #### 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
222
+ - [Anchor](./app/components/hakumi_components/anchor/docs/README.md) - Anchor navigation for page sections
223
+ - [Breadcrumb](./app/components/hakumi_components/breadcrumb/docs/README.md) - Breadcrumb navigation trail
224
+ - [Dropdown](./app/components/hakumi_components/dropdown/docs/README.md) - Dropdown menu
225
+ - [Menu](./app/components/hakumi_components/menu/docs/README.md) - Navigation menu
226
+ - [Pagination](./app/components/hakumi_components/pagination/docs/README.md) - Pagination controls
227
+ - [Steps](./app/components/hakumi_components/steps/docs/README.md) - Step-by-step navigation
206
228
 
207
229
  #### 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
230
+ - [Autocomplete](./app/components/hakumi_components/autocomplete/docs/README.md) - Input with autocomplete suggestions
231
+ - [Cascader](./app/components/hakumi_components/cascader/docs/README.md) - Cascading selection dropdown
232
+ - [Checkbox](./app/components/hakumi_components/checkbox/docs/README.md) - Checkbox input
233
+ - [Color Picker](./app/components/hakumi_components/color_picker/docs/README.md) - Color selection input
234
+ - [Date Picker](./app/components/hakumi_components/date_picker/docs/README.md) - Date selection input
235
+ - [Form](./app/components/hakumi_components/form/docs/README.md) - Form wrapper with validation
236
+ - [Input](./app/components/hakumi_components/input/docs/README.md) - Text input field
237
+ - [Input Number](./app/components/hakumi_components/input_number/docs/README.md) - Numeric input field
238
+ - [Mentions](./app/components/hakumi_components/mentions/docs/README.md) - @mentions input
239
+ - [Radio](./app/components/hakumi_components/radio/docs/README.md) - Radio button input
240
+ - [Rate](./app/components/hakumi_components/rate/docs/README.md) - Star rating input
241
+ - [Select](./app/components/hakumi_components/select/docs/README.md) - Dropdown select input
242
+ - [Slider](./app/components/hakumi_components/slider/docs/README.md) - Range slider input
243
+ - [Switch](./app/components/hakumi_components/switch/docs/README.md) - Toggle switch input
244
+ - [Time Picker](./app/components/hakumi_components/time_picker/docs/README.md) - Time selection input
245
+ - [Transfer](./app/components/hakumi_components/transfer/docs/README.md) - Dual list transfer
246
+ - [Tree Select](./app/components/hakumi_components/tree_select/docs/README.md) - Tree structure select
247
+ - [Upload](./app/components/hakumi_components/upload/docs/README.md) - File upload component
226
248
 
227
249
  #### 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
250
+ - [Avatar](./app/components/hakumi_components/avatar/docs/README.md) - User avatar display
251
+ - [Badge](./app/components/hakumi_components/badge/docs/README.md) - Badge and status dot
252
+ - [Calendar](./app/components/hakumi_components/calendar/docs/README.md) - Calendar display
253
+ - [Card](./app/components/hakumi_components/card/docs/README.md) - Card container
254
+ - [Carousel](./app/components/hakumi_components/carousel/docs/README.md) - Image/content carousel
255
+ - [Collapse](./app/components/hakumi_components/collapse/docs/README.md) - Collapsible accordion panels
256
+ - [Descriptions](./app/components/hakumi_components/descriptions/docs/README.md) - Description list display
257
+ - [Empty](./app/components/hakumi_components/empty/docs/README.md) - Empty state placeholder
258
+ - [Image](./app/components/hakumi_components/image/docs/README.md) - Image display with preview
259
+ - [Popover](./app/components/hakumi_components/popover/docs/README.md) - Popover overlay
260
+ - [QR Code](./app/components/hakumi_components/qr_code/docs/README.md) - QR code generator
261
+ - [Segmented](./app/components/hakumi_components/segmented/docs/README.md) - Segmented control
262
+ - [Statistic](./app/components/hakumi_components/statistic/docs/README.md) - Statistic display
263
+ - [Table](./app/components/hakumi_components/table/docs/README.md) - Data table
264
+ - [Tabs](./app/components/hakumi_components/tabs/docs/README.md) - Tab navigation
265
+ - [Tag](./app/components/hakumi_components/tag/docs/README.md) - Tag label
266
+ - [Timeline](./app/components/hakumi_components/timeline/docs/README.md) - Timeline display
267
+ - [Tooltip](./app/components/hakumi_components/tooltip/docs/README.md) - Tooltip overlay
268
+ - [Tour](./app/components/hakumi_components/tour/docs/README.md) - Guided tour
269
+ - [Tree](./app/components/hakumi_components/tree/docs/README.md) - Tree structure display
248
270
 
249
271
  #### 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
272
+ - [Alert](./app/components/hakumi_components/alert/docs/README.md) - Alert message display
273
+ - [Drawer](./app/components/hakumi_components/drawer/docs/README.md) - Slide-out drawer panel
274
+ - [Message](./app/components/hakumi_components/message/docs/README.md) - Global message notification
275
+ - [Modal](./app/components/hakumi_components/modal/docs/README.md) - Modal dialog
276
+ - [Notification](./app/components/hakumi_components/notification/docs/README.md) - Notification message
277
+ - [Popconfirm](./app/components/hakumi_components/popconfirm/docs/README.md) - Confirmation popover
278
+ - [Progress](./app/components/hakumi_components/progress/docs/README.md) - Progress indicator
279
+ - [Result](./app/components/hakumi_components/result/docs/README.md) - Result status page
280
+ - [Skeleton](./app/components/hakumi_components/skeleton/docs/README.md) - Skeleton loading placeholder
281
+ - [Spin](./app/components/hakumi_components/spin/docs/README.md) - Loading spinner
260
282
 
261
283
  #### Other (1)
262
- - [Affix](./app/components/hakumi/affix/docs/README.md) - Pin element to viewport
284
+ - [Affix](./app/components/hakumi_components/affix/docs/README.md) - Pin element to viewport
263
285
 
264
286
  ## JavaScript API
265
287
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hakumi-dev/hakumi-components",
3
- "version": "0.1.17-pre",
3
+ "version": "0.1.18-pre",
4
4
  "type": "module",
5
5
  "description": "Hakumi Components for Rails and modern JavaScript frameworks",
6
6
  "keywords": [