From f9388b3024ef790b0dbf003147f2323b3336ea94 Mon Sep 17 00:00:00 2001 From: vpolessky Date: Wed, 5 Aug 2026 14:30:21 +0200 Subject: [PATCH] feat(design-system): setup figma code connect for ds-comments [AR-73522] --- .../ds-comment-bubble.figma.ts | 53 +++++++++++++++++++ .../ds-comment-card/ds-comment-card.figma.ts | 38 +++++++++++++ .../ds-comment-indicator.figma.ts | 32 +++++++++++ .../ds-comments-drawer.figma.ts | 19 +++++++ 4 files changed, 142 insertions(+) create mode 100644 packages/design-system/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts create mode 100644 packages/design-system/src/components/ds-comment-card/ds-comment-card.figma.ts create mode 100644 packages/design-system/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts create mode 100644 packages/design-system/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts diff --git a/packages/design-system/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts b/packages/design-system/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts new file mode 100644 index 000000000..c5ca1dbff --- /dev/null +++ b/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`` + : figma.code``, + imports: ["import { DsCommentBubble } from '@drivenets/design-system';"], + id: 'ds-comment-bubble', + metadata: { nestable: true }, +} satisfies figma.Template; diff --git a/packages/design-system/src/components/ds-comment-card/ds-comment-card.figma.ts b/packages/design-system/src/components/ds-comment-card/ds-comment-card.figma.ts new file mode 100644 index 000000000..11046a0d0 --- /dev/null +++ b/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``, + imports: ["import { DsCommentCard } from '@drivenets/design-system';"], + id: 'ds-comment-card', + metadata: { nestable: true }, +} satisfies figma.Template; diff --git a/packages/design-system/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts b/packages/design-system/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts new file mode 100644 index 000000000..7d7e7e72f --- /dev/null +++ b/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` {}} />` + : figma.code` {}} />`, + imports: ["import { DsCommentIndicator } from '@drivenets/design-system';"], + id: 'ds-comment-indicator', + metadata: { nestable: true }, +} satisfies figma.Template; diff --git a/packages/design-system/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts b/packages/design-system/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts new file mode 100644 index 000000000..c25b42df9 --- /dev/null +++ b/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` {}} />`, + imports: ["import { DsCommentsDrawer } from '@drivenets/design-system';"], + id: 'ds-comments-drawer', + metadata: { nestable: false }, +} satisfies figma.Template;