shadcn_phlexcomponents 0.1.19 โ†’ 1.0.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1ff13d0989535d069db406d2c9f930cdae7f68500c828c1027263a053559eefd
4
- data.tar.gz: 14f27e9c3ab82a23e1dc9e018cf1605703a49a3d43b27291e2cf98917740f042
3
+ metadata.gz: c5d377669ac71723876caba8ecac23f1820237a773053cdfc6b5e20ad6b642eb
4
+ data.tar.gz: f374614e4bb89df3f3be0e27576e78f9563d2e9523ae00958d87b0406c5b6b19
5
5
  SHA512:
6
- metadata.gz: 9f5c507e1b4777d8c0f8f456b5746350fcaadc7590e20e743a3ce70daece80edafb7fda632e369f768d1a9032de6cce0ef913a94c190f9478997dbc5ebb743b5
7
- data.tar.gz: 68bb596923e049534b656793da8d944802c16da9c248216699cc4c98c6609a45496a8fd5cdb7c42e973d068f2fab3aee401c1c9585cc205eb8289d4a77633eab
6
+ metadata.gz: 45d78d035a55520fe8e8492c77c6ff756f95cbd206a99dc13763d48e0f947cc1b1a16297257c188475c2206492ba098fae5602a41374bcb2c4a50b2f30c73e7a
7
+ data.tar.gz: 2c7faa2124cb6ad5515f974227dfaf6c26d428e294292f493fc2f96a1f3790254c5fa014677a93d989fc4d25eaa51a56f9916aec1bee2a1ed2fc7f884d795a9d
data/README.md CHANGED
@@ -2,156 +2,128 @@
2
2
 
