shadcn_phlexcomponents 0.1.18 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc485b4a5567a237dd094c0dd76b2c1457c57dec5f62fff98718b6b174e07da2
-  data.tar.gz: 816bda190d7fab68ae7b551165b1da2e5cc913fe1a16095fa1b5f966f43b6785
+  metadata.gz: c5d377669ac71723876caba8ecac23f1820237a773053cdfc6b5e20ad6b642eb
+  data.tar.gz: f374614e4bb89df3f3be0e27576e78f9563d2e9523ae00958d87b0406c5b6b19
 SHA512:
-  metadata.gz: 19ea1d9584e4d004d8ae4db402f3dea2dc423ad5d893075eff90222214ba6c3cf14e292521e47699c6e9c64718bee03861729f8d9a2ae3729f32f3c49cb36d1b
-  data.tar.gz: 818a134df559fb86fe46a4bb4d757786a4efe77ff31738c1f59f21f7315321a0f6cd5d5e1814bdbc279c096ceae58200d43ee940492edc0937eaf7f5de52ec15
+  metadata.gz: 45d78d035a55520fe8e8492c77c6ff756f95cbd206a99dc13763d48e0f947cc1b1a16297257c188475c2206492ba098fae5602a41374bcb2c4a50b2f30c73e7a
+  data.tar.gz: 2c7faa2124cb6ad5515f974227dfaf6c26d428e294292f493fc2f96a1f3790254c5fa014677a93d989fc4d25eaa51a56f9916aec1bee2a1ed2fc7f884d795a9d

data/README.md

@@ -1,53 +1,234 @@
 # ShadcnPhlexcomponents
 
-TODO: Delete this and the text below, and describe your gem
-
-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.
+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.
 
 ## Installation
 
-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.
+Install gem and required gems:
+
+```bash
+bundle add shadcn_phlexcomponents phlex-rails tailwindcss-rails \
+tailwind_merge lucide-rails class_variants
+```
+
+Or install it yourself as:
+
+```ruby
+gem "shadcn_phlexcomponents"
+gem "phlex-rails", "~> 2.1"
+gem "tailwindcss-rails", "~> 4.2"
+gem "tailwind_merge", "~> 1.0"
+gem "lucide-rails", "~> 0.5.1"
+gem "class_variants", "~> 1.1"
+```
 
-Install the gem and add to the application's Gemfile by executing:
+After installing the gems, run the installer to set up the necessary files:
 
 ```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+rails install:shadcn_phlexcomponents
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+This will:
+
+- Copy all Phlex component files to `vendor/shadcn_phlexcomponents/components`
+- Copy all Stimulus controller files (either TypeScript or JavaScript) to `vendor/shadcn_phlexcomponents/javascript`
+- Copy all CSS files to `vendor/shadcn_phlexcomponents/stylesheets`
+- Copy an initializer file to `config/initializers/shadcn_phlexcomponents.rb`
+
+## Upgrading
 
 ```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+rails upgrade:shadcn_phlexcomponents
 ```
 
-## Usage
+This will:
+
+- Copy all Phlex component files to `vendor/shadcn_phlexcomponents/components`
+- Copy all Stimulus controller files (either TypeScript or JavaScript) to `vendor/shadcn_phlexcomponents/javascript`
+- Copy all CSS files to `vendor/shadcn_phlexcomponents/stylesheets`
+
+## Quick Start
+
+### Basic Usage
+
+```erb
+<%= render Button.new { "Default" } %>
+```
+
+See [https://shadcn-phlexcomponents.seanysx.com/](https://shadcn-phlexcomponents.seanysx.com/) for more examples.
+
+### Demo Rails App
+
+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.
+
+## Available Components
+
+### Layout & Structure
+
+- **Aspect Ratio**
+- **Card**
+- **Separator**
+- **Sheet**
+- **Skeleton**
+
+### Navigation
+
+- **Breadcrumb**
+- **Pagination**
+- **Tabs**
+
+### Form Components
+
+- **Button**
+- **Input**
+- **Textarea**
+- **Label**
+- **Checkbox**
+- **Radio Group**
+- **Select**
+- **Switch**
+- **Slider**
+- **Date Picker**
+- **Date Range Picker**
+- **Combobox**
+
+### Interactive Components
+
+- **Accordion**
+- **Alert Dialog**
+- **Dialog**
+- **Dropdown Menu**
+- **Hover Card**
+- **Popover**
+- **Tooltip**
+- **Command**
+- **Collapsible**
+
+### Feedback & Status
 
-TODO: Write usage instructions here
+- **Alert**
+- **Badge**
+- **Progress**
+- **Toast**
+- **Loading Button**
+
+### Display Components
+
+- **Avatar**
+- **Table**
+- **Toggle**
+
+### Utilities
+
+- **Link**
+- **Theme Switcher**
+
+## Customization
+
+### 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
+```
+
+Components automatically adapt to dark mode using Tailwind's `dark:` classes.
+
+## Form Integration
+
+Components work with Rails form helpers:
+
+```erb
+<%= render Form.new(model: @user, class: "space-y-6") do |f| %>
+  <%= f.input(:email) %>
+  <%= f.submit %>
+<% 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).
+### Component Development
 
-## Contributing
+When creating new components:
 
-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).
+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
 
-## Code of Conduct
+### Available Commands
+
+```bash
+# Run tests
+rake test
 
