uchi 0.1.2 → 0.1.4

data/app/assets/stylesheets/uchi/uchi.css

@@ -0,0 +1,17 @@
+/* Uchi UI */
+
+/* This file is compiled into app/assets/builds/uchi.css by
+tailwindcss running tailwindcss --watch in Procfile.dev */
+
+/* We need tailwindcss, duh */
+@import "tailwindcss";
+
+/* Import the default theme variables from Flowbite
+This imports them from node_modules/flowbite/src/themes/default.css */
+@import "flowbite/src/themes/default";
+
+/* Import the Flowbite plugin */
+@plugin "flowbite/plugin";
+
+/* Configure the source files of Flowbite */
+@source "../../../node_modules/flowbite";

data/app/assets/tailwind/uchi.css

@@ -0,0 +1,21 @@
+/* Uchi UI */
+
+/* This file is compiled into app/assets/stylesheets/uchi/application.css by
+running the following command:
+
+    tailwindcss -i app/assets/tailwind/uchi.css -o app/assets/stylesheets/uchi/application.css
+    npx @tailwindcss/cli -i ./app/assets/tailwind/uchi.css -o ./app/assets/stylesheets/uchi/application.css
+*/
+
+/* We need tailwindcss, duh */
+@import "tailwindcss";
+
+/* Import the default theme variables from Flowbite
+This imports them from node_modules/flowbite/src/themes/default.css */
+@import "flowbite/src/themes/default";
+
+/* Import the Flowbite plugin */
+@plugin "flowbite/plugin";
+
+/* Configure the source files of Flowbite */
+@source "../../../node_modules/flowbite";

data/app/components/flowbite/breadcrumb.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb navigation component.
+  #
+  # See https://flowbite.com/docs/components/breadcrumb/
+  #
+  # @example Basic usage with BreadcrumbItem components
+  #   <%= render Flowbite::Breadcrumb.new do |breadcrumb| %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+  #     <% end %>
+  #   <% end %>
+  class Breadcrumb < ViewComponent::Base
+    renders_many :items
+
+    def call
+      content_tag(:nav, class: "flex", "aria-label": "Breadcrumb") do
+        content_tag(:ol, class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse") do
+          items.each do |item|
+            concat(item)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb_home.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb home icon.
+  #
+  # This is typically used as a prefix icon in the first breadcrumb item,
+  # but can be used standalone if needed.
+  #
+  # @example Standalone usage
+  #   <%= render Flowbite::BreadcrumbHome.new %>
+  class BreadcrumbHome < ViewComponent::Base
+    def call
+      tag.svg(
+        class: "w-3 h-3 me-2.5",
+        "aria-hidden": "true",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "currentColor",
+        viewBox: "0 0 20 20"
+      ) do
+        tag.path(
+          d: "m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+        )
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb_item/current.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class BreadcrumbItem
+    # Renders the current page breadcrumb item.
+    # Current items are rendered as non-interactive spans with different styling.
+    #
+    # @param options [Hash] Additional HTML attributes to pass to the span element.
+    #
+    # @example Current page item
+    #   <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+    class Current < BreadcrumbItem
+      def initialize(**options)
+        super(href: nil, **options)
+      end
+
+      protected
+
+      def item_options
+        {"aria-current": "page"}
+      end
+
+      def render_link
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:span, content, **link_options)
+      end
+
+      def link_classes
+        ["ms-1", "text-sm", "font-medium", "text-gray-500", "dark:text-gray-400"]
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb_item/first.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class BreadcrumbItem
+    # Renders the first breadcrumb item (typically home).
+    # First items don't show a separator icon.
+    #
+    # @param href [String] The URL for the breadcrumb link.
+    # @param options [Hash] Additional HTML attributes to pass to the link element.
+    #
+    # @example First item
+    #   <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+    class First < BreadcrumbItem
+      protected
+
+      def item_options
+        {class: "inline-flex items-center"}
+      end
+
+      def link_classes
+        ["text-sm", "font-medium", "inline-flex", "items-center", "text-gray-700", "hover:text-blue-600", "dark:text-gray-400", "dark:hover:text-white"]
+      end
+
+      def prefix_icon
+        nil
+      end
+
+      def render_link
+        icon = render(Flowbite::BreadcrumbHome.new)
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:a, safe_join([icon, content]), href: href, **link_options)
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb_item.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Base class for rendering a breadcrumb item (middle items in the breadcrumb trail).
+  #
+  # @param href [String] The URL for the breadcrumb link.
+  # @param options [Hash] Additional HTML attributes to pass to the link element.
+  #
+  # @example Middle item
+  #   <%= render Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  class BreadcrumbItem < ViewComponent::Base
+    attr_reader :href, :options
+
+    def initialize(href:, **options)
+      super()
+      @href = href
+      @options = options
+    end
+
+    def call
+      content_tag(:li, item_options) do
+        content_tag(:div, class: "flex items-center") do
+          concat(render(prefix_icon)) if prefix_icon
+          concat(render_link)
+        end
+      end
+    end
+
+    protected
+
+    def item_options
+      {}
+    end
+
+    def prefix_icon
+      Flowbite::BreadcrumbSeparator.new
+    end
+
+    def render_link
+      link_options = {class: link_classes}.merge(options)
+      content_tag(:a, content, href: href, **link_options)
+    end
+
+    def link_classes
+      ["ms-1", "text-sm", "font-medium", "text-gray-700", "hover:text-blue-600", "dark:text-gray-400", "dark:hover:text-white"]
+    end
+  end
+end

