Update to 0.1.1

GitOrigin-RevId: 067489a67da8c36d85d2d8c4ef8f6c58dd40b181

react/README.md

@@ -14,15 +14,15 @@ npm install @figma/code-connect
 
 ## Basic setup
 
-To connect your first component go to Dev Mode in Figma and right-click on the component you want to connect, then choose `Copy link to selection` from the menu. Make sure you are copying the link to a main component and not an instance of the component. The main component will typically be located in a centralized design system library file. Using this link, run `figma connect create`.
+To connect your first component go to Dev Mode in Figma and right-click on the component you want to connect, then choose `Copy link to selection` from the menu. Make sure you are copying the link to a main component and not an instance of the component. The main component will typically be located in a centralized design system library file. Using this link, run `figma connect create`. Note that depending on what terminal software you're using, you might need to wrap the URL in quotes.
 
 ```sh
-npx figma connect create https://... --token <auth token>
+npx figma connect create "https://..." --token <auth token>
 ```
 
 This will create a Code Connect file with some basic scaffolding for the component you want to connect. By default this file will be called `<component-name>.figma.tsx` based on the name of the component in Figma. However, you may rename this file as you see fit. The scaffolding that is generated is based on the interface of the component in Figma. Depending on how closely this matches your code component you'll need to make some edits to this file before you publish it.
 
-Some CLI commands, like `create`, require a valid [authentication token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) with write permission for the Code Connect scope. You can either pass this via the `--token` flag, or set the `FIGMA_ACCESS_TOKEN` environment variable (the Figma CLI reads this from a `.env` file in the same folder, if it exists).
+Some CLI commands, like `create`, require a valid [authentication token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) with write permission for the Code Connect scope. You can either pass this via the `--token` flag, or set the `FIGMA_ACCESS_TOKEN` environment variable. The Figma CLI reads this from a `.env` file in the same folder, if it exists.
 
 To keep things simple, we're going to start by replacing the contents of the generated file with the most basic Code Connect configuration possible to make sure everything is set up and working as expected. Replace the contents of the file with the following, replacing the `Button` reference with a reference to whatever component you are trying to connect. The object called by `figma.connect` is your Code Connect doc.
 
@@ -109,14 +109,14 @@ In addition to the [general configuration](../README.md) for the CLI there is Re
     "exclude": ["test/**", "docs/**", "build/**"],
 
     "react": {
-      importPaths: {
+      "importPaths": {
         "src/components/*": "@ui/components"
       },
 
-      paths: {
+      "paths": {
         "@ui/components/*": ["src/components/*"]
-      },
-    },
+      }
+    }
   }
 }
 ```
@@ -138,9 +138,15 @@ You can use `importPaths` by specifying where `Button` lives in your repo and ma
 consider the full absolute path of the source file `Button.tsx`.
 
 ```
-importPaths: {
-  "src/components/*": "@ui/components"
-},
+{
+  "codeConnect": {
+    "react": {
+      "importPaths": {
+        "src/components/*": "@ui/components"
+      }
+    }
+  }
+}
 ```
 
 Which will end up changing your connected code snippet in Figma to

react/jest.config.js

@@ -3,4 +3,5 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
   testPathIgnorePatterns: ['/dist/'],
+  roots: ['<rootDir>'],
 }

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -22,6 +22,7 @@
     "build": "tsc",
     "build:web": "pnpm build",
     "test": "NODE_OPTIONS=--experimental-vm-modules npx jest --coverage",
+    "test:fast": "NODE_OPTIONS=--experimental-vm-modules npx jest --coverage --testPathIgnorePatterns template_rendering.test.ts",
     "test-ci": "NODE_OPTIONS=--experimental-vm-modules npx jest --coverage --runInBand",
     "bundle": "npm run build && npm pack && mkdir -p bundle && mv figma-code-connect*.tgz bundle",
     "typecheck": "tsc --noEmit"
@@ -42,6 +43,7 @@
     "@babel/generator": "^7.23.6",
     "@babel/parser": "^7.23.6",
     "@babel/types": "^7.23.6",
+
     "@storybook/csf-tools": "^7.6.7",
     "axios": "^1.6.0",
     "chalk": "^4.1.2",

react/src/commands/connect.ts

@@ -3,10 +3,10 @@ import { InternalError, ParserError, isFigmaConnectFile, parse } from '../common
 import fs from 'fs'
 import { upload } from '../connect/upload'
 import { validateDocs } from '../connect/validation'
-import { createFigmadocFromUrl } from '../connect/create'
+import { createCodeConnectFromUrl } from '../connect/create'
 import { ProjectInfo, getProjectInfo } from '../common/project'
 import { LogLevel, error, highlight, logger, success } from '../common/logging'
-import { FigmaConnectJSON } from '../common/figma_connect'
+import { CodeConnectJSON } from '../common/figma_connect'
 import { convertStorybookFiles } from '../storybook/convert'
 import { delete_docs } from '../connect/delete_docs'
 
@@ -89,8 +89,8 @@ function setupHandler(cmd: BaseCommand) {
   }
 }
 
-async function getFigmadocs(dir: string, cmd: BaseCommand, projectInfo: ProjectInfo) {
-  const figmadocs: FigmaConnectJSON[] = []
+async function getCodeConnectObjects(dir: string, cmd: BaseCommand, projectInfo: ProjectInfo) {
+  const codeConnectObjects: CodeConnectJSON[] = []
   const { files, remoteUrl, config, tsProgram } = projectInfo
 
   const figmaNodeToFile = new Map()
@@ -100,7 +100,7 @@ async function getFigmadocs(dir: string, cmd: BaseCommand, projectInfo: ProjectI
       for (const doc of docs) {
         figmaNodeToFile.set(doc.figmaNode, file)
       }
-      figmadocs.push(...docs)
+      codeConnectObjects.push(...docs)
       logger.info(success(file))
     } catch (e) {
       logger.error(`❌ ${file}`)
@@ -120,7 +120,7 @@ async function getFigmadocs(dir: string, cmd: BaseCommand, projectInfo: ProjectI
     }
   }
 
-  return figmadocs
+  return codeConnectObjects
 }
 
 async function handlePublish(cmd: BaseCommand & { skipValidation: boolean }) {
@@ -133,12 +133,12 @@ async function handlePublish(cmd: BaseCommand & { skipValidation: boolean }) {
     logger.info(`Files that would be published:`)
   }
 
-  const figmadocs = await getFigmadocs(dir, cmd, projectInfo)
-  const storybookFigmadocs = await convertStorybookFiles({
+  const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo)
+  const storybookCodeConnectObjects = await convertStorybookFiles({
     projectInfo,
   })
 
-  const allCodeConnectFiles = figmadocs.concat(storybookFigmadocs)
+  const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects)
   if (allCodeConnectFiles.length === 0) {
     logger.warn(
       `No Code Connect files found in ${dir} - Make sure you have configured \`include\` and \`exclude\` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.`,
