anchor_view_components 0.9.2 → 0.9.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 690f9aa0026033a9a42653fcebdd8cac19573199c1a738961d1e0e99637a211b
-  data.tar.gz: 8c2287d823d21ddb99d766bcc8feda6204ae7807104cca805564c79692bf6efc
+  metadata.gz: fc1868d9abc000e67ae9aa10f38a2d462cdcbf2894f96f76ef9f400f899f633c
+  data.tar.gz: 9c43abbcfc0e5e746878c90c6379ad3ad5496c26d90fbb0f2723bf581d8c2404
 SHA512:
-  metadata.gz: d35cd7a26d617a935c89d0817b231ee6f623e7abfab537cccec147d867b7710c6fc409d0b49c463458f25adbe3a829dd6912653f9d49bbaf60600e6707a4391d
-  data.tar.gz: 137e7360312efa49b781297351a49d77b7e5d8b5e27117e9f5d5197fd375159f89bffb18ac48d220a5bc7934bec0a6755dfd47e185c569028aaec318c135e0b5
+  metadata.gz: 6f1201868d3abb571db947c49f8518a5bdee54b610a3c1282fe983e9deaa780ce24280c42fe514266e9640cc9135a6e8d1889aa99119a302e846bbc664ac24e1
+  data.tar.gz: 7cb9fdec805731bace8256159511575c9c36e525f26253253f5c849143784ea30636bf6921db368531db8e76a24c2be88f8c504d24001c06220cebe31a1e624b

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.9.3 - 2023-08-28
+
+### Added
+
+- Add TableComponent and helper
+- Introduce `Invoker` Stimulus controller
+
 ## 0.9.2 - 2023-08-25
 
 ### Fixed

data/README.md

@@ -48,7 +48,10 @@
 
 ## Development
 
-TODO
+To see component previews:
+
+- Run `yarn build:css --watch` in the root of the project
+- Run `bin/dev` in the `demo/` directory
 
 ## License
 

data/app/assets/images/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 5h18M3 12h18M3 19h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

data/app/components/anchor/anchor_view_components.ts

@@ -3,14 +3,18 @@ import "@oddbird/popover-polyfill";
 import ActionMenuController from "./action_menu_controller";
 import AutocompleteController from "./autocomplete_controller";
 import DialogController from "./dialog_controller";
+import InvokerController from "./invoker_controller";
 import ToastController from "./toast_controller";
 import ToggleController from "./toggle_controller";
+import Sortable from "stimulus-sortable";
 import { Application } from "@hotwired/stimulus";
 
 export function registerAnchorControllers(application: Application) {
   application.register("action-menu", ActionMenuController);
   application.register("autocomplete", AutocompleteController);
   application.register("dialog", DialogController);
+  application.register("invoker", InvokerController);
+  application.register("sortable", Sortable)
   application.register("toast", ToastController);
   application.register("toggle", ToggleController);
 }
@@ -19,6 +23,7 @@ export {
   ActionMenuController,
   AutocompleteController,
   DialogController,
+  InvokerController,
   ToastController,
   ToggleController
 };

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

@@ -1,45 +1,43 @@
-<%= tag.div(
-  class: "contents",
-  data: { controller: "dialog" },
+<%= 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: {
+    controller: "dialog",
+    testid: title_id,
+  },
   id: id,
 ) 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", testid: title_id },
