@studiocms/ui 0.0.1

package/src/components/Select.astro

@@ -0,0 +1,334 @@
+---
+import Icon from '../utils/Icon.astro';
+import { generateID } from '../utils/generateID';
+
+interface Option {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+interface Props {
+	label?: string;
+	defaultValue?: string;
+	class?: string;
+	name?: string;
+	isRequired?: boolean;
+	options: Option[];
+	disabled?: boolean;
+	fullWidth?: boolean;
+};
+
+const {
+	label,
+	defaultValue,
+	class: className,
+	name = generateID('select'),
+	isRequired,
+	options = [],
+	disabled,
+	fullWidth,
+} = Astro.props;
+---
+
+<div
+    id={`${name}-container`}
+    class="select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+>
+    <label class="label" for={`${name}-select-btn`}>
+        {label}
+        <span class="req-star">{isRequired && "*"}</span>
+    </label>
+    <button
+        class="select-button"
+        role="combobox"
+        id={`${name}-select-btn`}
+        type="button"
+    >
+        <span id={`${name}-value-span`}>
+            {
+                defaultValue
+                    ? options.find((x) => x.value === defaultValue)?.label
+                    : "Select"
+            }
+        </span>
+        <Icon name="chevron-up-down" width={24} height={24} />
+    </button>
+    <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="select-option"
+                    role="option"
+                    value={x.value}
+                    class:list={[
+                        defaultValue === x.value && `selected`,
+                        x.disabled && "disabled",
+                    ]}
+                    id={defaultValue === x.value ? `${name}-selected` : ""}
+                    data-option-index={i}
+                    tabindex={x.disabled ? -1 : 0}
+                >
+                    {x.label}
+                </li>
+            ))
+        }
+    </ul>
+    <select class="hidden-select" id={name} name={name} required={isRequired}>
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
+</div>
+<script is:inline define:vars={{ id: name, options }}>
+    const container = document.getElementById(`${id}-container`);
+    const hiddenSelect = document.getElementById(id);
+    const button = document.getElementById(`${id}-select-btn`);
+    const valueSpan = document.getElementById(`${id}-value-span`);
+    const dropdown = document.getElementById(`${id}-dropdown`);
+    const optionElements = container.querySelectorAll("li");
+
+    let active = false;
+
+    button.addEventListener("click", () => {
+        const { bottom, left, right, width, x, y, height } =
+            button.getBoundingClientRect();
+
+        const optionHeight = 36;
+        const totalBorderSize = 2;
+        const margin = 4;
+
+        const dropdownHeight =
+            options.length * optionHeight + totalBorderSize + margin;
+
+        const CustomRect = {
+            top: bottom + margin,
+            left,
+            right,
+            bottom: bottom + margin + dropdownHeight,
+            width,
+            height: dropdownHeight,
+            x,
+            y: y + height + margin,
+        };
+
+        if (active) {
+            dropdown.classList.remove("active", "above");
+            active = false;
+            return;
+        }
+
+        active = true;
+
+        if (
+            CustomRect.top >= 0 &&
+            CustomRect.left >= 0 &&
+            CustomRect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            CustomRect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        ) {
+            dropdown.classList.add("active");
+        } else {
+            dropdown.classList.add("active", "above");
+        }
+    });
+
+    optionElements.forEach((option) => {
+        const handleSelection = (e) => {
+            e.stopImmediatePropagation();
+            if (option.id === `${id}-selected` || !id) return;
+
+            const currentlySelected = document.getElementById(`${id}-selected`);
+
+            if (currentlySelected) {
+                currentlySelected.classList.remove("selected");
+                currentlySelected.id = "";
+            }
+
+            option.id = `${id}-selected`;
+            option.classList.add("selected");
+
+            const opt = options[parseInt(option.dataset.optionIndex)];
+            hiddenSelect.value = opt.value;
+
+            valueSpan.textContent = opt.label;
+            dropdown.classList.remove("active", "above");
+
+            active = false;
+        }
+
+        option.addEventListener("click", handleSelection);
+        option.addEventListener("keydown", (e) => {
+            if (e.key === 'Enter') {
+                handleSelection(e);
+            }
+        });
+    });
+
+    window.addEventListener("scroll", () => {
+        dropdown.classList.remove("active", "above");
+        active = false;
+    });
+
+    hideOnClickOutside(container);
+
+    function hideOnClickOutside(element) {
+        const outsideClickListener = (event) => {
+            if (
+                !element.contains(event.target) &&
+                isVisible(element) &&
+                active === true
+            ) {
+                // or use: event.target.closest(selector) === null
+                dropdown.classList.remove("active", "above");
+                active = false;
+            }
+        };
+
+        const removeClickListener = () => {
+            document.removeEventListener("click", outsideClickListener);
+        };
+
+        document.addEventListener("click", outsideClickListener);
+    }
+
+    // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+    const isVisible = (elem) =>
+        !!elem &&
+        !!(
+            elem.offsetWidth ||
+            elem.offsetHeight ||
+            elem.getClientRects().length
+        );
+</script>
+<style>
+    .select-label {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        min-width: 200px;
+        position: relative;
+    }
+
+    .select-label.full {
+        width: 100%;
+    }
+
+    .select-label.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .label {
+        font-size: 14px;
+    }
+
+    .req-star {
+        color: hsl(var(--danger-base));
+        font-weight: 700;
+    }
+
+    .select-button {
+        padding: 0.5rem 0.75rem 0.5rem 1rem;
+        border-radius: 8px;
+        border: 1px solid hsl(var(--border));
+        background: hsl(var(--background-step-2));
+        color: hsl(var(--text-normal));
+        transition: all 0.15s ease;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        gap: 1rem;
+    }
+
+    .select-button:hover {
+        background: hsl(var(--background-step-3));
+    }
+
+    .select-button.active,
+    .select-button:active,
+    .select-button:has(+ .select-dropdown.active) {
+        border: 1px solid hsl(var(--primary-base));
+        background: hsl(var(--background-step-2));
+    }
+
+    .select-dropdown {
+        position: absolute;
+        width: 100%;
+        border: 1px solid hsl(var(--border));
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        flex-direction: column;
+        border-radius: 0.5rem;
+        background-color: hsl(var(--background-step-2));
+        overflow: hidden;
+        top: calc(100% + 0.25rem);
+        left: 0;
+        display: none;
+        z-index: 90;
+        box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+    }
+
+    .select-dropdown.active {
+        display: flex;
+    }
+
+    .select-dropdown.above {
+        top: auto;
+        bottom: calc(100% - 18px + 0.25rem);
+    }
+
+    .select-option {
+        padding: 0.5rem;
+        cursor: pointer;
+        font-size: 0.975em;
+        transition: all 0.15s ease;
+    }
+
+    .select-option.disabled {
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .select-option:hover, .select-option:focus {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .select-option:focus {
+        outline: none;
+        border: none;
+    }
+
+    .select-option.selected {
+        background-color: hsl(var(--primary-base));
+        color: hsl(var(--text-inverted));
+        cursor: default;
+    }
+
+    .hidden-select {
+        height: 0;
+        width: 0;
+        border: none;
+        outline: none;
+        position: absolute;
+        background-color: transparent;
+        pointer-events: none;
+        opacity: 0;
+    }
+</style>

package/src/components/Sidebar/Double.astro

@@ -0,0 +1,91 @@
+<div id="sidebars" class="active inner">
+  <div id="sidebar-outer">
+    <slot name="outer" />
+  </div>
+  <div id="sidebar-inner">
+    <slot name="inner" />
+  </div>
+</div>
+<style>
+  #sidebars {
+    --sidebars-container-width: calc((280px + 1px) * 2);
+    display: flex;
+    align-items: center;
+    width: var(--sidebars-container-width);
+    min-width: var(--sidebars-container-width);
+    overflow: hidden;
+    transition: all .3s ease;
+    z-index: 10;
+    height: 100%;
+  }
+
+  #sidebars.active {
+    transform: translateX(0%);
+  }
+
+  #sidebar-outer {
+    height: 100%;
+    min-width: 280px;
+    width: 280px;
+    background-color: hsl(var(--background-step-1));
+    border-right: 1px solid hsl(var(--border));
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: all .3s ease;
+    padding: 1.5rem;
+  }
+
+  #sidebar-inner {
+    min-width: 280px;
+    width: 280px;
+    height: 100%;
+    background-color: hsl(var(--background-step-2));
+    border-right: 1px solid hsl(var(--border));
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    position: relative;
+    transition: all .3s ease;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #sidebars {
+      --sidebars-container-width: calc(280px + 1px);
+    }
+
+    #swap-to-inner {
+      display: block;
+    }
+
+    #sidebars.inner {
+      #sidebar-outer,
+      #sidebar-inner {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    #sidebars {
+      transform: translateX(-100%);
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    #sidebar-outer,
+    #sidebar-inner {
+      width: 100%;
+      flex: 0 0 100%;
+    }
+  }
+</style>

