feat: add Figma Code Connect POC for DsButtonV3 and DsSplitButton

figma.config.json

@@ -0,0 +1,7 @@
+{
+	"codeConnect": {
+		"include": ["packages/design-system/src/**/*.figma.ts"],
+		"label": "React",
+		"language": "jsx"
+	}
+}

package.json

@@ -41,6 +41,7 @@
 		"@drivenets/commitlint-plugin-internal": "workspace:*",
 		"@eslint/core": "catalog:",
 		"@eslint/js": "^10.0.1",
+		"@figma/code-connect": "^1.4.7",
 		"@types/node": "^25.9.1",
 		"@typescript/native-preview": "catalog:",
 		"@vitest/eslint-plugin": "^1.6.19",

packages/design-system/src/components/ds-button-v3/ds-button-v3.figma.ts

@@ -0,0 +1,61 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31065-2352
+// source=packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx
+// component=DsButtonV3
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Variant', {
+	primary: 'primary',
+	secondary: 'secondary',
+	tertiary: 'tertiary',
+});
+
+const color = instance.getEnum('Color', {
+	default: 'default',
+	error: 'error',
+});
+
+const isLight = instance.getBoolean('light');
+
+const size = instance.getEnum('Size', {
+	large: 'large',
+	medium: 'medium',
+	small: 'small',
+	tiny: 'tiny',
+});
+
+const isDisabled = instance.getBoolean('State', { disabled: true });
+const isSelected = instance.getBoolean('State', { selected: true });
+
+export default isLight
+	? {
+			example: figma.code`
+    <DsButtonV3
+      variant={${variant}}
+      color="light"
+      size={${size}}
+      disabled={${isDisabled}}
+      selected={${isSelected}}
+    >
+      Label
+    </DsButtonV3>
+  `,
+			imports: ['import { DsButtonV3 } from "@drivenets/design-system"'],
+			id: 'ds-button-v3',
+		}
+	: {
+			example: figma.code`
+    <DsButtonV3
+      variant={${variant}}
+      color={${color}}
+      size={${size}}
+      disabled={${isDisabled}}
+      selected={${isSelected}}
+    >
+      Label
+    </DsButtonV3>
+  `,
+			imports: ['import { DsButtonV3 } from "@drivenets/design-system"'],
+			id: 'ds-button-v3',
+		};

packages/design-system/src/components/ds-split-button/ds-split-button.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32830-9950
+// source=packages/design-system/src/components/ds-split-button/ds-split-button.tsx
+// component=DsSplitButton
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const isDisabled = instance.getBoolean('state', { disabled: true });
+
+export default {
+	example: figma.code`
+    <DsSplitButton
+      size="medium"
+      disabled={${isDisabled}}
+      slotProps={{
+        button: { children: 'Action' },
+        select: { items: [...] },
+      }}
+    />
+  `,
+	imports: ['import { DsSplitButton } from "@drivenets/design-system"'],
+	id: 'ds-split-button',
+};

packages/design-system/tsconfig.json

@@ -2,7 +2,7 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDirs": ["./", "./.scss-dts"],
-		"types": ["vite/client"],
+		"types": ["vite/client", "@figma/code-connect/figma-types"],
 		"plugins": [{ "name": "typescript-plugin-css-modules" }]
 	},
 	"include": ["**/*", ".storybook/**/*"]