protos 0.1.0

data/lib/protos/collapse/title.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Collapse
+    class Title < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("collapse-title")
+        }
+      end
+    end
+  end
+end

data/lib/protos/collapse.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Protos
+  class Collapse < Component
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    def title(...)
+      Title.new(...)
+    end
+
+    def content(...)
+      Content.new(...)
+    end
+
+    private
+
+    def theme
+      {
+        container: tokens("collapse", "collapse-arrow", "bg-base-100")
+      }
+    end
+
+    def default_attrs
+      {
+        tabindex: 0
+      }
+    end
+  end
+end

data/lib/protos/combobox.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Protos
+  class Combobox < Component
+    def template
+      div(**attrs) do
+        render Popover.new do
+          yield if block_given?
+        end
+      end
+    end
+
+    def trigger(...)
+      Popover::Trigger.new(...)
+    end
+
+    def content(...)
+      Popover::Content.new(...)
+    end
+
+    def input(...)
+      Command::Input.new(...)
+    end
+
+    def group(...)
+      Command::Group.new(...)
+    end
+
+    def item(...)
+      Command::Item.new(...)
+    end
+
+    def list(...)
+      Command::List.new(...)
+    end
+
+    def title(...)
+      Command::Title.new(...)
+    end
+
+    def empty(...)
+      Command::Empty.new(...)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: { controller: "protos--command" }
+      }
+    end
+  end
+end

