|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +This file provides guidance to AI coding agents when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +RubyUI is a Ruby gem providing a collection of Phlex-based UI components for Rails applications. It follows a copy-and-paste distribution model (not imported as a runtime dependency). Components use Phlex for rendering, Tailwind CSS for styling (merged via `tailwind_merge`), and Stimulus.js controllers for interactivity. |
| 8 | + |
| 9 | +- **Version:** defined in `lib/ruby_ui.rb` |
| 10 | +- **Ruby requirement:** >= 3.2 |
| 11 | +- **Docs:** https://rubyui.com/docs/introduction |
| 12 | + |
| 13 | +## Commands |
| 14 | + |
| 15 | +```bash |
| 16 | +# Run all tests + linter (default rake task) |
| 17 | +bundle exec rake |
| 18 | + |
| 19 | +# Tests only |
| 20 | +bundle exec rake test |
| 21 | + |
| 22 | +# Single test file |
| 23 | +bundle exec rake test TEST=test/ruby_ui/button_test.rb |
| 24 | + |
| 25 | +# Linter (StandardRB) |
| 26 | +bundle exec rake standard |
| 27 | + |
| 28 | +# Auto-fix lint issues |
| 29 | +bundle exec standardrb --fix |
| 30 | +``` |
| 31 | + |
| 32 | +## Architecture |
| 33 | + |
| 34 | +### Component Pattern |
| 35 | + |
| 36 | +Every component extends `RubyUI::Base < Phlex::HTML` (`lib/ruby_ui/base.rb`). Base provides: |
| 37 | +- `default_attrs` — override to set default HTML attributes/Tailwind classes |
| 38 | +- `@attrs` — merged user attrs + defaults, with Tailwind classes intelligently merged via `TailwindMerge::Merger` |
| 39 | +- Phlex `mix` helper combines attribute hashes |
| 40 | + |
| 41 | +Typical component structure in `lib/ruby_ui/<component_name>/`: |
| 42 | +- `<component>.rb` — the component class with `view_template` method |
| 43 | +- `<component>_docs.rb` — documentation/usage examples (excluded from tests) |
| 44 | +- `<component>_controller.js` — optional Stimulus controller for interactivity |
| 45 | + |
| 46 | +Components use Phlex DSL for rendering (e.g., `button(**attrs, &)` in `view_template`). Variants are handled through initializer params that map to different Tailwind class sets. |
| 47 | + |
| 48 | +### Test Pattern |
| 49 | + |
| 50 | +Tests use **Minitest** and extend `ComponentTest` (defined in `test/test_helper.rb`). The `phlex` helper renders components to HTML strings for assertion: |
| 51 | + |
| 52 | +```ruby |
| 53 | +class RubyUI::ButtonTest < ComponentTest |
| 54 | + def test_render_with_all_items |
| 55 | + output = phlex { RubyUI.Button(variant: :primary) { "Primary" } } |
| 56 | + assert_match(/Primary/, output) |
| 57 | + end |
| 58 | +end |
| 59 | +``` |
| 60 | + |
| 61 | +Components are invoked via `RubyUI.<ComponentName>()` through Phlex::Kit. |
| 62 | + |
| 63 | +### Generator System |
| 64 | + |
| 65 | +Rails generators in `lib/generators/ruby_ui/` handle installation into consumer apps: |
| 66 | +- `ruby_ui:install` — sets up base component, dependencies, initializer |
| 67 | +- `ruby_ui:component <Name>` — copies a specific component into the app |
| 68 | +- `ruby_ui:component:all` — copies all components |
| 69 | +- `dependencies.yml` — maps each component to its required gems, JS packages, and other components |
| 70 | + |
| 71 | +### JavaScript |
| 72 | + |
| 73 | +Stimulus controllers live alongside their Ruby components. JS dependencies (Chart.js, Embla, Floating UI, etc.) are declared in `package.json` and mapped per-component in `dependencies.yml`. |
| 74 | + |
| 75 | +## CI |
| 76 | + |
| 77 | +GitHub Actions (`.github/workflows/ci.yml`) runs `rake test` and `rake standard` against Ruby 3.3 and 3.4 on every push to main and on PRs. |
| 78 | + |
| 79 | +## PR Template |
| 80 | + |
| 81 | +PRs should be prefixed with a category in brackets (e.g., `[Feature]`, `[Bug Fix]`), reference a related issue, include a description with before/after screenshots if applicable, and provide testing instructions. |
0 commit comments