plutonium 0.10.3 → 0.11.0

data/package.json

@@ -1,24 +1,47 @@
 {
-  "devDependencies": {
+  "name": "@radioactive-labs/plutonium",
+  "version": "0.1.2",
+  "description": "Core assets for the Plutonium gem",
+  "type": "module",
+  "main": "src/js/core.js",
+  "files": [
+    "src/"
+  ],
+  "author": "Stefan Froelich (@thedumbtechguy)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/radioactive-labs/plutonium-core/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radioactive-labs/plutonium-core.git"
+  },
+  "homepage": "https://github.com/radioactive-labs/plutonium-core#readme",
+  "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
+    "lodash.debounce": "^4.0.8",
     "@hotwired/turbo": "^8.0.4",
+    "flowbite": "^2.3.0"
+  },
+  "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.18",
     "concurrently": "^8.2.2",
     "esbuild": "^0.20.1",
     "esbuild-plugin-manifest": "^1.0.3",
-    "flowbite": "^2.3.0",
-    "lodash.debounce": "^4.0.8",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "postcss-hash": "^3.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "cssnano": "^7.0.2"
   },
   "scripts": {
+    "build": "npm run js:prod && npm run css:prod",
     "dev": "concurrently \"npm run css:dev\" \"npm run js:dev\"",
-    "css:dev": "postcss app/assets/stylesheets/plutonium.css -o public/plutonium-assets/build/plutonium-dev.css --watch",
-    "js:dev": "node esbuild.config.js",
-    "css:prod": "postcss app/assets/stylesheets/plutonium.css -o public/plutonium-assets/plutonium.css --prod",
-    "js:prod": "node esbuild.config.js --prod"
+    "css:dev": "postcss src/css/plutonium.css -o src/build/plutonium.css --watch --dev",
+    "js:dev": "node esbuild.config.js --dev",
+    "css:prod": "postcss src/css/plutonium.css -o app/assets/plutonium.css && postcss src/css/plutonium.css -o src/dist/css/plutonium.css",
+    "js:prod": "node esbuild.config.js",
+    "prepare": "npm run build"
   }
 }

data/postcss.config.js

@@ -1,11 +1,21 @@
-module.exports = {
+const config = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-    'postcss-hash': {
-      algorithm: 'sha256',
-      trim: 20,
-      manifest: process.argv.includes("--prod") ? './css.manifest' : './css.dev.manifest'
-    },
+    autoprefixer: {}
   }
 }
+
+if (process.argv.includes("--dev")) {
+  config.plugins['postcss-hash'] = {
+    algorithm: 'sha256',
+    trim: 20,
+    manifest: './src/build/css.manifest'
+  }
+}
+else {
+  config.plugins['cssnano'] = {
+    preset: 'default',
+  }
+}
+
+export default config

data/src/.npmignore

@@ -0,0 +1,2 @@
+build/
+js/plutonium.js