package/src/components/Sidebar/Single.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {};
+
+const props = Astro.props;
+---
+<aside id="sidebar" {...props}>
+  <slot />
+</aside>
+<style>
+  #sidebar {
+    height: 100%;
+    min-width: 280px;
+    width: 280px;
+    background-color: hsl(var(--background-step-1));
+    border-right: 1px solid hsl(var(--border));
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.5rem;
+    z-index: 10;
+    transition: all .3s ease;
+  }
+
+  #sidebar.active {
+    transform: translateX(0%);
+  }
+
+  @media screen and (max-width: 840px) {
+    #sidebar {
+      transform: translateX(-100%);
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      border-right: none;
+    }
+  }
+</style>

package/src/components/Sidebar/helpers.ts

@@ -0,0 +1,133 @@
+class SingleSidebarHelper {
+	sidebar: HTMLElement;
+	sidebarToggle?: HTMLElement | undefined;
+
+	constructor(toggleID?: string) {
+		const sidebarContainer = document.getElementById('sidebar');
+
+		if (!sidebarContainer) {
+			throw new Error(
+				`No item with ID 'sidebar' found. Please add the <Sidebar> component to this page.`
+			);
+		}
+
+		this.sidebar = sidebarContainer;
+
+		if (toggleID) {
+			const navToggle = document.getElementById(toggleID);
+
+			if (!navToggle) {
+				throw new Error(`No item with ID ${toggleID} found.`);
+			}
+
+			this.sidebarToggle = navToggle;
+
+			this.sidebarToggle.addEventListener('click', () => {
+				this.sidebar.classList.toggle('active');
+			});
+		}
+	}
+
+	public toggleSidebarOnClick = (elementID: string) => {
+		const navToggle = document.getElementById(elementID);
+
+		if (!navToggle) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		this.sidebarToggle = navToggle;
+
+		this.sidebarToggle.addEventListener('click', () => {
+			this.sidebar.classList.toggle('active');
+		});
+	}
+
+	public hideSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.hideSidebar);
+	};
+
+	public showSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showSidebar);
+	};
+
+	public hideSidebar = () => {
+		this.sidebar.classList.remove('active');
+	};
+
+	public showSidebar = () => {
+		this.sidebar.classList.add('active');
+	};
+}
+
+class DoubleSidebarHelper {
+	sidebarsContainer: HTMLElement;
+
+	constructor() {
+		const sidebarsContainer = document.getElementById('sidebars');
+
+		if (!sidebarsContainer) {
+			throw new Error(
+				`No item with ID 'sidebars' found. Please add the <DoubleSidebar> component to this page.`
+			);
+		}
+
+		this.sidebarsContainer = sidebarsContainer;
+	}
+
+	public hideSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.hideSidebar);
+	};
+
+	public showOuterOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showOuterSidebar);
+	};
+
+	public showInnerOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showInnerSidebar);
+	};
+
+	public showInnerSidebar = () => {
+		this.sidebarsContainer.classList.add('inner', 'active');
+	};
+
+	public showOuterSidebar = () => {
+		this.sidebarsContainer.classList.add('active');
+		this.sidebarsContainer.classList.remove('inner');
+	};
+
+	public hideSidebar = () => {
+		this.sidebarsContainer.classList.remove('inner', 'active');
+	};
+}
+
+export { SingleSidebarHelper, DoubleSidebarHelper };

