okonomi_ui_kit 0.1.8 → 0.1.10

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

@@ -2,9 +2,22 @@ module OkonomiUiKit
   module Components
     class Page < OkonomiUiKit::Component
       def render(options = {}, &block)
+        options = options.with_indifferent_access
+
+        classes = tw_merge(
+          style(:root),
+          options.delete(:class)
+        )
+
         builder = PageBuilder.new(view)
 
-        view.render(template_path, builder: builder, options: options, &block)
+        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+      end
+
+      register_styles :default do
+        {
+          root: "flex flex-col gap-8 p-8"
+        }
       end
     end
 
@@ -18,24 +31,19 @@ module OkonomiUiKit
       end
 
       def page_header(**options, &block)
-        header_builder = PageHeaderBuilder.new(@template)
-        yield(header_builder) if block_given?
-        @content_parts << header_builder.render
+        @content_parts << @template.ui.page_header(options, &block)
         nil
       end
 
       def section(**options, &block)
-        section_builder = SectionBuilder.new(@template)
-        section_builder.title(options[:title]) if options[:title]
-        yield(section_builder) if block_given?
-        @content_parts << section_builder.render
+        @content_parts << @template.ui.page_section(options, &block)
         nil
       end
 
       def render_content
         @template.safe_join(@content_parts)
       end
-      
+
       def to_s
         render_content
       end
@@ -50,198 +58,5 @@ module OkonomiUiKit
         @template.capture(*args, &block)
       end
     end
-
-    class PageHeaderBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @breadcrumbs_content = nil
-        @row_content = nil
-      end
-
-      def breadcrumbs(&block)
-        @breadcrumbs_content = @template.ui.breadcrumbs(&block)
-      end
-
-      def row(&block)
-        row_builder = PageHeaderRowBuilder.new(@template)
-        yield(row_builder) if block_given?
-        @row_content = row_builder.render
-      end
-
-      def render
-        content = []
-        content << @breadcrumbs_content if @breadcrumbs_content
-        content << @row_content if @row_content
-
-        tag.div(class: "flex flex-col gap-2") do
-          @template.safe_join(content.compact)
-        end
-      end
-
-      private
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
-
-    class PageHeaderRowBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @title_content = nil
-        @actions_content = nil
-      end
-
-      def title(text, **options)
-        @title_content = tag.h1(text, class: "text-2xl font-bold leading-7 text-gray-900 truncate sm:text-3xl sm:tracking-tight")
-      end
-
-      def actions(&block)
-        @actions_content = tag.div(class: "mt-4 flex md:ml-4 md:mt-0 gap-2") do
-          capture(&block) if block_given?
-        end
-      end
-
-      def render
-        tag.div(class: "flex w-full justify-between items-center") do
-          content = []
-          content << @title_content if @title_content
-          content << @actions_content if @actions_content
-          @template.safe_join(content.compact)
-        end
-      end
-
-      private
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
-
-    class SectionBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @title_content = nil
-        @subtitle_content = nil
-        @actions_content = nil
-        @body_content = nil
-        @attributes = []
-      end
-
-      def title(text, **options)
-        @title_content = tag.h3(text, class: "text-base/7 font-semibold text-gray-900")
-      end
-
-      def subtitle(text, **options)
-        @subtitle_content = tag.p(text, class: "mt-1 max-w-2xl text-sm/6 text-gray-500")
-      end
-
-      def actions(&block)
-        @actions_content = tag.div(class: "mt-4 flex md:ml-4 md:mt-0") do
-          capture(&block) if block_given?
-        end
-      end
-
-      def body(&block)
-        if block_given?
-          # Capture the content first to see if attributes were used
-          content = capture { yield(self) }
-          
-          @body_content = if @attributes.any?
-            # If attributes were added, wrap them in dl
-            tag.div do
-              tag.dl(class: "divide-y divide-gray-100") do
-                @template.safe_join(@attributes)
-              end
-            end
-          else
-            # Otherwise, just return the captured content
-            tag.div do
-              content
-            end
-          end
-        end
-      end
-
-      def attribute(label, value = nil, **options, &block)
-        content = if block_given?
-          capture(&block)
-        elsif value.respond_to?(:call)
-          value.call
-        else
-          value
-        end
-
-        attribute_html = tag.div(class: "py-6 sm:grid sm:grid-cols-3 sm:gap-4") do
-          dt_content = tag.dt(label, class: "text-sm font-medium text-gray-900")
-          dd_content = tag.dd(content, class: "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0")
-          
-          dt_content + dd_content
-        end
-        
-        @attributes << attribute_html
-      end
-
-      def render
-        tag.div(class: "overflow-hidden bg-white") do
-          header_content = build_header
-          content_parts = []
-          content_parts << header_content if header_content.present?
-          content_parts << @body_content if @body_content
-          @template.safe_join(content_parts.compact)
-        end
-      end
-
-      private
-
-      def build_header
-        return nil unless @title_content || @subtitle_content || @actions_content
-        
-        tag.div(class: "py-6") do
-          if @actions_content
-            tag.div(class: "flex w-full justify-between items-start") do
-              title_section = tag.div do
-                content_parts = []
-                content_parts << @title_content if @title_content
-                content_parts << @subtitle_content if @subtitle_content
-                @template.safe_join(content_parts.compact)
-              end
-              
-              title_section + @actions_content
-            end
-          else
-            content_parts = []
-            content_parts << @title_content if @title_content
-            content_parts << @subtitle_content if @subtitle_content
-            @template.safe_join(content_parts.compact)
-          end
-        end
-      end
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
   end