-  ) do %>
-    <header class="p-6 flex gap-4 justify-between items-center">
-      <%= render Anchor::TextComponent.new(
-        variant: :heading_2xl,
-        tag: :h1,
-        id: title_id,
-        data: { testid: "#{title_id}-title" }
-      ).with_content(title) %>
+  <header class="p-6 flex gap-4 justify-between items-center">
+    <%= render Anchor::TextComponent.new(
+      variant: :heading_2xl,
+      tag: :h1,
+      id: title_id,
+      data: { testid: "#{title_id}-title" }
+    ).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>
+    <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,
-        data: { testid: "#{title_id}-body" }
-      ).with_content(body)) %>
-    </div>
+  <div class="px-6 pb-6">
+    <%= render(Anchor::TextComponent.new(
+      variant: :body_base,
+      data: { testid: "#{title_id}-body" }
+    ).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 %>
+  <% if footer? %>
+    <footer class="sticky bottom-0 bg-white px-6 pb-6 flex gap-2 justify-end">
+      <%= footer %>
+    </footer>
   <% end %>
 <% end %>

data/app/components/anchor/dialog_component.rb

@@ -2,15 +2,20 @@ module Anchor
   class DialogComponent < Component
     renders_one :show_button, ->(**kwargs) do
       ButtonComponent.new(
-        data: { action: "dialog#showModal",
-                testid: "#{title.parameterize}-btn" },
+        data: {
+          action: "invoker#openDialog",
+          controller: "invoker",
+          invoker_dialog_outlet: "##{id}",
+          testid: "#{title.parameterize}-btn",
+        },
         **kwargs
       )
     end
     renders_one :body
     renders_one :footer
 
-    def initialize(title:, **kwargs)
+    def initialize(id:, title:, **kwargs)
+      @id = id
       @title = title
 
       super
@@ -18,7 +23,7 @@ module Anchor
 
     private
 
-    attr_reader :title
+    attr_reader :id, :title
 
     def render?
       body?

data/app/components/anchor/dialog_controller.ts

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

data/app/components/anchor/invoker_controller.ts

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus";
+import DialogController from "./dialog_controller";
+
+export default class extends Controller {
+  static outlets = ["dialog"];
+
+  declare readonly dialogOutlet: DialogController;
+
+  openDialog(): void {
+    this.dialogOutlet.showModal();
+  }
+}

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

@@ -0,0 +1,37 @@
+<table class="w-full text-base text-left">
+  <thead>
+    <tr class="border-b">
+      <% columns.each do |column| %>
+        <%= tag.th(
+          column.header,
+          class: "px-2 py-3 font-semibold",
+          scope: "col",
+        ) %>
+      <% end %>
+    </tr>
+  </thead>
+
+  <%= tag.tbody(data: tbody_data) do
+    data.each do |model| %>
+      <%= tag.tr(
+        class: row_classes,
+        data: {
+          sortable_update_url: sort_url(model),
+          testid: "tr-#{model.id}"
+        },
+      ) do
+        columns.each.with_index do |column, index| %>
+          <%= tag.td(
+            maybe_link(model, column, index, self).to_s.html_safe,
+            class: class_names(
+              "relative",
+              "p-3 pl-8 bg-[url('assets/icons/menu.svg')] bg-[length:16px_16px] bg-[8px_center] bg-no-repeat": sortable? && index.zero?,
+              "px-2 py-3": !sortable? || index.positive?,
+            ),
+            data: { testid: "tr-#{model.id}-td-#{index}" },
+          ) %>
+        <% end
+      end
+    end
+  end %>
+</table>

data/app/components/anchor/table_component.rb

@@ -0,0 +1,90 @@
+module Anchor
+  class TableComponent < Component
+    renders_many :columns, "ColumnComponent"
+    renders_one :link
+
+    attr_reader :data, :sortable
+
+    def initialize(data:, sortable: false, sort_url: nil)
+      @data = data
+      @sortable = sortable
+      @sort_url = sort_url
+
+      super
+    end
+
+    private
+
+    def row_classes
+      row_classes = %w(border-b focus-within:bg-grey-10)
+      if link?
+        row_classes += %w(hover:bg-grey-10 hover:cursor-pointer)
+      end
+      if sortable?
+        row_classes += %w(hover:cursor-pointer)
+      end
+      row_classes.join(" ")
+    end
+
+    def maybe_link(model, column, index, view_context)
+      value = value_for(model, column)
+      if link?
+        path = "#{link}#{model.id}"
+        if index.zero?
+          text = view_context.link_to(value, path)
+        else
+          text = value
+        end
+        text + view_context.link_to(
+          "",
+          path,
+          aria: { hidden: true },
+          class: "absolute inset-0",
+          tabindex: "-1"
+        )
+      else
+        value
+      end
+    end
+
+    def value_for(model, column)
+      if column.value.respond_to?(:call)
+        column.value.call(model)
+      else
+        model[column.value]
+      end
+    end
+
+    def tbody_data
+      if sortable?
+        { controller: "sortable", testid: "sortable" }
+      else
+        {}
+      end
+    end
+
+    def sort_url(model)
+      if sortable?
+        @sort_url.call(model)
+      end
+    end
+
+    def sortable?
+      sortable
+    end
+
+    def render?
+      columns.present? && data.present?
+    end
+
+    class ColumnComponent < Anchor::Component
+      attr_reader :header, :value
+
+      def initialize(header:, value:)
+        @header = header
+        @value = value
+        super
+      end
+    end
+  end
+end

data/app/helpers/anchor/view_helper.rb

@@ -14,6 +14,7 @@ module Anchor
       prose
       side_nav
       tab_bar
+      table
       toast
     ].freeze
 

