@croquiscom/pds 8.34.4 → 8.35.0

package/figma.config.json

@@ -0,0 +1,8 @@
+{
+  "codeConnect": {
+    "include": ["src/**/*.{tsx,jsx}"],
+    "importPaths": {
+      "src/*": "@croquiscom/pds"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "8.34.4",
+  "version": "8.35.0",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
@@ -23,7 +23,7 @@
     "build": "npm run build-rollup && npm run test:type",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "changeset": "changeset",
-    "svgr": "yarn svgr:icons && yarn svgr:images",
+    "svgr": "yarn svgr:icons && yarn svgr:images && node ./scripts/figma-import-icons.js",
     "svgr:icons": "svgr --config-file .svgrrc.icons.js -- assets/icons",
     "svgr:images": "svgr --config-file .svgrrc.images.js -- assets/images",
     "release": "yarn build && changeset publish",
@@ -43,6 +43,7 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@figma/code-connect": "^1.0.6",
     "@figma/plugin-typings": "^1.97.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",

package/scripts/figma-import-icons.js

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const figma_rest_api = require('@figma/code-connect/dist/connect/figma_rest_api');
+const helpers = require('@figma/code-connect/dist/connect/helpers');
+require('dotenv').config();
+/**
+ * Fetch components from a figma file. If the `node-id` query parameter is used,
+ * only components within those frames will be included. This is useful if your
+ * file is very large, as this will speed up the query.
+ *
+ * @param fileOrNode a figma file URL
+ * @param match a function that returns true if the component should be included
+ * @returns
+ */
+async function getComponents(fileOrNode) {
+  if (!process.env.FIGMA_ACCESS_TOKEN) {
+    throw new Error('FIGMA_ACCESS_TOKEN is not set');
+  }
+  const fileKey = helpers.parseFileKey(fileOrNode);
+  if (!fileKey) {
+    throw new Error(`Invalid Figma file URL: ${fileOrNode}, file key missing`);
+  }
+  const nodeIds = helpers.parseNodeIds([fileOrNode]);
+  let apiUrl = figma_rest_api.getApiUrl(fileOrNode ?? '') + `/files/${fileKey}`;
+  if (nodeIds.length > 0) {
+    apiUrl += `?ids=${nodeIds.join(',')}`;
+  }
+  const doc = await figma_rest_api.getDocument(apiUrl, process.env.FIGMA_ACCESS_TOKEN);
+  // `doc` in this case will only include the top frame(s) passed via `ids`. We omit the
+  // nodeIds arg here because we want to return all components within the frame(s)
+  return helpers.findComponentsInDocument(doc).map((component) => ({
+    ...component,
+    fileKey,
+    figmaUrl: helpers.figmaUrlOfComponent(component, fileKey),
+    componentPropertyDefinitions: Object.keys(component.componentPropertyDefinitions ?? {}).reduce((result, key) => {
+      return {
+        ...result,
+        // this removes the ID prefix from property names e.g #123:name -> name
+        [helpers.normalizePropName(key)]: component.componentPropertyDefinitions[key],
+      };
+    }, {}),
+  }));
+}
+
+const fs = require('fs/promises');
+const path = require('path');
+
+async function generateIcons(workdir, url, prefix) {
+  const file_list = await fs.readdir(workdir);
+  const file_names = new Map();
+  file_list.forEach((name) => {
+    const match = /^(.+)\.tsx$/.exec(name);
+    if (match != null) {
+      const name = prefix + match[1];
+      file_names.set(name.toLowerCase(), name);
+    }
+  });
+
+  // fetch components from a figma file. If the `node-id` query parameter is used,
+  // only components within those frames will be included. This is useful if your
+  // file is very large, as this will speed up the query by a lot
+  let components = await getComponents(url);
+
+  components = components
+    .filter((component) => !component.name.startsWith('_') && !['Divider', 'Badge'].includes(component.name))
+    .map((component) => ({
+      ...component,
+      name: prefix + component.name,
+    }))
+    .filter((component) => file_names.has(component.name.toLowerCase()));
+
+  const unique_names = new Set([...components.map((c) => c.name)]);
+
+  await fs.writeFile(
+    path.resolve(workdir, 'index.figma.tsx'),
+    `\
+import figma from '@figma/code-connect';
+
+import {
+${Array.from(unique_names)
+  .map((icon_name) => `  ${file_names.get(icon_name.toLowerCase())},`)
+  .join('\n')}
+} from './index';
+
+${components.map((c) => `figma.connect(${file_names.get(c.name.toLowerCase())}, '${c.figmaUrl}');`).join('\n')}
+`,
+  );
+}
+
+async function main() {
+  await generateIcons(
+    path.resolve(__dirname, '../src/components/icons/generated'),
+    'https://www.figma.com/design/wywk2ryXpfBhqmT7gCLqA3/PDS-1.0.0?node-id=27143-50477&t=iHi25buXZJjDriTk-4',
+    'Icon',
+  );
+  await generateIcons(
+    path.resolve(__dirname, '../src/components/images/generated'),
+    'https://www.figma.com/design/wywk2ryXpfBhqmT7gCLqA3/PDS-1.0.0?node-id=32677-30981&t=Y6JYW1FKqR7VNCsj-4',
+    'Image',
+  );
+}
+
+main();