data/app/components/flowbite/breadcrumb_separator.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb separator icon.
+  #
+  # This is automatically used by BreadcrumbItem components, but can be
+  # used standalone if needed.
+  #
+  # @example Standalone usage
+  #   <%= render Flowbite::BreadcrumbSeparator.new %>
+  class BreadcrumbSeparator < ViewComponent::Base
+    def call
+      tag.svg(
+        class: "rtl:rotate-180 w-3 h-3 text-gray-400 mx-1",
+        "aria-hidden": "true",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 6 10"
+      ) do
+        tag.path(
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d: "m1 9 4-4-4-4"
+        )
+      end
+    end
+  end
+end

data/app/components/flowbite/button/outline.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Button
+    class Outline < Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-700", "hover:text-white", "border", "border-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:outline-none", "focus:ring-blue-300", "font-medium", "rounded-lg", "text-center", "me-2", "mb-2", "dark:border-blue-500", "dark:text-blue-500", "dark:hover:text-white", "dark:hover:bg-blue-500", "dark:focus:ring-blue-800"]
+            ),
+            green: Flowbite::Style.new(
+              default: ["text-green-700", "hover:text-white", "border", "border-green-700", "hover:bg-green-800", "focus:ring-4", "focus:outline-none", "focus:ring-green-300", "font-medium", "rounded-lg", "text-center", "me-2", "mb-2", "dark:border-green-500", "dark:text-green-500", "dark:hover:text-white", "dark:hover:bg-green-600", "dark:focus:ring-green-800"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength
+      end
+    end
+  end
+end

data/app/components/flowbite/button/pill.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Button
+    class Pill < Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength, Metrics/MethodLength
+        def styles
+          {
+            alternative: Flowbite::Style.new(
+              default: ["text-sm", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-full", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+            ),
+            dark: Flowbite::Style.new(
+              default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:outline-none", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+            ),
+            default: Flowbite::Style.new(
+              default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-center", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800"]
+            ),
+            green: Flowbite::Style.new(
+              default: ["text-white", "bg-green-700", "hover:bg-green-800", "focus:outline-none", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-full", "text-center", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+            ),
+            light: Flowbite::Style.new(
+              default: ["text-gray-900", "bg-white", "border", "border-gray-300", "focus:outline-none", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+            ),
+            purple: Flowbite::Style.new(
+              default: ["text-white", "bg-purple-700", "hover:bg-purple-800", "focus:outline-none", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-full", "text-center", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+            ),
+            red: Flowbite::Style.new(
+              default: ["text-white", "bg-red-700", "hover:bg-red-800", "focus:outline-none", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-full", "text-center", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+            ),
+            yellow: Flowbite::Style.new(
+              default: ["text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:outline-none", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-full", "text-center", "dark:focus:ring-yellow-900"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength, Metrics/MethodLength
+      end
+    end
+  end
+end

data/app/components/flowbite/button.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a HTML button element.
+  #
+  # See https://flowbite.com/docs/components/buttons/
+  #
+  # @param label [String] The text to display on the button.
+  #
+  # All other parameters are optional and are passed directly to the button tag
+  # as HTML attributes.
+  class Button < ViewComponent::Base
+    SIZES = {
+      xs: ["text-xs", "px-3", "py-2"],
+      sm: ["text-sm", "px-3", "py-2"],
+      default: ["text-sm", "px-5", "py-2.5"],
+      lg: ["text-base", "px-5", "py-3"],
+      xl: ["text-base", "px-6", "py-3.5"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, state: :default, style: :default)
+        style = styles.fetch(style)
+        classes = style.fetch(state)
+        classes + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          alternative: Flowbite::Style.new(
+            default: ["font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-lg", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+          ),
+          dark: Flowbite::Style.new(
+            default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+          ),
+          default: Flowbite::Style.new(
+            default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-lg", "dark:bg-blue-600", "dark:hover:bg-blue-700", "focus:outline-none", "dark:focus:ring-blue-800"]
+          ),
+          green: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-green-700", "hover:bg-green-800", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-lg", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+          ),
+          light: Flowbite::Style.new(
+            default: ["text-gray-900", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+          ),
+          purple: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-purple-700", "hover:bg-purple-800", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-lg", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+          ),
+          red: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-red-700", "hover:bg-red-800", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-lg", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+          ),
+          yellow: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-lg", "dark:focus:ring-yellow-900"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    attr_reader :button_attributes, :size, :style
+
+    def initialize(size: :default, style: :default, **button_attributes)
+      @size = size
+      @style = style
+      @button_attributes = button_attributes
+    end
+
+    def call
+      content_tag(
+        :button,
+        content,
+        **options
+      )
+    end
+
+    private
+
+    def classes
+      self.class.classes(size: size, state: :default, style: style)
+    end
+
+    def options
+      {
+        class: classes
+      }.merge(button_attributes)
+    end
+  end
+end

data/app/components/flowbite/card.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a card element.
+  #
+  # See https://flowbite.com/docs/components/cards/
+  class Card < ViewComponent::Base
+    class << self
+      def classes(state: :default, style: :default)
+        style = styles.fetch(style)
+        style.fetch(state)
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          default: Flowbite::Style.new(
+            default: ["p-6", "bg-white", "border", "border-gray-200", "rounded-lg", "shadow-sm", "dark:bg-gray-800", "dark:border-gray-700"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    def call
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+
+      content_tag(:div, card_options.merge(@options)) do
+        concat(content_tag(:div, content, class: "font-normal text-gray-700 dark:text-gray-400"))
+      end
+    end
+
+    # @param class [Array<String>] Additional CSS classes for the card
+    #   container.
+    #
+    # @param options [Hash] Additional HTML options for the card container
+    #   (e.g., custom classes, data attributes). These options are merged into
+    #   the card's root element.
+    def initialize(class: [], options: {})
+      @class = Array(binding.local_variable_get(:class)) || []
+      @options = options || {}
+    end
+  end
+end

data/app/components/flowbite/input/checkbox.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # The checkbox component can be used to receive one or more selected options
+    # from the user in the form of a square box available in multiple styles,
+    # sizes, colors, and variants coded with the utility classes from Tailwind
+    # CSS and with support for dark mode.
+    #
+    # https://flowbite.com/docs/forms/checkbox/
+    class Checkbox < Field
+      DEFAULT_CHECKED_VALUE = "1"
+      DEFAULT_UNCHECKED_VALUE = "0"
+
+      class << self
+        # Checkboxes only have their default size.
+        def sizes
+          {
+            default: ["w-4", "h-4"]
+          }
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "rounded-sm", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          input_options,
+          checked_value,
+          unchecked_value
+        )
+      end
+
+      def initialize(attribute:, form:, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
+        super(attribute: attribute, form: form, disabled: disabled, options: options, size: size)
+        @unchecked_value = unchecked_value
+        @value = value
+      end
+
+      def input_field_type
+        :check_box
+      end
+
+      # Returns the options argument for the input field
+      def input_options
+        {
+          class: classes,
+          disabled: disabled?
+        }.merge(options)
+      end
+
+      private
+
+      def checked_value
+        @value
+      end
+
+      attr_reader :unchecked_value
+    end
+  end
+end

data/app/components/flowbite/input/date.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Date < Field
+      def input_field_type
+        :date_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/date_time.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class DateTime < Field
+      def input_field_type
+        :datetime_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/email.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Email < Field
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :email_field
+      end
+    end
+  end
+end