@figma/code-connect 0.1.2 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # Code Connect (React)
 
-For more information about Code Connect as well as guides for other platforms and frameworks, please [go here](../../README.md).
+For more information about Code Connect as well as guides for other platforms and frameworks, please [go here](../README.md).
 
 This documentation will help you connect your React components with Figma components using Code Connect. We'll cover basic setup to display your first connected code snippet, followed by making snippets dynamic by using property mappings. Code Connect for React works as both a standalone implementation and as an integration with existing Storybook files to enable easily maintaining both systems in parallel.
 
@@ -14,7 +14,7 @@ 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`. Note that depending on what terminal software you're using, you might need to wrap the URL in quotes.
+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` from inside your React project. 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>
@@ -98,33 +98,25 @@ npx figma connect unpublish --token <token>
 
 ## Configuration
 
-To configure the behaviour of the CLI and Code Connect you can create a `figma.config.json` file. This config file will automatically be picked up by the CLI if it's in the same folder where you run the commands, but you can also specify a path to the config file via the `--config` flag.
+To configure the behaviour of the CLI and Code Connect you can create a `figma.config.json` file. This file must be located in the project root, i.e. alongside your `package.json` file. This config file will automatically be picked up by the CLI if it's in the same folder where you run the commands, but you can also specify a path to the config file via the `--config` flag.
 
