ariadne_view_components 0.0.13 → 0.0.15

data/app/components/ariadne/dropdown_component.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `DropdownComponent` is a lightweight context menu for holding navigation and actions.
+  class DropdownComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = ""
+
+    # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Ariadne::ButtonComponent) %>,
+    # but it is locked as a `summary` tag.
+    #
+    # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
+    # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :button, lambda { |size: Ariadne::BaseButton::DEFAULT_SIZE, scheme: :none, classes: "", attributes: {}|
+      @button_classes = classes
+      @button_attributes = attributes
+      @button_attributes[:button] = true
+
+      Ariadne::ButtonComponent.new(tag: :summary, type: :button, scheme: scheme, dropdown: @with_caret, size: size, classes: classes, attributes: attributes)
+    }
+
+    # Required context menu for the dropdown.
+    #
+    # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+    # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>
+    # @param header [String] Optional string to display as the header
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :menu, "Ariadne::Dropdown::MenuComponent"
+    # TODO: remove *Item suffix from nested classes
+
+    # @example Default
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #      <% menu.header { "Header" } %>
+    #       <% menu.item { "Item 1" } %>
+    #       <% menu.item { "Item 2" } %>
+    #       <% menu.item { "Item 3" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With dividers
+    #
+    #   @description
+    #     Dividers can be used to separate a group of items. They don't have any content.
+    #   @code
+    #     <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #       <% c.button do %>
+    #         Dropdown
+    #       <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item(divider: true) %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #       <%= menu.item(divider: true) %>
+    #       <%= menu.item { "Item 5" } %>
+    #       <%= menu.item { "Item 6" } %>
+    #     <% end %>
+    #    <% end %>
+    #
+    # @example With direction
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu(direction: :s) do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With caret
+    #   <%= render(Ariadne::DropdownComponent.new(with_caret: true)) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Customizing the button
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button(scheme: :info, size: :sm) do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #    <% end %>
+    #   <% end %>
+    #
+    # @example Menu as list
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu(as: :list) do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <% menu.item { "Item 1" } %>
+    #       <% menu.item { "Item 2" } %>
+    #       <% menu.item(divider: true) %>
+    #       <% menu.item { "Item 3" } %>
+    #       <% menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Customizing menu items
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <% menu.item(tag: :button) { "Item 1" } %>
+    #       <% menu.item(classes: "ariadne-text-red-500") { "Item 2" } %>
+    #       <% menu.item { "Item 3" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param overlay [Symbol] <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(overlay: :default, with_caret: false, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+
+      @with_caret = with_caret
+
+      @overlay = overlay
+      @attributes[:reset] = true
+    end
+
+    def render?
+      button.present? && menu.present?
+    end
+  end
+end

data/app/components/ariadne/flex_component.rb

@@ -6,7 +6,7 @@ module Ariadne
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = "flex"
+    DEFAULT_CLASSES = "ariadne-flex"
 
     VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
 

data/app/components/ariadne/footer_component.html.erb

@@ -1,6 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
   <%= render Ariadne::ContainerComponent.new do |container| %>
-    <p class="ariadne-mt-6 ariadne-text-sm text-slate-500 sm:ariadne-mt-0">
+    <p class="ariadne-mt-6 ariadne-text-sm ariadne-text-slate-500 sm:ariadne-mt-0">
       <%= content %>
     </p>
   <% end %>

data/app/components/ariadne/header_component.rb

@@ -3,7 +3,7 @@
 module Ariadne
   # Represents the top navigation bar on every page.
   class HeaderComponent < Ariadne::Component
-    DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-py-5 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
+    DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-pt-4 ariadne-h-16 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
     # ariadne-flex ariadne-flex-wrap ariadne-items-center ariadne-justify-between ariadne-bg-white   dark:ariadne-shadow-none  dark:ariadne-bg-transparent
     LINK_CLASSES = "ariadne-rounded-lg ariadne-py-1 ariadne-px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
 
@@ -60,13 +60,13 @@ module Ariadne
     # @param href [String] The link destination.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
     renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
     }
 
