anchor_view_components 0.1.0

data/app/components/anchor/component.rb

@@ -0,0 +1,21 @@
+module Anchor
+  class Component < ViewComponent::Base
+    include FetchOrFallbackHelper
+    include ViewHelper
+
+    def self.generate_id(base_name: name.demodulize.underscore.dasherize)
+      "#{base_name}-#{SecureRandom.uuid}"
+    end
+
+    def initialize(classes: nil, data: {}, **kwargs)
+      @classes = classes
+      @data = data
+
+      super
+    end
+
+    private
+
+    attr_reader :classes
+  end
+end

data/app/components/anchor/dialog_component.html.erb

@@ -0,0 +1,42 @@
+<%= tag.div(
+  class: "contents",
+  data: { controller: "dialog" },
+) do %>
+  <%= show_button if show_button? %>
+
+  <%= tag.dialog(
+    aria: { labelledby: title_id },
+    class: "w-[36rem] rounded-lg p-0 bg-white shadow-lg backdrop:bg-grey-100/50",
+    data: { dialog_target: "dialog" },
+  ) do %>
+    <header class="p-6 flex gap-4 justify-between items-center">
+      <%= render Anchor::TextComponent.new(
+        variant: :heading_2xl,
+        tag: :h1,
+        id: title_id,
+      ).with_content(@title) %>
+
+      <form class="contents" method="dialog">
+        <%= tag.button(
+          aria: { label: "Close" },
+          class: "text-grey-50 hover:text-grey-70",
+          data: { action: "dialog#close" },
+        ) do %>
+          <%= render Anchor::IconComponent.new(icon: "cancel") %>
+        <% end %>
+      </form>
+    </header>
+
+    <div class="px-6 pb-6">
+      <%= render(Anchor::TextComponent.new(
+        variant: :body_base,
+      ).with_content(body)) %>
+    </div>
+
+    <% if footer? %>
+      <footer class="sticky bottom-0 bg-white px-6 pb-6 flex gap-2 justify-end">
+        <%= footer %>
+      </footer>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/anchor/dialog_component.rb

@@ -0,0 +1,25 @@
+module Anchor
+  class DialogComponent < Component
+    renders_one :show_button, -> do
+      ButtonComponent.new(data: { action: "dialog#showModal" })
+    end
+    renders_one :body
+    renders_one :footer
+
+    def initialize(title:)
+      @title = title
+
+      super
+    end
+
+    private
+
+    def render?
+      body?
+    end
+
+    def title_id
+      @title.parameterize
+    end
+  end
+end

data/app/components/anchor/dialog_controller.ts

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller<HTMLDivElement> {
+  static targets = ["dialog"];
+
+  declare readonly dialogTarget: HTMLDialogElement;
+
+  showModal(): void {
+    this.dialogTarget.showModal();
+  }
+
+  close(): void {
+    this.dialogTarget.close();
+  }
+}

data/app/components/anchor/icon_component.html.erb

@@ -0,0 +1,6 @@
+<%= inline_svg_tag(
+  "icons/#{@icon}.svg",
+  aria_hidden: true,
+  class: @classes,
+  data: @data,
+) %>

data/app/components/anchor/icon_component.rb

@@ -0,0 +1,9 @@
+module Anchor
+  class IconComponent < Component
+    def initialize(icon:, **kwargs)
+      @icon = icon
+
+      super
+    end
+  end
+end

data/app/components/anchor/loading_indicator_component.html.erb

@@ -0,0 +1,6 @@
+<%= tag.div(
+  class: class_names(
+    "inline-block animate-spin border-grey-100 border-b-transparent rounded-full",
+    variant
+  )
+) %>

data/app/components/anchor/loading_indicator_component.rb

