feat(design-system): setup Figma Code Connect for ds-alert ds-tree [AR-73524]

packages/design-system/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15271-7357
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerGlobalV1` is the full-width bar pinned to the top of the viewport. It
+// maps to the same `DsAlertBanner` as the inline card but without `inline` (the
+// default `global` layout) and with no title. See `ds-alert-banner.figma.ts` for the
+// inline variant.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'info neutral': 'info-neutral',
+	'info blue': 'info-blue',
+	warning: 'warning',
+	error: 'error',
+	success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'info neutral': 'info',
+	'info blue': 'info',
+	warning: 'warning',
+	error: 'error',
+	success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} variant="${variant}" icon="${icon}"${closableAttr}>
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner-global',
+	metadata: { nestable: false },
+} satisfies figma.Template;

packages/design-system/src/components/ds-alert-banner/ds-alert-banner.figma.ts

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14850-7088
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerInlineV1` is the inline (bordered card) banner that sits in normal
+// document flow. It maps to the controlled `DsAlertBanner` with `inline`. The
+// full-width, top-of-viewport `DsAlertBannerGlobalV1` maps to the same component
+// without `inline` — see `ds-alert-banner-global.figma.ts`.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'Info Neutral': 'info-neutral',
+	'Info Blue': 'info-blue',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'Info Neutral': 'info',
+	'Info Blue': 'info',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showTitle = instance.getBoolean('Show Titles');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const titleLine = showTitle ? `\n\t<DsAlertBanner.Title>Title</DsAlertBanner.Title>` : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} inline variant="${variant}" icon="${icon}"${closableAttr}>${titleLine}
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -0,0 +1,54 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34873-157787
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tree
+// component=DsTree
+//
+// `DsTreeV2` is the collection-driven tree. Figma models the branch/item sub-parts
+// (branch-control, branch-text, item-text, indicators, indent guide) as separate
+// components and exposes `side nav` / `map` / `workflows` preview presets via
+// `Property 1`, but code never hand-assembles those parts: it composes `DsTree.Root`
+// with a `createDsTreeCollection` data source and one recursive `DsTree.NodeProvider`
+// renderer. The snippet is the canonical usage referenced by the Storybook docs.
+import figma from 'figma';
+
+export default {
+	example: figma.code`const collection = createDsTreeCollection([
+	{
+		id: 'network',
+		name: 'Network',
+		children: [
+			{ id: 'routers', name: 'Routers', children: [{ id: 'router-1', name: 'Router Alpha' }] },
+			{ id: 'firewall-1', name: 'Firewall Primary' },
+		],
+	},
+	{ id: 'monitoring', name: 'Monitoring', children: [{ id: 'alerts', name: 'Alerts' }] },
+]);
+
+<DsTree.Root collection={collection} defaultExpandedValue={['network']}>
+	<DsTree.Tree>
+		{collection.rootNode.children?.map((node, index) => (
+			<DsTree.NodeProvider key={node.id} node={node} indexPath={[index]}>
+				{node.children ? (
+					<DsTree.Branch>
+						<DsTree.BranchControl>
+							<DsTree.BranchIndicator />
+							<DsTree.BranchText>{node.name}</DsTree.BranchText>
+						</DsTree.BranchControl>
+						<DsTree.BranchContent>
+							<DsTree.BranchIndentGuide />
+							{/* recurse over node.children with another DsTree.NodeProvider */}
+						</DsTree.BranchContent>
+					</DsTree.Branch>
+				) : (
+					<DsTree.Item>
+						<DsTree.ItemIndicator />
+						<DsTree.ItemText>{node.name}</DsTree.ItemText>
+					</DsTree.Item>
+				)}
+			</DsTree.NodeProvider>
+		))}
+	</DsTree.Tree>
+</DsTree.Root>`,
+	imports: ["import { DsTree, createDsTreeCollection } from '@drivenets/design-system';"],
+	id: 'ds-tree',
+	metadata: { nestable: false },
+} satisfies figma.Template;