daisyui_on_phlex 0.2.4 → 0.4.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: 7f059d59f5a325b95c285385ef3ed2383df4faeadeb681e91652ecbbae7736c6
4
- data.tar.gz: 5434f975a9e43e9cd560748b4f7526f2dc49fe57c616b80b12c45da0270aa7c3
3
+ metadata.gz: 1e9055e975f76616e36477a2ea3059883373a49075d372ad51f60558736f6314
4
+ data.tar.gz: d7db288599b6b4b5d3de7f177536c2aca03fee43fee2fabaf927219029c2aa00
5
5
  SHA512:
6
- metadata.gz: 18495eedd5262fb4a4c63624740588ec86f3152b587b52e4186a1f10ae868c5a4dfc9e256989489022c0cc31e51a982de339525ce9ffd86b77ac90b1d316d713
7
- data.tar.gz: 0c49f760537f4a402ad6bfd7141a7ac633d88fc2d277718d9932d2e43e1a2ae12425553b6663a2219354333be0c30c740d685f43659a9d7273e9d26c1e2779e8
6
+ metadata.gz: 49605f81a46a56a2f9a577bb664e3232dfd0aa4f888c5246186d356c8048a2d544d08f0a3a4f0472c6eda77fafbc6fe6def330fc2f18053f154da3e9ed3a399f
7
+ data.tar.gz: 5f2c9c05cef94935aa95b7f8dab039ddf695cc917363269542b997f43c3a8d677b745d3862f5dca9edb6c27da1ed2955493bb5a7931ed9be35238689ab56bd81
data/README.md CHANGED
@@ -34,41 +34,95 @@ Or install it yourself as:
34
34
  $ gem install daisyui_on_phlex
35
35
  ```
36
36
 
37
- ## Quick Setup
37
+ ## Setup
38
38
 
39
- After installation, add the CSS import to your `app/assets/stylesheets/application.css`:
39
+ Run the install generator to set up DaisyUI components in your Rails application:
40
40
 
41
- ```css
42
- @import "tailwindcss";
43
- @import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
41
+ ```bash
42
+ $ rails generate daisyui_on_phlex:install
44
43
  ```
45
44
 
46
- Make sure your HTML layout supports themes:
45
+ This will:
46
+ 1. **Copy all 61+ components** to `vendor/daisyui_on_phlex/components/` in your Rails app
47
+ 2. **Configure autoloader** to serve components from vendor directory instead of gem
48
+ 3. Install **phlex-rails** dependency if not already present
49
+ 4. Download the latest **DaisyUI JavaScript files**
50
+ 5. Configure your **Tailwind CSS** to include the DaisyUI plugin
51
+ 6. Add CSS imports to your application
52
+ 7. Provide usage instructions
53
+
54
+ ### Why Copy to Vendor?
55
+
56
+ Unlike traditional gems that load components from memory, DaisyUI On Phlex follows the **shadcn-ui approach** by copying components directly to your application. This gives you:
57
+
58
+ - ✅ **Full ownership** of component code in your app
59
+ - ✅ **Easy customization** - edit components locally
60
+ - ✅ **No gem dependencies** for component logic after installation
61
+ - ✅ **Version control** your component modifications
62
+ - ✅ **Better debugging** with direct access to source code
63
+
64
+ After installation, all components will be available from `vendor/daisyui_on_phlex/components/` and you can modify them as needed for your project.
65
+
66
+ ### Manual Configuration (Optional)
67
+
68
+ If you prefer manual setup or need to customize the installation:
69
+
70
+ #### 1. Configure your HTML layout
71
+
72
+ Make sure your HTML layout supports theme switching by adding the `data-theme` attribute:
47
73
 
48
74
  ```erb
49
75
  <!DOCTYPE html>
50
76
  <html data-theme="light">
51
- <!-- Your app content -->
77
+ <head>
78
+ <!-- Your head content -->
79
+ </head>
80
+ <body>
81
+ <!-- Your body content -->
82
+ </body>
52
83
  </html>
53
84
  ```
54
85
 
55
- For detailed setup instructions, see [INSTALLATION.md](INSTALLATION.md).
86
+ #### 2. Theme Configuration
56
87
 
57
- ## Setup
88
+ The CSS file includes the most popular DaisyUI themes by default:
89
+ - `light` (default), `dark` (prefers dark mode)
90
+ - `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
91
+ - `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
92
+ - `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
93
+ - `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
58
94
 
