feat: add figma code connect

.github/workflows/blade-figma-code-connect.yml

@@ -0,0 +1,14 @@
+name: Blade Figma Code Connect
+
+on:
+  push:
+    paths:
+      - src/components/**/*.figma.tsx
+    branches:
+      - master
+jobs:
+  code-connect:
+    name: Code Connect
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    steps:
+      - run: npx figma connect publish

packages/blade/figma.config.json

@@ -0,0 +1,17 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": ["src/components/**"],
+    "exclude": ["__test__/**", "docs/**", "build/**"],
+    "importPaths": {
+      "src/components/*": "@razorpay/blade/components"
+    },
+    "paths": {
+      "~utils": ["src/utils"],
+      "~utils/*": ["src/utils/*"],
+      "~components/*": ["src/components/*"],
+      "~tokens/*": ["src/tokens/*"],
+      "~src/*": ["src/*"]
+    }
+  }
+}

packages/blade/package.json

@@ -147,7 +147,8 @@
     "@mantine/core": "6.0.21",
     "@mantine/dates": "6.0.21",
     "@mantine/hooks": "6.0.21",
-    "dayjs": "1.11.10"
+    "dayjs": "1.11.10",
+    "@figma/code-connect": "1.0.6"
   },
   "devDependencies": {
     "http-server": "14.1.1",

packages/blade/src/components/Badge/Badge.figma.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Badge } from './Badge';
+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(
+  Badge,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=8110-469&m=dev',
+  {
+    props: {
+      children: figma.string('label'),
+      showLeadingIcon: figma.boolean('showLeadingIcon'),
+      leadingIcon: figma.instance('leadingIcon'),
+      color: figma.enum('color', {
+        Positive: 'positive',
+        Negative: 'negative',
+        Notice: 'notice',
+        Information: 'information',
+        Neutral: 'neutral',
+        Primary: 'primary',
+      }),
+      size: figma.enum('size', {
+        Small: 'small',
+        Medium: 'medium',
+        Large: 'large',
+      }),
+      emphasis: figma.enum('emphasis', {
+        Subtle: 'subtle',
+        Intense: 'intense',
+      }),
+    },
+    example: ({ children, ...props }) => <Badge {...props}>{children}</Badge>,
+  },
+);

packages/blade/src/components/Button/Button/Button.figma.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button } from '../Button';
+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(
+  Button,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=58628-55194&m=dev',
+  {
+    props: {
+      icon: figma.instance('icon'),
+      // TODO: Figure out how to handle iconPosition
+      // trailingIcon: figma.boolean('↩ trailingIcon'),
+      // leadingIcon: figma.boolean('↪ leadingIcon'),
+      children: figma.string('label'),
+      variant: figma.enum('variant', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+      }),
+      color: figma.enum('color', {
+        Primary: 'primary',
+        White: 'white',
+        Positive: 'positive',
+        Negative: 'negative',
+      }),
+      isDisabled: figma.boolean('isDisabled'),
+      isLoading: figma.boolean('isLoading'),
+      size: figma.enum('size', {
+        Large: 'large',
+        Medium: 'medium',
+        Small: 'small',
+        XSmall: 'xsmall',
+      }),
+      isFullWidth: figma.boolean('isFullWidth'),
+    },
+    example: ({ children, ...props }) => <Button {...props}>{children}</Button>,
+  },
+);

packages/blade/src/components/Card/Card.figma.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import figma from '@figma/code-connect';
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardFooterTrailing,
+  CardHeader,
+  CardHeaderCounter,
+  CardHeaderIcon,
+  CardHeaderLeading,
+  CardHeaderTrailing,
+} from '../Card';
+
+/**
+ * -- 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(
+  Card,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=72099-253612&m=dev',
+  {
+    props: {
+      elevation: figma.enum('elevation', {
+        None: undefined,
+        highRaised: 'highRaised',
+        lowRaised: 'lowRaised',
+        midRaised: 'midRaised',
+      }),
+      cardHeader: figma.nestedProps('_Card/Header', {
+        title: figma.textContent('title'),
+        subtitle: figma.textContent('subtitle'),
+      }),
+      cardHeaderLeading: figma.nestedProps('_Card/ Leading Item', {
+        leadingIcon: figma.instance('leadingIcon'),
+      }),
+      cardHeaderTrailing: figma.nestedProps('_Card/Trailing Item', {
+        trailing: figma.instance('trailing'),
+      }),
+      cardFooter: figma.nestedProps('_Card/Footer', {
+        showDivider: figma.boolean('showDivider'),
+      }),
+      cardHeaderCounter: figma.nestedProps('Counter', {
+        color: figma.enum('color', {
+          Primary: 'primary',
+          Neutral: 'neutral',
+          Information: 'information',
+          Notice: 'notice',
+          Positive: 'positive',
+          Negative: 'negative',
+        }),
+        count: figma.string('label'),
+        emphasis: figma.enum('emphasis', {
+          Subtle: 'subtle',
+          Intense: 'intense',
+        }),
+        size: figma.enum('size', {
+          Small: 'small',
+          Medium: 'medium',
+          Large: 'large',
+        }),
+      }),
+    },
+    example: ({
+      elevation,
+      cardHeader,
+      cardHeaderLeading,
+      cardHeaderCounter,
+      cardHeaderTrailing,
+      cardFooter,
+    }) => (
+      <Card elevation={elevation}>
+        <CardHeader>
+          <CardHeaderLeading
+            title={cardHeader.title}
+            subtitle={cardHeader.subtitle}
+            prefix={<CardHeaderIcon icon={cardHeaderLeading.leadingIcon} />}
+            suffix={
+              <CardHeaderCounter
+                color={cardHeaderCounter.color}
+                value={cardHeaderCounter.count}
+                emphasis={cardHeaderCounter.emphasis}
+                size={cardHeaderCounter.size}
+              />
+            }
+          />
+          <CardHeaderTrailing visual={cardHeaderTrailing.trailing} />
+        </CardHeader>
+        <CardBody>{/* Add card body content here */}</CardBody>
+        <CardFooter showDivider={cardFooter.showDivider}>
+          <CardFooterTrailing
+            actions={{
+              primary: {
+                /* Add primary action here */
+                // text:"Hello"
+                // onClick: () => {}
+              },
+              secondary: {
+                /* Add secondary action here */
+                // text:"Hello"
+                // onClick: () => {}
+              },
+            }}
+          />
+        </CardFooter>
+      </Card>
+    ),
+  },
+);

