@studiocms/ui 0.3.2 → 0.4.0

package/src/components/index.ts

@@ -1,27 +0,0 @@
-export { default as Button } from './Button.astro';
-export { default as Divider } from './Divider.astro';
-export { default as Input } from './Input.astro';
-export { default as Row } from './Row.astro';
-export { default as Center } from './Center.astro';
-export { default as Textarea } from './Textarea.astro';
-export { default as Checkbox } from './Checkbox.astro';
-export { default as Toggle } from './Toggle.astro';
-export { default as RadioGroup } from './RadioGroup.astro';
-export { default as Toaster } from './Toast/Toaster.astro';
-export { default as Card } from './Card.astro';
-export { default as Modal } from './Modal/Modal.astro';
-export { default as Select } from './Select.astro';
-export { default as SearchSelect } from './SearchSelect.astro';
-export { default as Dropdown } from './Dropdown/Dropdown.astro';
-export { default as User } from './User.astro';
-export { default as ThemeToggle } from './ThemeToggle.astro';
-export { default as Footer } from './Footer.astro';
-export { Tabs, TabItem } from './Tabs/index';
-
-export { default as Sidebar } from './Sidebar/Single.astro';
-export { default as DoubleSidebar } from './Sidebar/Double.astro';
-export { SingleSidebarHelper, DoubleSidebarHelper } from './Sidebar/helpers';
-
-export { toast } from './Toast/toast';
-export { ModalHelper } from './Modal/modal';
-export { DropdownHelper } from './Dropdown/dropdown';

package/src/components.ts

@@ -1,26 +0,0 @@
-export { Button } from './components/index';
-export { Divider } from './components/index';
-export { Input } from './components/index';
-export { Row } from './components/index';
-export { Center } from './components/index';
-export { Textarea } from './components/index';
-export { Checkbox } from './components/index';
-export { Toggle } from './components/index';
-export { RadioGroup } from './components/index';
-export { Toaster, toast } from './components/index';
-export { Card } from './components/index';
-export { Modal, ModalHelper } from './components/index';
-export { Select } from './components/index';
-export { SearchSelect } from './components/index';
-export { Dropdown, DropdownHelper } from './components/index';
-export { User } from './components/index';
-export { ThemeToggle } from './components/index';
-export { Footer } from './components/index';
-export { Tabs, TabItem } from './components/index';
-
-export {
-	Sidebar,
-	DoubleSidebar,
-	SingleSidebarHelper,
-	DoubleSidebarHelper,
-} from './components/index';

package/src/css/colors.css