59
- Run the install generator to set up DaisyUI in your Rails application:
95
+ #### 3. Theme Switching
96
+
97
+ To enable theme switching, you can use the `data-theme` attribute:
98
+
99
+ ```erb
100
+ <select data-choose-theme>
101
+ <option value="light">Light</option>
102
+ <option value="dark">Dark</option>
103
+ <option value="cupcake">Cupcake</option>
104
+ <option value="dracula">Dracula</option>
105
+ <!-- Add more themes as needed -->
106
+ </select>
107
+ ```
108
+
109
+ For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
60
110
 
61
111
  ```bash
62
- $ rails generate daisyui_on_phlex:install
112
+ npm install theme-change
63
113
  ```
64
114
 
65
- This will:
66
- 1. Download the latest DaisyUI JavaScript files
67
- 2. Configure your Tailwind CSS to include the DaisyUI plugin
68
- 3. Provide usage instructions
115
+ Then initialize it in your JavaScript:
116
+
117
+ ```javascript
118
+ import { themeChange } from 'theme-change'
119
+ themeChange()
120
+ ```
69
121
 
70
122
  ## Usage
71
123
 
124
+ After running the install generator, all DaisyUI components will be copied to your `vendor/daisyui_on_phlex/components/` directory and automatically available in your application.
125
+
72
126
  Use DaisyUI components in your Phlex views:
73
127
 
74
128
  ### Button Component
@@ -164,7 +218,7 @@ render DaisyuiOnPhlex::Components::Input.new(
164
218
 
165
219
  ## Available Components
166
220
 
167
- All 61+ DaisyUI components are now implemented as Phlex components:
221
+ After installation, all 61+ DaisyUI components are copied to your `vendor/daisyui_on_phlex/components/` directory and ready to use. You can customize any component by editing the files directly in your vendor folder.
168
222
 
169
223
  ### Actions
170
224
  - **Button** - Interactive buttons with multiple variants and sizes
@@ -245,6 +299,83 @@ All 61+ DaisyUI components are now implemented as Phlex components:
245
299
 
246
300
  All components follow DaisyUI's design system and support the full range of variants, sizes, and styling options. Check the [DaisyUI documentation](https://daisyui.com/components/) for detailed usage examples and styling options.
247
301
 
302
+ ## Customization
303
+
304
+ Since all components are copied to your `vendor/daisyui_on_phlex/components/` directory, you have full control over their implementation:
305
+
306
+ ### Modifying Components
307
+
308
+ ```bash
309
+ # All components are in your vendor directory
310
+ ls vendor/daisyui_on_phlex/components/
311
+
312
+ # Edit any component directly
313
+ code vendor/daisyui_on_phlex/components/button.rb
314
+ ```
315
+
316
+ ### Creating Custom Variants
317
+
318
+ ```ruby
319
+ # In vendor/daisyui_on_phlex/components/button.rb
320
+ module DaisyuiOnPhlex
321
+ module Components
322
+ class Button < DaisyuiOnPhlex::Base
323
+ def initialize(variant: :primary, custom_style: nil, **attributes)
324
+ @variant = variant
325
+ @custom_style = custom_style
326
+ @attributes = attributes
327
+ end
328
+
329
+ private
330
+
331
+ def component_classes
332
+ classes = ["btn"]
333
+ classes << "btn-#{@variant}" if @variant
334
+ classes << @custom_style if @custom_style # Your custom styles
335
+ classes.join(" ")
336
+ end
337
+ end
338
+ end
339
+ end
340
+ ```
341
+
342
+ All changes will be preserved in your application and tracked in your version control system.
343
+
344
+ ### Vendor Directory Structure
345
+
346
+ After installation, your vendor directory will contain:
347
+
348
+ ```
349
+ vendor/daisyui_on_phlex/
350
+ ├── base.rb # Base class for all components
351
+ └── components/
352
+ ├── accordion.rb
353
+ ├── alert.rb
354
+ ├── avatar.rb
355
+ ├── badge.rb
356
+ ├── button.rb
357
+ ├── card.rb
358
+ ├── ... # All 61+ components
359
+ └── tooltip.rb
360
+ ```
361
+
362
+ ### Troubleshooting
363
+
364
+ If you encounter issues:
365
+
366
+ 1. **Generator fails**: Ensure you're in a Rails application directory and have proper permissions
367
+ 2. **Components not found**: Check that `config/initializers/daisyui_on_phlex_vendor.rb` was created
368
+ 3. **Styles not loading**: Ensure the CSS import is after `@import "tailwindcss";`
369
+ 4. **Themes not working**: Check that your HTML has the `data-theme` attribute
370
+ 5. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
371
+ 6. **Vendor directory issues**: Verify components were copied to `vendor/daisyui_on_phlex/components/`
372
+
373
+ You can safely re-run the generator to update components or fix configuration:
374
+
375
+ ```bash
376
+ rails generate daisyui_on_phlex:install
377
+ ```
378
+
248
379
  ## Component Options
249
380
 
250
381
  ### Button Options
@@ -16,16 +16,15 @@ module DaisyuiOnPhlex
16
16
  )
