kiso 0.3.0.pre → 0.4.0.pre

data/app/views/kiso/components/nav/_section.html.erb

@@ -1,17 +1,17 @@
-<%# locals: (title: nil, open: true, collapsible: true, css_classes: "", **component_options) %>
+<%# locals: (title: nil, open: true, collapsible: true, ui: {}, css_classes: "", **component_options) %>
 <% if title && collapsible %>
   <%= content_tag :details,
       class: Kiso::Themes::NavSection.render(class: css_classes),
       data: kiso_prepare_options(component_options, slot: "nav-section"),
       open: open,
       **component_options do %>
-    <summary class="<%= Kiso::Themes::NavSectionTitle.render %>" data-slot="nav-section-title">
+    <summary class="<%= Kiso::Themes::NavSectionTitle.render(class: ui[:title]) %>" data-slot="nav-section-title">
       <span class="truncate"><%= title %></span>
       <span class="ml-auto" data-slot="nav-section-chevron">
         <%= kiso_component_icon(:chevron_down, class: "size-4") %>
       </span>
     </summary>
-    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render %>">
+    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render(class: ui[:content]) %>">
       <%= yield %>
     </div>
   <% end %>
@@ -20,10 +20,10 @@
       class: Kiso::Themes::NavSection.render(class: css_classes),
       data: kiso_prepare_options(component_options, slot: "nav-section"),
       **component_options do %>
-    <div class="<%= Kiso::Themes::NavSectionTitle.render %>" data-slot="nav-section-title">
+    <div class="<%= Kiso::Themes::NavSectionTitle.render(class: ui[:title]) %>" data-slot="nav-section-title">
       <span class="truncate"><%= title %></span>
     </div>
-    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render %>">
+    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render(class: ui[:content]) %>">
       <%= yield %>
     </div>
   <% end %>

data/app/views/kiso/components/page/_center.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCenter.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-center"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page/_left.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :aside,
+    class: Kiso::Themes::PageLeft.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-left"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page/_right.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :aside,
+    class: Kiso::Themes::PageRight.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-right"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_body.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCardBody.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-body"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_description.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :p,
+    class: Kiso::Themes::PageCardDescription.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_footer.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCardFooter.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-footer"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_header.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCardHeader.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-header"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_icon.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCardIcon.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-icon"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_card/_title.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :p,
+    class: Kiso::Themes::PageCardTitle.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card-title"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_header/_description.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :p,
+    class: Kiso::Themes::PageHeaderDescription.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-header-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_header/_headline.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageHeaderHeadline.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-header-headline"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_header/_links.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageHeaderLinks.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-header-links"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_header/_title.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :h1,
+    class: Kiso::Themes::PageHeaderTitle.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-header-title"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_body.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageSectionBody.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-body"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_description.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **component_options) %>
+<%= content_tag :p,
+    class: Kiso::Themes::PageSectionDescription.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_header.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageSectionHeader.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-header"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_headline.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageSectionHeadline.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-headline"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_links.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageSectionLinks.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-links"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_title.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **component_options) %>
+<%= content_tag :h2,
+    class: Kiso::Themes::PageSectionTitle.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-title"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/page_section/_wrapper.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (order: :first, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageSectionWrapper.render(order: order, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section-wrapper"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/pagination/_ellipsis.html.erb

@@ -5,5 +5,5 @@
     data: kiso_prepare_options(component_options, slot: "pagination-ellipsis"),
     **component_options do %>
   <%= kiso_component_icon(:ellipsis, size: :sm) %>
-  <%= content_tag :span, "More pages", class: "sr-only" %>
+  <%= content_tag :span, t("kiso.pagination.more_pages"), class: "sr-only" %>
 <% end %>

data/app/views/kiso/components/pagination/_next.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (href: "#", active: false, css_classes: "", **component_options) %>
-<% aria_attrs = {label: "Go to next page"}
+<% aria_attrs = {label: t("kiso.pagination.next_page")}
    aria_attrs[:current] = "page" if active %>
 <%= content_tag :a,
     href: href,
