okonomi_ui_kit 0.1.2 → 0.1.4

data/app/assets/stylesheets/okonomi_ui_kit/application.tailwind.css

@@ -1,3 +1,75 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../../../../config/tailwind.config.js";
+
+@theme {
+  --color-default-50:  var(--color-gray-50);
+  --color-default-100: var(--color-gray-100);
+  --color-default-200: var(--color-gray-200);
+  --color-default-300: var(--color-gray-300);
+  --color-default-400: var(--color-gray-400);
+  --color-default-500: var(--color-gray-500);
+  --color-default-600: var(--color-gray-600);
+  --color-default-700: var(--color-gray-700);
+  --color-default-800: var(--color-gray-800);
+  --color-default-900: var(--color-gray-900);
+  --color-primary-50:  var(--color-indigo-50);
+  --color-primary-100: var(--color-indigo-100);
+  --color-primary-200: var(--color-indigo-200);
+  --color-primary-300: var(--color-indigo-300);
+  --color-primary-400: var(--color-indigo-400);
+  --color-primary-500: var(--color-indigo-500);
+  --color-primary-600: var(--color-indigo-600);
+  --color-primary-700: var(--color-indigo-700);
+  --color-primary-800: var(--color-indigo-800);
+  --color-primary-900: var(--color-indigo-900);
+  --color-secondary-50:  var(--color-purple-50);
+  --color-secondary-100: var(--color-purple-100);
+  --color-secondary-200: var(--color-purple-200);
+  --color-secondary-300: var(--color-purple-300);
+  --color-secondary-400: var(--color-purple-400);
+  --color-secondary-500: var(--color-purple-500);
+  --color-secondary-600: var(--color-purple-600);
+  --color-secondary-700: var(--color-purple-700);
+  --color-secondary-800: var(--color-purple-800);
+  --color-secondary-900: var(--color-purple-900);
+  --color-success-50:  var(--color-green-50);
+  --color-success-100: var(--color-green-100);
+  --color-success-200: var(--color-green-200);
+  --color-success-300: var(--color-green-300);
+  --color-success-400: var(--color-green-400);
+  --color-success-500: var(--color-green-500);
+  --color-success-600: var(--color-green-600);
+  --color-success-700: var(--color-green-700);
+  --color-success-800: var(--color-green-800);
+  --color-success-900: var(--color-green-900);
+  --color-danger-50:  var(--color-red-50);
+  --color-danger-100: var(--color-red-100);
+  --color-danger-200: var(--color-red-200);
+  --color-danger-300: var(--color-red-300);
+  --color-danger-400: var(--color-red-400);
+  --color-danger-500: var(--color-red-500);
+  --color-danger-600: var(--color-red-600);
+  --color-danger-700: var(--color-red-700);
+  --color-danger-800: var(--color-red-800);
+  --color-danger-900: var(--color-red-900);
+  --color-warning-50:  var(--color-amber-50);
+  --color-warning-100: var(--color-amber-100);
+  --color-warning-200: var(--color-amber-200);
+  --color-warning-300: var(--color-amber-300);
+  --color-warning-400: var(--color-amber-400);
+  --color-warning-500: var(--color-amber-500);
+  --color-warning-600: var(--color-amber-600);
+  --color-warning-700: var(--color-amber-700);
+  --color-warning-800: var(--color-amber-800);
+  --color-warning-900: var(--color-amber-900);
+  --color-info-50:  var(--color-sky-50);
+  --color-info-100: var(--color-sky-100);
+  --color-info-200: var(--color-sky-200);
+  --color-info-300: var(--color-sky-300);
+  --color-info-400: var(--color-sky-400);
+  --color-info-500: var(--color-sky-500);
+  --color-info-600: var(--color-sky-600);
+  --color-info-700: var(--color-sky-700);
+  --color-info-800: var(--color-sky-800);
+  --color-info-900: var(--color-sky-900);
+}

data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb

@@ -3,7 +3,7 @@ module OkonomiUiKit
     def attribute_section(title:, description: nil, **options, &block)
       builder = AttributeSectionBuilder.new(self)
 