data/src/js/controllers/color_mode_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+
+// Connects to data-controller="color-mode"
+export default class extends Controller {
+  // static targets = ["trigger", "menu"]
+
+  connect() {
+    console.log(`color-mode connected: ${this.element}`)
+    this.updateColorMode()
+  }
+
+  disconnect() {
+  }
+
+  updateColorMode() {
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  setLightColorMode() {
+    // Whenever the user explicitly chooses light mode
+    localStorage.theme = 'light'
+    this.updateColorMode()
+  }
+
+  setDarkColorMode() {
+    // Whenever the user explicitly chooses dark mode
+    localStorage.theme = 'dark'
+    this.updateColorMode()
+  }
+
+  setSystemColorMode() {
+    // Whenever the user explicitly chooses to respect the OS preference
+    localStorage.removeItem('theme')
+    this.updateColorMode()
+  }
+}

data/src/js/controllers/frame_navigator_controller.js

@@ -0,0 +1,99 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="frame-navigator"
+export default class extends Controller {
+  static targets = ["frame", "refreshButton", "backButton", "homeButton"];
+
+  connect() {
+    console.log(`frame-navigator connected: ${this.element}`)
+
+    this.srcHistory = []
+    this.originalFrameSrc = this.frameTarget.src
+
+    if (this.hasRefreshButtonTarget) {
+      this.refreshButtonTarget.style.display = ''
+      this.refreshButtonClicked = this.refreshButtonClicked.bind(this);
+      this.refreshButtonTarget.addEventListener("click", this.refreshButtonClicked);
+    }
+
+    if (this.hasBackButtonTarget) {
+      this.backButtonClicked = this.backButtonClicked.bind(this);
+      this.backButtonTarget.addEventListener("click", this.backButtonClicked);
+    }
+
+    if (this.hasHomeButtonTarget) {
+      this.homeButtonClicked = this.homeButtonClicked.bind(this);
+      this.homeButtonTarget.addEventListener("click", this.homeButtonClicked);
+    }
+
+    this.frameLoaded = this.frameLoaded.bind(this);
+    this.frameTarget.addEventListener("turbo:frame-load", this.frameLoaded);
+
+    this.frameLoading = this.frameLoading.bind(this);
+    this.frameTarget.addEventListener("turbo:click", this.frameLoading);
+    this.frameTarget.addEventListener("turbo:submit-start", this.frameLoading);
+  }
+
+  disconnect() {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.removeEventListener("click", this.refreshButtonClicked);
+    if (this.hasBackButtonTarget) this.backButtonTarget.removeEventListener("click", this.backButtonClicked);
+    if (this.hasHomeButtonTarget) this.homeButtonTarget.removeEventListener("click", this.homeButtonClicked);
+
+    this.frameTarget.removeEventListener("turbo:frame-load", this.frameLoaded);
+    this.frameTarget.removeEventListener("turbo:click", this.frameLoading);
+    this.frameTarget.removeEventListener("turbo:submit-start", this.frameLoading);
+  }
+
+  frameLoading(event) {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.add("motion-safe:animate-spin")
+    this.frameTarget.classList.add("motion-safe:animate-pulse")
+  }
+
+  frameLoaded(event) {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.remove("motion-safe:animate-spin")
+    this.frameTarget.classList.remove("motion-safe:animate-pulse")
+
+    let src = event.target.src
+    if (src == this.currentSrc) {
+      // this must be a refresh
+      // do nothing
+    }
+    else if (src == this.originalFrameSrc)
+      this.srcHistory = [src]
+    else
+      this.srcHistory.push(src)
+
+    this.updateNavigationButtonsDisplay()
+  }
+
+  refreshButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.frameTarget.reload()
+  }
+
+  backButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.srcHistory.pop()
+    this.frameTarget.src = this.currentSrc
+  }
+
+  homeButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.frameTarget.src = this.originalFrameSrc
+  }
+
+  get currentSrc() { return this.srcHistory[this.srcHistory.length - 1] }
+
+  updateNavigationButtonsDisplay() {
+    if (this.hasHomeButtonTarget) {
+      this.homeButtonTarget.style.display = this.srcHistory.length > 1 ? '' : 'none'
+    }
+
+    if (this.hasBackButtonTarget) {
+      this.backButtonTarget.style.display = this.srcHistory.length > 2 ? '' : 'none'
+    }
+  }
+}

data/src/js/controllers/has_many_panel_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="has-many-panel"
+export default class extends Controller {
+  connect() {
+    console.log(`has-many-panel connected: ${this.element}`)
+  }
+}

data/src/js/controllers/nav_grid_menu_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-grid-menu"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-grid-menu connected: ${this.element}`)
+  }
+}

data/src/js/controllers/nav_grid_menu_item_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-grid-menu-item"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-grid-menu-item connected: ${this.element}`)
+  }
+}

data/{app/views/components/tab_bar/tab_bar_controller.js → src/js/controllers/nav_user_controller.js}

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="tab-bar"
+// Connects to data-controller="nav-user"
 export default class extends Controller {
   connect() {
-    console.log(`tab-bar connected: ${this.element}`)
+    console.log(`nav-user connected: ${this.element}`)
   }
 }

data/src/js/controllers/nav_user_link_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-user-link"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-user-link connected: ${this.element}`)
+  }
+}

