okonomi_ui_kit 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c9f6e01883b276ac9f9698f3d62b837b2b015e43c58928c2dce2a8f7d989ec9
-  data.tar.gz: 70f433e695cec861ff14035220709e8d56115b4747d18e4397b342d8f5693e0d
+  metadata.gz: c94c4c54d4385932abd25596610ea5e50f6d49477577a95731a0e0a1e22fca31
+  data.tar.gz: bb5f224ebe4b40a221cc382dea0256d75589557c553a3abf51f647cf3018044f
 SHA512:
-  metadata.gz: b1477d7d86ad3def41842194405981bfcaed050bde961961f1e75f74ccc7057b9c0dbd4c06686f1c6639042e17bfef01fe5947a27fc895f516f257c878ac3f68
-  data.tar.gz: 3ac01a8f7d26c04b62b3af528e32003f98b59f4caa06da35fd1f974e36017b7fe4c21589a32bf3ca50d14eecee641a719871ee7bb1b2ef3f3bef15652de4a503
+  metadata.gz: 1668ef825c3f06032802b9614baba74626f6e74cabd741880143627d1f6c2ee32d1d2b0a21676a550d2773c3abaa1d4ec3162da05b7e4bcb574d5e8429bab8fc
+  data.tar.gz: 1f457860e311e5efa5fa07d8199c0ef0758dac7122b9a07b3780c820f472546aee2083bbaf2b0374343fc41882e7830780e788070111c04404f9f2788b7b25d3

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

@@ -619,6 +619,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -663,9 +666,15 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-wait {
+    cursor: wait;
+  }
   .resize {
     resize: both;
   }
@@ -1087,6 +1096,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1159,6 +1171,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1237,6 +1252,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1357,6 +1375,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1368,6 +1389,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1380,6 +1405,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
@@ -1395,6 +1424,10 @@
   .ring-gray-300 {
     --tw-ring-color: var(--color-gray-300);
   }
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;

data/app/helpers/okonomi_ui_kit/component.rb

@@ -14,5 +14,67 @@ module OkonomiUiKit
     def name
       self.class.name.demodulize.underscore
     end
+
+    def style(*args)
+      styles.dig(*args)
+    end
+
+    def styles
+      @combined_styles ||= combined_styles
+    end
+
+    def combined_styles
+      internal_name = internal_styles_registry.has_key?(theme_name) ? theme_name : :default
+      config_name = config_styles_registry.has_key?(theme_name) ? theme_name : :default
+
+      internal_styles = internal_styles_registry[internal_name] || {}
+      config_styles = config_styles_registry[config_name] || {}
+
+      {}.deep_merge(internal_styles).deep_merge(config_styles)
+    end
+
+    def internal_styles_registry
+      self.class.internal_styles_registry
+    end
+
+    def config_styles_registry
+      self.class.config_styles_registry
+    end
+
+    def theme_name
+      :default
+    end
+
+    def self.config_styles_registry
+      return Hash.new({}) unless config_class?
+
+      config_class.styles_registry
+    end
+
+    def self.config_class
+      return nil unless config_class?
+
+      Object.const_get(config_class_name)
+    end
+
+    def self.config_class_name
+      "OkonomiUiKit::Configs::#{name.demodulize}"
+    end
+
+    def self.config_class?
+      Object.const_defined?(config_class_name)
+    end
+
+    def self.register_styles(theme = :default, &block)
+      styles = block.call if block_given?
+
+      raise ArgumentError, "Styles must be a Hash" unless styles.is_a?(Hash)
+
+      internal_styles_registry[theme] = styles if styles.is_a?(Hash)
+    end
+
+    def self.internal_styles_registry
+      @internal_styles_registry ||= {}
+    end
   end
 end

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

@@ -2,24 +2,29 @@ module OkonomiUiKit
   module Components
     class Badge < OkonomiUiKit::Component
       def render(text, options = {})
-        severity = options.delete(:severity) || :default
-        color_classes = case severity.to_sym
-                        when :success
-                          "bg-green-100 text-green-800"
-                        when :danger
-                          "bg-red-100 text-red-800"
-                        when :info
-                          "bg-blue-100 text-blue-800"
-                        when :warning
-                          "bg-yellow-100 text-yellow-800"
-                        else
-                          "bg-gray-100 text-gray-800"
-                        end
+        options = options.with_indifferent_access
+        severity = (options.delete(:severity) || :default).to_sym
+        
+        classes = [
+          style(:base),
+          style(:severities, severity) || '',
+          options.delete(:class) || ''
+        ].reject(&:blank?).join(' ')
 