-    DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
     renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)

data/app/components/ariadne/heroicon_component.rb

@@ -11,13 +11,15 @@ module Ariadne
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_DEFAULT = :sm
-    SIZE_MEDIUM = :md
+    SIZE_MICRO = :mu
+    SIZE_SMALL = :sm
+    SIZE_DEFAULT = :md
     SIZE_LARGE = :lg
 
     SIZE_MAPPINGS = {
-      SIZE_DEFAULT => 16,
-      SIZE_MEDIUM => 24,
+      SIZE_MICRO => 16,
+      SIZE_SMALL => 20,
+      SIZE_DEFAULT => 24,
       SIZE_LARGE => 128,
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys

data/app/components/ariadne/inline_flex_component.html.erb

@@ -2,4 +2,5 @@
   <%= icon %>
   <%= item %>
   <%= text %>
+  <%= dropdown %>
 <% end %>

data/app/components/ariadne/inline_flex_component.rb

@@ -19,7 +19,7 @@ module Ariadne
       </svg>
     MSG
     STATE_CLOSED_SVG = <<~MSG
-      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed ariadne-fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
       </svg>
     MSG
@@ -42,12 +42,19 @@ module Ariadne
       Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
     }
 
+    renders_one :dropdown, "Ariadne::DropdownComponent"
+
     # @example Default
     #
     #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
     #      <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
     #   <% end %>
     #
+    #   # TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
+    #   <% end %>
+    #
     #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
     #      <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
     #      <% c.text { "Closed" } %>

data/app/components/ariadne/link_component.rb

@@ -6,8 +6,8 @@ module Ariadne
     DEFAULT_TAG = :a
     TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
 
-    DEFAULT_CLASSES = "ariadne-cursor-pointer"
-    DEFAULT_ACTIONABLE_CLASSES = " ariadne-cursor-pointer ariadne-underline ariadne-decoration-double ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+    DEFAULT_CLASSES = "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+    DEFAULT_ACTIONABLE_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double"
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.

data/app/components/ariadne/list_component.html.erb

@@ -1,13 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
+  <%= content %>
   <% items.each do |item| %>
-    <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
-      <% if item.linked? %>
-        <%= render Ariadne::LinkComponent.new(href: item.link[:href], classes: item.link[:classes], attributes: item.link[:attributes]) do %>
-          <%= item.entry %>
-        <% end %>
-      <% else %>
-        <%= item.entry %>
-      <% end %>
-    <% end %>
+    <%= item %>
   <% end %>
 <% end %>

data/app/components/ariadne/list_component.rb

@@ -13,7 +13,7 @@ module Ariadne
     #   <%= render(Ariadne::ListComponent.new) do |list| %>
     #     <% numbers.each do |number| %>
     #       <%= list.item do |item|  %>
-    #         <%= item.entry { number } %>
+    #         <%= number %>
     #       <% end %>
     #     <% end %>
     #   <% end %>
@@ -27,23 +27,11 @@ module Ariadne
       @attributes = attributes
     end
 
-    def render?
-      items.any?
-    end
-
     # This component is part of `ListComponent` and should not be
     # used as a standalone component.
     class ListItem < Ariadne::Component
       DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
 
-      DEFAULT_ENTRY_CLASSES = "hover:ariadne-text-gray-500"
-      renders_one :entry, lambda { |classes: "", attributes: {}, &block|
-        view_context.capture do
-          actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
-          render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
-        end
-      }
-
       attr_reader :link, :classes, :attributes
 
       def initialize(link: {}, classes: "", attributes: {})
@@ -56,12 +44,20 @@ module Ariadne
         @selected
       end
 
-      def linked?
+      private def linked?
         @link.present?
       end
 
       def call
-        Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
+        render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
+          if linked?
+            render(Ariadne::LinkComponent.new(href: @link[:href], classes: @link[:classes], attributes: @link[:attributes])) do
+              content
+            end
+          else
+            content
+          end
+        end
       end
     end
   end