-      render 'okonomi_ui_kit/attribute_sections/section',
+      render 'okonomi/attribute_sections/section',
              builder: builder,
              title: title,
              description: description,

data/app/helpers/okonomi_ui_kit/form_builder.rb

@@ -1,189 +1,198 @@
 module OkonomiUiKit
   class FormBuilder < ActionView::Helpers::FormBuilder
-  delegate :tag, :content_tag, :safe_join, to: :@template
+    delegate :tag, :content_tag, :safe_join, to: :@template
 
-  def field_set(options = {}, &block)
-    @template.render('okonomi_ui_kit/forms/tailwind/field_set', options:, form: self, &block)
-  end
-
-  def field(field_id = nil, options = {}, &block)
-    @template.render('okonomi_ui_kit/forms/tailwind/field', field_id:, options:, form: self, &block)
-  end
-
-  def upload_field(method, options = {})
-    @template.render('okonomi_ui_kit/forms/tailwind/upload_field', method:, options:, form: self)
-  end
-
-  def text_field(method, options = {})
-    css = input_field_classes(method, options, focus_ring: 'focus-within:ring-0.5')
-    super(method, { autocomplete: "off" }.merge(options).merge(class: css))
-  end
+    def ui
+      @template.ui
+    end
 
-  def email_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def field_set(options = {}, &block)
+      @template.render('okonomi/forms/tailwind/field_set', options:, form: self, &block)
+    end
 
-  def url_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def field(field_id = nil, options = {}, &block)
+      @template.render('okonomi/forms/tailwind/field', field_id:, options:, form: self, &block)
+    end
 
-  def password_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def upload_field(method, options = {})
+      @template.render('okonomi/forms/tailwind/upload_field', method:, options:, form: self)
+    end
 
-  def number_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def text_field(method, options = {})
+      css = input_field_classes(method, :text, options)
+      super(method, { autocomplete: "off" }.merge(options).merge(class: css))
+    end
 
-  def telephone_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def email_field(method, options = {})
+      css = input_field_classes(method, :email, options)
+      super(method, options.merge(class: css))
+    end
 
-  def search_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def url_field(method, options = {})
+      css = input_field_classes(method, :url, options)
+      super(method, options.merge(class: css))
+    end
 
-  def date_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def password_field(method, options = {})
+      css = input_field_classes(method, :password, options)
+      super(method, options.merge(class: css))
+    end
 
-  def datetime_local_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def number_field(method, options = {})
+      css = input_field_classes(method, :number, options)
+      super(method, options.merge(class: css))
+    end
 
-  def time_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def telephone_field(method, options = {})
+      css = input_field_classes(method, :telephone_field, options)
+      super(method, options.merge(class: css))
+    end
 