@@ -1,106 +0,0 @@
-[data-theme="light"],
-[data-theme="light"] * {
-	color-scheme: light;
-}
-
-[data-theme="dark"],
-[data-theme="dark"] * {
-	color-scheme: dark;
-}
-
-:root {
-	/* Default Styles (Dark Mode) */
-	--background-base: 0 0% 6%;
-	--background-step-1: 0 0% 8%;
-	--background-step-2: 0 0% 10%;
-	--background-step-3: 0 0% 14%;
-
-	--text-normal: 0 0% 100%;
-	--text-muted: 0 0% 54%;
-	--text-inverted: 0 0% 0%;
-
-	--border: 240 5% 17%;
-
-	--shadow: 0 0% 0%;
-
-	--default-base: 0 0% 14%;
-	--default-hover: 0 0% 21%;
-	--default-active: 0 0% 15%;
-
-	--primary-base: 259 83% 73%;
-	--primary-hover: 259 77% 78%;
-	--primary-active: 259 73% 67%;
-
-	--success-base: 142 71% 46%;
-	--success-hover: 142 72% 61%;
-	--success-active: 142 87% 52%;
-
-	--warning-base: 48 96% 53%;
-	--warning-hover: 48 97% 70%;
-	--warning-active: 48 100% 61%;
-
-	--danger-base: 339 97% 31%;
-	--danger-hover: 337 98% 37%;
-	--danger-active: 337 88% 32%;
-
-	/* Non-specific variables */
-	--text-light: 0 0% 100%;
-	--text-dark: 0 0% 0%;
-
-	/* Flat colorways since they use variables */
-	--default-flat: var(--default-base) / 0.5;
-	--default-flat-hover: var(--default-base) / 0.75;
-	--default-flat-active: var(--default-base) / 0.85;
-
-	--primary-flat: var(--primary-base) / 0.1;
-	--primary-flat-hover: var(--primary-base) / 0.25;
-	--primary-flat-active: var(--primary-base) / 0.35;
-
-	--success-flat: var(--success-base) / 0.1;
-	--success-flat-hover: var(--success-base) / 0.25;
-	--success-flat-active: var(--success-base) / 0.35;
-
-	--warning-flat: var(--warning-base) / 0.1;
-	--warning-flat-hover: var(--warning-base) / 0.25;
-	--warning-flat-active: var(--warning-base) / 0.35;
-
-	--danger-flat: var(--danger-base) / 0.1;
-	--danger-flat-hover: var(--danger-base) / 0.25;
-	--danger-flat-active: var(--danger-base) / 0.35;
-}
-
-[data-theme="light"] {
-	/* Light Mode Styles */
-	--background-base: 0 0% 97%;
-	--background-step-1: 0 0% 90%;
-	--background-step-2: 0 0% 85%;
-	--background-step-3: 0 0% 80%;
-
-	--text-normal: 0 0% 0%;
-	--text-muted: 0 0% 24%;
-	--text-inverted: 0 0% 100%;
-
-	--border: 263 5% 68%;
-
-	--shadow: 0 0% 65%;
-
-	--default-base: 0 0% 74%;
-	--default-hover: 0 0% 81%;
-	--default-active: 0 0% 91%;
-
-	--primary-base: 259 85% 61%;
-	--primary-hover: 259 78% 56%;
-	--primary-active: 259 71% 50%;
-
-	--success-base: 142 59% 47%;
-	--success-hover: 142 62% 56%;
-	--success-active: 142 87% 59%;
-
-	--warning-base: 48 92% 46%;
-	--warning-hover: 48 88% 43%;
-	--warning-active: 48 85% 40%;
-
-	--danger-base: 339 97% 31%;
-	--danger-hover: 337 98% 37%;
-	--danger-active: 337 88% 45%;
-}

package/src/css/global.css

@@ -1,2 +0,0 @@
-@import url("./colors.css");
-@import url("./resets.css");

package/src/css/resets.css

