shadcn_phlexcomponents 0.1.18 → 0.1.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc485b4a5567a237dd094c0dd76b2c1457c57dec5f62fff98718b6b174e07da2
-  data.tar.gz: 816bda190d7fab68ae7b551165b1da2e5cc913fe1a16095fa1b5f966f43b6785
+  metadata.gz: 1ff13d0989535d069db406d2c9f930cdae7f68500c828c1027263a053559eefd
+  data.tar.gz: 14f27e9c3ab82a23e1dc9e018cf1605703a49a3d43b27291e2cf98917740f042
 SHA512:
-  metadata.gz: 19ea1d9584e4d004d8ae4db402f3dea2dc423ad5d893075eff90222214ba6c3cf14e292521e47699c6e9c64718bee03861729f8d9a2ae3729f32f3c49cb36d1b
-  data.tar.gz: 818a134df559fb86fe46a4bb4d757786a4efe77ff31738c1f59f21f7315321a0f6cd5d5e1814bdbc279c096ceae58200d43ee940492edc0937eaf7f5de52ec15
+  metadata.gz: 9f5c507e1b4777d8c0f8f456b5746350fcaadc7590e20e743a3ce70daece80edafb7fda632e369f768d1a9032de6cce0ef913a94c190f9478997dbc5ebb743b5
+  data.tar.gz: 68bb596923e049534b656793da8d944802c16da9c248216699cc4c98c6609a45496a8fd5cdb7c42e973d068f2fab3aee401c1c9585cc205eb8289d4a77633eab

data/README.md

@@ -1,53 +1,351 @@
 # ShadcnPhlexcomponents
 
-TODO: Delete this and the text below, and describe your gem
+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.
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/shadcn_phlexcomponents`. To experiment with that code, run `bin/console` for an interactive prompt.
+## ✨ Features
 
-## Installation
+- 🎨 **50+ Beautiful Components** - Complete UI component library with consistent design
+- ⚡ **Phlex-Powered** - Fast, type-safe Ruby components
+- 🎯 **Stimulus Integration** - Interactive components with modern JavaScript
+- 🎪 **Tailwind CSS** - Utility-first styling with full customization
+- ♿ **Accessibility First** - ARIA-compliant and keyboard navigation support
+- 🌙 **Dark Mode Ready** - Built-in theme switching support
+- 📱 **Responsive Design** - Mobile-first approach
+- 🔧 **Highly Customizable** - Extensive configuration options
+- 🚀 **Easy Installation** - Simple setup with Rails integration
 
-TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
+## 📦 Installation
 
-Install the gem and add to the application's Gemfile by executing:
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'shadcn_phlexcomponents'
+```
+
+And then execute:
 
 ```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+bundle install
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+Or install it yourself as:
 
 ```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+gem install shadcn_phlexcomponents
