plutonium 0.16.3 → 0.16.5

data/app/views/plutonium/_resource_sidebar.html.erb

@@ -1,16 +1,18 @@
 <%= render Plutonium::UI::Layout::Sidebar.new do %>
   <%=
-    render_component(:sidebar_menu) do |menu|
-      menu.with_item(name: "Dashboard", url: root_path, icon: "outline/home")
-      if registered_resources.any?
-        menu.with_item(name: "Resources", icon: "outline/grid") do |sub_menu|
-          registered_resources.each do |resource|
-            next unless allowed_to? :index?, resource
+    render Plutonium::UI::SidebarMenu.new(
+      Phlexi::Menu::Builder.new do |m|
+        m.item "Dashboard",
+          url: root_path,
+          icon: Phlex::TablerIcons::Home
 
-            sub_menu.with_sub_item(name: resource.model_name.human.pluralize, url: resource_url_for(resource, parent: nil))
+        m.item "Resources", icon: Phlex::TablerIcons::GridDots do |n|
+          registered_resources.each do |resource|
+            n.item resource.model_name.human.pluralize,
+              url: resource_url_for(resource, parent: nil)
           end
         end
       end
-    end
+    )
   %>
 <% end %>

data/docs/guide/tutorial.md

@@ -1,7 +1,5 @@
 # Building a Blog with Plutonium
 
-# Building a Blog with Plutonium
-
 > **Quick Links:**
 > - 🔍 [Tutorial Demo](https://github.com/radioactive-labs/plutonium-app)
 > - 📂 [Tutorial Source Code](https://github.com/radioactive-labs/plutonium-app)

data/docs/public/templates/pluton8.rb

@@ -0,0 +1,7 @@
+after_bundle do
+  # Run the plutonium install
+  rails_command "app:template LOCATION=https://radioactive-labs.github.io/plutonium-core/templates/plutonium.rb"
+
+  # Enliten!
+  rails_command "app:template LOCATION=https://raw.githubusercontent.com/thedumbtechguy/enlitenment/main/template.rb"
+end

data/lib/generators/pu/core/assets/templates/tailwind.config.js

@@ -17,14 +17,15 @@ module.exports = {
         throw Error(`unsupported plugin: ${plugin}: ${(typeof plugin)}`)
     }
   })),
-  theme: plutoniumTailwindConfig.theme,
+  theme: plutoniumTailwindConfig.merge(
+    {
+    },
+    plutoniumTailwindConfig.theme
+  ),
   content: [
-    `${__dirname}/app/**/*.rb`,
-    `${__dirname}/app/views/**/*.html.erb`,
-    `${__dirname}/app/helpers/**/*.rb`,
+    `${__dirname}/app/**/*.{erb,haml,html,slim,rb}`,
     `${__dirname}/app/assets/stylesheets/**/*.css`,
     `${__dirname}/app/javascript/**/*.js`,
-    `${__dirname}/packages/**/app/**/*.rb`,
-    `${__dirname}/packages/**/app/views/**/*.html.erb`,
+    `${__dirname}/packages/**/app/**/*.{erb,haml,html,slim,rb}`,
   ].concat(plutoniumTailwindConfig.content),
 }

data/lib/plutonium/ui/sidebar_menu.rb

