keystone_ui-preferences 0.7.0 → 0.9.0

data/app/views/keystone_ui/preferences/settings/_editor_layout.html.erb

@@ -0,0 +1,29 @@
+<div data-appearance-editor data-controller="keystone-ui--preferences--appearance-editor" data-action="tab-switcher:change->keystone-ui--preferences--appearance-editor#showPanel submit->keystone-ui--preferences--appearance-editor#save turbo:before-visit@document->keystone-ui--preferences--appearance-editor#confirmLeave beforeunload@window->keystone-ui--preferences--appearance-editor#warnBeforeUnload">
+  <% if previews %>
+    <style>
+      [data-editor-panel]:not([data-shown]) { display: none; }
+      @media (min-width: 64rem) {
+        [data-appearance-editor] .ks-tab-bar { display: none; }
+        [data-editor-panels] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
+        [data-editor-panel]:not([data-shown]) { display: block; }
+      }
+    </style>
+    <%= ui_tab_switcher(tabs: %w[Edit Preview]) do %>
+      <div data-editor-panels>
+        <div data-editor-panel data-shown><%= editor %></div>
+        <div data-editor-panel><%= render partial: "keystone_ui/preferences/settings/theme_preview" %></div>
+      </div>
+    <% end %>
+  <% else %>
+    <%= editor %>
+  <% end %>
+  <div data-leave-question>
+    <%= ui_modal(title: "Leave without saving?", size: :sm) do %>
+      <p>Your changes are not saved yet.</p>
+      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;">
+        <%= ui_button(label: "Leave without saving", variant: :danger, type: :button, data: { action: "keystone-ui--preferences--appearance-editor#leave" }) %>
+        <%= ui_button(label: "Stay", variant: :secondary, type: :button, data: { action: "modal#close" }) %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/keystone_ui/preferences/settings/_theme_preview.html.erb

@@ -0,0 +1,34 @@
+<div data-theme-preview style="display: flex; flex-direction: column; gap: 1.5rem;">
+  <% %w[light dark].each do |side| %>
+    <div data-theme="<%= side %>">
+      <%= ui_panel do %>
+        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+          <%= ui_card(title: "Quarterly review", summary: "Revenue grew in every region this quarter.", link: "#", cta: "Open") %>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+            <%= ui_button(label: "Save", type: :button) %>
+            <%= ui_button(label: "Cancel", variant: :secondary, type: :button) %>
+            <%= ui_button(label: "Delete", variant: :danger, type: :button) %>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 1rem;">
+            <%= ui_form_field(attribute: "preview_name", label: "Name", value: "Northwind Traders") %>
+            <%= ui_form_field(attribute: "preview_region", label: "Region", type: :select, options: [ [ "North", "north" ], [ "South", "south" ] ], value: "north", required: true) %>
+          </div>
+          <%= ui_data_table(
+                items: [ { customer: "Northwind Traders", region: "North", total: "$12,400" }, { customer: "Harbor Supply", region: "South", total: "$8,950" }, { customer: "Fern & Co", region: "North", total: "$4,120" } ],
+                columns: [ { customer: "Customer" }, { region: "Region" }, { total: "Total" } ]
+              ) %>
+          <%= ui_line_chart(
+                labels: %w[Jan Feb Mar Apr May Jun],
+                series: [ { name: "This year", data: [ 12, 19, 15, 24, 22, 30 ] }, { name: "Last year", data: [ 10, 14, 13, 17, 19, 21 ] } ],
+                height: :sm
+              ) %>
+          <nav class="ks-sidebar" aria-label="Sample navigation">
+            <% [ "Dashboard", "Customers", "Reports" ].each_with_index do |label, index| %>
+              <a href="#" class="<%= [ Keystone::Ui::NavigationComponent::SIDEBAR_TAB_CLASSES, (Keystone::Ui::NavigationComponent::ACTIVE_CLASS if index.zero?) ].compact.join(" ") %>"><%= label %></a>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/keystone_ui/preferences/settings/_theme_settings.html.erb

