protos 0.1.0

data/lib/protos/list.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Protos
+  class List < Component
+    option :ordered, Types::Bool, default: -> { false }, reader: false
+
+    def template(&block)
+      send(element, **attrs, &block)
+    end
+
+    def item(...)
+      Item.new(...)
+    end
+
+    private
+
+    def css
+      {
+        container: tokens(
+          "join",
+          "join-vertical"
+        )
+      }
+    end
+
+    def element
+      @ordered ? :ol : :ul
+    end
+  end
+end

data/lib/protos/modal/close_button.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Protos
+  class Modal
+    class CloseButton < Component
+      def template(&block)
+        form(method: :dialog, class: css[:form]) do
+          button(
+            **attrs,
+            &block
+          )
+        end
+      end
+    end
+  end
+end

data/lib/protos/modal/dialog.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Protos
+  class Modal
+    class Dialog < Component
+      def template(&block)
+        dialog(**attrs) do
+          div(class: css[:modal], &block)
+        end
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("modal", "modal-bottom", "sm:modal-middle"),
+          modal: tokens("modal-box", "flex", "flex-col", "gap-xs")
+        }
+      end
+
+      def attrs
+        @attrs ||= build_attrs(
+          {
+            data: { "protos--modal-target": "modal" }
+          }
+        )
+      end
+    end
+  end
+end

data/lib/protos/modal/trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Modal
+    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/modal.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Protos
+  class Modal < Protos::Component
+    def template(&block)
+      div(**attrs, class: css[:container], &block)
+    end
+
+    def close_button(...)
+      CloseButton.new(...)
+    end
+
+    def dialog(...)
+      Dialog.new(...)
+    end
+
+    def trigger(...)
+      Trigger.new(...)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "protos--modal"
+        }
+      }
+    end
+  end
+end

data/lib/protos/popover/content.rb

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

data/lib/protos/popover/trigger.rb

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

data/lib/protos/popover.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Protos
+  class Popover < Component
+    # DOCS: Like a dropdown, but instead of a list of menu items, its just
+    # a rendered block
+
+    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 content(...)
+      Content.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)
+      }
+    end
+  end
+end

data/lib/protos/table/body.rb

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

data/lib/protos/table/caption.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Table
+    class Caption < Component
+      def template(&block)
+        caption(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("caption-bottom", "p-sm")
+        }
+      end
+    end
+  end
+end

data/lib/protos/table/cell.rb

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

data/lib/protos/table/footer.rb

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

data/lib/protos/table/head.rb

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

data/lib/protos/table/header.rb

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

data/lib/protos/table/row.rb

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

data/lib/protos/table.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Protos
+  class Table < Component
+    def template(&block)
+      div(**attrs) do
+        table(class: css[:table], &block)
+      end
+    end
+
+    def body(...)
+      Body.new(...)
+    end
+
+    def caption(...)
+      Caption.new(...)
+    end
+
+    def cell(...)
+      Cell.new(...)
+    end
+
+    def footer(...)
+      Footer.new(...)
+    end
+
+    def head(...)
+      Head.new(...)
+    end
+
+    def header(...)
+      Header.new(...)
+    end
+
+    def row(...)
+      Row.new(...)
+    end
+
+    private
+
+    def theme
+      {
+        container: tokens("w-full", "overflow-x-auto"),
+        table: tokens("table")
+      }
+    end
+  end
+end

data/lib/protos/theme.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Protos
+  class Theme
+    def initialize(theme = {}, **kwargs)
+      @theme = theme.merge(kwargs)
+    end
+
+    def [](key)
+      @theme[key]
+    end
+
+    def key?(key)
+      @theme.key?(key)
+    end
+
+    def add(key, value)
+      current_tokens = parse(@theme.fetch(key, ""))
+      new_tokens = parse(value)
+      tokens = current_tokens + new_tokens
+
+      @theme[key] = tokens.to_s
+    end
+
+    def remove(key, value)
+      current_tokens = parse(@theme.fetch(key, ""))
+      removable_tokens = parse(value)
+      tokens = current_tokens - removable_tokens
+
+      @theme[key] = tokens.to_s
+    end
+
+    def set(key, value)
+      if value.is_a?(Hash)
+        @theme[key] = value
+      else
+        tokens = parse(value)
+        @theme[key] = tokens.to_s
+      end
+    end
+
+    def merge(hash)
+      hash ||= {}
+
+      tap do
+        hash.each_key do |key|
+          if key?(key)
+            add(key, hash[key])
+          elsif negation?(key)
+            no_bang = key.to_s[1..].to_sym
+            remove(no_bang, hash[key])
+          elsif override?(key)
+            no_bang = key.to_s.chomp("!").to_sym
+            set(no_bang, hash[key])
+          else
+            set(key, hash[key])
+          end
+        end
+      end
+    end
+
+    private
+
+    def parse(value)
+      TokenList.parse(value)
+    end
+
+    def negation?(key)
+      key.to_s.start_with?("!")
+    end
+
+    def override?(key)
+      key.to_s.end_with?("!")
+    end
+  end
+end

