feat(design-system): setup figma code connect for ds-comments [AR-73522]

packages/design-system/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=27305-30079
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-bubble
+// component=DsCommentBubble
+//
+// `DAP_comment bubble` is the floating comment bubble. Its Figma `type` axis
+// (`start typing` vs a populated thread) selects between the empty compose state and
+// a thread; in code this is driven by whether the `comment` prop is present, so the
+// snippet emits `comment` / `currentUser` identifier placeholders for the developer to
+// wire to state. The `action required` axis maps to `hideActionRequired` (the
+// `no checkbox` variant hides the control); `State` is visual only and has no prop.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const bubbleType =
+	instance.getEnum('type', {
+		'start typing': 'compose',
+		typing: 'compose',
+		'with comments': 'thread',
+		comment: 'thread',
+		comments: 'thread',
+	}) ?? 'compose';
+
+const hideActionRequired =
+	instance.getEnum('action required', {
+		'no checkbox': true,
+		checkbox: false,
+	}) ?? false;
+
+const hideActionRequiredAttr = hideActionRequired ? '\n\thideActionRequired' : '';
+
+export default {
+	example:
+		bubbleType === 'thread'
+			? figma.code`<DsCommentBubble
+	comment={comment}
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`
+			: figma.code`<DsCommentBubble
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`,
+	imports: ["import { DsCommentBubble } from '@drivenets/design-system';"],
+	id: 'ds-comment-bubble',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=18946-29117
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-card
+// component=DsCommentCard
+//
+// `CommentCardV1` composes the inner `Structure_CommentCardV1`. Its `overflow` axis
+// maps directly to the `overflow` prop. The `type` axis is interaction state
+// (default/hover/focus are visual and CSS-driven — only `disabled` maps to a prop),
+// mirroring `ds-card.figma.ts`. The `action required` axis is encoded in the `comment`
+// data (`isActionRequired`), not a prop. `comment` is a data object that is not
+// derivable from Figma, so it is emitted as an identifier placeholder for the
+// developer to wire (see `ds-smart-tabs.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state =
+	instance.getEnum('type', {
+		default: 'default',
+		hover: 'default',
+		focus: 'default',
+		pressed: 'default',
+		disabled: 'disabled',
+	}) ?? 'default';
+
+const overflow =
+	instance.getEnum('overflow', {
+		hidden: 'hidden',
+		displayed: 'displayed',
+	}) ?? 'hidden';
+
+const disabledAttr = state === 'disabled' ? ' disabled' : '';
+
+export default {
+	example: figma.code`<DsCommentCard comment={comment} overflow="${overflow}"${disabledAttr} />`,
+	imports: ["import { DsCommentCard } from '@drivenets/design-system';"],
+	id: 'ds-comment-card',
+	metadata: { nestable: true },
+} satisfies figma.Template;

packages/design-system/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19208-6889
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-indicator
+// component=DsCommentIndicator
+//
+// The linked node is `Structure_CommentIndicatorV1`, the inner structure shared by the
+// indicator variants. The `type` axis (placeholder / default / action-required) maps
+// directly to the `type` prop; on the bare structure node it has no value, so it falls
+// back to `default`. For the `placeholder` state no avatar is shown; the `default` /
+// `action-required` states carry the initiator's avatar. `avatarSrc` is a photo URL
+// and `avatarName` is content — neither is derivable from Figma — so `avatarName` is
+// emitted as a placeholder for the developer to fill in (see `ds-avatar.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type =
+	instance.getEnum('type', {
+		placeholder: 'placeholder',
+		default: 'default',
+		'action-required': 'action-required',
+		'action required': 'action-required',
+	}) ?? 'default';
+
+export default {
+	example:
+		type === 'placeholder'
+			? figma.code`<DsCommentIndicator type="placeholder" onClick={() => {}} />`
+			: figma.code`<DsCommentIndicator type="${type}" avatarName="Full Name" onClick={() => {}} />`,
+	imports: ["import { DsCommentIndicator } from '@drivenets/design-system';"],
+	id: 'ds-comment-indicator',
+	metadata: { nestable: true },
+} satisfies figma.Template;

packages/design-system/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19346-10511
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comments-drawer
+// component=DsCommentsDrawer
+//
+// `DsCommentsDrawerV1` is the comments side panel. Unlike `ds-drawer` / `ds-modal` it
+// does not compose its children through slots: the toolbar, search, and the comment
+// list are all internal, and the cards are rendered from the `comments` data array.
+// There is therefore nothing to resolve via `executeTemplate` — the snippet emits
+// `comments` / `onOpenChange` identifier placeholders for the developer to wire to
+// state. The Figma `Type` axis (`Default` / `Regular`) has no `DsCommentsDrawer` prop
+// equivalent — both render the same composition.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsCommentsDrawer open comments={comments} onOpenChange={() => {}} />`,
+	imports: ["import { DsCommentsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-comments-drawer',
+	metadata: { nestable: false },
+} satisfies figma.Template;