17
17
  end
18
18
 
19
- def item(open: false, **attributes)
20
- div(class: merge_classes("collapse", ("collapse-open" if open)), **attributes) do
21
- yield AccordionItem.new
19
+ def item(expanded: false, **attributes, &block)
20
+ div(class: merge_classes("collapse", ("collapse-open" if expanded)), **attributes) do
21
+ yield AccordionItem.new if block_given?
22
22
  end
23
23
  end
24
24
 
25
25
  private
26
26
 
27
- class AccordionItem
28
- include Phlex::HTML
27
+ class AccordionItem < DaisyuiOnPhlex::Base
29
28
 
30
29
  def title(**attributes, &block)
31
30
  div(class: "collapse-title text-xl font-medium", **attributes, &block)
@@ -12,47 +12,34 @@ module DaisyuiOnPhlex
12
12
  end
13
13
 
14
14
  def view_template(&block)
15
- div(
16
- class: alert_classes,
17
- **@attributes
18
- ) do
19
- render_icon if icon_for_variant
20
- div(&block) if block_given?
15
+ div(class: merge_classes("alert", variant_class), **@attributes) do
16
+ yield if block_given?
21
17
  end
22
18
  end
23
19
 
24
20
  private
25
21
 
26
- def alert_classes
27
- classes = ["alert"]
28
-
22
+ def variant_class
29
23
  case @variant
30
- when :info then classes << "alert-info"
31
- when :success then classes << "alert-success"
32
- when :warning then classes << "alert-warning"
33
- when :error then classes << "alert-error"
24
+ when :info then "alert-info"
25
+ when :success then "alert-success"
26
+ when :warning then "alert-warning"
27
+ when :error then "alert-error"
28
+ else ""
34
29
  end
35
-
36
- merge_classes(*classes)
37
30
  end
38
31
 
39
- def icon_for_variant
32
+ def render_icon
40
33
  case @variant
41
- when :info then "info"
42
- when :success then "check"
43
- when :warning then "warning"
44
- when :error then "error"
34
+ when :info, :success, :warning, :error
35
+ render_svg_icon
45
36
  end
46
37
  end
47
38
 
48
- def render_icon
49
- render_svg_icon
50
- end
51
-
52
39
  def render_svg_icon
53
40
  svg(
54
41
  xmlns: "http://www.w3.org/2000/svg",
55
- class: "h-6 w-6 shrink-0 stroke-current",
42
+ class: "stroke-current shrink-0 h-6 w-6",
56
43
  fill: "none",
57
44
  viewBox: "0 0 24 24"
58
45
  ) do
@@ -63,13 +50,33 @@ module DaisyuiOnPhlex
63
50
  def render_svg_path
64
51
  case @variant
65
52
  when :info
66
- unsafe_raw '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
53
+ tag(:path,
54
+ "stroke-linecap": "round",
55
+ "stroke-linejoin": "round",
56
+ "stroke-width": "2",
57
+ d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
58
+ )
67
59
  when :success
68
- unsafe_raw '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
60
+ tag(:path,
61
+ "stroke-linecap": "round",
62
+ "stroke-linejoin": "round",
63
+ "stroke-width": "2",
64
+ d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
65
+ )
69
66
  when :warning
70
- unsafe_raw '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>'
67
+ tag(:path,
68
+ "stroke-linecap": "round",
69
+ "stroke-linejoin": "round",
70
+ "stroke-width": "2",
71
+ d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
72
+ )
71
73
  when :error
72
- unsafe_raw '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
74
+ tag(:path,
75
+ "stroke-linecap": "round",
76
+ "stroke-linejoin": "round",
77
+ "stroke-width": "2",
78
+ d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
79
+ )
73
80
  end
74
81
  end
75
82
  end
@@ -3,9 +3,8 @@
3
3
  module DaisyuiOnPhlex
4
4
  module Components
5
5
  class Carousel < DaisyuiOnPhlex::Base
6
- def initialize(center: false, end: false, vertical: false, **attributes)
7
- @center = center
8
- @end = end
6
+ def initialize(alignment: nil, vertical: false, **attributes)
7
+ @alignment = alignment # :center, :end, nil for default (start)
9
8
  @vertical = vertical