@@ -7,6 +7,6 @@
     class: Kiso::Themes::PaginationNext.render(active: active, class: css_classes),
     data: kiso_prepare_options(component_options, slot: "pagination-next"),
     **component_options do %>
-  <%= content_tag :span, "Next", class: "hidden sm:block" %>
+  <%= content_tag :span, t("kiso.pagination.next"), class: "hidden sm:block" %>
   <%= kiso_component_icon(:chevron_right) %>
 <% end %>

data/app/views/kiso/components/pagination/_previous.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (href: "#", active: false, css_classes: "", **component_options) %>
-<% aria_attrs = {label: "Go to previous page"}
+<% aria_attrs = {label: t("kiso.pagination.previous_page")}
    aria_attrs[:current] = "page" if active %>
 <%= content_tag :a,
     href: href,
@@ -8,5 +8,5 @@
     data: kiso_prepare_options(component_options, slot: "pagination-previous"),
     **component_options do %>
   <%= kiso_component_icon(:chevron_left) %>
-  <%= content_tag :span, "Previous", class: "hidden sm:block" %>
+  <%= content_tag :span, t("kiso.pagination.previous"), class: "hidden sm:block" %>
 <% end %>

data/app/views/kiso/components/select/_item.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (value:, disabled: false, css_classes: "", **component_options) %>
+<%# locals: (value:, disabled: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::SelectItem.render(class: css_classes),
     role: "option",
@@ -10,7 +10,7 @@
       disabled: (disabled ? "true" : nil)),
     aria: {selected: false, disabled: (disabled || nil)},
     **component_options do %>
-  <%= tag.span class: Kiso::Themes::SelectItemIndicator.render,
+  <%= tag.span class: Kiso::Themes::SelectItemIndicator.render(class: ui[:indicator]),
               data: { slot: "select-item-indicator", kiso__select_target: "indicator" },
               hidden: true do %>
     <%= kiso_component_icon(:check, class: "size-4") %>

data/config/locales/en.yml

@@ -0,0 +1,33 @@
+en:
+  kiso:
+    alert:
+      dismiss: "Dismiss"
+    breadcrumb:
+      label: "breadcrumb"
+      more: "More"
+    color_mode_button:
+      toggle: "Toggle color mode"
+    color_mode_select:
+      theme: "Theme"
+      system: "System"
+      light: "Light"
+      dark: "Dark"
+    combobox:
+      toggle: "Toggle"
+      options: "Options"
+    command:
+      search: "Search"
+      suggestions: "Suggestions"
+    dashboard_sidebar:
+      label: "Sidebar navigation"
+      toggle: "Toggle sidebar"
+      collapse: "Collapse sidebar"
+    dialog:
+      close: "Close"
+    pagination:
+      label: "pagination"
+      more_pages: "More pages"
+      next: "Next"
+      next_page: "Go to next page"
+      previous: "Previous"
+      previous_page: "Go to previous page"

data/lib/generators/kiso/component/USAGE

@@ -0,0 +1,35 @@
+Description:
+  Scaffolds a component with a ClassVariants theme module and ERB partial.
+  Components are rendered using the appui() helper.
+
+  Theme files are placed in app/themes/<active_theme>/ (default: app/themes/default/).
+  The active theme is set via Kiso.config.app_theme.
+
+Examples:
+  bin/rails generate kiso:component pricing_card
+
+    Creates:
+      app/themes/default/pricing_card.rb
+      app/views/components/_pricing_card.html.erb
+
+  bin/rails generate kiso:component pricing_card --sub-parts header footer
+
+    Creates:
+      app/themes/default/pricing_card.rb
+      app/themes/default/pricing_card_header.rb
+      app/themes/default/pricing_card_footer.rb
+      app/views/components/_pricing_card.html.erb
+      app/views/components/pricing_card/_header.html.erb
+      app/views/components/pricing_card/_footer.html.erb
+
+  bin/rails generate kiso:component pricing_card --theme modern
+
+    Creates theme files in app/themes/modern/ instead of app/themes/default/.
+
+Usage:
+  appui(:pricing_card) { "Content" }
+
+  appui(:pricing_card) do
+    appui(:pricing_card, :header) { "Title" }
+    appui(:pricing_card, :footer) { "Actions" }
+  end

