okonomi_ui_kit 0.1.8 → 0.1.10

data/app/helpers/okonomi_ui_kit/components/forms/collection_select.rb

@@ -0,0 +1,57 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class CollectionSelect < OkonomiUiKit::FormComponent
+        def render(form, method, collection, value_method, text_method, options = {}, html_options = {})
+          html_options = html_options.with_indifferent_access
+          css = build_select_classes(form, method, html_options)
+
+          select_html = form.collection_select(method, collection, value_method, text_method, options, html_options.merge(class: css))
+          icon_html = view.ui.icon(
+            style(:icon, :file),
+            class: style(:icon, :class)
+          )
+
+          view.content_tag(:div, class: style(:wrapper)) do
+            view.concat(select_html)
+            view.concat(icon_html)
+          end
+        end
+
+        register_styles :default do
+          {
+            wrapper: "relative",
+            root: "w-full appearance-none border-0 pl-3 pr-10 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",
+            icon: {
+              file: "heroicons/mini/chevron-down",
+              class: "absolute right-2 top-1/2 -translate-y-1/2 size-5 text-gray-400 pointer-events-none"
+            }
+          }
+        end
+
+        private
+
+        def build_select_classes(form, method, html_options)
+          css = [
+            style(:root),
+            when_errors(form, method, style(:error), style(:valid)),
+            html_options[:class]
+          ].compact.join(" ").split(" ").uniq
+
+          TWMerge.merge(css)
+        end
+
+        def when_errors(form, method, value, default_value = nil)
+          key = method.to_s.gsub("_id", "").to_sym
+          if form.object.errors.include?(key) || form.object.errors.include?(method)
+            value
+          else
+            default_value
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/date_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class DateField < OkonomiUiKit::Components::Forms::InputBase
+        type :date
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class DatetimeLocalField < OkonomiUiKit::Components::Forms::InputBase
+        type :datetime_local
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/email_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class EmailField < OkonomiUiKit::Components::Forms::InputBase
+        type :email
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/field.rb

