omni-color 0.1.0

package/dist/demo/src/playground/playgroundUtils.js

@@ -0,0 +1,202 @@
+import { Color } from '../../../dist';
+function getRandomElementFromArray(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+}
+const UPDATE_COLOR_METHOD_EXAMPLES = [
+    { method: 'setAlpha', argOptions: [0.1, 0.3, 0.5, 0.7, 0.9] },
+    { method: 'spin', argOptions: [-180, -90, -45, 45, 90, 180, 270] },
+    { method: 'brighten', argOptions: [undefined, 20, 30, 40] },
+    { method: 'darken', argOptions: [undefined, 20, 30, 40] },
+    { method: 'saturate', argOptions: [undefined, 20, 30, 40] },
+    { method: 'desaturate', argOptions: [undefined, 20, 30, 40] },
+    { method: 'grayscale' },
+    {
+        method: 'mix',
+        argOptions: [
+            '[new Color("red")], { space: "RGB" }',
+            '[new Color("green")], { space: "HSL" }',
+            '[new Color("blue"), new Color("#fff")], { space: "LCH" }',
+            '[new Color(), new Color()], { space: "OKLCH" }',
+        ],
+    },
+    {
+        method: 'blend',
+        argOptions: [
+            'new Color("red")',
+            'new Color("green"), { mode: "MULTIPLY" }',
+            'new Color("blue"), { mode: "OVERLAY" }',
+        ],
+    },
+    {
+        method: 'average',
+        argOptions: [
+            '[new Color()]',
+            '[new Color("red"), new Color("green")]',
+            '[new Color("sky blue")], { weights: [0.75, 0.25] }',
+        ],
+    },
+];
+const GET_RESULT_COLOR_EXAMPLES = [
+    'clone()',
+    'getComplementaryColors()[0]',
+    'getComplementaryColors()[1]',
+    'getSplitComplementaryColors()[0]',
+    'getSplitComplementaryColors()[1]',
+    'getSplitComplementaryColors()[2]',
+    'getSquareHarmonyColors()[0]',
+    'getSquareHarmonyColors()[1]',
+    'getSquareHarmonyColors()[2]',
+    'getSquareHarmonyColors()[3]',
+    'getTetradicHarmonyColors()[0]',
+    'getTetradicHarmonyColors()[1]',
+    'getTetradicHarmonyColors()[2]',
+    'getTetradicHarmonyColors()[3]',
+    'getAnalogousHarmonyColors()[0]',
+    'getAnalogousHarmonyColors()[1]',
+    'getAnalogousHarmonyColors()[2]',
+    'getAnalogousHarmonyColors()[3]',
+    'getAnalogousHarmonyColors()[4]',
+    'getMonochromaticHarmonyColors()[0]',
+    'getMonochromaticHarmonyColors()[1]',
+    'getMonochromaticHarmonyColors()[2]',
+    'getMonochromaticHarmonyColors()[3]',
+    'getMonochromaticHarmonyColors()[4]',
+    'getColorSwatch()[300]',
+    'getColorSwatch()[400]',
+    'getColorSwatch()[600]',
+    'getColorSwatch()[700]',
+    'getColorPalette()["secondaryColors"][0][500]',
+    'getColorPalette()["info"][500]',
+    'getColorPalette()["negative"][500]',
+    'getColorPalette()["positive"][500]',
+];
+export function getRandomStarterCode() {
+    const randomColorHex = Color.random({ paletteSuitable: true }).toHex();
+    const updateColorMethod = getRandomElementFromArray(UPDATE_COLOR_METHOD_EXAMPLES);
+    const updateColorMethodArgs = updateColorMethod.argOptions
+        ? getRandomElementFromArray(updateColorMethod.argOptions)
+        : undefined;
+    const resultColorMethod = getRandomElementFromArray(GET_RESULT_COLOR_EXAMPLES);
+    return `// Return a \`Color\` or any valid color format (e.g. a hex string) to see the color visualized
+
+const color = new Color("${randomColorHex}");
+console.log("color:", color);
+
+const updated = color.${updateColorMethod.method}(${updateColorMethodArgs ?? ''});
+console.log("updated color:", updated);
+
+const result = updated.${resultColorMethod};
+return result; // rendered below if valid`;
+}
+function formatMockedJSConsoleValue(value) {
+    try {
+        if (value === undefined) {
+            return 'undefined';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return `[Function ${value.name || 'anonymous'}]`;
+        }
+        if (value && typeof value === 'object') {
+            // Try to show Color nicely if it has toHexString:
+            if ('toHex' in value && typeof value.toHex === 'function') {
+                return `Color(${value.toHex()})`;
+            }
+            return JSON.stringify(value, null, 2);
+        }
+        return String(value);
+    }
+    catch {
+        return '[unserializable]';
+    }
+}
+const ANON_FUNCTION_TRACE_LOCATION_PREFIX = '<anonymous>:';
+const ANON_FUNCTION_LINE_NUMBER_OFFSET = 4; // this is because when we define `codeRunnerFn`, the `${code}` part is on line 5
+function tryToGetLineNumberFromError(error) {
+    if (!('stack' in error) || typeof error.stack !== 'string') {
+        return null;
+    }
+    const { stack } = error;
+    const anonFunctionTraceIndex = stack.indexOf(ANON_FUNCTION_TRACE_LOCATION_PREFIX);
+    if (anonFunctionTraceIndex < 0) {
+        return null;
+    }
+    const lineNumberPartAndRest = stack.substring(anonFunctionTraceIndex + ANON_FUNCTION_TRACE_LOCATION_PREFIX.length);
+    const restIndex = lineNumberPartAndRest.indexOf(':');
+    if (restIndex < 0) {
+        return null;
+    }
+    const lineNumberPart = lineNumberPartAndRest.substring(0, restIndex);
+    if (!lineNumberPart) {
+        return null;
+    }
+    const lineNumber = parseInt(lineNumberPart);
+    if (isNaN(lineNumber)) {
+        return null;
+    }
+    return lineNumber - ANON_FUNCTION_LINE_NUMBER_OFFSET;
+}
+function getErrorMessage(error, fallbackMessage) {
+    if (error && typeof error === 'object') {
+        const maybeLineNumber = tryToGetLineNumberFromError(error);
+        if ('message' in error && typeof error.message === 'string') {
+            return `Error${maybeLineNumber !== null ? ` (line ${maybeLineNumber})` : ''}: ${error.message}`;
+        }
+    }
+    return fallbackMessage;
+}
+export var CodeExecutionStatus;
+(function (CodeExecutionStatus) {
+    CodeExecutionStatus["CODE_ERROR"] = "CODE_ERROR";
+    CodeExecutionStatus["NO_RETURNED_VALUE"] = "NO_RETURNED_VALUE";
+    CodeExecutionStatus["INVALID_RETURNED_VALUE"] = "INVALID_RETURNED_VALUE";
+    CodeExecutionStatus["SUCCESS"] = "SUCCESS";
+})(CodeExecutionStatus || (CodeExecutionStatus = {}));
+export async function tryToRunCode(code) {
+    const capturedJSConsoleOutputs = [];
+    const mockJSConsole = {
+        log: (...args) => capturedJSConsoleOutputs.push(args.map(formatMockedJSConsoleValue).join(' ')),
+        warn: (...args) => capturedJSConsoleOutputs.push('⚠️ ' + args.map(formatMockedJSConsoleValue).join(' ')),
+        error: (...args) => capturedJSConsoleOutputs.push('❌ ' + args.map(formatMockedJSConsoleValue).join(' ')),
+    };
+    let maybeColorValue;
+    try {
+        const codeRunnerFn = new Function('Color', 'console', `"use strict";
+      return (async () => {
+        ${code}
+      })();`);
+        maybeColorValue = await codeRunnerFn(Color, mockJSConsole);
+    }
+    catch (err) {
+        return {
+            consoleOutputs: capturedJSConsoleOutputs,
+            errorMessage: getErrorMessage(err, 'Error: invalid code'),
+            status: CodeExecutionStatus.CODE_ERROR,
+        };
+    }
+    if (!maybeColorValue) {
+        return {
+            consoleOutputs: capturedJSConsoleOutputs,
+            errorMessage: 'Error: no color returned',
+            status: CodeExecutionStatus.NO_RETURNED_VALUE,
+        };
+    }
+    let maybeColor;
+    try {
+        maybeColor = new Color(maybeColorValue);
+    }
+    catch (err) {
+        return {
+            consoleOutputs: capturedJSConsoleOutputs,
+            errorMessage: getErrorMessage(err, 'Error: invalid returned color value'),
+            status: CodeExecutionStatus.INVALID_RETURNED_VALUE,
+        };
+    }
+    return {
+        color: maybeColor,
+        consoleOutputs: capturedJSConsoleOutputs,
+        status: CodeExecutionStatus.SUCCESS,
+    };
+}