@@ -0,0 +1,52 @@
+<% saved_preset = KeystoneUi::Looks::Themes.all.find { |name, _preset| name.to_s == saved["preset_name"] }&.last %>
+<% theme = saved_preset ? saved_preset[:theme] : saved["theme"].to_h %>
+<% shown = local_assigns[:sent_theme] || theme %>
+<% check = KeystoneUi::Preferences::CheckedTheme.new(local_assigns[:sent_paste].present? ? {} : local_assigns[:sent_theme].to_h) %>
+<% id_prefix = local_assigns.fetch(:id_prefix, "appearance") %>
+<% fonts_id = "#{id_prefix}-theme-fonts" %>
+<% roles = KeystoneUi::Preferences::ThemeRoles::ROLES.to_h { |name, role| [ name, role.merge(hover: KeystoneUi::Preferences::ThemeCss::HOVERS[name]).compact ] } %>
+<div data-action="change->keystone-ui--preferences--appearance-editor#apply input->keystone-ui--preferences--appearance-editor#apply" data-theme-roles="<%= roles.to_json %>" data-saved-theme="<%= theme.to_json %>" style="display: flex; flex-direction: column; gap: 2rem;">
+  <% KeystoneUi::Preferences::ThemeRoles::GROUPS.each do |group, sets| %>
+    <%= ui_section(title: group, spacing: :sm) do %>
+      <% sets.each do |set, names| %>
+        <fieldset style="border: 0; padding: 0; margin: 0; min-width: 0;">
+          <legend class="<%= Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>"><%= set %></legend>
+          <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+            <% names.each do |name| %>
+              <% role = KeystoneUi::Preferences::ThemeRoles::ROLES.fetch(name) %>
+              <% if role[:kind] == :colour %><div role="group" aria-label="--<%= name %>" style="display: flex; flex-wrap: wrap; gap: 1rem;"><% end %>
+              <% (role[:kind] == :colour ? %w[light dark] : %w[light]).each do |side| %>
+                <% field_name = "theme[#{name}][#{side}]" %>
+                <% value = shown.dig(name, side).to_s %>
+                <% label = role[:kind] == :colour ? "--#{name}, #{side}" : "--#{name}" %>
+                <% if %i[colour shadow_colour].include?(role[:kind]) && (value.empty? || value.match?(KeystoneUi::Preferences::CheckedTheme::COLOUR)) %>
+                  <%= ui_color_picker(name: field_name, value: value, label: label) %>
+                <% else %>
+                  <% field_id = "#{id_prefix}-#{field_name.parameterize}" %>
+                  <div class="<%= Keystone::Ui::FormFieldComponent::WRAPPER_CLASSES %>">
+                    <%= label_tag field_id, label, class: Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>
+                    <%= text_field_tag field_name, value, id: field_id, class: Keystone::Ui::InputComponent::BASE_CLASSES, list: (fonts_id if role[:kind] == :font_list) %>
+                  </div>
+                <% end %>
+              <% end %>
+              <% if name == check.failing_setting %>
+                <p class="<%= Keystone::Ui::FormFieldComponent::ERROR_CLASSES %>"><%= check.refusal.message %></p>
+              <% end %>
+              <% if role[:kind] == :colour %></div><% end %>
+            <% end %>
+          </div>
+        </fieldset>
+      <% end %>
+    <% end %>
+  <% end %>
+  <div class="<%= Keystone::Ui::FormFieldComponent::WRAPPER_CLASSES %>">
+    <%= label_tag "#{id_prefix}-theme-export", "Export", class: Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>
+    <%= content_tag :textarea, nil, id: "#{id_prefix}-theme-export", readonly: true, rows: 8, class: Keystone::Ui::TextareaComponent::BASE_CLASSES, data: { theme_export: "" } %>
+    <div><%= ui_copy_button(text: "", error_message: "Select the text to copy it") %></div>
+  </div>
+  <datalist id="<%= fonts_id %>">
+    <% (KeystoneUi::Preferences.configuration.theme_fonts + KeystoneUi::Preferences::CheckedTheme::SYSTEM_FONTS).each do |font| %>
+      <option value="<%= font %>"></option>
+    <% end %>
+  </datalist>
+</div>

data/lib/generators/keystone_ui/preferences/install/install_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Installs KeystoneUi::Preferences: copies its migration and its template picker script."
+        desc "Installs KeystoneUi::Preferences: copies its migration and its appearance editor script."
 
         def copy_migration
           migration_template(
@@ -20,9 +20,9 @@ module KeystoneUi
           )
         end
 
-        def copy_template_picker_script
-          script = File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__)
-          create_file "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js", File.read(script)
+        def copy_appearance_editor_script
+          script = File.expand_path("../../../../../app/javascript/keystone_ui/preferences/appearance_editor_controller.js", __dir__)
+          create_file "app/javascript/controllers/keystone_ui/preferences/appearance_editor_controller.js", File.read(script)
         end
       end
     end