-end
+end

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

@@ -0,0 +1,111 @@
+module OkonomiUiKit
+  module Components
+    class PageHeader < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+
+        classes = tw_merge(
+          style(:root),
+          options.delete(:class)
+        )
+
+        builder = PageHeaderBuilder.new(view, self)
+
+        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+      end
+
+      register_styles :default do
+        {
+          root: "flex flex-col gap-2",
+          row: "flex w-full justify-between items-center",
+          actions: "mt-4 flex md:ml-4 md:mt-0 gap-2"
+        }
+      end
+    end
+
+    class PageHeaderBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template, component)
+        @template = template
+        @component = component
+        @breadcrumbs_content = nil
+        @row_content = nil
+      end
+
+      def breadcrumbs(&block)
+        @breadcrumbs_content = @template.ui.breadcrumbs(&block)
+      end
+
+      def row(&block)
+        row_builder = PageHeaderRowBuilder.new(@template, @component)
+        yield(row_builder) if block_given?
+        @row_content = row_builder.render
+      end
+
+      def render
+        content = []
+        content << @breadcrumbs_content if @breadcrumbs_content
+        content << @row_content if @row_content
+
+        @template.safe_join(content.compact)
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+
+    class PageHeaderRowBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      attr_reader :template
+
+      delegate :ui, to: :template
+
+      def initialize(template, component)
+        @template = template
+        @component = component
+        @title_content = nil
+        @actions_content = nil
+      end
+
+      def title(text, **options)
+        @title_content = ui.typography(text, variant: "h1", **options)
+      end
+
+      def actions(&block)
+        @actions_content = tag.div(class: @component.style(:actions)) do
+          capture(&block) if block_given?
+        end
+      end
+
+      def render
+        tag.div(class: @component.style(:row)) do
+          content = []
+          content << @title_content if @title_content
+          content << @actions_content if @actions_content
+          @template.safe_join(content.compact)
+        end
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,145 @@
+module OkonomiUiKit
+  module Components
+    class PageSection < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+        title = options.delete(:title)
+
+        classes = tw_merge(
+          style(:root),
+          options.delete(:class)
+        )
+
+        builder = SectionBuilder.new(view, self)
+        builder.title(title) if title
+
+        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+      end
+
+      register_styles :default do
+        {
+          root: "overflow-hidden bg-white",
+          header: "py-6",
+          header_with_actions: "flex w-full justify-between items-start",
+          title: "text-base/7 font-semibold text-gray-900",
+          subtitle: "mt-1 max-w-2xl text-sm/6 text-gray-500",
+          actions: "mt-4 flex md:ml-4 md:mt-0",
+          attribute_list: "divide-y divide-gray-100",
+          attribute_row: "py-6 sm:grid sm:grid-cols-3 sm:gap-4",
+          attribute_label: "text-sm font-medium text-gray-900",
+          attribute_value: "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0"
+        }
+      end
+    end
+
+    class SectionBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template, component)
+        @template = template
+        @component = component
+        @title_content = nil
+        @subtitle_content = nil
+        @actions_content = nil
+        @body_content = nil
+        @attributes = []
+      end
+
+      def title(text, **options)
+        @title_content = tag.h3(text, class: @component.style(:title))
+      end
+
+      def subtitle(text, **options)
+        @subtitle_content = tag.p(text, class: @component.style(:subtitle))
+      end
+
+      def actions(&block)
+        @actions_content = tag.div(class: @component.style(:actions)) do
+          capture(&block) if block_given?
+        end
+      end
+
+      def body(&block)
+        if block_given?
+          # Capture the content first to see if attributes were used
+          content = capture { yield(self) }
+
+          @body_content = if @attributes.any?
+            # If attributes were added, wrap them in dl
+            tag.div do
+              tag.dl(class: @component.style(:attribute_list)) do
+                @template.safe_join(@attributes)
+              end
+            end
+          else
+            # Otherwise, just return the captured content
+            tag.div do
+              content
+            end
+          end
+        end
+      end
+
+      def attribute(label, value = nil, **options, &block)
+        content = if block_given?
+          capture(&block)
+        elsif value.respond_to?(:call)
+          value.call
+        else
+          value
+        end
+
+        attribute_html = tag.div(class: @component.style(:attribute_row)) do
+          dt_content = tag.dt(label, class: @component.style(:attribute_label))
+          dd_content = tag.dd(content, class: @component.style(:attribute_value))
+
+          dt_content + dd_content
+        end
+
+        @attributes << attribute_html
+      end
+
+      def render_header
+        return nil unless @title_content || @subtitle_content || @actions_content
+
+        tag.div(class: @component.style(:header)) do
+          if @actions_content
+            tag.div(class: @component.style(:header_with_actions)) do
+              title_section = tag.div do
+                content_parts = []
+                content_parts << @title_content if @title_content
+                content_parts << @subtitle_content if @subtitle_content
+                @template.safe_join(content_parts.compact)
+              end
+
+              title_section + @actions_content
+            end
+          else
+            content_parts = []
+            content_parts << @title_content if @title_content
+            content_parts << @subtitle_content if @subtitle_content
+            @template.safe_join(content_parts.compact)
+          end
+        end
+      end
+
+      def render_content
+        content_parts = []
+        content_parts << render_header
+        content_parts << @body_content if @body_content
+        @template.safe_join(content_parts.compact)
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+  end
+end

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

