@studiocms/ui 0.0.1 → 0.3.0

package/src/components/Modal/modal.ts

@@ -1,11 +1,16 @@
 class ModalHelper {
-	public element: HTMLDialogElement;
-	public cancelButton: HTMLButtonElement | undefined;
-	public confirmButton: HTMLButtonElement | undefined;
+	private element: HTMLDialogElement;
+	private cancelButton: HTMLButtonElement | undefined;
+	private confirmButton: HTMLButtonElement | undefined;
 
 	private isForm = false;
 	private modalForm: HTMLFormElement;
 
+	/**
+	 * A helper to manage modals.
+	 * @param id The ID of the modal.
+	 * @param triggerID The ID of the element that should trigger the modal.
+	 */
 	constructor(id: string, triggerID?: string) {
 		const element = document.getElementById(id) as HTMLDialogElement;
 
@@ -32,27 +37,36 @@ class ModalHelper {
 		}
 	}
 
+	/**
+	 * A helper function which adds event listeners to the modal buttons to close the modal when clicked.
+	 * @param id The ID of the modal.
+	 * @param dismissable Whether the modal is dismissable.
+	 */
 	private addButtonListeners = (id: string, dismissable: boolean) => {
-		if (dismissable || !this.element.dataset.buttons) {
+		if (
+			dismissable ||
+			(!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton)
+		) {
 			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
 			xMarkButton.addEventListener('click', this.hide);
 		}
 
-		if (!this.element.dataset.buttons) return;
+		if (!!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton) return;
 
-		const usedButtons = this.element.dataset.buttons.split(';');
-
-		if (usedButtons.includes('cancel')) {
+		if (this.element.dataset.hasCancelButton) {
 			this.cancelButton = document.getElementById(`${id}-btn-cancel`) as HTMLButtonElement;
 			this.cancelButton.addEventListener('click', this.hide);
 		}
 
-		if (usedButtons.includes('confirm')) {
+		if (this.element.dataset.hasActionButton) {
 			this.confirmButton = document.getElementById(`${id}-btn-confirm`) as HTMLButtonElement;
 			this.confirmButton.addEventListener('click', this.hide);
 		}
 	};
 
+	/**
+	 * A helper function to close the modal when the user clicks outside of it.
+	 */
 	private addDismissiveClickListener = () => {
 		this.element.addEventListener('click', (e: MouseEvent) => {
 			if (!e.target) return;
@@ -68,14 +82,25 @@ class ModalHelper {
 		});
 	};
 
+	/**
+	 * A function to show the modal.
+	 */
 	public show = () => {
 		this.element.showModal();
+		this.element.focus();
 	};
 
+	/**
+	 * A function to hide the modal.
+	 */
 	public hide = () => {
 		this.element.close();
 	};
 
+	/**
+	 * A function to add another trigger to show the modal with.
+	 * @param elementID The ID of the element that should trigger the modal when clicked.
+	 */
 	public bindTrigger = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -86,6 +111,10 @@ class ModalHelper {
 		element.addEventListener('click', this.show);
 	};
 
+	/**
+	 * Registers a callback for the cancel button.
+	 * @param func The callback function.
+	 */
 	public registerCancelCallback = (func: () => void) => {
 		if (!this.cancelButton) {
 			throw new Error('Unable to register cancel callback without a cancel button.');
@@ -99,6 +128,11 @@ class ModalHelper {
 		});
 	};
 
+	/**
+	 * Registers a callback for the confirm button.
+	 * @param func The callback function. If the modal is a form, the function will be called with
+	 * the form data as the first argument.
+	 */
 	public registerConfirmCallback = (func: (data?: FormData | undefined) => void) => {
 		if (!this.confirmButton) {
 			throw new Error('Unable to register cancel callback without a confirmation button.');

package/src/components/RadioGroup.astro

@@ -2,39 +2,81 @@
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the RadioGroup component.
+ */
 interface Option {
+	/**
+	 * The label of the option.
+	 */
 	label: string;
+	/**
+	 * The value of the option.
+	 */
 	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
 	disabled?: boolean;
-};
+}
 
+/**
+ * The props for the RadioGroup component.
+ */
 interface Props {
+	/**
+	 * The label of the radio group.
+	 */
 	label: string;
+	/**
+	 * The color of the radio group. Defaults to `default`.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * The default value of the radio group. Needs to be one of the values in the options.
+	 */
 	defaultValue?: string;
+	/**
+	 * The options to display in the radio group.
+	 */
 	options: Option[];
+	/**
+	 * Whether the radio group is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The name of the radio group.
+	 */
 	name?: string;
+	/**
+	 * Whether the radio group is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
+	/**
+	 * Whether the radio group is horizontal. Defaults to `false`.
+	 */
 	horizontal?: boolean;
+	/**
+	 * Additional classes to apply to the radio group.
+	 */
 	class?: string;
-};
+}
 
 const {
 	label,
-	color,
+	color = 'default',
 	defaultValue,
 	options,
-	disabled,
+	disabled = false,
+	isRequired = false,
+	horizontal = false,
 	name = generateID('radio'),
-	isRequired,
-	horizontal,
 	class: className,
 } = Astro.props;
 ---
 
 <div 
-  class="radio-container"
+  class="sui-radio-container"
   class:list={[
     disabled && "disabled",
     horizontal && "horizontal",
@@ -45,18 +87,24 @@ const {
   <span>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
-  <div class="radio-inputs">
-    {options.map(({ label, value, disabled: individuallyDisabled }) => (
+  <div class="sui-radio-inputs" role="radiogroup">
+    {options.map(({ label, value, disabled: individuallyDisabled }, i) => (
       <label
         for={value}
-        class="radio-label"
+        class="sui-radio-label"
         class:list={[ individuallyDisabled && "disabled" ]}
       >
-        <div class="radio-box-container">
-          <div class="radio-box" />
+        <div class="sui-radio-box-container">
+          <div 
+            class="sui-radio-box" 
+            role="radio" 
+            tabindex={i === 0 ? 0 : -1} 
+            aria-checked={value === defaultValue}
+            aria-label={label}
+          />
         </div>
         <input 
-          class="radio-toggle" 
+          class="sui-radio-toggle"
           type="radio" 
           value={value} 
           id={value} 
@@ -70,19 +118,91 @@ const {
     ))}
   </div>
 </div>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-radio-container');
+
+  for (const element of elements) {
+    if (element.dataset.initialized) continue;
+    
+    element.dataset.initialized = 'true';
+
+    const radioBoxes = element.querySelectorAll<HTMLDivElement>('.sui-radio-box');
+
+    let i = 0;
+
+    for (const radioBox of radioBoxes) {
+      radioBox.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === " ") {
+          e.preventDefault();
+
+          const input = (e.target as HTMLDivElement).parentElement!.parentElement!.querySelector<HTMLInputElement>('.sui-radio-toggle')!;
+
+          if (input.disabled) return;
+
+          input.checked = true;
+        }
+
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+          e.preventDefault();
+
+          let nextRadioBox: HTMLDivElement | undefined;
+
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
+          });
+
+          if (!nextRadioBox) return;
+
+          radioBox.tabIndex = -1;
+          nextRadioBox.tabIndex = 0;
+          nextRadioBox.focus();
+          nextRadioBox.click();
+        }
+
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+          e.preventDefault();
+
+          let previousRadioBox: HTMLDivElement | undefined;
+
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
+          });
+
+          if (!previousRadioBox) return;
+
+          radioBox.tabIndex = -1;
+          previousRadioBox.tabIndex = 0;
+          previousRadioBox.focus();
+          previousRadioBox.click();
+        }
+      });
+
+      i++;
+    }
+    element.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return;
+
+      const checkbox = element.querySelector<HTMLInputElement>('.sui-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+</script>
 <style>
-  .radio-container {
+  .sui-radio-container {
     display: flex;
     flex-direction: column;
     gap: .5rem;
   }
 
-  .radio-container.disabled {
+  .sui-radio-container.disabled {
     opacity: 0.5;
     color: hsl(var(--text-muted));
   }
 
-  .radio-label.disabled {
+  .sui-radio-label.disabled {
     opacity: 0.5;
     color: hsl(var(--text-muted));
     pointer-events: none;
@@ -93,17 +213,17 @@ const {
     font-weight: 700;
   }
 
-  .radio-inputs {
+  .sui-radio-inputs {
     display: flex;
     flex-direction: column;
     gap: .75rem;
   }
 
-  .radio-container.horizontal .radio-inputs {
+  .sui-radio-container.horizontal .sui-radio-inputs {
     flex-direction: row;
   }
 
-  .radio-label {
+  .sui-radio-label {
     display: flex;
     flex-direction: row;
     gap: .5rem;
@@ -111,41 +231,41 @@ const {
     align-items: center;
   }
 
-  .radio-label:hover .radio-box {
+  .sui-radio-label:hover .sui-radio-box {
     outline-color: hsl(var(--default-hover));
   }
 
-  .radio-container:not(.disabled) .radio-label:active .radio-box {
+  .sui-radio-container:not(.disabled) .sui-radio-label:active .sui-radio-box {
     outline-color: hsl(var(--default-active));
     scale: 0.9;
   }
 
-  .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--text-normal));
     outline-color: hsl(var(--text-normal));
   }
 
-  .radio-container.primary .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-container.primary .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--primary-base));
     outline-color: hsl(var(--primary-base));
   }
 
-  .radio-container.success .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-container.success .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--success-base));
     outline-color: hsl(var(--success-base));
   }
 
-  .radio-container.warning .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-container.warning .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--warning-base));
     outline-color: hsl(var(--warning-base));
   }
 
-  .radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-container.danger .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--danger-base));
     outline-color: hsl(var(--danger-base));
   }
 