data/lib/anchor/view_components/version.rb

@@ -1,5 +1,5 @@
 module Anchor
   module ViewComponents
-    VERSION = "0.9.2".freeze
+    VERSION = "0.9.3".freeze
   end
 end

data/previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb

@@ -0,0 +1,23 @@
+<%= render Anchor::ActionMenuComponent.new do |c| %>
+  <% c.with_show_button_content("Menu") %>
+
+  <% c.with_item do %>
+    <%= tag.button(
+      "Show dialog",
+      data: {
+        action: "invoker#openDialog",
+        controller: "invoker",
+        invoker_dialog_outlet: "#my-dialog",
+      },
+    ) %>
+  <% end %>
+<% end %>
+
+<%= render Anchor::DialogComponent.new(
+  id: "my-dialog",
+  title: "Dialog Title",
+) do |dialog| %>
+  <% dialog.with_body do %>
+    <%= tag.p "Content" %>
+  <% end %>
+<% end %>

data/previews/anchor/action_menu_component_preview.rb

@@ -18,5 +18,7 @@ module Anchor
         end
       end
     end
+
+    def opens_a_dialog; end
   end
 end

data/previews/anchor/dialog_component_preview/with_custom_show_button.html.erb

@@ -0,0 +1,16 @@
+<%= render Anchor::ButtonComponent.new(
+  data: {
+    action: "invoker#openDialog",
+    controller: "invoker",
+    invoker_dialog_outlet: "#my-dialog",
+  },
+).with_content("Show dialog") %>
+
+<%= render Anchor::DialogComponent.new(
+  id: "my-dialog",
+  title: "Dialog Title",
+) do |dialog| %>
+  <% dialog.with_body do %>
+    <%= tag.p "Content" %>
+  <% end %>
+<% end %>

data/previews/anchor/dialog_component_preview/with_footer.html.erb

@@ -1,4 +1,5 @@
 <%= render Anchor::DialogComponent.new(
+  id: "my-dialog",
   title: "Dialog Title",
 ) do |dialog| %>
   <% dialog.with_show_button.with_content("Show Dialog") %>

data/previews/anchor/dialog_component_preview.rb

@@ -16,8 +16,16 @@ module Anchor
 
     def with_footer; end
 
+    # The Dialog component has a `show_button` slot, but it’s optional and you
+    # can instead provide your own button to open the Dialog, as shown in this
+    # example.
+    def with_custom_show_button; end
+
     def with_link
