daisyui_on_phlex 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b9390f396480907ba67e526f4f80f63340d8252e4e35b2ee2b7e3fd9db80f40e
+  data.tar.gz: 3fd4df6af9e64ac586ccafd93e85771201eddba2d1ac84dfd5f2f9cf69123675
+SHA512:
+  metadata.gz: b83d7bf8d7e39370e3323ba5166d7d490b7f9a37d73d3ea93cc6a0e8e7c4ccc195c4466eed79f2e68752c25fd5a1c1e53bafe188c50697ff66cb70987b91d961
+  data.tar.gz: eb980cea2627e1e8334532fdc193820766d706ff7a0bcda6ae3cd78b9dc4128e3b3673501c4a88d181444c5b9386bbbb9ff77fde3b023bf6685e9acff84222b4

data/.github/copilot-instructions.md

@@ -0,0 +1,54 @@
+<!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
+
+# DaisyUI On Phlex Development Instructions
+
+This is a Ruby gem that provides DaisyUI components as Phlex components for Rails applications.
+
+## Code Guidelines
+
+- All components should extend `DaisyuiOnPhlex::Base` class
+- Components should be placed in `lib/daisyui_on_phlex/components/` directory
+- Follow DaisyUI naming conventions for CSS classes
+- Use keyword arguments for component options
+- Provide sensible defaults for all options
+- All components should support additional HTML attributes via `**attributes`
+- Use `merge_classes` helper method for combining CSS classes
+
+## Component Structure
+
+```ruby
+module DaisyuiOnPhlex
+  module Components
+    class ComponentName < DaisyuiOnPhlex::Base
+      def initialize(option: default_value, **attributes)
+        @option = option
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        # Component implementation
+      end
+
+      private
+
+      def component_classes
+        # Build CSS classes based on options
+      end
+    end
+  end
+end
+```
+
+## DaisyUI Integration
+
+- Reference official DaisyUI documentation for component APIs
+- Maintain consistency with DaisyUI class naming conventions
+- Support all variants and modifiers that DaisyUI provides
+- Include proper accessibility attributes where applicable
+
+## Testing
+
+- Write RSpec tests for all components
+- Test different variants and options
+- Verify generated HTML structure and CSS classes
+- Test edge cases and error conditions

data/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-07-31
+
+### Added
+- Initial release of DaisyUI On Phlex gem
+- Button component with full DaisyUI variant support
+- Alert component with success, error, warning, and info variants
+- Card component with body, title, and actions methods
+- Badge component with size and variant options
+- Modal component with CSS-only modal implementation
+- Input component with different types and styling variants
+- Rails generator for easy installation (`rails generate daisyui_on_phlex:install`)
+- Automatic DaisyUI setup with Tailwind CSS integration
+- Comprehensive documentation and usage examples
+- RSpec test suite for all components
+- Base class with helper methods for component development
+
+### Changed
+- N/A (initial release)
+
+### Deprecated
+- N/A (initial release)
+
+### Removed  
+- N/A (initial release)
+
+### Fixed
+- N/A (initial release)
+
+### Security
+- N/A (initial release)
+
+## [0.1.0] - 2025-07-31
+
+- Initial release

data/INSTALLATION.md

