plutonium 0.16.1 → 0.16.4

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/assets_generator.rb

@@ -29,7 +29,7 @@ module Pu
       end
 
       def install_dependencies
-        run "yarn add @radioactive-labs/plutonium flowbite @tailwindcss/forms @tailwindcss/typography flowbite-typography postcss-cli cssnano"
+        run "yarn add @radioactive-labs/plutonium flowbite @tailwindcss/forms @tailwindcss/typography flowbite-typography postcss-cli cssnano marked"
       end
 
       def configure_application

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,169 @@
+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: "flex-1 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
+      #   return if items.empty?
+
+      #   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(items.first&.options&.dig(:parent)),
+      #       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)
+          wrapper_attrs[:id] = generate_item_id(item)
+
+          # # Store parent reference for nested items
+          # item.items.each { |child| child.options[:parent] = item }
+        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_item_link(item, depth)
+      #   if item.url
+      #     a(href: item.url, class: themed(:item_link, depth)) do
+      #       render_item_interior(item, depth)
+      #     end
+      #   else
+      #     span(class: themed(:item_span, depth)) do
+      #       render_item_interior(item, depth)
+      #     end
+      #   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: {
+            controls: generate_menu_id(item),
+            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: { hidden: 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
+
+      private
+
+      def generate_item_id(item)
+        "sidebar-menu-item-#{item.label.to_s.parameterize}"
+      end
+
+      def generate_menu_id(item)
+        # return nil unless item
+        "#{generate_item_id(item)}-menu"
+      end
+
+      # # Override to disable active state for turbo-permanent compatibility
+      # def active_class(item, depth = 0)
+      #   nil
+      # end
+    end
+  end
+end

data/lib/plutonium/version.rb

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

data/package-lock.json

@@ -1,19 +1,20 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.16",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.16",
+      "version": "0.2.0",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",
         "@hotwired/turbo": "^8.0.4",
         "dompurify": "^3.2.2",
         "flowbite": "^2.3.0",
-        "lodash.debounce": "^4.0.8"
+        "lodash.debounce": "^4.0.8",
+        "marked": "^15.0.3"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
@@ -4514,10 +4515,9 @@
       "license": "MIT"
     },
     "node_modules/marked": {
-      "version": "13.0.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz",
-      "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==",
-      "dev": true,
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.3.tgz",
+      "integrity": "sha512-Ai0cepvl2NHnTcO9jYDtcOEtVBNVYR31XnEA3BndO7f5As1wzpcOceSUM8FDkNLJNIODcLpDTWay/qQhqbuMvg==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
@@ -4600,6 +4600,19 @@
       "dev": true,
       "license": "(MPL-2.0 OR Apache-2.0)"
     },
+    "node_modules/mermaid/node_modules/marked": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz",
+      "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/micromark-util-character": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.16",
+  "version": "0.2.0",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",
@@ -22,7 +22,8 @@
     "@hotwired/turbo": "^8.0.4",
     "dompurify": "^3.2.2",
     "flowbite": "^2.3.0",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "marked": "^15.0.3"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

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.1
+  version: 0.16.4
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-02 00:00:00.000000000 Z
+date: 2024-12-13 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