plutonium 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0103aba4936dde1bec6cab88f0e9d491a74ff7b168a10888c9e99bec72b35675
-  data.tar.gz: 0abff8429f4c4cacd6a5d4e7336513ebd873893ebfa289c587eaac439541494e
+  metadata.gz: 158056c876d10803c634088f4133a012e7b378f533925ce9fec161734bcc4a39
+  data.tar.gz: a6d0b5e28877477adf1e20a60deca2071861cb2625a263123f0b3536af6062d2
 SHA512:
-  metadata.gz: db06cc6b2828ffcbedb6e8d600a18cf314a518b9a4d2c7b7fe518ff0823f80f85ee3692074988446539963cc2ebf7e226e6e1390438b7afa3be4466487115609
-  data.tar.gz: 63edf7e9e738e0a38b554437f2a335ae9173a55c3e7a7a6cf62d5ca83d1616ee552260a67a0a8a805c9e91cdb28822d2b5bab9e94ad9f097a26ded085139acf7
+  metadata.gz: 0c0f9c9a2b24367f18e3f65f009265b1bb991e4080b5652a065186555be298b776710eec9ff4b7bc219b370ca22876cbceb20f175a8ea7d44521610f983e0e52
+  data.tar.gz: 9978c7b3479f59ee8dc5716a61805fcab1632434ce5600acf267ad6f8c829e594529fa2e8a79f89cda43987b2caf7076cea3ce35116ee47775c66c3574eef788

data/README.md

@@ -79,3 +79,9 @@ gem "plutonium_generators", github: "radioactive-labs/plutonium-generators", gro
 #                --skip-test --skip-system-test --javascript=esbuild --css=bootstrap --database=postgresql
 
 -->
+
+```bash
+rails new pluton8_starter --name="Pluton8 Starter" --database=sqlite3 --skip-action-mailbox --skip-action-text --skip-active-storage --asset-pipeline=propshaft --skip-jbuilder --javascript=importmap --css=tailwind
+
+bin/rails app:template LOCATION=~/template.rb
+```

data/app/assets/js/controllers/application.js

@@ -1,4 +1,5 @@
 import { Application } from "@hotwired/stimulus"
+import "mapkick/bundle"
 
 const application = Application.start()
 window.Stimulus = application

data/app/assets/js/controllers/index.js

@@ -2,6 +2,9 @@ import { application } from "./application"
 
 // Register controllers here
 
+import NestedResourceFormFieldsController from "../../../../app/views/components/nested_resource_form_fields/nested_resource_form_fields_controller.js"
+application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
+
 import TabBarController from "../../../../app/views/components/tab_bar/tab_bar_controller.js"
 application.register("tab-bar", TabBarController)
 
@@ -19,3 +22,9 @@ application.register("table", TableController)
 
 import FormController from "../../../../app/views/components/form/form_controller.js"
 application.register("form", FormController)
+
+import ResourceDropDownController from "./resource_drop_down_controller.js"
+application.register("resource-drop-down", ResourceDropDownController)
+
+import ResourceDismissController from "./resource_dismiss_controller.js"
+application.register("resource-dismiss", ResourceDismissController)

data/app/assets/js/controllers/resource_dismiss_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+import { Dismiss } from 'flowbite';
+
+
+// Connects to data-controller="resource-dismiss"
+export default class extends Controller {
+  static targets = ["trigger", "target"]
+
+  static values = {
+    after: Number,
+  }
+
+  connect() {
+    // https://flowbite.com/docs/components/alerts/#javascript-behaviour
+    this.dismiss = new Dismiss(this.targetTarget, this.triggerTarget);
+
+    console.log(this.hasAfterValue)
+    console.log(this.afterValue)
+    if (this.hasAfterValue && this.afterValue > 0) {
+      this.autoDismissTimeout = setTimeout(() => {
+        this.hide()
+        this.autoDismissTimeout = null
+      }, this.afterValue);
+    }
+  }
+
+  disconnect() {
+    if (this.autoDismissTimeout) clearTimeout(this.autoDismissTimeout)
+
+    this.dismiss = null
+    this.autoDismissTimeout = null
+  }
+
+  hide() {
+    this.dismiss.hide()
+  }
+}

data/app/assets/js/controllers/resource_drop_down_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+import { Dropdown } from 'flowbite';
+
+
+// Connects to data-controller="resource-drop-down"
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  connect() {
+    // https://flowbite.com/docs/components/dropdowns/#javascript-behaviour
+    this.dropdown = new Dropdown(this.menuTarget, this.triggerTarget);
+  }
+
+  disconnect() {
+    this.dropdown = null
+  }
+
+  toggle() {
+    this.dropdown.toggle()
+  }
+
+  show() {
+    this.dropdown.show()
+  }
+
+  hide() {
+    this.dropdown.show()
+  }
+}

data/app/assets/js/turbo/index.js

@@ -1,4 +1,4 @@
-import * as Turbo from "@hotwired/turbo"
+// import * as Turbo from "@hotwired/turbo"
 
 import "./turbo_debug"
 // import "./turbo_actions"

data/app/views/application/_flash.html.erb

@@ -1 +1 @@
-<%= render "flash_toasts" %>
+<%= render "flash_alerts" %>

