@studiocms/ui 0.0.1

package/src/components/Modal/modal.ts

@@ -0,0 +1,129 @@
+class ModalHelper {
+	public element: HTMLDialogElement;
+	public cancelButton: HTMLButtonElement | undefined;
+	public confirmButton: HTMLButtonElement | undefined;
+
+	private isForm = false;
+	private modalForm: HTMLFormElement;
+
+	constructor(id: string, triggerID?: string) {
+		const element = document.getElementById(id) as HTMLDialogElement;
+
+		if (!element) {
+			throw new Error(`No modal with ID ${id} found.`);
+		}
+
+		this.element = element as HTMLDialogElement;
+		this.modalForm = document.getElementById(`${id}-form-element`) as HTMLFormElement;
+
+		const isDismissable = this.element.dataset.dismissable === 'true';
+		const isForm = this.element.dataset.form === 'true';
+
+		if (isDismissable) {
+			this.addDismissiveClickListener();
+		}
+
+		if (isForm) this.isForm = true;
+
+		this.addButtonListeners(id, isDismissable);
+
+		if (triggerID) {
+			this.bindTrigger(triggerID);
+		}
+	}
+
+	private addButtonListeners = (id: string, dismissable: boolean) => {
+		if (dismissable || !this.element.dataset.buttons) {
+			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
+			xMarkButton.addEventListener('click', this.hide);
+		}
+
+		if (!this.element.dataset.buttons) return;
+
+		const usedButtons = this.element.dataset.buttons.split(';');
+
+		if (usedButtons.includes('cancel')) {
+			this.cancelButton = document.getElementById(`${id}-btn-cancel`) as HTMLButtonElement;
+			this.cancelButton.addEventListener('click', this.hide);
+		}
+
+		if (usedButtons.includes('confirm')) {
+			this.confirmButton = document.getElementById(`${id}-btn-confirm`) as HTMLButtonElement;
+			this.confirmButton.addEventListener('click', this.hide);
+		}
+	};
+
+	private addDismissiveClickListener = () => {
+		this.element.addEventListener('click', (e: MouseEvent) => {
+			if (!e.target) return;
+
+			const { left, right, top, bottom } = this.element.getBoundingClientRect();
+
+			const clickWithinModalBox =
+				e.clientX < right && e.clientX > left && e.clientY < bottom && e.clientY > top;
+
+			if (!clickWithinModalBox) {
+				this.element.close();
+			}
+		});
+	};
+
+	public show = () => {
+		this.element.showModal();
+	};
+
+	public hide = () => {
+		this.element.close();
+	};
+
+	public bindTrigger = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No element with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.show);
+	};
+
+	public registerCancelCallback = (func: () => void) => {
+		if (!this.cancelButton) {
+			throw new Error('Unable to register cancel callback without a cancel button.');
+		}
+
+		this.cancelButton.removeEventListener('click', this.hide);
+
+		this.cancelButton.addEventListener('click', () => {
+			func();
+			this.hide();
+		});
+	};
+
+	public registerConfirmCallback = (func: (data?: FormData | undefined) => void) => {
+		if (!this.confirmButton) {
+			throw new Error('Unable to register cancel callback without a confirmation button.');
+		}
+
+		this.confirmButton.removeEventListener('click', this.hide);
+
+		if (this.isForm) {
+			this.modalForm.addEventListener('submit', (e) => {
+				e.preventDefault();
+
+				const formData = new FormData(this.modalForm);
+
+				func(formData);
+				this.hide();
+
+				setTimeout(() => this.modalForm.reset(), 450);
+			});
+		} else {
+			this.confirmButton.addEventListener('click', () => {
+				func();
+				this.hide();
+			});
+		}
+	};
+}
+
+export { ModalHelper };

package/src/components/RadioGroup.astro

@@ -0,0 +1,175 @@
+---
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+interface Option {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+interface Props {
+	label: string;
+	color?: StudioCMSColorway;
+	defaultValue?: string;
+	options: Option[];
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+	horizontal?: boolean;
+	class?: string;
+};
+
+const {
+	label,
+	color,
+	defaultValue,
+	options,
+	disabled,
+	name = generateID('radio'),
+	isRequired,
+	horizontal,
+	class: className,
+} = Astro.props;
+---
+
+<div 
+  class="radio-container"
+  class:list={[
+    disabled && "disabled",
+    horizontal && "horizontal",
+    color,
+    className
+  ]}
+>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <div class="radio-inputs">
+    {options.map(({ label, value, disabled: individuallyDisabled }) => (
+      <label
+        for={value}
+        class="radio-label"
+        class:list={[ individuallyDisabled && "disabled" ]}
+      >
+        <div class="radio-box-container">
+          <div class="radio-box" />
+        </div>
+        <input 
+          class="radio-toggle" 
+          type="radio" 
+          value={value} 
+          id={value} 
+          name={name} 
+          checked={value === defaultValue} 
+          disabled={disabled || individuallyDisabled}
+          required={isRequired}
+        />
+        <span>{label}</span>
+      </label>
+    ))}
+  </div>
+</div>
+<style>
+  .radio-container {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .radio-container.disabled {
+    opacity: 0.5;
+    color: hsl(var(--text-muted));
+  }
+
+  .radio-label.disabled {
+    opacity: 0.5;
+    color: hsl(var(--text-muted));
+    pointer-events: none;
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .radio-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+  }
+
+  .radio-container.horizontal .radio-inputs {
+    flex-direction: row;
+  }
+
+  .radio-label {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    position: relative;
+    align-items: center;
+  }
+
+  .radio-label:hover .radio-box {
+    outline-color: hsl(var(--default-hover));
+  }
+
+  .radio-container:not(.disabled) .radio-label:active .radio-box {
+    outline-color: hsl(var(--default-active));
+    scale: 0.9;
+  }
+
+  .radio-label:has(.radio-toggle:checked) .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 {
+    background-color: hsl(var(--primary-base));
+    outline-color: hsl(var(--primary-base));
+  }
+
+  .radio-container.success .radio-label:has(.radio-toggle:checked) .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 {
+    background-color: hsl(var(--warning-base));
+    outline-color: hsl(var(--warning-base));
+  }
+
+  .radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--danger-base));
+    outline-color: hsl(var(--danger-base));
+  }
+
+  .radio-box-container {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .radio-box {
+    width: 12px;
+    height: 12px;
+    border-radius: 20px;
+    outline: 1px solid hsl(var(--default-base));
+    outline-offset: 4px;
+    transition: all .15s ease;
+  }
+
+  .radio-toggle {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+    position: absolute;
+  }
+</style>

package/src/components/Row.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+	alignCenter?: boolean;
+	gapSize?: 'sm' | 'md' | 'lg';
+};
+
+const { alignCenter, gapSize = 'md', ...props } = Astro.props;
+---
+
+<div class="row" class:list={[alignCenter && "align", gapSize]} {...props}>
+  <slot />
+</div>
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		flex-wrap: wrap;
+	}
+
+	.row.align {
+		align-items: center;
+	}
+
+	.row.sm {
+		gap: .5rem;
+	}
+
+	.row.md {
+		gap: 1rem;
+	}
+
+	.row.lg {
+		gap: 2rem;
+	}
+</style>