@rovula/ui 0.1.6 → 0.1.8

package/dist/theme/ThemeColorCoverageRuntime.stories.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { THEME_COLOR_KEYS, getThemeColor } from "../utils/colors";
+const meta = {
+    title: "Theme/Color Coverage Runtime",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+const DEPRECATED_KEYS = new Set([
+    "text-dark",
+    "text-medium",
+    "text-light",
+    "text-grey-dark",
+    "text-grey-medium",
+    "text-grey-light",
+    "base-bg",
+    "base-bg2",
+    "base-bg3",
+    "base-workspace-stroke",
+    "base-guideline-stroke",
+    "base-popup",
+    "base-popup-highlight",
+    "base-popup-curtain",
+    "base-popup-foreground",
+    "background",
+    "foreground",
+    "surface",
+    "surface-foreground",
+    "primary-foreground",
+    "secondary-foreground",
+    "tertiary-foreground",
+    "info-foreground",
+    "success-foreground",
+    "warning-foreground",
+    "error-foreground",
+    "grey-foreground",
+    "grey2-foreground",
+    "function-default-outline",
+]);
+const RuntimeCoveragePanel = () => {
+    const rows = useMemo(() => {
+        const baseRows = Object.entries(THEME_COLOR_KEYS)
+            .map(([key, variableName]) => {
+            const runtimeValue = getThemeColor(variableName);
+            const hasRuntimeValue = runtimeValue.length > 0;
+            const canonicalKey = variableName.replace(/^--/, "");
+            return {
+                key,
+                variableName,
+                runtimeValue,
+                hasRuntimeValue,
+                canonicalKey,
+                isMappedAlias: key !== canonicalKey,
+                isDeprecated: DEPRECATED_KEYS.has(key),
+            };
+        })
+            .sort((a, b) => a.key.localeCompare(b.key));
+        const existingKeys = new Set(baseRows.map((row) => row.key));
+        const generatedDirectRows = baseRows
+            .filter((row) => row.isMappedAlias)
+            .map((row) => {
+            return {
+                key: row.canonicalKey,
+                variableName: row.variableName,
+                runtimeValue: row.runtimeValue,
+                hasRuntimeValue: row.hasRuntimeValue,
+                canonicalKey: row.canonicalKey,
+                isMappedAlias: false,
+                isDeprecated: false,
+            };
+        })
+            .filter((row) => !existingKeys.has(row.key));
+        return [...baseRows, ...generatedDirectRows].sort((a, b) => a.key.localeCompare(b.key));
+    }, []);
+    const activeRows = rows.filter((row) => !row.isDeprecated && !row.isMappedAlias);
+    const mappedRows = rows.filter((row) => !row.isDeprecated && row.isMappedAlias);
+    const deprecatedRows = rows.filter((row) => row.isDeprecated);
+    const missingRuntimeValue = rows.filter((row) => !row.hasRuntimeValue);
+    const activeMissingRuntimeValue = activeRows.filter((row) => !row.hasRuntimeValue);
+    const mappedMissingRuntimeValue = mappedRows.filter((row) => !row.hasRuntimeValue);
+    const deprecatedMissingRuntimeValue = deprecatedRows.filter((row) => !row.hasRuntimeValue);
+    const stateRows = rows.filter((row) => row.variableName.startsWith("--state-"));
+    const stateRuntimeMissing = stateRows.filter((row) => !row.hasRuntimeValue);
+    const renderTable = (tableRows) => (_jsx("div", { className: "rounded-md border border-bg-stroke2 bg-bg-bg2 overflow-auto", children: _jsxs("table", { className: "w-full text-small3", children: [_jsx("thead", { className: "sticky top-0 bg-bg-bg3", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left p-2", children: "Key" }), _jsx("th", { className: "text-left p-2", children: "CSS Variable" }), _jsx("th", { className: "text-left p-2", children: "Runtime" }), _jsx("th", { className: "text-left p-2", children: "Preview" })] }) }), _jsx("tbody", { children: tableRows.map((row) => (_jsxs("tr", { className: "border-t border-bg-stroke2", children: [_jsx("td", { className: "p-2", children: row.key }), _jsx("td", { className: "p-2", children: row.variableName }), _jsx("td", { className: "p-2", children: row.hasRuntimeValue ? row.runtimeValue : "missing" }), _jsx("td", { className: "p-2", children: row.hasRuntimeValue ? (_jsx("span", { className: "inline-block w-6 h-4 rounded border border-bg-stroke2", style: { backgroundColor: `var(${row.variableName})` } })) : ("-") })] }, row.key))) })] }) }));
+    return (_jsxs("div", { className: "p-6 space-y-4 bg-bg-bg2 text-text-g-contrast-high min-h-screen text-text-black", children: [_jsx("h2", { className: "text-h5", children: "Theme Color Runtime Coverage" }), _jsxs("div", { className: "grid grid-cols-2 gap-3 max-w-3xl", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Total keys" }), _jsx("div", { className: "text-h6", children: rows.length })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Missing runtime values" }), _jsx("div", { className: "text-h6", children: missingRuntimeValue.length })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "State runtime coverage" }), _jsxs("div", { className: "text-h6", children: [stateRows.length - stateRuntimeMissing.length, "/", stateRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Runtime coverage" }), _jsxs("div", { className: "text-h6", children: [rows.length - missingRuntimeValue.length, "/", rows.length] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3 max-w-4xl", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Active keys" }), _jsxs("div", { className: "text-h6", children: [activeRows.length - activeMissingRuntimeValue.length, "/", activeRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Mapped keys (alias to canonical)" }), _jsxs("div", { className: "text-h6", children: [mappedRows.length - mappedMissingRuntimeValue.length, "/", mappedRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Deprecated keys" }), _jsxs("div", { className: "text-h6", children: [deprecatedRows.length - deprecatedMissingRuntimeValue.length, "/", deprecatedRows.length] })] })] }), missingRuntimeValue.length > 0 ? (_jsxs("div", { className: "rounded-md border border-warning p-3 bg-warning-transparent-8", children: [_jsx("div", { className: "text-small2 text-warning", children: "Missing runtime values" }), _jsx("div", { className: "text-small3 mt-1", children: missingRuntimeValue.map((item) => item.variableName).join(", ") })] })) : null, _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Active Tokens" }), renderTable(activeRows)] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Mapped Tokens (Alias)" }), renderTable(mappedRows)] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Deprecated Aliases" }), renderTable(deprecatedRows)] })] }));
+};
+export const RuntimeCoverage = {
+    render: () => _jsx(RuntimeCoveragePanel, {}),
+};