10
9
  @attributes = attributes
11
10
  end
@@ -27,8 +26,8 @@ module DaisyuiOnPhlex
27
26
 
28
27
  def carousel_classes
29
28
  classes = ["carousel"]
30
- classes << "carousel-center" if @center
31
- classes << "carousel-end" if @end
29
+ classes << "carousel-center" if @alignment == :center
30
+ classes << "carousel-end" if @alignment == :end
32
31
  classes << "carousel-vertical" if @vertical
33
32
  merge_classes(*classes)
34
33
  end
@@ -3,8 +3,8 @@
3
3
  module DaisyuiOnPhlex
4
4
  module Components
5
5
  class Collapse < DaisyuiOnPhlex::Base
6
- def initialize(open: false, arrow: false, plus: false, **attributes)
7
- @open = open
6
+ def initialize(expanded: false, arrow: false, plus: false, **attributes)
7
+ @expanded = expanded
8
8
  @arrow = arrow
9
9
  @plus = plus
10
10
  @attributes = attributes
@@ -16,10 +16,10 @@ module DaisyuiOnPhlex
16
16
  "collapse",
17
17
  ("collapse-arrow" if @arrow),
18
18
  ("collapse-plus" if @plus),
19
- ("collapse-open" if @open),
19
+ ("collapse-open" if @expanded),
20
20
  @attributes[:class]
21
21
  ),
22
- open: @open,
22
+ open: @expanded,
23
23
  **@attributes.except(:class),
24
24
  &block
25
25
  )
@@ -3,8 +3,8 @@
3
3
  module DaisyuiOnPhlex
4
4
  module Components
5
5
  class Drawer < DaisyuiOnPhlex::Base
6
- def initialize(end: false, **attributes)
7
- @end = end
6
+ def initialize(side: :start, **attributes)
7
+ @side = side # :start or :end
8
8
  @attributes = attributes
9
9
  end
10
10
 
@@ -41,7 +41,7 @@ module DaisyuiOnPhlex
41
41
 
42
42
  def drawer_side_classes
43
43
  classes = ["drawer-side"]
44
- classes << "drawer-end" if @end
44
+ classes << "drawer-end" if @side == :end
45
45
  merge_classes(*classes)
46
46
  end
47
47
  end
@@ -5,19 +5,15 @@ module DaisyuiOnPhlex
5
5
  class Dropdown < DaisyuiOnPhlex::Base
6
6
  def initialize(
7
7
  position: :bottom,
8
- align: :left,
9
- end: false,
10
- top: false,
8
+ align: :start,
11
9
  hover: false,
12
- open: false,
10
+ force_open: false,
13
11
  **attributes
14
12
  )
15
13
  @position = position
16
14
  @align = align
17
- @end = end
18
- @top = top
19
15
  @hover = hover
20
- @open = open
16
+ @force_open = force_open
21
17
  @attributes = attributes
22
18
  end
23
19
 
@@ -50,9 +46,12 @@ module DaisyuiOnPhlex
50
46
  when :right then classes << "dropdown-right"
51
47
  end
52
48
 
53
- classes << "dropdown-end" if @end
49
+ case @align
50
+ when :end then classes << "dropdown-end"
51
+ end
52
+
54
53
  classes << "dropdown-hover" if @hover
55
- classes << "dropdown-open" if @open
54
+ classes << "dropdown-open" if @force_open
56
55
 
57
56
  merge_classes(*classes)
58
57
  end
@@ -5,11 +5,11 @@ module DaisyuiOnPhlex
5
5
  class Modal < DaisyuiOnPhlex::Base
6
6
  def initialize(
7
7
  id:,
8
- open: false,
8
+ visible: false,
9
9
  **attributes
10
10
  )
11
11
  @id = id
12
- @open = open
12
+ @visible = visible
13
13
  @attributes = attributes
14
14
  end
15
15
 
@@ -19,7 +19,7 @@ module DaisyuiOnPhlex
19
19
  type: "checkbox",
20
20
  id: @id,
21
21
  class: "modal-toggle",
22
- checked: @open
22
+ checked: @visible
23
23
  )
24
24
 
25
25
  # Modal
@@ -19,7 +19,7 @@ module DaisyuiOnPhlex
19
19
  div(class: merge_classes("navbar-center", attributes[:class]), **attributes.except(:class), &block)
20
20
  end
21
21
 
22
- def end(**attributes, &block)
22
+ def navbar_end(**attributes, &block)
23
23
  div(class: merge_classes("navbar-end", attributes[:class]), **attributes.except(:class), &block)