data/lib/generators/keystone_ui/preferences/update/update_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed and the template picker script when the app has none."
+        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed and the appearance editor script when the app has none."
 
         def copy_remove_extra_owner_index_migration
           migration_template(
@@ -27,11 +27,11 @@ module KeystoneUi
           )
         end
 
-        def copy_template_picker_script
-          copy = "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js"
+        def copy_appearance_editor_script
+          copy = "app/javascript/controllers/keystone_ui/preferences/appearance_editor_controller.js"
           return if File.exist?(File.join(destination_root, copy))
 
-          create_file copy, File.read(File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__))
+          create_file copy, File.read(File.expand_path("../../../../../app/javascript/keystone_ui/preferences/appearance_editor_controller.js", __dir__))
         end
       end
     end

data/lib/keystone_ui/preferences/colors_check.rb

@@ -6,8 +6,9 @@ module KeystoneUi
       class Error < StandardError; end
 
       MESSAGE = "keystone_ui-preferences and keystone_ui-colors both save colours, modes and looks, so the app cannot load both. " \
-        "Run bin/rails generate keystone_ui:preferences:update first, so the migration copying keystone_ui-colors' saved choices is in db/migrate, " \
-        "then remove keystone_ui-colors from the Gemfile and run bin/rails db:migrate."
+        "Remove keystone_ui-colors from the Gemfile and change every KeystoneUi::Colors name the app uses first, " \
+        "then run bin/rails generate keystone_ui:preferences:update, so the migration copying keystone_ui-colors' saved choices is in db/migrate, " \
+        "and then run bin/rails db:migrate."
 
       def initialize(colors_loaded:)
         @colors_loaded = colors_loaded

data/lib/keystone_ui/preferences/configuration.rb

@@ -3,7 +3,7 @@
 module KeystoneUi
   module Preferences
     class Configuration
-      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes, :default_accent, :default_surface, :default_background, :default_text, :default_mode, :user_looks, :app_look_label, :account_colors, :account_looks
+      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes, :default_accent, :default_surface, :default_background, :default_text, :default_mode, :user_looks, :app_look_label, :account_colors, :account_looks, :theme_fonts
 
       def initialize
         @current_owner_method = :current_user
@@ -19,6 +19,7 @@ module KeystoneUi
         @app_look_label = "Classic"
         @account_colors = true
         @account_looks = true
+        @theme_fonts = []
       end
 
       def name_component(component_key, name)

data/lib/keystone_ui/preferences/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Preferences
-    VERSION = "0.7.0"
+    VERSION = "0.9.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-preferences
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,28 +15,42 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.41.0
+        version: 0.47.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.41.0
+        version: 0.47.0
 - !ruby/object:Gem::Dependency
   name: keystone_ui-looks
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.0
+        version: 0.4.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.0
+        version: 0.4.0
+- !ruby/object:Gem::Dependency
+  name: keystone_ui-styles
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.23.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.23.0
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
@@ -93,28 +107,35 @@ files:
 - app/controllers/concerns/keystone_ui/preferences/component_preferences.rb
 - app/controllers/keystone_ui/preferences/application_controller.rb
 - app/controllers/keystone_ui/preferences/component_preferences_controller.rb
-- app/javascript/keystone_ui/preferences/theme_settings_controller.js
+- app/javascript/keystone_ui/preferences/appearance_editor_controller.js
 - app/models/keystone_ui/preferences/appearance_choice.rb
 - app/models/keystone_ui/preferences/application_record.rb
+- app/models/keystone_ui/preferences/checked_theme.rb
 - app/models/keystone_ui/preferences/chosen_colours.rb
 - app/models/keystone_ui/preferences/component_preference.rb
 - app/models/keystone_ui/preferences/kept.rb
 - app/models/keystone_ui/preferences/layout_choice.rb
 - app/models/keystone_ui/preferences/navigation_arrangement.rb
-- app/models/keystone_ui/preferences/palette_css.rb
 - app/models/keystone_ui/preferences/pick_account_appearance.rb
 - app/models/keystone_ui/preferences/pick_account_layouts.rb
 - app/models/keystone_ui/preferences/pick_appearance.rb
 - app/models/keystone_ui/preferences/pick_navigation_order.rb
 - app/models/keystone_ui/preferences/pick_navigation_placement.rb
 - app/models/keystone_ui/preferences/refusal.rb
