Setup styledictionary

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+---
+name: Release
+on:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    runs-on: "ubuntu-latest"
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
+          run_install: true
+      - name: Build
+        run: pnpm build
+      - uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          automatic_release_tag: "latest"
+          prerelease: true
+          title: "WARP Token assets"
+          files: |
+            dist/

.gitignore

@@ -1,130 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+build/
+.DS_Store
+**/.DS_Store
+output/
+dist/
+.FIGMA_TOKEN

index.js

@@ -0,0 +1,130 @@
+import { generateSDAssets } from "./styledictionary.js";
+import { processAndWriteBrandColors } from "./processColors.js";
+import { processAndWriteSemanticAndComponentTokens } from "./processTokens.js";
+import { zip } from "zip-a-folder";
+import fs from "fs-extra";
+import ora from "ora";
+import path from "node:path";
+import prompts from "prompts";
+
+// The Figma project where we can find our icons
+const FIGMA_PROJECT_ID = "oHBCzDdJxHQ6fmFLYWUltf";
+
+// Where we store the Figma token
+const FIGMA_TOKEN_PATH = "./.FIGMA_TOKEN";
+
+(async function main() {
+  const spinner = ora(
+    "Reading Figma access token from " + FIGMA_TOKEN_PATH
+  ).start();
+
+  let figmaToken = await readTokenFromDisk();
+
+  if (figmaToken) {
+    spinner.succeed("Using Figma access token from " + FIGMA_TOKEN_PATH);
+  } else {
+    spinner.warn("No Figma access token found");
+
+    const tokenPrompt = await prompts({
+      type: "text",
+      name: "figmaToken",
+      message:
+        "Enter your Figma access token (https://www.figma.com/developers/api#access-tokens)",
+    });
+
+    figmaToken = tokenPrompt.figmaToken;
+
+    const { saveToken } = await prompts({
+      type: "confirm",
+      name: "saveToken",
+      message: "Would you like to save the token?",
+    });
+
+    if (saveToken) {
+      await writeTokenToDisk(figmaToken);
+      spinner.succeed("Saved token to " + FIGMA_TOKEN_PATH);
+    }
+  }
+
+  spinner.start("Loading Figma project");
+
+  const res = await fetch(
+    `https://api.figma.com/v1/files/${FIGMA_PROJECT_ID}/variables/local`,
+    {
+      headers: {
+        "X-FIGMA-TOKEN": figmaToken,
+      },
+    }
+  );
+
+  if (!res.ok) {
+    throw new Error(json.err);
+  }
+
+  const json = await res.json();
+
+  try {
+    fs.ensureDirSync("./data/");
+
+    fs.outputFileSync("./data/figma.json", JSON.stringify(json), "utf8");
+    spinner.succeed(`Loaded Figma tokens`);
+  } catch (e) {
+    spinner.fail("Unable to load Figma tokens: " + e.message);
+    return;
+  }
+
+  spinner.start("Transforming Figma tokens to design tokens");
+  transform();
+  spinner.succeed("Design tokens written to disk");
+
+  spinner.start("Generating Style Dictionary assets");
+  generateSDAssets();
+  spinner.succeed("Style Dictionary assets generated");
+
+  spinner.start("Zipping assets");
+  await zipFiles();
+  spinner.succeed("Assets zipped for publishing");
+})();
+
+function writeTokenToDisk(token) {
+  return fs.outputFile(FIGMA_TOKEN_PATH, token, "utf8");
+}
+
+async function readTokenFromDisk() {
+  try {
+    const token = await fs.readFile(FIGMA_TOKEN_PATH, "utf8");
+    return token;
+  } catch {
+    return "";
+  }
+}
+
+function transform() {
+  const token = fs.readFileSync("./data/figma.json", "utf8");
+  const tokenVariableCollection = "VariableCollectionId:4546:841";
+  const sourceData = JSON.parse(token);
+  // Prepare the modes array from your source data
+  const modes =
+    sourceData.meta.variableCollections[tokenVariableCollection].modes;
+
+  // Process and write brand color files
+  processAndWriteBrandColors(
+    sourceData,
+    sourceData.meta.variableCollections,
+    sourceData.meta.variables,
+    tokenVariableCollection
+  );
+
+  // Process and write semantic and component tokens
+  processAndWriteSemanticAndComponentTokens(
+    sourceData,
+    tokenVariableCollection
+  );
+}
+
+async function zipFiles() {
+  fs.ensureDirSync('./dist');
+  await zip("./output/android", "./dist/android.zip");
+  await zip("./output/ios", "./dist/ios.zip");
+  await zip("./output/web", "./dist/web.zip");
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "tokens",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2",
+    "style-dictionary": "^3.9.2",
+    "zip-a-folder": "^3.1.6"
+  }
+}