@@ -0,0 +1,23 @@
+module Anchor
+  class LoadingIndicatorComponent < Component
+    VARIANT_MAPPING = {
+      sm: "w-4 h-4 border-[1.5px]",
+      md: "w-6 h-6 border-2",
+      lg: "w-12 h-12 border-4",
+    }.freeze
+    VARIANT_DEFAULT = :md
+    VARIANT_OPTIONS = VARIANT_MAPPING.keys
+
+    def initialize(variant: VARIANT_DEFAULT, **kwargs)
+      @variant = VARIANT_MAPPING[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+
+      super
+    end
+
+    private
+
+    attr_reader :variant
+  end
+end

data/app/components/anchor/panel/body_component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.div(
+  class: class_names(
+    "p-6",
+    classes
+  )
+) do %>
+  <%= content %>
+<% end %>

data/app/components/anchor/panel/body_component.rb

@@ -0,0 +1,6 @@
+module Anchor
+  module Panel
+    class BodyComponent < Component
+    end
+  end
+end

data/app/components/anchor/panel/footer_component.html.erb

@@ -0,0 +1,9 @@
+<div class="border-t border-subdued flex p-6 items-center">
+  <% if supporting_text? %>
+    <span class="text-base text-primary font-semibold"><%= supporting_text %></span>
+  <% end %>
+
+  <div class="ml-auto">
+    <%= primary_action %>
+  </div>
+</div>

data/app/components/anchor/panel/footer_component.rb

@@ -0,0 +1,17 @@
+module Anchor
+  module Panel
+    class FooterComponent < Component
+      renders_one :supporting_text
+
+      renders_one :primary_action, ->(form:, label:, **kwargs) do
+        ButtonComponent.new(
+          form:,
+          variant: :primary,
+          size: :small,
+          type: :submit,
+          **kwargs
+        ).with_content(label)
+      end
+    end
+  end
+end

data/app/components/anchor/panel/header_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.div(
+  class: class_names(
+    "border-subdued px-6 py-4",
+    "border-b" => active?
+  )
+) do %>
+  <%= render Anchor::TextComponent.new(variant: :subheading_xs)
+    .with_content(content) %>
+<% end %>

data/app/components/anchor/panel/header_component.rb

@@ -0,0 +1,15 @@
+module Anchor
+  module Panel
+    class HeaderComponent < Component
+      def initialize(active:)
+        @active = active
+
+        super
+      end
+
+      def active?
+        @active == true
+      end
+    end
+  end
+end

data/app/components/anchor/panel_component.html.erb

@@ -0,0 +1,8 @@
+<div class="border border-subdued">
+  <%= header %>
+
+  <% if active? %>
+    <%= body %>
+    <%= footer %>
+  <% end %>
+</div>

data/app/components/anchor/panel_component.rb

@@ -0,0 +1,20 @@
+module Anchor
+  class PanelComponent < Component
+    renders_one :header, -> do
+      Panel::HeaderComponent.new(active: active?)
+    end
+
+    renders_one :body, Panel::BodyComponent
+    renders_one :footer, Panel::FooterComponent
+
+    def initialize(active: false)
+      @active = active
+
+      super
+    end
+
+    def active?
+      @active == true
+    end
+  end
+end

data/app/components/anchor/prose_component.html.erb

@@ -0,0 +1,3 @@
+<div class="prose">
+  <%= content %>
+</div>

data/app/components/anchor/prose_component.rb

@@ -0,0 +1,9 @@
+module Anchor
+  class ProseComponent < Component
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/anchor/tab_bar/tab_component.html.erb

@@ -0,0 +1,11 @@
+<%= link_to(
+  content,
+  @href,
+  aria: {
+    current: { page: @active }
+  },
+  class: class_names(
+    "inline-block px-5 py-4 text-sm font-semibold relative text-gray-600 hover:text-gray-900",
+    "text-gray-900 after:block after:bg-blue-500 after:h-1 after:absolute after:-bottom-1 after:inset-x-0" => @active,
+  )
+) %>

data/app/components/anchor/tab_bar/tab_component.rb

@@ -0,0 +1,12 @@
+module Anchor
+  module TabBar
+    class TabComponent < Component
+      def initialize(href:, active: false)
+        @href = href
+        @active = active
+
+        super
+      end
+    end
+  end
+end

data/app/components/anchor/tab_bar_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.nav(
+  aria: { label: @label },
+  class: "shadow-[inset_0_-1px] shadow-gray-400 pb-1",
+) do %>
+  <ul class="flex">
+    <% tabs.each do |tab| %>
+      <%= tag.li tab %>
+    <% end %>
+  </ul>
+<% end %>

data/app/components/anchor/tab_bar_component.rb

@@ -0,0 +1,17 @@
+module Anchor
+  class TabBarComponent < Component
+    renders_many :tabs, TabBar::TabComponent
+
+    def initialize(label:)
+      @label = label
+
+      super
+    end
+
+    private
+
+    def render?
+      tabs.present?
+    end
+  end
+end

data/app/components/anchor/text_component.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(
+  @tag,
+  class: class_names(@variant, @classes),
+  id: @id,
+  data: @data
+) do %>
+  <%= content %>
+<% end %>

data/app/components/anchor/text_component.rb

@@ -0,0 +1,43 @@
+module Anchor
+  class TextComponent < Component
+    TAG_DEFAULT = :div
+
+    VARIANT_DEFAULT = :body_base
+    VARIANT_MAPPING = {
+      body_lg: "text-lg",
+      body_base: "text-base",
+      body_sm: "text-sm",
+      heading_base: "text-base font-semibold",
+      heading_lg: "text-lg font-semibold",
+      heading_xl: "text-xl font-semibold",
+      heading_2xl: "text-2xl font-semibold",
+      heading_3xl: "text-3xl font-semibold",
+      heading_4xl: "text-4xl font-semibold",
+      subheading_sm: "text-sm font-bold leading-4 uppercase",
+      subheading_xs: "text-xs font-bold leading-4 uppercase",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPING.keys
+
+    def initialize(
+      variant: VARIANT_DEFAULT,
+      tag: TAG_DEFAULT,
+      id: nil,
+      **kwargs
+    )
+      @variant = VARIANT_MAPPING[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+
+      @tag = tag
+      @id = id
+
+      super
+    end
+
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/anchor/toast_component.html.erb

@@ -0,0 +1,28 @@
+<%= tag.div(
+  class: class_names(
+    "toast",
+    @variant,
+  ),
+  data: { controller: "toast" },
+  id: @id,
+  popover: "manual",
+) do %>
+  <% if icon? %>
+    <%= icon %>
+  <% end %>
+
+  <%= render Anchor::TextComponent.new(
+    variant: :heading_base,
+    tag: :span,
+  ).with_content(content) %>
+
+  <%= tag.button(
+    aria: { label: "Close" },
+    class: "!ml-10",
+    type: "button",
+    popovertarget: @id,
+    popovertargetaction: "hide",
+  ) do %>
+    <%= render Anchor::IconComponent.new(icon: "cancel") %>
+  <% end %>
+<% end %>

data/app/components/anchor/toast_component.rb

@@ -0,0 +1,32 @@
+module Anchor
+  class ToastComponent < Component
+    renders_one :icon, ->(icon:) do
+      Anchor::IconComponent.new(icon:, classes: "opacity-70")
+    end
+
+    VARIANT_DEFAULT = :notice
+    VARIANT_MAPPINGS = {
+      VARIANT_DEFAULT => "bg-gray-900 text-white",
+      :success => "bg-green-700 text-white",
+      :error => "bg-red-700 text-white",
+      # TODO: Figma doesn’t provide a yellow ‘alert’ style
+      :alert => "bg-yellow-600 text-white",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    def initialize(variant: VARIANT_DEFAULT)
+      @variant = VARIANT_MAPPINGS[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+      @id = self.class.generate_id
+
+      super
+    end
+
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/anchor/toast_controller.ts

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller<HTMLDivElement> {
+  static values = {
+    hideDelay: { type: Number, default: 3000 },
+    showDelay: { type: Number, default: 200 },
+  };
+
+  declare hideDelayValue: number
+  declare showDelayValue: number
+
+  initialize = (): void => {
+    setTimeout(() => {
+      this.element.showPopover();
+    }, this.showDelayValue);
+
+    setTimeout(() => {
+      this.element.hidePopover();
+    }, this.hideDelayValue);
+  }
+}

data/app/helpers/anchor/fetch_or_fallback_helper.rb

@@ -0,0 +1,20 @@
+module Anchor
+  module FetchOrFallbackHelper
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil)
+      if allowed_values.include?(given_value)
+        given_value
+      else
+        unless Rails.env.production?
+          raise ArgumentError, <<~MSG
+            fetch_or_fallback was called with an invalid value.
+            Expected one of: #{allowed_values.inspect}
+            Got: #{given_value.inspect}
+            This will not raise in production, but will instead fallback to: #{fallback.inspect}
+          MSG
+        end
+
+        fallback
+      end
+    end
+  end
+end

data/app/helpers/anchor/view_helper.rb

@@ -0,0 +1,35 @@
+module Anchor
+  module ViewHelper
+    Anchor::TextComponent::VARIANT_OPTIONS.each do |variant_option|
+      define_method "text_#{variant_option}" do
+        |content = nil, *args, **kwargs, &block|
+
+        if block.present?
+          render(
+            Anchor::TextComponent.new(
+              *args,
+              variant: variant_option,
+              **kwargs
+            ),
+            &block
+          )
+        else
+          render Anchor::TextComponent.new(
+            *args,
+            variant: variant_option,
+            **kwargs
+          ).with_content(content)
+        end
+      end
+    end
+
+    def text_prose(content = nil, *args, **kwargs, &block)
+      if block.present?
+        render(Anchor::ProseComponent.new(*args, **kwargs), &block)
+      else
+        render Anchor::ProseComponent.new(*args, **kwargs)
+          .with_content(content)
+      end
+    end
+  end
+end

data/lib/anchor/view_components/engine.rb

@@ -0,0 +1,23 @@
+require "rails/engine"
+require "inline_svg"
+
+module Anchor
+  module ViewComponents
+    class Engine < ::Rails::Engine
+      isolate_namespace Anchor::ViewComponents
+
+      config.autoload_paths = %W[
+        #{root}/app/components
+        #{root}/app/helpers
+      ]
+
+      initializer "anchor_view_components.assets" do |app|
+        if app.config.respond_to?(:assets)
+          app.config.assets.precompile += %w[
+            anchor-view-components.css
+          ]
+        end
+      end
+    end
+  end
+end

data/lib/anchor/view_components/version.rb

@@ -0,0 +1,5 @@
+module Anchor
+  module ViewComponents
+    VERSION = "0.1.0"
+  end
+end

data/lib/anchor/view_components.rb

@@ -0,0 +1,8 @@
+require "anchor/view_components/version"
+require "anchor/view_components/engine"
+
+module Anchor
+  module ViewComponents
+    class Error < StandardError; end
+  end
+end

data/previews/anchor/action_menu_component_preview.rb

@@ -0,0 +1,22 @@
+module Anchor
+  class ActionMenuComponentPreview < ViewComponent::Preview
+    include ActionView::Helpers::UrlHelper
+
+    def playground
+      render Anchor::ActionMenuComponent.new do |c|
+        c.with_show_button do |button|
+          button.with_ending_icon(icon: "nav-arrow-down")
+          "Actions"
+        end
+
+        c.with_item do
+          link_to("Edit", "#")
+        end
+
+        c.with_item do
+          link_to("Delete", "#")
+        end
+      end
+    end
+  end
+end

data/previews/anchor/badge_component_preview.rb

@@ -0,0 +1,40 @@
+module Anchor
+  class BadgeComponentPreview < ViewComponent::Preview
+    # @param content text "Labels should be one to two words"
+    # @param variant select {{ Anchor::BadgeComponent::VARIANT_OPTIONS }}
+    def playground(
+      content: "Label",
+      variant: Anchor::BadgeComponent::VARIANT_DEFAULT
+    )
+      render(Anchor::BadgeComponent.new(variant:).with_content(content))
+    end
+
+    # @!group Variants
+
+    def neutral
+      render(Anchor::BadgeComponent.new.with_content("Label"))
+    end
+
+    def informational
+      render(Anchor::BadgeComponent.new(variant: :informational)
+        .with_content("Label"))
+    end
+
+    def success
+      render(Anchor::BadgeComponent.new(variant: :success)
+        .with_content("Label"))
+    end
+
+    def critical
+      render(Anchor::BadgeComponent.new(variant: :critical)
+        .with_content("Label"))
+    end
+
+    def warning
+      render(Anchor::BadgeComponent.new(variant: :warning)
+        .with_content("Label"))
+    end
+
+    # @!endgroup
+  end
+end

data/previews/anchor/banner_component_preview.rb

@@ -0,0 +1,41 @@
+module Anchor
+  class BannerComponentPreview < ViewComponent::Preview
+    # @param content text
+    # @param variant select {{ Anchor::BannerComponent::VARIANT_OPTIONS }}
+    def playground(
+      content: "Content",
+      variant: Anchor::BannerComponent::VARIANT_DEFAULT
+    )
+      render(Anchor::BannerComponent.new(variant:)
+        .with_content(content))
+    end
+
+    # @!group Variants
+
+    def neutral
+      render(Anchor::BannerComponent.new.with_content("Content"))
+    end
+
+    def informational
+      render(Anchor::BannerComponent.new(variant: :informational)
+        .with_content("Content"))
+    end
+
+    def success
+      render(Anchor::BannerComponent.new(variant: :success)
+        .with_content("Content"))
+    end
+
+    def critical
+      render(Anchor::BannerComponent.new(variant: :critical)
+        .with_content("Content"))
+    end
+
+    def warning
+      render(Anchor::BannerComponent.new(variant: :warning)
+        .with_content("Content"))
+    end
+
+    # @!endgroup
+  end
+end