@@ -0,0 +1,24 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class Field < OkonomiUiKit::FormComponent
+        def render(form, field_id = nil, options = {}, &block)
+          view.render(template_path, component: self, form: form, field_id: field_id, options: options, &block)
+        end
+
+        register_styles :default do
+          {
+            wrapper: "w-full flex flex-col gap-2",
+            header: "flex justify-between items-center",
+            hint: {
+              trigger: "text-primary-600 text-sm hover:cursor-help",
+              content: "text-xs absolute border rounded-md bg-gray-100 border-gray-600 text-gray-600 p-1 z-10"
+            },
+            content: "block",
+            error: "mt-1 text-danger-600 text-sm"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/field_set.rb

@@ -0,0 +1,17 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class FieldSet < OkonomiUiKit::FormComponent
+        def render(form, options = {}, &block)
+          view.render(template_path, component: self, options: options, form: form, &block)
+        end
+
+        register_styles :default do
+          {
+            root: "w-full flex flex-col gap-4 col-span-1 sm:col-span-3 md:col-span-5"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/input_base.rb

@@ -0,0 +1,57 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class InputBase < OkonomiUiKit::FormComponent
+        def render_arguments(object, method, options = {})
+          css = input_field_classes(object, method, self.class.type_value, options)
+          [ method, { autocomplete: "off" }.merge(options).merge(class: css) ]
+        end
+
+        register_styles :default do
+          {
+            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"
+          }
+        end
+
+        def self.type(type)
+          @type = type
+        end
+
+        def self.type_value
+          @type || :text
+        end
+
+        def input_field_classes(object, method, type, options, include_disabled: true)
+          css_classes = OkonomiUiKit::TWMerge.merge_all(
+            style(:root),
+            when_errors(
+              object,
+              method,
+              style(:error),
+              style(:valid)
+            ),
+            options[:class]
+          )
+
+          if include_disabled
+            css_classes = OkonomiUiKit::TWMerge.merge_all(css_classes, style(:disabled))
+          end
+
+          css_classes
+        end
+
+        def when_errors(object, 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
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/label.rb

@@ -0,0 +1,27 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class Label < OkonomiUiKit::FormComponent
+        def render(form, method, text = nil, options = {}, &block)
+          options = options.with_indifferent_access
+          base_classes = style(:root)
+          # Call the parent class label method directly to avoid infinite loop
+          ActionView::Helpers::FormBuilder.instance_method(:label).bind(form).call(method, text, merge_class(options, base_classes), &block)
+        end
+
+        register_styles :default do
+          {
+            root: "block text-sm/6 font-medium text-gray-900"
+          }
+        end
+
+        private
+
+        def merge_class(options, new_class)
+          options[:class] = TWMerge.merge(options[:class] || "", new_class)
+          options
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/multi_select.rb

@@ -0,0 +1,18 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class MultiSelect < OkonomiUiKit::FormComponent
+        def render(form, method, options = {})
+          view.render(template_path, component: self, form: form, method: method, options: options)
+        end
+
+        register_styles :default do
+          {
+            wrapper: "grid grid-cols-2 gap-2",
+            item: "flex items-center"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/number_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class NumberField < OkonomiUiKit::Components::Forms::InputBase
+        type :number
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/password_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class PasswordField < OkonomiUiKit::Components::Forms::InputBase
+        type :password
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/search_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class SearchField < OkonomiUiKit::Components::Forms::InputBase
+        type :search
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/select.rb

@@ -0,0 +1,57 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class Select < OkonomiUiKit::FormComponent
+        def render(form, method, choices = nil, options = {}, html_options = {}, &block)
+          html_options = html_options.with_indifferent_access
+          css = build_select_classes(form, method, html_options)
+
+          select_html = ActionView::Helpers::FormBuilder.instance_method(:select).bind(form).call(method, choices, options, html_options.merge(class: css), &block)
+          icon_html = view.ui.icon(
+            style(:icon, :file),
+            class: style(:icon, :class)
+          )
+
+          view.content_tag(:div, class: style(:wrapper)) do
+            view.concat(select_html)
+            view.concat(icon_html)
+          end
+        end
+
+        register_styles :default do
+          {
+            wrapper: "relative",
+            root: "w-full appearance-none border-0 pl-3 pr-10 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",
+            icon: {
+              file: "heroicons/mini/chevron-down",
+              class: "absolute right-2 top-1/2 -translate-y-1/2 size-5 text-gray-400 pointer-events-none"
+            }
+          }
+        end
+
+        private
+
+        def build_select_classes(form, method, html_options)
+          css = [
+            style(:root),
+            when_errors(form, method, style(:error), style(:valid)),
+            html_options[:class]
+          ].compact.join(" ").split(" ").uniq
+
+          css.join(" ")
+        end
+
+        def when_errors(form, method, value, default_value = nil)
+          key = method.to_s.gsub("_id", "").to_sym
+          if form.object.errors.include?(key) || form.object.errors.include?(method)
+            value
+          else
+            default_value
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/show_if.rb

@@ -0,0 +1,28 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class ShowIf < OkonomiUiKit::FormComponent
+        def render(form, options = {}, &block)
+          field = options[:field]
+          equals = options[:equals]
+          field_id = "#{form.object_name}_#{field}"
+          view.tag.div(
+            class: style(:root),
+            data: {
+              controller: "form-field-visibility",
+              "form-field-visibility-field-id-value": field_id,
+              "form-field-visibility-equals-value": equals
+            },
+            &block
+          )
+        end
+
+        register_styles :default do
+          {
+            root: "hidden"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/telephone_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class TelephoneField < OkonomiUiKit::Components::Forms::InputBase
+        type :telephone_field
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/text_area.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class TextArea < OkonomiUiKit::Components::Forms::InputBase
+        type :textarea
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/text_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class TextField < OkonomiUiKit::Components::Forms::InputBase
+        type :text
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/time_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class TimeField < OkonomiUiKit::Components::Forms::InputBase
+        type :time
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/upload_field.rb

@@ -0,0 +1,25 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class UploadField < OkonomiUiKit::FormComponent
+        def render(form, method, options = {})
+          view.render(template_path, component: self, form: form, method: method, options: options)
+        end
+
+        register_styles :default do
+          {
+            dropzone: "border-2 border-dashed border-gray-300 rounded-md p-6 text-center cursor-pointer hover:bg-gray-50 relative",
+            label: "block cursor-pointer",
+            content: "flex flex-col items-center text-gray-600 space-y-2",
+            preview: "w-full flex justify-center items-center",
+            preview_image: "max-h-32",
+            icon: "size-12 text-gray-400",
+            filename: "text-sm text-gray-500",
+            file_input: "hidden",
+            clear_button: "absolute top-2 right-2 bg-red-100 text-red-700 px-2 py-1 text-xs rounded hover:bg-red-200"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/url_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class UrlField < OkonomiUiKit::Components::Forms::InputBase
+        type :url
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms.rb

@@ -0,0 +1,6 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/icon.rb

@@ -3,18 +3,18 @@ module OkonomiUiKit
     class Icon < OkonomiUiKit::Component
       def render(name, options = {})
         options = options.with_indifferent_access
-        
+
         # Extract specific icon options
         variant = options.delete(:variant) || :outlined
         width = options.delete(:width)
         height = options.delete(:height)
-        
+
         # Build classes array
         classes = [
           style(:base),
           options.delete(:class)
-        ].compact.join(' ')
-        
+        ].compact.join(" ")
+
         view.render(
           template_path,
           name: name,
@@ -25,7 +25,7 @@ module OkonomiUiKit
           options: options
         )
       end
-      
+
       register_styles :default do
         {
           base: "inline-block"
@@ -33,4 +33,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/link_to.rb

@@ -3,21 +3,22 @@ module OkonomiUiKit
     class LinkTo < OkonomiUiKit::Components::ButtonBase
       def render(name = nil, options = nil, html_options = nil, &block)
         html_options, options, name = options, name, block if block_given?
-        
+
         html_options ||= {}
         html_options = html_options.with_indifferent_access
+
+        variant = (html_options.delete(:variant) || "text").to_sym
+        color = (html_options.delete(:color) || "default").to_sym
         
-        variant = (html_options.delete(:variant) || 'text').to_sym
-        color = (html_options.delete(:color) || 'default').to_sym
-        
+        # Extract icon configuration
+        icon_config, html_options = extract_icon_config(html_options)
+
         html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
-        
-        if block_given?
-          view.link_to(options, html_options, &block)
-        else
-          view.link_to(name, options, html_options)
+
+        view.link_to(options, html_options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/navigation.rb

@@ -0,0 +1,98 @@
+module OkonomiUiKit
+  module Components
+    class Navigation < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+        builder = NavigationBuilder.new(view, self)
+
+        view.render(template_path, builder: builder, options: options, &block)
+      end
+
+      register_styles :default do
+        {
+          menu: {
+            base: "flex flex-1 flex-col gap-y-7"
+          },
+          group: {
+            title: "text-xs/6 font-semibold text-gray-400",
+            list: "-mx-2 mt-2 space-y-1"
+          },
+          link: {
+            base: "group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold hover:bg-gray-50 hover:text-primary-600 text-gray-700",
+            active: "group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold hover:bg-gray-50 hover:text-primary-600 bg-gray-50 text-primary-600",
+            icon: "size-6 text-gray-400 group-hover:text-primary-600",
+            initials: {
+              base: "flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-primary-600 group-hover:text-primary-600"
+            }
+          },
+          profile_section: {
+            base: "-mx-6 mt-auto"
+          }
+        }
+      end
+    end
+
+    class NavigationBuilder
+      attr_reader :view, :navigation_component, :groups
+
+      def initialize(view, navigation_component)
+        @view = view
+        @navigation_component = navigation_component
+        @groups = []
+      end
+
+      def group(title, &block)
+        group_builder = NavigationGroupBuilder.new(view, navigation_component)
+        yield(group_builder)
+
+        @groups << view.tag.li do
+          view.tag.div(title, class: style(:group, :title)) +
+          view.tag.ul(group_builder.render_links, role: "list", class: style(:group, :list))
+        end
+      end
+
+      def profile_section(&block)
+        content = view.capture(&block)
+        @groups << view.tag.li(content, class: style(:profile_section, :base))
+      end
+
+      def style(*args)
+        navigation_component.style(*args)
+      end
+
+      def render_groups
+        view.safe_join(@groups)
+      end
+    end
+
+    class NavigationGroupBuilder
+      attr_reader :view, :navigation_component, :links
+
+      def initialize(view, navigation_component)
+        @view = view
+        @navigation_component = navigation_component
+        @links = []
+      end
+
+      def nav_link(title, path, icon: nil, initials: nil, exact: false)
+        @links << view.tag.li do
+          view.render "okonomi/components/navigation/link",
+                      path: path,
+                      title: title,
+                      icon: icon,
+                      initials: initials,
+                      exact: exact,
+                      style_helper: self
+        end
+      end
+
+      def style(*args)
+        navigation_component.style(*args)
+      end
+
+      def render_links
+        view.safe_join(@links)
+      end
+    end
+  end
+end