@interactivethings/scripts 0.0.9 → 2.0.2

package/dist/tokens-studio/mui.js

@@ -0,0 +1,212 @@
+#!/usr/bin/env node
+"use strict";
+/**
+ * This script transforms tokens exported with tokens-studio in Figma into
+ * a format that is easier to work with when using MUI.
+ * You can run it via `pnpm run design:tokens`
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = exports.configParser = void 0;
+const fs = __importStar(require("fs"));
+const argparse_1 = require("argparse");
+const remeda_1 = require("remeda");
+const simplifyValues = (x) => {
+    if (typeof x === "string") {
+        return x;
+    }
+    else if (typeof x === "object" && !!x) {
+        if ("value" in x) {
+            return x.value;
+        }
+        else {
+            return (0, remeda_1.mapValues)(x, simplifyValues);
+        }
+    }
+};
+const kebabCase = (x) => {
+    return x
+        .split(" ")
+        .map((t, i) => {
+        if (i === 0) {
+            return t.toLowerCase();
+        }
+        else {
+            return `${t[0].toUpperCase()}${t.substring(1).toLowerCase()}`;
+        }
+    })
+        .join("");
+};
+const renameColorKeys = (k) => {
+    return kebabCase(k
+        .replace(/-[a-zA-Z0-9]+/, "")
+        .replace(" - ", " ")
+        .replace(",", "")
+        .replace(/^\d+\s+/, ""));
+};
+const renameColorKeysEntries = (obj) => {
+    const visitor = (k, v) => {
+        if (typeof v === "object") {
+            return [renameColorKeys(k), mapEntries(v, visitor)];
+        }
+        else {
+            return [renameColorKeys(k), v];
+        }
+    };
+    return mapEntries(obj, visitor);
+};
+const mapEntries = (x, mapper) => {
+    return Object.fromEntries(Object.entries(x).map(([k, v]) => mapper(k, v)));
+};
+const getPalette = (tokensData) => {
+    const data = tokensData.global;
+    const colorKeys = ["Base", "Functional"];
+    let palette = (0, remeda_1.pick)(data, colorKeys);
+    palette = (0, remeda_1.mapValues)(palette, simplifyValues);
+    palette = renameColorKeysEntries(palette);
+    palette = {
+        ...palette.base,
+        ...(0, remeda_1.pick)(palette, ["functional"]),
+    };
+    return palette;
+};
+const getTypography = (tokensData) => {
+    const sizes = ["Desktop", "Mobile"];
+    const res = {};
+    const index = {};
+    for (const k of [
+        "fontFamilies",
+        "lineHeights",
+        "fontWeights",
+        "fontSize",
+        "letterSpacing",
+        "textDecoration",
+    ]) {
+        for (const [vName, value] of Object.entries(tokensData.global[k])) {
+            index[`${k}.${vName}`] = value;
+        }
+    }
+    const maybeParseToNumber = (x) => {
+        const parsed = Number(x);
+        if (Number.isNaN(x)) {
+            return x;
+        }
+        else {
+            return parsed;
+        }
+    };
+    const maybeParseToPx = (x) => {
+        if (typeof x === "number") {
+            return `${x}px`;
+        }
+        else {
+            return x;
+        }
+    };
+    const cleanupFns = {
+        fontWeight: (x) => {
+            const lowered = x.toLowerCase();
+            if (lowered == "regular") {
+                return 400;
+            }
+            return lowered;
+        },
+        fontSize: maybeParseToNumber,
+        lineHeight: (x) => maybeParseToPx(maybeParseToNumber(x)),
+        paragraphSpacing: maybeParseToNumber,
+        letterSpacing: maybeParseToNumber,
+    };
+    const cleanup = (k, v) => {
+        if (k in cleanupFns) {
+            return [k, cleanupFns[k](v)];
+        }
+        else {
+            return [k, v];
+        }
+    };
+    const resolve = (str) => {
+        if (str[0] === "{" && str[str.length - 1] === "}") {
+            const path = str.substring(1, str.length - 1);
+            return index[path]?.value;
+        }
+        else {
+            return str;
+        }
+    };
+    for (const size of sizes) {
+        const typographies = tokensData.global[size];
+        for (const [typo, typoDataRaw] of Object.entries(typographies)) {
+            const typoData = typoDataRaw;
+            const typoKey = kebabCase(typo.toLowerCase());
+            res[typoKey] = res[typoKey] || {};
+            res[typoKey][size.toLowerCase()] = mapEntries((0, remeda_1.mapValues)(typoData.value, resolve), cleanup);
+        }
+    }
+    return res;
+};
+const getShadows = (tokenData) => {
+    const transformShadow = (shadowData) => {
+        const { color, x, y, blur, spread } = shadowData;
+        return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+    };
+    const shadows = mapEntries(tokenData.global.Elevation, (k, v) => [
+        `${Number(k.replace("dp", "").replace("pd", ""))}`,
+        Array.isArray(v.value)
+            ? v.value.map(transformShadow).join(", ")
+            : transformShadow(v.value),
+    ]);
+    return shadows;
+};
+const transform = (tokenData) => {
+    const palette = getPalette(tokenData);
+    const typography = getTypography(tokenData);
+    const shadows = getShadows(tokenData);
+    return {
+        palette,
+        typography,
+        shadows,
+    };
+};
+const configParser = (parser) => {
+    parser.add_argument("input");
+    parser.add_argument("output");
+};
+exports.configParser = configParser;
+const run = (parser) => {
+    const args = parser.parse_args();
+    const content = JSON.parse(fs.readFileSync(args.input).toString());
+    const transformed = transform(content);
+    fs.writeFileSync(args.output === "-" ? process.stdout.fd : args.output, JSON.stringify(transformed, null, 2));
+};
+exports.run = run;
+const main = () => {
+    const parser = new argparse_1.ArgumentParser();
+    (0, exports.configParser)(parser);
+    (0, exports.run)(parser);
+};
+// Only run main if this file is being executed directly
+if (require.main === module) {
+    main();
+}

package/dist/tokens-studio/require.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ourRequire = void 0;
+const jiti_1 = require("jiti");
+const jiti = (0, jiti_1.createJiti)(__filename);
+// A simple wrapper around require to make it easier to mock in tests
+const ourRequire = async (modulePath) => {
+    const transformerModule = await jiti.import(modulePath);
+    if (!(typeof transformerModule === "object" &&
+        transformerModule &&
+        "transform" in transformerModule) ||
+        typeof transformerModule.transform !== "function") {
+        throw new Error(`Module does not export a 'transform' function: ${modulePath}`);
+    }
+    return transformerModule;
+};
+exports.ourRequire = ourRequire;

package/dist/tokens-studio/tailwind.js

@@ -0,0 +1,211 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const remeda_1 = require("remeda");
+const isToken = (obj) => {
+    return typeof obj === "object" && "value" in obj && "type" in obj;
+};
+const tokensDir = path.join(__dirname, "tokens");
+const readJsonFile = (filePath) => {
+    return JSON.parse(fs.readFileSync(filePath, "utf-8"));
+};
+const resolveReferences = (obj, map) => {
+    const resolveValue = (value) => {
+        if (typeof value === "string" &&
+            value.startsWith("{") &&
+            value.endsWith("}")) {
+            const key = value.slice(1, -1);
+            return map.get(key) ?? value;
+        }
+        return value;
+    };
+    const traverse = (obj, currentPath = []) => {
+        for (const key in obj) {
+            const newPath = [...currentPath, key];
+            if (obj[key] && typeof obj[key] === "object") {
+                const maybeToken = obj[key];
+                if (isToken(maybeToken)) {
+                    const fullPath = newPath.join(".");
+                    map.set(fullPath, maybeToken.value);
+                    maybeToken.value = resolveValue(maybeToken.value);
+                }
+                else {
+                    traverse(maybeToken, newPath);
+                }
+            }
+        }
+    };
+    traverse(obj);
+};
+const deepMerge = function (mergedTokens, tokenData) {
+    for (const key in tokenData) {
+        if (tokenData.hasOwnProperty(key)) {
+            if (typeof tokenData[key] === "object" &&
+                !Array.isArray(tokenData[key]) &&
+                tokenData[key] !== null) {
+                if (!mergedTokens[key]) {
+                    mergedTokens[key] = {};
+                }
+                deepMerge(mergedTokens[key], tokenData[key]);
+            }
+            else {
+                mergedTokens[key] = tokenData[key];
+            }
+        }
+    }
+};
+const main = () => {
+    const metadata = readJsonFile(path.join(tokensDir, "$metadata.json"));
+    const mergedTokens = {};
+    metadata.tokenSetOrder.forEach((tokenFile) => {
+        const tokenFilePath = path.join(tokensDir, `${tokenFile}.json`);
+        const tokenData = readJsonFile(tokenFilePath);
+        deepMerge(mergedTokens, tokenData);
+    });
+    const valueMap = new Map();
+    resolveReferences(mergedTokens, valueMap);
+    const theme = {
+        colors: {
+            ...(0, remeda_1.pick)(mergedTokens.core, [
+                "amber",
+                "blue",
+                "brand",
+                "cyan",
+                "emerald",
+                "fuchsia",
+                "green",
+                "indigo",
+                "light-blue",
+                "lime",
+                "midnight",
+                "monochrome",
+                "orange",
+                "pink",
+                "purple",
+                "red",
+                "rose",
+                "teal",
+                "violet",
+                "yellow",
+            ]),
+            ...(0, remeda_1.pick)(mergedTokens.functional, [
+                "primary",
+                "secondary",
+                "tertiary",
+                "error",
+                "success",
+                "warning",
+                "link",
+                "surface",
+                "on-surface",
+                "surface-inverted",
+                "on-surface-inverted",
+                "border",
+                "input",
+                "accent",
+                "qualitative",
+                "pathways",
+            ]),
+        },
+        borderWidth: {
+            ...mergedTokens.functional["border-width"],
+        },
+        borderRadius: {
+            ...mergedTokens.functional["border-radius"],
+        },
+        fontSize: mergedTokens.core["font-size"],
+        fontWeight: mergedTokens.core["font-weight"],
+        lineHeight: mergedTokens.core["line-height"],
+        spacing: mergedTokens.functional.spacing,
+    };
+    const formatValues = (v) => {
+        return v.value;
+    };
+    const transformKey = (key, depth) => {
+        if (key.startsWith("on-")) {
+            if (depth === 1) {
+                return key.replace("on-", "foreground-");
+            }
+            else {
+                return "foreground";
+            }
+        }
+        if (key === "default") {
+            return "DEFAULT";
+        }
+        return key;
+    };
+    const flattenTokens = (v, depth = 0) => {
+        if (typeof v === "object") {
+            if (isToken(v)) {
+                return formatValues(v);
+            }
+            return mapEntries(v, (k, v) => {
+                return [
+                    transformKey(k, depth + 1),
+                    flattenTokens(v, depth + 1),
+                ];
+            });
+        }
+        return v;
+    };
+    const flattenedTheme = (0, remeda_1.mapValues)(theme, (x) => flattenTokens(x, 0));
+    const lineHeights = flattenedTheme.lineHeight;
+    const fontWeights = flattenedTheme.fontWeight;
+    const finalTheme = {
+        ...flattenedTheme,
+        borderWidth: (0, remeda_1.mapValues)(flattenedTheme.borderWidth, (x) => `${x}px`),
+        borderRadius: (0, remeda_1.mapValues)(flattenedTheme.borderRadius, (x) => `${x}px`),
+        fontSize: mapEntries(flattenedTheme.fontSize["mobile-large"], (k, value) => {
+            return [
+                k.replace(",", ""),
+                [
+                    `${value}px`,
+                    {
+                        lineHeight: lineHeights["mobile-large"][k]
+                            ? `${lineHeights["mobile-large"][k]}px`
+                            : undefined,
+                        fontWeight: fontWeights[k],
+                    },
+                ],
+            ];
+        }),
+        fontWeight: flattenedTheme.fontWeight,
+        lineHeight: mapEntries(flattenedTheme.lineHeight["mobile-large"], (k, value) => {
+            return [k.replace(",", ""), `${value}px`];
+        }),
+        backgroundImage: {
+            "gradient-2": "var(--Gradient-2, linear-gradient(135deg, var(--core-brand-electricblue500, #48A1C7) 20.83%, var(--core-brand-nocturne700, #336476) 87.96%))",
+        },
+        spacing: mapEntries(flattenedTheme.spacing, (k, v) => [k.replace("spacing-", ""), `${v}px`]),
+    };
+    fs.writeFileSync("./theme.json", JSON.stringify(finalTheme, null, 2));
+};
+const mapEntries = (obj, mapper) => {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => mapper(key, value)));
+};
+main();

package/dist/tokens-studio/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/tokens-studio/utils.d.ts

@@ -0,0 +1,49 @@
+import { $IntentionalAny } from "../types";
+/**
+ * Shared utility functions for tokens-studio transformations
+ */
+/**
+ * Simplifies nested token values by extracting the 'value' property
+ */
+export declare const simplifyValues: (x: {
+    value: unknown;
+} | string | null) => $IntentionalAny;
+/**
+ * Converts space-separated strings to camelCase
+ */
+export declare const kebabCase: (x: string) => string;
+/**
+ * Maps over object entries with a custom mapper function
+ */
+export declare const mapEntries: <K extends string | number | symbol, V, K2 extends string | number | symbol, V2>(obj: Record<K, V>, mapper: (key: K, value: V) => [K2, V2]) => Record<K2, V2>;
+/**
+ * Attempts to parse a string or number to a number, returns original if not possible
+ */
+export declare const maybeParseToNumber: (x: string | number) => string | number;
+/**
+ * Converts a value to pixels (adds 'px' suffix if it's a number)
+ */
+export declare const maybeParseToPx: (x: string | number) => string;
+/**
+ * Type guard to check if an object is a token with value and type properties
+ */
+export declare const isToken: (obj: any) => obj is {
+    value: string;
+    type: string;
+};
+/**
+ * Deep merge utility for combining token objects
+ */
+export declare const deepMerge: (mergedTokens: any, tokenData: any) => void;
+/**
+ * Resolves token references (strings like "{path.to.token}") using a value map
+ */
+export declare const resolveReferences: (obj: any, map: Map<string, string>) => void;
+/**
+ * Formats token values by extracting the value property
+ */
+export declare const formatValues: (v: {
+    type: string;
+    value: string | number;
+}) => string | number;
+export declare const flattenTokens: (v: any, depth: number | undefined, transformKey: (key: string, depth: number) => string) => unknown;

