Poc/code connect

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 yarn-error.log
+
+# Environment variables
+.env

packages/eui/.storybook/main.ts

@@ -30,6 +30,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/addon-designs',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -50,6 +51,15 @@ const config: StorybookConfig = {
       ...config,
       resolve: {
         ...config.resolve,
+        fallback: {
+          ...config.resolve?.fallback,
+          console: false, // used by @figma/code-connect
+          child_process: false, // used by @figma/code-connect
+          os: false, // used by dotenv
+          // not necessary for the browser environment (Storybook), therefore doesn't need a polyfill;
+          // the change is required only for the purposes of Code Connect investigation, otherwise
+          // Webpack gets confused; likely this won't get merged
+        },
         alias: {
           ...config.resolve?.alias,
           // we need to resolve to the modules file as otherwise

packages/eui/figma.config.json

@@ -0,0 +1,12 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": ["/**/*.{tsx,jsx}"],
+    "importPaths": {
+      "src/components/*": "@elastic/eui"
+    },
+    "documentUrlSubstitutions": {
+      "node-id": "https://www.figma.com/design/RzfYLj2xmH9K7gQtbSKygn/Elastic-UI?node-id"
+    }
+  }
+}

packages/eui/package.json

@@ -44,7 +44,8 @@
     "release-rc": "node ./scripts/release.js --type=prerelease",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "pre-push": "yarn test-staged"
+    "pre-push": "yarn test-staged",
+    "figma": "dotenv -- figma connect"
   },
   "repository": {
     "type": "git",
@@ -110,9 +111,11 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
+    "@figma/code-connect": "^1.1.4",
     "@loki/create-async-callback": "^0.35.0",
     "@loki/is-loki-running": "^0.35.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
     "@storybook/addon-links": "^8.0.5",
@@ -174,6 +177,7 @@
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
     "dedent": "^0.7.0",
+    "dotenv-cli": "^7.4.2",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",

packages/eui/src/components/badge/badge.figma.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// eslint-disable-next-line
+// @ts-nocheck
+
+/**
+ * `iconType` expects an enum member, a string or ComponentType
+ * `iconSide` expects "left" or "right" or undefined
+ *
+ * I cannot use `as const` to narrow down the type because the value is serialized, so the code snippet would be
+ * `iconSide={'left' as const}`
+ *
+ * figma.instance returns a a JSX.Element, not ComponentType or string. The code is not executed so it doesn't matter.
+ *
+ * `props` must be an object literal so we cannot use assertion there either.
+ */
+
+import React from 'react';
+import figma from '@figma/code-connect';
+
+import { EuiBadge } from './badge';
+
+figma.connect(EuiBadge, 'node-id=31918-390303', {
+  props: {
+    children: figma.boolean('Icon only', {
+      true: undefined,
+      false: figma.string('Text'),
+    }),
+    color: figma.enum('Color', {
+      Default: undefined,
+      Hollow: 'hollow',
+      Primary: 'primary',
+      Accent: 'accent',
+      Success: 'success',
+      Danger: 'danger',
+      Warning: 'warning',
+    }),
+    isDisabled: figma.boolean('Disabled'),
+    iconType: figma.boolean('Icon only', {
+      true: figma.instance('⮑ Icon'),
+      false: figma.boolean('Icon left', {
+        true: figma.instance('⮑ Icon left'),
+        false: figma.boolean('Icon right', {
+          true: figma.instance('⮑ Icon right'),
+          false: undefined,
+        }),
+      }),
+    }),
+    iconSide: figma.boolean('Icon left', {
+      true: 'left',
+      false: figma.boolean('Icon right', {
+        true: 'right',
+        false: undefined,
+      }),
+    }),
+  },
+  example: ({ children, ...props }) => (
+    <EuiBadge {...props}>{children}</EuiBadge>
+  ),
+});

packages/eui/src/components/badge/badge.stories.tsx

@@ -6,25 +6,12 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
+import figma from '@figma/code-connect';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiBadge, EuiBadgeProps, COLORS } from './badge';
 
-const meta: Meta<EuiBadgeProps> = {
-  title: 'Display/EuiBadge/EuiBadge',
-  component: EuiBadge,
-  argTypes: {
-    iconType: { control: 'text' },
-  },
-  args: {
-    // Component defaults
-    iconSide: 'left',
-    isDisabled: false,
-    color: 'default',
-  },
-};
-
-export default meta;
 type Story = StoryObj<EuiBadgeProps>;
 
 export const Playground: Story = {
@@ -37,6 +24,9 @@ export const Playground: Story = {
       options: COLORS,
     },
   },
+  render: ({ children, ...args }: EuiBadgeProps) => (
+    <EuiBadge {...args}>{children}</EuiBadge>
+  ),
 };
 
 export const CustomColors: Story = {
@@ -50,3 +40,59 @@ export const CustomColors: Story = {
     color: '#0000FF',
   },
 };