packages/blade/src/components/Checkbox/Checkbox.figma.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Checkbox } from '../Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=71951-34708&m=dev',
+  {
+    props: {
+      helpText: figma.boolean('showHelpText'),
+      children: figma.string('label'),
+      size: figma.enum('size', {
+        Small: 'small',
+        Medium: 'medium',
+        Large: 'large',
+      }),
+      isDisabled: figma.boolean('isDisabled'),
+      isChecked: figma.boolean('isChecked'),
+      isIntermediate: figma.boolean('isIntermediate'),
+      validationState: figma.enum('validationState', {
+        Error: 'error',
+      }),
+      errorText: figma.boolean('errorText'),
+    },
+
+    example: ({ children, errorText, helpText, ...props }) => (
+      <Checkbox
+        {...props}
+        errorText={errorText} // Add error text here
+        helpText={helpText} // Add help text here
+      >
+        {children}
+      </Checkbox>
+    ),
+  },
+);
+
+figma.connect(
+  CheckboxGroup,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=72092-40150&m=dev',
+  {
+    props: {
+      label: figma.boolean('showLabel'),
+      helpText: figma.boolean('helpText'),
+      size: figma.enum('size', {
+        Small: 'small',
+        Medium: 'medium',
+        Large: 'large',
+      }),
+      validationState: figma.enum('validationState', {
+        Error: 'error',
+      }),
+      labelPosition: figma.enum('labelPosition', {
+        Top: 'top',
+        Left: 'left',
+      }),
+    },
+
+    example: ({ helpText, label, ...props }) => (
+      <CheckboxGroup
+        {...props}
+        helpText={helpText} // Add help text here
+        label={label} // Add label here
+      >
+        {/* Add Checkbox components here */}
+      </CheckboxGroup>
+    ),
+  },
+);

packages/blade/src/components/Input/TextInput/TextInput.figma.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput } from './TextInput';
+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(
+  TextInput,
+  'https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=77380-13131&m=dev',
+  {
+    props: {
+      // TODO: Figure out how to handle conditional properties from figma
+      // showLink773806: figma.boolean("showLink"),
+      // showSuffixIcon773803: figma.boolean("showSuffixIcon"),
+      // suffixIcon773800: figma.instance("suffixIcon"),
+      // showPrefixText726611550: figma.boolean('showPrefixText'),
+      // suffixText726611400: figma.string('suffixText'),
+      // prefixIcon726611500: figma.instance('prefixIcon'),
+      // showSuffixText726611450: figma.boolean('showSuffixText'),
+      // showPrefixIcon726611475: figma.boolean('showPrefixIcon'),
+      // prefixText726611525: figma.string('prefixText'),
+      // showLabel726611300: figma.boolean('showLabel'),
+      // showPrefix726611350: figma.boolean('showPrefix'),
+      // showHelpText726611325: figma.boolean('showHelpText'),
+      // showSuffix726611375: figma.boolean('showSuffix'),
+      // prefixText: figma.string('prefixText'),
+      placeholder: figma.string('placeholder'),
+      size: figma.enum('size', {
+        Medium: 'medium',
+        Large: 'large',
+      }),
+      value: figma.string('value'),
+      isDisabled: figma.boolean('isDisabled'),
+      isLoading: figma.boolean('isLoading'),
+      validationState: figma.enum('validationState', {
+        Success: 'success',
+        Error: 'error',
+      }),
+      labelPosition: figma.enum('labelPosition', {
+        Top: 'top',
+        Left: 'left',
+      }),
+    },
+    example: ({ ...props }) => (
+      <TextInput
+        {...props}
+        // prefix=""
+        // errorText=""
+        // helpText=""
+        // successText=""
+        // isRequired={false}
+        // leadingIcon={}
+        // trailingIcon={}
+        /* more props in storybook documentation */
+      />
+    ),
+  },
+);