24
24
  end
25
25
  end
@@ -25,7 +25,7 @@ module DaisyuiOnPhlex
25
25
  end
26
26
  end
27
27
 
28
- def link(href:, text, active: false, **attributes, &block)
28
+ def link(href:, text:, active: false, **attributes, &block)
29
29
  a(
30
30
  href: href,
31
31
  class: pagination_button_classes(active: active),
@@ -14,8 +14,8 @@ module DaisyuiOnPhlex
14
14
  ul(class: timeline_classes, **@attributes, &block)
15
15
  end
16
16
 
17
- def item(start: false, end: false, **attributes, &block)
18
- li(class: item_classes(start: start, end: end), **attributes, &block)
17
+ def item(timeline_start: false, timeline_end: false, **attributes, &block)
18
+ li(class: item_classes(timeline_start: timeline_start, timeline_end: timeline_end), **attributes, &block)
19
19
  end
20
20
 
21
21
  def start(**attributes, &block)
@@ -26,7 +26,7 @@ module DaisyuiOnPhlex
26
26
  div(class: "timeline-middle", **attributes, &block)
27
27
  end
28
28
 
29
- def end(**attributes, &block)
29
+ def timeline_end(**attributes, &block)
30
30
  div(class: "timeline-end", **attributes, &block)
31
31
  end
32
32
 
@@ -41,10 +41,10 @@ module DaisyuiOnPhlex
41
41
  merge_classes(*classes)
42
42
  end
43
43
 
44
- def item_classes(start: false, end: false)
44
+ def item_classes(timeline_start: false, timeline_end: false)
45
45
  classes = []
46
- classes << "timeline-start" if start
47
- classes << "timeline-end" if end
46
+ classes << "timeline-start" if timeline_start
47
+ classes << "timeline-end" if timeline_end
48
48
  merge_classes(*classes)
49
49
  end
50
50
  end
@@ -7,20 +7,20 @@ module DaisyuiOnPhlex
7
7
  text:,
8
8
  position: :top,
9
9
  variant: nil,
10
- open: false,
10
+ force_open: false,
11
11
  **attributes
12
12
  )
13
13
  @text = text
14
14
  @position = position
15
15
  @variant = variant
16
- @open = open
16
+ @force_open = force_open
17
17
  @attributes = attributes
18
18
  end
19
19
 
20
20
  def view_template(&block)
21
21
  div(
22
22
  class: tooltip_classes,
23
- data: { tip: @text },
23
+ "data-tip": @text,
24
24
  **@attributes,
25
25
  &block
26
26
  )
@@ -48,7 +48,7 @@ module DaisyuiOnPhlex
48
48
  when :error then classes << "tooltip-error"
49
49
  end
50
50
 
51
- classes << "tooltip-open" if @open
51
+ classes << "tooltip-open" if @force_open
52
52
 
53
53
  merge_classes(*classes)
54
54
  end
@@ -4,12 +4,10 @@ module DaisyuiOnPhlex
4
4
  module Components
5
5
  class Validator < DaisyuiOnPhlex::Base
6
6
  def initialize(
7
- valid: nil,
8
- invalid: nil,
7
+ state: nil, # :valid, :invalid, nil for neutral
9
8
  **attributes
10
9
  )
11
- @valid = valid
12
- @invalid = invalid
10
+ @state = state
13
11
  @attributes = attributes
14
12
  end
15
13
 
@@ -22,10 +20,9 @@ module DaisyuiOnPhlex
22
20
  def validator_classes
23
21
  classes = []
24
22
 
25
- if @valid == true
26
- classes << "input-success"
27
- elsif @valid == false || @invalid == true
28
- classes << "input-error"
23
+ case @state
24
+ when :valid then classes << "input-success"
25
+ when :invalid then classes << "input-error"
29
26
  end
30
27
 
31
28
  merge_classes(*classes)
@@ -6,47 +6,143 @@ module DaisyuiOnPhlex
6
6
  module Generators
7
7
  class InstallGenerator < Rails::Generators::Base
8
8
  desc "Install DaisyUI On Phlex"
9
- source_root File.expand_path("templates", __dir__)
9
+ source_root File.expand_path("../../daisyui_on_phlex", __dir__)
10
+ class_option :force, type: :boolean, default: false
10
11
 
