tech(storybook): add addon @storybook/addon-designs

package.json

@@ -20,6 +20,7 @@
     "@size-limit/webpack": "^11.1.6",
     "@size-limit/webpack-css": "^11.1.6",
     "@storybook/addon-console": "^3.0.0",
+    "@storybook/addon-designs": "^8.1.0",
     "@swc/cli": "^0.6.0",
     "@swc/core": "1.10.16",
     "@swc/jest": "^0.2.37",

packages/vkui/.storybook/main.ts

@@ -29,6 +29,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-designs'),
     getAbsolutePath('@project-tools/storybook-addon-cartesian'),
     './addons/colorScheme',
     './addons/pointer',

packages/vkui/src/components/Accordion/Accordion.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Div } from '../Div/Div';
 import { Group } from '../Group/Group';
 import { Accordion, type AccordionProps } from './Accordion';
@@ -9,7 +10,7 @@ const story: Meta<AccordionProps> = {
   title: 'Blocks/Accordion',
   component: Accordion,
   args: { onChange: fn() },
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Accordion', CanvasFullLayout, DisableCartesianParam),
 };
 
 export default story;

packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx

@@ -11,6 +11,7 @@ import {
   Icon28SubtitlesOutline,
 } from '@vkontakte/icons';
 import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { ActionSheetItem, type ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
 import { Button } from '../Button/Button';
 import { Placeholder } from '../Placeholder/Placeholder';
@@ -19,7 +20,7 @@ import { ActionSheet, type ActionSheetProps } from './ActionSheet';
 const story: Meta<ActionSheetProps> = {
   title: 'Popouts/ActionSheet',
   component: ActionSheet,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('ActionSheet', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     title: StringArg,
     description: StringArg,

packages/vkui/src/components/ActionSheetItem/ActionSheetItem.stories.tsx

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
 import { createFieldWithPresets } from '../../testing/presets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { ActionSheetItem, type ActionSheetItemProps } from './ActionSheetItem';
 
 const story: Meta<ActionSheetItemProps> = {
   title: 'Popouts/ActionSheetItem',
   component: ActionSheetItem,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('ActionSheetItem', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     before: createFieldWithPresets({
       iconSizes: ['16', '20', '24', '28'],

packages/vkui/src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.stories.tsx

@@ -1,12 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon24SmileOutline, Icon28SmileOutline } from '@vkontakte/icons';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { AdaptiveIconRenderer, type AdaptiveIconRendererProps } from './AdaptiveIconRenderer';
 
 const story: Meta<AdaptiveIconRendererProps> = {
   title: 'Blocks/AdaptiveIconRenderer',
   component: AdaptiveIconRenderer,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters(
+    'AdaptiveIconRenderer',
+    CanvasFullLayout,
+    DisableCartesianParam,
+  ),
 };
 
 export default story;

packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.stories.tsx

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { AdaptivityProvider, type AdaptivityProviderProps } from './AdaptivityProvider';
 
 const story: Meta<AdaptivityProviderProps> = {
   title: 'Service/AdaptivityProvider',
   component: AdaptivityProvider,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('AdaptivityProvider', CanvasFullLayout, DisableCartesianParam),
 };
 
 export default story;

packages/vkui/src/components/Alert/Alert.stories.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Button } from '../Button/Button';
 import { Placeholder } from '../Placeholder/Placeholder';
 import { Alert, type AlertProps } from './Alert';
 
 const story: Meta<AlertProps> = {
   title: 'Popouts/Alert',
   component: Alert,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Alert', CanvasFullLayout, DisableCartesianParam),
 };
 
 export default story;

packages/vkui/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -1,14 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Div } from '../Div/Div';
 import { Group } from '../Group/Group';
 import { AspectRatio, type AspectRatioProps } from './AspectRatio';
 
 const story: Meta<AspectRatioProps> = {
   title: 'Layout/AspectRatio',
   component: AspectRatio,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('AspectRatio', CanvasFullLayout),
   argTypes: {
     ratio: {
       control: { type: 'select' },

packages/vkui/src/components/Avatar/Avatar.stories.tsx

@@ -7,6 +7,7 @@ import {
   IconExampleForOverlayBasedOnImageBaseSize,
 } from '../../testing/icons';
 import { getAvatarUrl } from '../../testing/mock';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { imageBaseSizes } from '../ImageBase/types';
 import { Avatar, type AvatarProps } from './Avatar';
 
@@ -15,7 +16,7 @@ type AvatarStoryProps = AvatarProps & { badge: React.ReactNode; overlay: React.R
 const story: Meta<AvatarStoryProps> = {
   title: 'Blocks/Avatar',
   component: Avatar,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('Avatar', CanvasFullLayout),
   argTypes: {
     size: {
       control: {

packages/vkui/src/components/Badge/Badge.stories.tsx

@@ -1,12 +1,13 @@
 import { withCartesian } from '@project-tools/storybook-addon-cartesian';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Badge, type BadgeProps } from './Badge';
 
 const story: Meta<BadgeProps> = {
   title: 'Blocks/Badge',
   component: Badge,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('Badge', CanvasFullLayout),
   decorators: [withCartesian],
 };
 

packages/vkui/src/components/Banner/Banner.stories.tsx

@@ -4,6 +4,7 @@ import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators'
 import { CanvasFullLayout } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
 import { createFieldWithPresets } from '../../testing/presets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
@@ -15,7 +16,7 @@ import { Banner, type BannerProps } from './Banner';
 const story: Meta<BannerProps> = {
   title: 'Blocks/Banner',
   component: Banner,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('Banner', CanvasFullLayout),
   argTypes: {
     before: createFieldWithPresets({
       iconSizes: ['96'],

packages/vkui/src/components/Button/Button.stories.tsx

@@ -2,6 +2,7 @@ import { withCartesian } from '@project-tools/storybook-addon-cartesian';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout } from '../../storybook/constants';
 import { createFieldWithPresets } from '../../testing/presets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Counter } from '../Counter/Counter';
 import { Button, type ButtonProps } from './Button';
 
@@ -17,7 +18,7 @@ const iconsPresets = createFieldWithPresets({
 const story: Meta<StoryButtonProps> = {
   title: 'Blocks/Button',
   component: Button,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('Button', CanvasFullLayout),
   argTypes: {
     before: iconsPresets,
     after: iconsPresets,

packages/vkui/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -3,13 +3,14 @@ import { withCartesian } from '@project-tools/storybook-addon-cartesian';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon16Add, Icon24Add } from '@vkontakte/icons';
 import { CanvasFullLayout } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Button } from '../Button/Button';
 import { ButtonGroup, type ButtonGroupProps } from './ButtonGroup';
 
 const story: Meta<ButtonGroupProps> = {
   title: 'Blocks/ButtonGroup',
   component: ButtonGroup,
-  parameters: CanvasFullLayout,
+  parameters: createStoryParameters('ButtonGroup', CanvasFullLayout),
   decorators: [withCartesian],
 };
 

packages/vkui/src/components/Calendar/Calendar.stories.tsx

@@ -2,12 +2,13 @@ import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { createCalendarDayRenderField } from '../../testing/presets/createCalendarDayRenderField';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Calendar, type CalendarProps } from './Calendar';
 
 const story: Meta<CalendarProps> = {
   title: 'Forms/Calendar',
   component: Calendar,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Calendar', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     value: {
       control: { type: 'date' },

packages/vkui/src/components/CalendarRange/CalendarRange.stories.tsx

@@ -2,14 +2,15 @@ import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { createCalendarDayRenderField } from '../../testing/presets/createCalendarDayRenderField';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { CalendarRange, type CalendarRangeProps } from './CalendarRange';
 
 type StoryCalendarRangeProps = CalendarRangeProps & { startDate: number; endDate: number };
 
 const story: Meta<StoryCalendarRangeProps> = {
   title: 'Forms/CalendarRange',
   component: CalendarRange,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('CalendarRange', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     value: {
       description: 'Используйте startDate и endDate для задания периода',

packages/vkui/src/components/Card/Card.stories.tsx

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Card, type CardProps } from './Card';
 
 const story: Meta<CardProps> = {
   title: 'Blocks/Card',
   component: Card,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Card', CanvasFullLayout, DisableCartesianParam),
   decorators: [withSinglePanel, withVKUILayout],
 };
 

packages/vkui/src/components/CardGrid/CardGrid.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { isArray } from '@vkontakte/vkjs';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Card as BasicCard } from '../Card/Card';
 import { Playground as BasicCardStory } from '../Card/Card.stories';
 import { Group } from '../Group/Group';
@@ -12,7 +13,7 @@ type StoryCardGridProps = CardGridProps & { count: number };
 const story: Meta<StoryCardGridProps> = {
   title: 'Blocks/CardGrid',
   component: CardGrid,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('CardGrid', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     count: {
       control: { type: 'number' },

packages/vkui/src/components/CardScroll/CardScroll.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { isArray } from '@vkontakte/vkjs';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Card as BasicCard } from '../Card/Card';
 import { Playground as BasicCardStory } from '../Card/Card.stories';
 import { Group } from '../Group/Group';
@@ -12,7 +13,7 @@ type StoryCardScrollProps = CardScrollProps & { count: number };
 const story: Meta<StoryCardScrollProps> = {
   title: 'Blocks/CardScroll',
   component: CardScroll,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('CardScroll', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     count: {
       control: { type: 'number' },

packages/vkui/src/components/Cell/Cell.stories.tsx

@@ -4,6 +4,7 @@ import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators'
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
 import { createFieldWithPresets } from '../../testing/presets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Avatar } from '../Avatar/Avatar';
 import { Group } from '../Group/Group';
 import { Switch } from '../Switch/Switch';
@@ -12,7 +13,7 @@ import { Cell, type CellProps } from './Cell';
 const story: Meta<CellProps> = {
   title: 'Blocks/Cell',
   component: Cell,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Cell', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     before: createFieldWithPresets({
       iconSizes: ['28'],

packages/vkui/src/components/CellButton/CellButton.stories.tsx

@@ -3,14 +3,15 @@ import { noop } from '@vkontakte/vkjs';
 import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
 import { createFieldWithPresets } from '../../testing/presets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Avatar } from '../Avatar/Avatar';
 import { Switch } from '../Switch/Switch';
 import { CellButton, type CellButtonProps } from './CellButton';
 
 const story: Meta<CellButtonProps> = {
   title: 'Blocks/CellButton',
   component: CellButton,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('CellButton', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     before: createFieldWithPresets({
       iconSizes: ['28'],

packages/vkui/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Checkbox, type CheckboxProps } from './Checkbox';
 
 const story: Meta<CheckboxProps> = {
   title: 'Forms/Checkbox',
   component: Checkbox,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Checkbox', CanvasFullLayout, DisableCartesianParam),
   argTypes: {
     description: StringArg,
   },

packages/vkui/src/components/ChipsInput/ChipsInput.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getFormFieldIconsPresets } from '../../testing/presets/getFormFieldIconsPresets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import type { ChipOption } from '../ChipsInputBase/types';
 import { FormItem } from '../FormItem/FormItem';
 import { ChipsInput, type ChipsInputProps } from './ChipsInput';
@@ -11,7 +12,7 @@ const iconsPresets = getFormFieldIconsPresets();
 const story: Meta<ChipsInputProps<ChipOption>> = {
   title: 'Forms/ChipsInput',
   component: ChipsInput,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('ChipsInput', CanvasFullLayout, DisableCartesianParam),
   args: { onInputChange: fn() },
   argTypes: {
     before: iconsPresets,

packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx

@@ -3,6 +3,7 @@ import { fn } from '@storybook/test';
 import { Icon12Download } from '@vkontakte/icons';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getFormFieldIconsPresets } from '../../testing/presets/getFormFieldIconsPresets';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import type { ChipOption } from '../ChipsInputBase/types';
 import { FormItem } from '../FormItem/FormItem';
 import { ChipsSelect, type ChipsSelectProps } from './ChipsSelect';
@@ -12,7 +13,7 @@ const iconsPresets = getFormFieldIconsPresets();
 const story: Meta<ChipsSelectProps<ChipOption>> = {
   title: 'Forms/ChipsSelect',
   component: ChipsSelect,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('ChipsSelect', CanvasFullLayout, DisableCartesianParam),
   args: { onChange: fn(), onChangeStart: fn(), onInputChange: fn() },
   argTypes: {
     before: iconsPresets,

packages/vkui/src/components/Clickable/Clickable.stories.tsx

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { noop } from '@vkontakte/vkjs';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
 import { Clickable, type ClickableProps } from './Clickable';
 
 const story: Meta<ClickableProps> = {
   title: 'Blocks/Clickable',
   component: Clickable,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  parameters: createStoryParameters('Clickable', CanvasFullLayout, DisableCartesianParam),
 };
 
 export default story;