Code Connect v1.3.0

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

@@ -23,8 +23,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/nicklockwood/SwiftFormat",
       "state" : {
-        "revision" : "9e5d0d588ab6e271fe9887ec3dde21d544d4b080",
-        "version" : "0.53.5"
+        "revision" : "2d5a2b6bde636c1feae2c852ab9a50f221e98c66",
+        "version" : "0.55.3"
       }
     }
   ],

Package.swift

@@ -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(

cli/package.json

@@ -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/patches/@types+prompts+2.4.9.patch

@@ -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/prompts+2.4.2.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/src/__test__/utils.ts

@@ -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/commands/connect.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,

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactButtonComponent.figmadoc.tsx

@@ -0,0 +1,5 @@
+import figma from '../../../../../react/index_react'
+
+import { ReactButtonComponent } from './ReactButtonComponent'
+
+figma.connect(ReactButtonComponent, 'ui/button')

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.tsx → cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactButtonComponent.tsx

@@ -11,6 +11,6 @@ interface ButtonProps {
  * @param disabled disable the button
  * @returns JSX element
  */
-export const ReactApiComponent = ({ children, disabled = false }: ButtonProps) => {
+export const ReactButtonComponent = ({ children, disabled = false }: ButtonProps) => {
   return <button disabled={disabled}>{children}</button>
 }

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactLabelComponent.figmadoc.jsx

@@ -0,0 +1,4 @@
+import figma from '../../../../../react/index_react'
+import { ReactLabelComponent } from './ReactLabelComponent'
+
+figma.connect(ReactLabelComponent, 'ui/label')

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactLabelComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface LabelProps {
+  disabled: boolean
+  children: any
+}
+
+/**
+ * @description This is a label
+ * @param children text to render
+ * @param disabled disable the button
+ * @returns JSX element
+ */
+export const ReactLabelComponent = ({ children, disabled = false }: LabelProps) => {
+  return <div style={{ pointerEvents: disabled ? 'none' : 'inherit' }}>{children}</div>
+}

cli/src/connect/__test__/e2e/e2e_parse_command/swift_package/Package.resolved

@@ -24,8 +24,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/nicklockwood/SwiftFormat",
       "state" : {
-        "revision" : "dd989a46d0c6f15c016484bab8afe5e7a67a4022",
-        "version" : "0.54.0"
+        "revision" : "2d5a2b6bde636c1feae2c852ab9a50f221e98c66",
+        "version" : "0.55.3"
       }
     }
   ],

cli/src/connect/__test__/e2e/e2e_parse_command/swift_parser/swift_parser.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -23,8 +23,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/nicklockwood/SwiftFormat",
       "state" : {
-        "revision" : "05cb325003a673b3d177c711b3bc909cfee07622",
-        "version" : "0.53.9"
+        "revision" : "2d5a2b6bde636c1feae2c852ab9a50f221e98c66",
+        "version" : "0.55.3"
       }
     }
   ],

cli/src/connect/__test__/e2e/e2e_parse_command/swift_wizard/swift_wizard.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -23,8 +23,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/nicklockwood/SwiftFormat",
       "state" : {
-        "revision" : "05cb325003a673b3d177c711b3bc909cfee07622",
-        "version" : "0.53.9"
+        "revision" : "2d5a2b6bde636c1feae2c852ab9a50f221e98c66",
+        "version" : "0.55.3"
       }
     }
   ],

cli/src/connect/__test__/e2e/e2e_parse_command_custom.test.ts

@@ -8,22 +8,28 @@ describe('e2e test for `parse` command custom parsers', () => {
     const testPath = path.join(__dirname, `e2e_parse_command/${testName}`)
     const json = JSON.parse(result.stdout)
 
-    expect(json).toMatchObject([
-      {
-        figmaNode: `${path.join(testPath, 'Test.test')}`,
-        template:
-          '{"config":{"parser":"custom","parserCommand":"node parser/custom_parser.js","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
-        label: 'Test',
-        source: `https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/${testName}/Test.test`,
-      },
-      {
-        figmaNode: `${path.join(testPath, 'OtherFile.test')}`,
-        template:
-          '{"config":{"parser":"custom","parserCommand":"node parser/custom_parser.js","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
-        label: 'Test',
-        source: `https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/${testName}/OtherFile.test`,
-      },
-    ])
+    expect(json).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          figmaNode: `${path.join(testPath, 'Test.test')}`,
+          template:
+            '{"config":{"parser":"custom","parserCommand":"node parser/custom_parser.js","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
+          label: 'Test',
+          source: expect.stringMatching(
+            /https:\/\/github\.com\/figma\/[a-z-/]+\/cli\/src\/connect\/__test__\/e2e\/e2e_parse_command\/\w+\/Test\.test/,
+          ),
+        }),
+        expect.objectContaining({
+          figmaNode: `${path.join(testPath, 'OtherFile.test')}`,
+          template:
+            '{"config":{"parser":"custom","parserCommand":"node parser/custom_parser.js","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
+          label: 'Test',
+          source: expect.stringMatching(
+            /https:\/\/github\.com\/figma\/[a-z-/]+\/cli\/src\/connect\/__test__\/e2e\/e2e_parse_command\/\w+\/OtherFile\.test/,
+          ),
+        }),
+      ]),
+    )
   }
 
   it('successfully calls a custom parser executable', async () => {

cli/src/connect/__test__/e2e/e2e_parse_command_parser_executables.test.ts

@@ -8,22 +8,28 @@ describe('e2e test for `parse` command (parser executables)', () => {
     const testPath = path.join(__dirname, `e2e_parse_command/${testName}`)
     const json = JSON.parse(result.stdout)
 
-    expect(json).toMatchObject([
-      {
-        figmaNode: `${path.join(testPath, 'Test.test')}`,
-        template:
-          '{"config":{"parser":"__unit_test__","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
-        label: 'Test',
-        source: `https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/${testName}/Test.test`,
-      },
-      {
-        figmaNode: `${path.join(testPath, 'OtherFile.test')}`,
-        template:
-          '{"config":{"parser":"__unit_test__","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
-        label: 'Test',
-        source: `https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/${testName}/OtherFile.test`,
-      },
-    ])
+    expect(json).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          figmaNode: `${path.join(testPath, 'Test.test')}`,
+          template:
+            '{"config":{"parser":"__unit_test__","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
+          label: 'Test',
+          source: expect.stringMatching(
+            /https:\/\/github\.com\/figma\/[a-z-/]+\/cli\/src\/connect\/__test__\/e2e\/e2e_parse_command\/\w+\/Test\.test/,
+          ),
+        }),
+        expect.objectContaining({
+          figmaNode: `${path.join(testPath, 'OtherFile.test')}`,
+          template:
+            '{"config":{"parser":"__unit_test__","include":["*.test"],"exclude":["Excluded.test"]},"mode":"PARSE"}',
+          label: 'Test',
+          source: expect.stringMatching(
+            /https:\/\/github\.com\/figma\/[a-z-/]+\/cli\/src\/connect\/__test__\/e2e\/e2e_parse_command\/\w+\/OtherFile\.test/,
+          ),
+        }),
+      ]),
+    )
   }
 
   it('successfully calls a first party parser executable', async () => {