-  def text_area(method, options = {})
-    css = input_field_classes(method, options, include_disabled: false)
-    super(method, options.merge(class: css))
-  end
+    def search_field(method, options = {})
+      css = input_field_classes(method, :search, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select(method, choices = nil, options = {}, html_options = {}, &block)
-    css = [
-      select_class_base,
-      when_errors(method,
-                  'bg-red-100 text-red-600 ring-1 ring-inset ring-red-300 focus-within:ring-2 focus-within:ring-red-400',
-                  select_class_default_state),
-      html_options[:class]
-    ].compact.join(' ').split(' ').uniq
-    super(method, choices, options, html_options.merge(class: css), &block)
-  end
+    def date_field(method, options = {})
+      css = input_field_classes(method, :date, options)
+      super(method, options.merge(class: css))
+    end
 
-  def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
-    css = [
-      select_class_base,
-      when_errors(method,
-                  'bg-red-100 text-red-600 ring-1 ring-inset ring-red-300 focus-within:ring-2 focus-within:ring-red-400',
-                  select_class_default_state),
-      html_options[:class]
-    ].compact.join(' ').split(' ').uniq
-    super(method, collection, value_method, text_method, options, html_options.merge(class: css))
-  end
+    def datetime_local_field(method, options = {})
+      css = input_field_classes(method, :datetime_local, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_default
-    [select_class_base, select_class_default_state].join(' ')
-  end
+    def time_field(method, options = {})
+      css = input_field_classes(method, :time, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_base
-    "col-start-1 row-start-1 w-full rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6"
-  end
+    def text_area(method, options = {})
+      css = input_field_classes(method, :textarea, options, include_disabled: false)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_default_state
-    'ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-gray-400'
-  end
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      css = [
+        ui.get_theme.dig(:components, :select, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :select, :error),
+          ui.get_theme.dig(:components, :select, :valid)
+        ),
+        html_options[:class]
+      ].compact.join(' ').split(' ').uniq
+
+      select_html = super(method, choices, options, html_options.merge(class: css), &block)
+      icon_html = @template.svg_icon(
+        ui.get_theme.dig(:components, :select, :icon, :file),
+        class: ui.get_theme.dig(:components, :select, :icon, :class)
+      )
+
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
+        @template.concat(select_html)
+        @template.concat(icon_html)
+      end
+    end
 
-  def label(method, text = nil, options = {}, &block)
-    base_classes = "block text-sm/6 font-medium text-gray-900"
-    super(method, text, merge_class(options, base_classes), &block)
-  end
+    def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+      css = [
+        ui.get_theme.dig(:components, :select, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :select, :error),
+          ui.get_theme.dig(:components, :select, :valid)
+        ),
+        html_options[:class]
+      ].compact.join(' ').split(' ').uniq
+
+      select_html = super(method, collection, value_method, text_method, options, html_options.merge(class: css))
+      icon_html = @template.svg_icon(
+        ui.get_theme.dig(:components, :select, :icon, :file),
+        class: ui.get_theme.dig(:components, :select, :icon, :class)
+      )
+
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
+        @template.concat(select_html)
+        @template.concat(icon_html)
+      end
+    end
 
-  def submit(value = nil, options = {})
-    base_classes = "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-    super(value, merge_class(options, base_classes))
-  end
+    def label(method, text = nil, options = {}, &block)
+      base_classes = ui.get_theme.dig(:components, :label, :root)
+      super(method, text, merge_class(options, base_classes), &block)
+    end
 
-  def label_class(label_css = nil)
-    ["block text-base font-medium leading-6 text-gray-900 whitespace-nowrap", label_css].compact_blank.join(' ')
-  end
+    def submit(value = nil, options = {})
+      variant = options.delete(:variant) || 'contained'
+      color = options.delete(:color) || 'primary'
 
-  def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
-    @template.content_tag(:div, class: 'flex gap-2 items-center') do
-      @template.concat check_box(
-                         method,
-                         {
-                           class: 'cursor-pointer h-4 w-4 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600'
-                         }.merge(options || {}),
-                         checked_value,
-                         unchecked_value
-                       )
-      @template.concat @template.render('okonomi_ui_kit/forms/tailwind/checkbox_label', method:, options:, form: self)
+      base_classes = ui.button_class(variant:, color:)
+      super(value, merge_class(options, base_classes))
     end
-  end
 
-  def multi_select(method, **options)
-    @template.render(
-      partial: 'okonomi_ui_kit/forms/tailwind/multi_select',
-      locals: {
-        form: self,
-        method: method,
-        options: options
-      }
-    )
-  end
+    def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :checkbox, :wrapper)) do
+        @template.concat check_box(
+                           method,
+                           {
+                             class: ui.get_theme.dig(:components, :checkbox, :input, :root)
+                           }.merge(options || {}),
+                           checked_value,
+                           unchecked_value
+                         )
+        @template.concat @template.render('okonomi/forms/tailwind/checkbox_label', method:, options:, form: self)
+      end
+    end
 