+
+const meta: Meta<EuiBadgeProps> = {
+  title: 'Display/EuiBadge/EuiBadge',
+  component: EuiBadge,
+  argTypes: {
+    iconType: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    iconSide: 'left',
+    isDisabled: false,
+    color: 'default',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/RzfYLj2xmH9K7gQtbSKygn/Elastic-UI?node-id=31918-390303&node-type=frame&m=dev',
+      examples: [Playground],
+      props: {
+        children: figma.boolean('Icon only', {
+          true: undefined,
+          false: figma.string('Text'),
+        }),
+        color: figma.enum('Color', {
+          Default: undefined,
+          Hollow: 'hollow',
+          Primary: 'primary',
+          Accent: 'accent',
+          Success: 'success',
+          Danger: 'danger',
+          Warning: 'warning',
+        }),
+        isDisabled: figma.boolean('Disabled'),
+        iconType: figma.boolean('Icon only', {
+          true: figma.instance('⮑ Icon'),
+          false: figma.boolean('Icon left', {
+            true: figma.instance('⮑ Icon left'),
+            false: figma.boolean('Icon right', {
+              true: figma.instance('⮑ Icon right'),
+              false: undefined,
+            }),
+          }),
+        }),
+        iconSide: figma.boolean('Icon left', {
+          true: 'left',
+          false: figma.boolean('Icon right', {
+            true: 'right',
+            false: undefined,
+          }),
+        }),
+      },
+    },
+  },
+};
+
+export default meta;

packages/eui/src/components/button/button.figma.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// eslint-disable-next-line
+// @ts-nocheck
+
+/**
+ * `iconType` expects an enum member, a string or ComponentType
+ * `iconSide` expects "left" or "right" or undefined
+ *
+ * I cannot use `as const` to narrow down the type below because the value is serialized,
+ * so the code snippet would be `iconSide={'left' as const}`,
+ * and figma.instance is a JSX.Element, not ComponentType or string but it's a conflict between
+ * Code Connect API and the icon implementation (it's not render props pattern). I don't think there's an alternative,
+ * at the same time it doesn't matter much because Figma files are not executed, they're parsed as string.
+ */
+
+import React from 'react';
+import figma from '@figma/code-connect';
+
+import { EuiButton } from './button';
+import { EuiButtonEmpty } from './button_empty';
+
+/* Example: reusing the same props across multiple component connections */
+const sharedProps = {
+  children: figma.boolean('Icon only', {
+    true: undefined,
+    false: figma.textContent('Text'),
+  }),
+  color: figma.enum('Color', {
+    'Primary*': undefined,
+    Neutral: 'text',
+    Success: 'success',
+    Warning: 'warning',
+    Danger: 'danger',
+    Accent: 'accent',
+  }),
+  isDisabled: figma.boolean('Disabled'),
+  isLoading: figma.boolean('Loading'),
+  iconType: figma.boolean('Icon only', {
+    true: figma.instance('⮑ Icon'),
+    false: figma.boolean('Icon left', {
+      true: figma.instance('⮑ Icon left'),
+      false: figma.boolean('Icon right', {
+        true: figma.instance('⮑ Icon right'),
+        false: undefined,
+      }),
+    }),
+  }),
+  iconSide: figma.boolean('Icon left', {
+    true: 'left',
+    false: figma.boolean('Icon right', {
+      true: 'right',
+      false: figma.boolean('Loading', {
+        true: figma.boolean('Left spinner', {
+          true: 'left',
+          false: figma.boolean('Right spinner', {
+            true: 'right',
+            false: undefined,
+          }),
+        }),
+        false: undefined,
+      }),
+    }),
+  }),
+  size: figma.enum('Size', {
+    'Medium*': undefined,
+    Small: 's',
+    // Discrepancy between Figma and EUI
+    // 'Extra Small': 'extra-small',
+  }),
+};
+
+/* Basic example */
+figma.connect(EuiButton, 'node-id=31735-391399', {
+  props: {
+    ...sharedProps,
+    fill: figma.enum('Style', {
+      'Default*': undefined,
+      Filled: true,
+    }),
+  },
+  example: ({ children, ...props }) => (
+    <EuiButton onClick={() => {}} {...props}>
+      {children}
+    </EuiButton>
+  ),
+});
+
+/* Example: Self-closing tags example (doesn't work, error: The Figma Variant "Icon only" does not have an option for true) */
+/* figma.connect(EuiButton, 'node-id=31735-391399', {
+  variant: { 'Icon only': true },
+  props: sharedProps,
+  example: (props) => (
+    <EuiButton aria-label="Meaningful label" onClick={() => {}} {...props} />
+  ),
+}); */
+
+/* Example: Figma variant being a separate component in code */
+figma.connect(EuiButtonEmpty, 'node-id=31735-391399', {
+  variant: { Style: 'Empty' },
+  props: sharedProps,
+  example: ({ children, ...props }) => (
+    <EuiButtonEmpty onClick={() => {}} {...props}>
+      {children}
+    </EuiButtonEmpty>
+  ),
+});