@studiocms/ui 0.1.0 → 0.3.0

package/src/components/Tabs/Tabs.astro

@@ -0,0 +1,376 @@
+---
+import { Icon } from '../../utils';
+import type { StudioCMSColorway } from '../../utils/colors';
+import { generateID } from '../../utils/generateID';
+import type { HeroIconName } from '../../utils/iconType';
+
+interface Tab {
+	icon?: HeroIconName;
+	label: string;
+	color: Exclude<StudioCMSColorway, 'default'>;
+	tabId: string;
+}
+
+/**
+ * The props for the Tabs component.
+ */
+interface Props {
+	/**
+	 * The sync key for the tabs. If provided, the active tab will be synced across all instances of the tabs with the same sync key.
+	 * Additionally, the active tab will be stored session- or local storage depending on the `storage` prop.
+	 */
+	syncKey?: string;
+	/**
+	 * The storage type for the tabs. Defaults to `session`.
+	 */
+	storage?: 'session' | 'persistent';
+	/**
+	 * The variant of the tabs. Defaults to `default`.
+	 */
+	variant?: 'default' | 'starlight';
+	/**
+	 * The alignment of the tabs. Defaults to `left`.
+	 */
+	align?: 'left' | 'center' | 'right';
+}
+
+const extractTabInfoWithRegex = (input: string) => {
+	const tabItemRegex = /<sui-tab-item([^>]*)>/g;
+
+	const attributeRegex = /data-([\w-]+)="([^"]*)"/g;
+
+	const tabs: Tab[] = [];
+	let tabMatch: RegExpExecArray | null;
+
+	// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+	while ((tabMatch = tabItemRegex.exec(input)) !== null) {
+		let attributes: { [key: string]: string } = {};
+
+		let attributeMatch: RegExpExecArray | null;
+
+		if (!tabMatch[1]) continue;
+
+		// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+		while ((attributeMatch = attributeRegex.exec(tabMatch[1])) !== null) {
+			if (!attributeMatch[1] || !attributeMatch[2]) continue;
+
+			if (
+				attributeMatch[1] === 'icon' ||
+				attributeMatch[1] === 'label' ||
+				attributeMatch[1] === 'color'
+			) {
+				attributes[attributeMatch[1]] = attributeMatch[2];
+			}
+
+			if (attributeMatch[1] === 'tab-id') {
+				attributes.tabId = attributeMatch[2];
+			}
+		}
+
+		tabs.push(attributes as unknown as Tab);
+	}
+
+	return tabs;
+};
+
+const markTabAsActive = (tabId: string, html: string): string => {
+	if (!tabId) return html;
+
+	const updatedHtml = html.replace(
+		new RegExp(`(<sui-tab-item[^>]*data-tab-id="${tabId}"[^>]*class=")([^"]*)(")`, 'g'),
+		'$1$2 active$3'
+	);
+
+	return updatedHtml;
+};
+
+const uniqueId = generateID('sui-tabs-container');
+
+const {
+	syncKey: originalSyncKey,
+	storage = 'session',
+	variant = 'default',
+	align = 'left',
+} = Astro.props;
+
+const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
+
+const tabContents = await Astro.slots.render('default');
+const tabs = extractTabInfoWithRegex(tabContents);
+const finalizedTabContents = markTabAsActive(tabs[0]?.tabId || '', tabContents);
+const containerId = generateID('sui-tabs-container');
+---
+
+<div 
+  class="sui-tabs-container"
+  id={containerId}
+  data-sync-key={syncKey}
+  data-unique-id={uniqueId}
+  data-storage-strategy={storage}
+  class:list={[variant, align]}
+>
+  <div class="sui-tabs-list" role="tablist">
+    {tabs.map((tab, i) => (
+      <button 
+        role="tab"
+        class="sui-tab-header"
+        id={syncKey ? `${syncKey}-${i}` : undefined}
+        tabindex={i === 0 ? 0 : -1}
+        data-tab-child={tab.tabId}
+        class:list={[i === 0 && "active", tab.color, syncKey && `${syncKey}:${i}`]}
+      >
+        {tab.icon && (
+          <Icon name={tab.icon} width={24} height={24} />
+        )}
+        <span>{tab.label}</span>
+      </button>
+    ))}
+  </div>
+  <div class="sui-tabs-content">
+    <Fragment set:html={finalizedTabContents} />
+  </div>
+</div>
+<script>
+  const tabContainers = document.querySelectorAll<HTMLDivElement>('.sui-tabs-container');
+
+  for (const tabContainer of tabContainers) {
+    const storage = tabContainer.dataset.storageStrategy!;
+    const syncKey = tabContainer.dataset.syncKey!;
+
+    let storageLayer = storage === 'session' ? sessionStorage : localStorage;
+
+    const constructCustomEvent = (tabIndex: number, uniqueId: string) => {
+      return new CustomEvent(`sui-tab-switch:${syncKey}`, {
+        detail: {
+          tabIndex,
+          uniqueId
+        }
+      });
+    }
+
+    const switchTab = (target: HTMLElement, container: HTMLElement, originatedFromSync = false) => {
+      const activeChildren = container.querySelectorAll<HTMLElement>('.active');
+      
+      for (const child of activeChildren) {
+        child.tabIndex = -1;
+        child.classList.remove('active');
+      }
+
+      const newActiveTab = target as HTMLElement;
+      newActiveTab.classList.add('active');
+      newActiveTab.tabIndex = 0;
+
+      const newActiveTabContentId = newActiveTab.dataset.tabChild;
+      const newActiveTabContent = container.querySelector<HTMLElement>(`sui-tab-item[data-tab-id="${newActiveTabContentId}"]`)!;
+
+      newActiveTabContent.classList.add('active');
+
+      if (syncKey && !originatedFromSync) {
+        const tabIndex = Array.prototype.indexOf.call(newActiveTab.parentElement!.children, newActiveTab);
+        storageLayer.setItem(syncKey, tabIndex.toString());
+
+        document.dispatchEvent(constructCustomEvent(tabIndex, container.dataset.uniqueId!));
+      }
+
+    }
+      
+    const tabHeaders = tabContainer.querySelectorAll<HTMLElement>('.sui-tab-header');
+
+    for (const tab of tabHeaders) {
+      tab.addEventListener('click', (e) => switchTab(e.target as HTMLElement, tabContainer));
+
+      tab.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          const activeTabIndex = Array.prototype.indexOf.call(tab.parentElement!.children, tab);
+          const nextTabIndex = e.key === 'ArrowLeft' ? activeTabIndex - 1 : activeTabIndex + 1;
+          
+
+          if (nextTabIndex >= 0 && nextTabIndex < tab.parentElement!.children.length) {
+            tab.tabIndex = -1;
+
+            const nextTab = tab.parentElement!.children[nextTabIndex]! as HTMLElement;
+
+            nextTab.tabIndex = 0;
+            nextTab.click();
+            nextTab.focus();
+          } else if (nextTabIndex < 0) {
+            tab.tabIndex = -1;
+
+            const lastTab = tab.parentElement!.children[tab.parentElement!.children.length - 1] as HTMLElement;
+
+            lastTab.tabIndex = 0;
+            lastTab.click();
+            lastTab.focus();
+          } else {
+            tab.tabIndex = -1;
+
+            const firstTab = tab.parentElement!.children[0] as HTMLElement;
+
+            firstTab.tabIndex = 0;
+            firstTab.click();
+            firstTab.focus();
+          }
+        }
+      });
+    }
+
+    if (syncKey) {
+      // Retrieve the sync key value from localstorage, set the tab.
+      const activeTabIndex = storageLayer.getItem(syncKey);
+
+      if (activeTabIndex) {
+        const activeTab = tabContainer.querySelector<HTMLElement>(`#${syncKey}-${activeTabIndex}`);
+        
+        if (activeTab) {
+          activeTab.click();
+        }
+      }
+
+      document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
+        const event = e as CustomEvent<{ tabIndex: number, uniqueId: string }>;
+        const { tabIndex, uniqueId } = event.detail;
+
+        if (uniqueId === tabContainer.dataset.uniqueId) return;
+
+        const newTab = tabContainer.querySelector<HTMLElement>(`#${syncKey}-${tabIndex}`)!;
+
+        switchTab(newTab, tabContainer, true);
+      });
+    }
+  }
+</script>
+<style>
+  .sui-tabs-container {
+    width: 100%;
+  }
+
+  .sui-tabs-list {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: visible;
+    position: relative;
+  }
+
+  .default .sui-tabs-list {
+    margin-top: -4px;
+    margin-bottom: calc(2rem - 4px);
+    padding: 4px 4px;
+    margin-left: -4px;
+  }
+
+  .center .sui-tabs-list {
+    justify-content: center;
+  }
+
+  .right .sui-tabs-list {
+    justify-content: flex-end;
+  }
+
+  .sui-tab-header {
+    margin-top: 0 !important;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    cursor: pointer;
+    position: relative;
+    min-width: fit-content;
+  }
+
+  .default .sui-tab-header {
+    border-radius: 0.5rem;
+    height: 40px;
+    padding: 0.5rem 0.75rem;
+    transition: all .15s ease;
+    font-size: 0.875em;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .sui-tab-header * {
+    pointer-events: none;
+  }
+
+  .default .sui-tab-header:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
+  .default .sui-tab-header:hover {
+    background-color: hsla(var(--default-flat-active)) !important;
+  }
+
+  .default .sui-tab-header.active {
+    background-color: hsla(var(--primary-flat-active)) !important;
+  }
+
+  .default .sui-tab-header.success.active {
+    background-color: hsla(var(--success-flat-active)) !important;
+  }
+
+  .default .sui-tab-header.warning.active {
+    background-color: hsla(var(--warning-flat-active)) !important;
+  }
+
+  .default .sui-tab-header.danger.active {
+    background-color: hsla(var(--danger-flat-active)) !important;
+  }
+
+  .starlight .sui-tabs-list {
+    margin-bottom: 1rem;
+    gap: 0;
+  }
+
+  .starlight .sui-tabs-list::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: hsl(var(--border));
+  }
+
+  .starlight .sui-tab-header {
+    padding: 0.25rem 1.25rem;
+    color: hsl(var(--text-muted));
+  }
+
+  .starlight .sui-tab-header.active {
+    font-weight: 600;
+    color: hsl(var(--text-normal));
+  }
+
+  .starlight .sui-tab-header.active::after {
+    content: "";
+    width: 100%;
+    height: 2px;
+    background-color: hsl(var(--primary-base));
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 15;
+  }
+
+  .starlight .sui-tab-header:focus-visible::after {
+    height: calc(100% - 2px);
+    width: calc(100% - 2px);
+    bottom: 1px;
+    left: 1px;
+    border: 2px solid hsl(var(--primary-base));
+    background-color: transparent;
+    outline: 1px solid hsl(var(--text-normal));
+  }
+
+  .default .sui-tab-header.active {
+    background-color: hsla(var(--primary-flat-active)) !important;
+  }
+
+  .sui-tabs-content {
+    width: 100%;
+    margin: 0 !important;
+  }
+</style>

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as TabItem } from './TabItem.astro';
+export { default as Tabs } from './Tabs.astro';