-  def show_if(field:, equals:, &block)
-    field_id = "#{object_name}_#{field}"
-    @template.tag.div(
-      class: "hidden",
-      data: {
-        controller: "form-field-visibility",
-        "form-field-visibility-field-id-value": field_id,
-        "form-field-visibility-equals-value": equals
-      },
-      &block
-    )
-  end
+    def show_if(field:, equals:, &block)
+      field_id = "#{object_name}_#{field}"
+      @template.tag.div(
+        class: "hidden",
+        data: {
+          controller: "form-field-visibility",
+          "form-field-visibility-field-id-value": field_id,
+          "form-field-visibility-equals-value": equals
+        },
+        &block
+      )
+    end
 
-  private
-
-  def input_field_classes(method, options, focus_ring: 'focus-within:ring-1', include_disabled: true)
-    css_classes = [
-      'w-full border-0 text-gray-700 px-3 py-2 rounded-md',
-      "ring-1 ring-inset ring-gray-300 #{focus_ring} focus-within:ring-gray-400",
-      when_errors(method, 'bg-red-100 ring-2 ring-red-400'),
-      options[:class]
-    ]
-    
-    if include_disabled
-      css_classes << 'disabled:bg-gray-50 disabled:cursor-not-allowed'
-    end
-    
-    css_classes.compact.join(' ').split(' ').uniq
-  end
+    private
+
+    def input_field_classes(method, type, options, include_disabled: true)
+      css_classes = [
+        ui.get_theme.dig(:components, :input, :types, type, :root) || ui.get_theme.dig(:components, :input, :types, :text, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :input, :types, type, :error) || ui.get_theme.dig(:components, :input, :types, :text, :error),
+          ui.get_theme.dig(:components, :input, :types, type, :valid) || ui.get_theme.dig(:components, :input, :types, :text, :valid)
+        ),
+        options[:class]
+      ]
+
+      if include_disabled
+        css_classes << (
+          ui.get_theme.dig(:components, :input, :types, type, :disabled) || ui.get_theme.dig(:components, :input, :types, :text, :disabled)
+        )
+      end
+
+      css_classes.compact.join(' ').split(' ').uniq
+    end
 
-  def when_errors(method, value, default_value = nil)
-    key = method.to_s.gsub('_id', '').to_sym
-    if object.errors.include?(key) || object.errors.include?(method)
-      value
-    else
-      default_value
+    def when_errors(method, value, default_value = nil)
+      key = method.to_s.gsub('_id', '').to_sym
+      if object.errors.include?(key) || object.errors.include?(method)
+        value
+      else
+        default_value
+      end
     end
-  end
 
-  def merge_class(options, new_class)
-    options[:class] = [options[:class], new_class].compact.join(" ")
-    options
-  end
+    def merge_class(options, new_class)
+      options[:class] = [options[:class], new_class].compact.join(" ")
+      options
+    end
   end
 end

data/app/helpers/okonomi_ui_kit/navigation_helper.rb

@@ -2,7 +2,7 @@ module OkonomiUiKit
   module NavigationHelper
   def navigation_menu(**options, &block)
     builder = NavigationBuilder.new(self)
-    render 'okonomi_ui_kit/navigation/menu', builder: builder, options: options, &block
+    render 'okonomi/navigation/menu', builder: builder, options: options, &block
   end
 
   class NavigationBuilder
@@ -49,7 +49,7 @@ module OkonomiUiKit
 
     def nav_link(title, path, icon: nil, initials: nil, exact: false)
       tag.li do
-        @template.render "okonomi_ui_kit/navigation/link",
+        @template.render "okonomi/navigation/link",
                         path: path, 
                         title: title, 
                         icon: icon,

data/app/helpers/okonomi_ui_kit/page_builder_helper.rb

@@ -3,7 +3,7 @@ module OkonomiUiKit
   def page(**options, &block)
     builder = PageBuilder.new(self)
     
-    render 'okonomi_ui_kit/page_builder/page', builder: builder, options: options, &block
+    render 'okonomi/page_builder/page', builder: builder, options: options, &block
   end
 
   class PageBuilder

data/app/helpers/okonomi_ui_kit/table_helper.rb

@@ -3,7 +3,7 @@ module OkonomiUiKit
   def table(**options, &block)
     builder = TableBuilder.new(self)
 