+```
+
+### Rails Integration
+
+After installing the gem, run the installer to set up the necessary files:
+
+```bash
+rails generate install:shadcn_phlexcomponents
+```
+
+This will:
+- Copy JavaScript controllers and utilities
+- Set up Tailwind CSS configuration
+- Add Stimulus integration
+- Configure component stylesheets
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```ruby
+# In your view or component
+class MyView < Phlex::HTML
+  def view_template
+    render ShadcnPhlexcomponents::Button.new(variant: :primary) do
+      "Click me!"
+    end
+  end
+end
+```
+
+### With Rails Helpers
+
+```erb
+<%# In your ERB templates %>
+<%= render ShadcnPhlexcomponents::Card.new do %>
+  <%= render ShadcnPhlexcomponents::Card::Header.new do %>
+    <h3>Card Title</h3>
+  <% end %>
+  <%= render ShadcnPhlexcomponents::Card::Content.new do %>
+    <p>Card content goes here.</p>
+  <% end %>
+<% end %>
+```
+
+## 🧩 Available Components
+
+### Layout & Structure
+- **Aspect Ratio** - Maintain aspect ratios for media content
+- **Card** - Flexible content containers with header, content, and footer
+- **Separator** - Visual dividers for content sections
+- **Sheet** - Slide-out panels and drawers
+- **Skeleton** - Loading placeholders
+
+### Navigation
+- **Breadcrumb** - Navigation hierarchy display
+- **Pagination** - Page navigation controls
+- **Tabs** - Tabbed content organization
+
+### Form Components
+- **Button** - Primary action triggers with multiple variants
+- **Input** - Text input fields with validation states
+- **Textarea** - Multi-line text input
+- **Label** - Accessible form labels
+- **Checkbox** - Single and grouped checkboxes
+- **Radio Group** - Radio button selections
+- **Select** - Dropdown selections
+- **Switch** - Toggle switches
+- **Slider** - Range input controls
+- **Date Picker** - Single date selection
+- **Date Range Picker** - Date range selection
+- **Combobox** - Searchable select dropdowns
+
+### Interactive Components
+- **Accordion** - Collapsible content sections
+- **Alert Dialog** - Modal confirmations and alerts
+- **Dialog** - Modal dialogs and overlays
+- **Dropdown Menu** - Context menus and actions
+- **Hover Card** - Contextual information on hover
+- **Popover** - Floating content containers
+- **Tooltip** - Helpful text on hover
+- **Command** - Command palette interface
+- **Collapsible** - Expandable content areas
+
+### Feedback & Status
+- **Alert** - Status messages and notifications
+- **Badge** - Labels and status indicators
+- **Progress** - Progress bars and indicators
+- **Toast** - Notification messages
+- **Loading Button** - Buttons with loading states
+
+### Display Components
+- **Avatar** - User profile images with fallbacks
+- **Table** - Data tables with sorting and styling
+- **Toggle** - Binary state toggles
+
+### Utilities
+- **Link** - Styled navigation links
+- **Theme Switcher** - Light/dark mode toggle
+
+## 🎨 Customization
+
+### Component Variants
+
+Most components support multiple variants for different use cases:
+
+```ruby
+# Button variants
+render ShadcnPhlexcomponents::Button.new(variant: :default) { "Default" }
+render ShadcnPhlexcomponents::Button.new(variant: :destructive) { "Delete" }
+render ShadcnPhlexcomponents::Button.new(variant: :outline) { "Cancel" }
+render ShadcnPhlexcomponents::Button.new(variant: :ghost) { "Ghost" }
+render ShadcnPhlexcomponents::Button.new(variant: :link) { "Link" }
+
+# Button sizes
+render ShadcnPhlexcomponents::Button.new(size: :sm) { "Small" }
+render ShadcnPhlexcomponents::Button.new(size: :default) { "Default" }
+render ShadcnPhlexcomponents::Button.new(size: :lg) { "Large" }
+render ShadcnPhlexcomponents::Button.new(size: :icon) { icon(:plus) }
+```
+
+### Global Configuration
+
+Configure default component styles in an initializer:
+
+```ruby
+# config/initializers/shadcn_phlexcomponents.rb
+ShadcnPhlexcomponents.configure do |config|
+  config.button = {
+    base: "custom-base-classes",
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300"
+      }
+    }
+  }
+end
+```
+
+### CSS Customization
+
+Override component styles using Tailwind CSS:
+
+```css
+/* app/assets/stylesheets/application.css */
+.shadcn-button {
+  @apply font-semibold transition-all duration-200;
+}
+
+.shadcn-button--primary {
+  @apply bg-brand-primary hover:bg-brand-primary-dark;
+}
+```
+
+## 🎯 Interactive Components
+
+Components with JavaScript functionality automatically include Stimulus controllers:
+
+```ruby
+# Accordion with automatic JavaScript behavior
+render ShadcnPhlexcomponents::Accordion.new do
+  render ShadcnPhlexcomponents::Accordion::Item.new(value: "item-1") do
+    render ShadcnPhlexcomponents::Accordion::Trigger.new { "Section 1" }
+    render ShadcnPhlexcomponents::Accordion::Content.new do
+      "Content for section 1"
+    end
+  end
+end
+
+# Dialog with modal behavior
+render ShadcnPhlexcomponents::Dialog.new do
+  render ShadcnPhlexcomponents::Dialog::Trigger.new do
+    render ShadcnPhlexcomponents::Button.new { "Open Dialog" }
+  end
+  render ShadcnPhlexcomponents::Dialog::Content.new do
+    render ShadcnPhlexcomponents::Dialog::Header.new do
+      render ShadcnPhlexcomponents::Dialog::Title.new { "Dialog Title" }
+    end
+    "Dialog content goes here"
+  end
+end
+```
+
+## 🌙 Dark Mode
+
+Enable dark mode support by adding the theme switcher:
+
+```ruby
+# In your layout
+render ShadcnPhlexcomponents::ThemeSwitcher.new
 ```
 
-## Usage
+Components automatically adapt to dark mode using Tailwind's `dark:` classes.
 
-TODO: Write usage instructions here
+## 📋 Form Integration
 
-## Development
+Components work seamlessly with Rails form helpers:
+
+```ruby
+# Using with Rails forms
+form_with model: @user do |form|
+  div(class: "space-y-4") do
+    render ShadcnPhlexcomponents::Form::FormField.new(form: form, name: :name) do
+      render ShadcnPhlexcomponents::Label.new { "Name" }
+      render ShadcnPhlexcomponents::Input.new(
+        name: "user[name]",
+        value: @user.name,
+        placeholder: "Enter your name"
+      )
+    end
+    
+    render ShadcnPhlexcomponents::Button.new(type: :submit) { "Save" }
+  end
+end
+```
+
+## 🛠️ Development
 
 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.
 
-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).
+### Available Commands
+
+```bash
+# Run tests
+rake test
+
+# Run linting
+rake rubocop
+rubocop
+
+# Build JavaScript assets
+yarn build
+
+# Install gem locally
+bundle exec rake install
+
+# Release new version
+bundle exec rake release
+```
+
+### Component Development
+
+When creating new components:
+
+1. Inherit from `ShadcnPhlexcomponents::Base`
+2. Use `class_variants` for styling variations
+3. Add Stimulus controllers for interactivity
+4. Include comprehensive tests
+5. Follow existing naming conventions
+
+## 🧪 Testing
+
+The gem includes comprehensive test coverage:
+
+```bash
+# Run all tests
+rake test
+
+# Run specific test file
+ruby test/test_button.rb
+
+# Run with coverage
+rake test
+```
+
+## 📚 Dependencies
+
+### Ruby Dependencies
+- **Rails** (~> 8.0) - Web framework
+- **Phlex Rails** (~> 2.1) - Component framework
+- **Class Variants** (~> 1.1) - CSS class management
+- **Lucide Rails** (~> 0.5.1) - Icon library
+- **Tailwind Merge** (~> 1.0) - CSS class merging
+
+### JavaScript Dependencies
+- **Stimulus** (^3.2.2) - JavaScript framework
+- **Floating UI** (^1.7.2) - Positioning library
+- **Day.js** (^1.11.13) - Date manipulation
+- **Fuse.js** (^7.1.0) - Fuzzy searching
+- **DOMPurify** (^3.2.6) - HTML sanitization
+
+## 🤝 Contributing
 
-## Contributing
+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).
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/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/[USERNAME]/shadcn_phlexcomponents/blob/main/CODE_OF_CONDUCT.md).
+### Contributing Guidelines
 
-## Code of Conduct
+1. Fork the repository
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Add tests for your changes
+4. Ensure all tests pass (`rake test`)
+5. Run the linter (`rake rubocop`)
+6. Commit your changes (`git commit -am 'Add some feature'`)
+7. Push to the branch (`git push origin my-new-feature`)
+8. Create a new Pull Request
 
-Everyone interacting in the ShadcnPhlexcomponents project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/shadcn_phlexcomponents/blob/main/CODE_OF_CONDUCT.md).
+## 📄 License
 
-## [Unreleased] - YYYY-MM-DD
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-### Added
+## 🙏 Acknowledgments
 
-### Changed
+- Inspired by [shadcn/ui](https://ui.shadcn.com/) - The original React component library
+- Built with [Phlex](https://www.phlex.fun/) - Ruby HTML components
+- Styled with [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
+- Icons provided by [Lucide](https://lucide.dev/) - Beautiful open source icons
 
-### Deprecated
+## 📞 Support
 
-### Removed
+- 📖 [Documentation](https://github.com/sean-yeoh/shadcn_phlexcomponents)
+- 🐛 [Issues](https://github.com/sean-yeoh/shadcn_phlexcomponents/issues)
+- 💬 [Discussions](https://github.com/sean-yeoh/shadcn_phlexcomponents/discussions)
 
-### Fixed
+---
 
-### Security
+Made with ❤️ by [Sean Yeoh](https://github.com/sean-yeoh)

data/app/javascript/controllers/accordion_controller.js

@@ -1,97 +1,108 @@
-import { Controller } from '@hotwired/stimulus';
-import { showContent, hideContent, getNextEnabledIndex, getPreviousEnabledIndex, } from '../utils';
+import { Controller } from "@hotwired/stimulus";
+import {
+  showContent,
+  hideContent,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+} from "../utils";
 const AccordionController = class extends Controller {
-    // targets
-    static targets = ['item', 'trigger', 'content'];
-    // values
-    static values = { openItems: Array };
-    connect() {
-        this.multiple = this.element.dataset.multiple === 'true';
+  static name = "accordion";
+  // targets
+  static targets = ["item", "trigger", "content"];
+  // values
+  static values = { openItems: Array };
+  connect() {
+    this.multiple = this.element.dataset.multiple === "true";
+  }
+  contentTargetConnected(content) {
+    setTimeout(() => {
+      this.setContentHeight(content);
+    }, 100);
+  }
+  toggle(event) {
+    const trigger = event.currentTarget;
+    const item = this.itemTargets.find((item) => {
+      return item.contains(trigger);
+    });
+    if (!item) return;
+    const value = item.dataset.value;
+    const isOpen = this.openItemsValue.includes(value);
+    if (isOpen) {
+      this.openItemsValue = this.openItemsValue.filter((v) => v !== value);
+    } else {
+      if (this.multiple) {
+        this.openItemsValue = [...this.openItemsValue, value];
+      } else {
+        this.openItemsValue = [value];
+      }
     }
-    contentTargetConnected(content) {
-        setTimeout(() => {
-            this.setContentHeight(content);
-        }, 100);
+  }
+  focusTrigger(event) {
+    const trigger = event.currentTarget;
+    const key = event.key;
+    const focusableTriggers = this.triggerTargets.filter(
+      (trigger) => !trigger.disabled,
+    );
+    const index = focusableTriggers.indexOf(trigger);
+    let newIndex = 0;
+    if (key === "ArrowUp") {
+      newIndex = getPreviousEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      });
+    } else {
+      newIndex = getNextEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      });
     }
-    toggle(event) {
-        const trigger = event.currentTarget;
-        const item = this.itemTargets.find((item) => {
-            return item.contains(trigger);
+    focusableTriggers[newIndex].focus();
+  }
+  openItemsValueChanged(openItems) {
+    this.itemTargets.forEach((item) => {
+      const itemValue = item.dataset.value;
+      const trigger = this.triggerTargets.find((trigger) =>
+        item.contains(trigger),
+      );
+      const content = this.contentTargets.find((content) =>
+        item.contains(content),
+      );
+      if (openItems.includes(itemValue)) {
+        showContent({
+          trigger,
+          content: content,
+          contentContainer: content,
         });
-        if (!item)
-            return;
-        const value = item.dataset.value;
-        const isOpen = this.openItemsValue.includes(value);
-        if (isOpen) {
-            this.openItemsValue = this.openItemsValue.filter((v) => v !== value);
-        }
-        else {
-            if (this.multiple) {
-                this.openItemsValue = [...this.openItemsValue, value];
-            }
-            else {
-                this.openItemsValue = [value];
-            }
-        }
-    }
-    focusTrigger(event) {
-        const trigger = event.currentTarget;
-        const key = event.key;
-        const focusableTriggers = this.triggerTargets.filter((trigger) => !trigger.disabled);
-        const index = focusableTriggers.indexOf(trigger);
-        let newIndex = 0;
-        if (key === 'ArrowUp') {
-            newIndex = getPreviousEnabledIndex({
-                items: focusableTriggers,
-                currentIndex: index,
-                wrapAround: true,
-            });
-        }
-        else {
-            newIndex = getNextEnabledIndex({
-                items: focusableTriggers,
-                currentIndex: index,
-                wrapAround: true,
-            });
-        }
-        focusableTriggers[newIndex].focus();
-    }
-    openItemsValueChanged(openItems) {
-        this.itemTargets.forEach((item) => {
-            const itemValue = item.dataset.value;
-            const trigger = this.triggerTargets.find((trigger) => item.contains(trigger));
-            const content = this.contentTargets.find((content) => item.contains(content));
-            if (openItems.includes(itemValue)) {
-                showContent({
-                    trigger,
-                    content: content,
-                    contentContainer: content,
-                });
-            }
-            else {
-                hideContent({
-                    trigger,
-                    content: content,
-                    contentContainer: content,
-                });
-            }
-        });
-    }
-    setContentHeight(element) {
-        const height = this.getContentHeight(element) || element.getBoundingClientRect().height;
-        element.style.setProperty('--radix-accordion-content-height', `${height}px`);
-    }
-    getContentHeight(el) {
-        const clone = el.cloneNode(true);
-        Object.assign(clone.style, {
-            display: 'block',
-            position: 'absolute',
-            visibility: 'hidden',
+      } else {
+        hideContent({
+          trigger,
+          content: content,
+          contentContainer: content,
         });
-        document.body.appendChild(clone);
-        const height = clone.getBoundingClientRect().height;
-        document.body.removeChild(clone);
-        return height;
-    }
+      }
+    });
+  }
+  setContentHeight(element) {
+    const height =
+      this.getContentHeight(element) || element.getBoundingClientRect().height;
+    element.style.setProperty(
+      "--radix-accordion-content-height",
+      `${height}px`,
+    );
+  }
+  getContentHeight(el) {
+    const clone = el.cloneNode(true);
+    Object.assign(clone.style, {
+      display: "block",
+      position: "absolute",
+      visibility: "hidden",
+    });
+    document.body.appendChild(clone);
+    const height = clone.getBoundingClientRect().height;
+    document.body.removeChild(clone);
+    return height;
+  }
 };
 export { AccordionController };

data/app/javascript/controllers/alert_dialog_controller.js

@@ -1,7 +1,8 @@
-import { DialogController } from './dialog_controller';
+import { DialogController } from "./dialog_controller";
 const AlertDialogController = class extends DialogController {
-    onDOMClick() {
-        return;
-    }
+  static name = "alert-dialog";
+  onDOMClick() {
+    return;
+  }
 };
 export { AlertDialogController };

data/app/javascript/controllers/avatar_controller.js

@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const AvatarController = class extends Controller {
-    // targets
-    static targets = ['image', 'fallback'];
-    connect() {
-        this.imageTarget.onerror = () => {
-            if (this.hasFallbackTarget) {
-                this.fallbackTarget.classList.remove('hidden');
-            }
-            this.imageTarget.classList.add('hidden');
-        };
-    }
+  static name = "avatar";
+  // targets
+  static targets = ["image", "fallback"];
+  connect() {
+    this.imageTarget.onerror = () => {
+      if (this.hasFallbackTarget) {
+        this.fallbackTarget.classList.remove("hidden");
+      }
+      this.imageTarget.classList.add("hidden");
+    };
+  }
 };
 export { AvatarController };

data/app/javascript/controllers/checkbox_controller.js

@@ -1,30 +1,30 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const CheckboxController = class extends Controller {
-    // targets
-    static targets = ['input', 'indicator'];
-    // values
-    static values = {
-        isChecked: Boolean,
-    };
-    toggle() {
-        this.isCheckedValue = !this.isCheckedValue;
-    }
-    preventDefault(event) {
-        event.preventDefault();
-    }
-    isCheckedValueChanged(isChecked) {
-        if (isChecked) {
-            this.element.ariaChecked = 'true';
-            this.element.dataset.state = 'checked';
-            this.inputTarget.checked = true;
-            this.indicatorTarget.classList.remove('hidden');
-        }
-        else {
-            this.element.ariaChecked = 'false';
-            this.element.dataset.state = 'unchecked';
-            this.inputTarget.checked = false;
-            this.indicatorTarget.classList.add('hidden');
-        }
+  static name = "checkbox";
+  // targets
+  static targets = ["input", "indicator"];
+  // values
+  static values = {
+    isChecked: Boolean,
+  };
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue;
+  }
+  preventDefault(event) {
+    event.preventDefault();
+  }
+  isCheckedValueChanged(isChecked) {
+    if (isChecked) {
+      this.element.ariaChecked = "true";
+      this.element.dataset.state = "checked";
+      this.inputTarget.checked = true;
+      this.indicatorTarget.classList.remove("hidden");
+    } else {
+      this.element.ariaChecked = "false";
+      this.element.dataset.state = "unchecked";
+      this.inputTarget.checked = false;
+      this.indicatorTarget.classList.add("hidden");
     }
+  }
 };
 export { CheckboxController };