package/dist/demo/src/seo/PageHead.d.ts

@@ -0,0 +1,9 @@
+type PageHeadProps = {
+    title: string;
+    description: string;
+    path: string;
+    image?: string;
+    type?: string;
+};
+export declare function PageHead({ title, description, path, image, type }: PageHeadProps): null;
+export {};

package/dist/demo/src/seo/PageHead.js

@@ -0,0 +1,76 @@
+import { useEffect, useMemo } from 'react';
+const siteOrigin = 'https://rteammco.github.io';
+const basePath = (import.meta.env.BASE_URL ?? '/').replace(/\/$/, '');
+const withLeadingSlash = (value) => (value.startsWith('/') ? value : `/${value}`);
+const getAbsoluteUrl = (path) => `${siteOrigin}${basePath}${withLeadingSlash(path)}`;
+const resolveImageUrl = (image) => {
+    if (!image) {
+        return getAbsoluteUrl('/social-card.png');
+    }
+    if (/^https?:\/\//.test(image)) {
+        return image;
+    }
+    return getAbsoluteUrl(withLeadingSlash(image));
+};
+export function PageHead({ title, description, path, image, type = 'website' }) {
+    const canonicalUrl = useMemo(() => getAbsoluteUrl(path), [path]);
+    const imageUrl = useMemo(() => resolveImageUrl(image), [image]);
+    useEffect(() => {
+        const revertActions = [];
+        const updateMeta = (attribute, key, content) => {
+            const selector = `meta[${attribute}="${key}"]`;
+            let element = document.head.querySelector(selector);
+            if (!element) {
+                element = document.createElement('meta');
+                element.setAttribute(attribute, key);
+                document.head.appendChild(element);
+            }
+            const previousContent = element.getAttribute('content');
+            element.setAttribute('content', content);
+            revertActions.push(() => {
+                if (previousContent === null) {
+                    element?.remove();
+                    return;
+                }
+                element?.setAttribute('content', previousContent);
+            });
+        };
+        const updateCanonical = (href) => {
+            let link = document.head.querySelector('link[rel="canonical"]');
+            if (!link) {
+                link = document.createElement('link');
+                link.setAttribute('rel', 'canonical');
+                document.head.appendChild(link);
+            }
+            const previousHref = link.getAttribute('href');
+            link.setAttribute('href', href);
+            revertActions.push(() => {
+                if (previousHref === null) {
+                    link?.remove();
+                    return;
+                }
+                link?.setAttribute('href', previousHref);
+            });
+        };
+        const previousTitle = document.title;
+        document.title = title;
+        revertActions.push(() => {
+            document.title = previousTitle;
+        });
+        updateCanonical(canonicalUrl);
+        updateMeta('name', 'description', description);
+        updateMeta('property', 'og:title', title);
+        updateMeta('property', 'og:description', description);
+        updateMeta('property', 'og:type', type);
+        updateMeta('property', 'og:url', canonicalUrl);
+        updateMeta('property', 'og:image', imageUrl);
+        updateMeta('name', 'twitter:card', 'summary_large_image');
+        updateMeta('name', 'twitter:title', title);
+        updateMeta('name', 'twitter:description', description);
+        updateMeta('name', 'twitter:image', imageUrl);
+        return () => {
+            revertActions.reverse().forEach((revert) => revert());
+        };
+    }, [canonicalUrl, description, imageUrl, title, type]);
+    return null;
+}