-    render 'okonomi_ui_kit/tables/table', builder: builder, options: options, &block
+    render 'okonomi/tables/table', builder: builder, options: options, &block
   end
 
   class TableBuilder

data/app/helpers/okonomi_ui_kit/theme.rb

@@ -0,0 +1,107 @@
+module OkonomiUiKit
+  module Theme
+    LIGHT_THEME = {
+      components: {
+        typography: {
+          variants: {
+            body1: "text-base font-normal",
+            body2: "text-sm font-normal",
+            h1: "text-3xl font-bold",
+            h2: "text-2xl font-bold",
+            h3: "text-xl font-semibold",
+            h4: "text-lg font-semibold",
+            h5: "text-base font-semibold",
+            h6: "text-sm font-semibold"
+          },
+          colors: {
+            default: "text-default-700",
+            dark: "text-default-900",
+            muted: "text-default-500",
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            success: "text-success-600",
+            danger: "text-danger-600",
+            warning: "text-warning-600",
+            info: "text-info-600"
+          }
+        },
+        link: {
+          root: "hover:cursor-pointer",
+          outlined: {
+            root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            colors: {
+              default: "bg-white text-default-700 border-default-700 hover:bg-default-50",
+              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50",
+              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50",
+              success: "bg-white text-success-600 border-success-600 hover:bg-success-50",
+              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50",
+              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50",
+              info: "bg-white text-info-600 border-info-600 hover:bg-info-50"
+            }
+          },
+          contained: {
+            root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            colors: {
+              default: "border-default-700 bg-default-600 text-white hover:bg-default-700",
+              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700",
+              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700",
+              success: "border-success-700 bg-success-600 text-white hover:bg-success-700",
+              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700",
+              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700",
+              info: "border-info-700 bg-info-600 text-white hover:bg-info-700"
+            }
+          },
+          text: {
+            root: "text-base",
+            colors: {
+              default: "text-default-700 hover:underline",
+              primary: "text-primary-600 hover:underline",
+              secondary: "text-secondary-600 hover:underline",
+              success: "text-success-600 hover:underline",
+              danger: "text-danger-600 hover:underline",
+              warning: "text-warning-600 hover:underline",
+              info: "text-info-600 hover:underline"
+            }
+          }
+        },
+        input: {
+          types: {
+            text: {
+              root: "w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none focus-within:ring-1",
+              error: "bg-danger-100 text-danger-400 ring-danger-400 focus:ring-danger-600",
+              valid: "text-default-700 ring-gray-300 focus-within:ring-gray-400",
+              disabled: "disabled:bg-gray-50 disabled:cursor-not-allowed"
+            }
+          }
+        },
+        select: {
+          root: "col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-8 pl-3 text-base outline-1 focus:outline-none sm:text-sm/6",
+          error: "bg-danger-100 text-danger-400 ring-1 ring-danger-400",
+          valid: "bg-white outline-default-300 text-default-700",
+          wrapper: "grid grid-cols-1",
+          icon: {
+            file: 'heroicons/solid/chevron-down',
+            class: "pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+          }
+        },
+        label: {
+          root: "block text-sm/6 font-medium text-default-700"
+        },
+        checkbox: {
+          wrapper: "flex gap-4 items-center",
+          input: {
+            root: "cursor-pointer size-5 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600"
+          },
+          label: {
+            root: "cursor-pointer font-medium text-gray-700"
+          },
+          hint: {
+            root: "cursor-pointer text-sm text-gray-400"
+          }
+        }
+      }
+    }
+
+    DEFAULT_THEME = LIGHT_THEME
+  end
+end

data/app/helpers/okonomi_ui_kit/theme_helper.rb

@@ -0,0 +1,17 @@
+module OkonomiUiKit
+  module ThemeHelper
+    def theme(t = {}, &block)
+      old_theme = theme
+
+      @_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
+
+      yield(@_okonomi_ui_kit_theme)
+
+      @_okonomi_ui_kit_theme = old_theme
+    end
+
+    def get_theme
+      @_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
+    end
+  end
+end