package/src/components/Sidebar/index.ts

@@ -0,0 +1,3 @@
+export { default as SingleSidebar } from './Single.astro';
+export { default as DoubleSidebar } from './Double.astro';
+export { SingleSidebarHelper, DoubleSidebarHelper } from './helpers';

package/src/components/Textarea.astro

@@ -0,0 +1,102 @@
+---
+import { generateID } from '../utils/generateID';
+
+interface Props {
+	label?: string;
+	placeholder?: string;
+	isRequired?: boolean;
+	fullWidth?: boolean;
+	resize?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+};
+
+const {
+	label,
+	placeholder,
+	isRequired,
+	fullWidth,
+	resize,
+	name = generateID('textarea'),
+	disabled,
+	defaultValue,
+} = Astro.props;
+---
+<label 
+  for={name} 
+  class="textarea-label"
+  class:list={[
+    fullWidth && "full",
+    resize && "resize",
+    disabled && "disabled",
+  ]}
+>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <textarea
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    class="textarea"
+    required={isRequired}
+    disabled={disabled}
+    
+  >{defaultValue}</textarea>
+</label>
+<style>
+  .textarea-label {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: .5rem;
+    max-width: 80ch;
+  }
+
+  .textarea-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .textarea-label.full {
+    width: 100%;
+    max-width: none;
+  }
+
+  .label {
+    font-size: 14px;
+  }
+
+  .textarea {
+    padding: .65rem 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;
+    resize: none;
+    min-height: 12ch;
+  }
+
+  .textarea:hover {
+    background: hsl(var(--background-step-3));
+  }
+
+  .resize .textarea {
+    resize: both;
+  }
+
+  .textarea:active,
+  .textarea:focus {
+    border: 1px solid hsl(var(--primary-base));
+    outline: none;
+    background: hsl(var(--background-step-2));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+</style>