chore(design-system): add figma.Template type [AR-72145]

knip.json

@@ -1,10 +1,11 @@
 {
 	"$schema": "https://unpkg.com/knip@5/schema.json",
 	"ignore": [
-		"**/*.figma.ts",
-		"**/*.figma.batch.ts",
-		"**/*.scss",
-		"**/simple-file-upload-adapter.ts",
+		"./packages/design-system/**/*.scss",
+		"./packages/design-system/**/*.figma.ts",
+		"./packages/design-system/**/*.figma.batch.ts",
+		"./packages/design-system/types/**/figma.d.ts",
+		"./packages/design-system/src/components/ds-file-upload/stories/adapters/simple-file-upload-adapter.ts",
 		"./packages/eslint-plugin-internal/src/rules/__tests__/fixtures/*.ts"
 	],
 	"ignoreExportsUsedInFile": {

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

@@ -93,7 +93,7 @@ export default {
 		: showIcon && icon
 			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''} icon="${icon}">${label}</DsButtonV3>`
 			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}>${label}</DsButtonV3>`,
-	imports: ["import { DsButtonV3 } from '@drivenets/design-system'"],
+	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
 	id: 'ds-button-v3',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-card/figma/ds-card-content.figma.ts

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Body>Card content</DsCard.Body>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-card/figma/ds-card-footer.figma.ts

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Footer>Card footer</DsCard.Footer>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-card/figma/ds-card-header.figma.ts

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Header>Card title</DsCard.Header>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-card/figma/ds-card.figma.ts

@@ -66,7 +66,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsCard.Root size="${size}"${flagsAttr}>${headerCode}${contentCode}${footerCode}</DsCard.Root>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-date-picker/ds-date-picker.figma.ts

@@ -13,7 +13,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsDatePicker value={value} onChange={setValue} withTime placeholder="mm/dd/yyyy, hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsDatePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsDatePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-date-picker',
 	metadata: { nestable: true, props: { fcMember: 'DatePicker', fcProps: '' } },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-form-control/ds-form-control.figma.ts

@@ -70,7 +70,7 @@ const formControlAttrs = [labelAttr, requiredAttr, hideLabelAttr, statusAttr, me
 
 export default {
 	example: figma.code`<DsFormControl ${formControlAttrs}>${description}${child}</DsFormControl>`,
-	imports: ["import { DsFormControl } from '@drivenets/design-system'"],
+	imports: ["import { DsFormControl } from '@drivenets/design-system';"],
 	id: 'ds-form-control',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-icon/figma/ds-icon-material.figma.batch.ts

@@ -4,7 +4,7 @@ const batch = figma.batch as { icon: string; filled: boolean; id: string };
 
 export default {
 	example: figma.code`<DsIcon icon="${batch.icon}"${batch.filled ? ' filled' : ''} />`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon: batch.icon } },
 };

packages/design-system/src/components/ds-icon/figma/ds-icon-special.figma.batch.ts

@@ -12,7 +12,7 @@ export default {
 	example: icon
 		? figma.code`<DsIcon icon="${icon}" />`
 		: figma.code`{/* This icon is not available in @drivenets/design-system */}`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon } },
 };

packages/design-system/src/components/ds-modal/figma/ds-modal-content.figma.ts

@@ -12,7 +12,7 @@ const content = instance.getSlot('Modal content slot');
 
 export default {
 	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-modal/figma/ds-modal-footer.figma.ts

@@ -13,7 +13,7 @@ const rightButtons = instance.getSlot('right side buttons');
 
 export default {
 	example: figma.code`<DsModal.Footer><DsModal.Actions>${rightButtons}</DsModal.Actions></DsModal.Footer>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-modal/figma/ds-modal-header.figma.ts

@@ -15,7 +15,7 @@ const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Modal title';
 
 export default {
 	example: figma.code`<DsModal.Header><DsModal.Title>${title}</DsModal.Title><DsModal.CloseTrigger /></DsModal.Header>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-modal/figma/ds-modal.figma.ts

@@ -30,7 +30,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-select/ds-select.figma.ts

@@ -47,7 +47,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsSelect ${attrs} />`,
-	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	imports: ["import { DsSelect } from '@drivenets/design-system';"],
 	id: 'ds-select',
 	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
-};
+} satisfies figma.Template;

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

@@ -89,7 +89,7 @@ const buttonProps = [
 
 export default {
 	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
-	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	imports: ["import { DsSplitButton } from '@drivenets/design-system';"],
 	id: 'ds-split-button',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-status-badge-v2/ds-status-badge-v2.figma.ts

@@ -35,7 +35,7 @@ export default {
 			: structure === 'text-only'
 				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
 				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
-	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system';"],
 	id: 'ds-status-badge-v2',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-table/figma/ds-table-expandable.figma.ts

@@ -11,7 +11,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} expandable renderExpandedRow={(row) => null} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table-expandable',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-table/figma/ds-table.figma.ts

@@ -10,7 +10,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-text-input/ds-text-input.figma.ts

@@ -54,7 +54,7 @@ export default {
 			: type === 'password'
 				? figma.code`<DsPasswordInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
 				: figma.code`<DsTextInput ${sizeAttr} ${disabled ? 'disabled' : ''} ${readOnly ? 'readOnly' : ''} />`,
-	imports: [`import { ${componentName} } from '@drivenets/design-system'`],
+	imports: [`import { ${componentName} } from '@drivenets/design-system';`],
 	id: 'ds-text-input',
 	metadata: { nestable: true, props: { fcMember, fcProps } },
-};
+} satisfies figma.Template;

packages/design-system/src/components/ds-time-picker/ds-time-picker.figma.ts

@@ -12,7 +12,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsTimePicker value={value} onChange={setValue} placeholder="hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsTimePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsTimePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-time-picker',
 	metadata: { nestable: true, props: { fcMember: 'TimePicker', fcProps: '' } },
-};
+} satisfies figma.Template;

packages/design-system/tsconfig.json

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

packages/design-system/types/figma.d.ts

@@ -0,0 +1,18 @@
+import type figma from 'figma';
+
+// Internal type for Figma Code Connect templates.
+// Temporary solution until https://github.com/figma/code-connect/issues/403 is resolved.
+declare module 'figma' {
+	export interface Template {
+		id: Id;
+		imports: [DsImport, ...AnyImport[]];
+		example: figma.TemplateStringResult;
+		metadata?: Omit<figma.TemplateMetadata, '__props'>;
+	}
+
+	type Id = `ds-${string}`;
+
+	type DsImport = `import { ${string} } from '@drivenets/design-system';`;
+
+	type AnyImport = `import ${string} from '${string}';`;
+}