[DNM] Figma code connect components

.gitignore

@@ -46,4 +46,8 @@ yarn-error.log*
 # Autogenerated CSS
 /docs/css/salt-core.css
 /docs/css/salt-lab.css
-/docs/css/salt-countries.css
+/docs/css/salt-countries.css
+
+# Figma code connect
+.env
+mockFigmaResponse.json

figma.config.json

@@ -0,0 +1,14 @@
+{
+  "codeConnect": {
+    "include": [
+      "packages/core/src/**/*.{tsx,jsx}",
+      "packages/core/figma-src/**/*.{tsx,jsx}",
+      "packages/icons/src/**/*.{tsx,jsx}"
+    ],
+    "exclude": ["**/__tests__/*.{tsx,jsx}"],
+    "importPaths": {
+      "packages/core/src/*": "@salt-ds/core",
+      "packages/icons/*": "@salt-ds/icons"
+    }
+  }
+}

package.json

@@ -46,6 +46,7 @@
     "@changesets/cli": "^2.27.12",
     "@cypress/code-coverage": "^3.13.6",
     "@faker-js/faker": "^8.0.0",
+    "@figma/code-connect": "^1.3.1",
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
     "@mswjs/data": "^0.16.1",

packages/core/figma-src/Avatar.figma.tsx

@@ -0,0 +1,56 @@
+import figma from "@figma/code-connect";
+import { Avatar } from "../src/avatar/Avatar";
+
+// Icon variant - https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?m=auto&node-id=24377-78056
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?node-id=24377-78056",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+    },
+    example: (props) => <Avatar size={props.size} />,
+  },
+);
+
+// Initials
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?node-id=24377%3A78140",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+      // initialsValue: figma.string("Initials value"), // initialsValue in code is generated automatically
+    },
+    example: (props) => <Avatar size={props.size} name="Foo Bar" />,
+  },
+);
+
+// Image - https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?m=auto&node-id=5688-71628
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?node-id=5688-71628",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+    },
+    example: (props) => (
+      <Avatar size={props.size} name="Foo Bar" src="/img/examples/avatar.png" />
+    ),
+  },
+);

packages/core/figma-src/Badge.figma.tsx

@@ -0,0 +1,32 @@
+import figma from "@figma/code-connect";
+import { Badge } from "../src/badge/Badge";
+
+/**
+ * -- 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(
+  Badge,
+  "https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?node-id=9106%3A83184",
+  {
+    props: {
+      value: figma.string("Badge value"),
+      // No matching props could be found for these Figma properties:
+    },
+    example: ({ value }) => <Badge value={value} />,
+  },
+);
+
+// Manual created - Dot badge
+figma.connect(
+  Badge,
+  "https://www.figma.com/design/7Fh5JbUUM84pYwLt9tpJh2/Salt-DS-Components-and-Patterns?node-id=31292-7021",
+  {
+    props: {},
+    example: () => <Badge />,
+  },
+);