-  .radio-box-container {
+  .sui-radio-box-container {
     width: 20px;
     height: 20px;
     display: flex;
@@ -155,7 +275,7 @@ const {
     cursor: pointer;
   }
 
-  .radio-box {
+  .sui-radio-box {
     width: 12px;
     height: 12px;
     border-radius: 20px;
@@ -164,7 +284,11 @@ const {
     transition: all .15s ease;
   }
 
-  .radio-toggle {
+  .sui-radio-box:focus-visible {
+    outline-color: hsl(var(--text-normal)) !important;
+  }
+
+  .sui-radio-toggle {
     width: 0;
     height: 0;
     visibility: hidden;

package/src/components/Row.astro

@@ -1,38 +1,47 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
+/**
+ * The props for the row component.
+ */
 interface Props extends HTMLAttributes<'div'> {
+	/**
+	 * Whether the row should be aligned to the center. Defaults to `false`.
+	 */
 	alignCenter?: boolean;
+	/**
+	 * The size of the gap between the children. Defaults to `md`.
+	 */
 	gapSize?: 'sm' | 'md' | 'lg';
-};
+}
 
 const { alignCenter, gapSize = 'md', ...props } = Astro.props;
 ---
 
-<div class="row" class:list={[alignCenter && "align", gapSize]} {...props}>
+<div class="sui-row" class:list={[alignCenter && "align", gapSize]} {...props}>
   <slot />
 </div>
 <style>
-	.row {
+	.sui-row {
 		display: flex;
 		flex-direction: row;
 		position: relative;
 		flex-wrap: wrap;
 	}
 
-	.row.align {
+	.sui-row.align {
 		align-items: center;
 	}
 
-	.row.sm {
+	.sui-row.sm {
 		gap: .5rem;
 	}
 
-	.row.md {
+	.sui-row.md {
 		gap: 1rem;
 	}
 
-	.row.lg {
+	.sui-row.lg {
 		gap: 2rem;
 	}
 </style>