11
- def copy_daisyui_files
12
- say "Installing DaisyUI files...", :green
13
-
14
- # Download DaisyUI files
15
- run "curl -sLo app/assets/tailwind/daisyui.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js" rescue nil
16
- run "curl -sLo app/assets/tailwind/daisyui-theme.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js" rescue nil
12
+ def install_phlex_rails
13
+ if gem_installed?("phlex-rails")
14
+ say "phlex-rails is already installed", :green
15
+ else
16
+ say "Adding phlex-rails to Gemfile", :green
17
+ run %(bundle add phlex-rails)
18
+
19
+ say "Generating phlex-rails structure", :green
20
+ run "bin/rails generate phlex:install"
21
+ end
17
22
  end
18
23
 
19
- def update_tailwind_config
20
- tailwind_config_path = "app/assets/tailwind/application.css"
21
-
22
- if File.exist?(tailwind_config_path)
23
- say "Updating Tailwind CSS configuration...", :green
24
-
25
- content = File.read(tailwind_config_path)
24
+ def install_daisyui_npm
25
+ if File.exist?("package.json")
26
+ say "Installing DaisyUI via NPM...", :green
26
27
 
27
- unless content.include?("@plugin \"./daisyui.js\"")
28
- # Add DaisyUI plugin line after @import "tailwindcss"
29
- updated_content = content.gsub(
30
- /@import "tailwindcss" source\(none\);/,
31
- "@import \"tailwindcss\" source(none);\n@plugin \"./daisyui.js\";"
32
- )
33
-
34
- File.write(tailwind_config_path, updated_content)
35
- say "Added DaisyUI plugin to Tailwind CSS configuration", :green
28
+ # Check if daisyui is already installed
29
+ package_json = File.read("package.json")
30
+ unless package_json.include?('"daisyui"')
31
+ if system("which npm > /dev/null")
32
+ run "npm install daisyui"
33
+ say "DaisyUI installed via NPM", :green
34
+ elsif system("which yarn > /dev/null")
35
+ run "yarn add daisyui"
36
+ say "DaisyUI installed via Yarn", :green
37
+ else
38
+ say "Neither NPM nor Yarn found. Please install DaisyUI manually: npm install daisyui", :yellow
39
+ end
36
40
  else
37
- say "DaisyUI plugin already configured in Tailwind CSS", :yellow
41
+ say "DaisyUI already installed in package.json", :yellow
38
42
  end
39
43
  else
40
- say "Tailwind CSS configuration not found. Please add @plugin \"./daisyui.js\"; to your Tailwind CSS configuration manually.", :yellow
44
+ say "No package.json found. Skipping NPM installation.", :yellow
45
+ say "Please install DaisyUI manually: npm install daisyui", :yellow
46
+ end
47
+ end
48
+
49
+ def copy_daisyui_files
50
+ say "DaisyUI assets are now provided automatically via Rails Engine! 🎉", :green
51
+ say "CSS and JS files are included automatically in your application.", :blue
52
+ end
53
+
54
+ def copy_components_to_vendor
55
+ say "Copying all DaisyUI components to vendor directory...", :green
56
+
57
+ components_source_path = File.join(self.class.source_root, "components")
58
+ component_files = Dir.glob(File.join(components_source_path, "*.rb"))
59
+ say "Found #{component_files.count} component files", :blue
60
+
61
+ component_files.each do |component_path|
62
+ component_file_name = File.basename(component_path)
63
+ # We are using relative path from source_root
64
+ relative_path = File.join("components", component_file_name)
65
+ destination_path = Rails.root.join("vendor/daisyui_on_phlex/components", component_file_name)
66
+
67
+ copy_file relative_path, destination_path, force: options["force"]
41
68
  end
42
69
  end
43
70
 
