fix(code-connect): update to v1 and fix bugs (#16834)

* feat(code-connect): connect Select and FluidSelect

* chore: fix

* feat(code-connect): connect select and radio button

* feat(code-connect): radio button and radio button group

* chore: typo

* feat(code-connect): connect search

* Update README.md

* fix(code-connect): update to v1 and fix bugs

* chore: merge

* fix: move code-connect to dev dependency

* chore: yarn dedupe

* chore: match packages back to main

* feat(code-connect): connect content-swticher

* feat(code-connect): loading and inline loading

* feat(code-connect): unorderedlist, orderedlist, listitem

* feat(code-connect): progress bar

figma.config.json

@@ -1,11 +1,10 @@
 {
   "codeConnect": {
-    "include": ["packages/react/code-connect/**"],
-    "react": {
-      "importPaths": {
-        "packages/react/src/*": "@carbon/react"
-      },
-      "paths": {}
-    }
+    "parser": "react",
+    "importPaths": {
+      "packages/react/src/*": "@carbon/react"
+    },
+    "paths": {},
+    "include": ["packages/react/code-connect/**"]
   }
 }

packages/react/code-connect/Accordion/Accordion.figma.tsx

@@ -15,16 +15,28 @@ figma.connect(
   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2490-17019&mode=design&t=0hF8pirV0i9mofd1-4',
   {
     props: {
-      // missing props, set on Accordion item within Figma
-      // size
-      // isFlush
-      // align
       children: figma.children(['Accordion item']),
+      accordionItem: figma.nestedProps('Accordion item', {
+        align: figma.enum('Alignment', {
+          Left: 'start',
+        }),
+        isFlush: figma.boolean('Flush'),
+        size: figma.enum('Size', {
+          Large: 'lg',
+          Medium: 'md',
+          Small: 'sm',
+        }),
+      }),
     },
-    example: ({ children }) => (
+    example: ({ children, accordionItem }) => (
       // Disclaimer: Code Connect is currently in beta and integration with Carbon
       // React is in an exploratory phase. Code sample below may be incomplete.
-      <Accordion>{children}</Accordion>
+      <Accordion
+        size={accordionItem.size}
+        align={accordionItem.align}
+        isFlush={accordionItem.isFlush}>
+        {children}
+      </Accordion>
     ),
   }
 );

packages/react/code-connect/Accordion/AccordionItem.figma.tsx

@@ -22,27 +22,8 @@ figma.connect(
       open: figma.boolean('Expanded'),
       content: figma.string('Content text'),
       children: figma.instance('Swap slot'),
-      // Props below are on accordion item in Figma and accordion in React
-      // size: figma.enum('Size', {
-      //   Large: 'lg',
-      //   Medium: 'md',
-      //   Small: 'sm',
-      // }),
-      // isFlush: figma.boolean('Flush'),
-      // align: figma.enum('Alignment', {
-      //   Left: 'start',
-      // }),
     },
-    example: ({
-      title,
-      disabled,
-      open,
-      content,
-      children,
-      // size, needs to be set on Accordion
-      // isFlush, needs to be set on Accordion
-      // align, needs to be set on Accordion
-    }) => (
+    example: ({ title, disabled, open, content, children }) => (
       <AccordionItem title={title} disabled={disabled} open={open}>
         <p>{content}</p>
         {children}

packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx

@@ -30,7 +30,7 @@ figma.connect(
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-104960&t=cMvnFTYLPEhzhIpj-4',
   {
     props: {
-      children: figma.string('Code text'),
+      children: figma.textContent('node -v'),
     },
     example: ({ children }) => {
       return (
@@ -49,14 +49,18 @@ figma.connect(
   CodeSnippet,
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-103999&t=cMvnFTYLPEhzhIpj-4',
   {
-    example: () => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <CodeSnippet type="single" feedback="Copied to clipboard">
-        yarn add carbon-components@latest carbon-components-react@latest
-        @carbon/icons-react@latest carbon-icons@latest
-      </CodeSnippet>
-    ),
+    props: {
+      children: figma.textContent('$ npm install --save carbon-components'),
+    },
+    example: ({ children }) => {
+      return (
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
+        <CodeSnippet type="single" feedback="Copied to clipboard">
+          {children}
+        </CodeSnippet>
+      );
+    },
   }
 );
 
@@ -99,19 +103,3 @@ figma.connect(
     ),
   }
 );
-
-// // Skeleton state (multiline only)
-// figma.connect(
-//   CodeSnippetSkeleton,
-//   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
-//   {
-//     variant: { State: 'Skeleton' },
-//     example: () => {
-//       return (
-//         // Disclaimer: Code Connect is currently in beta and integration with Carbon
-//         // React is in an exploratory phase. Code sample below may be incomplete.
-//         <CodeSnippetSkeleton type="multi" />
-//       );
-//     },
-//   }
-// );

packages/react/code-connect/ContentSwitcher/ContentSwitcher.figma.tsx

@@ -1,32 +1,56 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // @ts-nocheck
 import React from 'react';
-import { ContentSwitcher } from './ContentSwitcher';
+import { ContentSwitcher } from '@carbon/react';
 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(
   ContentSwitcher,
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=10151-402486&t=LoXqbMLZkoMgbrAS-4',
   {
     props: {
-      type: figma.enum('Type', {
-        Default: 'default',
-        'Icon only': 'icon-only',
+      children: figma.children(['_Content switcher text item']),
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
       }),
+    },
+    example: ({ size, children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <ContentSwitcher onChange={function noRefCheck() {}} size={size}>
+        {children}
+      </ContentSwitcher>
+    ),
+  }
+);
+
+figma.connect(
+  ContentSwitcher,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=10151-402486&t=LoXqbMLZkoMgbrAS-4',
+  {
+    variant: { Type: 'Icon only' },
+    props: {
+      children: figma.children(['_Content switcher icon item']),
       size: figma.enum('Size', {
-        Large: 'large',
-        Medium: 'medium',
-        Small: 'small',
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
       }),
-      disabled: figma.boolean('Disabled'),
     },
-    example: () => <ContentSwitcher />,
+    example: ({ size, children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <ContentSwitcher onChange={function noRefCheck() {}} size={size}>
+        {children}
+      </ContentSwitcher>
+    ),
   }
 );

packages/react/code-connect/ContentSwitcher/IconSwitch.figma.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { IconSwitch } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  IconSwitch,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=21988-280553&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    props: {
+      children: figma.children('*'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+    },
+    example: ({ disabled, children }) => (
+      <IconSwitch disabled={disabled}>{children}</IconSwitch>
+    ),
+  }
+);

packages/react/code-connect/ContentSwitcher/Switch.figma.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { Switch } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=10151-402337&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    props: {
+      text: figma.string('Label text'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+    },
+    example: ({ text, disabled }) => <Switch disabled={disabled} text={text} />,
+  }
+);

packages/react/code-connect/Grid/Grid.figma.tsx

@@ -18,11 +18,12 @@ figma.connect(
         Breakpoint7: 'breakpoint7',
         Breakpoint8: 'breakpoint8',
       }),
+      children: figma.children('*'),
     },
-    example: () => (
+    example: ({ children }) => (
       // Disclaimer: Code Connect is currently in beta and integration with Carbon
       // React is in an exploratory phase. Code sample below is incomplete.
-      <Grid></Grid>
+      <Grid>{children}</Grid>
     ),
   }
 );

packages/react/code-connect/List/List.figma.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { UnorderedList, OrderedList } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  UnorderedList,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3284-27553&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    variant: { Type: 'Unordered' },
+    props: { children: figma.children(['_List item']) },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <UnorderedList>{children}</UnorderedList>
+    ),
+  }
+);
+
+figma.connect(
+  OrderedList,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3284-27553&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    variant: { Type: 'Ordered' },
+    props: { children: figma.children(['_List item']) },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <OrderedList>{children}</OrderedList>
+    ),
+  }
+);

packages/react/code-connect/List/ListItem.figma.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { ListItem } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3284-27542&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    props: {
+      children: figma.string('List text'),
+    },
+    example: ({ children }) => <ListItem>{children}</ListItem>,
+  }
+);

packages/react/code-connect/Loading/Loading.figma.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { Loading, InlineLoading } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Loading,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3238-28455&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    props: {
+      small: figma.enum('Size', {
+        Small: true,
+      }),
+    },
+    example: ({ small }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <Loading withOverlay={false} small={small} />
+    ),
+  }
+);
+
+figma.connect(
+  InlineLoading,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3238-28455&t=Y6lD1uj5Q0yszbgL-4',
+  {
+    variant: { Size: 'Inline' },
+    props: {
+      description: figma.textContent('Loading message'),
+      status: figma.enum('State', {
+        Active: 'active',
+        Error: 'error',
+        Finished: 'finished',
+        Inactive: 'inactive',
+      }),
+    },
+    example: ({ status, description }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <InlineLoading
+        iconDescription="Loading"
+        status={status}
+        description={description}
+      />
+    ),
+  }
+);