data/lib/generators/kiso/component/component_generator.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module Kiso
+  module Generators
+    # Scaffolds a component with a ClassVariants theme module and ERB partial.
+    #
+    # Theme files are placed in +app/themes/<active_theme>/+ (default:
+    # +app/themes/default/+). The active theme is configured via
+    # +Kiso.config.app_theme+. Components are rendered using the +appui()+
+    # helper.
+    #
+    # @example Basic usage
+    #   bin/rails generate kiso:component pricing_card
+    #
+    # @example With sub-parts
+    #   bin/rails generate kiso:component pricing_card --sub-parts header footer
+    #
+    # @example With a custom theme
+    #   bin/rails generate kiso:component pricing_card --theme modern
+    class ComponentGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("templates", __dir__)
+
+      class_option :sub_parts,
+        type: :array,
+        default: [],
+        desc: "Sub-part names to generate (e.g. --sub-parts header footer)"
+
+      class_option :theme,
+        type: :string,
+        default: nil,
+        desc: "Theme directory name (defaults to Kiso.config.app_theme, usually :default)"
+
+      def create_theme_file
+        template "theme.rb.tt", File.join(theme_dir, component_path_dir, "#{file_name}.rb")
+      end
+
+      def create_partial_file
+        template "partial.html.erb.tt",
+          File.join("app/views/components", component_path_dir, "_#{file_name}.html.erb")
+      end
+
+      def create_sub_part_files
+        options[:sub_parts].each do |part|
+          @current_part = part
+          template "sub_part_theme.rb.tt",
+            File.join(theme_dir, component_path_dir, "#{file_name}_#{part}.rb")
+          template "sub_part_partial.html.erb.tt",
+            File.join("app/views/components", component_path_dir, file_name, "_#{part}.html.erb")
+        end
+      end
+
+      private
+
+      # @return [String] the current sub-part name being generated
+      attr_reader :current_part
+
+      # @return [String] the theme directory path (e.g. "app/themes/default")
+      def theme_dir
+        name = (options[:theme] || Kiso.config.app_theme).to_s
+        File.join("app/themes", name)
+      end
+
+      # @return [String] the component name in PascalCase (e.g. "PricingCard")
+      def class_name_without_namespace
+        file_name.camelize
+      end
+
+      # @return [String] the kebab-case data-slot value (e.g. "pricing-card")
+      def slot_name
+        file_name.dasherize
+      end
+
+      # @return [String] the kebab-case data-slot value for a sub-part (e.g. "pricing-card-header")
+      def sub_part_slot_name
+        "#{slot_name}-#{current_part.dasherize}"
+      end
+
+      # @return [String] the PascalCase theme constant name for a sub-part (e.g. "PricingCardHeader")
+      def sub_part_class_name
+        "#{class_name_without_namespace}#{current_part.camelize}"
+      end
+
+      # @return [Array<String>] namespace segments from the name argument
+      def component_class_path
+        regular_class_path
+      end
+
+      # @return [String] namespace directory path (empty string for simple names)
+      def component_path_dir
+        component_class_path.join("/")
+      end
+
+      # @return [String] full module nesting prefix (e.g. "Admin::" for admin/pricing_card)
+      def module_prefix
+        component_class_path.map(&:camelize).join("::")
+      end
+
+      # @return [Boolean] whether the component has a namespace prefix (e.g. admin/pricing_card)
+      def has_namespace?
+        component_class_path.any?
+      end
+    end
+  end
+end

data/lib/generators/kiso/component/templates/partial.html.erb.tt

@@ -0,0 +1,7 @@
+<%% # locals: (css_classes: "", **component_options) %>
+<%%= content_tag :div,
+    class: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= class_name_without_namespace %>.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "<%= slot_name %>"),
+    **component_options do %>
+  <%%= yield %>
+<%% end %>

