Figma connect files (#4681)

* working

* add code connect

* disable failing eslint

* chore: fix TypeScript errors

* Revert "chore: fix TypeScript errors"

This reverts commit 0cdec4b.

* trying to fix ts issues

* fixes

* readonly -> readOnly

* disable type checking until the compinent is fixed

---------

Co-authored-by: Josh Black <[email protected]>

packages/react/figma.config.json

@@ -1,12 +1,13 @@
 {
   "codeConnect": {
+    "parser": "react",
+    "importPaths": {
+      "src/*": "@primer/react",
+      "src/drafts/*": "@primer/react/drafts",
+      "src/experimental/*": "@primer/react/experimental",
+      "src/deprecated/*": "@primer/react/deprecated"
+    },
     "include": ["src/**/*.figma.tsx", "src/**/*.tsx"],
-    "exclude": ["test/**", "docs/**", "build/**"],
-    "react": {
-      "importPaths": {
-        "./src/*": "@primer/react"
-      },
-      "paths": {}
-    }
+    "exclude": ["test/**", "docs/**", "build/**"]
   }
-}
+}

packages/react/package.json

@@ -126,7 +126,7 @@
     "@babel/plugin-transform-modules-commonjs": "7.24.1",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@figma/code-connect": "^0.1.1",
+    "@figma/code-connect": "1.0.1",
     "@primer/css": "^21.0.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.4",

packages/react/src/Avatar/Avatar.figma.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Avatar from './Avatar'
+import {Avatar} from '../../src'
 import figma from '@figma/code-connect'
 
 /**

packages/react/src/AvatarPair/AvatarPair.figma.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {AvatarPair} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(AvatarPair, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=13006-42855', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: ({children}) => <AvatarPair>{children}</AvatarPair>,
+})

packages/react/src/AvatarStack/AvatarStack.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {AvatarStack} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  AvatarStack,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=3805-24&t=eMfIgDUcIkVQzl79-4',
+  {
+    props: {
+      children: figma.children('*'),
+    },
+    example: ({children}) => <AvatarStack>{children}</AvatarStack>,
+  },
+)

packages/react/src/BranchName/BranchName.figma.tsx

@@ -17,11 +17,12 @@ figma.connect(
   'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=3655-7208&mode=design&t=HqwKHI6akvFT5reK-4',
   {
     props: {
+      label: figma.textContent('branch_name'),
       as: figma.enum('type', {
         text: 'span',
         link: undefined,
       }),
     },
-    example: ({as}) => <BranchName as={as} />,
+    example: ({as, label}) => <BranchName as={as}>{label}</BranchName>,
   },
 )

packages/react/src/Breadcrumbs/Breadcrumbs.figma.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import Breadcrumbs from './Breadcrumbs'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Breadcrumbs,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?m=auto&node-id=20135-70690&t=39jWyeflbJqVh77d-1',
+  {
+    props: {
+      children: figma.children([
+        '1st parent',
+        '2nd parent',
+        '3rd parent',
+        '4th parent',
+        '5th parent',
+        '6th parent',
+        '7th parent',
+        '8th parent',
+        '9th parent',
+        'Current page',
+      ]),
+    },
+    example: ({children}) => <Breadcrumbs>{children}</Breadcrumbs>,
+  },
+)
+
+/**
+ * BreadcrumbsItem
+ */
+figma.connect(Breadcrumbs.Item, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=34258-144883', {
+  props: {
+    selected: figma.boolean('selected'),
+    label: figma.textContent('label'),
+  },
+  example: ({selected, label}) => (
+    <Breadcrumbs.Item href="#" selected={selected}>
+      {label}
+    </Breadcrumbs.Item>
+  ),
+})

packages/react/src/Button/Button.figma.tsx