package/src/components/Textarea.astro

@@ -2,15 +2,45 @@
 import type { HTMLAttributes } from 'astro/types';
 import { generateID } from '../utils/generateID';
 
+/**
+ * Props for the textarea component
+ */
 interface Props extends HTMLAttributes<'textarea'> {
+	/**
+	 * The label of the textarea.
+	 */
 	label?: string;
+	/**
+	 * The placeholder of the textarea.
+	 */
 	placeholder?: string;
+	/**
+	 * Whether the textarea is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
+	/**
+	 * Whether the textarea should take up the full width of its container. Defaults to `false`.
+	 */
 	fullWidth?: boolean;
+	/**
+	 * Whether the textarea should take up the full height of its container. Defaults to `false`.
+	 */
 	fullHeight?: boolean;
+	/**
+	 * Whether the textarea should be resizable. Defaults to `false`.
+	 */
 	resize?: boolean;
+	/**
+	 * The name attribute for the textarea. Useful for form submission.
+	 */
 	name?: string;
+	/**
+	 * Whether the textarea is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The default value of the textarea.
+	 */
 	defaultValue?: string;
 }
 

package/src/components/ThemeToggle.astro

@@ -1,8 +1,7 @@
 ---
-import type { ComponentProps } from 'astro/types';
-import Button from './Button.astro';
+import Button, { type Props as ButtonProps } from './Button.astro';
 