data/app/components/ariadne/pill_component.rb

@@ -6,25 +6,39 @@ module Ariadne
     DEFAULT_TAG = :span
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full"
+    DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full ariadne-whitespace-nowrap"
 
     # @example Default
     #
-    #   <%= render(Ariadne::PillComponent.new(color: "FF0000")) { "Admin" } %>
+    #   <%= render(Ariadne::PillComponent.new(color: [49, 186, 115, 1.0])) { "Admin" } %>
     #
     # @param tag [Symbol, String] The rendered tag name.
-    # @param color [String] The hex color of the pill.
+    # @param color [String] The rgba color of the pill.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(tag: DEFAULT_TAG, color:, classes: "", attributes: {})
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @red = color[0]
+      @green = color[1]
+      @blue = color[2]
+      @alpha = color[3]
+
+      @attributes = attributes
+      @attributes["style"] = "background-color: rgba(#{@red}, #{@green}, #{@blue}, #{@alpha});"
+      @text_color = contrast_of(@red, @green, @blue)
+
       @classes = class_names(
         DEFAULT_CLASSES,
         classes,
+        @text_color,
       )
+    end
 
-      @attributes = attributes
-      @attributes["style"] = "background-color: ##{color};"
+    private def contrast_of(red, green, blue)
+      luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
+
+      luminance > 0.5 ? "ariadne-text-black" : "ariadne-text-white"
     end
   end
 end

data/app/components/ariadne/rich-text-area-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class RichTextArea extends Controller {
+    connect(): void;
+}

data/app/components/ariadne/rich-text-area-component.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+import { Editor } from '@tiptap/core';
+import { StarterKit } from '@tiptap/starter-kit';
+export default class RichTextArea extends Controller {
+    connect() {
+        const editorElements = document.getElementsByClassName('tiptap-editor');
+        for (const editorElement of editorElements) {
+            new Editor({
+                element: editorElement,
+                extensions: [StarterKit],
+                content: '',
+                editorProps: {
+                    attributes: {
+                        class: 'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
+                    }
+                }
+            });
+            const tiptapValueContainer = document.querySelector('input[data-tiptap-value-container=true]');
+            if (tiptapValueContainer) {
+                const parentForm = editorElement.closest('form');
+                parentForm === null || parentForm === void 0 ? void 0 : parentForm.addEventListener('submit', () => {
+                    tiptapValueContainer.setAttribute('value', editorElement.textContent || '');
+                });
+            }
+        }
+    }
+}

data/app/components/ariadne/rich-text-area-component.ts