@@ -0,0 +1,149 @@
+require "phlexi-menu"
+
+module Plutonium
+  module UI
+    # A sidebar navigation component that renders a max depth of 2 levels
+    # Provides collapsible menu sections and is compatible with turbo-permanent
+    class SidebarMenu < Phlexi::Menu::Component
+      include Plutonium::UI::Component::Behaviour
+
+      DEFAULT_MAX_DEPTH = 2
+
+      class Theme < Theme
+        def self.theme
+          super.merge({
+            # Base container styles
+            nav: "space-y-2 pb-6 mb-6",
+            items_container: "space-y-2",
+
+            # Item wrapper styles
+            item_wrapper: "w-full transition-colors duration-200 ease-in-out",
+            item_parent: nil,
+
+            # Link and button base styles
+            item_link: "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group",
+            item_span: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+
+            # Label and content styles
+            item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} text-left whitespace-nowrap" },
+
+            # Badge styles
+            leading_badge: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
+            trailing_badge: "inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",
+
+            # Icon styles
+            icon_wrapper: "shrink-0 w-6 h-6 flex items-center justify-center",
+            icon: "text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white",
+
+            # Collapse icon styles
+            collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200",
+            collapse_icon_expanded: "transform rotate-180",
+
+            # Submenu styles
+            sub_items_container: "hidden py-2 space-y-2",
+
+            # Due to how we use turbo frames, we can't set active states
+            active: nil
+          })
+        end
+      end
+
+      protected
+
+      def render_items(items, depth = 0)
+        return if depth >= @max_depth || items.empty?
+
+        if depth.zero?
+          ul(class: themed(:items_container, depth)) do
+            items.each { |item| render_item_wrapper(item, depth) }
+          end
+        else
+          ul(class: themed(:sub_items_container, depth), data: {"resource-collapse-target": "menu"}) do
+            items.each { |item| render_item_wrapper(item, depth) }
+          end
+        end
+      end
+
+      # def render_items(items, depth = 0)
+      #   return if depth >= @max_depth
+
+      #   if depth.zero?
+      #     ul(class: themed(:items_container, depth)) do
+      #       items.each do |item|
+      #         render_item_wrapper(item, depth)
+      #       end
+      #     end
+      #   else
+      #     # Use collapsible rendering for nested levels
+      #     ul(
+      #       id: generate_menu_id(:root),
+      #       class: themed(:sub_items_container, depth),
+      #       data: {"resource-collapse-target": "menu"}
+      #     ) do
+      #       items.each do |item|
+      #         render_item_wrapper(item, depth)
+      #       end
+      #     end
+      #   end
+      # end
+
+      def render_item_wrapper(item, depth)
+        wrapper_attrs = {
+          class: tokens(themed(:item_wrapper, depth)),
+          data: {}
+        }
+
+        if nested?(item, depth)
+          wrapper_attrs[:data][:controller] = "resource-collapse"
+          wrapper_attrs[:data]["resource-collapse-active-class"] = themed(:collapse_icon_expanded)
+        end
+
+        li(**wrapper_attrs) do
+          render_item_content(item, depth)
+          render_items(item.items, depth + 1) if nested?(item, depth)
+        end
+      end
+
+      def render_item_content(item, depth)
+        if nested?(item, depth)
+          render_collapsible_button(item, depth)
+        else
+          render_item_link(item, depth)
+        end
+      end
+
+      def render_collapsible_button(item, depth)
+        button(
+          type: "button",
+          class: themed(:item_span, depth),
+          data: {
+            "resource-collapse-target": "trigger",
+            action: "resource-collapse#toggle"
+          },
+          aria: {
+            expanded: "false"
+          }
+        ) do
+          render_item_interior(item, depth)
+          render_collapse_icon(depth)
+        end
+      end
+
+      def render_collapse_icon(depth)
+        svg(
+          class: themed(:collapse_icon, depth),
+          fill: "currentColor",
+          viewBox: "0 0 20 20",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: {inert: true}
+        ) do |s|
+          s.path(
+            fill_rule: "evenodd",
+            d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+            clip_rule: "evenodd"
+          )
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.16.3"
+  VERSION = "0.16.5"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.16",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.16",
+      "version": "0.2.1",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.17",
+  "version": "0.2.1",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/js/controllers/resource_collapse_controller.js

@@ -1,6 +1,4 @@
 import { Controller } from "@hotwired/stimulus"
