Code Connect v1.3.0

Author: figma-bot

CHANGELOG.md

@@ -1,3 +1,30 @@
+# Code Connect v1.3.0 (28th January 2025)
+
+## Features
+- Add support for JSX Figma connection files.
+- Added an option to automatically create or append the access token to the project's .env file
+- Add better handling of many figma components in the wizard (grouping per page)
+- Allow variant restrictions to use boolean-like properties
+
+### General
+- Added support for Bitbucket, Gitlab and Azure DevOps for generated source file URLs
+
+## Fixed
+- Don't show a red-cross when the file-matching prompt is finished in the wizard
+- Add default values for `@FigmaEnum` declarations in SwiftUI
+
+### SwiftUI
+- Fixed a formatting error when running the CLI
+
+### React
+- Fix nested objects and arrays in props not rendering properly in code snippets
+- Fixed a type issue when passing functions as values to `figma.boolean`
+- Add support for multiple exports per file in the wizard
+
+### Storybook
+- Add support for different props per example (fixes https://github.com/figma/code-connect/issues/143)
+- Add support for `links` and `imports` (fixes https://github.com/figma/code-connect/issues/142)
+
 # Code Connect v1.2.4 (5th December 2024)
 
 ## Fixed

Package.resolved

@@ -17,7 +17,7 @@ let package = Package(
     dependencies: [
         .package(url: "https://github.com/apple/swift-syntax", "510.0.3"..."600.0.0"),
         .package(url: "https://github.com/apple/swift-argument-parser", from: "1.0.0"),
-        .package(url: "https://github.com/nicklockwood/SwiftFormat", from: "0.49.0"),
+        .package(url: "https://github.com/nicklockwood/SwiftFormat", from: "0.55.3"),
     ],
     targets: [
         .target(

Package.swift

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -29,7 +29,8 @@
     "figma": "bin/figma"
   },
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "patches/**/*"
   ],
   "engines": {
     "node": ">=18"
@@ -40,7 +41,7 @@
     "build:web": "pnpm build",
     "build:webpack": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" webpack --mode production",
     "test": "npm run test:no-coverage -- --coverage",
-    "test:no-coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest",
+    "test:no-coverage": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" npx jest",
     "test:fast": "npm run test -- --testPathIgnorePatterns=template_rendering.test.ts --testPathIgnorePatterns=e2e_parse_command_swift.test.ts --testPathIgnorePatterns=e2e_wizard_swift.test.ts",
     "test:ci": "npm run test:non-mac -- --runInBand",
     "test:wizard": "npm run test -- --runInBand --testPathPattern=e2e_wizard_react.test.ts --testPathPattern=e2e_wizard_swift.test.ts",
@@ -58,15 +59,16 @@
     "bundle:cli:win": "npm run bundle:cli -- -o bundle-cli/figma-win --target node18-win-x64",
     "publish:npm": "npm install && npm run build && npm run bundle:npm-readme:prepare && npm publish --access public; npm run bundle:npm-readme:restore",
     "typecheck": "tsc --noEmit -p tsconfig-typecheck.json",
-    "benchmarking:run": "npx tsx ./src/connect/wizard/__test__/prop_mapping/prop_mapping_benchmarking.ts"
+    "benchmarking:run": "npx tsx ./src/connect/wizard/__test__/prop_mapping/prop_mapping_benchmarking.ts",
+    "postinstall": "patch-package"
   },
   "devDependencies": {
 
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.5.13",
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.0",
-    "@types/node": "^20.14.0",
+    "@types/node": "^22.10.0",
     "@types/prettier": "2.7.3",
     "@types/prompts": "^2.4.9",
     "@types/react": "18.0.26",
@@ -86,7 +88,7 @@
     "@babel/parser": "7.26.0",
     "@babel/types": "7.26.0",
 
-    "@storybook/csf-tools": "^7.6.7",
+    "@storybook/csf-tools": "^8.4.7",
     "boxen": "5.1.1",
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
@@ -101,6 +103,7 @@
     "minimatch": "^9.0.3",
     "ora": "^5.4.1",
     "parse5": "^7.1.2",
+    "patch-package": "^8.0.0",
     "prettier": "^2.8.8",
     "prompts": "^2.4.2",
     "strip-ansi": "^6.0.0",

cli/package.json

@@ -0,0 +1,12 @@
+diff --git a/node_modules/@types/prompts/index.d.ts b/node_modules/@types/prompts/index.d.ts
+index e3124b0..f4fac10 100644
+--- a/node_modules/@types/prompts/index.d.ts
++++ b/node_modules/@types/prompts/index.d.ts
+@@ -91,6 +91,7 @@ declare namespace prompts {
+         mask?: string | PrevCaller<T, string | Falsy> | undefined;
+         stdout?: Writable | undefined;
+         stdin?: Readable | undefined;
++        submitOnEscapeKey?: boolean | undefined;
+     }
+ 
+     type Answers<T extends string> = { [id in T]: any };

cli/patches/@types+prompts+2.4.9.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/prompts/lib/elements/prompt.js b/node_modules/prompts/lib/elements/prompt.js
+index b793330..836de28 100644
+--- a/node_modules/prompts/lib/elements/prompt.js
++++ b/node_modules/prompts/lib/elements/prompt.js
+@@ -26,6 +26,9 @@ class Prompt extends EventEmitter {
+     const isSelect = [ 'SelectPrompt', 'MultiselectPrompt' ].indexOf(this.constructor.name) > -1;
+     const keypress = (str, key) => {
+       let a = action(key, isSelect);
++      if (key.name === 'escape' && a === 'exit' && opts.submitOnEscapeKey) {
++        a = 'submit'
++      }
+       if (a === false) {
+         this._ && this._(str, key);
+       } else if (typeof this[a] === 'function') {

cli/patches/prompts+2.4.2.patch

@@ -21,3 +21,13 @@ export function tidyStdOutput(input: string): string {
       .join('\n')
   )
 }
+
+/**
+ * Utility function to create a regex that matches a file in the repository.
+ * This is necessary because the repository URLs (repository name, default branch) get changed
+ * when publishing to different repositories
+ */
+
+export function getFileInRepositoryRegex(filepath: string): RegExp {
+  return new RegExp(`https://github.com/figma/code-connect/blob/[a-zA-Z/-]+${filepath}`)
+}

cli/src/__test__/utils.ts

@@ -298,7 +298,7 @@ export async function getCodeConnectObjects(
 type GetCodeConnectObjectsArgs = {
   parseFn: ParseFn
   resolveImportsFn?: ResolveImportsFn
-  fileExtension: string
+  fileExtension: string | string[]
   projectInfo: ProjectInfo<CodeConnectConfig>
   cmd: BaseCommand
   silent?: boolean
@@ -381,7 +381,7 @@ async function getReactCodeConnectObjects(
   const codeConnectObjects = await getCodeConnectObjectsFromParseFn({
     parseFn: parseReactDoc,
     resolveImportsFn: findAndResolveImports,
-    fileExtension: 'tsx',
+    fileExtension: ['tsx', 'jsx'],
     projectInfo,
     cmd,
     silent,