-interface Props extends ComponentProps<typeof Button> {}
+interface Props extends ButtonProps {}
 
 const props = Astro.props;
 ---
@@ -26,6 +25,10 @@ const props = Astro.props;
 </script>
 
 <style is:global>
+  #sui-theme-toggle, #sui-theme-toggle * {
+    color: hsl(var(--text-normal));
+  }
+
   #sui-theme-toggle #dark-content, #sui-theme-toggle #light-content {
     display: none;
     width: fit-content;

package/src/components/Toast/Toaster.astro

@@ -1,5 +1,11 @@
 ---
+/**
+ * Props for the Toast component.
+ */
 interface Props {
+	/**
+	 * The position of the toaster. All toasts will originate from this position.
+	 */
 	position?:
 		| 'top-left'
 		| 'top-right'
@@ -7,9 +13,21 @@ interface Props {
 		| 'bottom-left'
 		| 'bottom-right'
 		| 'bottom-center';
+	/**
+	 * The duration of the toast in milliseconds. Defaults to 4000 (4 seconds).
+	 */
 	duration?: number;
+	/**
+	 * Whether the toast has a close button. Defaults to false.
+	 */
 	closeButton?: boolean;
+	/**
+	 * The offset of the toaster from the edge of the screen in pixels. Defaults to 32.
+	 */
 	offset?: number;
+	/**
+	 * The gap between toasts in pixels. Defaults to 8.
+	 */
 	gap?: number;
 }
 
@@ -53,6 +71,65 @@ const {
 
   let activeToasts: string[] = [];
 
+  let lastActiveElement: HTMLElement | null = null;
+
+  const revertFocusBackToLastActiveElement = () => {
+    if (lastActiveElement) {
+      lastActiveElement.focus();
+      lastActiveElement = null;
+    }
+  };
+
+  /**
+   * Callback wrapper that allows for pausing, continuing and clearing a timer. Based on https://stackoverflow.com/a/20745721.
+   * @param callback The callback to be called.
+   * @param delay The delay in milliseconds.
+   */
+  class Timer {
+    private id: NodeJS.Timeout | null;
+    private started: Date | null;
+    private remaining: number;
+    private running: boolean;
+    private callback: () => any;
+
+    constructor(callback: () => any, delay: number) {
+      this.id = null;
+      this.started = null;
+      this.remaining = delay;
+      this.running = false;
+      this.callback = callback;
+
+      this.start();
+    }
+
+    start = () => {
+      this.running = true;
+      this.started = new Date();
+      this.id = setTimeout(this.callback, this.remaining);
+    };
+
+    pause = () => {
+      if (!this.id || !this.started || !this.running) return;
+
+      this.running = false;
+      clearTimeout(this.id);
+      this.remaining -= new Date().getTime() - this.started.getTime();
+    };
+
+    getTimeLeft = () => {
+      if (this.running) {
+        this.pause();
+        this.start();
+      }
+
+      return this.remaining;
+    };
+
+    getStateRunning = () => {
+      return this.running;
+    };
+  }
+
   function removeToast(toastID: string) {
     const toastEl = document.getElementById(toastID);
 
@@ -70,7 +147,11 @@ const {
     
     const toastContainer = document.createElement('div');
     const toastID = generateID('toast');
+    toastContainer.tabIndex = 0;
+    toastContainer.ariaLive = 'polite';
+    toastContainer.role = 'alert';
     toastContainer.id = toastID;
+    toastContainer.ariaLabel = `${props.title} (F8)`;
     toastContainer.classList.add('sui-toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
 
     const toastHeader = document.createElement('div');
@@ -106,6 +187,8 @@ const {
       closeIconContainer.classList.add('close-icon-container');
       closeIconContainer.addEventListener('click', () => removeToast(toastID));
       closeIconContainer.innerHTML = getIconString('x-mark', 'close-icon', 24, 24);
+      closeIconContainer.tabIndex = 0;
+      closeIconContainer.ariaLabel = 'Close toast';
 
       toastHeader.appendChild(closeIconContainer);
     }
@@ -133,11 +216,43 @@ const {
     activeToasts.push(toastID);
 
     if (!props.persistent) {
-      setTimeout(
+      let timer = new Timer(
         () => removeToast(toastID),
         props.duration || (toastParent.dataset.duration ? parseInt(toastParent.dataset.duration) : 4000)
       );
+
+      const timerPauseWrapper = () => {
+        toastContainer.classList.add('paused');
+        timer.pause();
+      };
+
+      const timerStartWrapper = () => {
+        toastContainer.classList.remove('paused');
+        timer.start();
+      };
+
+      toastContainer.addEventListener('mouseenter', timerPauseWrapper);
+      toastContainer.addEventListener('focusin', timerPauseWrapper);
+
+      toastContainer.addEventListener('mouseleave', timerStartWrapper);
+      toastContainer.addEventListener('focusout', () => {
+        let focusedOrHasFocused = toastContainer.matches(':focus-within');
+
+        if (!focusedOrHasFocused) {
+          revertFocusBackToLastActiveElement();
+        }
+
+        timerStartWrapper();
+      });
     }
+
+    toastContainer.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        removeToast(toastID);
+        revertFocusBackToLastActiveElement();
+      }
+    });
   }
 
   document.addEventListener('createtoast', (e) => {
@@ -147,6 +262,21 @@ const {
     
     createToast(event.detail);
   });
+
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'F8') {
+      e.preventDefault();
+
+      const oldestToast = activeToasts[0];
+
+      if (oldestToast) {
+        lastActiveElement = document.activeElement as HTMLElement;
+
+        const toastEl = document.getElementById(oldestToast);
+        if (toastEl) toastEl?.focus();
+      }
+    }
+  });
 </script>
 <style>
   #sui-toaster {
@@ -235,6 +365,10 @@ const {
     animation: toast-progress forwards linear;
   }
 
+  .sui-toast-container.paused .sui-toast-progress-bar {
+    animation-play-state: paused;
+  }
+
   .sui-toast-container.success .sui-toast-progress-bar {
     background-color: hsl(var(--success-base));
   }
@@ -262,6 +396,11 @@ const {
     background-color: hsl(var(--default-base));
   }
 
+  .close-icon-container:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
   .sui-toast-container.closing {
     animation: toast-closing .25s ease forwards;
   }