@@ -0,0 +1,129 @@
+# DaisyUI on Phlex Installation
+
+After installing the gem, follow these steps to set up DaisyUI styles in your Rails application:
+
+## 1. Import the main CSS file
+
+Add the following import to your `app/assets/stylesheets/application.css` (or `app/assets/stylesheets/application.tailwind.css` if using tailwindcss-rails):
+
+```css
+@import "tailwindcss";
+@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
+```
+
+## 2. Configure your HTML layout
+
+Make sure your HTML layout supports theme switching by adding the `data-theme` attribute to your `<html>` tag:
+
+```erb
+<!DOCTYPE html>
+<html data-theme="light">
+  <head>
+    <!-- Your head content -->
+  </head>
+  <body>
+    <!-- Your body content -->
+  </body>
+</html>
+```
+
+## 3. Theme Configuration
+
+The CSS file includes the most popular DaisyUI themes by default:
+- `light` (default)
+- `dark` (prefers dark mode)
+- `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
+- `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
+- `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
+- `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
+
+## 4. Theme Switching
+
+To enable theme switching, you can use the `data-theme` attribute:
+
+```erb
+<select data-choose-theme>
+  <option value="light">Light</option>
+  <option value="dark">Dark</option>
+  <option value="cupcake">Cupcake</option>
+  <option value="dracula">Dracula</option>
+  <!-- Add more themes as needed -->
+</select>
+```
+
+For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
+
+```bash
+npm install theme-change
+```
+
+Then initialize it in your JavaScript:
+
+```javascript
+import { themeChange } from 'theme-change'
+themeChange()
+```
+
+## 5. Custom Themes
+
+If you want to add custom themes or modify the theme list, you can create your own CSS file that overrides the default configuration:
+
+```css
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark, your-custom-theme;
+}
+
+@plugin "daisyui/theme" {
+  name: "your-custom-theme";
+  default: false;
+  color-scheme: light;
+  
+  --color-primary: oklch(55% 0.3 240);
+  --color-primary-content: oklch(98% 0.01 240);
+  /* Add more custom colors */
+}
+
+@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
+```
+
+## 6. Component Usage
+
+Now you can use DaisyUI on Phlex components in your views:
+
+```ruby
+# In your view or component
+render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
+  "Click me!"
+end
+
+render DaisyuiOnPhlex::Components::Card.new(class: "w-96") do |card|
+  card.with_body do
+    "This is a card with DaisyUI styling"
+  end
+end
+```
+
+## Features Included
+
+The main CSS file provides:
+
+- **Theme Configuration**: 25+ popular DaisyUI themes enabled
+- **Accessibility Enhancements**: Better focus styles, high contrast support
+- **Responsive Design**: Mobile-first approach with responsive utilities
+- **Animation Support**: Smooth transitions and micro-interactions
+- **Print Styles**: Optimized printing experience
+- **Performance**: Reduced motion support for accessibility
+- **Developer Experience**: Enhanced component integration
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. **Styles not loading**: Ensure the import is after `@import "tailwindcss";`
+2. **Themes not working**: Check that your HTML has the `data-theme` attribute
+3. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
+4. **Missing components**: Verify that the gem is properly installed and required
+
+For more help, check the [project repository](https://github.com/jacob/daisyui-on-phlex) or open an issue.

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jacob
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,227 @@
+# DaisyUI On Phlex
+
+[![Gem Version](https://badge.fury.io/rb/daisyui_on_phlex.svg)](https://badge.fury.io/rb/daisyui_on_phlex)
+
+A Ruby gem that provides [DaisyUI](https://daisyui.com) components as [Phlex](https://phlex.fun) components for Rails applications. This gem makes it easy to use DaisyUI's beautiful components in your Ruby on Rails projects with the power and simplicity of Phlex.
+
+## Features
+
+- 🎨 **Beautiful Components**: All DaisyUI components wrapped as Phlex components
+- 🚀 **Easy Integration**: Simple setup with Rails applications
+- 🔧 **Customizable**: Full access to DaisyUI's theming and customization options
+- 📦 **Lightweight**: Only includes the components you use
+- 🎯 **Type Safe**: Written with Ruby best practices
+- 🎭 **Theme Support**: 25+ built-in themes with easy switching
+- ♿ **Accessible**: Enhanced accessibility features and ARIA support
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'daisyui_on_phlex'
+```
+
+And then execute:
+
+```bash
+$ bundle install
+```
+
+Or install it yourself as:
+
+```bash
+$ gem install daisyui_on_phlex
+```
+
+## Quick Setup
+
+After installation, add the CSS import to your `app/assets/stylesheets/application.css`:
+
+```css
+@import "tailwindcss";
+@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
+```
+
+Make sure your HTML layout supports themes:
+
+```erb
+<!DOCTYPE html>
+<html data-theme="light">
+  <!-- Your app content -->
+</html>
+```
+
+For detailed setup instructions, see [INSTALLATION.md](INSTALLATION.md).
+
+## Setup
+
+Run the install generator to set up DaisyUI in your Rails application:
+
+```bash
+$ rails generate daisyui_on_phlex:install
+```
+
+This will:
+1. Download the latest DaisyUI JavaScript files
+2. Configure your Tailwind CSS to include the DaisyUI plugin
+3. Provide usage instructions
+
+## Usage
+
+Use DaisyUI components in your Phlex views:
+
+### Button Component
+
+```ruby
+class MyView < Phlex::HTML
+  def view_template
+    # Basic button
+    render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
+      "Click me!"
+    end
+    
+    # Button with options
+    render DaisyuiOnPhlex::Components::Button.new(
+      variant: :secondary,
+      size: :lg,
+      outline: true
+    ) do
+      "Large Outline Button"
+    end
+  end
+end
+```
+
+### Alert Component
+
+```ruby
+render DaisyuiOnPhlex::Components::Alert.new(variant: :success) do
+  "Operation completed successfully!"
+end
+
+render DaisyuiOnPhlex::Components::Alert.new(variant: :error) do
+  "Something went wrong!"
+end
+```
+
+### Card Component
+
+```ruby
+render DaisyuiOnPhlex::Components::Card.new(bordered: true) do |card|
+  card.body do
+    card.title { "Card Title" }
+    p { "This is the card content" }
+    card.actions do
+      render DaisyuiOnPhlex::Components::Button.new(variant: :primary) { "Action" }
+    end
+  end
+end
+```
+
+### Badge Component
+
+```ruby
+render DaisyuiOnPhlex::Components::Badge.new(variant: :primary) { "New" }
+render DaisyuiOnPhlex::Components::Badge.new(variant: :success, outline: true) { "Success" }
+```
+
+### Modal Component
+
+```ruby
+render DaisyuiOnPhlex::Components::Modal.new(id: "my-modal") do |modal|
+  modal.title { "Modal Title" }
+  p { "Modal content goes here" }
+  modal.action do
+    modal.close_button("Close")
+    render DaisyuiOnPhlex::Components::Button.new(variant: :primary) { "Save" }
+  end
+end
+
+# To open the modal, use a button or link that targets the modal ID
+render DaisyuiOnPhlex::Components::Button.new do
+  label for: "my-modal" do
+    "Open Modal"
+  end
+end
+```
+
+### Input Component
+
+```ruby
+render DaisyuiOnPhlex::Components::Input.new(
+  type: :text,
+  placeholder: "Enter your name",
+  variant: :primary
+)
+
+render DaisyuiOnPhlex::Components::Input.new(
+  type: :email,
+  size: :lg,
+  bordered: true
+)
+```
+
+## Available Components
+
+Currently implemented components:
+
+- **Button** - Interactive buttons with multiple variants and sizes
+- **Alert** - Notification messages with different types
+- **Card** - Content containers with optional borders and layouts
+- **Badge** - Small status indicators and labels
+- **Modal** - Overlay dialogs and modals
+- **Input** - Form input fields with styling variants
+
+More components are being added regularly. Check the [DaisyUI documentation](https://daisyui.com/components/) for the full list of available components.
+
+## Component Options
+
+### Button Options
+- `variant`: `:primary`, `:secondary`, `:accent`, `:neutral`, `:info`, `:success`, `:warning`, `:error`, `:ghost`, `:link`
+- `size`: `:xs`, `:sm`, `:md`, `:lg`
+- `outline`: `true/false`
+- `ghost`: `true/false`
+- `active`: `true/false`
+- `disabled`: `true/false`
+- `loading`: `true/false`
+- `wide`: `true/false`
+- `block`: `true/false`
+- `circle`: `true/false`
+- `square`: `true/false`
+
+### Alert Options  
+- `variant`: `:info`, `:success`, `:warning`, `:error`
+
+### Card Options
+- `compact`: `true/false`
+- `bordered`: `true/false`
+- `image_full`: `true/false`
+- `side`: `true/false`
+
+## Requirements
+
+- Ruby >= 3.0.0
+- Rails >= 6.0
+- Phlex >= 1.0
+- Tailwind CSS configured in your Rails application
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jacob/daisyui-on-phlex.
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/example.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+# Example usage of DaisyUI On Phlex components
+# This file demonstrates how to use the various components
+
+require_relative "lib/daisyui_on_phlex"
+
+class ExampleView < Phlex::HTML
+  def view_template
+    html do
+      head do
+        title { "DaisyUI On Phlex Example" }
+        # In a real Rails app, you would have Tailwind CSS and DaisyUI configured
+        link rel: "stylesheet", href: "https://cdn.tailwindcss.com"
+        script src: "https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css"
+      end
+
+      body(class: "p-8 space-y-8") do
+        h1(class: "text-3xl font-bold mb-8") { "DaisyUI On Phlex Components Demo" }
+
+        # Button examples
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Buttons" }
+          div(class: "space-x-4") do
+            render DaisyuiOnPhlex::Components::Button.new(variant: :primary) { "Primary" }
+            render DaisyuiOnPhlex::Components::Button.new(variant: :secondary) { "Secondary" }
+            render DaisyuiOnPhlex::Components::Button.new(variant: :accent, outline: true) { "Accent Outline" }
+            render DaisyuiOnPhlex::Components::Button.new(variant: :success, size: :lg) { "Large Success" }
+          end
+        end
+
+        # Alert examples
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Alerts" }
+          render DaisyuiOnPhlex::Components::Alert.new(variant: :info) do
+            "This is an info alert with an icon!"
+          end
+          render DaisyuiOnPhlex::Components::Alert.new(variant: :success) do
+            "Success! Your operation completed successfully."
+          end
+          render DaisyuiOnPhlex::Components::Alert.new(variant: :warning) do
+            "Warning! Please check your input."
+          end
+          render DaisyuiOnPhlex::Components::Alert.new(variant: :error) do
+            "Error! Something went wrong."
+          end
+        end
+
+        # Card example
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Card" }
+          render DaisyuiOnPhlex::Components::Card.new(bordered: true, class: "w-96") do |card|
+            card.body do
+              card.title { "Card Title" }
+              p { "This is a beautiful card component with DaisyUI styling." }
+              card.actions do
+                render DaisyuiOnPhlex::Components::Button.new(variant: :primary) { "Action" }
+                render DaisyuiOnPhlex::Components::Button.new(variant: :ghost) { "Cancel" }
+              end
+            end
+          end
+        end
+
+        # Badge examples
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Badges" }
+          div(class: "space-x-2") do
+            render DaisyuiOnPhlex::Components::Badge.new(variant: :primary) { "Primary" }
+            render DaisyuiOnPhlex::Components::Badge.new(variant: :secondary, outline: true) { "Secondary" }
+            render DaisyuiOnPhlex::Components::Badge.new(variant: :success, size: :lg) { "Success" }
+            render DaisyuiOnPhlex::Components::Badge.new(variant: :error, size: :sm) { "Error" }
+          end
+        end
+
+        # Input examples
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Inputs" }
+          div(class: "space-y-2 max-w-md") do
+            render DaisyuiOnPhlex::Components::Input.new(
+              placeholder: "Enter your name",
+              variant: :primary
+            )
+            render DaisyuiOnPhlex::Components::Input.new(
+              type: :email,
+              placeholder: "Enter your email",
+              variant: :secondary,
+              size: :lg
+            )
+          end
+        end
+
+        # Modal example
+        section(class: "space-y-4") do
+          h2(class: "text-2xl font-semibold") { "Modal" }
+          
+          # Button to open modal
+          label(for: "demo-modal", class: "btn btn-primary") { "Open Modal" }
+          
+          # Modal component
+          render DaisyuiOnPhlex::Components::Modal.new(id: "demo-modal") do |modal|
+            modal.title { "Example Modal" }
+            p(class: "py-4") { "This is a modal dialog created with DaisyUI On Phlex components." }
+            modal.action do
+              modal.close_button("Close")
+              render DaisyuiOnPhlex::Components::Button.new(variant: :primary) { "Save Changes" }
+            end
+          end
+        end
+      end
+    end
+  end
+end
+
+# Generate the example HTML
+if __FILE__ == $0
+  puts ExampleView.new.call
+end

data/lib/daisyui_on_phlex/base.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "phlex"
+require "tailwind_merge"
+
+module DaisyuiOnPhlex
+  class Base < Phlex::HTML
+    private
+
+    def merge_classes(*classes)
+      TailwindMerge::Merger.new.merge(classes.compact.join(" "))
+    end
+  end
+end