@interactivethings/scripts 0.0.1

package/README.md

@@ -0,0 +1,28 @@
+# ixt-scripts
+
+Scripts shared across projects
+
+## Development
+
+```bash
+# Edit code
+yarn publish
+```
+
+## Installation
+
+```bash
+yarn add @interactivethings/scripts
+```
+
+## Usage
+
+In the following the steps, bun is used but you can also use ts-node as
+a Typescript runtime.
+
+### Tokens studio JSON to MUI JSON
+
+```bash
+# Add this command to package.json scripts
+bun ./node_modules/@interactivethings/scripts/mui-tokens-studio.ts src/styles/tokens.studio.json src/styles/tokens.mui.json
+```

package/mui-tokens-studio.ts

@@ -0,0 +1,226 @@
+/**
+ * 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 "src/utils/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/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@interactivethings/scripts",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": "git@github.com:interactivethings/ixt-scripts.git",
+  "author": "Interactive Things <we@interactivethings.com>",
+  "license": "MIT"
+}