@@ -1,10 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import {figma} from '@figma/code-connect'
-import {ButtonComponent as Button} from './Button'
+import {Button} from '../../src'
 import React from 'react'
 
 const componentProps = {
+  label: figma.textContent('Button'),
   disabled: figma.enum('state', {disabled: true}),
   inactive: figma.enum('state', {inactive: true}),
   size: figma.enum('size', {
@@ -37,7 +38,7 @@ figma.connect(
   'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=30258%3A5582&mode=design&t=TVF2yeiff0ZtzQll-1',
   {
     props: componentProps,
-    example: ({size, disabled, inactive, alignContent, leadingVisual, variant}) => (
+    example: ({size, disabled, inactive, alignContent, leadingVisual, variant, label}) => (
       <Button
         size={size}
         disabled={disabled}
@@ -46,7 +47,9 @@ figma.connect(
         variant={variant}
         leadingVisual={leadingVisual}
         trailingVisual={trailingVisual}
-      ></Button>
+      >
+        {label}
+      </Button>
     ),
   },
 )

packages/react/src/Checkbox/Checkbox.figma.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {FormControl, Checkbox} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15341-46321&t=9imbqLYmermiHP7U-4',
+  {
+    props: {
+      caption: figma.boolean('caption?', {
+        false: undefined,
+        true: figma.children('Caption'),
+      }),
+      label: figma.children('Label'),
+      labelProps: figma.nestedProps('Label', {
+        required: figma.boolean('required'),
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      checked: figma.boolean('checked?'),
+      indeterminate: figma.boolean('indeterminate?'),
+    },
+    example: ({disabled, label, caption, checked, indeterminate, labelProps}) => (
+      <FormControl disabled={disabled} required={labelProps.required}>
+        <Checkbox checked={checked} indeterminate={indeterminate} value="..." />
+        {label}
+        {caption}
+      </FormControl>
+    ),
+  },
+)

packages/react/src/CounterLabel/CounterLabel.figma.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {CounterLabel} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  CounterLabel,
+  'https://www.figma.c1om/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-64970&t=9imbqLYmermiHP7U-4',
+  {
+    props: {
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+      count: figma.textContent('text'),
+    },
+    example: ({variant, count}) => <CounterLabel scheme={variant}>{count}</CounterLabel>,
+  },
+)

packages/react/src/FormControl/FormControl.figma.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import FormControl from '../FormControl'
+
+/* eslint eslint-comments/no-use: off */
+/* eslint-disable primer-react/direct-slot-children */
+
+figma.connect(
+  FormControl.Label,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=34462-69137&t=WXa19NDaeGGhlbLq-4',
+  {
+    props: {
+      label: figma.textContent('Label'),
+    },
+    example: ({label}) => <FormControl.Label>{label}</FormControl.Label>,
+  },
+)
+
+figma.connect(
+  FormControl.Caption,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15341-47232&t=nIetmFV1SCcA8FZ2-4',
+  {
+    props: {
+      caption: figma.textContent('Caption'),
+    },
+    example: ({caption}) => <FormControl.Caption>{caption}</FormControl.Caption>,
+  },
+)
+/* eslint-enable primer-react/direct-slot-children */
+
+figma.connect(
+  FormControl.Validation,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=34428-2171&t=gvEqrj5KNY2nbDQs-4',
+  {
+    props: {
+      text: figma.textContent('text'),
+      variant: figma.enum('variant', {
+        error: 'error',
+        success: 'success',
+      }),
+    },
+    example: ({text, variant}) => <FormControl.Validation variant={variant}>{text}</FormControl.Validation>,
+  },
+)

packages/react/src/InlineMessage/InlineMessage.figma.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {InlineMessage} from './InlineMessage'
+
+figma.connect(InlineMessage, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=32109-348&m=dev', {
+  props: {
+    variant: figma.enum('variant', {
+      success: 'success',
+      warning: 'warning',
+      critical: 'critical',
+      unavailable: 'unavailable',
+    }),
+    size: figma.enum('size', {
+      small: 'small',
+      medium: 'medium',
+    }),
+    text: figma.string('text'),
+  },
+  example: ({size, variant, text}) => (
+    <InlineMessage size={size} variant={variant}>
+      {text}
+    </InlineMessage>
+  ),
+})

packages/react/src/Pagination/Pagination.figma.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Pagination} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Pagination, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=34607-94621', {
+  props: {
+    showPages: figma.boolean('showPages'),
+    pages: figma.nestedProps('Pages', {
+      currentPage: figma.enum('CurrentPage', {
+        '1': 1,
+        '2': 2,
+        '3': 3,
+        '4': 4,
+        '5': 5,
+        '6': 6,
+        '7': 7,
+        '8': 8,
+        '9': 9,
+        '10': 10,
+      }),
+      pageCount: figma.enum('PageCount', {
+        '1': 1,
+        '2': 2,
+        '3': 3,
+        '4': 4,
+        '5': 5,
+        '6': 6,
+        '7': 7,
+        '8': 8,
+        '9': 9,
+        '10': 10,
+      }),
+    }),
+  },
+  example: ({showPages, pages}) => (
+    <Pagination showPages={showPages} pageCount={pages.pageCount} currentPage={pages.currentPage} />
+  ),
+})