@@ -196,12 +196,12 @@ async function handleUnpublish(cmd: BaseCommand & { node: string }) {
   } else {
     const projectInfo = getProjectInfo(dir, cmd.config)
 
-    const figmadocs = await getFigmadocs(dir, cmd, projectInfo)
-    const storybookFigmadocs = await convertStorybookFiles({
+    const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo)
+    const storybookCodeConnectObjects = await convertStorybookFiles({
       projectInfo,
     })
 
-    const allCodeConnectFiles = figmadocs.concat(storybookFigmadocs)
+    const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects)
 
     nodesToDeleteRelevantInfo = allCodeConnectFiles.map((doc) => ({
       figmaNode: doc.figmaNode,
@@ -233,20 +233,20 @@ async function handleParse(cmd: BaseCommand) {
   let dir = cmd.dir ?? process.cwd()
   const projectInfo = getProjectInfo(dir, cmd.config)
 
-  const figmadocs = await getFigmadocs(dir, cmd, projectInfo)
-  const storybookFigmadocs = await convertStorybookFiles({
+  const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo)
+  const storybookCodeConnectObjects = await convertStorybookFiles({
     projectInfo,
   })
 
-  const allCodeConnectFiles = figmadocs.concat(storybookFigmadocs)
+  const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects)
 
   if (cmd.dryRun) {
     logger.info(`Dry run complete`)
     process.exit(0)
   }
 
   if (cmd.outfile) {
-    fs.writeFileSync(cmd.outfile, JSON.stringify(figmadocs, null, 2))
+    fs.writeFileSync(cmd.outfile, JSON.stringify(codeConnectObjects, null, 2))
     logger.info(`Wrote Code Connect JSON to ${highlight(cmd.outfile)}`)
   } else {
     // don't format the output, so it can be piped to other commands
@@ -269,7 +269,7 @@ function handleCreate(nodeUrl: string, cmd: BaseCommand) {
     process.exit(1)
   }
 
-  return createFigmadocFromUrl({
+  return createCodeConnectFromUrl({
     accessToken,
     // We remove \s to allow users to paste URLs inside quotes - the terminal
     // paste will add backslashes, which the quotes preserve, but expected user

react/src/common/__test__/CustomImports.figma.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import figma from '../..'
+import { Button } from './TestComponents'
+
+figma.connect(Button, 'ui/button', {
+  example: () => <Button>Click me</Button>,
+  imports: ['import Button from "@ui/Button"', 'import { myHook } from "@ui/hooks"'],
+})

react/src/common/__test__/PropsSpreadWithDestructuring.figma.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import figma from '../..'
+import { Button } from './PropsSpread'
+
+const props = {
+  variant: figma.enum('Variant', {
+    Primary: 'primary',
+    Destructive: 'destructive',
+    Inverse: 'inverse',
+    Success: 'success',
+    FigJam: 'FigJam',
+    Secondary: 'secondary',
+    'Secondary Destruct': 'destructive-secondary',
+  }),
+  width: figma.enum('Size', {
+    Default: 'hug-contents',
+    Large: undefined,
+    Wide: 'fit-parent',
+  }),
+  disabled: figma.boolean('Disabled'),
+}
+
+figma.connect(Button, 'spreadWithDestructuring', {
+  props,
+  example: ({ variant, ...props }) => <Button variant={variant} {...props} />,
+})

react/src/common/__test__/expected_templates/PropsSpreadWithDestructuring.expected_template

@@ -0,0 +1,17 @@
+const figma = require('figma')
+
+const variant = figma.properties.enum('Variant', {
+"Primary": 'primary',
+"Destructive": 'destructive',
+"Inverse": 'inverse',
+"Success": 'success',
+"FigJam": 'FigJam',
+"Secondary": 'secondary',
+"Secondary Destruct": 'destructive-secondary'})
+const width = figma.properties.enum('Size', {
+"Default": 'hug-contents',
+"Large": undefined,
+"Wide": 'fit-parent'})
+const disabled = figma.properties.boolean('Disabled')
+
+export default figma.tsx`<Button${_fcc_renderReactProp('variant', variant)}${_fcc_renderReactProp('width', width)}${_fcc_renderReactProp('disabled', disabled)}/>`