3
3
  A modern UI component library for Ruby on Rails applications, built with [Phlex](https://www.phlex.fun/) and styled with [Tailwind CSS](https://tailwindcss.com/). Inspired by [shadcn/ui](https://ui.shadcn.com/), this gem provides beautiful, accessible, and highly customizable components for Ruby developers.
4
4
 
5
- ## โœจ Features
5
+ ## Installation
6
6
 
7
- - ๐ŸŽจ **50+ Beautiful Components** - Complete UI component library with consistent design
8
- - โšก **Phlex-Powered** - Fast, type-safe Ruby components
9
- - ๐ŸŽฏ **Stimulus Integration** - Interactive components with modern JavaScript
10
- - ๐ŸŽช **Tailwind CSS** - Utility-first styling with full customization
11
- - โ™ฟ **Accessibility First** - ARIA-compliant and keyboard navigation support
12
- - ๐ŸŒ™ **Dark Mode Ready** - Built-in theme switching support
13
- - ๐Ÿ“ฑ **Responsive Design** - Mobile-first approach
14
- - ๐Ÿ”ง **Highly Customizable** - Extensive configuration options
15
- - ๐Ÿš€ **Easy Installation** - Simple setup with Rails integration
7
+ Install gem and required gems:
16
8
 
17
- ## ๐Ÿ“ฆ Installation
9
+ ```bash
10
+ bundle add shadcn_phlexcomponents phlex-rails tailwindcss-rails \
11
+ tailwind_merge lucide-rails class_variants
12
+ ```
18
13
 
19
- Add this line to your application's Gemfile:
14
+ Or install it yourself as:
20
15
 
21
16
  ```ruby
22
- gem 'shadcn_phlexcomponents'
17
+ gem "shadcn_phlexcomponents"
18
+ gem "phlex-rails", "~> 2.1"
19
+ gem "tailwindcss-rails", "~> 4.2"
20
+ gem "tailwind_merge", "~> 1.0"
21
+ gem "lucide-rails", "~> 0.5.1"
22
+ gem "class_variants", "~> 1.1"
23
23
  ```
24
24
 
25
- And then execute:
25
+ After installing the gems, run the installer to set up the necessary files:
26
26
 
27
27
  ```bash
28
- bundle install
28
+ rails install:shadcn_phlexcomponents
29
29
  ```
30
30
 
31
- Or install it yourself as:
32
-
33
- ```bash
34
- gem install shadcn_phlexcomponents
35
- ```
31
+ This will:
36
32
 
37
- ### Rails Integration
33
+ - Copy all Phlex component files to `vendor/shadcn_phlexcomponents/components`
34
+ - Copy all Stimulus controller files (either TypeScript or JavaScript) to `vendor/shadcn_phlexcomponents/javascript`
35
+ - Copy all CSS files to `vendor/shadcn_phlexcomponents/stylesheets`
36
+ - Copy an initializer file to `config/initializers/shadcn_phlexcomponents.rb`
38
37
 
39
- After installing the gem, run the installer to set up the necessary files:
38
+ ## Upgrading
40
39
 
41
40
  ```bash
42
- rails generate install:shadcn_phlexcomponents
41
+ rails upgrade:shadcn_phlexcomponents
43
42
  ```
44
43
 
45
44
  This will:
46
- - Copy JavaScript controllers and utilities
47
- - Set up Tailwind CSS configuration
48
- - Add Stimulus integration
49
- - Configure component stylesheets
50
45
 
51
- ## ๐Ÿš€ Quick Start
46
+ - Copy all Phlex component files to `vendor/shadcn_phlexcomponents/components`
47
+ - Copy all Stimulus controller files (either TypeScript or JavaScript) to `vendor/shadcn_phlexcomponents/javascript`
48
+ - Copy all CSS files to `vendor/shadcn_phlexcomponents/stylesheets`
49
+
50
+ ## Quick Start
52
51
 
53
52
  ### Basic Usage
54
53
 
55
- ```ruby
56
- # In your view or component
57
- class MyView < Phlex::HTML
58
- def view_template
59
- render ShadcnPhlexcomponents::Button.new(variant: :primary) do
60
- "Click me!"
61
- end
62
- end
63
- end
54
+ ```erb
55
+ <%= render Button.new { "Default" } %>
64
56
  ```
65
57
 
66
- ### With Rails Helpers
58
+ See [https://shadcn-phlexcomponents.seanysx.com/](https://shadcn-phlexcomponents.seanysx.com/) for more examples.
67
59
 
68
- ```erb
69
- <%# In your ERB templates %>
70
- <%= render ShadcnPhlexcomponents::Card.new do %>
71
- <%= render ShadcnPhlexcomponents::Card::Header.new do %>
72
- <h3>Card Title</h3>
73
- <% end %>
74
- <%= render ShadcnPhlexcomponents::Card::Content.new do %>
75
- <p>Card content goes here.</p>
76
- <% end %>
77
- <% end %>
78
- ```
60
+ ### Demo Rails App
79
61
 
80
- ## ๐Ÿงฉ Available Components
62
+ Please follow instructions in [https://github.com/sean-yeoh/shadcn_phlexcomponents_demo](https://github.com/sean-yeoh/shadcn_phlexcomponents_demo) to setup a rails app locally.
63
+
64
+ ## Available Components
81
65
 
82
66
  ### Layout & Structure
83
- - **Aspect Ratio** - Maintain aspect ratios for media content
84
- - **Card** - Flexible content containers with header, content, and footer
85
- - **Separator** - Visual dividers for content sections
86
- - **Sheet** - Slide-out panels and drawers
87
- - **Skeleton** - Loading placeholders
67
+
68
+ - **Aspect Ratio**
69
+ - **Card**
70
+ - **Separator**
71
+ - **Sheet**
72
+ - **Skeleton**
88
73
 
89
74
  ### Navigation
90
- - **Breadcrumb** - Navigation hierarchy display
91
- - **Pagination** - Page navigation controls
92
- - **Tabs** - Tabbed content organization
75
+
76
+ - **Breadcrumb**
77
+ - **Pagination**
78
+ - **Tabs**
93
79
 
94
80
  ### Form Components
95
- - **Button** - Primary action triggers with multiple variants
96
- - **Input** - Text input fields with validation states
97
- - **Textarea** - Multi-line text input
98
- - **Label** - Accessible form labels
99
- - **Checkbox** - Single and grouped checkboxes
100
- - **Radio Group** - Radio button selections
101
- - **Select** - Dropdown selections
102
- - **Switch** - Toggle switches
103
- - **Slider** - Range input controls
104
- - **Date Picker** - Single date selection
105
- - **Date Range Picker** - Date range selection
106
- - **Combobox** - Searchable select dropdowns
81
+
82
+ - **Button**
83
+ - **Input**
84
+ - **Textarea**
85
+ - **Label**
86
+ - **Checkbox**
87
+ - **Radio Group**
88
+ - **Select**
89
+ - **Switch**
90
+ - **Slider**
91
+ - **Date Picker**
92
+ - **Date Range Picker**
93
+ - **Combobox**
107
94
 
108
95
  ### Interactive Components
109
- - **Accordion** - Collapsible content sections
110
- - **Alert Dialog** - Modal confirmations and alerts
111
- - **Dialog** - Modal dialogs and overlays
112
- - **Dropdown Menu** - Context menus and actions
113
- - **Hover Card** - Contextual information on hover
114
- - **Popover** - Floating content containers
115
- - **Tooltip** - Helpful text on hover
116
- - **Command** - Command palette interface
117
- - **Collapsible** - Expandable content areas
96
+
97
+ - **Accordion**
98
+ - **Alert Dialog**
99
+ - **Dialog**
100
+ - **Dropdown Menu**
101
+ - **Hover Card**
102
+ - **Popover**
103
+ - **Tooltip**
104
+ - **Command**
105
+ - **Collapsible**
118
106
 
119
107
  ### Feedback & Status
120
- - **Alert** - Status messages and notifications
121
- - **Badge** - Labels and status indicators
122
- - **Progress** - Progress bars and indicators
123
- - **Toast** - Notification messages
124
- - **Loading Button** - Buttons with loading states
125
108
 
126
- ### Display Components
127
- - **Avatar** - User profile images with fallbacks
128
- - **Table** - Data tables with sorting and styling
129
- - **Toggle** - Binary state toggles
109
+ - **Alert**
110
+ - **Badge**
111
+ - **Progress**
112
+ - **Toast**
113
+ - **Loading Button**
130
114
 
131
- ### Utilities
132
- - **Link** - Styled navigation links
133
- - **Theme Switcher** - Light/dark mode toggle
115
+ ### Display Components
134
116
 
135
- ## ๐ŸŽจ Customization
117
+ - **Avatar**
118
+ - **Table**
119
+ - **Toggle**
136
120
 
137
- ### Component Variants
121
+ ### Utilities
138
122
 
139
- Most components support multiple variants for different use cases:
123
+ - **Link**
124
+ - **Theme Switcher**
140
125
 
141
- ```ruby
142
- # Button variants
143
- render ShadcnPhlexcomponents::Button.new(variant: :default) { "Default" }
144
- render ShadcnPhlexcomponents::Button.new(variant: :destructive) { "Delete" }
145
- render ShadcnPhlexcomponents::Button.new(variant: :outline) { "Cancel" }
146
- render ShadcnPhlexcomponents::Button.new(variant: :ghost) { "Ghost" }
147
- render ShadcnPhlexcomponents::Button.new(variant: :link) { "Link" }
148
-
149
- # Button sizes
150
- render ShadcnPhlexcomponents::Button.new(size: :sm) { "Small" }
151
- render ShadcnPhlexcomponents::Button.new(size: :default) { "Default" }
152
- render ShadcnPhlexcomponents::Button.new(size: :lg) { "Large" }
153
- render ShadcnPhlexcomponents::Button.new(size: :icon) { icon(:plus) }
154
- ```
126
+ ## Customization
155
127
 
156
128
  ### Global Configuration
157
129
 
@@ -172,107 +144,23 @@ ShadcnPhlexcomponents.configure do |config|
172
144
  end
173
145
  ```
174
146
 
175
- ### CSS Customization
176
-
177
- Override component styles using Tailwind CSS:
178
-
179
- ```css
180
- /* app/assets/stylesheets/application.css */
181
- .shadcn-button {
182
- @apply font-semibold transition-all duration-200;
183
- }
184
-
185
- .shadcn-button--primary {
186
- @apply bg-brand-primary hover:bg-brand-primary-dark;
187
- }
188
- ```
189
-
190
- ## ๐ŸŽฏ Interactive Components
191
-
192
- Components with JavaScript functionality automatically include Stimulus controllers:
193
-
194
- ```ruby
195
- # Accordion with automatic JavaScript behavior
196
- render ShadcnPhlexcomponents::Accordion.new do
197
- render ShadcnPhlexcomponents::Accordion::Item.new(value: "item-1") do
198
- render ShadcnPhlexcomponents::Accordion::Trigger.new { "Section 1" }
199
- render ShadcnPhlexcomponents::Accordion::Content.new do
200
- "Content for section 1"
201
- end
202
- end
203
- end
204
-
205
- # Dialog with modal behavior
206
- render ShadcnPhlexcomponents::Dialog.new do
207
- render ShadcnPhlexcomponents::Dialog::Trigger.new do
208
- render ShadcnPhlexcomponents::Button.new { "Open Dialog" }
209
- end
210
- render ShadcnPhlexcomponents::Dialog::Content.new do
211
- render ShadcnPhlexcomponents::Dialog::Header.new do
212
- render ShadcnPhlexcomponents::Dialog::Title.new { "Dialog Title" }
213
- end
214
- "Dialog content goes here"
215
- end
216
- end
217
- ```
218
-
219
- ## ๐ŸŒ™ Dark Mode
220
-
221
- Enable dark mode support by adding the theme switcher:
222
-
223
- ```ruby
224
- # In your layout
225
- render ShadcnPhlexcomponents::ThemeSwitcher.new
226
- ```
227
-
228
147
  Components automatically adapt to dark mode using Tailwind's `dark:` classes.
229
148
 
230
- ## ๐Ÿ“‹ Form Integration
149
+ ## Form Integration
231
150
 
232
- Components work seamlessly with Rails form helpers:
151
+ Components work with Rails form helpers:
233
152
 
234
- ```ruby
235
- # Using with Rails forms
236
- form_with model: @user do |form|
237
- div(class: "space-y-4") do
238
- render ShadcnPhlexcomponents::Form::FormField.new(form: form, name: :name) do
239
- render ShadcnPhlexcomponents::Label.new { "Name" }
240
- render ShadcnPhlexcomponents::Input.new(
241
- name: "user[name]",
242
- value: @user.name,
243
- placeholder: "Enter your name"
244
- )
245
- end
246
-
247
- render ShadcnPhlexcomponents::Button.new(type: :submit) { "Save" }
248
- end
249
- end
153
+ ```erb
154
+ <%= render Form.new(model: @user, class: "space-y-6") do |f| %>
155
+ <%= f.input(:email) %>
156
+ <%= f.submit %>
157
+ <% end %>
250
158
  ```
251
159
 
252
- ## ๐Ÿ› ๏ธ Development
160
+ ## Development
253
161
 
254
162
  After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
255
163
 
256
- ### Available Commands
257
-
258
- ```bash
259
- # Run tests
260
- rake test
261
-
262
- # Run linting
263
- rake rubocop
264
- rubocop
265
-
266
- # Build JavaScript assets
267
- yarn build
268
-
269
- # Install gem locally
270
- bundle exec rake install
271
-
272
- # Release new version
273
- bundle exec rake release
274
- ```
275
-
276
164
  ### Component Development
277
165
 
278
166
  When creating new components:
@@ -283,42 +171,44 @@ When creating new components:
283
171
  4. Include comprehensive tests
284
172
  5. Follow existing naming conventions
285
173
 
286
- ## ๐Ÿงช Testing
287
-
288
- The gem includes comprehensive test coverage:
174
+ ### Available Commands
289
175
 
290
176
  ```bash
291
- # Run all tests
177
+ # Run tests
292
178
  rake test
293
179
 
294
- # Run specific test file
295
- ruby test/test_button.rb
180
+ # Run linting
181
+ rake rubocop
182
+ rubocop
183
+
184
+ # Install JavaScript dependencies
185
+ yarn install
296
186
 
297
- # Run with coverage
298
- rake test
299
187
  ```
300
188
 
301
- ## ๐Ÿ“š Dependencies
189
+ ## Dependencies
302
190
 
303
191
  ### Ruby Dependencies
304
- - **Rails** (~> 8.0) - Web framework
192
+
193
+ - **rails** (~> 8.0) - Web framework
305
194
  - **Phlex Rails** (~> 2.1) - Component framework
306
195
  - **Class Variants** (~> 1.1) - CSS class management
307
196
  - **Lucide Rails** (~> 0.5.1) - Icon library
308
197
  - **Tailwind Merge** (~> 1.0) - CSS class merging
309
198
 
310
199
  ### JavaScript Dependencies
311
- - **Stimulus** (^3.2.2) - JavaScript framework
312
- - **Floating UI** (^1.7.2) - Positioning library
313
- - **Day.js** (^1.11.13) - Date manipulation
314
- - **Fuse.js** (^7.1.0) - Fuzzy searching
315
- - **DOMPurify** (^3.2.6) - HTML sanitization
316
200
 
317
- ## ๐Ÿค Contributing
201
+ - **@hotwired/stimulus** (^3.2.2) - JavaScript framework
202
+ - **@floating-ui/dom** (^1.7.2) - Positioning library
203
+ - **dayjs** (^1.11.13) - Date manipulation
204
+ - **fuse.js** (^7.1.0) - Fuzzy searching
205
+ - **dompurify** (^3.2.6) - HTML sanitization
206
+ - **inputmask** (^5.0.9) - Input masking
207
+ - **hotkeys-js** (^3.13.14) - Keyboard shortcuts
208
+ - **nouislider** (^15.8.1) - Slider input
209
+ - **vanilla-calendar-pro** (^3.0.4) - Calendar component
318
210
 
319
- Bug reports and pull requests are welcome on GitHub at https://github.com/sean-yeoh/shadcn_phlexcomponents. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/sean-yeoh/shadcn_phlexcomponents/blob/main/CODE_OF_CONDUCT.md).
320
-
321
- ### Contributing Guidelines
211
+ ## Contributing
322
212
 
323
213
  1. Fork the repository
324
214
  2. Create your feature branch (`git checkout -b my-new-feature`)
@@ -329,23 +219,16 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/sean-y
329
219
  7. Push to the branch (`git push origin my-new-feature`)
330
220
  8. Create a new Pull Request
331
221
 
332
- ## ๐Ÿ“„ License
222
+ ## License
333
223
 
334
224
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
335
225
 
336
- ## ๐Ÿ™ Acknowledgments
226
+ ## Acknowledgments
337
227
 
338
228
  - Inspired by [shadcn/ui](https://ui.shadcn.com/) - The original React component library
339
229
  - Built with [Phlex](https://www.phlex.fun/) - Ruby HTML components
340
230
  - Styled with [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
341
231
  - Icons provided by [Lucide](https://lucide.dev/) - Beautiful open source icons
342
-
343
- ## ๐Ÿ“ž Support
344
-
345
- - ๐Ÿ“– [Documentation](https://github.com/sean-yeoh/shadcn_phlexcomponents)
346
- - ๐Ÿ› [Issues](https://github.com/sean-yeoh/shadcn_phlexcomponents/issues)
347
- - ๐Ÿ’ฌ [Discussions](https://github.com/sean-yeoh/shadcn_phlexcomponents/discussions)
232
+ - [@JacobAlexander](https://github.com/JacobAlexander) - For testing and providing feedback
348
233
 
349
234
  ---
350
-
351
- Made with โค๏ธ by [Sean Yeoh](https://github.com/sean-yeoh)
@@ -19,7 +19,7 @@ if ENV["ENVIRONMENT"] == "test"
19
19
  directory(css_path, css_install_path)
20
20
  copy_file(initializer_file_path, initializer_file_install_path)
21
21
  elsif yes?("Do you want to continue? (y/n)")
22
- using_typescript = yes?("Are you using Typescript?")
22
+ using_typescript = yes?("Are you using Typescript? (y/n)")
23
23
 
24
24
  if using_typescript
25
25
  directory(stimulus_ts_controllers_path, stimulus_controllers_install_path)
@@ -16,7 +16,7 @@ if ENV["ENVIRONMENT"] == "test"
16
16
  directory(stimulus_js_controllers_path, stimulus_controllers_install_path)
17
17
  directory(css_path, css_install_path)
18
18
  elsif yes?("Do you want to continue? (y/n)")
19
- using_typescript = yes?("Are you using Typescript?")
19
+ using_typescript = yes?("Are you using Typescript? (y/n)")
20
20
 
21
21
  if using_typescript
22
22
  directory(stimulus_ts_controllers_path, stimulus_controllers_install_path)
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ShadcnPhlexcomponents
4
- VERSION = "0.1.19"
4
+ VERSION = "1.0.0"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shadcn_phlexcomponents
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.19
4
+ version: 1.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sean Yeoh