@interactivethings/scripts 0.0.4 → 0.0.6

package/dist/mui-tokens-studio.js

@@ -0,0 +1,176 @@
+"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`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = 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 main = () => {
+    const parser = new argparse_1.ArgumentParser();
+    parser.add_argument("input");
+    parser.add_argument("output");
+    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));
+};
+main();

package/dist/types.js

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

package/dist/wait-for-vercel-deploy.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const argparse_1 = require("argparse");
+const accessToken = process.env.VERCEL_TOKEN;
+async function fetchDeploymentForCommit(commitSha, teamId, projectId) {
+    try {
+        const response = await fetch(`https://vercel.com/api/v6/deployments?limit=20&projectId=${projectId}&state=READY,ERROR,BUILDING,QUEUED&teamId=${teamId}`, {
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+            },
+        }).then((x) => x.json());
+        const deployments = response.deployments.filter((deployment) => deployment.meta.githubCommitSha === commitSha);
+        return deployments;
+    }
+    catch (error) {
+        console.error("Error:", error);
+        return [];
+    }
+}
+const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration));
+async function waitForDeploymentReady({ team, project, commitSha, interval, timeout, }) {
+    const start = Date.now();
+    const end = start + timeout;
+    while (Date.now() < end) {
+        const deployments = await fetchDeploymentForCommit(commitSha, team, project);
+        if (deployments.length === 0 || deployments[0].state !== "READY") {
+            const state = deployments[0].state;
+            if (state === "ERROR") {
+                throw new Error("Deployment errored");
+            }
+            console.log(`Deployment not yet ready (state: ${deployments[0].state}), waiting ${interval}ms for deployment with commit ${commitSha}`);
+            await sleep(Math.min(end - Date.now(), interval));
+        }
+        else {
+            console.log(`Deployment for commit ${commitSha} is READY`);
+            return deployments[0];
+        }
+    }
+    if (Date.now() > end) {
+        throw new Error("Timeout for waitForDeploymentReady");
+    }
+}
+async function main() {
+    const parser = new argparse_1.ArgumentParser();
+    parser.add_argument("commit", {
+        help: "Commit that started the deployment",
+    });
+    parser.add_argument("--interval", {
+        default: 5000,
+        type: Number,
+    });
+    parser.add_argument("--project", {
+        required: true,
+    });
+    parser.add_argument("--team", {
+        required: true,
+    });
+    parser.add_argument("--timeout", {
+        default: 10 * 60 * 1000,
+        type: Number,
+    });
+    const args = parser.parse_args();
+    const deployment = await waitForDeploymentReady({
+        commitSha: args.commit,
+        interval: args.interval,
+        timeout: args.timeout,
+        team: args.team,
+        project: args.project,
+    });
+    if (!deployment) {
+        throw new Error("Could not retrieve deployment");
+    }
+    console.log(`DEPLOYMENT_URL=https://${deployment.url}`);
+}
+main().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "@interactivethings/scripts",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "index.js",
   "repository": "git@github.com:interactivethings/ixt-scripts.git",
   "author": "Interactive Things <we@interactivethings.com>",
   "license": "MIT",
+  "bin": {
+    "wait-for-vercel-deploy": "dist/wait-for-vercel-deploy.js",
+    "mui-tokens-studio": "mui-tokens-studio.js"
+  },
+  "files": ["dist", "README.md"],
   "dependencies": {
+    "@types/argparse": "^2.0.12",
     "argparse": "^2.0.1",
     "remeda": "^1.19.0"
   },
   "devDependencies": {
-    "@types/node": "^20.3.1"
+    "@types/node": "^20.3.1",
+    "typescript": "^5.2.2"
   }
 }

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false
-}

package/mui-tokens-studio.ts

