fernandes-ui 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02fd9e64f88c0ae8270f7891857c1d3de61489da4a90894347d215395c22f09a
-  data.tar.gz: a7888a8e95b7e44e4d4ec0da67fedce961c8b84b3b4fea343a35e4dc3864592d
+  metadata.gz: da1c77278662e1886130b12bbcbc630a4d19cb0651c81362e6006e8f1a9e5351
+  data.tar.gz: 26c135df8c057f54aa32c8a630e0f551ad1bab59c70b7addf2e1ac7e1a1ff3c4
 SHA512:
-  metadata.gz: 343cc0a615f1e5454d4f2f1f989ca5f3e3348288f46954ebc26958f74e2ca2a24ac44fbdd553e3cc511ce5e1d5adb92efc5b22bf1066b7aa9fbd5b4af5b56afb
-  data.tar.gz: adfddca0b82cb569fef6e98b080a12879aa768700f37410f63b96fae8390745c9a24c3aad9ee5af63bc2cff6eeba6291733b40c2299276b6cbe1d720c2579b9f
+  metadata.gz: 26f10d3e9aa1d9ade5064cb6d9cd8b3f6b52c6eed32ddab06d4860128399aa2c88a94fc284b0fa8be23863f50ac0b8a53faf4655b4c1f5fd31bdc38eb57cda6c
+  data.tar.gz: 85458b4aaedfeae39402e9e008f1b329c11a0ce95489f9a44b62183224a4c2848ed005ebc29ab5bf88d5b71eded993321d67d72b8093432650184e211e224b5f

data/README.md

@@ -14,85 +14,100 @@ 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`:
+
+```ruby
+pin "ui", to: "ui.esm.js", preload: true
+pin_all_from "ui/controllers", under: "ui/controllers"
+```
 
-The UI Engine provides CSS variables, Stimulus controllers, and components. You configure Tailwind CSS in your application, and the installer does this automatically.
+The gem automatically provides these pins via the engine.
 
-### JavaScript Integration
+Then setup the JS controllers
 
-The engine supports two approaches for JavaScript integration:
+```javascript
+import { registerControllers } from "ui"
+registerControllers(application)
+```
 
-#### **Option 1: Importmaps (Rails 8 Default, Zero-Build)**
+### JavaScript (jsbundling-rails)
 
-The engine automatically configures importmap pins. Just import and use:
+For apps using Bun, esbuild, or Webpack:
+
+```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 +121,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 +249,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 +276,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 +367,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 +377,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 */

data/app/assets/javascripts/ui.esm.js

@@ -2331,8 +2331,10 @@ class AccordionController extends Controller {
       const content = this.contentTargets[index];
       if (content) {
         const isOpen = item.dataset.state === "open";
-        content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-        if (!isOpen) {
+        if (isOpen) {
+          content.style.height = "auto";
+        } else {
+          content.style.height = "0px";
           content.setAttribute("hidden", "");
         }
       }
@@ -2367,6 +2369,9 @@ class AccordionController extends Controller {
       content.removeAttribute("hidden");
       content.style.height = `${content.scrollHeight}px`;
     } else {
+      const currentHeight = content.scrollHeight;
+      content.style.height = `${currentHeight}px`;
+      content.offsetHeight;
       content.style.height = "0px";
       content.addEventListener("transitionend", () => {
         if (content.dataset.state === "closed") {
@@ -2914,6 +2919,10 @@ class CommandController extends Controller {
     loop: {
       type: Boolean,
       default: true
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   };
   connect() {
@@ -2927,7 +2936,7 @@ class CommandController extends Controller {
     this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
   }
   handleShow() {
-    if (this.hasInputTarget) {
+    if (this.autofocusValue && this.hasInputTarget) {
       this.inputTarget.focus();
     }
     const visibleItems = this.visibleItems;

data/app/assets/javascripts/ui.js

@@ -2211,8 +2211,10 @@
         const content = this.contentTargets[index];
         if (content) {
           const isOpen = item.dataset.state === "open";
-          content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-          if (!isOpen) {
+          if (isOpen) {
+            content.style.height = "auto";
+          } else {
+            content.style.height = "0px";
             content.setAttribute("hidden", "");
           }
         }
@@ -2247,6 +2249,9 @@
         content.removeAttribute("hidden");
         content.style.height = `${content.scrollHeight}px`;
       } else {
+        const currentHeight = content.scrollHeight;
+        content.style.height = `${currentHeight}px`;
+        content.offsetHeight;
         content.style.height = "0px";
         content.addEventListener("transitionend", () => {
           if (content.dataset.state === "closed") {
@@ -2771,6 +2776,10 @@
       loop: {
         type: Boolean,
         default: true
+      },
+      autofocus: {
+        type: Boolean,
+        default: false
       }
     };
     connect() {
@@ -2784,7 +2793,7 @@
       this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
     }
     handleShow() {
-      if (this.hasInputTarget) {
+      if (this.autofocusValue && this.hasInputTarget) {
         this.inputTarget.focus();
       }
       const visibleItems = this.visibleItems;