@@ -1,54 +0,0 @@
-*,
-*::before,
-*::after {
-	box-sizing: border-box !important;
-}
-
-html {
-	color-scheme: dark;
-	accent-color: hsl(var(--primary-base));
-}
-
-html,
-body {
-	margin: 0;
-}
-
-html[data-theme="light"] {
-	color-scheme: light;
-}
-
-body {
-	-webkit-font-smoothing: antialiased;
-	color: hsl(var(--text-normal));
-	background-color: hsl(var(--background-base));
-}
-
-input,
-button,
-textarea,
-select {
-	font: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-code {
-	overflow-wrap: anywhere;
-}
-
-code {
-	font-family: monospace;
-}
-
-button {
-	border: none;
-	outline: none;
-	background: none;
-	padding: 0;
-}

package/src/env.d.ts

@@ -1,15 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-
-interface CustomEventMap {
-	createtoast: CustomEvent<import('./types').ToastProps>;
-}
-
-declare global {
-	interface Document {
-		addEventListener<K extends keyof CustomEventMap>(
-			type: K,
-			listener: (this: Document, ev: CustomEventMap[K]) => void
-		): void;
-		dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
-	}
-}

package/src/integration.ts

@@ -1,31 +0,0 @@
-import type { AstroIntegration } from 'astro';
-import { createResolver } from './utils/create-resolver';
-import { viteVirtualModulePluginBuilder } from './utils/virtual-module-plugin-builder';
-
-// biome-ignore lint/complexity/noBannedTypes: Will be implemented in v0.3.0
-type Options = {};
-
-export default function integration(options: Options = {}): AstroIntegration {
-	const { resolve } = createResolver(import.meta.url);
-
-	const globalCss = viteVirtualModulePluginBuilder(
-		'studiocms:ui/global-css',
-		'sui-global-css',
-		`import '${resolve('./css/global.css')}'`
-	);
-
-	return {
-		name: '@studiocms/ui',
-		hooks: {
-			'astro:config:setup': ({ injectScript, updateConfig }) => {
-				updateConfig({
-					vite: {
-						plugins: [globalCss()],
-					},
-				});
-
-				injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
-			},
-		},
-	};
-}

package/src/layouts/RootLayout.astro

@@ -1,33 +0,0 @@
----
-import '../css/global.css';
-import BaseHead from '../components/BaseHead.astro';
-import type { HeadConfig } from '../utils/headers';
-
-export interface RootLayoutProps {
-	title: string;
-	description: string;
-	image?: string | undefined;
-	headers?: HeadConfig | undefined;
-	lang?: string;
-	defaultTheme?: 'dark' | 'light';
-}
-
-type Props = RootLayoutProps;
-
-const { title, description, image, headers, lang = 'en', defaultTheme = 'dark' } = Astro.props;
----
-
-<!doctype html>
-<html lang={lang} data-theme={defaultTheme}>
-  <head>
-    <BaseHead
-      {title}
-      {description}
-      {headers}
-      {image}
-    />
-  </head>
-  <body>
-    <slot />
-  </body>
-</html>

package/src/layouts/index.ts

@@ -1,2 +0,0 @@
-export { default as RootLayout } from './RootLayout.astro';
-export type { RootLayoutProps } from './RootLayout.astro';

package/src/layouts.ts

@@ -1 +0,0 @@
-export { RootLayout, type RootLayoutProps } from './layouts/index';

package/src/types/index.ts

@@ -1,11 +0,0 @@
-export interface ToastProps {
-	title: string;
-	/**
-	 * This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
-	 */
-	description?: string;
-	type: 'success' | 'warning' | 'danger' | 'info';
-	duration?: number;
-	persistent?: boolean;
-	closeButton?: boolean;
-}

package/src/utils/ThemeHelper.ts

@@ -1,145 +0,0 @@
-type Theme = 'dark' | 'light' | 'system';
-type ThemeChangeCallback = (newTheme: Theme, oldTheme: Theme) => void;
-
-/**
- * A helper to toggle, set and get the current StudioCMS UI theme.
- */
-class ThemeHelper {
-	private themeManagerElement: HTMLElement;
-	private observer: MutationObserver | undefined;
-	private themeChangeCallbacks: ThemeChangeCallback[] = [];
-
-	/**
-	 * A helper to toggle, set and get the current StudioCMS UI theme.
-	 * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
-	 */
-	constructor(themeProvider?: HTMLElement) {
-		this.themeManagerElement = themeProvider || document.documentElement;
-		this.themeManagerElement.dataset.theme = this.getTheme(true);
-	}
-
-	/**
-	 * Get the current theme.
-	 * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
-	 * @returns {Theme} The current theme.
-	 */
-	public getTheme = <T extends boolean>(
-		resolveSystemTheme?: T
-	): T extends true ? 'dark' | 'light' : Theme => {
-		const theme = (this.themeManagerElement.dataset.theme as Theme) || 'system';
-
-		if (!resolveSystemTheme) {
-			// Side note: Don't ask me why this type wizardry is needed but it gives proper return types so I don't care
-			return theme as T extends true ? 'dark' | 'light' : Theme;
-		}
-
-		if ((this.themeManagerElement.dataset.theme ?? 'system') !== 'system') {
-			return this.themeManagerElement.dataset.theme as 'dark' | 'light';
-		}
-
-		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			return 'dark';
-		}
-
-		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-			return 'light';
-		}
-
-		// This should (in theory) never happen since, at time of writing, window.matchMedia is supported
-		// by 96.83% of all browsers in use. (https://caniuse.com/mdn-api_window_matchmedia)
-		throw new Error(
-			'Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)'
-		);
-	};
-
-	/**
-	 * Sets the current theme.
-	 * @param theme The new theme. One of `dark`, `light` or `system`.
-	 */
-	public setTheme = (theme: Theme): void => {
-		// Assign the new theme to the dataset
-		this.themeManagerElement.dataset.theme = theme;
-
-		// If starlight is used, we also want to set the theme in local storage.
-		if (typeof localStorage.getItem('starlight-theme') === 'string') {
-			localStorage.setItem('starlight-theme', theme === 'system' ? '' : theme);
-		}
-	};
-
-	/**
-	 * Toggles the current theme.
-	 *
-	 * If the theme is set to `system` (or no theme is set via the root element),
-	 * the theme is set depending on the user's color scheme preference (set in the browser).
-	 */
-	public toggleTheme = (): void => {
-		const theme = this.getTheme();
-
-		if (theme && theme === 'dark') {
-			this.setTheme('light');
-			return;
-		}
-
-		if (theme && theme === 'light') {
-			this.setTheme('dark');
-			return;
-		}
-
-		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			this.setTheme('light');
-			return;
-		}
-
-		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-			this.setTheme('dark');
-			return;
-		}
-	};
-
-	/**
-	 * Register an element to act as a toggle! When clicked, it will toggle the theme.
-	 * @param toggle The HTML element that should act as the toggle
-	 */
-	public registerToggle = (toggle: HTMLElement | null): void => {
-		if (!toggle) {
-			console.error('Element passed to toggle registration does not exist.');
-			return;
-		}
-
-		if (!toggle.dataset.suiThemeToggle) {
-			toggle.addEventListener('click', this.toggleTheme);
-			toggle.dataset.suiThemeToggle = 'true';
-		}
-	};
-
-	/**
-	 * Allows for adding a callback that gets called whenever the theme changes.
-	 * @param callback The callback to be executed
-	 */
-	public onThemeChange = (callback: ThemeChangeCallback): void => {
-		if (!this.observer) {
-			this.observer = new MutationObserver(this.themeManagerMutationHandler);
-			this.observer.observe(this.themeManagerElement, {
-				attributes: true,
-				attributeOldValue: true,
-				attributeFilter: ['data-theme'],
-			});
-		}
-
-		this.themeChangeCallbacks.push(callback);
-	};
-
-	/**
-	 * Simply gets the first mutation and calls all registered callbacks.
-	 * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
-	 */
-	private themeManagerMutationHandler = (mutations: MutationRecord[]): void => {
-		if (!mutations[0]) return;
-
-		for (const callback of this.themeChangeCallbacks) {
-			callback(this.getTheme(), (mutations[0].oldValue as Theme) || 'system');
-		}
-	};
-}
-
-export { ThemeHelper, type Theme };

package/src/utils/create-resolver.ts

@@ -1,30 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'pathe';
-
-/**
- * From the Astro Integration Kit (https://astro-integration-kit.netlify.app/).
- *
- * Allows resolving paths relatively to the integration folder easily. Call it like this:
- *
- * @param {string} _base - The location you want to create relative references from. `import.meta.url` is usually what you'll want.
- *
- * @see https://astro-integration-kit.netlify.app/core/create-resolver/
- *
- * @example
- * ```ts
- * const { resolve } = createResolver(import.meta.url);
- * const pluginPath = resolve("./plugin.ts");
- * ```
- *
- * This way, you do not have to add your plugin to your package.json `exports`.
- */
-export const createResolver = (_base: string) => {
-	let base = _base;
-	if (base.startsWith('file://')) {
-		base = dirname(fileURLToPath(base));
-	}
-
-	return {
-		resolve: (...path: Array<string>) => resolve(base, ...path),
-	};
-};

package/src/utils/generateID.ts

@@ -1,5 +0,0 @@
-function generateID(prefix: string): string {
-	return `${prefix}-${Math.random().toString(16).slice(2)}`;
-}
-
-export { generateID };