data/app/views/application/_flash_alerts.html.erb

@@ -1,9 +1,53 @@
 <% flash.each do |type, msg| %>
-  <%
-    type = { alert: :danger, warning: :warning, success: :success }[type.to_sym] || :primary
-  %>
-  <div class="alert alert-<%= type %> alert-dismissible fade show" role="alert" data-turbo-temporary>
-    <%= msg %>
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-    </div>
+<%
+  color = case type.to_sym
+  when :success
+    # bg-green-50 text-green-800 text-green-500 text-green-400 ring-green-400
+    "green"
+  when :warning
+    # bg-yellow-50 text-yellow-800 text-yellow-500 text-yellow-400 ring-yellow-400
+    "yellow"
+  when :alert, :danger, :error
+    # bg-red-50 text-red-800 text-red-500 text-red-400 ring-red-400
+    "red"
+  else
+    # bg-blue-50 text-blue-800 text-blue-500 text-blue-400 ring-blue-400
+    "blue"
+  end
+%>
+
+<div data-controller="resource-dismiss"
+    data-resource-dismiss-target="target"
+    data-resource-dismiss-after-value="6000"
+    class="flex items-center p-4 mb-4 text-<%= color %>-800 rounded-lg bg-<%= color %>-50 dark:bg-gray-800 dark:text-<%= color %>-400"
+    role="alert">
+  <% case type.to_sym %>
+  <% when :success %>
+    <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+    </svg>
+  <% when :warning %>
+    <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+    </svg>
+  <% when :alert, :danger, :error %>
+    <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+    </svg>
+  <% else %>
+    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+    </svg>
   <% end %>
+  <div class="ms-3 text-sm font-normal"><%= msg %></div>
+  <button type="button"
+    class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-500 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-<%= color %>-400 dark:hover:bg-gray-700"
+    data-resource-dismiss-target="trigger"
+    aria-label="Close">
+      <span class="sr-only">Close</span>
+      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+      </svg>
+  </button>
+</div>
+<% end %>

data/app/views/application/_flash_toasts.html.erb

@@ -1,26 +1,56 @@
-<div aria-live="polite" aria-atomic="true" class="position-relative" data-controller="toasts">
-  <div class="toast-container top-0 end-0 p-3 ">
-    <% flash.each do |type, msg| %>
-      <%
-        type = { alert: :danger, error: :danger, warning: :warning, success: :success }[type.to_sym] || :primary
-        title = { danger: 'Error', warning: 'Warning', success: 'Success' }[type] || 'Info'
-        icon = {
-          danger: 'exclamation-triangle-fill',
-          warning: 'exclamation-diamond',
-          success: 'check-circle-fill'
-        }[type] || 'exclamation-circle'
-      %>
-      <div class="toast text-bg-<%= type %>" role="alert" aria-live="assertive" aria-atomic="true" data-turbo-temporary>
-        <div class="toast-header">
-          <i class="bi bi-<%= icon %>"></i>&nbsp;
-          <strong class="me-auto"><%= title %></strong>
-          <small class="text-body-secondary"><%= timeago(DateTime.now) %></small>
-          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-        <div class="toast-body">
-          <%= msg %>
-        </div>
-      </div>
+<% flash.each do |type, msg| %>
+<%
+  color = case type.to_sym
+  when :success
+    # text-green-500 bg-green-100 bg-green-800 text-green-200 bg-green-50 text-green-400 ring-green-400
+    "green"
+  when :warning
+    # text-yellow-500 bg-yellow-100 bg-yellow-800 text-yellow-200 bg-yellow-50 text-yellow-400 ring-yellow-400
+    "yellow"
+  when :alert, :danger, :error
+    # text-red-500 bg-red-100 bg-red-800 text-red-200 bg-red-50 text-red-400 ring-red-400
+    "red"
+  else
+    # text-blue-500 bg-blue-100 bg-blue-800 text-blue-200 bg-blue-50 text-blue-400 ring-blue-400
+    "blue"
+  end
+%>
+
+<div data-controller="resource-dismiss"
+    data-resource-dismiss-target="target"
+    data-resource-dismiss-after-value="6000"
+    class="fixed z-50 top-16 right-5 flex items-center w-full max-w-md p-4 text-gray-500 bg-<%= color %>-50 rounded-lg shadow dark:text-<%= color %>-400 dark:bg-gray-800"
+    role="alert">
+
+  <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-<%= color %>-500 bg-<%= color %>-100 rounded-lg dark:bg-<%= color %>-800 dark:text-<%= color %>-200">
+    <% case type.to_sym %>
+    <% when :success %>
+      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+      </svg>
+    <% when :warning %>
+      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+      </svg>
+    <% when :alert, :danger, :error %>
+      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+      </svg>
+    <% else %>
+      <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+      </svg>
     <% end %>
   </div>
+  <div class="ms-3 text-sm font-normal"><%= msg %></div>
+  <button type="button"
+    class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-400 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:text-<%= color %>-400 dark:bg-gray-800 dark:hover:bg-gray-700"
+    data-resource-dismiss-target="trigger"
+    aria-label="Close">
+      <span class="sr-only">Close</span>
+      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+      </svg>
+  </button>
 </div>
+<% end %>