Quill Tokens Vault

package.json

@@ -64,7 +64,6 @@
         "@storybook/react": "^8.0.5",
         "@storybook/react-vite": "^8.0.5",
         "@storybook/test": "^8.2.7",
-        "@storybook/builder-vite": "^8.2.9",
         "@tanstack/react-table": "^8.12.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
@@ -94,6 +93,9 @@
         "jest-environment-jsdom": "^29.7.0",
         "lint-staged": "^15.2.2",
         "mock-match-media": "^0.4.3",
+        "node-fetch": "^3.3.2",
+        "postcss": "^8.4.41",
+        "postcss-custom-properties": "^14.0.0",
         "prettier": "3.2.5",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -147,12 +149,13 @@
         "globalSetup": "<rootDir>/globalSetup.js"
     },
     "dependencies": {
-        "@deriv-com/quill-tokens": "^2.0.10",
+        "@deriv-com/quill-tokens": "^2.0.11",
         "@deriv/quill-icons": "^1.22.10",
         "@headlessui/react": "1.7.18",
         "dayjs": "^1.11.11",
         "react-calendar": "^5.0.0",
         "react-number-format": "^5.4.0",
+        "react-router-dom": "^6.26.1",
         "react-swipeable": "^6.2.1",
         "react-tiny-popover": "^8.0.4",
         "react-transition-group": "4.4.2",

scripts/token-data/versions.json

@@ -0,0 +1,12 @@
+[
+  "2.0.11",
+  "2.0.10",
+  "2.0.9",
+  "2.0.8",
+  "2.0.7",
+  "2.0.6",
+  "2.0.5",
+  "2.0.4",
+  "2.0.3",
+  "2.0.2"
+]

scripts/token-fetcher.js

@@ -0,0 +1,214 @@
+import fetch from "node-fetch";
+import fs from "fs";
+import path from "path";
+import postcss from "postcss";
+import customProperties from "postcss-custom-properties";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Token Categories
+const genericTokens = [
+    "borderRadius",
+    "size",
+    "-color",
+    "lineHeight",
+    "fontSize",
+    "paragraphSpacing",
+    "typography",
+    "opacity",
+    "spacing",
+    "fontFamily",
+    "fontWeight",
+    "fontDecoration",
+    "motion",
+    "borderWidth",
+    "opacity",
+    "borderRadius",
+];
+const componentTokens = [
+    "button",
+    "segmentedControl",
+    "textIcon",
+    "handle",
+    "selectionControl",
+    "tab",
+    "field",
+    "toggle",
+    "modal",
+    "pagination",
+    "actionSheet",
+    "snackbar",
+    "badge",
+    "fieldMarker",
+    "dropdownItem",
+    "dropdownList",
+    "tag",
+    "chip",
+    "notification",
+    "breadcrumb",
+    "link",
+    "tooltip",
+    "accordion",
+    "sectionMessage",
+];
+
+async function getAllPackageVersions(packageName) {
+    try {
+        const response = await fetch(
+            `https://registry.npmjs.org/${packageName}`,
+        );
+        const data = await response.json();
+        return Object.keys(data.versions);
+    } catch (error) {
+        console.error(`Failed to fetch versions for ${packageName}:`, error);
+        return [];
+    }
+}
+
+async function fetchCSS(packageName, version, filePath) {
+    const url = `https://unpkg.com/${packageName}@${version}/${filePath}`;
+    console.log(`Fetching CSS from: ${url}`);
+
+    try {
+        const response = await fetch(url);
+        if (!response.ok)
+            throw new Error(
+                `Network response was not ok: ${response.statusText}`,
+            );
+
+        const cssText = await response.text();
+        return cssText;
+    } catch (error) {
+        console.error(`Failed to fetch CSS: ${error}`);
+        return null;
+    }
+}
+
+async function parseCSSContent(cssText) {
+    const cssVariables = {};
+    const variableCounts = { generic: {}, component: {} };
+
+    function cleanValue(value) {
+        return value
+            .replace(/\s+/g, " ") // Replace multiple spaces and newlines with a single space
+            .trim(); // Remove leading and trailing whitespace
+    }
+
+    try {
+        const result = await postcss([customProperties()]).process(cssText, {
+            from: undefined,
+        });
+
+        result.root.walkRules((rule) => {
+            rule.walkDecls((declaration) => {
+                if (declaration.prop.startsWith("--")) {
+                    const variableName = declaration.prop;
+                    const rawValue = declaration.value;
+                    const cleanedValue = cleanValue(rawValue);
+                    cssVariables[variableName] = cleanedValue;
+
+                    // Categorize the variable and count occurrences
+                    let categorized = false;
+
+                    for (const token of genericTokens) {
+                        if (variableName.includes(token)) {
+                            if (!variableCounts.generic[token]) {
+                                variableCounts.generic[token] = 0;
+                            }
+                            variableCounts.generic[token]++;
+                            categorized = true;
+                            break;
+                        }
+                    }
+
+                    if (!categorized) {
+                        for (const token of componentTokens) {
+                            if (variableName.includes(token)) {
+                                if (!variableCounts.component[token]) {
+                                    variableCounts.component[token] = 0;
+                                }
+                                variableCounts.component[token]++;
+                                break;
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    } catch (error) {
+        console.error("Failed to parse CSS:", error);
+    }
+
+    return { cssVariables, variableCounts };
+}
+
+// Function to save data as JSON
+function saveJSON(data, version) {
+    const directory = path.join(__dirname, "token-data");
+    if (!fs.existsSync(directory)) {
+        fs.mkdirSync(directory, { recursive: true });
+    }
+
+    const filePath = path.join(directory, `data-${version}.json`);
+    fs.writeFileSync(filePath, JSON.stringify(data, null, 2), "utf8");
+    console.log(`Data saved to ${filePath}`);
+}
+
+// Function to save versions list
+function saveVersionsList(versionsWithData) {
+    const filePath = path.join(__dirname, "token-data", "versions.json");
+    fs.writeFileSync(
+        filePath,
+        JSON.stringify(versionsWithData, null, 2),
+        "utf8",
+    );
+    console.log(`Versions list saved to ${filePath}`);
+}
+
+// Function to sort versions in descending order
+function sortVersionsDescending(versions) {
+    return versions.sort((v1, v2) => {
+        const [major1, minor1, patch1] = v1.split(".").map(Number);
+        const [major2, minor2, patch2] = v2.split(".").map(Number);
+
+        if (major1 !== major2) return major2 - major1; // Descending order
+        if (minor1 !== minor2) return minor2 - minor1;
+        return patch2 - patch1;
+    });
+}
+
+// Main function to process CSS and save JSON for all versions
+async function processAllVersions(packageName, filePath) {
+    const versions = await getAllPackageVersions(packageName);
+    if (versions.length === 0) {
+        console.log(`No versions found for ${packageName}.`);
+        return;
+    }
+
+    const sortedVersions = sortVersionsDescending(versions);
+    const versionsWithData = [];
+
+    for (const version of sortedVersions) {
+        console.log(`Processing version ${version}...`);
+        const cssText = await fetchCSS(packageName, version, filePath);
+        if (cssText) {
+            const { cssVariables, variableCounts } =
+                await parseCSSContent(cssText);
+            if (Object.keys(cssVariables).length > 0) {
+                // Only consider versions with data
+                const data = {
+                    cssVariables,
+                    variableCounts,
+                };
+                saveJSON(data, version);
+                versionsWithData.push(version);
+            }
+        }
+    }
+
+    saveVersionsList(versionsWithData);
+}
+
+processAllVersions("@deriv-com/quill-tokens", "dist/quill.css");

src/main.tsx

@@ -1,38 +1,22 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Heading, Skeleton } from "../lib/main";
-import ThemeSwitcher from "./theme-switcher";
-import ThemeRenderer from "./theme-renderer";
+import ThemeRenderer from "./vault/layout/theme-renderer";
 import BreakpointProvider from "@providers/breakpoint/breakpointProvider";
-import Breakpoint from "./breakpoint";
+import { BrowserRouter } from "react-router-dom";
+import Vault from "./vault";
+import "./vault/assets/styles/main.scss";
+import VersionProvider from "./vault/hooks/useVersion";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <ThemeRenderer>
-            <BreakpointProvider>
-                <div className="quill__background--primary__type--base">
-                    <ThemeSwitcher />
-                    <Heading.Hero>Quill UI</Heading.Hero>
-                    <Heading.H1>Quill UI</Heading.H1>
-                    <Heading.H1 as="div">Quill UI - h1 as div</Heading.H1>
-                    <Heading.H1 as="span">Quill UI - h1 as span</Heading.H1>
-                    <Breakpoint />
-                    <Skeleton.Container direction="row">
-                        <Skeleton.Container direction="column">
-                            <Skeleton.Circle />
-                            <Skeleton.Container direction="row">
-                                <Skeleton.Square height={20} />
-                                <Skeleton.Square height={20} />
-                            </Skeleton.Container>
-                        </Skeleton.Container>
-                        <Skeleton.Container direction="row">
-                            <Skeleton.Square height={50} />
-                            <Skeleton.Square />
-                            <Skeleton.Square />
-                        </Skeleton.Container>
-                    </Skeleton.Container>
-                </div>
-            </BreakpointProvider>
-        </ThemeRenderer>
+        <BrowserRouter>
+            <ThemeRenderer>
+                <BreakpointProvider>
+                    <VersionProvider>
+                        <Vault />
+                    </VersionProvider>
+                </BreakpointProvider>
+            </ThemeRenderer>
+        </BrowserRouter>
     </React.StrictMode>,
 );