-      render Anchor::DialogComponent.new(title: "Dialog Title") do |c|
+      render Anchor::DialogComponent.new(
+        id: "my-dialog",
+        title: "Dialog Title"
+      ) do |c|
         c.with_show_button(classes: "all-unset underline")
           .with_content("Show Dialog")
         c.with_body.with_content("Content")

data/previews/anchor/table_component_preview.rb

@@ -0,0 +1,48 @@
+module Anchor
+  class TableComponentPreview < ViewComponent::Preview
+    class MockData
+      attr_reader :id, :name
+
+      def initialize(id, name)
+        @id = id
+        @name = name
+      end
+
+      def [](key)
+        public_send(key)
+      end
+    end
+
+    def playground
+      render Anchor::TableComponent.new(data:) do |table|
+        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "Name", value: -> { _1.name.capitalize })
+      end
+    end
+
+    def with_link
+      render Anchor::TableComponent.new(data:) do |table|
+        table.with_link { "#a_link/" }
+        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "Name", value: -> { _1.name.capitalize })
+      end
+    end
+
+    def sortable
+      render Anchor::TableComponent.new(
+        data:,
+        sortable: true,
+        sort_url: ->(data) { "/sort/#{data.id}" }
+      ) do |table|
+        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "Name", value: -> { _1.name.capitalize })
+      end
+    end
+
+    private
+
+    def data
+      (1..4).map { MockData.new(_1, "name #{_1}") }
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.9.3
 platform: ruby
 authors:
 - Buoy Software
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-25 00:00:00.000000000 Z
+date: 2023-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -51,6 +51,7 @@ files:
 - app/assets/images/icons/actions-check-circle-base.svg
 - app/assets/images/icons/cancel.svg
 - app/assets/images/icons/fast-left-circle.svg
+- app/assets/images/icons/menu.svg
 - app/assets/images/icons/nav-arrow-down.svg
 - app/assets/images/icons/nav-arrow-left.svg
 - app/assets/images/icons/nav-arrow-right.svg
@@ -82,6 +83,7 @@ files:
 - app/components/anchor/dialog_controller.ts
 - app/components/anchor/icon_component.html.erb
 - app/components/anchor/icon_component.rb
+- app/components/anchor/invoker_controller.ts
 - app/components/anchor/loading_indicator_component.html.erb
 - app/components/anchor/loading_indicator_component.rb
 - app/components/anchor/panel/body_component.html.erb
@@ -101,6 +103,8 @@ files:
 - app/components/anchor/tab_bar/tab_component.rb
 - app/components/anchor/tab_bar_component.html.erb
 - app/components/anchor/tab_bar_component.rb
+- app/components/anchor/table_component.html.erb
+- app/components/anchor/table_component.rb
 - app/components/anchor/text_component.html.erb
 - app/components/anchor/text_component.rb
 - app/components/anchor/toast_component.html.erb
@@ -115,11 +119,13 @@ files:
 - lib/anchor/view_components/version.rb
 - lib/anchor_view_components.rb
 - previews/anchor/action_menu_component_preview.rb
+- previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb
 - previews/anchor/badge_component_preview.rb
 - previews/anchor/banner_component_preview.rb
 - previews/anchor/breadcrumbs_component_preview.rb
 - previews/anchor/button_component_preview.rb
 - previews/anchor/dialog_component_preview.rb
+- previews/anchor/dialog_component_preview/with_custom_show_button.html.erb
 - previews/anchor/dialog_component_preview/with_footer.html.erb
 - previews/anchor/icon_component_preview.rb
 - previews/anchor/loading_indicator_component_preview.rb
@@ -128,6 +134,7 @@ files:
 - previews/anchor/side_nav_component_preview.rb
 - previews/anchor/side_nav_component_preview/default.html.erb
 - previews/anchor/tab_bar_component_preview.rb
+- previews/anchor/table_component_preview.rb
 - previews/anchor/text_component_preview.rb
 - previews/anchor/toast_component_preview.rb
 homepage: https://github.com/BuoySoftware/anchor_view_components