data/lib/generators/kiso/component/templates/sub_part_partial.html.erb.tt

@@ -0,0 +1,7 @@
+<%% # locals: (css_classes: "", **component_options) %>
+<%%= content_tag :div,
+    class: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= sub_part_class_name %>.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "<%= sub_part_slot_name %>"),
+    **component_options do %>
+  <%%= yield %>
+<%% end %>

data/lib/generators/kiso/component/templates/sub_part_theme.rb.tt

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+<% if has_namespace? -%>
+<% component_class_path.each_with_index do |segment, i| -%>
+<%= "  " * i %>module AppThemes::<%= segment.camelize %>
+<% end -%>
+<%= "  " * component_class_path.size %><%= sub_part_class_name %> = ClassVariants.build(
+<%= "  " * component_class_path.size %>  base: "",
+<%= "  " * component_class_path.size %>  variants: {},
+<%= "  " * component_class_path.size %>  defaults: {}
+<%= "  " * component_class_path.size %>)
+<% component_class_path.each_with_index do |_, i| -%>
+<%= "  " * (component_class_path.size - 1 - i) %>end
+<% end -%>
+<% else -%>
+AppThemes::<%= sub_part_class_name %> = ClassVariants.build(
+  base: "",
+  variants: {},
+  defaults: {}
+)
+<% end -%>

data/lib/generators/kiso/component/templates/theme.rb.tt

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+<% if has_namespace? -%>
+<% component_class_path.each_with_index do |segment, i| -%>
+<%= "  " * i %>module AppThemes::<%= segment.camelize %>
+<% end -%>
+<%= "  " * component_class_path.size %><%= class_name_without_namespace %> = ClassVariants.build(
+<%= "  " * component_class_path.size %>  base: "",
+<%= "  " * component_class_path.size %>  variants: {},
+<%= "  " * component_class_path.size %>  defaults: {}
+<%= "  " * component_class_path.size %>)
+<% component_class_path.each_with_index do |_, i| -%>
+<%= "  " * (component_class_path.size - 1 - i) %>end
+<% end -%>
+<% else -%>
+AppThemes::<%= class_name_without_namespace %> = ClassVariants.build(
+  base: "",
+  variants: {},
+  defaults: {}
+)
+<% end -%>

data/lib/kiso/configuration.rb

@@ -23,9 +23,49 @@ module Kiso
     #   Applied once at boot by {ThemeOverrides.apply!}.
     attr_reader :theme
 
+    # @return [Symbol] the active app theme directory name.
+    #   Theme files are loaded from +app/themes/<name>/+. Defaults to
+    #   +:default+, meaning +app/themes/default/+.
+    #
+    # @example Switch to a custom theme
+    #   Kiso.configure do |config|
+    #     config.app_theme = :modern
+    #   end
+    attr_accessor :app_theme
+
     def initialize
       @icons = default_icons
       @theme = {}
+      @app_theme = :default
+    end
+
+    # Resolves the active app theme directory path relative to the given root.
+    #
+    # @param app_root [Pathname] the Rails application root
+    # @return [Pathname] the active theme directory (e.g. +app/themes/default+)
+    def app_theme_path(app_root)
+      app_root.join("app/themes", app_theme.to_s)
+    end
+
+    # Applies a pre-built style preset to all components.
+    # Presets populate +@theme+ before {ThemeOverrides.apply!} runs,
+    # so host-app overrides set after this call take priority.
+    #
+    # @param name [Symbol, String] the preset name (e.g. +:rounded+, +:sharp+)
+    # @raise [ArgumentError] if the preset does not exist
+    # @return [void]
+    #
+    # @example
+    #   Kiso.configure do |config|
+    #     config.apply_preset(:rounded)
+    #     # Per-component overrides still work on top of the preset:
+    #     config.theme[:button] = { base: "shadow-lg" }
+    #   end
+    def apply_preset(name)
+      preset = Kiso::Presets.load(name)
+      preset.each do |component, overrides|
+        @theme[component] = (@theme[component] || {}).merge(overrides)
+      end
     end
 
     private