-import { Collapse } from 'flowbite';
-
 
 // Connects to data-controller="resource-collapse"
 export default class extends Controller {
@@ -9,22 +7,32 @@ export default class extends Controller {
   connect() {
     console.log(`resource-collapse connected: ${this.element}`)
 
-    this.collapse = new Collapse(this.menuTarget, this.triggerTarget);
-  }
+    // Default to false if the data attribute isn't set
+    if (!this.element.hasAttribute('data-visible')) {
+      this.element.setAttribute('data-visible', 'false')
+    }
 
-  disconnect() {
-    this.collapse = null
+    // Set initial state
+    this.#updateState()
   }
 
   toggle() {
-    this.collapse.toggle()
-  }
-
-  show() {
-    this.collapse.show()
+    const isVisible = this.element.getAttribute('data-visible') === 'true'
+    this.element.setAttribute('data-visible', (!isVisible).toString())
+    this.#updateState()
   }
 
-  hide() {
-    this.collapse.hide()
+  #updateState() {
+    const isVisible = this.element.getAttribute('data-visible') === 'true'
+
+    if (isVisible) {
+      this.menuTarget.classList.remove('hidden')
+      this.triggerTarget.setAttribute('aria-expanded', 'true')
+      this.dispatch('expand')
+    } else {
+      this.menuTarget.classList.add('hidden')
+      this.triggerTarget.setAttribute('aria-expanded', 'false')
+      this.dispatch('collapse')
+    }
   }
 }

data/tailwind.options.js

@@ -248,6 +248,52 @@ export const safelist = [
   },
 ]
 
+export const merge = function (...configs) {
+  function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+  }
+
+  function mergeArrays(target, source) {
+    // Combine arrays and remove duplicates for simple values
+    if (target.every(item => typeof item === 'string')) {
+      return [...new Set([...target, ...source])];
+    }
+    // For arrays of objects or complex types, concatenate
+    return [...target, ...source];
+  }
+
+  function deepMerge(target, source) {
+    if (!isObject(target) || !isObject(source)) {
+      return source;
+    }
+
+    const output = { ...target };
+
+    Object.keys(source).forEach(key => {
+      const targetValue = output[key];
+      const sourceValue = source[key];
+
+      if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+        output[key] = mergeArrays(targetValue, sourceValue);
+      } else if (isObject(targetValue) && isObject(sourceValue)) {
+        // Handle function properties (like theme functions in Tailwind)
+        if (typeof targetValue === 'function' || typeof sourceValue === 'function') {
+          output[key] = sourceValue;
+        } else {
+          output[key] = deepMerge(targetValue, sourceValue);
+        }
+      } else {
+        output[key] = sourceValue;
+      }
+    });
+
+    return output;
+  }
+
+  // Reduce all configs into a single merged config
+  return configs.reduce((merged, config) => deepMerge(merged, config), {});
+}
+
 // // Object.keys(colors).forEach((color) => {
 // //   if (typeof colors[color] === 'object') {
 // //     Object.keys(colors[color]).forEach((shade) => {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.16.3
+  version: 0.16.5
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-03 00:00:00.000000000 Z
+date: 2024-12-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -254,6 +254,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: phlexi-menu
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
   requirement: !ruby/object:Gem::Requirement
@@ -1080,6 +1094,7 @@ files:
 - docs/public/plutonium.png
 - docs/public/site.webmanifest
 - docs/public/templates/base.rb
+- docs/public/templates/pluton8.rb
 - docs/public/templates/plutonium.rb
 - docs/public/tutorial/plutonium-association-panel.png
 - docs/public/tutorial/plutonium-dashboard.png
@@ -1433,6 +1448,7 @@ files:
 - lib/plutonium/ui/page/show.rb
 - lib/plutonium/ui/page_header.rb
 - lib/plutonium/ui/panel.rb
+- lib/plutonium/ui/sidebar_menu.rb
 - lib/plutonium/ui/skeleton_table.rb
 - lib/plutonium/ui/table/base.rb
 - lib/plutonium/ui/table/components/pagy_info.rb