@studiocms/ui 0.0.1

package/src/components/Dropdown/Dropdown.astro

@@ -0,0 +1,253 @@
+---
+import Icon from '../../utils/Icon.astro';
+import type { StudioCMSColorway } from '../../utils/colors';
+import type { HeroIconName } from '../../utils/iconType';
+
+interface Option {
+	label: string;
+	value: string;
+	disabled?: boolean;
+	color?: StudioCMSColorway;
+  icon?: HeroIconName;
+  href?: string;
+};
+
+interface Props {
+	options: Option[];
+	disabled?: boolean;
+	id: string;
+	align?: 'start' | 'center' | 'end';
+	triggerOn?: 'left' | 'right' | 'both';
+  offset?: number;
+};
+
+const { options, disabled = false, align = 'center', id, triggerOn = 'left', offset = 0 } = Astro.props;
+---
+<div 
+  class="dropdown-container"
+  class:list={[disabled && 'disabled']}
+  data-align={align}
+  id={`${id}-container`}
+  data-trigger={triggerOn}
+  transition:persist transition:persist-props
+>
+  <div class="dropdown-toggle" id={`${id}-toggle-btn`}>
+    <slot />
+  </div>
+  <ul class="dropdown above" class:list={[align]} role="listbox" id={`${id}-dropdown`} transition:persist transition:persist-props>
+    {options.map(({ value, disabled, color, label, icon, href }) => (
+      <li
+        class="dropdown-option"
+        role="option"
+        data-value={value}
+        class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
+      >
+        {icon && (
+          <Icon width={24} height={24} name={icon} />
+        )}
+        {href ? (
+          <a href={href} class="dropdown-link">{label}</a>
+        ) : (
+          <span>{label}</span>
+        )}
+      </li>
+    ))}
+  </ul>
+</div>
+<style define:vars={{ offset: `${offset}px` }}>
+  .dropdown-toggle {
+    width: fit-content;
+  }
+
+  .dropdown-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+  }
+
+  .dropdown {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    border-radius: .5rem;
+    background-color: hsl(var(--background-step-2));
+    overflow: hidden;
+    left: 0;
+    z-index: 90;
+    min-width: 200px;
+    max-width: min-content;
+
+    height: 0;
+    border: none;
+    pointer-events: none;
+    user-select: none;
+
+    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  }
+
+  @keyframes pop-up {
+    0% {
+      scale: 0.9;
+      opacity: 0;
+    }
+
+    100% {
+      scale: 1;
+      opacity: 1;
+      user-select: all;
+    }
+  }
+
+  @keyframes pop-down {
+    0% {
+      scale: 1;
+      height: auto;
+      border: initial;
+      pointer-events: all;
+      top: auto;
+      bottom: auto;
+      border: 1px solid hsl(var(--border));
+      opacity: 1;
+      user-select: all;
+    }
+
+    99.9999% {
+      scale: 0.9;
+      height: auto;
+      border: initial;
+      pointer-events: all;
+      bottom: initial;
+      top: auto;
+      bottom: auto;
+      border: 1px solid hsl(var(--border));
+      opacity: 0;
+    }
+
+    100% {
+      height: 0;
+      border: none;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  .dropdown.initialized {
+    animation: pop-down .15s ease forwards;
+  }
+
+  .dropdown.initialized.active {
+    display: flex;
+    border: 1px solid hsl(var(--border));
+    height: auto;
+    pointer-events: all;
+
+    animation: pop-up .15s ease forwards;
+  }
+
+  .dropdown.initialized.below {
+    top: calc(100% + .25rem + var(--offset)) !important;
+    bottom: auto;
+
+    transform-origin: top center;
+  }
+
+  .dropdown.below.start {
+    transform-origin: top left;
+  }
+
+  .dropdown.below.end {
+    transform-origin: top right;
+  }
+
+  .dropdown.above {
+    top: auto;
+    bottom: calc(100% + .25rem + var(--offset)) !important;
+    transform-origin: bottom center;
+  }
+
+  .dropdown.above.start {
+    transform-origin: bottom left;
+  }
+
+  .dropdown.above.end {
+    transform-origin: bottom right;
+  }
+
+  .dropdown-option {
+    padding: .5rem .75rem;
+    cursor: pointer;
+    font-size: .975em;
+    transition: all .15s ease;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    align-items: center;
+    width: 100%;
+    white-space: normal;
+  }
+
+  .dropdown-option:hover {
+    background-color: hsl(var(--background-step-3));
+  }
+
+  .dropdown-option.has-href {
+    padding: 0;
+  }
+
+  .dropdown-link {
+    padding: .5rem .75rem;
+    width: 100%;
+  }
+
+  .dropdown-option.primary {
+    color: hsl(var(--primary-base));
+  }
+
+  .dropdown-option.primary:hover {
+    background-color: hsl(var(--primary-base));
+    color: hsl(var(--text-inverted));
+  }
+
+  .dropdown-option.success {
+    color: hsl(var(--success-base));
+  }
+
+  .dropdown-option.success:hover {
+    background-color: hsl(var(--success-base));
+    color: hsl(var(--text-dark));
+  }
+
+  .dropdown-option.warning {
+    color: hsl(var(--warning-base));
+  }
+
+  .dropdown-option.warning:hover {
+    background-color: hsl(var(--warning-base));
+    color: hsl(var(--text-dark));
+  }
+
+  .dropdown-option.danger {
+    color: hsl(var(--danger-base));
+  }
+
+  .dropdown-option.danger:hover {
+    background-color: hsl(var(--danger-base));
+    color: hsl(var(--text-light));
+  }
+
+  .dropdown-option.disabled {
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .dropdown-option.end {
+    justify-content: space-between;
+  }
+
+  .dropdown-option.has-icon {
+    padding-left: .5rem;
+  }
+</style>

package/src/components/Dropdown/dropdown.ts

@@ -0,0 +1,170 @@
+class DropdownHelper {
+	container: HTMLDivElement;
+	toggleEl: HTMLDivElement;
+	dropdown: HTMLUListElement;
+
+	alignment: 'start' | 'center' | 'end';
+	triggerOn: 'left' | 'right' | 'both';
+	active = false;
+	fullWidth = false;
+
+	constructor(id: string, fullWidth?: boolean) {
+		this.container = document.getElementById(`${id}-container`) as HTMLDivElement;
+
+		if (!this.container) {
+			throw new Error(`Unable to find dropdown with ID ${id}.`);
+		}
+
+		this.alignment = this.container.dataset.align as 'start' | 'center' | 'end';
+		this.triggerOn = this.container.dataset.trigger as 'left' | 'right' | 'both';
+
+		this.toggleEl = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
+		this.dropdown = document.getElementById(`${id}-dropdown`) as HTMLUListElement;
+
+		if (this.triggerOn === 'left') {
+			this.toggleEl.addEventListener('click', this.toggle);
+		} else if (this.triggerOn === 'both') {
+			this.toggleEl.addEventListener('click', this.toggle);
+			this.toggleEl.addEventListener('contextmenu', (e) => {
+				e.preventDefault();
+				this.toggle();
+			});
+		} else {
+			this.toggleEl.addEventListener('contextmenu', (e) => {
+				e.preventDefault();
+				this.toggle();
+			});
+		}
+
+		if (fullWidth) this.fullWidth = true;
+
+		window.addEventListener('scroll', this.hide);
+		document.addEventListener('astro:before-preparation', () => {
+			this.dropdown.classList.remove('initialized');
+		});
+
+		this.hideOnClickOutside(this.container);
+
+		this.initialOptClickRegistration();
+	}
+
+	public registerClickCallback = (func: (value: string) => void) => {
+		const dropdownOpts = this.dropdown.querySelectorAll('li');
+
+		for (const opt of dropdownOpts) {
+			opt.removeEventListener('click', this.hide);
+
+			opt.addEventListener('click', () => {
+				func(opt.dataset.value || '');
+				this.hide();
+			});
+		}
+	};
+
+	private initialOptClickRegistration = () => {
+		const dropdownOpts = this.dropdown.querySelectorAll('li');
+
+		for (const opt of dropdownOpts) {
+			opt.addEventListener('click', this.hide);
+		}
+	};
+
+	public toggle = () => {
+		if (this.active) {
+			this.hide();
+			return;
+		}
+
+		this.show();
+	};
+
+	public hide = () => {
+		this.dropdown.classList.remove('active');
+		this.active = false;
+
+		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
+	};
+
+	public show = () => {
+		const isMobile = window.matchMedia('screen and (max-width: 840px)').matches;
+
+		const {
+			bottom,
+			left,
+			right,
+			width: parentWidth,
+			x,
+			y,
+			height,
+		} = this.toggleEl.getBoundingClientRect();
+		const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
+
+		const optionHeight = 43.28;
+		const totalBorderSize = 2;
+		const margin = 4;
+
+		const dropdownHeight = this.dropdown.children.length * optionHeight + totalBorderSize + margin;
+
+		const CustomRect = {
+			top: bottom + margin,
+			left,
+			right,
+			bottom: bottom + margin + dropdownHeight,
+			width: isMobile || this.fullWidth ? parentWidth : dropdownWidth, // Account for scaling of animation
+			height: dropdownHeight,
+			x,
+			y: y + height + margin,
+		};
+
+		this.active = true;
+
+		if (isMobile || this.fullWidth) {
+			this.dropdown.style.maxWidth = `${parentWidth}px`;
+			this.dropdown.style.minWidth = 'unset';
+			this.dropdown.style.width = `${parentWidth}px`;
+			this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+		} else {
+			if (this.alignment === 'end') {
+				this.dropdown.style.left = `calc(${parentWidth}px - ${CustomRect.width}px)`;
+			}
+
+			if (this.alignment === 'center') {
+				this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+			}
+		}
+
+		if (!this.dropdown.classList.contains('initialized')) {
+			this.dropdown.classList.add('initialized');
+		}
+
+		if (
+			CustomRect.top >= 0 &&
+			CustomRect.left >= 0 &&
+			CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+			CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
+		) {
+			this.dropdown.classList.add('active', 'below');
+		} else {
+			this.dropdown.classList.add('active', 'above');
+		}
+	};
+
+	private hideOnClickOutside = (element: HTMLElement) => {
+		const outsideClickListener = (event: MouseEvent) => {
+			if (!event.target) return;
+
+			if (!element.contains(event.target as Node) && isVisible(element) && this.active === true) {
+				// or use: event.target.closest(selector) === null
+				this.hide();
+			}
+		};
+
+		document.addEventListener('click', outsideClickListener);
+	};
+}
+
+export { DropdownHelper };
+
+// source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+const isVisible = (elem: HTMLElement) =>
+	!!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);

package/src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown.astro';
+export { DropdownHelper } from './dropdown';

package/src/components/Input.astro

@@ -0,0 +1,93 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { generateID } from '../utils/generateID';
+
+interface Props extends HTMLAttributes<'input'> {
+	label?: string;
+	type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+	placeholder?: string;
+	isRequired?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+	class?: string;
+};
+
+const {
+	label,
+	placeholder,
+	name = generateID('input'),
+	type = 'text',
+	defaultValue,
+	isRequired = false,
+	disabled = false,
+	class: className,
+	...props
+} = Astro.props;
+---
+
+<label for={name} class="input-label" class:list={[disabled && "disabled"]}>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <input
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    type={type}
+    class="input"
+		class:list={[className]}
+    required={isRequired}
+    disabled={disabled}
+    value={defaultValue}
+		{...props}
+  />
+</label>
+<style>
+	.input-label {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: .25rem;
+		margin-top: .5rem;
+	}
+
+	.input-label.disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		color: hsl(var(--text-muted));
+	}
+
+	.label {
+		font-size: 14px;
+	}
+
+	.input {
+		padding: .5rem 1rem;
+		border-radius: 8px;
+		border: 1px solid hsl(var(--border));
+		background: hsl(var(--background-step-2));
+		color: hsl(var(--text-normal));
+		transition: all .15s ease;
+	}
+
+	.input:hover {
+		background: hsl(var(--background-step-3));
+	}
+
+	.input:active,
+	.input:focus {
+		border: 1px solid hsl(var(--primary-base));
+		outline: none;
+		background: hsl(var(--background-step-2));
+	}
+
+	.disabled .input:active {
+		border: 1px solid hsl(var(--border));
+	}
+
+	.req-star {
+		color: hsl(var(--danger-base));
+		font-weight: 700;
+	}
+</style>

package/src/components/Modal/Modal.astro

@@ -0,0 +1,164 @@
+---
+import Icon from '../../utils/Icon.astro';
+import Button from '../Button.astro';
+
+type ModalButton = 'cancel' | 'confirm';
+
+interface Props {
+	id: string;
+	size?: 'sm' | 'md' | 'lg';
+	dismissable?: boolean;
+	buttons?: ModalButton[];
+	isForm?: boolean;
+};
+
+const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = Astro.props;
+---
+<!-- Should: Be centered on mobile, scroll happens inside, blur bg -->
+<dialog
+  popover
+  id={id}
+  data-dismissable={`${dismissable}`}
+  data-buttons={buttons.join(";")}
+  class="modal"
+  class:list={[size]}
+  data-form={`${isForm}`}
+>
+  <div class="modal-header">
+    <slot name="header" />
+    {(dismissable || buttons.length === 0) && (
+      <button class="x-mark-container" id={`${id}-btn-x`}>
+        <Icon name="x-mark" width={24} height={24} class={'dismiss-icon'} />
+      </button>
+    )}
+  </div>
+  <form id={`${id}-form-element`}>
+    <div class="modal-body">
+      <slot />
+    </div>
+    <div class="modal-footer">
+      {buttons.includes('cancel') && (
+        <Button id={`${id}-btn-cancel`} color='danger' variant='flat' type={isForm ? 'reset' : 'button'}>
+          Cancel
+        </Button>
+      )}
+      {buttons.includes('confirm') && (
+        <Button id={`${id}-btn-confirm`} type={'submit'} color='primary' variant='solid' type={isForm ? 'submit' : 'button'}>
+          Confirm
+        </Button>
+      )}
+    </div>
+  </form>
+</dialog>
+<style>
+  .modal {
+    border: 1px solid hsl(var(--border));
+    border-radius: .5rem;
+    padding: 1.5rem;
+    box-shadow: 0px 6px 8px hsl(var(--shadow));
+    animation: hide .25s ease;
+    overflow: visible;
+    margin: auto;
+  }
+
+  .modal.sm {
+    width: 384px;
+  }
+
+  .modal.md {
+    width: 448px;
+  }
+
+  .modal.lg {
+    width: 608px;
+  }
+
+  .modal[open] {
+    animation: show .25s ease-in-out;
+  }
+
+  html:has(.modal[open]),
+  body:has(.modal[open]) {
+    overflow: hidden;
+  }
+
+  .modal[open]::backdrop {
+    background-color: rgba(0, 0, 0, 0.75);
+    animation: backdrop .3s ease-in-out forwards;
+  }
+
+  .modal-header:has(*) {
+    margin-bottom: 1rem;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 1rem;
+
+    * {
+      margin: 0;
+    }
+  }
+
+  .x-mark-container {
+    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .15s ease;
+    border-radius: .25rem;
+  }
+
+  .x-mark-container:hover {
+    background-color: hsl(var(--default-base));
+  }
+
+  .modal-footer {
+    display: none;
+  }
+
+  .modal-footer:has(*) {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-top: 1rem;
+    justify-content: end;
+  }
+
+  @keyframes hide {
+    0% {
+      scale: 1;
+      opacity: 1;
+      display: block;
+    }
+    100% {
+      scale: 0.85;
+      opacity: 0;
+      display: none;
+    }
+  }
+
+  @keyframes show {
+    0% {
+      scale: 0.85;
+      opacity: 0;
+      display: none;
+    }
+    100% {
+      scale: 1;
+      opacity: 1;
+      display: block;
+    }
+  }
+
+  @keyframes backdrop {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.astro';
+export { ModalHelper } from './modal';