data/src/js/controllers/nav_user_section_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-user-section"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-user-section connected: ${this.element}`)
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -0,0 +1,45 @@
+// Import controllers here
+import ResourceLayoutController from "./resource_layout_controller.js"
+import NavGridMenuItemController from "./nav_grid_menu_item_controller.js"
+import NavGridMenuController from "./nav_grid_menu_controller.js"
+import NavUserSectionController from "./nav_user_section_controller.js"
+import NavUserLinkController from "./nav_user_link_controller.js"
+import NavUserController from "./nav_user_controller.js"
+import ResourceHeaderController from "./resource_header_controller.js"
+import SidebarMenuItemController from "./sidebar_menu_item_controller.js"
+import SidebarMenuController from "./sidebar_menu_controller.js"
+import HasManyPanelController from "./has_many_panel_controller.js"
+import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
+import ToolbarController from "./toolbar_controller.js"
+import TableSearchInputController from "./table_search_input_controller.js"
+import TableToolbarController from "./table_toolbar_controller.js"
+import TableController from "./table_controller.js"
+import FormController from "./form_controller.js"
+import ResourceDropDownController from "./resource_drop_down_controller.js"
+import ResourceDismissController from "./resource_dismiss_controller.js"
+import FrameNavigatorController from "./frame_navigator_controller.js"
+import ColorModeController from "./color_mode_controller.js"
+
+export default function (application) {
+  // Register controllers here
+  application.register("resource-layout", ResourceLayoutController)
+  application.register("nav-grid-menu-item", NavGridMenuItemController)
+  application.register("nav-grid-menu", NavGridMenuController)
+  application.register("nav-user-section", NavUserSectionController)
+  application.register("nav-user-link", NavUserLinkController)
+  application.register("nav-user", NavUserController)
+  application.register("resource-header", ResourceHeaderController)
+  application.register("sidebar-menu-item", SidebarMenuItemController)
+  application.register("sidebar-menu", SidebarMenuController)
+  application.register("has-many-panel", HasManyPanelController)
+  application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
+  application.register("toolbar", ToolbarController)
+  application.register("table-search-input", TableSearchInputController)
+  application.register("table-toolbar", TableToolbarController)
+  application.register("table", TableController)
+  application.register("form", FormController)
+  application.register("resource-drop-down", ResourceDropDownController)
+  application.register("resource-dismiss", ResourceDismissController)
+  application.register("frame-navigator", FrameNavigatorController)
+  application.register("color-mode", ColorModeController)
+}

data/{app/assets/javascripts → src/js}/controllers/resource_dismiss_controller.js