-        base_classes = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-        full_classes = "#{base_classes} #{color_classes} #{options[:class] || ''}".strip
+        view.tag.span(text, class: classes, **options)
+      end
 
-        view.tag.span(text, class: full_classes, **options.except(:class))
+      register_styles :default do
+        {
+          base: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+          severities: {
+            default: "bg-gray-100 text-gray-800",
+            success: "bg-green-100 text-green-800",
+            danger: "bg-red-100 text-red-800",
+            info: "bg-blue-100 text-blue-800",
+            warning: "bg-yellow-100 text-yellow-800"
+          }
+        }
       end
     end
   end

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

@@ -0,0 +1,34 @@
+module OkonomiUiKit
+  module Components
+    class ButtonTo < OkonomiUiKit::Component
+      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) || 'contained').to_sym
+        color = (html_options.delete(:color) || 'default').to_sym
+
+        html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
+
+        if block_given?
+          view.button_to(options, html_options, &block)
+        else
+          view.button_to(name, options, html_options)
+        end
+      end
+
+      private
+
+      def build_button_class(variant:, color:, classes: '')
+        [
+          theme.dig(:components, :link, :root) || '',
+          theme.dig(:components, :link, variant.to_sym, :root) || '',
+          theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
+          classes,
+        ].reject(&:blank?).join(' ')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,73 @@
+module OkonomiUiKit
+  module Components
+    class Code < OkonomiUiKit::Component
+      def render(content = nil, options = {}, &block)
+        options, content = content, nil if block_given?
+        options ||= {}
+        options = options.with_indifferent_access
+
+        # Extract component-specific options
+        language = options.delete(:language) || options.delete(:lang)
+        variant = (options.delete(:variant) || 'default').to_sym
+        size = (options.delete(:size) || 'default').to_sym
+        wrap = options.delete(:wrap) != false # Default to true
+
+        # Build classes
+        classes = build_classes(variant: variant, size: size, wrap: wrap, custom_class: options.delete(:class))
+
+        # Escape HTML entities in content
+        escaped_content = if block_given?
+                            view.capture(&block)
+                          elsif content
+                            content
+                          else
+                            ""
+                          end
+
+        view.render(
+          template_path,
+          content: escaped_content.strip.html_safe,
+          options: options,
+          classes: classes,
+          language: language
+        )
+      end
+
+      private
+
+      def build_classes(variant:, size:, wrap:, custom_class: nil)
+        base_classes = theme.dig(:components, :code, :base) || "bg-gray-900 text-gray-100 rounded-lg"
+
+        variant_classes = case variant
+                          when :inline
+                            "bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm font-mono"
+                          when :minimal
+                            "bg-gray-900 text-gray-100 p-3 rounded text-xs"
+                          else
+                            # :default
+                            "bg-gray-900 text-gray-100 p-4 rounded-lg"
+                          end
+
+        size_classes = case size
+                       when :xs
+                         "text-xs"
+                       when :sm
+                         "text-sm"
+                       when :lg
+                         "text-base"
+                       else
+                         # :default
+                         "text-sm"
+                       end
+
+        wrap_classes = wrap ? "overflow-x-auto" : "overflow-hidden"
+
+        [base_classes, variant_classes, size_classes, wrap_classes, custom_class].compact.join(' ')
+      end
+
+      def html_escape(content)
+        ERB::Util.html_escape(content.to_s.strip)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+module OkonomiUiKit
+  module Components
+    class LinkTo < OkonomiUiKit::Component
+      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
+        
+        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)
+        end
+      end
+      
+      private
+      
+      def build_button_class(variant:, color:, classes: '')
+        [
+          theme.dig(:components, :link, :root) || '',
+          theme.dig(:components, :link, variant.to_sym, :root) || '',
+          theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
+          classes,
+        ].reject(&:blank?).join(' ')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,247 @@
+module OkonomiUiKit
+  module Components
+    class Page < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        builder = PageBuilder.new(view)
+
+        view.render(template_path, builder: builder, options: options, &block)
+      end
+    end
+
+    class PageBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template)
+        @template = template
+        @content_parts = []
+      end
+
+      def page_header(**options, &block)
+        header_builder = PageHeaderBuilder.new(@template)
+        yield(header_builder) if block_given?
+        @content_parts << header_builder.render
+        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
+        nil
+      end
+
+      def render_content
+        @template.safe_join(@content_parts)
+      end
+      
+      def to_s
+        render_content
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @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.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