@drivenets/design-system 0.15.0 → 0.16.0

package/src/components/ds-popover/ds-popover.tsx

@@ -146,6 +146,15 @@ const DsPopoverLegacy = ({
 	</DsPopoverRoot>
 );
 
+DsPopoverLegacy.displayName = 'DsPopover';
+DsPopoverRoot.displayName = 'DsPopover.Root';
+DsPopoverTrigger.displayName = 'DsPopover.Trigger';
+DsPopoverPanel.displayName = 'DsPopover.Panel';
+DsPopoverHeader.displayName = 'DsPopover.Header';
+DsPopoverContent.displayName = 'DsPopover.Content';
+DsPopoverContentItem.displayName = 'DsPopover.ContentItem';
+DsPopoverFooter.displayName = 'DsPopover.Footer';
+
 export const DsPopover = Object.assign(DsPopoverLegacy, {
 	Root: DsPopoverRoot,
 	Trigger: DsPopoverTrigger,

package/src/components/ds-popover/figma/ds-popover-content-item.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84870
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.ContentItem
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const headlineNode = instance.findText('Content-item-headline', { traverseInstances: true });
+const headlineAttr = headlineNode.type === 'TEXT' ? ` headline="${headlineNode.textContent}"` : '';
+
+const body = instance.getSlot('Slot');
+
+export default {
+	example: figma.code`<DsPopover.ContentItem${headlineAttr}>${body}</DsPopover.ContentItem>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-content-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-content.figma.ts

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84883
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Content
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const items = instance.getSlot('Slot');
+
+export default {
+	example: figma.code`<DsPopover.Content>${items}</DsPopover.Content>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-content',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-footer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84845
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Footer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+let buttonCode: figma.ResultSection[] | undefined;
+if (button.type === 'INSTANCE') {
+	buttonCode = button.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsPopover.Footer>${buttonCode}</DsPopover.Footer>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-footer',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-header.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-11066
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Header
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('Title', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Popover title';
+
+export default {
+	example: figma.code`<DsPopover.Header>${title}</DsPopover.Header>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-header',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover.figma.ts

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84942
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_popover-header_v01', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_popover-content_v01', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+const footer = instance.findInstance('DAP_popover-footer_v01', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsPopover.Root>
+	<DsPopover.Trigger>{/* trigger element */}</DsPopover.Trigger>
+	<DsPopover.Panel>${headerCode}${contentCode}${footerCode}</DsPopover.Panel>
+</DsPopover.Root>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-arc/ds-progress-arc.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-8747
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-arc
+// component=DsProgressArc
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	small: 'small',
+	medium: 'medium',
+});
+const variant = instance.getEnum('State', {
+	fill: 'default',
+	success: 'success',
+	error: 'error',
+});
+
+export default {
+	example: figma.code`<DsProgressArc variant="${variant}" size="${size}" value={0} />`,
+	imports: ["import { DsProgressArc } from '@drivenets/design-system'"],
+	id: 'ds-progress-arc',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-arc/ds-progress-arc.tsx

@@ -108,4 +108,6 @@ const DsProgressArc = ({
 	);
 };
 
+DsProgressArc.displayName = 'DsProgressArc';
+
 export default DsProgressArc;

package/src/components/ds-progress-donut/ds-progress-donut.figma.ts

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-8570
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-donut
+// component=DsProgressDonut
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	small: 'small',
+	medium: 'medium',
+});
+const variant = instance.getEnum('Status', {
+	'fill 10%': 'default',
+	'fill 20%': 'default',
+	'fill 30%': 'default',
+	'fill 40%': 'default',
+	'fill 50%': 'default',
+	'fill 60%': 'default',
+	'fill 70%': 'default',
+	'fill 80%': 'default',
+	'fill 90%': 'default',
+	Success: 'success',
+	success: 'success',
+	error: 'error',
+	failed: 'error',
+});
+const value = instance.getEnum('Status', {
+	'fill 10%': 10,
+	'fill 20%': 20,
+	'fill 30%': 30,
+	'fill 40%': 40,
+	'fill 50%': 50,
+	'fill 60%': 60,
+	'fill 70%': 70,
+	'fill 80%': 80,
+	'fill 90%': 90,
+});
+const valueProp = typeof value === 'number' ? ` value={${String(value)}}` : '';
+
+export default {
+	example: figma.code`<DsProgressDonut variant="${variant}" size="${size}"${valueProp} />`,
+	imports: ["import { DsProgressDonut } from '@drivenets/design-system'"],
+	id: 'ds-progress-donut',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-donut/ds-progress-donut.tsx

@@ -80,4 +80,6 @@ const DsProgressDonut = ({
 	);
 };
 
+DsProgressDonut.displayName = 'DsProgressDonut';
+
 export default DsProgressDonut;

package/src/components/ds-progress-linear/ds-progress-linear.figma.ts

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-12155
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-linear
+// component=DsProgressLinear
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	Small: 'small',
+	Medium: 'medium',
+	Large: 'large',
+});
+const variant = instance.getEnum('Type', {
+	initial: 'initial',
+	progress: 'progress',
+	interrupted: 'interrupted',
+	success: 'success',
+	error: 'error',
+});
+
+export default {
+	example: figma.code`<DsProgressLinear variant="${variant}" size="${size}" value={0} />`,
+	imports: ["import { DsProgressLinear } from '@drivenets/design-system'"],
+	id: 'ds-progress-linear',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-linear/ds-progress-linear.tsx

@@ -104,4 +104,6 @@ const DsProgressLinear = ({
 	);
 };
 
+DsProgressLinear.displayName = 'DsProgressLinear';
+
 export default DsProgressLinear;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.tsx

@@ -119,4 +119,6 @@ const DsProgressTaskBar = ({
 	);
 };
 
+DsProgressTaskBar.displayName = 'DsProgressTaskBar';
+
 export default DsProgressTaskBar;

package/src/components/ds-radio-group/ds-radio-group.tsx

@@ -122,3 +122,6 @@ export const DsRadioGroup = {
 	Root,
 	Item,
 };
+DsRadioGroup.Root.displayName = 'DsRadioGroup.Root';
+DsRadioGroup.Item.displayName = 'DsRadioGroup.Item';
+DsRadioGroupLegacy.displayName = 'DsRadioGroupLegacy';

package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32934-446
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsRadioGroup.Item ${attrs} />`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	id: 'ds-radio-group-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-radio-group/figma/ds-radio-group.figma.ts

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34864-124515
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Root
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsRadioGroup.Root>
+	<DsRadioGroup.Item value="option-1" label="Option 1" />
+	<DsRadioGroup.Item value="option-2" label="Option 2" />
+</DsRadioGroup.Root>`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	id: 'ds-radio-group',
+	metadata: { nestable: false },
+};

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -74,3 +74,6 @@ export const DsSegmentGroup = {
 	Item,
 	ItemText,
 };
+DsSegmentGroup.Root.displayName = 'DsSegmentGroup.Root';
+DsSegmentGroup.Item.displayName = 'DsSegmentGroup.Item';
+DsSegmentGroup.ItemText.displayName = 'DsSegmentGroup.ItemText';

package/src/components/ds-segment-group/figma/ds-segment-group-item.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-6249
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Pressed: 'pressed',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSegmentGroup.Item ${attrs} />`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	id: 'ds-segment-group-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-segment-group/figma/ds-segment-group.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-8569
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Root
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	medium: 'medium',
+	small: 'small',
+});
+
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+export default {
+	example: figma.code`<DsSegmentGroup.Root${sizeAttr}>
+	<DsSegmentGroup.Item value="option-1" label="Option 1" />
+	<DsSegmentGroup.Item value="option-2" label="Option 2" />
+</DsSegmentGroup.Root>`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	id: 'ds-segment-group',
+	metadata: { nestable: false },
+};

package/src/components/ds-select/ds-select.tsx

@@ -271,4 +271,6 @@ function getItemCheckedState({
 	return someSelected ? 'indeterminate' : false;
 }
 
+DsSelect.displayName = 'DsSelect';
+
 export default DsSelect;

package/src/components/ds-site-node/ds-site-node.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39525-181
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-site-node
+// component=DsSiteNode
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Selected: 'selected',
+	Muted: 'muted',
+	Overflow: 'overflow',
+});
+
+const tier = instance.getString('Tier');
+const siteCode = instance.getString('Site code');
+const overflowLabel = instance.getString('Overflow label');
+
+export default {
+	example:
+		state === 'overflow'
+			? figma.code`<DsSiteNode state="${state}" overflowLabel="${overflowLabel}" />`
+			: figma.code`<DsSiteNode state="${state}" tier="${tier}" siteCode="${siteCode}" />`,
+	imports: ["import { DsSiteNode } from '@drivenets/design-system'"],
+	id: 'ds-site-node',
+	metadata: { nestable: true },
+};

package/src/components/ds-site-node/ds-site-node.module.scss

@@ -0,0 +1,59 @@
+$node-width: 140px;
+$node-radius: 8px;
+$overflow-height: 70px;
+
+.node {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	width: $node-width;
+	padding: var(--sm);
+	gap: var(--2xs);
+	overflow: clip;
+	border: 1px solid var(--border-secondary);
+	border-radius: $node-radius;
+	background: var(--background);
+	font-family: var(--font-family-base);
+	cursor: pointer;
+	appearance: none;
+
+	&:focus-visible {
+		outline: 2px solid var(--outline-moderate);
+		outline-offset: 2px;
+	}
+}
+
+.selected {
+	border-color: var(--outline-moderate);
+	background: var(--background-info);
+	box-shadow: inset 0 0 0 1px var(--outline-moderate);
+}
+
+.overflow {
+	min-height: $overflow-height;
+	gap: 0;
+	border: 1px dashed var(--border-disabled);
+	background: var(--background-secondary-selected-weak);
+}
+
+.pill {
+	padding: var(--4xs) var(--xs);
+	overflow: clip;
+	border-radius: 9999px;
+	background: var(--background-primary);
+}
+
+.pillMuted {
+	background: var(--background-tertiary-selected-weak);
+}
+
+.siteCode {
+	display: block;
+	align-self: stretch;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/components/ds-site-node/ds-site-node.tsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import type { DsSiteNodeProps } from './ds-site-node.types';
+import { useIsOverflowing } from './hooks/use-is-overflowing';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-site-node.module.scss';
+
+const DsSiteNode = ({
+	ref,
+	state = 'default',
+	tier,
+	siteCode,
+	overflowLabel,
+	className,
+	style,
+	'aria-label': ariaLabel,
+	onClick,
+}: DsSiteNodeProps) => {
+	const isOverflow = state === 'overflow';
+	const isSelected = state === 'selected';
+	const isMuted = state === 'muted';
+
+	const { ref: siteCodeRef, isOverflowing } = useIsOverflowing<HTMLSpanElement>(siteCode);
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(
+				styles.node,
+				{
+					[styles.selected]: isSelected,
+					[styles.overflow]: isOverflow,
+				},
+				className,
+			)}
+			style={style}
+			aria-label={ariaLabel}
+			aria-current={isSelected ? true : undefined}
+			onClick={onClick}
+		>
+			{isOverflow ? (
+				<DsTypography variant="body-sm-reg" color="secondary">
+					{overflowLabel}
+				</DsTypography>
+			) : (
+				<>
+					<DsStack
+						direction="row"
+						alignItems="center"
+						justifyContent="center"
+						className={classNames(styles.pill, { [styles.pillMuted]: isMuted })}
+					>
+						<DsTypography variant="body-xs-md" color={isMuted ? 'on-disabled' : 'on-action'}>
+							{tier}
+						</DsTypography>
+					</DsStack>
+
+					<span ref={siteCodeRef} className={styles.siteCode}>
+						<DsTooltip content={isOverflowing ? siteCode : undefined}>
+							<DsTypography variant="body-sm-bold" color={isSelected ? 'main' : 'secondary'}>
+								{siteCode}
+							</DsTypography>
+						</DsTooltip>
+					</span>
+				</>
+			)}
+		</button>
+	);
+};
+
+export default DsSiteNode;

package/src/components/ds-site-node/ds-site-node.types.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties, MouseEvent, Ref } from 'react';
+
+export const siteNodeStates = ['default', 'selected', 'muted', 'overflow'] as const;
+export type SiteNodeState = (typeof siteNodeStates)[number];
+
+export interface DsSiteNodeProps {
+	ref?: Ref<HTMLButtonElement>;
+	/**
+	 * Scope/selection state within the site hierarchy path.
+	 * `overflow` renders a collapsed summary node (no tier/site code).
+	 */
+	state?: SiteNodeState;
+	/**
+	 * Short tier label shown in the pill, e.g. `"T1"`. Ignored when `state="overflow"`.
+	 */
+	tier?: string;
+	/**
+	 * Site identifier. Truncates with an ellipsis and reveals the full value in a
+	 * tooltip when it overflows. Ignored when `state="overflow"`.
+	 */
+	siteCode?: string;
+	/**
+	 * Summary label for the collapsed branch, e.g. `"+2 more"`. Only used when
+	 * `state="overflow"`.
+	 */
+	overflowLabel?: string;
+	className?: string;
+	style?: CSSProperties;
+	/**
+	 * Overrides the accessible name. By default the node is named by its visible
+	 * content (tier + site code, or the overflow label); set this to give the
+	 * overflow node a more descriptive name, e.g. `"Show 2 more sites"`.
+	 */
+	'aria-label'?: string;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-site-node/hooks/use-is-overflowing.ts

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const useIsOverflowing = <T extends HTMLElement = HTMLElement>(text: string | undefined) => {
+	const ref = useRef<T>(null);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) {
+			return;
+		}
+
+		const measure = () => setIsOverflowing(element.scrollWidth > element.clientWidth);
+		measure();
+
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+
+		const frame = requestAnimationFrame(measure);
+		document.fonts.ready.then(measure).catch(() => undefined);
+		document.fonts.addEventListener('loadingdone', measure);
+
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			document.fonts.removeEventListener('loadingdone', measure);
+		};
+	}, [text]);
+
+	return { ref, isOverflowing };
+};

