From a7fab9331591190cf3b8f449f1f32126d2751cc5 Mon Sep 17 00:00:00 2001 From: figma-bot Date: Wed, 11 Sep 2024 12:45:27 +0000 Subject: [PATCH] Code Connect v1.1.3 --- CHANGELOG.md | 11 + cli/package.json | 6 +- .../ReactApiComponent.figmadoc.tsx | 2 +- .../StorybookComponent.stories.tsx | 3 +- .../react_storybook/StorybookComponent.tsx | 1 + .../e2e/e2e_parse_command_react.test.ts | 2 +- .../__test__/template_rendering_utils.ts | 248 ------------------ cli/src/connect/api.ts | 9 +- .../parser/examples/CustomImports.figma.ts | 6 + cli/src/html/__test__/parser/parser.test.ts | 12 + cli/src/html/external.ts | 7 +- cli/src/html/index_html.ts | 7 +- cli/src/html/parser.ts | 2 +- cli/src/html/types.ts | 10 + .../__test__/ButtonArrowFunction.figma.tsx | 2 +- cli/src/react/__test__/ButtonTest.figma.tsx | 2 +- .../react/__test__/ChildInstances.figma.tsx | 2 +- .../react/__test__/ColocatedCodeConnect.tsx | 2 +- .../__test__/ComponentWithLogic.figma.tsx | 2 +- .../react/__test__/CustomImports.figma.tsx | 2 +- .../react/__test__/DefaultImport.figma.tsx | 2 +- .../EnumLikeBooleanFalseProp.figma.tsx | 2 +- .../__test__/ForwardRefComponent.figma.tsx | 2 +- .../__test__/ImportMappingsTest.figma.tsx | 2 +- .../react/__test__/ImportsCasings.figma.tsx | 2 +- .../__test__/InvalidCodeConnect.figma.tsx | 2 +- .../__test__/MemoizedComponent.figma.tsx | 2 +- .../__test__/NamespacedComponent.figma.tsx | 2 +- .../react/__test__/NoComponentArg.figma.tsx | 2 +- .../NoComponentArgOrExampleFunction.figma.tsx | 2 +- cli/src/react/__test__/NoProps.figma.tsx | 2 +- .../react/__test__/PathAliasImport.figma.tsx | 3 +- cli/src/react/__test__/PropMappings.figma.tsx | 2 +- cli/src/react/__test__/PropsSpread.figma.tsx | 2 +- cli/src/react/__test__/PropsSpread.tsx | 2 +- .../PropsSpreadWithDestructuring.figma.tsx | 2 +- .../__test__/SignatureManyImports.figma.tsx | 2 +- .../__test__/TopLevelComponent.figma.tsx | 2 +- .../__test__/VariableRefFigmaNode.figma.tsx | 2 +- .../__test__/VariantRestriction.figma.tsx | 2 +- cli/src/react/external.ts | 11 +- cli/src/react/index_react.ts | 19 +- cli/src/react/parser.ts | 2 +- cli/src/react/types.ts | 10 + cli/src/storybook/__test__/convert.test.ts | 28 +- .../examples/ArrowComponent.stories.tsx | 3 +- .../__test__/examples/ArrowComponent.tsx | 1 + .../ArrowStoriesExplicitReturn.stories.tsx | 3 +- .../ArrowStoriesImplicitReturn.stories.tsx | 3 +- .../__test__/examples/Examples.stories.tsx | 3 +- .../ExamplesVariantRestrictions.stories.tsx | 3 +- .../examples/ExportedReference.stories.tsx | 3 +- .../examples/FunctionComponent.stories.tsx | 3 +- .../__test__/examples/FunctionComponent.tsx | 1 + .../examples/FunctionStories.stories.tsx | 5 +- .../examples/NoDesignParameter.stories.tsx | 1 + .../__test__/examples/NoExamples.stories.tsx | 2 +- .../examples/NoParameters.stories.tsx | 1 + .../NoTypeDesignParameter.stories.tsx | 1 + .../NonFigmaDesignParameter.stories.tsx | 1 + .../__test__/examples/PropMapping.stories.tsx | 3 +- .../__test__/examples/PropMapping.tsx | 2 + .../StoryObjectWithRender.stories.tsx | 5 +- cli/src/storybook/external.ts | 4 +- cli/tsconfig-typecheck.json | 4 + cli/tsconfig.json | 3 +- docs/html.md | 3 + 67 files changed, 158 insertions(+), 349 deletions(-) delete mode 100644 cli/src/connect/__test__/template_rendering_utils.ts create mode 100644 cli/src/html/__test__/parser/examples/CustomImports.figma.ts create mode 100644 cli/src/html/types.ts create mode 100644 cli/src/react/types.ts create mode 100644 cli/tsconfig-typecheck.json diff --git a/CHANGELOG.md b/CHANGELOG.md index ea5fede..1fb273d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +# Code Connect v1.1.3 (11th September 2024) + +## Fixed + +### HTML +- Fixed an issue where `imports` was incorrectly not included in the TypeScript interface +- Added a note in the [documentation](docs/html.md) that HTML support requires `moduleResolution: "NodeNext"` + +### React +- Fixed an issue where `imports` was incorrectly not included in the TypeScript interface (fixes https://github.com/figma/code-connect/issues/159) + # Code Connect v1.1.2 (10th September 2024) ## Fixed diff --git a/cli/package.json b/cli/package.json index e92f202..8cd7905 100644 --- a/cli/package.json +++ b/cli/package.json @@ -1,6 +1,6 @@ { "name": "@figma/code-connect", - "version": "1.1.2", + "version": "1.1.3", "description": "A tool for connecting your design system components in code with your design system in Figma", "keywords": [], "author": "Figma", @@ -36,7 +36,7 @@ }, "scripts": { "dev": "tsx src/cli.ts", - "build": "tsc", + "build": "rm -rf dist && npm run typecheck && tsc", "build:web": "pnpm build", "build:webpack": "webpack --mode production", "test": "npm run test:no-coverage -- --coverage", @@ -57,7 +57,7 @@ "bundle:cli:mac:arm64": "npm run bundle:cli -- -o bundle-cli/figma-mac-arm64 --target node18-mac-arm64", "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" + "typecheck": "tsc --noEmit -p tsconfig-typecheck.json" }, "devDependencies": { "@types/cross-spawn": "^6.0.6", diff --git a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.figmadoc.tsx b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.figmadoc.tsx index dfe2d4f..164fb08 100644 --- a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.figmadoc.tsx +++ b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.figmadoc.tsx @@ -1,4 +1,4 @@ -import figma from '../../..' +import figma from '../../../../../react/index_react' import { ReactApiComponent } from './ReactApiComponent' diff --git a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.stories.tsx b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.stories.tsx index 30e6c6b..af0b7a9 100644 --- a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.stories.tsx +++ b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.stories.tsx @@ -1,5 +1,6 @@ -import { StoryParameters } from '../../..' +import { StoryParameters } from '../../../../../react/index_react' import { StorybookComponent } from './StorybookComponent' +import React from 'react' export default { title: 'StorybookComponent', diff --git a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx index 12ddf80..01deb22 100644 --- a/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx +++ b/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import React from 'react' interface Props { disabled: boolean diff --git a/cli/src/connect/__test__/e2e/e2e_parse_command_react.test.ts b/cli/src/connect/__test__/e2e/e2e_parse_command_react.test.ts index 958d040..f7857af 100644 --- a/cli/src/connect/__test__/e2e/e2e_parse_command_react.test.ts +++ b/cli/src/connect/__test__/e2e/e2e_parse_command_react.test.ts @@ -46,7 +46,7 @@ export default figma.tsx\`\``, figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, templateData: { imports: [] }, component: 'StorybookComponent', label: 'Storybook', diff --git a/cli/src/connect/__test__/template_rendering_utils.ts b/cli/src/connect/__test__/template_rendering_utils.ts deleted file mode 100644 index a771b69..0000000 --- a/cli/src/connect/__test__/template_rendering_utils.ts +++ /dev/null @@ -1,248 +0,0 @@ -import { readFileSync } from 'fs' -import * as ts from 'typescript' -import path from 'path' -import { - ComponentProperties, - FigmaDocJSON, - InjectedLayer, - Result, - SuccessResult, -} from '@figma/code-connect-shared/src/types' -import { getFullTemplate } from '@figma/code-connect-shared/src/get_full_template' -import { parseCodeConnect, ParseFn } from '../parser_common' - -type ParseFileArgs = { - /** The directory name where the example Code Connect files are located */ - dirName: string - /** The Code Connect file to parse */ - file: string - /** The Code Connect file parsing function to use */ - parseFn: ParseFn - /** Optional array of extra files to add to the TS program */ - extraFiles?: string[] -} - -/** - * Parse a Code Connect file and return the parsed object - */ -export async function parseFile({ - dirName, - file, - parseFn, - extraFiles = [], -}: ParseFileArgs): Promise { - const program = ts.createProgram( - [ - path.join(dirName, 'examples', file), - ...extraFiles.map((extraFile) => path.join(dirName, 'examples', extraFile)), - ], - {}, - ) - - return await parseCodeConnect({ - program, - file: path.join(dirName, 'examples', file), - config: { parser: 'react' }, - absPath: path.join(dirName, 'examples'), - parseOptions: { - repoUrl: 'git@github.com:figma/code-connect.git', - debug: false, - }, - parseFn, - }) -} - -type GetTemplateArgs = { - dirName: string - file: string - parseFn: ParseFn - extraFiles?: string[] -} - -async function getTemplate({ dirName, file, parseFn, extraFiles = [] }: GetTemplateArgs) { - return (await parseFile({ dirName, file, parseFn, extraFiles }))[0].template -} - -type ExecuteTemplateArgs = { - /** The Code Connect file to execute */ - template: string - /** The properties to use when rendering the Code Connect file */ - properties: ComponentProperties - /** Optional array of child nodes to inject into the Code Connect file */ - childNodes?: InjectedLayer[] - /** Optional object of child instance documents */ - instanceFigmadocs?: Record -} - -let apiSource: string - -/** - * Execute a Code Connect file and return the result - */ -export async function executeTemplate(args: ExecuteTemplateArgs) { - const fullTemplate = getFullTemplate({ - apiSource, - nodeTreeToInject: { - type: 'INSTANCE', - guid: 'root', - key: 'key-root', - name: 'RootNode', - symbolId: '', - properties: args.properties || {}, - children: args.childNodes || [], - }, - inlineInstancesEnabled: true, - instanceFigmadocs: {}, - getInstanceFigmadocFromJSON: (instanceFigmadocsJSON, _guid) => { - try { - return instanceFigmadocsJSON[0] - } catch { - return null - } - }, - ...args, - }) - - const result: Result = new Function(fullTemplate)() - return result -} - -function expectSuccess(result: Result): asserts result is SuccessResult {} - -/** - * Returns a `getResult` function that can be used to render a Code Connect - * file, assert that it was successfully rendered, and return the sections so we - * can make assertions about them - * - * @param dirName The directory name where the example Code Connect files are - * located - * @param parseFn The Code Connect file parsing function to use - * @param expectSuccessFn The function to use to assert that the result was - * successful - * @param extraFiles An array of extra files to add to the TS program - */ -export function makeGetResult( - // This uses positional args because of a TS error related to the assertion part - // of `expectSuccessFn: typeof expectSuccess` when trying to use object args - dirName: string, - parseFn: ParseFn, - expectSuccessFn: typeof expectSuccess, - extraFiles: string[] = [], -) { - return async function getResult( - file: string, - props: Record< - string, - string | boolean | { type: 'BOOLEAN' | 'TEXT' | 'VARIANT'; value: string | boolean } - > = {}, - childNodes: InjectedLayer[] = [], - ) { - const template = await getTemplate({ dirName, file, parseFn, extraFiles }) - const propsFigmaFormat = Object.fromEntries( - Object.entries(props).map(([key, value]) => - typeof value === 'object' - ? [key, { type: value.type, value: value.value }] - : [ - key, - { - type: typeof value === 'boolean' ? ('BOOLEAN' as const) : ('TEXT' as const), - value, - }, - ], - ), - ) - - const result = await executeTemplate({ template, properties: propsFigmaFormat, childNodes }) - - expectSuccessFn(result) - return result.data.sections - } -} - -export function expectDefined(value: T | undefined): asserts value is T { - expect(value).toBeDefined() -} - -export function code(code: string) { - return { type: 'CODE', code } -} - -export function instance(guid: string, symbolId: string) { - return { type: 'INSTANCE', guid, symbolId } -} - -/** - * Returns a `renderInstance` function that can be used to render a Code Connect - * file with child instances - * - * @param parseFn The Code Connect file parsing function to use - * @param dirName The directory name where the example Code Connect files are - * located - * @param extraFiles An array of extra files to add to the TS program - */ -export function makeRenderInstance(parseFn: ParseFn, dirName: string, extraFiles: string[] = []) { - return async function ( - childTemplateName: string, - file: string, - extraProperties?: Record, - ) { - const docs = await parseFile({ dirName, file, parseFn, extraFiles }) - const mainDoc = docs.find((doc) => doc.figmaNode === 'main') - const childDoc = docs.find((doc) => doc.figmaNode === childTemplateName) - - expectDefined(mainDoc) - expectDefined(childDoc) - - const result = await executeTemplate({ - template: mainDoc.template, - properties: { - Instance: { type: 'INSTANCE_SWAP', value: 'childSymbolId' }, - ...extraProperties, - }, - childNodes: [ - { - type: 'INSTANCE', - key: 'childGuid', - guid: 'childGuid', - name: 'Child', - symbolId: 'childSymbolId', - properties: { - String: { type: 'TEXT', value: 'test' }, - }, - children: [], - }, - ], - instanceFigmadocs: { - 'key-childGuid': [childDoc], - }, - }) - - expectSuccess(result) - return result - } -} - -// Before running any tests, we transpile the template API into a string, so -// we can prepend it to the template. We do this in beforeAll so that it -// happens on every test run, so you can make changes to the API and rerun the -// tests while on watch mode, but so that it only happens once per run as it's -// relatively slow. -export function templateRenderingBeforeAll() { - apiSource = ts - .transpileModule( - readFileSync( - __dirname + - '/../../../node_modules/@figma/code-connect-shared/raw/code_connect_js_api.raw_source.ts', - 'utf8', - ), - { - compilerOptions: { - module: ts.ModuleKind.ESNext, - target: ts.ScriptTarget.ESNext, - removeComments: false, - }, - }, - ) - // transpileModule adds this, which we don't want - .outputText.replace('export {}', '') -} diff --git a/cli/src/connect/api.ts b/cli/src/connect/api.ts index 5f5a4ab..a03e050 100644 --- a/cli/src/connect/api.ts +++ b/cli/src/connect/api.ts @@ -127,7 +127,10 @@ export interface FigmaConnectLink { url: string } -export interface FigmaConnectMeta { +// ExampleFnReturnT is the return type of an example function. +// ExtraExampleT allows us to pass in an extra type to the `example` property, +// so that in Storybook, we can use strings to refer to non-hoisted functions +export interface FigmaConnectMeta { /** * Restricts this figma connect to any variants that fullfill the given filter. * The filter is a map of Figma variant names to values. Example: @@ -140,7 +143,7 @@ export interface FigmaConnectMeta { /** * Prop mappings for the connected component. This is used to map the values of the component's props - * to the values that are used in Figma, using helper functions like `Figma.boolean`. For example: + * to the values that are used in Figma, using helper functions like `figma.boolean`. For example: * ```ts * props: { * disabled: figma.boolean('Disabled'), @@ -160,7 +163,7 @@ export interface FigmaConnectMeta { * @param props * @returns */ - example?: (props: T) => ExampleFnReturnT + example?: ((props: T) => ExampleFnReturnT) | ExtraExampleT /** * A list of links that will display in Figma along with the examples diff --git a/cli/src/html/__test__/parser/examples/CustomImports.figma.ts b/cli/src/html/__test__/parser/examples/CustomImports.figma.ts new file mode 100644 index 0000000..2e18895 --- /dev/null +++ b/cli/src/html/__test__/parser/examples/CustomImports.figma.ts @@ -0,0 +1,6 @@ +import figma, { html } from '../../../index_html' + +figma.connect('ui/button', { + example: () => html`Click me`, + imports: ['import "@ui/Button"'], +}) diff --git a/cli/src/html/__test__/parser/parser.test.ts b/cli/src/html/__test__/parser/parser.test.ts index 35bb0c1..dc19c63 100644 --- a/cli/src/html/__test__/parser/parser.test.ts +++ b/cli/src/html/__test__/parser/parser.test.ts @@ -65,4 +65,16 @@ describe('HTML Parser', () => { async () => await testParse('RegularFunctionExampleWithExtraCode.figma.ts'), ).rejects.toThrow('Expected only a tagged template literal as the body of the render function') }) + + it('handles imports', async () => { + const result = await testParse('CustomImports.figma.ts', []) + + expect(result).toMatchObject([ + { + templateData: { + imports: ['import "@ui/Button"'], + }, + }, + ]) + }) }) diff --git a/cli/src/html/external.ts b/cli/src/html/external.ts index fcd3fee..57b3021 100644 --- a/cli/src/html/external.ts +++ b/cli/src/html/external.ts @@ -1,4 +1,3 @@ -import { FigmaConnectMeta } from '../connect/api' import { booleanType, enumType, @@ -8,11 +7,9 @@ import { textContentType, } from '../connect/external_types' import { HtmlTemplateString } from './template_literal' +import { HtmlMeta } from './types' -function connectType

