feat: figma code connect setup

lefthook.yml

@@ -3,4 +3,7 @@ pre-commit:
     check:
       glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
       run: pnpm format
-      stage_fixed: true
+      stage_fixed: true
+    figma-validate-config:
+      glob: "packages/raystack/figma.config.json"
+      run: pnpm --filter @raystack/apsara figma:validate-config

packages/raystack/figma.config.json

@@ -0,0 +1,10 @@
+{
+  "codeConnect": {
+    "include": ["components/**/*", "figma/**/*"],
+    "exclude": [],
+    "parser": "react",
+    "documentUrlSubstitutions": {
+      "<FIGMA_BUTTON>": "node-id=1-101"
+    }
+  }
+}

packages/raystack/figma/button.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { Button } from '../components/button';
+
+figma.connect(Button, '<FIGMA_BUTTON>', {
+  imports: ["import { Button } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Solid: 'solid',
+      Outline: 'outline',
+      Ghost: 'ghost',
+      Text: 'text'
+    }),
+    color: figma.enum('Color', {
+      Accent: 'accent',
+      Neutral: 'neutral',
+      Danger: 'danger',
+      Success: 'success'
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Normal: 'normal'
+    }),
+    children: figma.string('Label Copy')
+  },
+  example: ({ children, ...props }) => <Button {...props}>{children}</Button>
+});

packages/raystack/package.json

@@ -44,7 +44,10 @@
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
     "test:ui": "vitest --ui",
-    "build:icons": "node scripts/create-icons.js"
+    "build:icons": "node scripts/create-icons.js",
+    "figma:update-config": "node scripts/update-figma-config.js",
+    "figma:validate-config": "node scripts/validate-figma-config.js",
+    "figma:publish": "pnpm figma:update-config && figma connect publish"
   },
   "typesVersions": {
     "*": {
@@ -67,6 +70,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -78,6 +82,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitest/ui": "^3.2.4",
+    "dotenv": "^17.2.2",
     "eslint-config-custom": "workspace:*",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^26.1.0",

packages/raystack/scripts/update-figma-config.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+// Load environment variables from .env file
+require('dotenv').config();
+
+const CONFIG_FILE = path.join(__dirname, '..', 'figma.config.json');
+
+// Read Figma URL from environment
+const figmaUrl = process.env.FIGMA_FILE_URL;
+
+if (!figmaUrl) {
+  console.error('Error: FIGMA_FILE_URL environment variable is not set');
+  process.exit(1);
+}
+
+// Read current config
+const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+
+// Update documentUrlSubstitutions by appending figmaUrl to each value
+for (const [key, value] of Object.entries(
+  config.codeConnect.documentUrlSubstitutions
+)) {
+  if (value.startsWith('node-id='))
+    config.codeConnect.documentUrlSubstitutions[key] = `${figmaUrl}?${value}`;
+}
+
+// Write updated config
+fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+
+console.log('Updated figma.config.json');

packages/raystack/scripts/validate-figma-config.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONFIG_FILE = path.join(__dirname, '..', 'figma.config.json');
+
+// Check if figma.config.json contains figma.com links
+function checkFigmaConfig() {
+  try {
+    if (!fs.existsSync(CONFIG_FILE)) {
+      console.log('✅ figma.config.json not found, skipping check');
+      return;
+    }
+
+    const configContent = fs.readFileSync(CONFIG_FILE, 'utf8');
+    const config = JSON.parse(configContent);
+
+    // Check documentUrlSubstitutions for figma.com links
+    const substitutions = config.codeConnect?.documentUrlSubstitutions || {};
+    const figmaLinks = [];
+
+    for (const [key, value] of Object.entries(substitutions)) {
+      if (value.includes('figma.com')) {
+        figmaLinks.push(`${key}: ${value}`);
+      }
+    }
+
+    if (figmaLinks.length > 0) {
+      console.error('❌ Error: figma.config.json contains figma.com links:');
+      figmaLinks.forEach(link => console.error(`  ${link}`));
+      console.error('\nPlease remove the file url from the figma.config.json');
+      process.exit(1);
+    }
+
+    console.log('✅ figma.config.json validation passed');
+  } catch (error) {
+    console.error('❌ Error checking figma config:', error.message);
+    process.exit(1);
+  }
+}
+
+checkFigmaConfig();