@@ -1,227 +0,0 @@
-/**
- * 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`
- */
-
-import fs from "fs";
-
-import { ArgumentParser } from "argparse";
-import { mapValues, pick } from "remeda";
-
-import { $IntentionalAny } from "./types";
-
-const simplifyValues = (
-  x: { value: unknown } | string | null
-): $IntentionalAny => {
-  if (typeof x === "string") {
-    return x;
-  } else if (typeof x === "object" && !!x) {
-    if ("value" in x) {
-      return x.value;
-    } else {
-      return mapValues(x, simplifyValues);
-    }
-  }
-};
-
-const kebabCase = (x: string) => {
-  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: string) => {
-  return kebabCase(
-    k
-      .replace(/-[a-zA-Z0-9]+/, "")
-      .replace(" - ", " ")
-      .replace(",", "")
-      .replace(/^\d+\s+/, "")
-  );
-};
-
-const renameColorKeysEntries = (obj: $IntentionalAny) => {
-  const visitor = (k: string, v: $IntentionalAny) => {
-    if (typeof v === "object") {
-      return [renameColorKeys(k), mapEntries(v, visitor)] as [
-        string,
-        $IntentionalAny
-      ];
-    } else {
-      return [renameColorKeys(k), v] as [string, $IntentionalAny];
-    }
-  };
-  return mapEntries(obj, visitor);
-};
-
-const mapEntries = (
-  x: $IntentionalAny,
-  mapper: (k: string, v: $IntentionalAny) => [string, $IntentionalAny]
-) => {
-  return Object.fromEntries(Object.entries(x).map(([k, v]) => mapper(k, v)));
-};
-
-const getPalette = (tokensData: $IntentionalAny) => {
-  const data = tokensData.global;
-  const colorKeys = ["Base", "Functional"];
-
-  let palette = pick(data, colorKeys);
-  palette = mapValues(palette, simplifyValues);
-  palette = renameColorKeysEntries(palette);
-  palette = {
-    ...palette.base,
-    ...pick(palette, ["functional"]),
-  };
-  return palette;
-};
-
-const getTypography = (tokensData: $IntentionalAny) => {
-  const sizes = ["Desktop", "Mobile"];
-  const res = {} as Record<string, $IntentionalAny>;
-  const index = {} as Record<string, $IntentionalAny>;
-  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: string | number) => {
-    const parsed = Number(x);
-    if (Number.isNaN(x)) {
-      return x;
-    } else {
-      return parsed;
-    }
-  };
-
-  const maybeParseToPx = (x: string | number) => {
-    if (typeof x === "number") {
-      return `${x}px`;
-    } else {
-      return x;
-    }
-  };
-
-  const cleanupFns = {
-    fontWeight: (x: string) => {
-      const lowered = x.toLowerCase();
-      if (lowered == "regular") {
-        return 400;
-      }
-      return lowered;
-    },
-    fontSize: maybeParseToNumber,
-    lineHeight: (x: string | number) => maybeParseToPx(maybeParseToNumber(x)),
-    paragraphSpacing: maybeParseToNumber,
-    letterSpacing: maybeParseToNumber,
-  };
-
-  const cleanup = (k: string, v: $IntentionalAny) => {
-    if (k in cleanupFns) {
-      return [k, cleanupFns[k as keyof typeof cleanupFns](v)] as [
-        string,
-        $IntentionalAny
-      ];
-    } else {
-      return [k, v] as [string, $IntentionalAny];
-    }
-  };
-
-  const resolve = (str: string) => {
-    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 as { value: $IntentionalAny };
-      const typoKey = kebabCase(typo.toLowerCase());
-      res[typoKey] = res[typoKey] || {};
-      res[typoKey][size.toLowerCase()] = mapEntries(
-        mapValues(typoData.value, resolve),
-        cleanup
-      );
-    }
-  }
-  return res;
-};
-
-const getShadows = (tokenData: TokenData) => {
-  const transformShadow = (shadowData: ShadowValue) => {
-    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;
-};
-
-type ShadowValue = {
-  color: string;
-  x: string;
-  y: string;
-  blur: string;
-  spread: string;
-};
-type ShadowRecord = Record<
-  string,
-  { value: ShadowValue } | { value: ShadowValue[] }
->;
-
-type TokenData = {
-  global: {
-    Base: $IntentionalAny;
-    Function: $IntentionalAny;
-    Elevation: ShadowRecord;
-  };
-};
-
-const transform = (tokenData: TokenData) => {
-  const palette = getPalette(tokenData);
-  const typography = getTypography(tokenData);
-  const shadows = getShadows(tokenData);
-  return {
-    palette,
-    typography,
-    shadows,
-  };
-};
-
-const main = () => {
-  const parser = new ArgumentParser();
-  parser.add_argument("input");
-  parser.add_argument("output");
-  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)
-  );
-};
-
-main();

package/types.ts

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