package/dist/tokens-studio/utils.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenTokens = exports.formatValues = exports.resolveReferences = exports.deepMerge = exports.isToken = exports.maybeParseToPx = exports.maybeParseToNumber = exports.mapEntries = exports.kebabCase = exports.simplifyValues = void 0;
+const remeda_1 = require("remeda");
+/**
+ * Shared utility functions for tokens-studio transformations
+ */
+/**
+ * Simplifies nested token values by extracting the 'value' property
+ */
+const simplifyValues = (x) => {
+    if (typeof x === "string") {
+        return x;
+    }
+    else if (typeof x === "object" && !!x) {
+        if ("value" in x) {
+            return x.value;
+        }
+        else {
+            return (0, remeda_1.mapValues)(x, exports.simplifyValues);
+        }
+    }
+};
+exports.simplifyValues = simplifyValues;
+/**
+ * Converts space-separated strings to camelCase
+ */
+const kebabCase = (x) => {
+    return x
+        .split(" ")
+        .map((t, i) => {
+        if (i === 0) {
+            return t.toLowerCase();
+        }
+        else {
+            return `${t[0].toUpperCase()}${t.substring(1).toLowerCase()}`;
+        }
+    })
+        .join("");
+};
+exports.kebabCase = kebabCase;
+/**
+ * Maps over object entries with a custom mapper function
+ */
+const mapEntries = (obj, mapper) => {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => mapper(key, value)));
+};
+exports.mapEntries = mapEntries;
+/**
+ * Attempts to parse a string or number to a number, returns original if not possible
+ */
+const maybeParseToNumber = (x) => {
+    const parsed = Number(x);
+    if (Number.isNaN(parsed)) {
+        return x;
+    }
+    else {
+        return parsed;
+    }
+};
+exports.maybeParseToNumber = maybeParseToNumber;
+/**
+ * Converts a value to pixels (adds 'px' suffix if it's a number)
+ */
+const maybeParseToPx = (x) => {
+    if (typeof x === "number") {
+        return `${x}px`;
+    }
+    else {
+        return x;
+    }
+};
+exports.maybeParseToPx = maybeParseToPx;
+/**
+ * Type guard to check if an object is a token with value and type properties
+ */
+const isToken = (obj) => {
+    return typeof obj === "object" && "value" in obj && "type" in obj;
+};
+exports.isToken = isToken;
+/**
+ * Deep merge utility for combining token objects
+ */
+const deepMerge = (mergedTokens, tokenData) => {
+    for (const key in tokenData) {
+        if (tokenData.hasOwnProperty(key)) {
+            if (typeof tokenData[key] === "object" &&
+                !Array.isArray(tokenData[key]) &&
+                tokenData[key] !== null) {
+                if (!mergedTokens[key]) {
+                    mergedTokens[key] = {};
+                }
+                (0, exports.deepMerge)(mergedTokens[key], tokenData[key]);
+            }
+            else {
+                mergedTokens[key] = tokenData[key];
+            }
+        }
+    }
+};
+exports.deepMerge = deepMerge;
+/**
+ * Resolves token references (strings like "{path.to.token}") using a value map
+ */
+const resolveReferences = (obj, map) => {
+    const resolveValue = (value) => {
+        var _a;
+        if (typeof value === "string" &&
+            value.startsWith("{") &&
+            value.endsWith("}")) {
+            const key = value.slice(1, -1);
+            return (_a = map.get(key)) !== null && _a !== void 0 ? _a : value;
+        }
+        return value;
+    };
+    const traverse = (obj, currentPath = []) => {
+        for (const key in obj) {
+            const newPath = [...currentPath, key];
+            if (obj[key] && typeof obj[key] === "object") {
+                const maybeToken = obj[key];
+                if ((0, exports.isToken)(maybeToken)) {
+                    const fullPath = newPath.join(".");
+                    map.set(fullPath, maybeToken.value);
+                    maybeToken.value = resolveValue(maybeToken.value);
+                }
+                else {
+                    traverse(maybeToken, newPath);
+                }
+            }
+        }
+    };
+    traverse(obj);
+};
+exports.resolveReferences = resolveReferences;
+/**
+ * Formats token values by extracting the value property
+ */
+const formatValues = (v) => {
+    return v.value;
+};
+exports.formatValues = formatValues;
+const flattenTokens = (v, depth = 0, transformKey) => {
+    if (typeof v === "object") {
+        if ((0, exports.isToken)(v)) {
+            return (0, exports.formatValues)(v);
+        }
+        return (0, exports.mapEntries)(v, (k, v) => {
+            return [
+                transformKey(k, depth + 1),
+                (0, exports.flattenTokens)(v, depth + 1, transformKey),
+            ];
+        });
+    }
+    return v;
+};
+exports.flattenTokens = flattenTokens;

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type $IntentionalAny = any;

package/dist/vercel/cli.d.ts

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { ArgumentParser } from "argparse";
+export declare const configParser: (parser: ArgumentParser) => void;
+export declare const run: (parser: ArgumentParser) => Promise<void>;