-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).
+# Run linting
+rake rubocop
+rubocop
+
+# Install JavaScript dependencies
+yarn install
+
+```
 
-## [Unreleased] - YYYY-MM-DD
+## 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
+
+- **@hotwired/stimulus** (^3.2.2) - JavaScript framework
+- **@floating-ui/dom** (^1.7.2) - Positioning library
+- **dayjs** (^1.11.13) - Date manipulation
+- **fuse.js** (^7.1.0) - Fuzzy searching
+- **dompurify** (^3.2.6) - HTML sanitization
+- **inputmask** (^5.0.9) - Input masking
+- **hotkeys-js** (^3.13.14) - Keyboard shortcuts
+- **nouislider** (^15.8.1) - Slider input
+- **vanilla-calendar-pro** (^3.0.4) - Calendar component
+
+## Contributing
 
-### Added
+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
 
-### Changed
+## License
 
-### Deprecated
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-### Removed
+## Acknowledgments
 
-### Fixed
+- 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
+- [@JacobAlexander](https://github.com/JacobAlexander) - For testing and providing feedback
 
-### Security
+---

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 };

data/app/javascript/controllers/collapsible_controller.js

@@ -1,41 +1,40 @@
-import { Controller } from '@hotwired/stimulus';
-import { hideContent, showContent } from '../utils';
+import { Controller } from "@hotwired/stimulus";
+import { hideContent, showContent } from "../utils";
 const CollapsibleController = class extends Controller {
-    // targets
-    static targets = ['trigger', 'content'];
-    // values
-    static values = {
-        isOpen: Boolean,
-    };
-    toggle() {
-        if (this.isOpenValue) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+  static name = "collapsible";
+  // targets
+  static targets = ["trigger", "content"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  toggle() {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open();
     }
-    open() {
-        this.isOpenValue = true;
-    }
-    close() {
-        this.isOpenValue = false;
-    }
-    isOpenValueChanged(isOpen) {
-        if (isOpen) {
-            showContent({
-                trigger: this.triggerTarget,
-                content: this.contentTarget,
-                contentContainer: this.contentTarget,
-            });
-        }
-        else {
-            hideContent({
-                trigger: this.triggerTarget,
-                content: this.contentTarget,
-                contentContainer: this.contentTarget,
-            });
-        }
+  }
+  open() {
+    this.isOpenValue = true;
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  isOpenValueChanged(isOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      });
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      });
     }
+  }
 };
 export { CollapsibleController };