71
+ def copy_base_class
72
+ say "Copying base class...", :green
73
+ # We are using relative path from source_root
74
+ copy_file "base.rb", Rails.root.join("vendor/daisyui_on_phlex/base.rb"), force: options["force"]
75
+ end
76
+
77
+ def create_vendor_initializer
78
+ vendor_initializer_path = Rails.root.join("config/initializers/daisyui_on_phlex.rb")
79
+
80
+ create_file vendor_initializer_path, <<~RUBY, force: options["force"]
81
+ # frozen_string_literal: true
82
+
83
+ module DaisyuiOnPhlex
84
+ extend Phlex::Kit
85
+ end
86
+
87
+ # Require base.rb first
88
+ require Rails.root.join("vendor/daisyui_on_phlex/base.rb")
89
+
90
+ # Load all DaisyUI components from vendor directory
91
+ Dir[Rails.root.join("vendor/daisyui_on_phlex/components/*.rb")].each do |file|
92
+ require file
93
+ end
94
+
95
+ # Configure TailwindMerge for CSS class merging
96
+ if defined?(TailwindMerge) && defined?(ClassVariants)
97
+ ClassVariants.configure do |config|
98
+ merger = TailwindMerge::Merger.new
99
+ config.process_classes_with do |classes|
100
+ merger.merge(classes)
101
+ end
102
+ end
103
+ end
104
+ RUBY
105
+
106
+ say "Created vendor initializer: config/initializers/daisyui_on_phlex.rb", :green
107
+ end
108
+
109
+ def update_tailwind_config
110
+ say "📝 To include DaisyUI styles in your application:", :green
111
+ say ""
112
+ say "1. Add to your main CSS file (application.css or application.tailwind.css):", :yellow
113
+ say " //= require daisyui_on_phlex", :cyan
114
+ say ""
115
+ say "2. Or in your JavaScript file (application.js):", :yellow
116
+ say " //= require daisyui_on_phlex", :cyan
117
+ say ""
118
+ say "3. For Tailwind CSS, ensure your tailwind.config.js includes:", :yellow
119
+ say ' content: ["./vendor/daisyui_on_phlex/**/*.rb"]', :cyan
120
+ say ""
121
+ end
122
+
44
123
  def show_readme
124
+ components_source_path = File.join(self.class.source_root, "components")
125
+ component_count = Dir.glob(File.join(components_source_path, "*.rb")).count
126
+
45
127
  say <<~TEXT, :green
46
128
 
47
129
  DaisyUI On Phlex has been installed! 🎉
48
130
 
49
- You can now use DaisyUI components in your Phlex views:
131
+ All #{component_count} components have been copied to vendor/daisyui_on_phlex/
132
+ ✅ DaisyUI CSS & JS automatically provided via Rails Engine
133
+ ✅ Vendor initializer created (config/initializers/daisyui_on_phlex.rb)
134
+ ✅ Ready to use in your Phlex views
135
+
136
+ 📦 Optional: Install DaisyUI via NPM for latest features:
137
+ npm install daisyui
138
+ # or
139
+ yarn add daisyui
140
+
141
+ 🎨 Recommended gems for better CSS handling:
142
+ gem 'tailwind_merge'
143
+ gem 'class_variants'
144
+
145
+ 🚀 You can now use DaisyUI components in your Phlex views:
50
146
 
51
147
  # In your Phlex view
52
148
  class MyView < Phlex::HTML
@@ -61,19 +157,24 @@ module DaisyuiOnPhlex
61
157
  end
62
158
  end
63
159
 
64
- Available components:
65
- - Button
66
- - Alert
67
- - Card
68
- - Badge
69
- - Modal
70
- - Input
71
- - And more coming soon...
160
+ 🎯 All 61+ components are now available:
161
+ - Button, Alert, Card, Badge, Modal, Input
162
+ - Navigation: Navbar, Menu, Breadcrumbs, Tabs
163
+ - Data Display: Table, Stat, Timeline, Avatar
164
+ - Forms: Checkbox, Radio, Select, Toggle
165
+ - And many more...
72
166
 
73
- For more information, visit: https://github.com/jacob/daisyui-on-phlex
167
+ 📁 Components are in vendor/daisyui_on_phlex/components/ and can be customized.
168
+ 📚 For documentation: https://github.com/jacob/daisyui-on-phlex
74
169
 
75
170
  TEXT
76
171
  end
172
+
173
+ private
174
+
175
+ def gem_installed?(name)
176
+ Gem::Specification.find_all_by_name(name).any?
177
+ end
77
178
  end
78
179
  end
79
180
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module DaisyuiOnPhlex
4
- VERSION = "0.2.4"
4
+ VERSION = "0.4.0"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: daisyui_on_phlex
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.4
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - JacobAlexander
@@ -69,20 +69,20 @@ dependencies:
69
69
  requirements:
70
70
  - - "~>"
71
71
  - !ruby/object:Gem::Version
72
- version: '1.31'
72
+ version: '1.3'
73
73
  - - ">="
74
74
  - !ruby/object:Gem::Version
75
- version: 1.31.0
75
+ version: 1.3.0
76
76
  type: :runtime
77
77
  prerelease: false
78
78
  version_requirements: !ruby/object:Gem::Requirement
79
79
  requirements:
80
80
  - - "~>"
81
81
  - !ruby/object:Gem::Version
82
- version: '1.31'
82
+ version: '1.3'
83
83
  - - ">="
84
84
  - !ruby/object:Gem::Version
85
- version: 1.31.0
85
+ version: 1.3.0
86
86
  - !ruby/object:Gem::Dependency
