FCT-1306 Code Connect POC

figma.config.json

@@ -0,0 +1,9 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "importPaths": {
+      "packages/components/**/*": "@commercetools-frontend/ui-kit"
+    },
+    "include": ["packages/components/**/*.{tsx,jsx}"]
+  }
+}

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",

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) => (
+      <Avatar
+        isHighlighted={props.isHighlighted}
+        size={props.size}
+        color={props.color}
+        icon={props.icon}
+      />
+    ),
+  }
+);

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) => (
+      <FlatButton label={props.label} tone={props.tone} icon={props.icon} />
+    ),
+  }
+);

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) => <IconButton />,
+  }
+);

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

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) => <SecondaryButton />,
+  }
+);

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

packages/components/card/src/card.figma.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import { Card } from '@commercetools-frontend/ui-kit';
+import figma from '@figma/code-connect';
+
+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) => (
+      <Card type={props.type} theme={props.theme}>
+        {props.children}
+      </Card>
+    ),
+  }
+);

packages/components/collapsible-panel/src/collapsible-panel.figma.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { CollapsiblePanel } from '@commercetools-frontend/ui-kit';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  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) => <CollapsiblePanel>{props.children}</CollapsiblePanel>,
+  }
+);

packages/components/data-table-manager/src/data-table-manager.figma.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { DataTableManager } from '@commercetools-frontend/ui-kit';
+import figma from '@figma/code-connect';
+
+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/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) => <DataTable>{props.children}</DataTable>,
+  }
+);

packages/components/dropdowns/dropdown-menu/src/dropdown-menu.figma.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { DropdownMenu } from '@commercetools-frontend/ui-kit';
+import figma from '@figma/code-connect';
+
+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/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) => <LeadingIcon>{props.children}</LeadingIcon>,
+  }
+);

packages/components/inputs/checkbox-input/src/checkbox-input.figma.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { Checkbox } from '@commercetools-frontend/ui-kit';
+import figma from '@figma/code-connect';
+
+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>,
+  }
+);