feat(code connect): cleanup and publish generated files to figma

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])
     );

packages/components/buttons/accessible-button/src/accessible-button.figma.tsx → 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=<placeholder>',
+  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) => <AccessibleButton>{props.children}</AccessibleButton>,
+    example: (props) => <CollapsiblePanel>{props.children}</CollapsiblePanel>,
   }
 );

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) => <DataTableManager>{props.children}</DataTableManager>,
+  }
+);

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) => <Footer>{props.children}</Footer>,
+  }
+);

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) => <DropdownMenu>{props.children}</DropdownMenu>,
+  }
+);

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) => <Footer>{props.children}</Footer>,
+  }
+);

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) => <Header>{props.children}</Header>,
+  }
+);

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) => <Checkbox>{props.children}</Checkbox>,
+  }
+);

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) => <TimeInput>{props.children}</TimeInput>,
+  }
+);

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) => (
+      <LocalizedTextInput>{props.children}</LocalizedTextInput>
+    ),
+  }
+);

packages/components/buttons/link-button/src/link-button.figma.tsx → 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=<placeholder>',
+  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) => <LinkButton>{props.children}</LinkButton>,
+    example: (props) => <MoneyInput>{props.children}</MoneyInput>,
   }
 );

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) => <SelectInput>{props.children}</SelectInput>,
+  }
+);

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) => <TextInput>{props.children}</TextInput>,
+  }
+);

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) => <TimeInput>{props.children}</TimeInput>,
+  }
+);

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) => (
+      <ContentNotification>{props.children}</ContentNotification>
+    ),
+  }
+);

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) => (
+      <PrimaryActionDropdown>{props.children}</PrimaryActionDropdown>
+    ),
+  }
+);

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) => <ProgressBar>{props.children}</ProgressBar>,
+  }
+);

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) => <Stamp>{props.children}</Stamp>,
+  }
+);