( - _figmaNodeUrl: string, - _meta?: FigmaConnectMeta, -): void {} +function connectType

(_figmaNodeUrl: string, _meta?: HtmlMeta

): void {} function instanceType(_figmaPropName: string): HtmlTemplateString { return { diff --git a/cli/src/html/index_html.ts b/cli/src/html/index_html.ts index 531e19a..0509ac1 100644 --- a/cli/src/html/index_html.ts +++ b/cli/src/html/index_html.ts @@ -9,6 +9,7 @@ import * as figma from './external' import { FigmaConnectClient } from '../client/figma_client' import { html, HtmlTemplateString } from './template_literal' import { getClient } from '../connect/index_common' +import { HtmlMeta } from './types' const _client: FigmaConnectClient = getClient() const _figma: FigmaConnectAPI & { @@ -18,11 +19,7 @@ const _figma: FigmaConnectAPI & { * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456` * @param meta {@link FigmaConnectMeta} */ - connect

( - figmaNodeUrl: string, - meta: Required, 'example'>> & - FigmaConnectMeta, - ): void + connect

(figmaNodeUrl: string, meta: HtmlMeta

): void /** * Maps a Figma property to a boolean value for the connected component. This prop is replaced diff --git a/cli/src/html/parser.ts b/cli/src/html/parser.ts index c2d10aa..3444c20 100644 --- a/cli/src/html/parser.ts +++ b/cli/src/html/parser.ts @@ -525,7 +525,7 @@ export async function parseHtmlDoc( ): Promise { const { checker, sourceFile, config } = parserContext - // Parse the arguments to the `Figma.connect()` call + // Parse the arguments to the `figma.connect()` call const { figmaNodeUrlArg, configObjArg } = parseFigmaConnectArgs(node, parserContext) const { propsArg, exampleArg, variantArg, linksArg, importsArg } = parseConfigObjectArg( diff --git a/cli/src/html/types.ts b/cli/src/html/types.ts new file mode 100644 index 0000000..1ac4523 --- /dev/null +++ b/cli/src/html/types.ts @@ -0,0 +1,10 @@ +import { FigmaConnectMeta } from '../connect/api' +import { HtmlTemplateString } from './template_literal' + +export type HtmlMeta

= Required, 'example'>> & + FigmaConnectMeta & { + /** + * A list of import statements that will render in the Code Snippet in Figma. + */ + imports?: string[] + } diff --git a/cli/src/react/__test__/ButtonArrowFunction.figma.tsx b/cli/src/react/__test__/ButtonArrowFunction.figma.tsx index da4c1b9..e06e140 100644 --- a/cli/src/react/__test__/ButtonArrowFunction.figma.tsx +++ b/cli/src/react/__test__/ButtonArrowFunction.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../../' +import figma from '../index_react' import { ButtonArrowFunction } from './components/TestComponents' diff --git a/cli/src/react/__test__/ButtonTest.figma.tsx b/cli/src/react/__test__/ButtonTest.figma.tsx index f19a490..ab8b9e0 100644 --- a/cli/src/react/__test__/ButtonTest.figma.tsx +++ b/cli/src/react/__test__/ButtonTest.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'ui/button', { diff --git a/cli/src/react/__test__/ChildInstances.figma.tsx b/cli/src/react/__test__/ChildInstances.figma.tsx index c5daf2c..4b6d2ca 100644 --- a/cli/src/react/__test__/ChildInstances.figma.tsx +++ b/cli/src/react/__test__/ChildInstances.figma.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { figma } from '../..' +import { figma } from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'instanceSwap', { diff --git a/cli/src/react/__test__/ColocatedCodeConnect.tsx b/cli/src/react/__test__/ColocatedCodeConnect.tsx index abe7671..25c335f 100644 --- a/cli/src/react/__test__/ColocatedCodeConnect.tsx +++ b/cli/src/react/__test__/ColocatedCodeConnect.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' interface ButtonProps { disabled?: boolean diff --git a/cli/src/react/__test__/ComponentWithLogic.figma.tsx b/cli/src/react/__test__/ComponentWithLogic.figma.tsx index 20c90ee..8327041 100644 --- a/cli/src/react/__test__/ComponentWithLogic.figma.tsx +++ b/cli/src/react/__test__/ComponentWithLogic.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'ui/button', { diff --git a/cli/src/react/__test__/CustomImports.figma.tsx b/cli/src/react/__test__/CustomImports.figma.tsx index 83290ec..45d0bf7 100644 --- a/cli/src/react/__test__/CustomImports.figma.tsx +++ b/cli/src/react/__test__/CustomImports.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'ui/button', { diff --git a/cli/src/react/__test__/DefaultImport.figma.tsx b/cli/src/react/__test__/DefaultImport.figma.tsx index dab724f..0c2e69b 100644 --- a/cli/src/react/__test__/DefaultImport.figma.tsx +++ b/cli/src/react/__test__/DefaultImport.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../..' +import figma from '../index_react' import RenamedButton from './components/TestComponents' figma.connect(RenamedButton, 'ui/button') diff --git a/cli/src/react/__test__/EnumLikeBooleanFalseProp.figma.tsx b/cli/src/react/__test__/EnumLikeBooleanFalseProp.figma.tsx index e8e02cc..24e98de 100644 --- a/cli/src/react/__test__/EnumLikeBooleanFalseProp.figma.tsx +++ b/cli/src/react/__test__/EnumLikeBooleanFalseProp.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'test', { diff --git a/cli/src/react/__test__/ForwardRefComponent.figma.tsx b/cli/src/react/__test__/ForwardRefComponent.figma.tsx index 64882f6..a4e57b7 100644 --- a/cli/src/react/__test__/ForwardRefComponent.figma.tsx +++ b/cli/src/react/__test__/ForwardRefComponent.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../..' +import figma from '../index_react' import { ForwardRefButton } from './components/TestComponents' figma.connect(ForwardRefButton, 'ui/button') diff --git a/cli/src/react/__test__/ImportMappingsTest.figma.tsx b/cli/src/react/__test__/ImportMappingsTest.figma.tsx index cc7f864..d391fb3 100644 --- a/cli/src/react/__test__/ImportMappingsTest.figma.tsx +++ b/cli/src/react/__test__/ImportMappingsTest.figma.tsx @@ -1,7 +1,7 @@ import React from 'react' import { One, Two } from './ImportMappingsTest' import Three from './ImportMappingsTest' -import figma from '../..' +import figma from '../index_react' figma.connect(One, 'ui/button', { example: () => ( diff --git a/cli/src/react/__test__/ImportsCasings.figma.tsx b/cli/src/react/__test__/ImportsCasings.figma.tsx index e58dec0..08d9b6a 100644 --- a/cli/src/react/__test__/ImportsCasings.figma.tsx +++ b/cli/src/react/__test__/ImportsCasings.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { TestComponentKebab } from './components/test-component-kebab' import { TestComponentUnderscore } from './components/test_component_underscore' diff --git a/cli/src/react/__test__/InvalidCodeConnect.figma.tsx b/cli/src/react/__test__/InvalidCodeConnect.figma.tsx index ac1c4ba..8287044 100644 --- a/cli/src/react/__test__/InvalidCodeConnect.figma.tsx +++ b/cli/src/react/__test__/InvalidCodeConnect.figma.tsx @@ -1,3 +1,3 @@ -import figma from '../..' +import figma from '../index_react' figma.connect(null, 'ui/button') diff --git a/cli/src/react/__test__/MemoizedComponent.figma.tsx b/cli/src/react/__test__/MemoizedComponent.figma.tsx index 46c6706..e2c272f 100644 --- a/cli/src/react/__test__/MemoizedComponent.figma.tsx +++ b/cli/src/react/__test__/MemoizedComponent.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { MemoButton } from './components/TestComponents' figma.connect(MemoButton, 'ui/button', { diff --git a/cli/src/react/__test__/NamespacedComponent.figma.tsx b/cli/src/react/__test__/NamespacedComponent.figma.tsx index cd825de..c69cc09 100644 --- a/cli/src/react/__test__/NamespacedComponent.figma.tsx +++ b/cli/src/react/__test__/NamespacedComponent.figma.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import figma from '../..' +import figma from '../index_react' import { NamespacedComponents } from './components/TestComponents' figma.connect(NamespacedComponents.Button, 'ui/button', { diff --git a/cli/src/react/__test__/NoComponentArg.figma.tsx b/cli/src/react/__test__/NoComponentArg.figma.tsx index af9d60e..0e910ee 100644 --- a/cli/src/react/__test__/NoComponentArg.figma.tsx +++ b/cli/src/react/__test__/NoComponentArg.figma.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import figma from '../..' +import figma from '../index_react' figma.connect('ui/button', { example: () =>

Click Me
, diff --git a/cli/src/react/__test__/NoComponentArgOrExampleFunction.figma.tsx b/cli/src/react/__test__/NoComponentArgOrExampleFunction.figma.tsx index c97b584..ec24f88 100644 --- a/cli/src/react/__test__/NoComponentArgOrExampleFunction.figma.tsx +++ b/cli/src/react/__test__/NoComponentArgOrExampleFunction.figma.tsx @@ -1,3 +1,3 @@ -import figma from '../..' +import figma from '../index_react' figma.connect('ui/button') diff --git a/cli/src/react/__test__/NoProps.figma.tsx b/cli/src/react/__test__/NoProps.figma.tsx index af48fd0..2bb0e90 100644 --- a/cli/src/react/__test__/NoProps.figma.tsx +++ b/cli/src/react/__test__/NoProps.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../..' +import figma from '../index_react' import { ComponentWithoutProps } from './components/TestComponents' figma.connect(ComponentWithoutProps, 'ui/button') diff --git a/cli/src/react/__test__/PathAliasImport.figma.tsx b/cli/src/react/__test__/PathAliasImport.figma.tsx index 1045074..9dea262 100644 --- a/cli/src/react/__test__/PathAliasImport.figma.tsx +++ b/cli/src/react/__test__/PathAliasImport.figma.tsx @@ -1,5 +1,6 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' +// @ts-expect-error import { Button } from '@components/TestComponents' figma.connect(Button, 'ui2/button', { diff --git a/cli/src/react/__test__/PropMappings.figma.tsx b/cli/src/react/__test__/PropMappings.figma.tsx index 8443bef..9b43925 100644 --- a/cli/src/react/__test__/PropMappings.figma.tsx +++ b/cli/src/react/__test__/PropMappings.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'propsInline', { diff --git a/cli/src/react/__test__/PropsSpread.figma.tsx b/cli/src/react/__test__/PropsSpread.figma.tsx index ebc5df7..f3ca631 100644 --- a/cli/src/react/__test__/PropsSpread.figma.tsx +++ b/cli/src/react/__test__/PropsSpread.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './PropsSpread' const props = { diff --git a/cli/src/react/__test__/PropsSpread.tsx b/cli/src/react/__test__/PropsSpread.tsx index abf1f2d..fe9aaad 100644 --- a/cli/src/react/__test__/PropsSpread.tsx +++ b/cli/src/react/__test__/PropsSpread.tsx @@ -1,7 +1,7 @@ import React from 'react' interface ButtonProps { - width: string + width: string | undefined variant: string disabled: boolean } diff --git a/cli/src/react/__test__/PropsSpreadWithDestructuring.figma.tsx b/cli/src/react/__test__/PropsSpreadWithDestructuring.figma.tsx index 2dcfac1..bc10358 100644 --- a/cli/src/react/__test__/PropsSpreadWithDestructuring.figma.tsx +++ b/cli/src/react/__test__/PropsSpreadWithDestructuring.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './PropsSpread' const props = { diff --git a/cli/src/react/__test__/SignatureManyImports.figma.tsx b/cli/src/react/__test__/SignatureManyImports.figma.tsx index 09afc5b..4d37e76 100644 --- a/cli/src/react/__test__/SignatureManyImports.figma.tsx +++ b/cli/src/react/__test__/SignatureManyImports.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../..' +import figma from '../index_react' import { Icon1, Icon2, Icon3, Icon4, Icon5 } from './SignatureManyImports' figma.connect(Icon1, '1') diff --git a/cli/src/react/__test__/TopLevelComponent.figma.tsx b/cli/src/react/__test__/TopLevelComponent.figma.tsx index 9a5aff2..750d95d 100644 --- a/cli/src/react/__test__/TopLevelComponent.figma.tsx +++ b/cli/src/react/__test__/TopLevelComponent.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './TestTopLevelComponent' figma.connect(Button, 'ui/button', { diff --git a/cli/src/react/__test__/VariableRefFigmaNode.figma.tsx b/cli/src/react/__test__/VariableRefFigmaNode.figma.tsx index c821594..58e67b8 100644 --- a/cli/src/react/__test__/VariableRefFigmaNode.figma.tsx +++ b/cli/src/react/__test__/VariableRefFigmaNode.figma.tsx @@ -1,4 +1,4 @@ -import figma from '../..' +import figma from '../index_react' import Button from './components/TestComponents' const buttonURL = 'identifierAsUrl' diff --git a/cli/src/react/__test__/VariantRestriction.figma.tsx b/cli/src/react/__test__/VariantRestriction.figma.tsx index f465dba..7e903d3 100644 --- a/cli/src/react/__test__/VariantRestriction.figma.tsx +++ b/cli/src/react/__test__/VariantRestriction.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import figma from '../..' +import figma from '../index_react' import { Button } from './components/TestComponents' figma.connect(Button, 'ui/button', { diff --git a/cli/src/react/external.ts b/cli/src/react/external.ts index a54e470..e78d99e 100644 --- a/cli/src/react/external.ts +++ b/cli/src/react/external.ts @@ -1,5 +1,3 @@ -// todo move me to react -import { FigmaConnectMeta, PropMapping, ValueOf, EnumValue } from '../connect/api' import * as React from 'react' import { booleanType, @@ -9,13 +7,10 @@ import { classNameType, textContentType, } from '../connect/external_types' +import { ReactMeta } from './types' -function connectType

(_figmaNodeUrl: string, _meta?: FigmaConnectMeta

): void -function connectType

( - _component: any, - _figmaNodeUrl: string, - _meta?: FigmaConnectMeta

, -): void +function connectType

(_figmaNodeUrl: string, _meta?: ReactMeta

): void +function connectType

(_component: any, _figmaNodeUrl: string, _meta?: ReactMeta

): void function connectType(_component: unknown, _figmaNodeUrl: unknown, _meta?: unknown): void {} function instanceType(_figmaPropName: string) { diff --git a/cli/src/react/index_react.ts b/cli/src/react/index_react.ts index 38a48d7..c5f9083 100644 --- a/cli/src/react/index_react.ts +++ b/cli/src/react/index_react.ts @@ -9,6 +9,7 @@ import * as figma from './external' import * as StorybookTypes from '../storybook/external' import { FigmaConnectClient } from '../client/figma_client' import { getClient } from '../connect/index_common' +import { ReactMeta } from './types' const _client: FigmaConnectClient = getClient() const _figma: FigmaConnectAPI & { @@ -23,11 +24,7 @@ const _figma: FigmaConnectAPI & { * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456` * @param meta {@link FigmaConnectMeta} */ - connect

( - component: any, - figmaNodeUrl: string, - meta?: FigmaConnectMeta, - ): void + connect

(component: any, figmaNodeUrl: string, meta?: ReactMeta

): void /** * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures: @@ -39,10 +36,7 @@ const _figma: FigmaConnectAPI & { * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456` * @param meta {@link FigmaConnectMeta} */ - connect

( - figmaNodeUrl: string, - meta?: FigmaConnectMeta, - ): void + connect

(figmaNodeUrl: string, meta?: ReactMeta

): void /** * Maps a Figma property to a boolean value for the connected component. This prop is replaced @@ -103,13 +97,6 @@ const _figma: FigmaConnectAPI & { * ``` */ nestedProps(layer: string, input: V): V - - /** - * A list of import statements that will render in the Code Snippet in Figma. - * This overrides the auto-generated imports for the component. When this is specified, - * the `importPaths` option in the config file is also ignored. - */ - imports?: string[] } = figma export { _figma as figma, _client as client } diff --git a/cli/src/react/parser.ts b/cli/src/react/parser.ts index f2bdf19..c7d1f67 100644 --- a/cli/src/react/parser.ts +++ b/cli/src/react/parser.ts @@ -990,7 +990,7 @@ export async function parseReactDoc( ): Promise { const { checker, sourceFile, config } = parserContext - // Parse the arguments to the `Figma.connect()` call + // Parse the arguments to the `figma.connect()` call const { componentArg, figmaNodeUrlArg, configObjArg } = parseFigmaConnectArgs(node, parserContext) const { propsArg, exampleArg, variantArg, linksArg, importsArg } = parseConfigObjectArg( diff --git a/cli/src/react/types.ts b/cli/src/react/types.ts new file mode 100644 index 0000000..e478b7d --- /dev/null +++ b/cli/src/react/types.ts @@ -0,0 +1,10 @@ +import { FigmaConnectMeta } from '../connect/api' + +export type ReactMeta

= FigmaConnectMeta & { + /** + * A list of import statements that will render in the Code Snippet in Figma. + * This overrides the auto-generated imports for the component. When this is specified, + * the `importPaths` option in the config file is also ignored. + */ + imports?: string[] +} diff --git a/cli/src/storybook/__test__/convert.test.ts b/cli/src/storybook/__test__/convert.test.ts index 6b75efc..467a5c7 100644 --- a/cli/src/storybook/__test__/convert.test.ts +++ b/cli/src/storybook/__test__/convert.test.ts @@ -86,7 +86,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), }, ]) @@ -99,7 +99,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/ArrowComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('ArrowComponent'), }, ]) @@ -112,7 +112,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/ArrowComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('ArrowComponent'), }, ]) @@ -125,7 +125,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), }, { @@ -153,7 +153,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), }, { @@ -169,7 +169,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), }, { @@ -188,7 +188,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/PropMapping.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 9 }, template: getExpectedTemplate('PropMapping'), // name: 'Default', templateData: { @@ -235,7 +235,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/ArrowComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: `const figma = require("figma")\n\nexport default figma.tsx\`\``, }, ]) @@ -248,7 +248,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), // name: 'Default', }, @@ -271,7 +271,7 @@ describe('convertStorybookFiles (JS templates)', () => { component: 'FunctionComponent', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), variant: { 'With icon': false }, // name: 'Default', @@ -281,7 +281,7 @@ describe('convertStorybookFiles (JS templates)', () => { component: 'FunctionComponent', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponentWithIcon'), variant: { 'With icon': true }, // name: 'WithIcon', @@ -291,7 +291,7 @@ describe('convertStorybookFiles (JS templates)', () => { component: 'FunctionComponent', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponentStringName'), variant: { DummyOption: 'DummyValue' }, // name: 'StringName', @@ -301,7 +301,7 @@ describe('convertStorybookFiles (JS templates)', () => { component: 'FunctionComponent', source: 'https://github.com/figma/code-connect/blob/main/cli/src/storybook/__test__/examples/FunctionComponent.tsx', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponentMultipleRestrictions'), variant: { 'With icon': true, DummyOption: 'DummyValue' }, // name: 'StringName', @@ -321,7 +321,7 @@ describe('convertStorybookFiles (JS templates)', () => { figmaNode: 'https://figma.com/test', source: 'https://storybook.com/?path=/docs/cli-src-storybook---test---examples-FunctionComponent', - sourceLocation: { line: 7 }, + sourceLocation: { line: 8 }, template: getExpectedTemplate('FunctionComponent'), }, ]) diff --git a/cli/src/storybook/__test__/examples/ArrowComponent.stories.tsx b/cli/src/storybook/__test__/examples/ArrowComponent.stories.tsx index fb7fdc5..c5b7731 100644 --- a/cli/src/storybook/__test__/examples/ArrowComponent.stories.tsx +++ b/cli/src/storybook/__test__/examples/ArrowComponent.stories.tsx @@ -1,5 +1,6 @@ import { ArrowComponent } from './ArrowComponent' -import { StoryParameters } from '../../../' +import { StoryParameters } from '../../../react/index_react' +import React from 'react' export default { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/ArrowComponent.tsx b/cli/src/storybook/__test__/examples/ArrowComponent.tsx index 4bb6463..5fb7a55 100644 --- a/cli/src/storybook/__test__/examples/ArrowComponent.tsx +++ b/cli/src/storybook/__test__/examples/ArrowComponent.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import React from 'react' interface Props { disabled: boolean diff --git a/cli/src/storybook/__test__/examples/ArrowStoriesExplicitReturn.stories.tsx b/cli/src/storybook/__test__/examples/ArrowStoriesExplicitReturn.stories.tsx index 23d37de..504e153 100644 --- a/cli/src/storybook/__test__/examples/ArrowStoriesExplicitReturn.stories.tsx +++ b/cli/src/storybook/__test__/examples/ArrowStoriesExplicitReturn.stories.tsx @@ -1,5 +1,6 @@ import { FunctionComponent } from './FunctionComponent' -import { StoryParameters } from '../../../' +import figma, { StoryParameters } from '../../../react/index_react' +import React from 'react' export default { title: 'FunctionComponent', diff --git a/cli/src/storybook/__test__/examples/ArrowStoriesImplicitReturn.stories.tsx b/cli/src/storybook/__test__/examples/ArrowStoriesImplicitReturn.stories.tsx index 000c26b..d20a09d 100644 --- a/cli/src/storybook/__test__/examples/ArrowStoriesImplicitReturn.stories.tsx +++ b/cli/src/storybook/__test__/examples/ArrowStoriesImplicitReturn.stories.tsx @@ -1,5 +1,6 @@ import { FunctionComponent } from './FunctionComponent' -import { StoryParameters } from '../../../' +import figma, { StoryParameters } from '../../../react/index_react' +import React from 'react' export default { title: 'FunctionComponent', diff --git a/cli/src/storybook/__test__/examples/Examples.stories.tsx b/cli/src/storybook/__test__/examples/Examples.stories.tsx index c570ae7..45f30c3 100644 --- a/cli/src/storybook/__test__/examples/Examples.stories.tsx +++ b/cli/src/storybook/__test__/examples/Examples.stories.tsx @@ -1,5 +1,6 @@ import { FunctionComponent } from './FunctionComponent' -import { StoryParameters } from '../../../' +import { StoryParameters } from '../../../react/index_react' +import React from 'react' export default { title: 'FunctionComponent', diff --git a/cli/src/storybook/__test__/examples/ExamplesVariantRestrictions.stories.tsx b/cli/src/storybook/__test__/examples/ExamplesVariantRestrictions.stories.tsx index c2d57c3..eaf9491 100644 --- a/cli/src/storybook/__test__/examples/ExamplesVariantRestrictions.stories.tsx +++ b/cli/src/storybook/__test__/examples/ExamplesVariantRestrictions.stories.tsx @@ -1,5 +1,6 @@ -import { StoryParameters } from '../../..' +import { StoryParameters } from '../../../react/index_react' import { FunctionComponent } from './FunctionComponent' +import React from 'react' export default { title: 'FunctionComponent', diff --git a/cli/src/storybook/__test__/examples/ExportedReference.stories.tsx b/cli/src/storybook/__test__/examples/ExportedReference.stories.tsx index f7355d2..d6e9a29 100644 --- a/cli/src/storybook/__test__/examples/ExportedReference.stories.tsx +++ b/cli/src/storybook/__test__/examples/ExportedReference.stories.tsx @@ -1,5 +1,6 @@ import { ArrowComponent } from './ArrowComponent' -import { StoryParameters } from '../../../' +import { StoryParameters } from '../../../react/index_react' +import React from 'react' const meta = { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/FunctionComponent.stories.tsx b/cli/src/storybook/__test__/examples/FunctionComponent.stories.tsx index b84b004..991b7c0 100644 --- a/cli/src/storybook/__test__/examples/FunctionComponent.stories.tsx +++ b/cli/src/storybook/__test__/examples/FunctionComponent.stories.tsx @@ -1,5 +1,6 @@ -import { StoryParameters } from '../../..' +import { StoryParameters } from '../../../react/index_react' import { FunctionComponent } from './FunctionComponent' +import React from 'react' export default { title: 'FunctionComponent', diff --git a/cli/src/storybook/__test__/examples/FunctionComponent.tsx b/cli/src/storybook/__test__/examples/FunctionComponent.tsx index d4a98e5..2569fe0 100644 --- a/cli/src/storybook/__test__/examples/FunctionComponent.tsx +++ b/cli/src/storybook/__test__/examples/FunctionComponent.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import React from 'react' interface Props { disabled: boolean diff --git a/cli/src/storybook/__test__/examples/FunctionStories.stories.tsx b/cli/src/storybook/__test__/examples/FunctionStories.stories.tsx index cad3561..f67d079 100644 --- a/cli/src/storybook/__test__/examples/FunctionStories.stories.tsx +++ b/cli/src/storybook/__test__/examples/FunctionStories.stories.tsx @@ -1,5 +1,6 @@ -import { StoryParameters, figma } from '../../..' +import { StoryParameters, figma } from '../../../react/index_react' import { FunctionComponent } from './FunctionComponent' +import React from 'react' export default { title: 'FunctionComponent', @@ -13,7 +14,7 @@ export default { disabled: figma.boolean('Disabled'), }, }, - } satisfies StoryParameters, + } satisfies StoryParameters<{ disabled: boolean }>, } export function Default() { diff --git a/cli/src/storybook/__test__/examples/NoDesignParameter.stories.tsx b/cli/src/storybook/__test__/examples/NoDesignParameter.stories.tsx index 1837342..26579ef 100644 --- a/cli/src/storybook/__test__/examples/NoDesignParameter.stories.tsx +++ b/cli/src/storybook/__test__/examples/NoDesignParameter.stories.tsx @@ -1,4 +1,5 @@ import { ArrowComponent } from './ArrowComponent' +import React from 'react' export default { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/NoExamples.stories.tsx b/cli/src/storybook/__test__/examples/NoExamples.stories.tsx index b6aac50..eab6038 100644 --- a/cli/src/storybook/__test__/examples/NoExamples.stories.tsx +++ b/cli/src/storybook/__test__/examples/NoExamples.stories.tsx @@ -1,4 +1,4 @@ -import { StoryParameters } from '../../..' +import { StoryParameters } from '../../../react/index_react' import { ArrowComponent } from './ArrowComponent' export default { diff --git a/cli/src/storybook/__test__/examples/NoParameters.stories.tsx b/cli/src/storybook/__test__/examples/NoParameters.stories.tsx index 344c569..9c9cbe6 100644 --- a/cli/src/storybook/__test__/examples/NoParameters.stories.tsx +++ b/cli/src/storybook/__test__/examples/NoParameters.stories.tsx @@ -1,4 +1,5 @@ import { ArrowComponent } from './ArrowComponent' +import React from 'react' export default { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/NoTypeDesignParameter.stories.tsx b/cli/src/storybook/__test__/examples/NoTypeDesignParameter.stories.tsx index 7172736..524e25f 100644 --- a/cli/src/storybook/__test__/examples/NoTypeDesignParameter.stories.tsx +++ b/cli/src/storybook/__test__/examples/NoTypeDesignParameter.stories.tsx @@ -1,4 +1,5 @@ import { ArrowComponent } from './ArrowComponent' +import React from 'react' export default { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/NonFigmaDesignParameter.stories.tsx b/cli/src/storybook/__test__/examples/NonFigmaDesignParameter.stories.tsx index 0380bbf..fc91cf1 100644 --- a/cli/src/storybook/__test__/examples/NonFigmaDesignParameter.stories.tsx +++ b/cli/src/storybook/__test__/examples/NonFigmaDesignParameter.stories.tsx @@ -1,4 +1,5 @@ import { ArrowComponent } from './ArrowComponent' +import React from 'react' export default { title: 'ArrowComponent', diff --git a/cli/src/storybook/__test__/examples/PropMapping.stories.tsx b/cli/src/storybook/__test__/examples/PropMapping.stories.tsx index 5f21719..26dcb0a 100644 --- a/cli/src/storybook/__test__/examples/PropMapping.stories.tsx +++ b/cli/src/storybook/__test__/examples/PropMapping.stories.tsx @@ -1,5 +1,6 @@ import { PropMapping, PropMappingProps } from './PropMapping' -import figma, { StoryParameters } from '../../..' +import figma, { StoryParameters } from '../../../react/index_react' +import React from 'react' export default { title: 'PropMapping', diff --git a/cli/src/storybook/__test__/examples/PropMapping.tsx b/cli/src/storybook/__test__/examples/PropMapping.tsx index 6dde31f..ba4f8fe 100644 --- a/cli/src/storybook/__test__/examples/PropMapping.tsx +++ b/cli/src/storybook/__test__/examples/PropMapping.tsx @@ -1,3 +1,5 @@ +import React from 'react' + export type PropMappingProps = { stringProp: string booleanProp: boolean diff --git a/cli/src/storybook/__test__/examples/StoryObjectWithRender.stories.tsx b/cli/src/storybook/__test__/examples/StoryObjectWithRender.stories.tsx index 1e62c00..37dae07 100644 --- a/cli/src/storybook/__test__/examples/StoryObjectWithRender.stories.tsx +++ b/cli/src/storybook/__test__/examples/StoryObjectWithRender.stories.tsx @@ -1,5 +1,6 @@ -import { StoryParameters, figma } from '../../../' +import { StoryParameters, figma } from '../../../react/index_react' import { FunctionComponent } from './FunctionComponent' +import React from 'react' export default { title: 'StoryObjectWithRender', @@ -29,7 +30,7 @@ export const Disabled = { } export const WithArgs = { - render: (args) => { + render: (args: any) => { return ( Hello this line is long to cause it to wrap in brackets diff --git a/cli/src/storybook/external.ts b/cli/src/storybook/external.ts index d1a7ec8..857e304 100644 --- a/cli/src/storybook/external.ts +++ b/cli/src/storybook/external.ts @@ -11,7 +11,7 @@ import { FigmaConnectMeta } from '../connect/api' * } satisfies StoryParameters, * } */ -export type StoryParameters = { +export type StoryParameters = { design: { type: 'figma' /** @@ -26,7 +26,7 @@ export type StoryParameters = { } & Pick } -type ExampleObject = FigmaConnectMeta & { +type ExampleObject = FigmaConnectMeta & { variant?: FigmaConnectMeta['variant'] links?: FigmaConnectMeta['links'] } diff --git a/cli/tsconfig-typecheck.json b/cli/tsconfig-typecheck.json new file mode 100644 index 0000000..cb2ccfe --- /dev/null +++ b/cli/tsconfig-typecheck.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "dist", "src/components", "scripts"] +} diff --git a/cli/tsconfig.json b/cli/tsconfig.json index 0bc3188..c72a7f7 100644 --- a/cli/tsconfig.json +++ b/cli/tsconfig.json @@ -17,11 +17,12 @@ "node_modules", "dist", "src/__test__", + "src/html/__test__", "src/react/__test__", "src/connect/__test__", "src/connect/wizard/__test__", "src/storybook/__test__", "src/components", - "scripts" + "scripts", ], } diff --git a/docs/html.md b/docs/html.md index a908d17..1e355dc 100644 --- a/docs/html.md +++ b/docs/html.md @@ -19,6 +19,9 @@ Install this package into your project's directory. npm install @figma/code-connect ``` +> [!NOTE] +> Code Connect uses [package.json entry points](https://nodejs.org/api/packages.html#packages_package_entry_points), which requires `"moduleResolution": "NodeNext"` in your `tsconfig.json`. If this is a problem for your project, please let us know via [GitHub Issues](https://github.com/figma/code-connect/issues/new/choose). + ## 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` from inside your project. Note that depending on what terminal software you're using, you might need to wrap the URL in quotes.