87
87
  name: rails
88
88
  requirement: !ruby/object:Gem::Requirement
@@ -142,7 +142,6 @@ extra_rdoc_files: []
142
142
  files:
143
143
  - ".github/copilot-instructions.md"
144
144
  - CHANGELOG.md
145
- - INSTALLATION.md
146
145
  - LICENSE
147
146
  - README.md
148
147
  - Rakefile
data/INSTALLATION.md DELETED
@@ -1,129 +0,0 @@
1
- # DaisyUI on Phlex Installation
2
-
3
- After installing the gem, follow these steps to set up DaisyUI styles in your Rails application:
4
-
5
- ## 1. Import the main CSS file
6
-
7
- Add the following import to your `app/assets/stylesheets/application.css` (or `app/assets/stylesheets/application.tailwind.css` if using tailwindcss-rails):
8
-
9
- ```css
10
- @import "tailwindcss";
11
- @import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
12
- ```
13
-
14
- ## 2. Configure your HTML layout
15
-
16
- Make sure your HTML layout supports theme switching by adding the `data-theme` attribute to your `<html>` tag:
17
-
18
- ```erb
19
- <!DOCTYPE html>
20
- <html data-theme="light">
21
- <head>
22
- <!-- Your head content -->
23
- </head>
24
- <body>
25
- <!-- Your body content -->
26
- </body>
27
- </html>
28
- ```
29
-
30
- ## 3. Theme Configuration
31
-
32
- The CSS file includes the most popular DaisyUI themes by default:
33
- - `light` (default)
34
- - `dark` (prefers dark mode)
35
- - `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
36
- - `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
37
- - `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
38
- - `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
39
-
40
- ## 4. Theme Switching
41
-
42
- To enable theme switching, you can use the `data-theme` attribute:
43
-
44
- ```erb
45
- <select data-choose-theme>
46
- <option value="light">Light</option>
47
- <option value="dark">Dark</option>
48
- <option value="cupcake">Cupcake</option>
49
- <option value="dracula">Dracula</option>
50
- <!-- Add more themes as needed -->
51
- </select>
52
- ```
53
-
54
- For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
55
-
56
- ```bash
57
- npm install theme-change
58
- ```
59
-
60
- Then initialize it in your JavaScript:
61
-
62
- ```javascript
63
- import { themeChange } from 'theme-change'
64
- themeChange()
65
- ```
66
-
67
- ## 5. Custom Themes
68
-
69
- If you want to add custom themes or modify the theme list, you can create your own CSS file that overrides the default configuration:
70
-
71
- ```css
72
- @import "tailwindcss";
73
-
74
- @plugin "daisyui" {
75
- themes: light --default, dark --prefersdark, your-custom-theme;
76
- }
77
-
78
- @plugin "daisyui/theme" {
79
- name: "your-custom-theme";
80
- default: false;
81
- color-scheme: light;
82
-
83
- --color-primary: oklch(55% 0.3 240);
84
- --color-primary-content: oklch(98% 0.01 240);
85
- /* Add more custom colors */
86
- }
87
-
88
- @import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
89
- ```
90
-
91
- ## 6. Component Usage
92
-
93
- Now you can use DaisyUI on Phlex components in your views:
94
-
95
- ```ruby
96
- # In your view or component
97
- render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
98
- "Click me!"
99
- end
100
-
101
- render DaisyuiOnPhlex::Components::Card.new(class: "w-96") do |card|
102
- card.with_body do
103
- "This is a card with DaisyUI styling"
104
- end
105
- end
106
- ```
107
-
108
- ## Features Included
109
-
110
- The main CSS file provides:
111
-
112
- - **Theme Configuration**: 25+ popular DaisyUI themes enabled
113
- - **Accessibility Enhancements**: Better focus styles, high contrast support
114
- - **Responsive Design**: Mobile-first approach with responsive utilities
115
- - **Animation Support**: Smooth transitions and micro-interactions
116
- - **Print Styles**: Optimized printing experience
117
- - **Performance**: Reduced motion support for accessibility
118
- - **Developer Experience**: Enhanced component integration
119
-
120
- ## Troubleshooting
121
-
122
- If you encounter issues:
123
-
124
- 1. **Styles not loading**: Ensure the import is after `@import "tailwindcss";`
125
- 2. **Themes not working**: Check that your HTML has the `data-theme` attribute
126
- 3. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
127
- 4. **Missing components**: Verify that the gem is properly installed and required
128
-
129
- For more help, check the [project repository](https://github.com/jacob/daisyui-on-phlex) or open an issue.