@@ -4,8 +4,8 @@ module OkonomiUiKit
       def render(options = {}, &block)
         options = options.with_indifferent_access
         variant = (options.delete(:variant) || :default).to_sym
-        
-        builder = TableBuilder.new(view, theme, self, variant)
+
+        builder = TableBuilder.new(view, self, variant)
         view.render(template_path, builder: builder, options: options, &block)
       end
 
@@ -48,9 +48,8 @@ module OkonomiUiKit
       include ActionView::Helpers::TagHelper
       include ActionView::Helpers::CaptureHelper
 
-      def initialize(template, theme, style_provider, variant = :default)
+      def initialize(template, style_provider, variant = :default)
         @template = template
-        @theme = theme
         @style_provider = style_provider
         @variant = variant
         @current_row_cells = []
@@ -157,7 +156,7 @@ module OkonomiUiKit
 
       def render_th(cell, is_first, is_last)
         align_class = style(:alignment, cell[:align]) || style(:alignment, :left)
-        
+
         position_class = if is_first
           style(:th, :first)
         elsif is_last
@@ -171,7 +170,7 @@ module OkonomiUiKit
           position_class,
           align_class,
           cell[:options][:class]
-        ].compact.join(' ')
+        ].compact.join(" ")
 
         options = cell[:options].except(:class)
         tag.th(cell[:content], scope: cell[:scope], class: classes, **options)
@@ -179,7 +178,7 @@ module OkonomiUiKit
 
       def render_td(cell, is_first, is_last)
         align_class = style(:alignment, cell[:align]) || style(:alignment, :left)
-        
+
         position_class = if is_first
           style(:td, :first)
         elsif is_last
@@ -193,7 +192,7 @@ module OkonomiUiKit
           position_class,
           align_class,
           cell[:options][:class]
-        ].compact.join(' ')
+        ].compact.join(" ")
 
         options = cell[:options].except(:class)
         tag.td(cell[:content], class: classes, **options)

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

@@ -2,14 +2,14 @@ module OkonomiUiKit
   module Components
     class Typography < OkonomiUiKit::Component
       TYPOGRAPHY_COMPONENTS = {
-        body1: 'p',
-        body2: 'p',
-        h1: 'h1',
-        h2: 'h2',
-        h3: 'h3',
-        h4: 'h4',
-        h5: 'h5',
-        h6: 'h6',
+        body1: "p",
+        body2: "p",
+        h1: "h1",
+        h2: "h2",
+        h3: "h3",
+        h4: "h4",
+        h5: "h5",
+        h6: "h6"
       }.freeze
 
       def render(text = nil, options = {}, &block)
@@ -17,15 +17,15 @@ module OkonomiUiKit
         options ||= {}
         options = options.with_indifferent_access
 
-        variant = (options.delete(:variant) || 'body1').to_sym
-        component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
-        color = (options.delete(:color) || 'default').to_sym
+        variant = (options.delete(:variant) || "body1").to_sym
+        component = (TYPOGRAPHY_COMPONENTS[variant] || "span").to_s
+        color = (options.delete(:color) || "default").to_sym
 
         classes = [
-          style(:variants, variant) || '',
-          style(:colors, color) || '',
-          options.delete(:class) || ''
-        ].reject(&:blank?).join(' ')
+          style(:variants, variant) || "",
+          style(:colors, color) || "",
+          options.delete(:class) || ""
+        ].reject(&:blank?).join(" ")
 
         view.render(
           template_path,
@@ -65,4 +65,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components.rb

@@ -0,0 +1,4 @@
+module OkonomiUiKit
+  module Components
+  end
+end

data/app/helpers/okonomi_ui_kit/configs.rb

@@ -0,0 +1,4 @@
+module OkonomiUiKit
+  module Configs
+  end
+end