package/dist/demo/src/seo/StructuredData.d.ts

@@ -0,0 +1,6 @@
+type JsonLd = Record<string, unknown>;
+type StructuredDataProps = {
+    data: JsonLd;
+};
+export declare function StructuredData({ data }: StructuredDataProps): null;
+export {};

package/dist/demo/src/seo/StructuredData.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+export function StructuredData({ data }) {
+    useEffect(() => {
+        const script = document.createElement('script');
+        script.setAttribute('type', 'application/ld+json');
+        script.textContent = JSON.stringify(data);
+        document.head.appendChild(script);
+        return () => {
+            document.head.removeChild(script);
+        };
+    }, [data]);
+    return null;
+}

package/dist/demo/src/toast/ToastProvider.d.ts

@@ -0,0 +1,2 @@
+import { type PropsWithChildren } from 'react';
+export declare function ToastProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/demo/src/toast/ToastProvider.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Icon } from '../components/Icon';
+import { subscribeToToast } from './toastBus';
+const DEFAULT_TOAST_DURATION_MS = 4500;
+function getToastVariantStyles(toastVariant) {
+    switch (toastVariant) {
+        case 'SUCCESS':
+            return {
+                iconClassName: 'text-emerald-600 dark:text-emerald-300',
+                iconType: Icon.TYPE.CHECK_CIRCLE,
+            };
+        case 'ERROR':
+            return {
+                iconClassName: 'text-rose-600 dark:text-rose-300',
+                iconType: Icon.TYPE.X_CIRCLE,
+            };
+        case 'INFO':
+        default:
+            return {
+                iconClassName: 'text-blue-600 dark:text-blue-300',
+                iconType: Icon.TYPE.INFO_CIRCLE,
+            };
+    }
+}
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const dismissTimeoutMapRef = useRef(new Map());
+    const dismissToast = useCallback((toastID) => {
+        const dismissTimeout = dismissTimeoutMapRef.current.get(toastID);
+        if (dismissTimeout != null) {
+            window.clearTimeout(dismissTimeout);
+            dismissTimeoutMapRef.current.delete(toastID);
+        }
+        setToasts((currentToasts) => currentToasts.filter((currentToast) => currentToast.id !== toastID));
+    }, []);
+    const enqueueToast = useCallback((toastEvent) => {
+        const toastID = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+        const toastDurationMs = toastEvent.durationMs == null ? DEFAULT_TOAST_DURATION_MS : toastEvent.durationMs;
+        setToasts((currentToasts) => [...currentToasts, { ...toastEvent, id: toastID }]);
+        if (toastDurationMs > 0) {
+            const dismissTimeout = window.setTimeout(() => {
+                dismissToast(toastID);
+            }, toastDurationMs);
+            dismissTimeoutMapRef.current.set(toastID, dismissTimeout);
+        }
+    }, [dismissToast]);
+    useEffect(() => {
+        const dismissTimeoutMap = dismissTimeoutMapRef.current;
+        return () => {
+            dismissTimeoutMap.forEach((dismissTimeout) => {
+                window.clearTimeout(dismissTimeout);
+            });
+            dismissTimeoutMap.clear();
+        };
+    }, []);
+    useEffect(() => subscribeToToast(enqueueToast), [enqueueToast]);
+    return (_jsxs(_Fragment, { children: [children, _jsx("div", { className: "pointer-events-none fixed right-4 bottom-4 z-50 flex max-w-sm flex-col gap-2", children: toasts.map((toast) => {
+                    const variantStyles = getToastVariantStyles(toast.variant);
+                    return (_jsx("div", { "aria-atomic": "true", className: "pointer-events-auto rounded-xl border border-slate-200 bg-white/95 p-3 text-left shadow-lg backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/95", role: toast.variant === 'ERROR' ? 'alert' : 'status', children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: variantStyles.iconClassName, children: _jsx(Icon, { size: 20, type: variantStyles.iconType }) }), _jsxs("div", { className: "flex-1 text-sm text-slate-800 dark:text-slate-100", children: [_jsx("p", { className: "font-medium", children: toast.message }), toast.description != null ? (_jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: toast.description })) : null] }), _jsx("button", { "aria-label": "Dismiss alert", className: "icon-button", onClick: () => dismissToast(toast.id), type: "button", children: _jsx(Icon, { size: 18, type: Icon.TYPE.X }) })] }) }, toast.id));
+                }) })] }));
+}