data/lib/protos/timeline/center.rb

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

data/lib/protos/timeline/item.rb

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

data/lib/protos/timeline/left.rb

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

data/lib/protos/timeline/right.rb

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

data/lib/protos/timeline.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Protos
+  class Timeline < Component
+    option :vertical, type: Types::Bool, default: -> { false }
+
+    def template(&block)
+      ul(**attrs, &block)
+    end
+
+    def item(...)
+      Item.new(...)
+    end
+
+    def left(...)
+      Left.new(...)
+    end
+
+    def center(...)
+      Center.new(...)
+    end
+
+    def right(...)
+      Right.new(...)
+    end
+
+    private
+
+    def css
+      {
+        container: tokens(
+          "timeline",
+          vertical: "timeline-vertical"
+        )
+      }
+    end
+  end
+end

data/lib/protos/token_list.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Protos
+  class TokenList
+    def self.parse(input)
+      case input
+      when String then new(input.split)
+      when Array then new(input)
+      else raise ArgumentError, "Invalid input: #{input.inspect}"
+      end
+    end
+
+    attr_reader :tokens
+
+    def initialize(tokens)
+      @tokens = Set.new(tokens)
+    end
+
+    def to_s
+      @tokens.to_a.join(" ")
+    end
+
+    def -(other)
+      other = TokenList.parse(other) unless other.is_a?(TokenList)
+      self.class.new(@tokens - other.tokens)
+    end
+
+    def +(other)
+      other = TokenList.parse(other) unless other.is_a?(TokenList)
+      self.class.new(@tokens + other.tokens)
+    end
+
+    def remove(token)
+      @tokens.delete(token)
+    end
+
+    def add(token)
+      @tokens.add(token)
+    end
+  end
+end

data/lib/protos/types.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Protos
+  module Types
+    include Dry.Types()
+
+    MaskShapes = Types::Coercible::Symbol.enum(
+      :none,
+      :squircle,
+      :heart,
+      :hexagon,
+      :hexagon2,
+      :decagon,
+      :pentagon,
+      :diamond,
+      :square,
+      :circle,
+      :parallelogram,
+      :parallelogram2,
+      :parallelogram3,
+      :parallelogram4,
+      :star,
+      :star2,
+      :triangle,
+      :triangle2,
+      :triangle3,
+      :triangle4,
+      :half1,
+      :half2
+    )
+  end
+end

data/lib/protos/typography/heading.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Protos
+  module Typography
+    class Heading < Protos::Component
+      SizeTypes = Types::Coercible::Symbol.enum(:xs, :sm, :md, :lg, :xl)
+      LevelTypes = Types::Integer.enum(1, 2, 3, 4, 5, 6)
+
+      option :size, type: SizeTypes, default: -> { "md" }, reader: false
+      option :level, type: LevelTypes, default: -> { 1 }, reader: false
+
+      def template(&block)
+        send(element, **attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens(
+            size,
+            "scroll-m-20",
+            "tracking-tight",
+            "transition-colors"
+          )
+        }
+      end
+
+      def size
+        {
+          xs: "text-lg font-medium",
+          sm: "text-xl font-medium",
+          md: "text-2xl font-semibold",
+          lg: "text-3xl font-semibold md:text-4xl",
+          xl: "text-4xl font-bold md:text-5xl"
+        }.fetch(@size.to_sym)
+      end
+
+      def element
+        %i[h1 h2 h3 h4 h5 h6][@level - 1]
+      end
+    end
+  end
+end

data/lib/protos/typography/inline_link.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Protos
+  module Typography
+    class InlineLink < Component
+      def template(&block)
+        a(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens(
+            "font-medium",
+            "hover:underline",
+            "underline-offset-4",
+            "cursor-pointer"
+          )
+        }
+      end
+    end
+  end
+end