package/src/components/ds-site-node/index.ts

@@ -0,0 +1,3 @@
+export { default as DsSiteNode } from './ds-site-node';
+export { siteNodeStates } from './ds-site-node.types';
+export type { DsSiteNodeProps, SiteNodeState } from './ds-site-node.types';

package/src/components/ds-skeleton/ds-skeleton-circle.tsx

@@ -26,4 +26,6 @@ const DsSkeletonCircle = ({ size = 'regular', color = 'gray', className, style }
 	);
 };
 
+DsSkeletonCircle.displayName = 'DsSkeletonCircle';
+
 export default DsSkeletonCircle;

package/src/components/ds-skeleton/ds-skeleton-rect.tsx

@@ -33,4 +33,6 @@ const DsSkeletonRect = ({
 	);
 };
 
+DsSkeletonRect.displayName = 'DsSkeletonRect';
+
 export default DsSkeletonRect;

package/src/components/ds-skeleton/ds-skeleton-text.tsx

@@ -46,4 +46,6 @@ const DsSkeletonText = ({
 	);
 };
 
+DsSkeletonText.displayName = 'DsSkeletonText';
+
 export default DsSkeletonText;

package/src/components/ds-skeleton/ds-skeleton.ts

@@ -2,8 +2,14 @@ import DsSkeletonText from './ds-skeleton-text';
 import DsSkeletonCircle from './ds-skeleton-circle';
 import DsSkeletonRect from './ds-skeleton-rect';
 
-export default {
+const DsSkeleton = {
 	Text: DsSkeletonText,
 	Circle: DsSkeletonCircle,
 	Rect: DsSkeletonRect,
 };
+
+DsSkeleton.Text.displayName = 'DsSkeleton.Text';
+DsSkeleton.Circle.displayName = 'DsSkeleton.Circle';
+DsSkeleton.Rect.displayName = 'DsSkeleton.Rect';
+
+export default DsSkeleton;

package/src/components/ds-smart-tabs/ds-smart-tabs.tsx

@@ -108,6 +108,10 @@ const DsSmartTabs = ({
 	);
 };
 
+DsSmartTab.displayName = 'DsSmartTabs.Tab';
+
 DsSmartTabs.Tab = DsSmartTab;
 
+DsSmartTabs.displayName = 'DsSmartTabs';
+
 export default DsSmartTabs;