ariadne_view_components 0.0.14 → 0.0.15

data/app/components/ariadne/ariadne-form-with.d.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+import { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form-with.js

@@ -0,0 +1,85 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return !field.disabled && !['file', 'reset', 'submit', 'button'].includes(field.type);
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.element.children).filter(node => {
+            const data = node.attributes.getNamedItem('data-ariadne-form-field');
+            if ((data === null || data === void 0 ? void 0 : data.value) === 'true')
+                return true;
+        });
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}

data/app/components/ariadne/ariadne-form.d.ts

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+import type { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    static targets: string[];
+    readonly formFieldTargets: [HTMLFormField];
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form.js

@@ -0,0 +1,84 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return (!field.disabled &&
+            !field.classList.contains('ProseMirror') &&
+            !['file', 'reset', 'submit', 'button'].includes(field.type));
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.formFieldTargets);
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}
+AriadneFormWith.targets = ['formField'];

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

@@ -0,0 +1,2 @@
+import './tab-container-component';
+import './time-ago-component';

data/app/components/ariadne/ariadne.js

@@ -0,0 +1,16 @@
+import { Application } from '@hotwired/stimulus';
+import AriadneForm from './ariadne-form';
+import ClipboardCopyComponent from './clipboard-copy-component';
+import RichTextAreaComponent from './rich-text-area-component';
+import SlideoverComponent from './slideover-component';
+import TabNavComponent from './tab-nav-component';
+import TooltipComponent from './tooltip-component';
+import './tab-container-component';
+import './time-ago-component';
+const application = Application.start();
+application.register('clipboard-copy-component', ClipboardCopyComponent);
+application.register('ariadne-form', AriadneForm);
+application.register('rich-text-area-component', RichTextAreaComponent);
+application.register('slideover-component', SlideoverComponent);
+application.register('tab-nav-component', TabNavComponent);
+application.register('tooltip-component', TooltipComponent);

data/app/components/ariadne/body_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   # Add additional usage considerations or best practices that may aid the user to use the component correctly.
   # @accessibility Add any accessibility considerations
   class BodyComponent < Ariadne::Component
-    DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col ariadne-min-h-screen"
+    DEFAULT_CLASSES = "ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
 
     # @example Default
     #

data/app/components/ariadne/clipboard-copy-component.d.ts

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

data/app/components/ariadne/clipboard-copy-component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

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

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

data/app/components/ariadne/clipboard_copy_component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+// import {Controller} from '@hotwired/stimulus'
+// export default class CommentComponent extends Controller {
+//   static targets = ['tab', 'tabBarComponent']
+//   declare readonly commentComponentTarget: HTMLDivElement
+//   declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
+//   declare readonly tabTargets: [HTMLButtonElement]
+//   // keep in sync with comment_component.rb
+//   SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+//   PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
+//   INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
+//   toggleTab() {
+//     for (const tab of this.tabTargets) {
+//       if (tab.hasAttribute('aria-selected')) {
+//         tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, false)
+//         tab.removeAttribute('aria-selected')
+//       } else {
+//         tab.setAttribute('aria-selected', 'true')
+//         tab.classList.add(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, true)
+//       }
+//     }
+//   }
+//   toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean) {
+//     if (publicComment) {
+//       this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+//     }
+//   }
+// }

data/app/components/ariadne/component.rb

@@ -16,8 +16,6 @@ module Ariadne
     include LoggerHelper
     include Ariadne::ActionViewExtensions::FormHelper
 
-    BASE_HTML_CLASSES = "ariadne-h-full ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
-    BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
 

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"
 

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 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_ACTIONABLE_CLASSES = "ariadne-underline ariadne-decoration-double"
+    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/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/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.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);
+    });
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class TabNavComponent extends Controller {
+    static targets: string[];
+    readonly tabTargets: [HTMLAnchorElement];
+    SELECTED_CLASSES: string[];
+    UNSELECTED_CLASSES: string[];
+    connect(): void;
+    toggle(event: Event): void;
+}

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

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus';
+export default class TabNavComponent extends Controller {
+    constructor() {
+        super(...arguments);
+        // keep in synch with tab_nav_component
+        this.SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
+        this.UNSELECTED_CLASSES = ['ariadne-text-gray-500', 'hover:ariadne-text-gray-700', 'hover:ariadne-border-gray-300'];
+    }
+    connect() {
+        for (const tab of this.tabTargets) {
+            if (tab.hasAttribute('aria-current')) {
+                tab.classList.add(...this.SELECTED_CLASSES);
+                tab.classList.remove(...this.UNSELECTED_CLASSES);
+            }
+        }
+    }
+    toggle(event) {
+        for (const tab of this.tabTargets) {
+            if (tab === event.target) {
+                tab.setAttribute('aria-current', 'page');
+                tab.classList.add(...this.SELECTED_CLASSES);
+                tab.classList.remove(...this.UNSELECTED_CLASSES);
+            }
+            else if (tab.hasAttribute('aria-current')) {
+                tab.removeAttribute('aria-current');
+                tab.classList.add(...this.UNSELECTED_CLASSES);
+                tab.classList.remove(...this.SELECTED_CLASSES);
+            }
+        }
+    }
+}
+TabNavComponent.targets = ['tab'];

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

@@ -1,4 +1,4 @@
-<div class="ariadne-inline-block ariadne-min-w-full ariadne-py-2 ariadne-align-middle md:ariadne-px-6 lg:ariadne-px-8">
+<div class="ariadne-inline-block ariadne-min-w-full ariadne-align-middle md:ariadne-px-6 lg:ariadne-px-8">
   <div class="ariadne-overflow-hidden ariadne-shadow ariadne-ring-1 ariadne-ring-black ariadne-ring-opacity-5 md:ariadne-rounded-lg">
     <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do |table| %>
       <% if has_header_row? %>

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

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

data/app/components/ariadne/time-ago-component.d.ts

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/components/ariadne/time-ago-component.js

@@ -0,0 +1 @@
+import '@github/time-elements';

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

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/components/ariadne/time_ago_component.js

@@ -0,0 +1 @@
+import '@github/time-elements';

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

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus';
+import type { Instance, Placement } from '@popperjs/core';
+export default class TooltipComponent extends Controller {
+    static targets: string[];
+    readonly triggerTarget: HTMLElement;
+    readonly tooltipTarget: HTMLElement;
+    static values: {
+        placement: {
+            type: StringConstructor;
+            default: string;
+        };
+        offset: {
+            type: ArrayConstructor;
+            default: number[];
+        };
+    };
+    readonly placementValue: Placement;
+    readonly offsetValue: Array<number>;
+    popperInstance: Instance;
+    connect(): void;
+    disconnect(): void;
+    show(): void;
+    hide(): void;
+}