add figma.ts with bun

.env.sample

@@ -0,0 +1,2 @@
+FIGMA_TOKEN=
+FIGMA_FILE_KEY=6dWoWbMuEHiVN5qi1ybDAa

.gitattributes

@@ -0,0 +1 @@
+*.lockb binary diff=lockb

README.md

@@ -54,6 +54,27 @@ export const TwitterButton = () => (
 
 `currentColor` is set for the icon's path, so you can change the color using CSS.
 
+## Downloading SVGs from Figma
+
+You need to install [Bun](https://bun.sh/).
+
+```bash
+brew install oven-sh/bun/bun
+```
+
+Create `.env` file and add `FIGMA_TOKEN`.
+You can generate Figma Personal access token from [Figma settings page](https://www.figma.com/settings).
+
+```bash
+cp .env.example .env
+```
+
+You can download SVGs from Figma using the following command:
+
+```bash
+npm run figma
+```
+
 ## License
 
 This icon set is licensed under the [MIT License](https://github.com/ubie-oss/ubie-icons/blob/main/LICENSE).

package.json

@@ -26,7 +26,7 @@
     "native"
   ],
   "scripts": {
-    "figma": "node ./scripts/figma.js",
+    "figma": "bun scripts/figma.ts",
     "build:svg": "run-p build:svg:*",
     "build:svg:web": "svgr -d src assets",
     "build:svg:native": "svgr --native --template native-template.js -d src/native assets",
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
+    "@figma/rest-api-spec": "^0.13.0",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
@@ -56,7 +57,8 @@
     "react-native-svg": "^15.1.0",
     "storybook": "^8.0.9",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "@types/bun": "latest"
   },
   "peerDependencies": {
     "@types/react": "^17 || ^18",

scripts/figma.js → scripts/figma.ts

@@ -1,26 +1,34 @@
-const { resolve } = require('path');
-const { createWriteStream } = require('fs');
-const { pipeline } = require('stream');
-const { promisify } = require('util');
+import { resolve } from 'path';
+import { createWriteStream } from 'fs';
+import { pipeline } from 'stream';
+import { promisify } from 'util';
+import { GetFileComponentsResponse, GetImagesResponse } from '@figma/rest-api-spec';
+import { Readable } from 'stream'; // Add this import
+
 const TOKEN = process.env.FIGMA_TOKEN;
 const FIGMA_FILE_KEY = process.env.FIGMA_FILE_KEY;
-
-const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));
-
-const download = async (url, path, callback) => {
+const download = async (url: string, path: string, callback: () => void) => {
   const streamPipeline = promisify(pipeline);
   const response = await fetch(url);
-  await streamPipeline(response.body, createWriteStream(path));
+  if (!response.body) {
+    throw new Error(`unexpected response ${response.statusText}`);
+  }
+  const readableStream = response.body as unknown as Readable; // Convert response.body to ReadableStream
+  await streamPipeline(readableStream, createWriteStream(path));
   callback();
 };
 
 const main = async () => {
+  if (!TOKEN || !FIGMA_FILE_KEY) {
+    throw new Error('FIGMA_TOKEN and FIGMA_FILE_KEY must be provided');
+  }
+
   const response = await fetch(`https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`, {
     headers: {
       'X-FIGMA-TOKEN': TOKEN,
     },
   });
-  const { meta } = await response.json();
+  const { meta }: GetFileComponentsResponse = await response.json();
   const results = meta.components;
   const ids = results.map((r) => r.node_id).join(',');
 
@@ -29,13 +37,14 @@ const main = async () => {
       'X-FIGMA-TOKEN': TOKEN,
     },
   });
-  const { images } = await svgResponse.json();
+  const { images }: GetImagesResponse = await svgResponse.json();
   const nodeIds = Object.keys(images);
 
   for (const nodeId of nodeIds) {
     const url = images[nodeId];
+    if (!url) continue;
     const result = results.find((r) => r.node_id === nodeId);
-    const name = result.name;
+    const name = result?.name;
     const path = resolve(__dirname, `../assets/${name}-icon.svg`);
     download(url, path, () => {
       console.log(path, 'done!');