-In addition to the [general configuration](../README.md) for the CLI there is React-specific project configuration that can be specified in the configuration file. This configuration is mainly used to ensure Code Connect can correctly locate your imports as well as display the correct imports within Dev Mode.
+In addition to the [general configuration](../README.md#general-configuration) for the CLI, there is React-specific project configuration that can be specified in the configuration file. This configuration is mainly used to ensure Code Connect can correctly locate your imports as well as display the correct imports within Dev Mode.
 
 ```jsonp
 {
   "codeConnect": {
     "include": [],
     "exclude": ["test/**", "docs/**", "build/**"],
-
-    "react": {
-      "importPaths": {
-        "src/components/*": "@ui/components"
-      },
-
-      "paths": {
-        "@ui/components/*": ["src/components/*"]
-      }
+    "importPaths": {
+      "src/components/*": "@ui/components"
+    },
+    "paths": {
+      "@ui/components/*": ["src/components/*"]
     }
   }
 }
 ```
 
-### `include` and `exclude`
-
-`include` and `exclude` are lists of globs for where to parse Code Connect files. `include` and `exclude` paths must be relative to the location of the config file.
-
 ### `importPaths`
 
 `importPaths` maps relative imports to non-relative imports. This is useful for when you want users of your design system to import components from a specific package as opposed to using relative imports. The mapping uses the file location on disk. For example, if your Code Connect file looks like this:
@@ -140,10 +132,8 @@ consider the full absolute path of the source file `Button.tsx`.
 ```
 {
   "codeConnect": {
-    "react": {
-      "importPaths": {
-        "src/components/*": "@ui/components"
-      }
+    "importPaths": {
+      "src/components/*": "@ui/components"
     }
   }
 }
@@ -159,6 +149,16 @@ import { Button } from '@ui/components'
 
 This is needed if you're using path aliases in your TypeScript project configuration, so Code Connect can know how to resolve your imports. It should match the `paths` object used in your tsconfig.json.
 
+## Custom imports
+
+You can override the generated import statements for a connected component by passing an array of `imports`. This might be useful if the automatic resolution does not work well for your use case.
+
+```
+figma.connect(Button, "https://...", {
+  imports: ["import { Button } from '@lib'"]
+})
+```
+
 ## Dynamic code snippets
 
 With the basic setup as described above, you should have a connected code snippet visible in Dev Mode when inspecting instances of that component. However, the code snippet doesn't yet reflect the entirety of the design. For example, we see the same code snippet for a button whether it has the `type` variant set to `primary` or `secondary`.
@@ -179,10 +179,10 @@ figma.connect(Button, 'https://...', {
       Secondary: 'secondary',
     }),
   },
-  example: ({ disabled, text, type }) => {
+  example: ({ disabled, label, type }) => {
     return (
       <Button disabled={disabled} type={type}>
-        {text}
+        {label}
       </Button>
     )
   },
@@ -235,6 +235,27 @@ export function ButtonExample({ label, disabled, type }) {
 
 The `figma` import contains helpers for mapping all sorts of properties from design to code. They work for simple mappings where only the naming differs between Figma and code, as well as more complex mappings where the type differs. See the below reference for all the helpers that exist and the ways you can use them to connect Figma and code components using Code Connect.
 
+
+### figma.connect
+
+`figma.connect()` has two signatures for connecting components.
+
+```
+// connect a component in code to a Figma component
+figma.connect(Button, "https://...")
+
+// connect a Figma component to e.g a native element
+figma.connect("https://...")
+```
+
+The second option is useful if you want to just render a HTML tag instead of a React component. The first argument is used to determine where your component lives in code, in order to generate an import statement for the component. This isn't needed if you just want to render e.g a `button` tag.
+
+```
+figma.connect("https://...", {
+  example: () => <button>click me</button>
+})
+```
+
 ### Strings
 
 Strings are the simplest value to map from Figma to code. Simply call `figma.string` with the Figma prop name you want to reference as a parameter. This is useful for things like button labels, header titles, tooltips, etc.
@@ -331,7 +352,19 @@ figma.connect(Icon32Add, 'https://...')
 
 ### Instance children
 
-It's common for components in Figma to have child instances that aren't bound to an instance-swap prop. Similarly to `figma.instance`, we can render the code snippets for these nested instances with `figma.children`. This helper takes the _name of the instance layer_ as it's parameter, rather than a Figma prop name. Note that the nested instance also must be connected separately.
+It's common for components in Figma to have child instances that aren't bound to an instance-swap prop. Similarly to `figma.instance`, we can render the code snippets for these nested instances with `figma.children`. This helper takes the _name of the instance layer within the parent component_ as its parameter, rather than a Figma prop name.
+
+To illustrate this, consider the layer hierarchy in a component vs an instance of that component:
+
+Button (Component)
+  Icon (Instance) -- "Icon" is the original name of the layer, this is what you should pass to `figma.children()`
+
+Button (Instance)
+  RenamedIcon (Instance) -- here the instance layer was renamed, which won't break the mapping since we're not using this name
+
+Note that the nested instance also must be connected separately.
+
+> Layer names may differ between variants in a component set. To ensure the component (Button) can render a nested instance (Icon) for any of those variants, you must either use the wildcard option `figma.children("*")` or ensure that the layer name representing the instance (Icon) is the same across all variants of your component set (Button).
 
 ```tsx
 // map one child instance with the layer name "Tab"
@@ -341,11 +374,76 @@ figma.children('Tab')
 figma.children(['Tab 1', 'Tab 2'])
 ```
 
+### Wildcard match
+
+`figma.children()` can be used with a single wildcard '*' character, to partially match names or to render any nested child. Wildcards cannot be used with the array argument. Matches are case sensitive.
+
+```tsx
+// map any (all) child instances
+figma.children('*')
+
+// map any child instances that starts with "Icon"
+figma.children('Icon*')
+```
+
+### Nested properties
+
+In cases where you don't want to connect a child component, but instead map its properties on the parent level, you can use
+`figma.nestedProps()` to achieve this. This helper takes the name of the layer as it's first parameter (similar to `figma.children`),
+and a mapping object as the second parameter. These props can then be referenced in the example function.
+
+```tsx
+// map the properties of a nested instance named "Button Shape"
+figma.connect(Button, "https://...", {
+  props: {
+    buttonShape: figma.nestedProps('Button Shape', {
+      size: figma.enum({ ... }),
+    })
+  },
+  example: ({ buttonShape }) => <Button size={buttonShape.size} />
+}
+```
+
+### Text Content
+
+A common pattern for design systems in Figma is to not use props for texts, but rather rely on instances overriding the text content. `figma.textContent()` allows you to select a child text layer and render its content. It takes a single parameter which is the name of the layer in the original component.
+
+```tsx
+figma.connect(Button, "https://...", {
+  props: {
+    label: figma.textContent("Text Layer")
+  },
+  example: ({ label }) => <Button>{label}</Button>
+}
+```
+
+### className
+
+For mapping figma properties to a className string, you can use the `figma.className` helper. It takes an array of strings and returns the concatenated string. Any other helper that returns a string (or undefined) can be used in conjunction with this. Undefined values or empty strings will be filtered out from the result
+
+```tsx
+figma.connect("https://...", {
+  props: {
+    className: figma.className([
+      'btn-base',
+      figma.enum("Size", { Large: 'btn-large' }),
+      figma.boolean("Disabled", { true: 'btn-disabled', false: '' }),
+    ])
+  },
+  example: ({ className }) => <button className={className} />
+}
+```
+
+In Dev Mode this will display as:
+```
+<button className="btn-base btn-large btn-disabled" />
+```
+
 ## Variant restrictions
 
 Sometimes a component in Figma is represented by more than one component in code. For example you may have a single `Button` in your Figma design system with a `type` property to switch between primary, secondary, and danger variants. However, in code this may be represented by three different components, a `PrimaryButton`, `SecondaryButton` and `DangerButton`.
 
-To model this behaviour with Code Connect we can make use of something called variant restrictions. Variant restrictions allow you to provide entirely different code samples for different variants of a single Figma component. The keys and values used should match the name of the variant (or [roperty) in Figma and it's options respectively.
+To model this behaviour with Code Connect we can make use of something called variant restrictions. Variant restrictions allow you to provide entirely different code samples for different variants of a single Figma component. The keys and values used should match the name of the variant (or property) in Figma and it's options respectively.
 
 ```tsx
 figma.connect(PrimaryButton, 'https://...', {

package/dist/cli.js

@@ -26,11 +26,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const commander = __importStar(require("commander"));
 const connect_1 = require("./commands/connect");
+const updates_1 = require("./common/updates");
 require('dotenv').config();
 async function run() {
     const program = new commander.Command().version(require('./../package.json').version);
     program.enablePositionalOptions();
     (0, connect_1.addConnectCommandToProgram)(program);
+    program
+        .command('update')
+        .description('Updates to the latest version of the Figma CLI')
+        .action(() => {
+        (0, updates_1.updateCli)();
+    });
     program.parse(process.argv);
     if (program.args.length < 1) {
         program.outputHelp();

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,qDAAsC;AACtC,gDAA+D;AAE/D,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAA;AAE1B,KAAK,UAAU,GAAG;IAChB,MAAM,OAAO,GAAG,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAA;IACrF,OAAO,CAAC,uBAAuB,EAAE,CAAA;IAEjC,IAAA,oCAA0B,EAAC,OAAO,CAAC,CAAA;IAEnC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,UAAU,EAAE,CAAA;QACpB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;AACH,CAAC;AAED,GAAG,EAAE,CAAA"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,qDAAsC;AACtC,gDAA+D;AAC/D,8CAA4C;AAE5C,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAA;AAE1B,KAAK,UAAU,GAAG;IAChB,MAAM,OAAO,GAAG,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAA;IACrF,OAAO,CAAC,uBAAuB,EAAE,CAAA;IAEjC,IAAA,oCAA0B,EAAC,OAAO,CAAC,CAAA;IAEnC,OAAO;SACJ,OAAO,CAAC,QAAQ,CAAC;SACjB,WAAW,CAAC,gDAAgD,CAAC;SAC7D,MAAM,CAAC,GAAG,EAAE;QACX,IAAA,mBAAS,GAAE,CAAA;IACb,CAAC,CAAC,CAAA;IAEJ,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,UAAU,EAAE,CAAA;QACpB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;AACH,CAAC;AAED,GAAG,EAAE,CAAA"}

package/dist/commands/connect.d.ts

@@ -1,3 +1,18 @@
 import * as commander from 'commander';
+import { ProjectInfo } from '../connect/project';
+import { CodeConnectJSON } from '../common/figma_connect';
+export type BaseCommand = commander.Command & {
+    token: string;
+    verbose: boolean;
+    outFile: string;
+    outDir: string;
+    config: string;
+    dryRun: boolean;
+    dir: string;
+    jsonFile: string;
+};
 export declare function addConnectCommandToProgram(program: commander.Command): void;
+export declare function getAccessToken(cmd: BaseCommand): string;
+export declare function getDir(cmd: BaseCommand): string;
+export declare function getCodeConnectObjects(dir: string, cmd: BaseCommand, projectInfo: ProjectInfo, silent?: boolean): Promise<CodeConnectJSON[]>;
 //# sourceMappingURL=connect.d.ts.map

package/dist/commands/connect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/commands/connect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAA;AAkCtC,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,QA6CpE"}
+{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/commands/connect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAA;AAMtC,OAAO,EAGL,WAAW,EAIZ,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAUzD,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAgBD,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,QAyCpE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,UAU9C;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,WAAW,UAEtC;AA6BD,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,WAAW,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,UAAQ,GACb,OAAO,CAAC,eAAe,EAAE,CAAC,CAmD5B"}

package/dist/commands/connect.js

@@ -3,16 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addConnectCommandToProgram = void 0;
+exports.getCodeConnectObjects = exports.getDir = exports.getAccessToken = exports.addConnectCommandToProgram = void 0;
 const parser_1 = require("../react/parser");
 const fs_1 = __importDefault(require("fs"));
 const upload_1 = require("../connect/upload");
 const validation_1 = require("../connect/validation");
 const create_1 = require("../connect/create");
-const project_1 = require("../common/project");
+const project_1 = require("../connect/project");
 const logging_1 = require("../common/logging");
 const convert_1 = require("../storybook/convert");
 const delete_docs_1 = require("../connect/delete_docs");
+const parser_executables_1 = require("../connect/parser_executables");
+const zod_validation_error_1 = require("zod-validation-error");
+const parser_executable_types_1 = require("../connect/parser_executable_types");
+const updates_1 = require("../common/updates");
 function addBaseCommand(command, name, description) {
     return command
         .command(name)
@@ -21,101 +25,170 @@ function addBaseCommand(command, name, description) {
         .option('-r --dir <dir>', 'directory to parse')
         .option('-t --token <token>', 'figma access token')
         .option('-v --verbose', 'enable verbose logging for debugging')
-        .option('-o --outfile <file>', 'output to JSON file')
+        .option('-o --outFile <file>', 'specify a file to output generated Code Connect')
+        .option('-o --outDir <dir>', 'specify a directory to output generated Code Connect')
         .option('-c --config <path>', 'path to a figma config file')
         .option('--dry-run', 'tests publishing without actually publishing');
 }
 function addConnectCommandToProgram(program) {
     // Main command, invoked with `figma connect`
-    const connectCommand = addBaseCommand(program, 'connect', 'Start the Code Connect Wizard (not implemented yet)');
+    const connectCommand = addBaseCommand(program, 'connect', 'Figma Code Connect');
     // Sub-commands, invoked with e.g. `figma connect publish`
-    addBaseCommand(connectCommand, 'publish', 'Run Code Connect locally to find any files that include calls to `figma.connect()` and publishes those to Figma. ' +
+    addBaseCommand(connectCommand, 'publish', 'Run Code Connect locally to find any files that have figma connections and publish them to Figma. ' +
         'By default this looks for a config file named "figma.config.json", and uses the `include` and `exclude` fields to determine which files to parse. ' +
         'If no config file is found, this parses the current directory. An optional `--dir` flag can be used to specify a directory to parse.')
         .option('--skip-validation', 'skip validation of Code Connect docs')
-        .action(handlePublish);
-    addBaseCommand(connectCommand, 'unpublish', 'Run to find any files that include calls to `figma.connect()` and unpublish them from Figma. ' +
+        .action((0, updates_1.withUpdateCheck)(handlePublish));
+    addBaseCommand(connectCommand, 'unpublish', 'Run to find any files that have figma connections and unpublish them from Figma. ' +
         'By default this looks for a config file named "figma.config.json", and uses the `include` and `exclude` fields to determine which files to parse. ' +
         'If no config file is found, this parses the current directory. An optional `--dir` flag can be used to specify a directory to parse.')
         .option('--node <link_to_node>', 'specify the node to unpublish. This will unpublish for both React and Storybook.')
-        .action(handleUnpublish);
-    addBaseCommand(connectCommand, 'parse', 'Run Code Connect locally to find any files that include calls to `figma.connect()`, then converts to JSON and outputs to stdout.').action(handleParse);
+        .action((0, updates_1.withUpdateCheck)(handleUnpublish));
+    addBaseCommand(connectCommand, 'parse', 'Run Code Connect locally to find any files that have figma connections, then converts them to JSON and outputs to stdout.').action((0, updates_1.withUpdateCheck)(handleParse));
     addBaseCommand(connectCommand, 'create', 'Generate a Code Connect file with boilerplate in the current directory for a Figma node URL')
         .argument('<figma-node-url>', 'Figma node URL to create the Code Connect file from')
-        .action(handleCreate);
+        .action((0, updates_1.withUpdateCheck)(handleCreate));
 }
 exports.addConnectCommandToProgram = addConnectCommandToProgram;
 function getAccessToken(cmd) {
-    return cmd.token ?? process.env.FIGMA_ACCESS_TOKEN;
+    const token = cmd.token ?? process.env.FIGMA_ACCESS_TOKEN;
+    if (!token) {
+        (0, logging_1.exitWithError)(`Couldn't find a Figma access token. Please provide one with \`--token <access_token>\` or set the FIGMA_ACCESS_TOKEN environment variable`);
+    }
+    return token;
+}
+exports.getAccessToken = getAccessToken;
+function getDir(cmd) {
+    return cmd.dir ?? process.cwd();
 }
+exports.getDir = getDir;
 function setupHandler(cmd) {
     if (cmd.verbose) {
         logging_1.logger.setLogLevel(logging_1.LogLevel.Debug);
     }
 }
-async function getCodeConnectObjects(dir, cmd, projectInfo) {
+function transformDocFromParser(doc, remoteUrl) {
+    let source = doc.source;
+    if (source) {
+        try {
+            const url = new URL(source);
+            if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+                throw new Error('Invalid URL scheme');
+            }
+        }
+        catch (e) {
+            source = (0, project_1.getRemoteFileUrl)(source, remoteUrl);
+        }
+    }
+    return {
+        ...doc,
+        source,
+    };
+}
+async function getCodeConnectObjects(dir, cmd, projectInfo, silent = false) {
+    if (cmd.jsonFile) {
+        try {
+            return JSON.parse(fs_1.default.readFileSync(cmd.jsonFile, 'utf8'));
+        }
+        catch (e) {
+            logging_1.logger.error('Failed to parse JSON file:', e);
+        }
+    }
+    if (projectInfo.config.parser === 'react') {
+        return getReactCodeConnectObjects(dir, projectInfo, cmd, silent);
+    }
+    const payload = {
+        mode: 'PARSE',
+        paths: projectInfo.files,
+        config: projectInfo.config,
+    };
+    try {
+        const stdout = await (0, parser_executables_1.callParser)(
+        // We use `as` because the React parser makes the types difficult
+        // TODO remove once React is an executable parser
+        projectInfo.config, payload, projectInfo.absPath);
+        const parsed = parser_executable_types_1.ParseResponsePayload.parse(stdout);
+        const { hasErrors } = (0, parser_executables_1.handleMessages)(parsed.messages);
+        if (hasErrors) {
+            (0, logging_1.exitWithError)('Errors encountered calling parser, exiting');
+        }
+        return parsed.docs.map((doc) => ({
+            ...transformDocFromParser(doc, projectInfo.remoteUrl),
+            metadata: {
+                cliVersion: require('../../package.json').version,
+            },
+        }));
+    }
+    catch (e) {
+        // zod-validation-error formats the error message into a readable format
+        (0, logging_1.exitWithError)(`Error returned from parser: ${(0, zod_validation_error_1.fromError)(e)}`);
+    }
+}
+exports.getCodeConnectObjects = getCodeConnectObjects;
+// The React/Storybook parser is handled as a special case for now. Other
+// parsers uses the separate parser executable model and React will be
+// transitioned to that at some point, but for now the old code path is used
+async function getReactCodeConnectObjects(dir, projectInfo, cmd, silent = false) {
     const codeConnectObjects = [];
-    const { files, remoteUrl, config, tsProgram } = projectInfo;
-    const figmaNodeToFile = new Map();
+    const reactProjectInfo = (0, project_1.getReactProjectInfo)(projectInfo);
+    const { files, remoteUrl, config, tsProgram } = reactProjectInfo;
     for (const file of files.filter((f) => (0, parser_1.isFigmaConnectFile)(tsProgram, f))) {
         try {
-            const docs = await (0, parser_1.parse)(tsProgram, file, remoteUrl, config, cmd.verbose);
-            for (const doc of docs) {
-                figmaNodeToFile.set(doc.figmaNode, file);
-            }
+            const docs = await (0, parser_1.parse)(tsProgram, file, config, reactProjectInfo.absPath, remoteUrl, cmd.verbose);
             codeConnectObjects.push(...docs);
-            logging_1.logger.info((0, logging_1.success)(file));
+            if (!silent || cmd.verbose) {
+                logging_1.logger.info((0, logging_1.success)(file));
+            }
         }
         catch (e) {
-            logging_1.logger.error(`❌ ${file}`);
-            if (e instanceof parser_1.ParserError) {
-                if (cmd.verbose) {
-                    console.trace(e);
+            if (!silent || cmd.verbose) {
+                logging_1.logger.error(`❌ ${file}`);
+                if (e instanceof parser_1.ParserError) {
+                    if (cmd.verbose) {
+                        console.trace(e);
+                    }
+                    else {
+                        logging_1.logger.error(e.toString());
+                    }
                 }
                 else {
-                    logging_1.logger.error(e.toString());
-                }
-            }
-            else {
-                if (cmd.verbose) {
-                    console.trace(e);
-                }
-                else {
-                    logging_1.logger.error(new parser_1.InternalError(String(e)).toString());
+                    if (cmd.verbose) {
+                        console.trace(e);
+                    }
+                    else {
+                        logging_1.logger.error(new parser_1.InternalError(String(e)).toString());
+                    }
                 }
             }
         }
     }
-    return codeConnectObjects;
+    const storybookCodeConnectObjects = await (0, convert_1.convertStorybookFiles)({
+        projectInfo: (0, project_1.getReactProjectInfo)(projectInfo),
+    });
+    const allCodeConnectObjects = codeConnectObjects.concat(storybookCodeConnectObjects);
+    return allCodeConnectObjects;
 }
 async function handlePublish(cmd) {
     setupHandler(cmd);
-    let dir = cmd.dir ?? process.cwd();
-    const projectInfo = (0, project_1.getProjectInfo)(dir, cmd.config);
-    if (cmd.dryRun) {
-        logging_1.logger.info(`Files that would be published:`);
-    }
+    let dir = getDir(cmd);
+    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
     const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo);
-    const storybookCodeConnectObjects = await (0, convert_1.convertStorybookFiles)({
-        projectInfo,
-    });
-    const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects);
-    if (allCodeConnectFiles.length === 0) {
+    if (codeConnectObjects.length === 0) {
         logging_1.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.`);
         process.exit(0);
     }
-    const accessToken = getAccessToken(cmd);
-    if (!accessToken) {
-        logging_1.logger.error(`Couldn't find a Figma access token. Please provide one with \`--token <access_token>\` or set the FIGMA_ACCESS_TOKEN environment variable`);
-        process.exit(1);
+    if (cmd.dryRun) {
+        logging_1.logger.info(`Files that would be published:`);
+        logging_1.logger.info(codeConnectObjects.map((o) => `- ${o.component} (${o.figmaNode})`).join('\n'));
     }
+    const accessToken = getAccessToken(cmd);
     if (cmd.skipValidation) {
         logging_1.logger.info('Validation skipped');
     }
     else {
         logging_1.logger.info('Validating Code Connect files...');
         var start = new Date().getTime();
-        const valid = await (0, validation_1.validateDocs)(accessToken, allCodeConnectFiles);
+        const valid = await (0, validation_1.validateDocs)(cmd, accessToken, codeConnectObjects);
         if (!valid) {
             process.exit(1);
         }
@@ -129,11 +202,11 @@ async function handlePublish(cmd) {
         logging_1.logger.info(`Dry run complete`);
         process.exit(0);
     }
-    (0, upload_1.upload)({ accessToken, docs: allCodeConnectFiles });
+    (0, upload_1.upload)({ accessToken, docs: codeConnectObjects });
 }
 async function handleUnpublish(cmd) {
     setupHandler(cmd);
-    let dir = cmd.dir ?? process.cwd();
+    let dir = getDir(cmd);
     if (cmd.dryRun) {
         logging_1.logger.info(`Files that would be unpublished:`);
     }
@@ -145,13 +218,9 @@ async function handleUnpublish(cmd) {
         ];
     }
     else {
-        const projectInfo = (0, project_1.getProjectInfo)(dir, cmd.config);
+        const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
         const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo);
-        const storybookCodeConnectObjects = await (0, convert_1.convertStorybookFiles)({
-            projectInfo,
-        });
-        const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects);
-        nodesToDeleteRelevantInfo = allCodeConnectFiles.map((doc) => ({
+        nodesToDeleteRelevantInfo = codeConnectObjects.map((doc) => ({
             figmaNode: doc.figmaNode,
             label: doc.label,
         }));
@@ -168,47 +237,39 @@ async function handleUnpublish(cmd) {
 }
 async function handleParse(cmd) {
     setupHandler(cmd);
-    // if we're not doing a dry run, we don't want to output logs
-    if (!cmd.dryRun) {
-        logging_1.logger.setLogLevel(logging_1.LogLevel.Error);
-    }
-    let dir = cmd.dir ?? process.cwd();
-    const projectInfo = (0, project_1.getProjectInfo)(dir, cmd.config);
+    const dir = cmd.dir ?? process.cwd();
+    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
     const codeConnectObjects = await getCodeConnectObjects(dir, cmd, projectInfo);
-    const storybookCodeConnectObjects = await (0, convert_1.convertStorybookFiles)({
-        projectInfo,
-    });
-    const allCodeConnectFiles = codeConnectObjects.concat(storybookCodeConnectObjects);
     if (cmd.dryRun) {
         logging_1.logger.info(`Dry run complete`);
         process.exit(0);
     }
-    if (cmd.outfile) {
-        fs_1.default.writeFileSync(cmd.outfile, JSON.stringify(codeConnectObjects, null, 2));
-        logging_1.logger.info(`Wrote Code Connect JSON to ${(0, logging_1.highlight)(cmd.outfile)}`);
+    if (cmd.outFile) {
+        fs_1.default.writeFileSync(cmd.outFile, JSON.stringify(codeConnectObjects, null, 2));
+        logging_1.logger.info(`Wrote Code Connect JSON to ${(0, logging_1.highlight)(cmd.outFile)}`);
     }
     else {
         // don't format the output, so it can be piped to other commands
-        console.log(JSON.stringify(allCodeConnectFiles, undefined, 2));
+        console.log(JSON.stringify(codeConnectObjects, undefined, 2));
     }
 }
-function handleCreate(nodeUrl, cmd) {
+async function handleCreate(nodeUrl, cmd) {
     setupHandler(cmd);
+    const dir = cmd.dir ?? process.cwd();
+    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
     if (cmd.dryRun) {
         process.exit(0);
     }
     const accessToken = getAccessToken(cmd);
-    if (!accessToken) {
-        logging_1.logger.error(`Couldn't find a Figma access token. Please provide one with \`--token <access_token>\` or set the FIGMA_ACCESS_TOKEN environment variable`);
-        process.exit(1);
-    }
     return (0, create_1.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
         // behaviour would be to strip the quotes
         figmaNodeUrl: nodeUrl.replace(/\\/g, ''),
-        outFile: cmd.outfile,
+        outFile: cmd.outFile,
+        outDir: cmd.outDir,
+        projectInfo,
     });
 }
 //# sourceMappingURL=connect.js.map