@@ -5,16 +5,16 @@ import {StarterKit} from '@tiptap/starter-kit'
 
 export default class RichTextArea extends Controller {
   connect() {
-    const editorElement = document.querySelector('.tiptap-editor')
-    if (editorElement) {
+    const editorElements = document.getElementsByClassName('tiptap-editor')
+    for (const editorElement of editorElements) {
       new Editor({
         element: editorElement,
         extensions: [StarterKit],
-        content: 'Hello World!',
+        content: '',
         editorProps: {
           attributes: {
             class:
-              'ariadne-prose ariadne-prose-sm sm:ariadne-prose lg:ariadne-prose-lg xl:ariadne-prose-2xl ariadne-m-5 focus:ariadne-outline-none'
+              'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
           }
         }
       })

data/app/components/ariadne/rich_text_area_component.html.erb

@@ -2,5 +2,5 @@
   <% if @has_form %>
     <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
   <% end %>
-  <textarea class="tiptap-editor"></textarea>
+  <div class="tiptap-editor"></div>
 <% end %>

data/app/components/ariadne/rich_text_area_component.rb

@@ -6,7 +6,7 @@ module Ariadne
   # @accessibility Add any accessibility considerations
   class RichTextAreaComponent < Ariadne::Component
     DEFAULT_TAG = :div
-    DEFAULT_CLASSES = "ariadne-block ariadne-w-full ariadne-border-0 ariadne-py-3 focus:ariadne-ring-0 sm:ariadne-text-sm"
+    DEFAULT_CLASSES = "ariadne-block"
 
     # @example Default
     #

data/app/components/ariadne/slideover-component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/components/ariadne/slideover-component.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    toggle() {
+        var _a;
+        this.expandableTarget.classList.toggle('ariadne-hidden');
+        this.expandWrapperTarget.classList.toggle('bg-filter-panel');
+        for (const slidePanel of this.slidePanelTargets) {
+            slidePanel.classList.toggle('ariadne-hidden');
+        }
+        this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
+        if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('ariadne-hidden')) {
+            const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id');
+            if (formID) {
+                const form = document.getElementById(formID);
+                form === null || form === void 0 ? void 0 : form.submit();
+            }
+        }
+    }
+}
+SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

data/app/components/ariadne/slideover_component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/components/ariadne/slideover_component.html.erb

@@ -1,6 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
   <div data-slideover-component-target="expandWrapper" class="ariadne-flex ariadne-flex-col ariadne-z-10">
-    <div data-slideover-component-target="expandable" class="ariadne-hidden bg-filter-panel ariadne-px-3 ariadne-pb-4">
+    <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3 ariadne-pb-4">
       <%= content %>
     </div>
     <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="ariadne-relative ariadne-flex ariadne-justify-center">

data/app/components/ariadne/slideover_component.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    toggle() {
+        var _a;
+        // eslint-disable-next-line no-debugger
+        debugger;
+        this.expandableTarget.classList.toggle('hidden');
+        this.expandWrapperTarget.classList.toggle('bg-filter-panel');
+        for (const slidePanel of this.slidePanelTargets) {
+            slidePanel.classList.toggle('hidden');
+        }
+        this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
+        if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('hidden')) {
+            const form = this.buttonWrapperTarget.closest('form');
+            form === null || form === void 0 ? void 0 : form.submit();
+        }
+    }
+}
+SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

data/app/components/ariadne/tab-component.js

@@ -0,0 +1 @@
+"use strict";

data/app/components/ariadne/tab-container-component copy.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/components/ariadne/tab-container-component copy.js

@@ -0,0 +1,23 @@
+import '@github/tab-container-element';
+// // keep in sync with tab_container_component.rb
+// const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+// const DEFAULT_UNSELECTED_CLASSES: string[] = [
+//   'ariadne-text-gray-500',
+//   'hover:ariadne-text-gray-700',
+//   'hover:ariadne-border-gray-300'
+// ]
+for (const tabContainer of document.getElementsByTagName('tab-container')) {
+    tabContainer.addEventListener('tab-container-change', function (event) {
+        var _a;
+        const newPanel = event.detail.relatedTarget;
+        const tabContainer = newPanel.closest('tab-container');
+        const tabList = tabContainer.firstElementChild;
+        const currentTab = tabList.querySelector('[aria-selected="true"]');
+        const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
+        const newTab = tabList.querySelector(`#${tabId}`);
+        currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
+        currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
+        newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
+        newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
+    });
+}

data/app/components/ariadne/tab-container-component.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/components/ariadne/tab-container-component.js

@@ -0,0 +1,23 @@
+import '@github/tab-container-element';
+// keep in sync with tab_container_component.rb
+const DEFAULT_SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
+const DEFAULT_UNSELECTED_CLASSES = [
+    'ariadne-text-gray-500',
+    'hover:ariadne-text-gray-700',
+    'hover:ariadne-border-gray-300'
+];
+for (const tabContainer of document.getElementsByTagName('tab-container')) {
+    tabContainer.addEventListener('tab-container-change', function (event) {
+        var _a;
+        const newPanel = event.detail.relatedTarget;
+        const tabContainer = newPanel.closest('tab-container');
+        const tabList = tabContainer.firstElementChild;
+        const currentTab = tabList.querySelector('[aria-selected="true"]');
+        const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
+        const newTab = tabList.querySelector(`#${tabId}`);
+        currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
+        currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
+        newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
+        newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
+    });
+}