data/lib/protos/command/dialog.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Dialog < Component
+      def template(&block)
+        dialog(**attrs) do
+          div(class: css[:modal], &block)
+          form(method: :dialog, class: css[:form]) do
+            button { "close" }
+          end
+        end
+      end
+
+      private
+
+      def default_attrs
+        {
+          data: { "protos--modal-target": "modal" }
+        }
+      end
+
+      def theme
+        {
+          container: tokens("modal", "modal-bottom", "sm:modal-middle"),
+          modal: tokens("modal-box", "p-0"),
+          form: tokens("modal-backdrop")
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/empty.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Empty < Component
+      def template(&block)
+        li(**attrs, &block)
+      end
+
+      private
+
+      def default_attrs
+        {
+          data: { "protos--command-target": "empty" }
+        }
+      end
+
+      def theme
+        {
+          container: tokens("hidden", "px-xs", "py-sm")
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/group.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Group < Component
+      def template(&block)
+        li(**attrs) do
+          ul(class: css[:list], &block)
+        end
+      end
+    end
+  end
+end

data/lib/protos/command/input.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Input < Component
+      option :placeholder,
+             default: -> {
+               "Type a command or search..."
+             },
+             reader: :private
+
+      def template(&block)
+        div(**attrs) do
+          label(class: css[:label]) do
+            div(class: css[:icon], &block) if block
+            input(
+              type: :text,
+              data: { action: "protos--command#filter" },
+              class: css[:input],
+              placeholder:
+            )
+          end
+        end
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("form-control"),
+          label: tokens(
+            "input",
+            "input-bordered",
+            "flex",
+            "items-center",
+            "gap-2"
+          ),
+          input: tokens("grow", "bg-transparent"),
+          icon: tokens("flex", "place-items-center")
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/item.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Item < Component
+      def template(&block)
+        li(**attrs, &block)
+      end
+
+      private
+
+      def default_attrs
+        {
+          data: { "protos--command-target": "item" }
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/list.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class List < Component
+      def template(&block)
+        ul(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("menu")
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/title.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Title < Component
+      def template(&block)
+        h2(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("menu-title")
+        }
+      end
+    end
+  end
+end

data/lib/protos/command/trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command
+    class Trigger < Component
+      def template(&block)
+        button(**attrs, &block)
+      end
+
+      private
+
+      def default_attrs
+        {
+          data: { action: "protos--modal#open" }
+        }
+      end
+    end
+  end
+end

data/lib/protos/command.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Protos
+  class Command < Component
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    def input(...)
+      Input.new(...)
+    end
+
+    def list(...)
+      List.new(...)
+    end
+
+    def trigger(...)
+      Trigger.new(...)
+    end
+
+    def dialog(...)
+      Dialog.new(...)
+    end
+
+    def title(...)
+      Title.new(...)
+    end
+
+    def group(...)
+      Group.new(...)
+    end
+
+    def item(...)
+      Item.new
+    end
+
+    def empty(...)
+      Empty.new(...)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: { controller: "protos--command protos--modal" }
+      }
+    end
+  end
+end

data/lib/protos/component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Protos
+  class Component < Phlex::HTML
+    # DOCS: Base component
+
+    extend Dry::Initializer
+    extend Dry::Core::ClassAttributes
+
+    # Define methods for css and attrs. Each is expected to return a hash
+    defines :css_method, type: Types::Symbol
+    defines :attrs_method, type: Types::Symbol
+
+    css_method :theme
+    attrs_method :default_attrs
+
+    # Theme can override the css hash and add additional styles
+    option :theme, as: :theme_override, default: -> { {} }, reader: :private
+    # Class becomes the :container key in the css hash
+    option :class, as: :container_class, default: -> { "" }, reader: :private
+    option :html_options, default: -> { {} }, reader: :private
+
+    # Adds non-defined options to the html_options hash
+    def initialize(*args, **kwargs, &block)
+      raise_block_in_initializer_error if block
+
+      defined_keys = self.class.dry_initializer.definitions.keys
+      defined, undefined =
+        kwargs
+          .partition { |key, _| defined_keys.include?(key) }
+          .map(&:to_h)
+
+      super(*args, html_options: undefined, **defined)
+    end
+
+    private
+
+    def raise_block_in_initializer_error
+      raise(
+        ArgumentError,
+        "It is unexpected to pass a block to the initializer of a component. " \
+        "You might have tried to render and passed a block but it went to " \
+        "the component.new. Check your render call."
+      )
+    end
+
+    def attrs
+      @attrs ||= build_attrs
+    end
+
+    def css
+      @css ||= build_theme
+    end
+
+    def build_attrs(...)
+      defaults = if respond_to?(self.class.attrs_method, :include_private)
+        send(self.class.attrs_method)
+      end
+
+      Attributes
+        .new(...)
+        .merge(defaults)
+        .merge(html_options)
+        .merge(class: css[:container])
+    end
+
+    def build_theme(...)
+      component_style = if respond_to?(self.class.css_method, :include_private)
+        send(self.class.css_method)
+      end
+
+      Theme
+        .new(...)
+        .merge(component_style)
+        .merge(theme_override)
+        .merge(container: container_class)
+    end
+  end
+end

data/lib/protos/drawer/content.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Drawer
+    class Content < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("drawer-content")
+        }
+      end
+    end
+  end
+end

data/lib/protos/drawer/side.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Protos
+  class Drawer
+    class Side < Component
+      option :id, type: Types::Coercible::String
+
+      def template
+        aside(**attrs) do
+          label(for: id, aria_label: "close sidebar", class: css[:toggle])
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("drawer-side", "z-20"),
+          toggle: tokens("drawer-overlay")
+        }
+      end
+    end
+  end
+end

data/lib/protos/drawer/trigger.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Protos
+  class Drawer
+    class Trigger < Component
+      option :id, type: Types::Coercible::String
+
+      def template(&block)
+        label(for: id, **attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("drawer-button")
+        }
+      end
+    end
+  end
+end

data/lib/protos/drawer.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Protos
+  class Drawer < Component
+    option :id, type: Types::Coercible::String
+
+    def template
+      div(**attrs) do
+        input(id:, type: :checkbox, class: css[:toggle])
+        yield if block_given?
+      end
+    end
+
+    def content(...)
+      Content.new(...)
+    end
+
+    def side(*args, **kwargs, &block)
+      Side.new(*args, id:, **kwargs, &block)
+    end
+
+    def trigger(*args, **kwargs, &block)
+      Trigger.new(*args, id:, **kwargs, &block)
+    end
+
+    private
+
+    def theme
+      {
+        container: tokens("drawer"),
+        toggle: tokens("drawer-toggle")
+      }
+    end
+  end
+end

data/lib/protos/dropdown/item.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Protos
+  class Dropdown
+    class Item < Component
+      def template(&block)
+        li(**attrs, &block)
+      end
+    end
+  end
+end

data/lib/protos/dropdown/menu.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Protos
+  class Dropdown
+    class Menu < Component
+      def template(&block)
+        ul(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens(
+            "menu",
+            "dropdown-content",
+            "z-10",
+            "bg-base-100",
+            "rounded-box"
+          )
+        }
+      end
+    end
+  end
+end

data/lib/protos/dropdown/trigger.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Protos
+  class Dropdown
+    class Trigger < Component
+      def template(&block)
+        summary(**attrs, &block)
+      end
+    end
+  end
+end

data/lib/protos/dropdown.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Protos
+  class Dropdown < Component
+    PositionTypes = Types::Coercible::Symbol.enum(
+      :top,
+      :bottom,
+      :left,
+      :right,
+      :start,
+      :end
+    )
+
+    option :position,
+           type: PositionTypes,
+           default: -> { :bottom },
+           reader: false
+    option :hover, type: Types::Bool, default: -> { false }
+
+    def template(&block)
+      details(**attrs, &block)
+    end
+
+    def item(...)
+      Item.new(...)
+    end
+
+    def menu(...)
+      Menu.new(...)
+    end
+
+    def trigger(...)
+      Trigger.new(...)
+    end
+
+    private
+
+    def position
+      {
+        bottom: "dropdown-bottom",
+        top: "dropdown-top",
+        left: "dropdown-left",
+        right: "dropdown-right",
+        end: "dropdown-end",
+        start: "dropdown-start"
+      }.fetch(@position)
+    end
+
+    def theme
+      {
+        container: tokens(
+          "dropdown",
+          position,
+          hover: "dropdown-hover"
+        )
+      }
+    end
+  end
+end

data/lib/protos/engine.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Protos
+  class Engine < ::Rails::Engine
+    config.autoload_paths += Dir["#{config.root}/lib/"]
+  end
+end

data/lib/protos/list/item.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Protos
+  class List
+    class Item < Component
+      def template(&block)
+        li(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens(
+            "join-item",
+            "[&:not(:first-child)]:border-t-0"
+          )
+        }
+      end
+    end
+  end
+end