From ab10acc82f7556a5829f79621f66b15f277072d1 Mon Sep 17 00:00:00 2001 From: Byron Wall Date: Fri, 6 Dec 2024 12:50:15 -0500 Subject: [PATCH 01/12] feat(figma connect): implement figma connect and try it out on a few components --- figma.config.json | 8 + package.json | 1 + .../components/avatar/src/avatar.figma.tsx | 41 ++ .../flat-button/src/flat-button.figma.tsx | 31 + packages/components/card/src/card.figma.tsx | 34 + .../src/localized-rich-text-input.figma.tsx | 22 + .../tag/src/tag-list/tag-list.figma.tsx | 14 + packages/components/tag/src/tag.figma.tsx | 24 + yarn.lock | 620 ++++++++++++++++-- 9 files changed, 743 insertions(+), 52 deletions(-) create mode 100644 figma.config.json create mode 100644 packages/components/avatar/src/avatar.figma.tsx create mode 100644 packages/components/buttons/flat-button/src/flat-button.figma.tsx create mode 100644 packages/components/card/src/card.figma.tsx create mode 100644 packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.figma.tsx create mode 100644 packages/components/tag/src/tag-list/tag-list.figma.tsx create mode 100644 packages/components/tag/src/tag.figma.tsx diff --git a/figma.config.json b/figma.config.json new file mode 100644 index 0000000000..e71531aedd --- /dev/null +++ b/figma.config.json @@ -0,0 +1,8 @@ +{ + "codeConnect": { + "importPaths": { + "packages/components/**/*": "@commercetools-frontend/ui-kit" + }, + "include": ["packages/components/**/*.{tsx,jsx}"] + } +} diff --git a/package.json b/package.json index 005fa57828..8b56d7ddd4 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "@commercetools/github-labels": "1.1.0", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", + "@figma/code-connect": "^1.2.4", "@formatjs/cli": "6.3.14", "@formatjs/intl-relativetimeformat": "11.4.8", "@manypkg/cli": "0.23.0", diff --git a/packages/components/avatar/src/avatar.figma.tsx b/packages/components/avatar/src/avatar.figma.tsx new file mode 100644 index 0000000000..41ee6d133a --- /dev/null +++ b/packages/components/avatar/src/avatar.figma.tsx @@ -0,0 +1,41 @@ +// @ts-nocheck +import { Avatar } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + Avatar, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=87%3A17020', + { + props: { + // These props were automatically mapped based on your linked code: + isHighlighted: figma.boolean('Highlighted'), + size: figma.enum('Size', { + Small: 's', + Medium: 'm', + Large: 'l', + }), + color: figma.enum('Color', { + Accent: 'accent', + Purple: 'purple', + Turquoise: 'turquoise', + Brown: 'brown', + }), + icon: figma.instance('Icon'), + }, + example: (props) => ( + + ), + } +); diff --git a/packages/components/buttons/flat-button/src/flat-button.figma.tsx b/packages/components/buttons/flat-button/src/flat-button.figma.tsx new file mode 100644 index 0000000000..028fdd592c --- /dev/null +++ b/packages/components/buttons/flat-button/src/flat-button.figma.tsx @@ -0,0 +1,31 @@ +// @ts-nocheck +import { FlatButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + FlatButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=202%3A20410', + { + props: { + label: figma.string('Text'), + icon: figma.instance('Icon'), + tone: figma.enum('Tone', { + primary: 'primary', + critical: 'critical', + secondary: 'secondary', + Inverted: 'inverted', + }), + }, + example: (props) => ( + + ), + } +); diff --git a/packages/components/card/src/card.figma.tsx b/packages/components/card/src/card.figma.tsx new file mode 100644 index 0000000000..9006aecd24 --- /dev/null +++ b/packages/components/card/src/card.figma.tsx @@ -0,0 +1,34 @@ +// @ts-nocheck +import { Card } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + Card, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=107%3A18713', + { + props: { + // These props were automatically mapped based on your linked code: + type: figma.enum('Type', { + Raised: 'raised', + Flat: 'flat', + }), + theme: figma.enum('Theme', { + Light: 'light', + Dark: 'dark', + }), + children: figma.children('*'), + }, + example: (props) => ( + + {props.children} + + ), + } +); diff --git a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.figma.tsx b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.figma.tsx new file mode 100644 index 0000000000..c9cdcfe23c --- /dev/null +++ b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.figma.tsx @@ -0,0 +1,22 @@ +// @ts-nocheck +import { LocalizedRichTextInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + LocalizedRichTextInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=893%3A34505', + { + props: { + // display props don't map well to component props, TODO: come back to this when we are more experienced w/code connect + }, + example: (props) => , + } +); diff --git a/packages/components/tag/src/tag-list/tag-list.figma.tsx b/packages/components/tag/src/tag-list/tag-list.figma.tsx new file mode 100644 index 0000000000..5d71cfaa4e --- /dev/null +++ b/packages/components/tag/src/tag-list/tag-list.figma.tsx @@ -0,0 +1,14 @@ +// @ts-nocheck +import { TagList } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + TagList, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5318%3A8820', + { + props: { + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/tag/src/tag.figma.tsx b/packages/components/tag/src/tag.figma.tsx new file mode 100644 index 0000000000..96812900fc --- /dev/null +++ b/packages/components/tag/src/tag.figma.tsx @@ -0,0 +1,24 @@ +// @ts-nocheck +import { Tag } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + Tag, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=1301%3A38461', + { + props: { + type: figma.enum('Type', { + Warning: 'warning', + Default: 'normal', + }), + isDraggable: figma.boolean('is draggable'), + children: figma.children('*'), + /**TODO: Implement `Tone` in figma and add here */ + }, + example: (props) => ( + + {props.children} + + ), + } +); diff --git a/yarn.lock b/yarn.lock index 66dc2ea73d..b8f197803f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -53,6 +53,17 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2": + version: 7.26.2 + resolution: "@babel/code-frame@npm:7.26.2" + dependencies: + "@babel/helper-validator-identifier": ^7.25.9 + js-tokens: ^4.0.0 + picocolors: ^1.0.0 + checksum: db13f5c42d54b76c1480916485e6900748bbcb0014a8aca87f50a091f70ff4e0d0a6db63cade75eb41fcc3d2b6ba0a7f89e343def4f96f00269b41b8ab8dd7b8 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.2": version: 7.25.2 resolution: "@babel/compat-data@npm:7.25.2" @@ -74,6 +85,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.25.9": + version: 7.26.3 + resolution: "@babel/compat-data@npm:7.26.3" + checksum: 85c5a9fb365231688c7faeb977f1d659da1c039e17b416f8ef11733f7aebe11fe330dce20c1844cacf243766c1d643d011df1d13cac9eda36c46c6c475693d21 + languageName: node + linkType: hard + "@babel/core@npm:7.12.9": version: 7.12.9 resolution: "@babel/core@npm:7.12.9" @@ -121,6 +139,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:7.26.0": + version: 7.26.0 + resolution: "@babel/core@npm:7.26.0" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.26.0 + "@babel/generator": ^7.26.0 + "@babel/helper-compilation-targets": ^7.25.9 + "@babel/helper-module-transforms": ^7.26.0 + "@babel/helpers": ^7.26.0 + "@babel/parser": ^7.26.0 + "@babel/template": ^7.25.9 + "@babel/traverse": ^7.25.9 + "@babel/types": ^7.26.0 + convert-source-map: ^2.0.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.3 + semver: ^6.3.1 + checksum: b296084cfd818bed8079526af93b5dfa0ba70282532d2132caf71d4060ab190ba26d3184832a45accd82c3c54016985a4109ab9118674347a7e5e9bc464894e6 + languageName: node + linkType: hard + "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.9, @babel/core@npm:^7.7.5, @babel/core@npm:^7.7.7": version: 7.25.2 resolution: "@babel/core@npm:7.25.2" @@ -181,6 +222,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:7.26.2": + version: 7.26.2 + resolution: "@babel/generator@npm:7.26.2" + dependencies: + "@babel/parser": ^7.26.2 + "@babel/types": ^7.26.0 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^3.0.2 + checksum: 6ff850b7d6082619f8c2f518d993cf7254cfbaa20b026282cbef5c9b2197686d076a432b18e36c4d1a42721c016df4f77a8f62c67600775d9683621d534b91b4 + languageName: node + linkType: hard + "@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.25.0, @babel/generator@npm:^7.7.2": version: 7.25.0 resolution: "@babel/generator@npm:7.25.0" @@ -193,6 +247,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/generator@npm:7.26.3" + dependencies: + "@babel/parser": ^7.26.3 + "@babel/types": ^7.26.3 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^3.0.2 + checksum: fb09fa55c66f272badf71c20a3a2cee0fa1a447fed32d1b84f16a668a42aff3e5f5ddc6ed5d832dda1e952187c002ca1a5cdd827022efe591b6ac44cada884ea + languageName: node + linkType: hard + "@babel/generator@npm:^7.25.7": version: 7.25.7 resolution: "@babel/generator@npm:7.25.7" @@ -691,6 +758,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:7.26.0": + version: 7.26.0 + resolution: "@babel/parser@npm:7.26.0" + dependencies: + "@babel/types": ^7.26.0 + bin: + parser: ./bin/babel-parser.js + checksum: ea7688cd20c06a6d60cb479879936cd2b8de2797a6578b29d116a59641cb845251ab59442adedfef0e49b44a21726d6d0fc8fef121d8feb1f167623d60afd951 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.3": version: 7.25.3 resolution: "@babel/parser@npm:7.25.3" @@ -702,6 +780,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2, @babel/parser@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/parser@npm:7.26.3" + dependencies: + "@babel/types": ^7.26.3 + bin: + parser: ./bin/babel-parser.js + checksum: e2bff2e9fa6540ee18fecc058bc74837eda2ddcecbe13454667314a93fc0ba26c1fb862c812d84f6d5f225c3bd8d191c3a42d4296e287a882c4e1f82ff2815ff + languageName: node + linkType: hard + "@babel/parser@npm:^7.25.7": version: 7.25.7 resolution: "@babel/parser@npm:7.25.7" @@ -2134,6 +2223,21 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.25.9": + version: 7.26.4 + resolution: "@babel/traverse@npm:7.26.4" + dependencies: + "@babel/code-frame": ^7.26.2 + "@babel/generator": ^7.26.3 + "@babel/parser": ^7.26.3 + "@babel/template": ^7.25.9 + "@babel/types": ^7.26.3 + debug: ^4.3.1 + globals: ^11.1.0 + checksum: dcdf51b27ab640291f968e4477933465c2910bfdcbcff8f5315d1f29b8ff861864f363e84a71fb489f5e9708e8b36b7540608ce019aa5e57ef7a4ba537e62700 + languageName: node + linkType: hard + "@babel/traverse@npm:^7.25.7": version: 7.25.7 resolution: "@babel/traverse@npm:7.25.7" @@ -2149,21 +2253,6 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.25.9": - version: 7.26.4 - resolution: "@babel/traverse@npm:7.26.4" - dependencies: - "@babel/code-frame": ^7.26.2 - "@babel/generator": ^7.26.3 - "@babel/parser": ^7.26.3 - "@babel/template": ^7.25.9 - "@babel/types": ^7.26.3 - debug: ^4.3.1 - globals: ^11.1.0 - checksum: dcdf51b27ab640291f968e4477933465c2910bfdcbcff8f5315d1f29b8ff861864f363e84a71fb489f5e9708e8b36b7540608ce019aa5e57ef7a4ba537e62700 - languageName: node - linkType: hard - "@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.12.6, @babel/types@npm:^7.12.7, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4": version: 7.25.2 resolution: "@babel/types@npm:7.25.2" @@ -2175,6 +2264,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.23.0, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/types@npm:7.26.3" + dependencies: + "@babel/helper-string-parser": ^7.25.9 + "@babel/helper-validator-identifier": ^7.25.9 + checksum: 195f428080dcaadbcecc9445df7f91063beeaa91b49ccd78f38a5af6b75a6a58391d0c6614edb1ea322e57889a1684a0aab8e667951f820196901dd341f931e9 + languageName: node + linkType: hard + "@babel/types@npm:^7.25.7": version: 7.25.7 resolution: "@babel/types@npm:7.25.7" @@ -5849,6 +5948,50 @@ __metadata: languageName: node linkType: hard +"@fastify/busboy@npm:^2.0.0": + version: 2.1.1 + resolution: "@fastify/busboy@npm:2.1.1" + checksum: 42c32ef75e906c9a4809c1e1930a5ca6d4ddc8d138e1a8c8ba5ea07f997db32210617d23b2e4a85fe376316a41a1a0439fc6ff2dedf5126d96f45a9d80754fb2 + languageName: node + linkType: hard + +"@figma/code-connect@npm:^1.2.4": + version: 1.2.4 + resolution: "@figma/code-connect@npm:1.2.4" + dependencies: + "@babel/core": 7.26.0 + "@babel/generator": 7.26.2 + "@babel/parser": 7.26.0 + "@babel/types": 7.26.0 + "@storybook/csf-tools": ^7.6.7 + boxen: 5.1.1 + chalk: ^4.1.2 + commander: ^11.1.0 + compare-versions: ^6.1.0 + cross-spawn: ^7.0.3 + dotenv: ^16.3.1 + fast-fuzzy: ^1.12.0 + find-up: ^5.0.0 + glob: ^10.3.10 + jsdom: ^24.1.1 + lodash: ^4.17.21 + minimatch: ^9.0.3 + ora: ^5.4.1 + parse5: ^7.1.2 + prettier: ^2.8.8 + prompts: ^2.4.2 + strip-ansi: ^6.0.0 + ts-morph: ^23.0.0 + typescript: 5.5.4 + undici: ^5.28.4 + zod: ^3.23.8 + zod-validation-error: ^3.2.0 + bin: + figma: bin/figma + checksum: ebfb9e87952b9554799a51721040dc99617e2a544622d850fc3c440b2edaa87c16ebed0d4508abf219623eb6826ebfee652c99b5ce9c3bafd011ab8e7c5ffee2 + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.6.0": version: 1.6.7 resolution: "@floating-ui/core@npm:1.6.7" @@ -8251,6 +8394,29 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/channels@npm:7.6.20" + dependencies: + "@storybook/client-logger": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/global": ^5.0.0 + qs: ^6.10.0 + telejson: ^7.2.0 + tiny-invariant: ^1.3.1 + checksum: e600949b77b8ae2c865eab8e2f4022893843932c76f9f49f2ef6d8a8f62114f979d38fe93fed2d8899fa892bb1dcd353c81e292515a7bd8fbc944629939574b0 + languageName: node + linkType: hard + +"@storybook/client-logger@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/client-logger@npm:7.6.20" + dependencies: + "@storybook/global": ^5.0.0 + checksum: 98bf603df918a74bc5b34f344ba70356d8e2b889d8a5cbfb7a03c23dcf409029800319e5d3e0ff7e95545a2d4a989a53c2097eb7a36de808d287d466d4d92573 + languageName: node + linkType: hard + "@storybook/components@npm:^8.3.6": version: 8.3.6 resolution: "@storybook/components@npm:8.3.6" @@ -8260,6 +8426,15 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-events@npm:7.6.20" + dependencies: + ts-dedent: ^2.0.0 + checksum: 284f4df326200dc0bdfc74472dccab3bbed38cf8515baebe467830b562f9ace06fb6e5640b155b4ae462288b9f3257233c6b5212fcb9b2d3024f9e4d08d28457 + languageName: node + linkType: hard + "@storybook/core@npm:8.3.6": version: 8.3.6 resolution: "@storybook/core@npm:8.3.6" @@ -8292,6 +8467,23 @@ __metadata: languageName: node linkType: hard +"@storybook/csf-tools@npm:^7.6.7": + version: 7.6.20 + resolution: "@storybook/csf-tools@npm:7.6.20" + dependencies: + "@babel/generator": ^7.23.0 + "@babel/parser": ^7.23.0 + "@babel/traverse": ^7.23.2 + "@babel/types": ^7.23.0 + "@storybook/csf": ^0.1.2 + "@storybook/types": 7.6.20 + fs-extra: ^11.1.0 + recast: ^0.23.1 + ts-dedent: ^2.0.0 + checksum: 5f3ac318ae106b8bfa13297916fcf23b0c17d2d58195c2966139dbdc4bf1c8a331bf57cff60599c371bcffc19b34a0c5653eee2ec1ae1b4683df9401a9830cd0 + languageName: node + linkType: hard + "@storybook/csf@npm:^0.1.11": version: 0.1.11 resolution: "@storybook/csf@npm:0.1.11" @@ -8301,6 +8493,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:^0.1.2": + version: 0.1.12 + resolution: "@storybook/csf@npm:0.1.12" + dependencies: + type-fest: ^2.19.0 + checksum: 85ef7d481a2d3329b481013a7c16e847aa732b96aea74efd40f95a84a2692d19ab4260f9603028cd3369303d95210497ff1dfc8cd9d6a26ad76f82e676f34a80 + languageName: node + linkType: hard + "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -8463,6 +8664,18 @@ __metadata: languageName: node linkType: hard +"@storybook/types@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/types@npm:7.6.20" + dependencies: + "@storybook/channels": 7.6.20 + "@types/babel__core": ^7.0.0 + "@types/express": ^4.7.0 + file-system-cache: 2.3.0 + checksum: 1e0ae196c63ace6a9a0f06a42c7294cfc840665d1ff7ae6d9fd2466ed3d78387672951aa7a9064a719384938c57d8eb25c8089657710d95c546344fbc28d8df6 + languageName: node + linkType: hard + "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0": version: 8.0.0 resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0" @@ -8931,6 +9144,18 @@ __metadata: languageName: node linkType: hard +"@ts-morph/common@npm:~0.24.0": + version: 0.24.0 + resolution: "@ts-morph/common@npm:0.24.0" + dependencies: + fast-glob: ^3.3.2 + minimatch: ^9.0.4 + mkdirp: ^3.0.1 + path-browserify: ^1.0.1 + checksum: 793bc8a47c93ab55c6c036f94480d3b0e948661aef4bb7dbc29279b1dda2fc4fce809a88e221537867a313541842e12d1ecbd32b4769688abe1303807ec09db6 + languageName: node + linkType: hard + "@tsconfig/node10@npm:^1.0.7": version: 1.0.11 resolution: "@tsconfig/node10@npm:1.0.11" @@ -8973,7 +9198,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.12, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5": +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.12, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -9138,7 +9363,7 @@ __metadata: languageName: node linkType: hard -"@types/express@npm:^4.17.21": +"@types/express@npm:^4.17.21, @types/express@npm:^4.7.0": version: 4.17.21 resolution: "@types/express@npm:4.17.21" dependencies: @@ -10976,6 +11201,22 @@ __metadata: languageName: node linkType: hard +"boxen@npm:5.1.1": + version: 5.1.1 + resolution: "boxen@npm:5.1.1" + dependencies: + ansi-align: ^3.0.0 + camelcase: ^6.2.0 + chalk: ^4.1.0 + cli-boxes: ^2.2.1 + string-width: ^4.2.2 + type-fest: ^0.20.2 + widest-line: ^3.1.0 + wrap-ansi: ^7.0.0 + checksum: c4936c49ebaac0e1c8108b5185b313e0a5d6133adb12afd55009a779e13a19d14c3367ff3db80ebe4a01056505aa149c2062f9d94fc0565d3287034f252b0c1b + languageName: node + linkType: hard + "boxen@npm:7.0.0": version: 7.0.0 resolution: "boxen@npm:7.0.0" @@ -11735,6 +11976,13 @@ __metadata: languageName: node linkType: hard +"code-block-writer@npm:^13.0.1": + version: 13.0.3 + resolution: "code-block-writer@npm:13.0.3" + checksum: 8e234f0ec2db9625d5efb9f05bdae79da6559bb4d9df94a6aa79a89a7b5ae25093b70d309fc5122840c9c07995cb14b4dd3f98a30f8878e3a3372e177df79454 + languageName: node + linkType: hard + "code-point-at@npm:^1.0.0": version: 1.1.0 resolution: "code-point-at@npm:1.1.0" @@ -11855,6 +12103,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^11.1.0": + version: 11.1.0 + resolution: "commander@npm:11.1.0" + checksum: fd1a8557c6b5b622c89ecdfde703242ab7db3b628ea5d1755784c79b8e7cb0d74d65b4a262289b533359cd58e1bfc0bf50245dfbcd2954682a6f367c828b79ef + languageName: node + linkType: hard + "commander@npm:^2.19.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -11907,6 +12162,13 @@ __metadata: languageName: node linkType: hard +"compare-versions@npm:^6.1.0": + version: 6.1.1 + resolution: "compare-versions@npm:6.1.1" + checksum: 73fe6c4f52d22efe28f0a3be10df2afd704e10b3593360cd963e86b33a7a263c263b41a1361b69c30a0fe68bfa70fef90860c1cf2ef41502629d4402890fcd57 + languageName: node + linkType: hard + "compressible@npm:~2.0.16": version: 2.0.18 resolution: "compressible@npm:2.0.18" @@ -12570,6 +12832,15 @@ __metadata: languageName: node linkType: hard +"cssstyle@npm:^4.0.1": + version: 4.1.0 + resolution: "cssstyle@npm:4.1.0" + dependencies: + rrweb-cssom: ^0.7.1 + checksum: a8f5746430c42347e76dc830548f3a296882e42a90af188ae44e4c1a4131aec246b0b6c8562e3e6e4fa0ff14aeee5cd14a0e2fe5a7105dcf39f98eb70d16b634 + languageName: node + linkType: hard + "csstype@npm:^3.0.2": version: 3.1.3 resolution: "csstype@npm:3.1.3" @@ -12637,6 +12908,16 @@ __metadata: languageName: node linkType: hard +"data-urls@npm:^5.0.0": + version: 5.0.0 + resolution: "data-urls@npm:5.0.0" + dependencies: + whatwg-mimetype: ^4.0.0 + whatwg-url: ^14.0.0 + checksum: 5c40568c31b02641a70204ff233bc4e42d33717485d074244a98661e5f2a1e80e38fe05a5755dfaf2ee549f2ab509d6a3af2a85f4b2ad2c984e5d176695eaf46 + languageName: node + linkType: hard + "data-view-buffer@npm:^1.0.1": version: 1.0.1 resolution: "data-view-buffer@npm:1.0.1" @@ -12768,7 +13049,7 @@ __metadata: languageName: node linkType: hard -"decimal.js@npm:10, decimal.js@npm:^10.4.2": +"decimal.js@npm:^10.4.2": version: 10.4.3 resolution: "decimal.js@npm:10.4.3" checksum: 796404dcfa9d1dbfdc48870229d57f788b48c21c603c3f6554a1c17c10195fc1024de338b0cf9e1efe0c7c167eeb18f04548979bcc5fdfabebb7cc0ae3287bae @@ -13180,6 +13461,13 @@ __metadata: languageName: node linkType: hard +"dotenv@npm:^16.3.1": + version: 16.4.7 + resolution: "dotenv@npm:16.4.7" + checksum: c27419b5875a44addcc56cc69b7dc5b0e6587826ca85d5b355da9303c6fc317fc9989f1f18366a16378c9fdd9532d14117a1abe6029cc719cdbbef6eaef2cea4 + languageName: node + linkType: hard + "dotenv@npm:^7.0.0": version: 7.0.0 resolution: "dotenv@npm:7.0.0" @@ -13349,7 +13637,7 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.2.0, entities@npm:^4.4.0": +"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0": version: 4.5.0 resolution: "entities@npm:4.5.0" checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7 @@ -14487,6 +14775,15 @@ __metadata: languageName: node linkType: hard +"fast-fuzzy@npm:^1.12.0": + version: 1.12.0 + resolution: "fast-fuzzy@npm:1.12.0" + dependencies: + graphemesplit: ^2.4.1 + checksum: 5a4a763146fc35c8bf92c9b629e0fd079da5a5d77555c66ecaa240cd6d19b6f90cae65dc0f5b3bcbeed603793167c0bba5254806761387fd481d6f8d13227d14 + languageName: node + linkType: hard + "fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.4, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2": version: 3.3.2 resolution: "fast-glob@npm:3.3.2" @@ -14626,6 +14923,16 @@ __metadata: languageName: node linkType: hard +"file-system-cache@npm:2.3.0": + version: 2.3.0 + resolution: "file-system-cache@npm:2.3.0" + dependencies: + fs-extra: 11.1.1 + ramda: 0.29.0 + checksum: 74afa2870a062500643d41e02d1fbd47a3f30100f9e153dec5233d59f05545f4c8ada6085629d624e043479ac28c0cafc31824f7b49a3f997efab8cc5d05bfee + languageName: node + linkType: hard + "file-system@npm:^2.2.2": version: 2.2.2 resolution: "file-system@npm:2.2.2" @@ -14924,6 +15231,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:11.1.1": + version: 11.1.1 + resolution: "fs-extra@npm:11.1.1" + dependencies: + graceful-fs: ^4.2.0 + jsonfile: ^6.0.1 + universalify: ^2.0.0 + checksum: fb883c68245b2d777fbc1f2082c9efb084eaa2bbf9fddaa366130d196c03608eebef7fb490541276429ee1ca99f317e2d73e96f5ca0999eefedf5a624ae1edfd + languageName: node + linkType: hard + "fs-extra@npm:^11.1.0, fs-extra@npm:^11.2.0": version: 11.2.0 resolution: "fs-extra@npm:11.2.0" @@ -15482,6 +15800,16 @@ __metadata: languageName: node linkType: hard +"graphemesplit@npm:^2.4.1": + version: 2.4.4 + resolution: "graphemesplit@npm:2.4.4" + dependencies: + js-base64: ^3.6.0 + unicode-trie: ^2.0.0 + checksum: 81db7c4277855bb86df9fb3c2bb37105010b4275e145a18490e0c579096f7b1ff41784d76bbf5540c31db8e629d0ca0710615d29cb157f65c429eff64cd13ae4 + languageName: node + linkType: hard + "gzip-size@npm:^4.0.0": version: 4.1.0 resolution: "gzip-size@npm:4.1.0" @@ -15695,6 +16023,15 @@ __metadata: languageName: node linkType: hard +"html-encoding-sniffer@npm:^4.0.0": + version: 4.0.0 + resolution: "html-encoding-sniffer@npm:4.0.0" + dependencies: + whatwg-encoding: ^3.1.1 + checksum: 3339b71dab2723f3159a56acf541ae90a408ce2d11169f00fe7e0c4663d31d6398c8a4408b504b4eec157444e47b084df09b3cb039c816660f0dd04846b8957d + languageName: node + linkType: hard + "html-escaper@npm:^2.0.0": version: 2.0.2 resolution: "html-escaper@npm:2.0.2" @@ -15740,7 +16077,7 @@ __metadata: languageName: node linkType: hard -"http-proxy-agent@npm:^7.0.0, http-proxy-agent@npm:^7.0.1": +"http-proxy-agent@npm:^7.0.0, http-proxy-agent@npm:^7.0.1, http-proxy-agent@npm:^7.0.2": version: 7.0.2 resolution: "http-proxy-agent@npm:7.0.2" dependencies: @@ -17552,6 +17889,13 @@ __metadata: languageName: node linkType: hard +"js-base64@npm:^3.6.0": + version: 3.7.7 + resolution: "js-base64@npm:3.7.7" + checksum: d1b02971db9dc0fd35baecfaf6ba499731fb44fe3373e7e1d6681fbd3ba665f29e8d9d17910254ef8104e2cb8b44117fe4202d3dc54c7cafe9ba300fe5433358 + languageName: node + linkType: hard + "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" @@ -17635,6 +17979,40 @@ __metadata: languageName: node linkType: hard +"jsdom@npm:^24.1.1": + version: 24.1.3 + resolution: "jsdom@npm:24.1.3" + dependencies: + cssstyle: ^4.0.1 + data-urls: ^5.0.0 + decimal.js: ^10.4.3 + form-data: ^4.0.0 + html-encoding-sniffer: ^4.0.0 + http-proxy-agent: ^7.0.2 + https-proxy-agent: ^7.0.5 + is-potential-custom-element-name: ^1.0.1 + nwsapi: ^2.2.12 + parse5: ^7.1.2 + rrweb-cssom: ^0.7.1 + saxes: ^6.0.0 + symbol-tree: ^3.2.4 + tough-cookie: ^4.1.4 + w3c-xmlserializer: ^5.0.0 + webidl-conversions: ^7.0.0 + whatwg-encoding: ^3.1.1 + whatwg-mimetype: ^4.0.0 + whatwg-url: ^14.0.0 + ws: ^8.18.0 + xml-name-validator: ^5.0.0 + peerDependencies: + canvas: ^2.11.2 + peerDependenciesMeta: + canvas: + optional: true + checksum: c71e2e6b5304c95a230feaef0c21fb7c353b7e785ba49ed9544d309f8faab1fc167146e0f1d00e2fb5346a11a27c60ae021a9688382f6b2d78e2c169769b4bfc + languageName: node + linkType: hard + "jsesc@npm:^2.5.1": version: 2.5.2 resolution: "jsesc@npm:2.5.2" @@ -19440,6 +19818,13 @@ __metadata: languageName: node linkType: hard +"modify-values@npm:^1.0.0": + version: 1.0.1 + resolution: "modify-values@npm:1.0.1" + checksum: 8296610c608bc97b03c2cf889c6cdf4517e32fa2d836440096374c2209f6b7b3e256c209493a0b32584b9cb32d528e99d0dd19dcd9a14d2d915a312d391cc7e9 + languageName: node + linkType: hard + "moment-timezone@npm:0.5.46": version: 0.5.46 resolution: "moment-timezone@npm:0.5.46" @@ -19789,6 +20174,13 @@ __metadata: languageName: node linkType: hard +"nwsapi@npm:^2.2.12": + version: 2.2.16 + resolution: "nwsapi@npm:2.2.16" + checksum: 467b36a74b7b8647d53fd61d05ca7d6c73a4a5d1b94ea84f770c03150b00ef46d38076cf8e708936246ae450c42a1f21e28e153023719784dc4d1a19b1737d47 + languageName: node + linkType: hard + "nwsapi@npm:^2.2.2": version: 2.2.12 resolution: "nwsapi@npm:2.2.12" @@ -20209,6 +20601,13 @@ __metadata: languageName: node linkType: hard +"pako@npm:^0.2.5": + version: 0.2.9 + resolution: "pako@npm:0.2.9" + checksum: 055f9487cd57fbb78df84315873bbdd089ba286f3499daed47d2effdc6253e981f5db6898c23486de76d4a781559f890d643bd3a49f70f1b4a18019c98aa5125 + languageName: node + linkType: hard + "pako@npm:^2.1.0": version: 2.1.0 resolution: "pako@npm:2.1.0" @@ -20319,6 +20718,15 @@ __metadata: languageName: node linkType: hard +"parse5@npm:^7.1.2": + version: 7.2.1 + resolution: "parse5@npm:7.2.1" + dependencies: + entities: ^4.5.0 + checksum: 11253cf8aa2e7fc41c004c64cba6f2c255f809663365db65bd7ad0e8cf7b89e436a563c20059346371cc543a6c1b567032088883ca6a2cbc88276c666b68236d + languageName: node + linkType: hard + "parseurl@npm:~1.3.3": version: 1.3.3 resolution: "parseurl@npm:1.3.3" @@ -20350,6 +20758,13 @@ __metadata: languageName: node linkType: hard +"path-browserify@npm:^1.0.1": + version: 1.0.1 + resolution: "path-browserify@npm:1.0.1" + checksum: c6d7fa376423fe35b95b2d67990060c3ee304fc815ff0a2dc1c6c3cfaff2bd0d572ee67e18f19d0ea3bbe32e8add2a05021132ac40509416459fffee35200699 + languageName: node + linkType: hard + "path-exists@npm:^2.1.0": version: 2.1.0 resolution: "path-exists@npm:2.1.0" @@ -20744,7 +21159,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:2.8.8, prettier@npm:^2.7.1, prettier@npm:^2.8.4, prettier@npm:^2.8.7": +"prettier@npm:2.8.8, prettier@npm:^2.7.1, prettier@npm:^2.8.4, prettier@npm:^2.8.7, prettier@npm:^2.8.8": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: @@ -20942,7 +21357,7 @@ __metadata: languageName: node linkType: hard -"punycode@npm:^2.1.0, punycode@npm:^2.1.1": +"punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.1": version: 2.3.1 resolution: "punycode@npm:2.3.1" checksum: bb0a0ceedca4c3c57a9b981b90601579058903c62be23c5e8e843d2c2d4148a3ecf029d5133486fb0e1822b098ba8bba09e89d6b21742d02fa26bda6441a6fb2 @@ -21010,6 +21425,15 @@ __metadata: languageName: node linkType: hard +"qs@npm:^6.10.0": + version: 6.13.1 + resolution: "qs@npm:6.13.1" + dependencies: + side-channel: ^1.0.6 + checksum: 86c5059146955fab76624e95771031541328c171b1d63d48a7ac3b1fdffe262faf8bc5fcadc1684e6f3da3ec87a8dedc8c0009792aceb20c5e94dc34cf468bb9 + languageName: node + linkType: hard + "querystringify@npm:^2.1.1": version: 2.2.0 resolution: "querystringify@npm:2.2.0" @@ -21054,6 +21478,15 @@ __metadata: languageName: node linkType: hard +"randombytes@npm:^2.1.0": + version: 2.1.0 + resolution: "randombytes@npm:2.1.0" + dependencies: + safe-buffer: ^5.1.0 + checksum: d779499376bd4cbb435ef3ab9a957006c8682f343f14089ed5f27764e4645114196e75b7f6abf1cbd84fd247c0cb0651698444df8c9bf30e62120fbbc52269d6 + languageName: node + linkType: hard + "range-parser@npm:1.2.0": version: 1.2.0 resolution: "range-parser@npm:1.2.0" @@ -21602,7 +22035,7 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.23.5": +"recast@npm:^0.23.1, recast@npm:^0.23.5": version: 0.23.9 resolution: "recast@npm:0.23.9" dependencies: @@ -22275,6 +22708,13 @@ __metadata: languageName: node linkType: hard +"rrweb-cssom@npm:^0.7.1": + version: 0.7.1 + resolution: "rrweb-cssom@npm:0.7.1" + checksum: 62e410ddbaaba6abc196c3bbfa8de4952e0a134d9f2b454ee293039bf9931322d806e14d52ed122a5c2bd332a868b9da2e99358fb6232c33758b5ede86d992c8 + languageName: node + linkType: hard + "run-async@npm:^2.4.0": version: 2.4.1 resolution: "run-async@npm:2.4.1" @@ -23727,6 +24167,13 @@ __metadata: languageName: node linkType: hard +"tiny-inflate@npm:^1.0.0": + version: 1.0.3 + resolution: "tiny-inflate@npm:1.0.3" + checksum: 4086a1f8938dafa4a20c63b099aeb47bf8fef5aca991bf4ea4b35dd2684fa52363b2c19b3e76660311e7613cb7c4f063bc48751b9bdf9555e498d997c30bc2d6 + languageName: node + linkType: hard + "tiny-invariant@npm:1.0.6": version: 1.0.6 resolution: "tiny-invariant@npm:1.0.6" @@ -23841,7 +24288,7 @@ __metadata: languageName: node linkType: hard -"tough-cookie@npm:^4.1.2": +"tough-cookie@npm:^4.1.2, tough-cookie@npm:^4.1.4": version: 4.1.4 resolution: "tough-cookie@npm:4.1.4" dependencies: @@ -23862,6 +24309,15 @@ __metadata: languageName: node linkType: hard +"tr46@npm:^5.0.0": + version: 5.0.0 + resolution: "tr46@npm:5.0.0" + dependencies: + punycode: ^2.3.1 + checksum: 8d8b021f8e17675ebf9e672c224b6b6cfdb0d5b92141349e9665c14a2501c54a298d11264bbb0b17b447581e1e83d4fc3c038c929f3d210e3964d4be47460288 + languageName: node + linkType: hard + "tr46@npm:~0.0.3": version: 0.0.3 resolution: "tr46@npm:0.0.3" @@ -23975,6 +24431,16 @@ __metadata: languageName: node linkType: hard +"ts-morph@npm:^23.0.0": + version: 23.0.0 + resolution: "ts-morph@npm:23.0.0" + dependencies: + "@ts-morph/common": ~0.24.0 + code-block-writer: ^13.0.1 + checksum: 3282eb0f8bd4577770874736c3259b97501da9a86137160b5d68f106b7848ea7b1fbccf9e198a3d930ec40c993e9951d4bfae31e2562dac8f3de0d7bb0e23615 + languageName: node + linkType: hard + "ts-node@npm:10.9.2": version: 10.9.2 resolution: "ts-node@npm:10.9.2" @@ -24224,17 +24690,7 @@ __metadata: languageName: node linkType: hard -"typescript@npm:5.7.2, typescript@npm:^5.6.3": - version: 5.7.2 - resolution: "typescript@npm:5.7.2" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: b55300c4cefee8ee380d14fa9359ccb41ff8b54c719f6bc49b424899d662a5ce62ece390ce769568c7f4d14af844085255e63788740084444eb12ef423b13433 - languageName: node - linkType: hard - -"typescript@npm:^5.2.2": +"typescript@npm:5.6.3, typescript@npm:^5.2.2, typescript@npm:^5.3.3": version: 5.6.3 resolution: "typescript@npm:5.6.3" bin: @@ -24244,17 +24700,7 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@5.7.2#~builtin, typescript@patch:typescript@^5.6.3#~builtin": - version: 5.7.2 - resolution: "typescript@patch:typescript@npm%3A5.7.2#~builtin::version=5.7.2&hash=5786d5" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: e9fa1fd1f4203d399a5264e8612f9a64d9daf4ea7c926f346e11f6c8137acc6e29386c171c6b4085950ce714243be1627f60e76e5bd135124e226ce55309380f - languageName: node - linkType: hard - -"typescript@patch:typescript@^5.2.2#~builtin": +"typescript@patch:typescript@5.6.3#~builtin, typescript@patch:typescript@^5.2.2#~builtin, typescript@patch:typescript@^5.3.3#~builtin": version: 5.6.3 resolution: "typescript@patch:typescript@npm%3A5.6.3#~builtin::version=5.6.3&hash=8c6c40" bin: @@ -24285,11 +24731,11 @@ __metadata: "@commercetools-local/generator-package-json": "*" "@commercetools-local/generator-readme": "*" "@commercetools/github-labels": 1.1.0 - "@commitlint/cli": 19.6.1 - "@commitlint/config-conventional": 19.6.0 - "@formatjs/cli": 6.3.14 - "@formatjs/intl-relativetimeformat": 11.4.8 - "@manypkg/cli": 0.23.0 + "@commitlint/cli": 19.5.0 + "@commitlint/config-conventional": 19.5.0 + "@formatjs/cli": 6.2.15 + "@formatjs/intl-relativetimeformat": 11.2.16 + "@manypkg/cli": 0.22.0 "@manypkg/get-packages": 1.1.3 "@omlet/cli": ^1.12.0 "@percy/cli": 1.30.5 @@ -24418,6 +24864,15 @@ __metadata: languageName: node linkType: hard +"undici@npm:^5.28.4": + version: 5.28.4 + resolution: "undici@npm:5.28.4" + dependencies: + "@fastify/busboy": ^2.0.0 + checksum: a8193132d84540e4dc1895ecc8dbaa176e8a49d26084d6fbe48a292e28397cd19ec5d13bc13e604484e76f94f6e334b2bdc740d5f06a6e50c44072818d0c19f9 + languageName: node + linkType: hard + "unherit@npm:^1.0.4": version: 1.1.3 resolution: "unherit@npm:1.1.3" @@ -24459,6 +24914,16 @@ __metadata: languageName: node linkType: hard +"unicode-trie@npm:^2.0.0": + version: 2.0.0 + resolution: "unicode-trie@npm:2.0.0" + dependencies: + pako: ^0.2.5 + tiny-inflate: ^1.0.0 + checksum: 19e637ce20953ec1fbfa9087abef4746a50352679b833be27924e4ba7ad753cc4073b74263747ccfccb5e38b30b17468cbb96f361eb49903ff8602396280b5a4 + languageName: node + linkType: hard + "unicorn-magic@npm:^0.1.0": version: 0.1.0 resolution: "unicorn-magic@npm:0.1.0" @@ -25149,6 +25614,15 @@ __metadata: languageName: node linkType: hard +"w3c-xmlserializer@npm:^5.0.0": + version: 5.0.0 + resolution: "w3c-xmlserializer@npm:5.0.0" + dependencies: + xml-name-validator: ^5.0.0 + checksum: 593acc1fdab3f3207ec39d851e6df0f3fa41a36b5809b0ace364c7a6d92e351938c53424a7618ce8e0fbaffee8be2e8e070a5734d05ee54666a8bdf1a376cc40 + languageName: node + linkType: hard + "wait-for-expect@npm:^3.0.2": version: 3.0.2 resolution: "wait-for-expect@npm:3.0.2" @@ -25235,6 +25709,15 @@ __metadata: languageName: node linkType: hard +"whatwg-encoding@npm:^3.1.1": + version: 3.1.1 + resolution: "whatwg-encoding@npm:3.1.1" + dependencies: + iconv-lite: 0.6.3 + checksum: f75a61422421d991e4aec775645705beaf99a16a88294d68404866f65e92441698a4f5b9fa11dd609017b132d7b286c3c1534e2de5b3e800333856325b549e3c + languageName: node + linkType: hard + "whatwg-mimetype@npm:^3.0.0": version: 3.0.0 resolution: "whatwg-mimetype@npm:3.0.0" @@ -25242,6 +25725,13 @@ __metadata: languageName: node linkType: hard +"whatwg-mimetype@npm:^4.0.0": + version: 4.0.0 + resolution: "whatwg-mimetype@npm:4.0.0" + checksum: f97edd4b4ee7e46a379f3fb0e745de29fe8b839307cc774300fd49059fcdd560d38cb8fe21eae5575b8f39b022f23477cc66e40b0355c2851ce84760339cef30 + languageName: node + linkType: hard + "whatwg-url@npm:^11.0.0": version: 11.0.0 resolution: "whatwg-url@npm:11.0.0" @@ -25252,6 +25742,16 @@ __metadata: languageName: node linkType: hard +"whatwg-url@npm:^14.0.0": + version: 14.1.0 + resolution: "whatwg-url@npm:14.1.0" + dependencies: + tr46: ^5.0.0 + webidl-conversions: ^7.0.0 + checksum: e429d1d2a5fc1b7886d9343f5b03d91201a9a32726b13e48a7fb943cf94c276771f6aa648337ae520484deb25b657ce6ad19a90dfca0d2d1c9596e21b438e3a0 + languageName: node + linkType: hard + "whatwg-url@npm:^5.0.0": version: 5.0.0 resolution: "whatwg-url@npm:5.0.0" @@ -25558,6 +26058,13 @@ __metadata: languageName: node linkType: hard +"xml-name-validator@npm:^5.0.0": + version: 5.0.0 + resolution: "xml-name-validator@npm:5.0.0" + checksum: 86effcc7026f437701252fcc308b877b4bc045989049cfc79b0cc112cb365cf7b009f4041fab9fb7cd1795498722c3e9fe9651afc66dfa794c16628a639a4c45 + languageName: node + linkType: hard + "xmlchars@npm:^2.2.0": version: 2.2.0 resolution: "xmlchars@npm:2.2.0" @@ -25734,7 +26241,16 @@ __metadata: languageName: node linkType: hard -"zod@npm:3.23.8, zod@npm:^3.21.4": +"zod-validation-error@npm:^3.2.0": + version: 3.4.0 + resolution: "zod-validation-error@npm:3.4.0" + peerDependencies: + zod: ^3.18.0 + checksum: b07fbfc39582dbdf6972f5f5f0c3bac9e6b5e6d2e55ef3dd891fd08f1966ebf1023a4bc270e9b569eaa48ed1684ac2252c9f260b0bd07b167671596e6e4d0fa8 + languageName: node + linkType: hard + +"zod@npm:3.23.8, zod@npm:^3.21.4, zod@npm:^3.23.8": version: 3.23.8 resolution: "zod@npm:3.23.8" checksum: 15949ff82118f59c893dacd9d3c766d02b6fa2e71cf474d5aa888570c469dbf5446ac5ad562bb035bf7ac9650da94f290655c194f4a6de3e766f43febd432c5c From ef41acf4e1caffef9428f16ebcde9603b9c5bb2d Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Fri, 6 Dec 2024 11:45:15 -0700 Subject: [PATCH 02/12] feat(code connect): add loading spinner figma connect file --- .../src/loading-spinner.figma.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 packages/components/loading-spinner/src/loading-spinner.figma.tsx diff --git a/packages/components/loading-spinner/src/loading-spinner.figma.tsx b/packages/components/loading-spinner/src/loading-spinner.figma.tsx new file mode 100644 index 0000000000..abab248708 --- /dev/null +++ b/packages/components/loading-spinner/src/loading-spinner.figma.tsx @@ -0,0 +1,20 @@ +// @ts-nocheck +import { LoadingSpinner } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + LoadingSpinner, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3003%3A6577', + { + props: { + scale: figma.enum('Size', { + Large: 'l', + Small: 's', + }), + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); From eff59887cba317903ae774d7b2bdbf9d99499909 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Thu, 12 Dec 2024 09:40:33 -0700 Subject: [PATCH 03/12] feat(code connect): script to automate connect file creation and auditing --- .../src/accessible-button.figma.tsx | 17 +++ .../icon-button/src/icon-button.figma.tsx | 41 ++++++ .../link-button/src/link-button.figma.tsx | 17 +++ .../src/primary-button.figma.tsx | 36 +++++ .../src/secondary-button.figma.tsx | 42 ++++++ .../src/secondary-icon-button.figma.tsx | 43 ++++++ packages/components/card/src/card.figma.tsx | 7 - .../tag/src/tag-list/tag-list.figma.tsx | 1 + scan-figma-connection.js | 125 ++++++++++++++++++ 9 files changed, 322 insertions(+), 7 deletions(-) create mode 100644 packages/components/buttons/accessible-button/src/accessible-button.figma.tsx create mode 100644 packages/components/buttons/icon-button/src/icon-button.figma.tsx create mode 100644 packages/components/buttons/link-button/src/link-button.figma.tsx create mode 100644 packages/components/buttons/primary-button/src/primary-button.figma.tsx create mode 100644 packages/components/buttons/secondary-button/src/secondary-button.figma.tsx create mode 100644 packages/components/buttons/secondary-icon-button/src/secondary-icon-button.figma.tsx create mode 100644 scan-figma-connection.js diff --git a/packages/components/buttons/accessible-button/src/accessible-button.figma.tsx b/packages/components/buttons/accessible-button/src/accessible-button.figma.tsx new file mode 100644 index 0000000000..9b77ee698e --- /dev/null +++ b/packages/components/buttons/accessible-button/src/accessible-button.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { AccessibleButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + AccessibleButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/buttons/icon-button/src/icon-button.figma.tsx b/packages/components/buttons/icon-button/src/icon-button.figma.tsx new file mode 100644 index 0000000000..e10c3fe817 --- /dev/null +++ b/packages/components/buttons/icon-button/src/icon-button.figma.tsx @@ -0,0 +1,41 @@ +// @ts-nocheck +import { IconButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + IconButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=17%3A15986', + { + props: { + // TODO: Add props here + // No matching props could be found for these Figma properties: + // "icon": figma.instance('Icon'), + // "state": figma.enum('State', { + // "Default": "default", + // "Hover": "hover", + // "Toggled": "toggled", + // "Disabled": "disabled" + // }), + // "size": figma.enum('Size', { + // "40": "40", + // "30": "30", + // "20": "20", + // "10": "10" + // }), + // "theme": figma.enum('Theme', { + // "Default": "default", + // "Primary": "primary", + // "Inforimary": "inforimary" + // }) + }, + example: (props) => , + } +); diff --git a/packages/components/buttons/link-button/src/link-button.figma.tsx b/packages/components/buttons/link-button/src/link-button.figma.tsx new file mode 100644 index 0000000000..0530dddf7f --- /dev/null +++ b/packages/components/buttons/link-button/src/link-button.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { LinkButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + LinkButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/buttons/primary-button/src/primary-button.figma.tsx b/packages/components/buttons/primary-button/src/primary-button.figma.tsx new file mode 100644 index 0000000000..d74f734d65 --- /dev/null +++ b/packages/components/buttons/primary-button/src/primary-button.figma.tsx @@ -0,0 +1,36 @@ +// @ts-nocheck +import { PrimaryButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + PrimaryButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=84%3A17637', + { + props: { + // TODO: Add the following props + // No matching props could be found for these Figma properties: + // "rightIcon": figma.boolean('Right icon'), + // "rightIcon": figma.instance('↳ right icon'), + // "text": figma.string('Text'), + // "leftIcon": figma.instance('↳ left icon'), + // "leftIcon": figma.boolean('Left icon'), + // "state": figma.enum('State', { + // "Default": "default", + // "Hover": "hover", + // "Toggled": "toggled", + // "Disabled": "disabled" + // }), + // "size": figma.enum('Size', { + // "big": "big", + // "medium": "medium" + // }), + // "tone": figma.enum('Tone', { + // "Primary": "primary", + // "Urgent": "urgent", + // "Critical": "critical" + // }) + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/buttons/secondary-button/src/secondary-button.figma.tsx b/packages/components/buttons/secondary-button/src/secondary-button.figma.tsx new file mode 100644 index 0000000000..2ca9f7b6b7 --- /dev/null +++ b/packages/components/buttons/secondary-button/src/secondary-button.figma.tsx @@ -0,0 +1,42 @@ +// @ts-nocheck +import SecondaryButton from './secondary-button'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + SecondaryButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=86%3A17112', + { + props: { + // TODO: Add props here + // No matching props could be found for these Figma properties: + // "rightIcon": figma.instance('↳ right icon'), + // "rightIcon": figma.boolean('Right icon'), + // "text": figma.string('Text'), + // "leftIcon": figma.instance('↳ left icon'), + // "leftIcon": figma.boolean('Left icon'), + // "state": figma.enum('State', { + // "Default": "default", + // "Hover": "hover", + // "Toggled": "toggled", + // "Disabled": "disabled" + // }), + // "size": figma.enum('Size', { + // "Big": "big", + // "Medium": "medium" + // }), + // "tone": figma.enum('Tone', { + // "Default": "default", + // "Info": "info" + // }) + }, + example: (props) => , + } +); diff --git a/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.figma.tsx b/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.figma.tsx new file mode 100644 index 0000000000..082d69772f --- /dev/null +++ b/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.figma.tsx @@ -0,0 +1,43 @@ +// @ts-nocheck +import { SecondaryIconButton } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + SecondaryIconButton, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=1301%3A39256', + { + props: { + // TODO: Add props here + // No matching props could be found for these Figma properties: + // "icon": figma.instance('Icon'), + // "state": figma.enum('State', { + // "Default": "default", + // "Hover": "hover", + // "Disabled": "disabled" + // }), + // "size": figma.enum('Size', { + // "40": "40", + // "30": "30", + // "20": "20", + // "10": "10" + // }), + // "color": figma.enum('Color', { + // "Solid": "solid", + // "Primary": "primary", + // "Info": "info" + // }) + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); diff --git a/packages/components/card/src/card.figma.tsx b/packages/components/card/src/card.figma.tsx index 9006aecd24..c13abd7a60 100644 --- a/packages/components/card/src/card.figma.tsx +++ b/packages/components/card/src/card.figma.tsx @@ -2,13 +2,6 @@ import { Card } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -/** - * -- This file was auto-generated by Code Connect -- - * `props` includes a mapping from your code props to Figma properties. - * You should check this is correct, and update the `example` function - * to return the code example you'd like to see in Figma - */ - figma.connect( Card, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=107%3A18713', diff --git a/packages/components/tag/src/tag-list/tag-list.figma.tsx b/packages/components/tag/src/tag-list/tag-list.figma.tsx index 5d71cfaa4e..472303f8a7 100644 --- a/packages/components/tag/src/tag-list/tag-list.figma.tsx +++ b/packages/components/tag/src/tag-list/tag-list.figma.tsx @@ -7,6 +7,7 @@ figma.connect( 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5318%3A8820', { props: { + // TODO: Map props here children: figma.children('*'), }, example: (props) => {props.children}, diff --git a/scan-figma-connection.js b/scan-figma-connection.js new file mode 100644 index 0000000000..a043ec8303 --- /dev/null +++ b/scan-figma-connection.js @@ -0,0 +1,125 @@ +const fs = require('node:fs/promises'); +const path = require('path'); + +/* + * This script is used to assist with maintaining figma connect files for components + * What it does: + * - It searches for root React component files in a given directory + * - It checks for a corresponding `.figma.tsx` file + * - If the `.figma.tsx` file does not exist, it creates one based on `getConnectFileContent` + * - If the `.figma.tsx` file exists, it is read to check for completion (content contains "TODO") + * What it does not do: + * - It does not read the component file to get the props + * - It does not map the props to the figma file + * - It does not know the correct node id for the figma component, which is required + * **PLEASE NOTE:** + * Before the figma file can be published, the node id must be manually added! + */ + +// Helpers +const getConnectFileContent = (componentName) => { + return `// @ts-nocheck +import { ${componentName} } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + ${componentName}, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => <${componentName}>{props.children}, + } +); +`; +}; + +const getComponentName = (str) => { + return str + .split('-') + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(''); +}; + +/** + * `scanConnectedComponents` recursively searches for the root React component file in a given directory. + * For each root file found, it checks for a corresponding `.figma.tsx` file. + * If the `.figma.tsx` file does not exist, it creates one based on a predefined template. + * If the `.figma.tsx` file exists, it checks if the file content contains "TODO". + * + * @param {string} dir - The starting directory path. + * @returns {Promise} - A promise that resolves when the operation is complete. + */ + +const scanConnectedComponents = async (dir) => { + const entries = await fs.readdir(dir, { withFileTypes: true }); + + for (const entry of entries) { + const entryPath = path.join(dir, entry.name); + + if (entry.isDirectory()) { + // skip icons and utils directories + if (entry.name.includes('icons') || entry.name.includes('utils')) { + continue; + } + // Recurse into subdirectories + await scanConnectedComponents(entryPath); + } else if (entry.isFile() && path.extname(entry.name) === '.tsx') { + // Exclude test files and stories + if ( + entry.name.includes('.spec.tsx') || + entry.name.includes('.styles') || + entry.name.includes('.stories.tsx') + ) { + continue; + } + + const componentName = path.basename(entry.name, '.tsx'); + const figmaFilePath = path.join(dir, `${componentName}.figma.tsx`); + + // TODO: This shouldn't be necessary, but currently it is + if (figmaFilePath.includes('.figma.figma')) continue; + + try { + // Check if `.figma.tsx` file exists + const figmaStat = await fs.stat(figmaFilePath); + if (figmaStat.isFile()) { + // Read the `.figma.tsx` file and check for "TODO" or "" + const figmaFileContent = await fs.readFile(figmaFilePath, 'utf8'); + if ( + figmaFileContent.includes('TODO') || + figmaFileContent.includes('') + ) { + console.log(`-> ${figmaFilePath} is incomplete`); + } else { + continue; + } + } + } catch (err) { + if (err.code === 'ENOENT') { + // `.figma.tsx` file does not exist, create it + await fs.writeFile( + figmaFilePath, + getConnectFileContent(getComponentName(componentName)) + ); + console.log(`Created Figma connect file: ${figmaFilePath}`); + } else { + console.error(`Error checking file: ${figmaFilePath}`, err); + } + } + } + } +}; + +// Intended use +scanConnectedComponents('packages/components') + .then(() => { + console.log('Scan complete.'); + }) + .catch((err) => { + console.error('Error thrown during scan:', err); + }); From 0c58c83e810a255a67d830e3c3cefd6616dfa05d Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Mon, 16 Dec 2024 15:43:32 -0700 Subject: [PATCH 04/12] feat(code connect): add function to get list of figma component ids --- get-figma-ids.js | 59 +++++++++++++++++++++ packages/components/link/src/link.figma.tsx | 17 ++++++ scan-figma-connection.js | 31 +++++++++-- 3 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 get-figma-ids.js create mode 100644 packages/components/link/src/link.figma.tsx diff --git a/get-figma-ids.js b/get-figma-ids.js new file mode 100644 index 0000000000..587368ff69 --- /dev/null +++ b/get-figma-ids.js @@ -0,0 +1,59 @@ +const figmaComonentsUrl = + 'https://api.figma.com/v1/files//components'; +const figmaToken = 'your-figma-token-here'; + +/** + * Fetches the figma component ids from the figma api + * @returns {Map} - A map of component names to their corresponding node ids + * @throws {Error} - If the fetch request fails + * @example + * const componentIds = await fetchFigmaComponentIds(); + * console.log(componentIds.get('button')); + * // Output: { name: 'button', nodeId: '0:1' } + **/ + +async function fetchFigmaComponentIds() { + try { + const response = await fetch(figmaComonentsUrl, { + method: 'GET', + headers: { + 'X-FIGMA-TOKEN': figmaToken, + }, + }); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); + + const componentListArray = data.meta.components + // Filter out components that do not have a `containingStateGroup` property + // as it contains the correct nodeId for the component + .filter((component) => + component.containing_frame.hasOwnProperty('containingStateGroup') + ) + // create a new array with a normalized name of the component + // and the encoded node id of the component + .map((component) => { + return { + name: component.containing_frame.containingStateGroup.name + .split('/') + .pop() + .toLowerCase() + .replace(/[\s\-]/g, ''), + nodeId: encodeURIComponent( + component.containing_frame.containingStateGroup.nodeId + ), + }; + }); + // Use a Map arranged by name for lookups TODO: needs to be deduped + return new Map( + componentListArray.map((component) => [component.name, component]) + ); + } catch (error) { + console.error(`Error fetching data: ${error}`); + } +} + +module.exports = { fetchFigmaComponentIds }; diff --git a/packages/components/link/src/link.figma.tsx b/packages/components/link/src/link.figma.tsx new file mode 100644 index 0000000000..c6a157143c --- /dev/null +++ b/packages/components/link/src/link.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Link } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Link, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=118%3A17594', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/scan-figma-connection.js b/scan-figma-connection.js index a043ec8303..ecd56a299d 100644 --- a/scan-figma-connection.js +++ b/scan-figma-connection.js @@ -1,5 +1,6 @@ const fs = require('node:fs/promises'); const path = require('path'); +const { fetchFigmaComponentIds } = require('./get-figma-ids'); /* * This script is used to assist with maintaining figma connect files for components @@ -17,7 +18,10 @@ const path = require('path'); */ // Helpers -const getConnectFileContent = (componentName) => { +const getConnectFileContent = ( + componentName, + componentId = '' +) => { return `// @ts-nocheck import { ${componentName} } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; @@ -25,7 +29,7 @@ import figma from '@figma/code-connect'; // REQUIRED: supply node id for the figma component figma.connect( ${componentName}, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=${componentId}', { props: { // *This file was generated from a script* @@ -38,13 +42,17 @@ figma.connect( `; }; -const getComponentName = (str) => { +const getReactComponentName = (str) => { return str .split('-') .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(''); }; +const normalizeComponentName = (str) => { + return str.toLowerCase().replace(/[^a-z0-9]/g, ''); +}; + /** * `scanConnectedComponents` recursively searches for the root React component file in a given directory. * For each root file found, it checks for a corresponding `.figma.tsx` file. @@ -56,6 +64,9 @@ const getComponentName = (str) => { */ const scanConnectedComponents = async (dir) => { + // Fetch figma component ids + const figmaComponentMap = await fetchFigmaComponentIds(); + // Read the given directory const entries = await fs.readdir(dir, { withFileTypes: true }); for (const entry of entries) { @@ -101,12 +112,22 @@ const scanConnectedComponents = async (dir) => { } } catch (err) { if (err.code === 'ENOENT') { + // check if our figma component map has the component + const matchingFigmaComponent = figmaComponentMap.get( + normalizeComponentName(componentName) + ); + if (matchingFigmaComponent === undefined) { + continue; + } // `.figma.tsx` file does not exist, create it await fs.writeFile( figmaFilePath, - getConnectFileContent(getComponentName(componentName)) + getConnectFileContent( + getReactComponentName(componentName), + matchingFigmaComponent.nodeId + ) ); - console.log(`Created Figma connect file: ${figmaFilePath}`); + console.log(`Created Connect file at ${figmaFilePath}`); } else { console.error(`Error checking file: ${figmaFilePath}`, err); } From 7b16d86f2c0aca6bd0d1babb4c51d5fb494d1f1c Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Tue, 17 Dec 2024 11:27:59 -0700 Subject: [PATCH 05/12] feat(code connect): cleanup and publish generated files to figma --- get-figma-ids.js | 9 ++++++++- .../src/collapsible-panel.figma.tsx} | 8 ++++---- .../src/data-table-manager.figma.tsx | 17 +++++++++++++++++ .../data-table/src/footer.figma.tsx | 17 +++++++++++++++++ .../dropdown-menu/src/dropdown-menu.figma.tsx | 17 +++++++++++++++++ .../src/filter-menu/footer/footer.figma.tsx | 17 +++++++++++++++++ .../src/filter-menu/header/header.figma.tsx | 17 +++++++++++++++++ .../checkbox-input/src/checkbox.figma.tsx | 17 +++++++++++++++++ .../date-time-input/src/time-input.figma.tsx | 17 +++++++++++++++++ .../src/localized-text-input.figma.tsx | 19 +++++++++++++++++++ .../money-input/src/money-input.figma.tsx} | 8 ++++---- .../select-input/src/select-input.figma.tsx | 17 +++++++++++++++++ .../text-input/src/text-input.figma.tsx | 17 +++++++++++++++++ .../time-input/src/time-input.figma.tsx | 17 +++++++++++++++++ .../content-notification.figma.tsx | 19 +++++++++++++++++++ .../src/primary-action-dropdown.figma.tsx | 19 +++++++++++++++++++ .../progress-bar/src/progress-bar.figma.tsx | 17 +++++++++++++++++ packages/components/stamp/src/stamp.figma.tsx | 17 +++++++++++++++++ 18 files changed, 277 insertions(+), 9 deletions(-) rename packages/components/{buttons/accessible-button/src/accessible-button.figma.tsx => collapsible-panel/src/collapsible-panel.figma.tsx} (66%) create mode 100644 packages/components/data-table-manager/src/data-table-manager.figma.tsx create mode 100644 packages/components/data-table/src/footer.figma.tsx create mode 100644 packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx create mode 100644 packages/components/filters/src/filter-menu/footer/footer.figma.tsx create mode 100644 packages/components/filters/src/filter-menu/header/header.figma.tsx create mode 100644 packages/components/inputs/checkbox-input/src/checkbox.figma.tsx create mode 100644 packages/components/inputs/date-time-input/src/time-input.figma.tsx create mode 100644 packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx rename packages/components/{buttons/link-button/src/link-button.figma.tsx => inputs/money-input/src/money-input.figma.tsx} (69%) create mode 100644 packages/components/inputs/select-input/src/select-input.figma.tsx create mode 100644 packages/components/inputs/text-input/src/text-input.figma.tsx create mode 100644 packages/components/inputs/time-input/src/time-input.figma.tsx create mode 100644 packages/components/notifications/src/content-notification/content-notification.figma.tsx create mode 100644 packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx create mode 100644 packages/components/progress-bar/src/progress-bar.figma.tsx create mode 100644 packages/components/stamp/src/stamp.figma.tsx diff --git a/get-figma-ids.js b/get-figma-ids.js index 587368ff69..cfdb3e33fc 100644 --- a/get-figma-ids.js +++ b/get-figma-ids.js @@ -33,6 +33,13 @@ async function fetchFigmaComponentIds() { .filter((component) => component.containing_frame.hasOwnProperty('containingStateGroup') ) + .reduce((acc, component) => { + // Dedupe components with the same name + if (!acc.some((item) => item.name === component.name)) { + acc.push(component); + } + return acc; + }, []) // create a new array with a normalized name of the component // and the encoded node id of the component .map((component) => { @@ -47,7 +54,7 @@ async function fetchFigmaComponentIds() { ), }; }); - // Use a Map arranged by name for lookups TODO: needs to be deduped + // Use a Map arranged by name for lookups return new Map( componentListArray.map((component) => [component.name, component]) ); diff --git a/packages/components/buttons/accessible-button/src/accessible-button.figma.tsx b/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx similarity index 66% rename from packages/components/buttons/accessible-button/src/accessible-button.figma.tsx rename to packages/components/collapsible-panel/src/collapsible-panel.figma.tsx index 9b77ee698e..76bb192164 100644 --- a/packages/components/buttons/accessible-button/src/accessible-button.figma.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx @@ -1,17 +1,17 @@ // @ts-nocheck -import { AccessibleButton } from '@commercetools-frontend/ui-kit'; +import { CollapsiblePanel } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; // REQUIRED: supply node id for the figma component figma.connect( - AccessibleButton, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + CollapsiblePanel, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=118%3A17915', { props: { // *This file was generated from a script* // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect children: figma.children('*'), }, - example: (props) => {props.children}, + example: (props) => {props.children}, } ); diff --git a/packages/components/data-table-manager/src/data-table-manager.figma.tsx b/packages/components/data-table-manager/src/data-table-manager.figma.tsx new file mode 100644 index 0000000000..cc20375e04 --- /dev/null +++ b/packages/components/data-table-manager/src/data-table-manager.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { DataTableManager } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + DataTableManager, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5602%3A26092', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/data-table/src/footer.figma.tsx b/packages/components/data-table/src/footer.figma.tsx new file mode 100644 index 0000000000..b2a3f0ab7e --- /dev/null +++ b/packages/components/data-table/src/footer.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Footer } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Footer, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3208%3A769', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) =>
{props.children}
, + } +); diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx new file mode 100644 index 0000000000..b09154bdf5 --- /dev/null +++ b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { DropdownMenu } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + DropdownMenu, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5322%3A3674', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/filters/src/filter-menu/footer/footer.figma.tsx b/packages/components/filters/src/filter-menu/footer/footer.figma.tsx new file mode 100644 index 0000000000..b2a3f0ab7e --- /dev/null +++ b/packages/components/filters/src/filter-menu/footer/footer.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Footer } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Footer, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3208%3A769', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) =>
{props.children}
, + } +); diff --git a/packages/components/filters/src/filter-menu/header/header.figma.tsx b/packages/components/filters/src/filter-menu/header/header.figma.tsx new file mode 100644 index 0000000000..f2d011f34e --- /dev/null +++ b/packages/components/filters/src/filter-menu/header/header.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Header } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Header, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=645%3A38178', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) =>
{props.children}
, + } +); diff --git a/packages/components/inputs/checkbox-input/src/checkbox.figma.tsx b/packages/components/inputs/checkbox-input/src/checkbox.figma.tsx new file mode 100644 index 0000000000..bd004d2981 --- /dev/null +++ b/packages/components/inputs/checkbox-input/src/checkbox.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Checkbox } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Checkbox, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=161%3A18694', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/date-time-input/src/time-input.figma.tsx b/packages/components/inputs/date-time-input/src/time-input.figma.tsx new file mode 100644 index 0000000000..8c67c9f455 --- /dev/null +++ b/packages/components/inputs/date-time-input/src/time-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { TimeInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + TimeInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=307%3A23474', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx new file mode 100644 index 0000000000..3e8d2cd5da --- /dev/null +++ b/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx @@ -0,0 +1,19 @@ +// @ts-nocheck +import { LocalizedTextInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + LocalizedTextInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=453%3A26870', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); diff --git a/packages/components/buttons/link-button/src/link-button.figma.tsx b/packages/components/inputs/money-input/src/money-input.figma.tsx similarity index 69% rename from packages/components/buttons/link-button/src/link-button.figma.tsx rename to packages/components/inputs/money-input/src/money-input.figma.tsx index 0530dddf7f..8d46c97f88 100644 --- a/packages/components/buttons/link-button/src/link-button.figma.tsx +++ b/packages/components/inputs/money-input/src/money-input.figma.tsx @@ -1,17 +1,17 @@ // @ts-nocheck -import { LinkButton } from '@commercetools-frontend/ui-kit'; +import { MoneyInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; // REQUIRED: supply node id for the figma component figma.connect( - LinkButton, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=', + MoneyInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=453%3A26481', { props: { // *This file was generated from a script* // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect children: figma.children('*'), }, - example: (props) => {props.children}, + example: (props) => {props.children}, } ); diff --git a/packages/components/inputs/select-input/src/select-input.figma.tsx b/packages/components/inputs/select-input/src/select-input.figma.tsx new file mode 100644 index 0000000000..092a1d3dc1 --- /dev/null +++ b/packages/components/inputs/select-input/src/select-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { SelectInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + SelectInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=120%3A17426', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/text-input/src/text-input.figma.tsx b/packages/components/inputs/text-input/src/text-input.figma.tsx new file mode 100644 index 0000000000..96e3c6d1ce --- /dev/null +++ b/packages/components/inputs/text-input/src/text-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { TextInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + TextInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=107%3A18819', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/time-input/src/time-input.figma.tsx b/packages/components/inputs/time-input/src/time-input.figma.tsx new file mode 100644 index 0000000000..8c67c9f455 --- /dev/null +++ b/packages/components/inputs/time-input/src/time-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { TimeInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + TimeInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=307%3A23474', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/notifications/src/content-notification/content-notification.figma.tsx b/packages/components/notifications/src/content-notification/content-notification.figma.tsx new file mode 100644 index 0000000000..4e5ce15372 --- /dev/null +++ b/packages/components/notifications/src/content-notification/content-notification.figma.tsx @@ -0,0 +1,19 @@ +// @ts-nocheck +import { ContentNotification } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + ContentNotification, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=212%3A20449', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); diff --git a/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx b/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx new file mode 100644 index 0000000000..4c25d3b0f9 --- /dev/null +++ b/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx @@ -0,0 +1,19 @@ +// @ts-nocheck +import { PrimaryActionDropdown } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + PrimaryActionDropdown, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=1040%3A35979', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); diff --git a/packages/components/progress-bar/src/progress-bar.figma.tsx b/packages/components/progress-bar/src/progress-bar.figma.tsx new file mode 100644 index 0000000000..913111c186 --- /dev/null +++ b/packages/components/progress-bar/src/progress-bar.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { ProgressBar } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + ProgressBar, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=4834%3A44677', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/stamp/src/stamp.figma.tsx b/packages/components/stamp/src/stamp.figma.tsx new file mode 100644 index 0000000000..2967b19fc9 --- /dev/null +++ b/packages/components/stamp/src/stamp.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { Stamp } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +// REQUIRED: supply node id for the figma component +figma.connect( + Stamp, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=123%3A18613', + { + props: { + // *This file was generated from a script* + // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); From 89cded3b8eee286bf933691907ae5a626af11e19 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Tue, 17 Dec 2024 14:58:26 -0700 Subject: [PATCH 06/12] feat(code connect): wow tyler why would you nuke the yarn lock file like that --- yarn.lock | 173 ++++++++++++++++++++++-------------------------------- 1 file changed, 70 insertions(+), 103 deletions(-) diff --git a/yarn.lock b/yarn.lock index b8f197803f..89fc45f1e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -53,17 +53,6 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2": - version: 7.26.2 - resolution: "@babel/code-frame@npm:7.26.2" - dependencies: - "@babel/helper-validator-identifier": ^7.25.9 - js-tokens: ^4.0.0 - picocolors: ^1.0.0 - checksum: db13f5c42d54b76c1480916485e6900748bbcb0014a8aca87f50a091f70ff4e0d0a6db63cade75eb41fcc3d2b6ba0a7f89e343def4f96f00269b41b8ab8dd7b8 - languageName: node - linkType: hard - "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.2": version: 7.25.2 resolution: "@babel/compat-data@npm:7.25.2" @@ -85,13 +74,6 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.25.9": - version: 7.26.3 - resolution: "@babel/compat-data@npm:7.26.3" - checksum: 85c5a9fb365231688c7faeb977f1d659da1c039e17b416f8ef11733f7aebe11fe330dce20c1844cacf243766c1d643d011df1d13cac9eda36c46c6c475693d21 - languageName: node - linkType: hard - "@babel/core@npm:7.12.9": version: 7.12.9 resolution: "@babel/core@npm:7.12.9" @@ -139,29 +121,6 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.26.0": - version: 7.26.0 - resolution: "@babel/core@npm:7.26.0" - dependencies: - "@ampproject/remapping": ^2.2.0 - "@babel/code-frame": ^7.26.0 - "@babel/generator": ^7.26.0 - "@babel/helper-compilation-targets": ^7.25.9 - "@babel/helper-module-transforms": ^7.26.0 - "@babel/helpers": ^7.26.0 - "@babel/parser": ^7.26.0 - "@babel/template": ^7.25.9 - "@babel/traverse": ^7.25.9 - "@babel/types": ^7.26.0 - convert-source-map: ^2.0.0 - debug: ^4.1.0 - gensync: ^1.0.0-beta.2 - json5: ^2.2.3 - semver: ^6.3.1 - checksum: b296084cfd818bed8079526af93b5dfa0ba70282532d2132caf71d4060ab190ba26d3184832a45accd82c3c54016985a4109ab9118674347a7e5e9bc464894e6 - languageName: node - linkType: hard - "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.9, @babel/core@npm:^7.7.5, @babel/core@npm:^7.7.7": version: 7.25.2 resolution: "@babel/core@npm:7.25.2" @@ -272,19 +231,6 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.3": - version: 7.26.3 - resolution: "@babel/generator@npm:7.26.3" - dependencies: - "@babel/parser": ^7.26.3 - "@babel/types": ^7.26.3 - "@jridgewell/gen-mapping": ^0.3.5 - "@jridgewell/trace-mapping": ^0.3.25 - jsesc: ^3.0.2 - checksum: fb09fa55c66f272badf71c20a3a2cee0fa1a447fed32d1b84f16a668a42aff3e5f5ddc6ed5d832dda1e952187c002ca1a5cdd827022efe591b6ac44cada884ea - languageName: node - linkType: hard - "@babel/helper-annotate-as-pure@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-annotate-as-pure@npm:7.24.7" @@ -813,17 +759,6 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.3": - version: 7.26.3 - resolution: "@babel/parser@npm:7.26.3" - dependencies: - "@babel/types": ^7.26.3 - bin: - parser: ./bin/babel-parser.js - checksum: e2bff2e9fa6540ee18fecc058bc74837eda2ddcecbe13454667314a93fc0ba26c1fb862c812d84f6d5f225c3bd8d191c3a42d4296e287a882c4e1f82ff2815ff - languageName: node - linkType: hard - "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.3": version: 7.25.3 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.3" @@ -2253,6 +2188,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:7.26.0": + version: 7.26.0 + resolution: "@babel/types@npm:7.26.0" + dependencies: + "@babel/helper-string-parser": ^7.25.9 + "@babel/helper-validator-identifier": ^7.25.9 + checksum: a3dd37dabac693018872da96edb8c1843a605c1bfacde6c3f504fba79b972426a6f24df70aa646356c0c1b19bdd2c722c623c684a996c002381071680602280d + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.12.6, @babel/types@npm:^7.12.7, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4": version: 7.25.2 resolution: "@babel/types@npm:7.25.2" @@ -2296,16 +2241,6 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3": - version: 7.26.3 - resolution: "@babel/types@npm:7.26.3" - dependencies: - "@babel/helper-string-parser": ^7.25.9 - "@babel/helper-validator-identifier": ^7.25.9 - checksum: 195f428080dcaadbcecc9445df7f91063beeaa91b49ccd78f38a5af6b75a6a58391d0c6614edb1ea322e57889a1684a0aab8e667951f820196901dd341f931e9 - languageName: node - linkType: hard - "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -13049,7 +12984,7 @@ __metadata: languageName: node linkType: hard -"decimal.js@npm:^10.4.2": +"decimal.js@npm:10, decimal.js@npm:^10.4.2, decimal.js@npm:^10.4.3": version: 10.4.3 resolution: "decimal.js@npm:10.4.3" checksum: 796404dcfa9d1dbfdc48870229d57f788b48c21c603c3f6554a1c17c10195fc1024de338b0cf9e1efe0c7c167eeb18f04548979bcc5fdfabebb7cc0ae3287bae @@ -19818,10 +19753,12 @@ __metadata: languageName: node linkType: hard -"modify-values@npm:^1.0.0": - version: 1.0.1 - resolution: "modify-values@npm:1.0.1" - checksum: 8296610c608bc97b03c2cf889c6cdf4517e32fa2d836440096374c2209f6b7b3e256c209493a0b32584b9cb32d528e99d0dd19dcd9a14d2d915a312d391cc7e9 +"mkdirp@npm:^3.0.1": + version: 3.0.1 + resolution: "mkdirp@npm:3.0.1" + bin: + mkdirp: dist/cjs/src/bin.js + checksum: 972deb188e8fb55547f1e58d66bd6b4a3623bf0c7137802582602d73e6480c1c2268dcbafbfb1be466e00cc7e56ac514d7fd9334b7cf33e3e2ab547c16f83a8d languageName: node linkType: hard @@ -21416,16 +21353,7 @@ __metadata: languageName: node linkType: hard -"qs@npm:6.13.1": - version: 6.13.1 - resolution: "qs@npm:6.13.1" - dependencies: - side-channel: ^1.0.6 - checksum: 86c5059146955fab76624e95771031541328c171b1d63d48a7ac3b1fdffe262faf8bc5fcadc1684e6f3da3ec87a8dedc8c0009792aceb20c5e94dc34cf468bb9 - languageName: node - linkType: hard - -"qs@npm:^6.10.0": +"qs@npm:6.13.1, qs@npm:^6.10.0": version: 6.13.1 resolution: "qs@npm:6.13.1" dependencies: @@ -21478,12 +21406,10 @@ __metadata: languageName: node linkType: hard -"randombytes@npm:^2.1.0": - version: 2.1.0 - resolution: "randombytes@npm:2.1.0" - dependencies: - safe-buffer: ^5.1.0 - checksum: d779499376bd4cbb435ef3ab9a957006c8682f343f14089ed5f27764e4645114196e75b7f6abf1cbd84fd247c0cb0651698444df8c9bf30e62120fbbc52269d6 +"ramda@npm:0.29.0": + version: 0.29.0 + resolution: "ramda@npm:0.29.0" + checksum: 9ab26c06eb7545cbb7eebcf75526d6ee2fcaae19e338f165b2bf32772121e7b28192d6664d1ba222ff76188ba26ab307342d66e805dbb02c860560adc4d5dd57 languageName: node linkType: hard @@ -24690,7 +24616,27 @@ __metadata: languageName: node linkType: hard -"typescript@npm:5.6.3, typescript@npm:^5.2.2, typescript@npm:^5.3.3": +"typescript@npm:5.5.4": + version: 5.5.4 + resolution: "typescript@npm:5.5.4" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: b309040f3a1cd91c68a5a58af6b9fdd4e849b8c42d837b2c2e73f9a4f96a98c4f1ed398a9aab576ee0a4748f5690cf594e6b99dbe61de7839da748c41e6d6ca8 + languageName: node + linkType: hard + +"typescript@npm:5.7.2, typescript@npm:^5.6.3": + version: 5.7.2 + resolution: "typescript@npm:5.7.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: b55300c4cefee8ee380d14fa9359ccb41ff8b54c719f6bc49b424899d662a5ce62ece390ce769568c7f4d14af844085255e63788740084444eb12ef423b13433 + languageName: node + linkType: hard + +"typescript@npm:^5.2.2": version: 5.6.3 resolution: "typescript@npm:5.6.3" bin: @@ -24700,7 +24646,27 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@5.6.3#~builtin, typescript@patch:typescript@^5.2.2#~builtin, typescript@patch:typescript@^5.3.3#~builtin": +"typescript@patch:typescript@5.5.4#~builtin": + version: 5.5.4 + resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin::version=5.5.4&hash=379a07" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: e14c87e8bd51f9ac741051a2c3bde75b2a3ab17dee2c50239f7e1a0868673f3b7d4d87684df41a59a8f57c6ddc5d06d65d120764d992441af5de07b98cf9c67b + languageName: node + linkType: hard + +"typescript@patch:typescript@5.7.2#~builtin, typescript@patch:typescript@^5.6.3#~builtin": + version: 5.7.2 + resolution: "typescript@patch:typescript@npm%3A5.7.2#~builtin::version=5.7.2&hash=5786d5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: e9fa1fd1f4203d399a5264e8612f9a64d9daf4ea7c926f346e11f6c8137acc6e29386c171c6b4085950ce714243be1627f60e76e5bd135124e226ce55309380f + languageName: node + linkType: hard + +"typescript@patch:typescript@^5.2.2#~builtin": version: 5.6.3 resolution: "typescript@patch:typescript@npm%3A5.6.3#~builtin::version=5.6.3&hash=8c6c40" bin: @@ -24731,11 +24697,12 @@ __metadata: "@commercetools-local/generator-package-json": "*" "@commercetools-local/generator-readme": "*" "@commercetools/github-labels": 1.1.0 - "@commitlint/cli": 19.5.0 - "@commitlint/config-conventional": 19.5.0 - "@formatjs/cli": 6.2.15 - "@formatjs/intl-relativetimeformat": 11.2.16 - "@manypkg/cli": 0.22.0 + "@commitlint/cli": 19.6.1 + "@commitlint/config-conventional": 19.6.0 + "@figma/code-connect": ^1.2.4 + "@formatjs/cli": 6.3.14 + "@formatjs/intl-relativetimeformat": 11.4.8 + "@manypkg/cli": 0.23.0 "@manypkg/get-packages": 1.1.3 "@omlet/cli": ^1.12.0 "@percy/cli": 1.30.5 From e3ba9db8e29e5840368d1f9c8ed50b63add732f7 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Tue, 17 Dec 2024 16:19:05 -0700 Subject: [PATCH 07/12] feat(code connect): template and connect files cleanup --- figma.config.json | 1 + .../src/collapsible-panel.figma.tsx | 1 - .../src/data-table-manager.figma.tsx | 1 - .../data-table/src/data-table.figma.tsx | 15 +++++++++++++++ .../components/data-table/src/footer.figma.tsx | 17 ----------------- .../dropdown-menu/src/dropdown-menu.figma.tsx | 1 - .../src/filter-menu/footer/footer.figma.tsx | 17 ----------------- .../src/filter-menu/header/header.figma.tsx | 17 ----------------- ...ckbox.figma.tsx => checkbox-input.figma.tsx} | 1 - .../date-time-input/src/time-input.figma.tsx | 1 - .../src/localized-text-input.figma.tsx | 1 - .../money-input/src/money-input.figma.tsx | 1 - .../src/search-select-input.figma.tsx | 15 +++++++++++++++ .../select-input/src/select-input.figma.tsx | 1 - .../src/selectable-search-input.figma.tsx | 17 +++++++++++++++++ .../inputs/text-input/src/text-input.figma.tsx | 1 - .../inputs/time-input/src/time-input.figma.tsx | 1 - packages/components/link/src/link.figma.tsx | 1 - .../content-notification.figma.tsx | 1 - .../src/primary-action-dropdown.figma.tsx | 1 - .../progress-bar/src/progress-bar.figma.tsx | 1 - packages/components/stamp/src/stamp.figma.tsx | 1 - scan-figma-connection.js | 1 - 23 files changed, 48 insertions(+), 67 deletions(-) create mode 100644 packages/components/data-table/src/data-table.figma.tsx delete mode 100644 packages/components/data-table/src/footer.figma.tsx delete mode 100644 packages/components/filters/src/filter-menu/footer/footer.figma.tsx delete mode 100644 packages/components/filters/src/filter-menu/header/header.figma.tsx rename packages/components/inputs/checkbox-input/src/{checkbox.figma.tsx => checkbox-input.figma.tsx} (91%) create mode 100644 packages/components/inputs/search-select-input/src/search-select-input.figma.tsx create mode 100644 packages/components/inputs/selectable-search-input/src/selectable-search-input.figma.tsx diff --git a/figma.config.json b/figma.config.json index e71531aedd..8c667dc616 100644 --- a/figma.config.json +++ b/figma.config.json @@ -1,5 +1,6 @@ { "codeConnect": { + "parser": "react", "importPaths": { "packages/components/**/*": "@commercetools-frontend/ui-kit" }, diff --git a/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx b/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx index 76bb192164..b51cee1d5a 100644 --- a/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel.figma.tsx @@ -2,7 +2,6 @@ import { CollapsiblePanel } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( CollapsiblePanel, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=118%3A17915', diff --git a/packages/components/data-table-manager/src/data-table-manager.figma.tsx b/packages/components/data-table-manager/src/data-table-manager.figma.tsx index cc20375e04..ebba2098d5 100644 --- a/packages/components/data-table-manager/src/data-table-manager.figma.tsx +++ b/packages/components/data-table-manager/src/data-table-manager.figma.tsx @@ -2,7 +2,6 @@ import { DataTableManager } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( DataTableManager, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5602%3A26092', diff --git a/packages/components/data-table/src/data-table.figma.tsx b/packages/components/data-table/src/data-table.figma.tsx new file mode 100644 index 0000000000..97365721fd --- /dev/null +++ b/packages/components/data-table/src/data-table.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { DataTable } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect/react'; + +figma.connect( + DataTable, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3530%3A10064', + { + props: { + // TODO: Map props here - this file links to the UI Kit 'Sample DataTable' in Figma + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/data-table/src/footer.figma.tsx b/packages/components/data-table/src/footer.figma.tsx deleted file mode 100644 index b2a3f0ab7e..0000000000 --- a/packages/components/data-table/src/footer.figma.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-nocheck -import { Footer } from '@commercetools-frontend/ui-kit'; -import figma from '@figma/code-connect'; - -// REQUIRED: supply node id for the figma component -figma.connect( - Footer, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3208%3A769', - { - props: { - // *This file was generated from a script* - // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect - children: figma.children('*'), - }, - example: (props) =>
{props.children}
, - } -); diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx index b09154bdf5..c8a3befa29 100644 --- a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx +++ b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx @@ -2,7 +2,6 @@ import { DropdownMenu } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( DropdownMenu, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5322%3A3674', diff --git a/packages/components/filters/src/filter-menu/footer/footer.figma.tsx b/packages/components/filters/src/filter-menu/footer/footer.figma.tsx deleted file mode 100644 index b2a3f0ab7e..0000000000 --- a/packages/components/filters/src/filter-menu/footer/footer.figma.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-nocheck -import { Footer } from '@commercetools-frontend/ui-kit'; -import figma from '@figma/code-connect'; - -// REQUIRED: supply node id for the figma component -figma.connect( - Footer, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3208%3A769', - { - props: { - // *This file was generated from a script* - // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect - children: figma.children('*'), - }, - example: (props) =>
{props.children}
, - } -); diff --git a/packages/components/filters/src/filter-menu/header/header.figma.tsx b/packages/components/filters/src/filter-menu/header/header.figma.tsx deleted file mode 100644 index f2d011f34e..0000000000 --- a/packages/components/filters/src/filter-menu/header/header.figma.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-nocheck -import { Header } from '@commercetools-frontend/ui-kit'; -import figma from '@figma/code-connect'; - -// REQUIRED: supply node id for the figma component -figma.connect( - Header, - 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=645%3A38178', - { - props: { - // *This file was generated from a script* - // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect - children: figma.children('*'), - }, - example: (props) =>
{props.children}
, - } -); diff --git a/packages/components/inputs/checkbox-input/src/checkbox.figma.tsx b/packages/components/inputs/checkbox-input/src/checkbox-input.figma.tsx similarity index 91% rename from packages/components/inputs/checkbox-input/src/checkbox.figma.tsx rename to packages/components/inputs/checkbox-input/src/checkbox-input.figma.tsx index bd004d2981..0bfe225934 100644 --- a/packages/components/inputs/checkbox-input/src/checkbox.figma.tsx +++ b/packages/components/inputs/checkbox-input/src/checkbox-input.figma.tsx @@ -2,7 +2,6 @@ import { Checkbox } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( Checkbox, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=161%3A18694', diff --git a/packages/components/inputs/date-time-input/src/time-input.figma.tsx b/packages/components/inputs/date-time-input/src/time-input.figma.tsx index 8c67c9f455..fc54bb560c 100644 --- a/packages/components/inputs/date-time-input/src/time-input.figma.tsx +++ b/packages/components/inputs/date-time-input/src/time-input.figma.tsx @@ -2,7 +2,6 @@ import { TimeInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( TimeInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=307%3A23474', diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx index 3e8d2cd5da..3bf8c3abb1 100644 --- a/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx +++ b/packages/components/inputs/localized-text-input/src/localized-text-input.figma.tsx @@ -2,7 +2,6 @@ import { LocalizedTextInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( LocalizedTextInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=453%3A26870', diff --git a/packages/components/inputs/money-input/src/money-input.figma.tsx b/packages/components/inputs/money-input/src/money-input.figma.tsx index 8d46c97f88..76fc1c11bd 100644 --- a/packages/components/inputs/money-input/src/money-input.figma.tsx +++ b/packages/components/inputs/money-input/src/money-input.figma.tsx @@ -2,7 +2,6 @@ import { MoneyInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( MoneyInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=453%3A26481', diff --git a/packages/components/inputs/search-select-input/src/search-select-input.figma.tsx b/packages/components/inputs/search-select-input/src/search-select-input.figma.tsx new file mode 100644 index 0000000000..5c3f0c8950 --- /dev/null +++ b/packages/components/inputs/search-select-input/src/search-select-input.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { SearchSelectInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + SearchSelectInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=463%3A27389', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/select-input/src/select-input.figma.tsx b/packages/components/inputs/select-input/src/select-input.figma.tsx index 092a1d3dc1..7bfc39769b 100644 --- a/packages/components/inputs/select-input/src/select-input.figma.tsx +++ b/packages/components/inputs/select-input/src/select-input.figma.tsx @@ -2,7 +2,6 @@ import { SelectInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( SelectInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=120%3A17426', diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.figma.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.figma.tsx new file mode 100644 index 0000000000..4c3fdd92b1 --- /dev/null +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { SelectableSearchInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + SelectableSearchInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=463%3A27888', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); diff --git a/packages/components/inputs/text-input/src/text-input.figma.tsx b/packages/components/inputs/text-input/src/text-input.figma.tsx index 96e3c6d1ce..5faa604c82 100644 --- a/packages/components/inputs/text-input/src/text-input.figma.tsx +++ b/packages/components/inputs/text-input/src/text-input.figma.tsx @@ -2,7 +2,6 @@ import { TextInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( TextInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=107%3A18819', diff --git a/packages/components/inputs/time-input/src/time-input.figma.tsx b/packages/components/inputs/time-input/src/time-input.figma.tsx index 8c67c9f455..fc54bb560c 100644 --- a/packages/components/inputs/time-input/src/time-input.figma.tsx +++ b/packages/components/inputs/time-input/src/time-input.figma.tsx @@ -2,7 +2,6 @@ import { TimeInput } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( TimeInput, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=307%3A23474', diff --git a/packages/components/link/src/link.figma.tsx b/packages/components/link/src/link.figma.tsx index c6a157143c..9bb18c0092 100644 --- a/packages/components/link/src/link.figma.tsx +++ b/packages/components/link/src/link.figma.tsx @@ -2,7 +2,6 @@ import { Link } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( Link, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=118%3A17594', diff --git a/packages/components/notifications/src/content-notification/content-notification.figma.tsx b/packages/components/notifications/src/content-notification/content-notification.figma.tsx index 4e5ce15372..3d25d2aa76 100644 --- a/packages/components/notifications/src/content-notification/content-notification.figma.tsx +++ b/packages/components/notifications/src/content-notification/content-notification.figma.tsx @@ -2,7 +2,6 @@ import { ContentNotification } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( ContentNotification, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=212%3A20449', diff --git a/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx b/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx index 4c25d3b0f9..22c394d05d 100644 --- a/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx +++ b/packages/components/primary-action-dropdown/src/primary-action-dropdown.figma.tsx @@ -2,7 +2,6 @@ import { PrimaryActionDropdown } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( PrimaryActionDropdown, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=1040%3A35979', diff --git a/packages/components/progress-bar/src/progress-bar.figma.tsx b/packages/components/progress-bar/src/progress-bar.figma.tsx index 913111c186..7c29a5af13 100644 --- a/packages/components/progress-bar/src/progress-bar.figma.tsx +++ b/packages/components/progress-bar/src/progress-bar.figma.tsx @@ -2,7 +2,6 @@ import { ProgressBar } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( ProgressBar, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=4834%3A44677', diff --git a/packages/components/stamp/src/stamp.figma.tsx b/packages/components/stamp/src/stamp.figma.tsx index 2967b19fc9..c50c3608cb 100644 --- a/packages/components/stamp/src/stamp.figma.tsx +++ b/packages/components/stamp/src/stamp.figma.tsx @@ -2,7 +2,6 @@ import { Stamp } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( Stamp, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=123%3A18613', diff --git a/scan-figma-connection.js b/scan-figma-connection.js index ecd56a299d..70e1fa20e2 100644 --- a/scan-figma-connection.js +++ b/scan-figma-connection.js @@ -26,7 +26,6 @@ const getConnectFileContent = ( import { ${componentName} } from '@commercetools-frontend/ui-kit'; import figma from '@figma/code-connect'; -// REQUIRED: supply node id for the figma component figma.connect( ${componentName}, 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=${componentId}', From aeab711a7ae1a85c18d66e0ad55313face121a1d Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Wed, 18 Dec 2024 11:12:32 -0700 Subject: [PATCH 08/12] feat(code connect): additional mappings --- .../pagination/src/pagination.figma.tsx | 15 +++++++++++++++ packages/components/tooltip/src/tooltip.figma.tsx | 15 +++++++++++++++ .../view-switcher/src/view-switcher.figma.tsx | 15 +++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 packages/components/pagination/src/pagination.figma.tsx create mode 100644 packages/components/tooltip/src/tooltip.figma.tsx create mode 100644 packages/components/view-switcher/src/view-switcher.figma.tsx diff --git a/packages/components/pagination/src/pagination.figma.tsx b/packages/components/pagination/src/pagination.figma.tsx new file mode 100644 index 0000000000..bbf79076f7 --- /dev/null +++ b/packages/components/pagination/src/pagination.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { Pagination } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + Pagination, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=0%3A4542', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/tooltip/src/tooltip.figma.tsx b/packages/components/tooltip/src/tooltip.figma.tsx new file mode 100644 index 0000000000..d5b359431f --- /dev/null +++ b/packages/components/tooltip/src/tooltip.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { Tooltip } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + Tooltip, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=5318%3A8820', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/view-switcher/src/view-switcher.figma.tsx b/packages/components/view-switcher/src/view-switcher.figma.tsx new file mode 100644 index 0000000000..fa42ba0c98 --- /dev/null +++ b/packages/components/view-switcher/src/view-switcher.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { ViewSwitcher } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + ViewSwitcher, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=158%3A18378', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); From eb6688ac7f7e0274c0f3928d05691877f41c22f4 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Wed, 18 Dec 2024 11:51:13 -0700 Subject: [PATCH 09/12] feat(code connect): additional mappings part two --- .../src/leading-icon/leading-icon.figma.tsx | 15 +++++++++++++++ .../inputs/date-input/src/date-input.figma.tsx | 15 +++++++++++++++ .../src/multiline-text-input.figma.tsx | 17 +++++++++++++++++ 3 files changed, 47 insertions(+) create mode 100644 packages/components/icons/src/leading-icon/leading-icon.figma.tsx create mode 100644 packages/components/inputs/date-input/src/date-input.figma.tsx create mode 100644 packages/components/inputs/multiline-text-input/src/multiline-text-input.figma.tsx diff --git a/packages/components/icons/src/leading-icon/leading-icon.figma.tsx b/packages/components/icons/src/leading-icon/leading-icon.figma.tsx new file mode 100644 index 0000000000..b04cfc2434 --- /dev/null +++ b/packages/components/icons/src/leading-icon/leading-icon.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { LeadingIcon } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + LeadingIcon, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=4834%3A44841', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/date-input/src/date-input.figma.tsx b/packages/components/inputs/date-input/src/date-input.figma.tsx new file mode 100644 index 0000000000..ec166f9590 --- /dev/null +++ b/packages/components/inputs/date-input/src/date-input.figma.tsx @@ -0,0 +1,15 @@ +// @ts-nocheck +import { DateInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + DateInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=261%3A24083', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => {props.children}, + } +); diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.figma.tsx b/packages/components/inputs/multiline-text-input/src/multiline-text-input.figma.tsx new file mode 100644 index 0000000000..93a0ab6cc6 --- /dev/null +++ b/packages/components/inputs/multiline-text-input/src/multiline-text-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { MultilineTextInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + MultilineTextInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=3771%3A12409', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); From 75d552d6050f5ca626434d252ae2ea4e0f96eb90 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Wed, 18 Dec 2024 11:55:31 -0700 Subject: [PATCH 10/12] feat(code connect): wrapping up input mappings --- .../src/localized-money-input.figma.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/components/inputs/localized-money-input/src/localized-money-input.figma.tsx diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.figma.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.figma.tsx new file mode 100644 index 0000000000..6d81d1c528 --- /dev/null +++ b/packages/components/inputs/localized-money-input/src/localized-money-input.figma.tsx @@ -0,0 +1,17 @@ +// @ts-nocheck +import { LocalizedMoneyInput } from '@commercetools-frontend/ui-kit'; +import figma from '@figma/code-connect'; + +figma.connect( + LocalizedMoneyInput, + 'https://www.figma.com/design/UoqmtHSHwxvEZRcbsM4A3Z/CT-product-design-system?node-id=463%3A27181', + { + props: { + // TODO: Map props here + children: figma.children('*'), + }, + example: (props) => ( + {props.children} + ), + } +); From a865d3e7f18bbba376e320337ce681df13d46ea3 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Wed, 18 Dec 2024 12:32:36 -0700 Subject: [PATCH 11/12] feat(code connect): fix connect file template --- scan-figma-connection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scan-figma-connection.js b/scan-figma-connection.js index 70e1fa20e2..1a44186517 100644 --- a/scan-figma-connection.js +++ b/scan-figma-connection.js @@ -32,7 +32,7 @@ figma.connect( { props: { // *This file was generated from a script* - // TODO: manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect + // TODO: (optional) To manually map props here, see https://www.figma.com/code-connect-docs/react/#figmaconnect children: figma.children('*'), }, example: (props) => <${componentName}>{props.children}, From 56699f7ddf11917031e9a7b8f691f0ae302736d4 Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Fri, 20 Dec 2024 10:23:22 -0700 Subject: [PATCH 12/12] feat(code connect): move scripts to scripts folder --- get-figma-ids.js => scripts/get-figma-ids.js | 0 scan-figma-connection.js => scripts/scan-figma-connection.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename get-figma-ids.js => scripts/get-figma-ids.js (100%) rename scan-figma-connection.js => scripts/scan-figma-connection.js (100%) diff --git a/get-figma-ids.js b/scripts/get-figma-ids.js similarity index 100% rename from get-figma-ids.js rename to scripts/get-figma-ids.js diff --git a/scan-figma-connection.js b/scripts/scan-figma-connection.js similarity index 100% rename from scan-figma-connection.js rename to scripts/scan-figma-connection.js