+- app/models/keystone_ui/preferences/sent_theme.rb
+- app/models/keystone_ui/preferences/theme_css.rb
+- app/models/keystone_ui/preferences/theme_reader.rb
+- app/models/keystone_ui/preferences/theme_roles.rb
 - app/views/keystone_ui/preferences/settings/_account_appearance.html.erb
 - app/views/keystone_ui/preferences/settings/_account_layouts.html.erb
 - app/views/keystone_ui/preferences/settings/_appearance.html.erb
 - app/views/keystone_ui/preferences/settings/_colour_choices.html.erb
+- app/views/keystone_ui/preferences/settings/_editor_layout.html.erb
 - app/views/keystone_ui/preferences/settings/_look_choices.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_order.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_placement.html.erb
+- app/views/keystone_ui/preferences/settings/_theme_preview.html.erb
+- app/views/keystone_ui/preferences/settings/_theme_settings.html.erb
 - config/routes.rb
 - lib/generators/keystone_ui/preferences/install/install_generator.rb
 - lib/generators/keystone_ui/preferences/install/templates/create_keystone_ui_preferences_component_preferences.rb.erb

data/app/javascript/keystone_ui/preferences/theme_settings_controller.js

@@ -1,59 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["accentPicker", "surfacePicker", "textPicker", "customRadio", "templateLabel"]
-
-  connect() {
-    this.colorPickerTargets().forEach(picker => picker.addEventListener("change", () => this.customColorChanged()))
-  }
-
-  colorPickerTargets() {
-    return [
-      this.hasAccentPickerTarget && this.accentPickerTarget,
-      this.hasSurfacePickerTarget && this.surfacePickerTarget,
-      this.hasTextPickerTarget && this.textPickerTarget
-    ].filter(Boolean)
-  }
-
-  selectTemplate(event) {
-    const input = event.currentTarget
-    const label = input.closest("[data-template]")
-    const accentHex = input.dataset.accentHex
-    const surfaceHex = input.dataset.surfaceHex
-    const textHex = input.dataset.textHex
-
-    this.setPickerValue(this.accentPickerTarget, accentHex)
-    this.setPickerValue(this.surfacePickerTarget, surfaceHex)
-    this.setPickerValue(this.textPickerTarget, textHex)
-
-    this.highlightTemplate(label.dataset.template)
-  }
-
-  customColorChanged() {
-    if (this.hasCustomRadioTarget) this.customRadioTarget.checked = true
-    this.highlightTemplate("custom")
-  }
-
-  highlightTemplate(selected) {
-    this.templateLabelTargets.forEach(label => {
-      const border = label.querySelector("span")
-      if (label.dataset.template === selected) {
-        border.classList.remove("border-transparent")
-        border.classList.add("border-accent-500")
-      } else {
-        border.classList.remove("border-accent-500")
-        border.classList.add("border-transparent")
-      }
-    })
-  }
-
-  setPickerValue(wrapper, hex) {
-    const input = wrapper.querySelector("input[type='hidden']")
-    const swatch = wrapper.querySelector("[data-color-picker-target='swatch']")
-    const hexLabel = wrapper.querySelector("[data-color-picker-target='hexLabel']")
-
-    if (input) input.value = hex
-    if (swatch) swatch.style.backgroundColor = hex
-    if (hexLabel) hexLabel.textContent = hex
-  }
-}

data/app/models/keystone_ui/preferences/palette_css.rb

@@ -1,32 +0,0 @@
-# frozen_string_literal: true
-
-module KeystoneUi
-  module Preferences
-    class PaletteCss
-      def initialize(accent:, surface:, background:, text:)
-        @accent = accent
-        @surface = surface
-        @background = background
-        @text = text
-      end
-
-      def to_s
-        lines = shade_lines("accent", shades(@accent) { KeystoneUi::Looks::Palettes.accent(@accent) }) + shade_lines("surface", shades(@surface) { KeystoneUi::Looks::Palettes.surface(@surface) })
-        lines << "  --color-custom-background: #{@background};" << "  --color-custom-text: #{@text};"
-        ":root {\n#{lines.join("\n")}\n}"
-      end
-
-      private
-
-      def shades(colour)
-        return KeystoneUi::Looks::Palettes.generate_shades(colour) if colour.start_with?("#")
-
-        yield
-      end
-
-      def shade_lines(name, shades)
-        shades.map { |shade, hex| "  --color-#{name}-#{shade}: #{hex};" }
-      end
-    end
-  end
-end