package/dist/demo/src/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { showErrorToast, showInfoToast, showSuccessToast } from './toastBus';

package/dist/demo/src/toast/index.js

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { showErrorToast, showInfoToast, showSuccessToast } from './toastBus';

package/dist/demo/src/toast/toastBus.d.ts

@@ -0,0 +1,13 @@
+export type ToastVariant = 'SUCCESS' | 'ERROR' | 'INFO';
+export interface ToastEvent {
+    description?: string;
+    durationMs?: number;
+    message: string;
+    variant: ToastVariant;
+}
+type ToastListener = (toastEvent: ToastEvent) => void;
+export declare function subscribeToToast(listener: ToastListener): () => void;
+export declare function showSuccessToast(message: string, durationMs?: number): void;
+export declare function showInfoToast(message: string, durationMs?: number): void;
+export declare function showErrorToast(message: string, error?: unknown, durationMs?: number): void;
+export {};

package/dist/demo/src/toast/toastBus.js

@@ -0,0 +1,27 @@
+const toastListeners = new Set();
+export function subscribeToToast(listener) {
+    toastListeners.add(listener);
+    return () => {
+        toastListeners.delete(listener);
+    };
+}
+function showToast(toastEvent) {
+    toastListeners.forEach((listener) => {
+        listener(toastEvent);
+    });
+}
+export function showSuccessToast(message, durationMs) {
+    showToast({ durationMs, message, variant: 'SUCCESS' });
+}
+export function showInfoToast(message, durationMs) {
+    showToast({ durationMs, message, variant: 'INFO' });
+}
+export function showErrorToast(message, error, durationMs) {
+    const errorDescription = error instanceof Error ? error.message : error != null ? String(error) : undefined;
+    showToast({
+        description: errorDescription,
+        durationMs,
+        message,
+        variant: 'ERROR',
+    });
+}