fernandes-ui 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02fd9e64f88c0ae8270f7891857c1d3de61489da4a90894347d215395c22f09a
-  data.tar.gz: a7888a8e95b7e44e4d4ec0da67fedce961c8b84b3b4fea343a35e4dc3864592d
+  metadata.gz: 436386cb9aedd0c0d4210ee7d89273f2f1edb3b7113a9623af14c2ca52154dc9
+  data.tar.gz: 8e4648b61fca5e049180035807b8369099b91487b4edd7e963dadd5c0fb4c586
 SHA512:
-  metadata.gz: 343cc0a615f1e5454d4f2f1f989ca5f3e3348288f46954ebc26958f74e2ca2a24ac44fbdd553e3cc511ce5e1d5adb92efc5b22bf1066b7aa9fbd5b4af5b56afb
-  data.tar.gz: adfddca0b82cb569fef6e98b080a12879aa768700f37410f63b96fae8390745c9a24c3aad9ee5af63bc2cff6eeba6291733b40c2299276b6cbe1d720c2579b9f
+  metadata.gz: 3e0f6d156f7396006300fb59f63fff5d541da6a4af4903ce5c77dea65b29ae56a8becbf699a6be115345f57c5322453d44e344e282213bd314e01c71cc7d8e70
+  data.tar.gz: b9a1b0896a7ec775734ca5879b423c71b46ef2b984b0b2f234a2ee26bd11a3475b12ad32b853358be467b67379931b16ea5e9065230c60d2f28bdf1634d9e040

data/README.md

@@ -14,85 +14,93 @@ A Rails engine providing a component library with Tailwind CSS 4 support. Design
 
 ## Installation
 
-Add this line to your application's Gemfile:
+### Ruby Gem
+
+Add to your Gemfile:
 
 ```ruby
-gem "ui"
+gem "fernandes-ui"
 ```
 
-And then execute:
+Then run:
 
 ```bash
 bundle install
-rails generate ui:install
 ```
 
-The installer will automatically detect your asset pipeline and configure the engine appropriately.
+### JavaScript (Importmaps)
 
-## Usage
+For Rails 7+ with importmaps, pin the engine in `config/importmap.rb`:
 
-The UI Engine provides CSS variables, Stimulus controllers, and components. You configure Tailwind CSS in your application, and the installer does this automatically.
+```ruby
+pin "ui", to: "ui.esm.js", preload: true
+pin_all_from "ui/controllers", under: "ui/controllers"
+```
 
-### JavaScript Integration
+The gem automatically provides these pins via the engine.
 
-The engine supports two approaches for JavaScript integration:
+### JavaScript (jsbundling-rails)
 
-#### **Option 1: Importmaps (Rails 8 Default, Zero-Build)**
+For apps using Bun, esbuild, or Webpack:
 
-The engine automatically configures importmap pins. Just import and use:
+```bash
+bun add @fernandes/ui
+# or
+npm install @fernandes/ui
+```
+
+Then import in your JavaScript:
 
 ```javascript
-// app/javascript/application.js
 import { Application } from "@hotwired/stimulus"
-import * as UI from "ui"
+import * as UI from "@fernandes/ui"
 
 const application = Application.start()
-
-// Register all UI controllers
 UI.registerControllers(application)
-
-console.log("UI Engine version:", UI.version)
 ```
 
-#### **Option 2: JavaScript Bundlers (Bun, esbuild, Webpack)**
+### CSS (cssbundling-rails)
 
-Install the engine as an npm package:
+For apps using cssbundling-rails, use the generators to get UI css copied and then imported automatically.
 
 ```bash
-bun add @ui/engine
-# or
-npm install @ui/engine
+rails generate ui:css
+rails generate ui:install
 ```
 
-Then import in your bundled JavaScript:
+### CSS (Propshaft/Sprockets)
 
-```javascript
-// app/javascript/application.js
-import { Application } from "@hotwired/stimulus"
-import * as UI from "@ui/engine"
+For apps using asset pipeline without bundler, import in your Tailwind config:
 
-const application = Application.start()
+```css
+@import "tailwindcss";
+@import "ui/application.css";
 
-// Register all UI controllers
-UI.registerControllers(application)
+/* Scan bundled gem files */
+@source "../../../.bundle/ruby/*/gems/fernandes-ui-*/app/**/*.{erb,rb,js}";
 ```
 
+## Usage
+
+The UI Engine provides CSS variables, Stimulus controllers, and components. You configure Tailwind CSS in your application to scan the engine files.
+
 ### Selective Controller Import
 
 You can import only the controllers you need for better performance and tree-shaking:
 
-#### **Import Individual Controllers from Main Module**
+#### **Import Individual Controllers**
 
 ```javascript
