@adobe/spectrum-tokens 0.0.0-tabs-20230503165321

package/tasks/buildManifest.js

@@ -0,0 +1,20 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import glob from "glob-promise";
+import { writeFile } from "fs/promises";
+
+const manifestFileName = "manifest.json";
+const files = await glob("src/**/*.json");
+
+await writeFile(manifestFileName, JSON.stringify(files, null, 2));
+console.log(`Wrote ${manifestFileName} with ${files.length} files.`);

package/tasks/buildSpectrumTokens.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import StyleDictionary from "style-dictionary";
+import {
+  JsonSetsFormatter,
+  NameKebabTransfom,
+  DroverJsonFormatter,
+  AttributeSetsTransform,
+} from "style-dictionary-sets";
+
+StyleDictionary.registerTransform(AttributeSetsTransform);
+StyleDictionary.registerTransform(NameKebabTransfom);
+StyleDictionary.registerFormat(JsonSetsFormatter);
+StyleDictionary.registerFormat(DroverJsonFormatter);
+
+StyleDictionary.extend({
+  source: ["src/**/*.json"],
+  platforms: {
+    JSON: {
+      buildPath: "dist/json/",
+      transforms: [NameKebabTransfom.name],
+      files: [
+        {
+          destination: "variables.json",
+          format: JsonSetsFormatter.name,
+          options: {
+            showFileHeader: false,
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    Drover: {
+      buildPath: "dist/json/",
+      transforms: [AttributeSetsTransform.name, NameKebabTransfom.name],
+      files: [
+        {
+          destination: "drover.json",
+          format: "drover/json/sets",
+          options: {
+            showFileHeader: false,
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();

package/tasks/deprecateExpress.js

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import glob from "glob-promise";
+import { readFile, writeFile } from "fs/promises";
+import augmentExpressTokens from "./lib/augmentExpressTokens.js";
+
+const files = await glob("src/**/*.json");
+files.forEach(async (fileName) => {
+  const fileTokens = JSON.parse(await readFile(fileName, "utf8"));
+  const result = augmentExpressTokens(fileTokens);
+  await writeFile(fileName, JSON.stringify(result, null, 2));
+  console.log(`Updated ${fileName}.`);
+});

package/tasks/diff.js

@@ -0,0 +1,130 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { access, readFile, writeFile } from "fs/promises";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { detailedDiff, diff } from "deep-object-diff";
+import { exec } from "node:child_process";
+import { promisify } from "util";
+import tar from "tar";
+import tmp from "tmp-promise";
+
+const execP = promisify(exec);
+
+const tag = "latest";
+const tokenPath = "dist/json/variables.json";
+const localRootDir = join(dirname(fileURLToPath(import.meta.url)), "..");
+const localTokenPath = join(localRootDir, tokenPath);
+
+run()
+  .then(() => {
+    process.exit();
+  })
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+
+async function run() {
+  const [newTokens, oldTokens] = await Promise.all([
+    getNewTokens(),
+    getOldTokens(),
+  ]);
+
+  const diffResult = detailedDiff(oldTokens, newTokens);
+
+  calculatePossibleRenames(diffResult, oldTokens, newTokens);
+
+  logResultCategory(diffResult, "added");
+  logResultCategory(diffResult, "deleted");
+  logResultCategory(diffResult, "updated", "Token values updated");
+  logResultCategory(diffResult, "possiblyRenamed", "Tokens possibly renamed");
+}
+
+async function getNewTokens() {
+  try {
+    await access(localTokenPath);
+    return JSON.parse(await readFile(localTokenPath, { encoding: "utf8" }));
+  } catch {
+    console.error("cannot access");
+  }
+}
+
+async function getOldTokens() {
+  const tmpDir = await tmp.dir();
+  const { stdout, stderr } = await execP(
+    `npm pack @adobe/spectrum-tokens@${tag} --pack-destination ${tmpDir.path}`,
+  );
+  await tar.x({
+    cwd: tmpDir.path,
+    file: join(tmpDir.path, stdout.trim()),
+  });
+  const oldTokenPath = join(tmpDir.path, "package", tokenPath);
+  await access(oldTokenPath);
+  return JSON.parse(await readFile(oldTokenPath, { encoding: "utf8" }));
+}
+
+function calculatePossibleRenames(diffResult, oldTokens, newTokens) {
+  diffResult.possiblyRenamed = {};
+  Object.keys(diffResult.deleted).forEach((deletedTokenName) => {
+    const oldTokenValue = oldTokens[deletedTokenName];
+    const allValueMatches = [];
+    Object.keys(diffResult.added).forEach((addedTokenName, i) => {
+      const newTokenValue = newTokens[addedTokenName];
+      if (Object.keys(diff(oldTokenValue, newTokenValue)).length === 0) {
+        allValueMatches.push(addedTokenName);
+      }
+    });
+    if (allValueMatches.length > 0) {
+      diffResult.possiblyRenamed[deletedTokenName] = allValueMatches;
+    }
+  });
+}
+
+function logResultCategory(diffResult, categoryKey, msg) {
+  const results = diffResult[categoryKey];
+  const resultCount = Object.keys(results).length;
+  if (!msg) {
+    msg = `Tokens ${categoryKey}`;
+  }
+  if (resultCount > 0) {
+    console.log(`\n*${msg} (${resultCount}):*`);
+    switch (categoryKey) {
+      case "possiblyRenamed":
+        Object.keys(results)
+          .sort()
+          .forEach((oldTokenName, i) => {
+            if (
+              Array.isArray(results[oldTokenName]) &&
+              results[oldTokenName].length > 1
+            ) {
+              console.log(
+                `  - Old name: \`${oldTokenName}\`, new name options:`,
+              );
+              results[oldTokenName].forEach((newTokenName) =>
+                console.log(`    - \`${newTokenName}\``),
+              );
+            } else {
+              console.log(
+                `  - \`${oldTokenName}\` -> \`${results[oldTokenName][0]}\``,
+              );
+            }
+          });
+        break;
+      default:
+        Object.keys(results)
+          .sort()
+          .forEach((tokenName, i) => console.log(`  - \`${tokenName}\``));
+    }
+  }
+}

package/tasks/lib/augmentExpressTokens.js

@@ -0,0 +1,52 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const deprecationObj = {
+  deprecated: true,
+  deprecated_comment:
+    "Express will merge with Spectrum with the release of Spectrum 2.",
+};
+
+const findExpressValue = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    if (tokenObj.hasOwnProperty("value")) {
+      return {
+        ...tokenObj,
+        ...deprecationObj,
+      };
+    } else {
+      const result = {};
+      Object.keys(tokenObj).forEach((tokenName) => {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      });
+      return result;
+    }
+  }
+};
+
+const augmentExpressTokens = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    const result = {};
+    Object.keys(tokenObj).forEach((tokenName) => {
+      if (tokenName === "express") {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      } else {
+        result[tokenName] = augmentExpressTokens(tokenObj[tokenName]);
+      }
+    });
+    return result;
+  } else {
+    return tokenObj;
+  }
+};
+
+export default augmentExpressTokens;

package/test/deprecateExpress.test.js

@@ -0,0 +1,50 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import test from "ava";
+import augmentExpressTokens from "../tasks/lib/augmentExpressTokens.js";
+
+const fixture = {
+  foo: {
+    express: {
+      value: "bar",
+    },
+  },
+  "corner-radius-100": {
+    sets: {
+      spectrum: {
+        sets: {
+          desktop: {
+            value: "4px",
+          },
+          mobile: {
+            value: "5px",
+          },
+        },
+      },
+      express: {
+        sets: {
+          desktop: {
+            value: "6px",
+          },
+          mobile: {
+            value: "8px",
+          },
+        },
+      },
+    },
+  },
+};
+
+test("Deprecate Express should add deprecation metadata to Express tokens", (t) => {
+  t.snapshot(augmentExpressTokens(fixture));
+});

package/test/drover.test.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import test from "ava";
+import { readFile } from "fs/promises";
+
+const getValue = (obj, setName) => {
+  if (obj.hasOwnProperty("value")) {
+    return obj.value;
+  } else if (obj.hasOwnProperty("sets")) {
+    if (obj.sets.hasOwnProperty(setName)) {
+      return getValue(obj.sets[setName], setName);
+    } else if (obj.sets.hasOwnProperty("spectrum")) {
+      return getValue(obj.sets.spectrum, setName);
+    }
+  }
+};
+
+const vars = { light: {}, dark: {}, darkest: {} };
+let variables;
+let drover;
+
+test.before(async (t) => {
+  variables = JSON.parse(
+    await readFile("dist/json/variables.json", { encoding: "utf8" }),
+  );
+  drover = JSON.parse(
+    await readFile("dist/json/drover.json", { encoding: "utf8" }),
+  );
+  Object.keys(drover.colorThemes.light).forEach((tokenName) => {
+    vars.light[tokenName] = getValue(variables[tokenName], "light");
+  });
+  Object.keys(drover.colorThemes.dark).forEach((tokenName) => {
+    vars.dark[tokenName] = getValue(variables[tokenName], "dark");
+  });
+  Object.keys(drover.colorThemes.darkest).forEach((tokenName) => {
+    vars.darkest[tokenName] = getValue(variables[tokenName], "darkest");
+  });
+});
+
+test("Drover should match light variable values", (t) => {
+  t.deepEqual(drover.colorThemes.light, vars.light);
+});
+test("Drover should match dark variable values", (t) => {
+  t.deepEqual(drover.colorThemes.dark, vars.dark);
+});
+test("Drover should match darkest variable values", (t) => {
+  t.deepEqual(drover.colorThemes.darkest, vars.darkest);
+});

package/test/snapshots/deprecateExpress.test.js.md

@@ -0,0 +1,47 @@
+# Snapshot report for `test/deprecateExpress.test.js`
+
+The actual snapshot is saved in `deprecateExpress.test.js.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## Deprecate Express should add deprecation metadata to Express tokens
+
+> Snapshot 1
+
+    {
+      'corner-radius-100': {
+        sets: {
+          express: {
+            sets: {
+              desktop: {
+                deprecated: true,
+                deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+                value: '6px',
+              },
+              mobile: {
+                deprecated: true,
+                deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+                value: '8px',
+              },
+            },
+          },
+          spectrum: {
+            sets: {
+              desktop: {
+                value: '4px',
+              },
+              mobile: {
+                value: '5px',
+              },
+            },
+          },
+        },
+      },
+      foo: {
+        express: {
+          deprecated: true,
+          deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+          value: 'bar',
+        },
+      },
+    }