@@ -11,6 +11,8 @@ export default class extends Controller {
   }
 
   connect() {
+    console.log(`resource-dismiss connected: ${this.element}`)
+
     // https://flowbite.com/docs/components/alerts/#javascript-behaviour
     this.dismiss = new Dismiss(this.targetTarget, this.triggerTarget);
 

data/{app/assets/javascripts → src/js}/controllers/resource_drop_down_controller.js

@@ -7,6 +7,8 @@ export default class extends Controller {
   static targets = ["trigger", "menu"]
 
   connect() {
+    console.log(`resource-drop-down connected: ${this.element}`)
+
     // https://flowbite.com/docs/components/dropdowns/#javascript-behaviour
     this.dropdown = new Dropdown(this.menuTarget, this.triggerTarget);
   }

data/src/js/controllers/resource_header_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="resource-header"
+export default class extends Controller {
+  connect() {
+    console.log(`resource-header connected: ${this.element}`)
+  }
+}

data/src/js/controllers/resource_layout_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="resource-layout"
+export default class extends Controller {
+  connect() {
+    console.log(`resource-layout connected: ${this.element}`)
+  }
+}

data/src/js/controllers/sidebar_menu_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="sidebar-menu"
+export default class extends Controller {
+  connect() {
+    console.log(`sidebar-menu connected: ${this.element}`)
+  }
+}

data/src/js/controllers/sidebar_menu_item_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="sidebar-menu-item"
+export default class extends Controller {
+  connect() {
+    console.log(`sidebar-menu-item connected: ${this.element}`)
+  }
+}

data/src/js/core.js

@@ -0,0 +1,4 @@
+import registerControllers from "./controllers/register_controllers.js"
+
+
+export { registerControllers }

data/{app/assets/javascripts/plutonium-app.js → src/js/plutonium.js}

@@ -1,7 +1,7 @@
 import { Application } from "@hotwired/stimulus"
 const application = Application.start()
 
-import { registerControllers } from "./plutonium"
+import { registerControllers } from "./core"
 registerControllers(application)
 
 import "./turbo"

data/{app/assets/javascripts → src/js}/turbo/turbo_debug.js

@@ -1,4 +1,4 @@
-eventNames = [
+[
   'turbo:click',
   'turbo:before-visit',
   'turbo:visit',
@@ -21,9 +21,7 @@ eventNames = [
   'turbo:before-morph-element',
   'turbo:morph-attribute',
   'turbo:morph',
-]
-
-eventNames.forEach(eventName => {
+].forEach(eventName => {
   document.addEventListener(eventName, (event) => {
     console.log(event.type, event);
   });

data/tailwind.config.js

@@ -1,90 +1,91 @@
-
 /** @type {import('tailwindcss').Config} */
 
-let safelist = [];
-// Object.keys(colors).forEach((color) => {
-//   if (typeof colors[color] === 'object') {
-//     Object.keys(colors[color]).forEach((shade) => {
-//       safelist.push(`bg-${color}-${shade}`);
-//       safelist.push(`text-${color}-${shade}`);
-//       // Add other utilities as needed
-//     });
-//   }
-// });
+export const content = [
+  `${__dirname}/src/**/*.{css,js}`,
+  `${__dirname}/app/views/**/*.{rb,erb,js}`,
+  `${__dirname}/config/initializers/simple_form.rb`,
 
-module.exports = {
-  content: [
-    // node modules are not packaged as part of the gem.
-    './node_modules/flowbite/**/*.js', // requires framework user to have flowbite installed.
-    `${__dirname}/app/assets/**/*.css`,
-    `${__dirname}/app/views/**/*.{rb,erb}`,
-    `${__dirname}/config/initializers/simple_form.rb`,
-    // TODO: temporary workaround for buttons flex basis hack.
-    // To be removed after moving buttons_helper to components.
-    // `${__dirname}/lib/plutonium/**/*.{rb,erb}`
-  ],
-  darkMode: "selector",
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('flowbite/plugin'),
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          '50': '#f0f7fe',
-          '100': '#ddecfc',
-          '200': '#c3dffa',
-          '300': '#99ccf7',
-          '400': '#69b0f1',
-          '500': '#4691eb',
-          '600': '#3174df',
-          '700': '#285fcc',
-          '800': '#274ea6',
-          '900': '#244484',
-          '950': '#1b2b50',
-        },
-      },
-      screens: {
-        'xs': '475px',
+  // node modules are not packaged as part of the gem.
+  // requires users to have flowbite installed in their own project.
+  './node_modules/flowbite/**/*.js',
+  // TODO: temporary workaround for legacy components.
+  // To be removed after converting buttons_helper and other files containing tailwind to components .
+  // `${__dirname}/lib/plutonium/**/*.{rb,erb}`
+];
+export const darkMode = "selector";
+export const plugins = [
+  // requires users to have the required packages installed in their own project.
+  require('@tailwindcss/forms'),
+  require('flowbite/plugin'),
+];
+export const theme = {
+  extend: {
+    colors: {
+      primary: {
+        '50': '#f0f7fe',
+        '100': '#ddecfc',
+        '200': '#c3dffa',
+        '300': '#99ccf7',
+        '400': '#69b0f1',
+        '500': '#4691eb',
+        '600': '#3174df',
+        '700': '#285fcc',
+        '800': '#274ea6',
+        '900': '#244484',
+        '950': '#1b2b50',
       },
     },
-    fontFamily: {
-      'body': [
-        'Lato',
-        'ui-sans-serif',
-        'system-ui',
-        '-apple-system',
-        'system-ui',
-        'Segoe UI',
-        'Roboto',
-        'Helvetica Neue',
-        'Arial',
-        'Noto Sans',
-        'sans-serif',
-        'Apple Color Emoji',
-        'Segoe UI Emoji',
-        'Segoe UI Symbol',
-        'Noto Color Emoji'
-      ],
-      'sans': [
-        'Lato',
-        'ui-sans-serif',
-        'system-ui',
-        '-apple-system',
-        'system-ui',
-        'Segoe UI',
-        'Roboto',
-        'Helvetica Neue',
-        'Arial',
-        'Noto Sans',
-        'sans-serif',
-        'Apple Color Emoji',
-        'Segoe UI Emoji',
-        'Segoe UI Symbol',
-        'Noto Color Emoji'
-      ]
-    }
+    screens: {
+      'xs': '475px',
+    },
   },
-  safelist: safelist
-}
+  fontFamily: {
+    'body': [
+      'Lato',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'system-ui',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    ],
+    'sans': [
+      'Lato',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'system-ui',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    ]
+  }
+};
+
+
+// const _safelist = [];
+// // Object.keys(colors).forEach((color) => {
+// //   if (typeof colors[color] === 'object') {
+// //     Object.keys(colors[color]).forEach((shade) => {
+// //       safelist.push(`bg-${color}-${shade}`);
+// //       safelist.push(`text-${color}-${shade}`);
+// //       // Add other utilities as needed
+// //     });
+// //   }
+// // });
+// export const safelist = _safelist;