+// With jsbundling-rails
 import { Application } from "@hotwired/stimulus"
-import { HelloController, DropdownController } from "ui"
+import { HelloController, DropdownController } from "@fernandes/ui"
 
 const application = Application.start()
 application.register("ui--hello", HelloController)
 application.register("ui--dropdown", DropdownController)
 ```
 
-#### **Import Directly from Controller Files (Importmap)**
+#### **Import from Controller Files (Importmaps)**
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
@@ -106,23 +114,22 @@ application.register("ui--hello", HelloController)
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
-import { HelloController, registerControllersInto } from "ui"
+import { HelloController, registerControllersInto } from "@fernandes/ui"
 
 const application = Application.start()
 
 // Register only specific controllers
 registerControllersInto(application, {
   "ui--hello": HelloController
-  // Don't register DropdownController
 })
 ```
 
 ### Benefits of Selective Import
 
-✅ **Tree-shaking** - Bundlers eliminate unused code
-✅ **Flexibility** - Choose exactly what to import
-✅ **Performance** - Load only what you need
-✅ **Compatibility** - Works with both importmaps and bundlers
+- **Tree-shaking** - Bundlers eliminate unused code
+- **Flexibility** - Choose exactly what to import
+- **Performance** - Load only what you need
+- **Compatibility** - Works with both importmaps and bundlers
 
 ## Available Components
 
@@ -235,19 +242,24 @@ bun run build:css:prod
 ```
 app/
 ├── assets/
-│   └── stylesheets/ui/
-│       └── application.css     # CSS variables (shipped with gem)
+│   ├── stylesheets/ui/
+│   │   └── application.css     # CSS variables (shipped with gem)
+│   └── javascripts/
+│       ├── ui.js               # UMD bundle
+│       └── ui.esm.js           # ESM bundle
 ├── behaviors/ui/               # Shared behavior modules (always loaded)
 │   ├── button_behavior.rb
 │   └── ...
-├── components/ui/              # Phlex components (loaded if phlex-rails available)
+├── components/ui/              # Phlex components (loaded if phlex-rails >= 2.0)
 │   ├── button.rb
 │   └── ...
-├── view_components/ui/         # ViewComponents (loaded if view_component available)
+├── view_components/ui/         # ViewComponents (loaded if view_component >= 3.0)
 │   ├── button_component.rb
 │   └── ...
 ├── javascript/ui/
-│   └── index.js                # JavaScript entry point
+│   ├── index.js                # JavaScript entry point
+│   ├── controllers/            # Stimulus controllers
+│   └── utils/                  # Utility modules
 ├── views/ui/                   # ERB partials (always available)
 │   ├── _button.html.erb
 │   └── ...
@@ -257,17 +269,9 @@ config/
 └── importmap.rb                # Importmap pins for JS modules
 
 lib/
-├── generators/ui/install/
-│   ├── install_generator.rb   # Installation generator
-│   └── templates/             # Templates for host app setup
 └── ui/
-    ├── configuration.rb       # UI.configure settings
-    └── engine.rb              # Engine configuration
-
-test/dummy/                     # Test application
-├── app/assets/stylesheets/
-│   └── application.tailwind.css  # Tailwind config (NOT in engine!)
-└── package.json               # Tailwind CLI (NOT in engine!)
+    ├── configuration.rb        # UI.configure settings
+    └── engine.rb               # Engine configuration
 ```
 
 ## Component Formats
@@ -356,7 +360,7 @@ This approach:
 
 ## Tailwind CSS 4 Configuration
 
-Your application (not the engine) configures Tailwind. The generator creates `app/assets/stylesheets/application.tailwind.css`:
+Your application (not the engine) configures Tailwind. Create `app/assets/stylesheets/application.tailwind.css`:
 
 ```css
 @import "tailwindcss";
@@ -366,12 +370,8 @@ Your application (not the engine) configures Tailwind. The generator creates `ap
 @source "../../javascript/**/*.js";
 @source "../../views/**/*.erb";
 
-/* Scan ENGINE files for Tailwind classes */
-@source "../../../../../app/javascript/**/*.js";  /* If local gem */
-@source "../../../../../app/views/**/*.erb";      /* If local gem */
-
-/* Or scan bundled gem (adjust path as needed) */
-@source "../../../.bundle/ruby/*/gems/ui-*/app/**/*.{erb,rb,js}";
+/* Scan bundled gem files */
+@source "../../../.bundle/ruby/*/gems/fernandes-ui-*/app/**/*.{erb,rb,js}";
 
 @theme {
   /* Customize using engine variables */