From 1e55339b1df6d665d8d7b126ae23160c3f698a7b Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 19 Dec 2024 17:34:24 -0500
Subject: [PATCH] Adding script to generate figma files for icons

---
 figma.config.json               |  8 +++--
 package.json                    |  3 +-
 scripts/generate-figma-icons.js | 62 +++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 scripts/generate-figma-icons.js

diff --git a/figma.config.json b/figma.config.json
index d8bfdd196..f0f73b70b 100644
--- a/figma.config.json
+++ b/figma.config.json
@@ -1,9 +1,13 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": ["src/components/**/*.{tsx,jsx}"],
+    "include": [
+      "src/components/**/*.tsx",
+      "src/icons/*.tsx"
+    ],
     "importPaths": {
-      "src/components/*": "@0xsequence/design-system"
+      "src/components/*": "@0xsequence/design-system",
+      "src/icons/*": "@0xsequence/design-system"
     }
   }
 }
diff --git a/package.json b/package.json
index 8eea108ac..af4718bcb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
     "changeset:version": "changeset version",
     "changeset:publish": "pnpm build && pnpm test && changeset publish",
     "figma:connect": "figma connect",
-    "figma:publish": "figma connect publish"
+    "figma:publish": "figma connect publish",
+    "figma:generate:icons": "node ./scripts/generate-figma-icons.js"
   },
   "dependencies": {
     "@radix-ui/react-aspect-ratio": "^1.1.0",
diff --git a/scripts/generate-figma-icons.js b/scripts/generate-figma-icons.js
new file mode 100644
index 000000000..ae622627f
--- /dev/null
+++ b/scripts/generate-figma-icons.js
@@ -0,0 +1,62 @@
+import { client } from '@figma/code-connect'
+import fs from 'fs'
+
+import path from 'path'
+
+async function getIcons() {
+  const components = await client.getComponents(
+    'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=9818-3653'
+  )
+
+  const rootPath = path.resolve('./src/icons')
+
+  console.log(components.length, 'icons found in figma')
+
+  console.log('Writing figma files...')
+
+  let succeeded = 0
+  let failed = 0
+
+  for (const icon of components) {
+    const componentName = `${capitalize(icon.name)}Icon`
+
+    const componentPath = path.join(rootPath, `${componentName}.tsx`)
+
+    // Check to see if a react component with the same name exists in the icons directory
+    // before creating a figma file
+    if (fs.existsSync(componentPath)) {
+      const figmaFilename = `${componentName}.figma.tsx`
+
+      console.log(`  ✔ ${figmaFilename}`)
+
+      const figmaPath = path.join(rootPath, `${figmaFilename}`)
+      const source = `import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ${componentName} } from './index'
+
+figma.connect(
+  ${componentName},
+  '${icon.figmaUrl}', 
+  {
+    example: () => <${componentName} />
+  }
+)
+`
+
+      fs.writeFileSync(figmaPath, source)
+
+      succeeded++
+    } else {
+      console.log('  ✘ Couldnt find', componentName)
+      failed++
+    }
+  }
+
+  console.log('\nDone writing figma files')
+  console.log(succeeded, 'succeeded', failed, 'failed')
+}
+
+getIcons()
+
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)