doc: add storybook links to components (#5694)

* Add storybook link

* doc: Add Storybook link in doc

packages/vkui/shared.config.js

@@ -13,6 +13,8 @@ module.exports.VERSION = pkg.version;
 module.exports.URLS = {
   REPOSITORY: pkg.repository.url.replace('.git', ''),
   ISSUES: pkg.bugs,
+  HOMEPAGE: pkg.homepage,
+  NPM: 'https://www.npmjs.com/package/@vkontakte/vkui',
 };
 
 /**

packages/vkui/src/components/AppRoot/AppRoot.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { AppRoot } from './AppRoot';
+
+<Meta title="Service/AppRoot" />
+<Title>AppRoot</Title>
+
+<ArgTypes of={AppRoot} />

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

@@ -26,7 +26,7 @@ const story: Meta<AspectRatioProps> = {
 
 export default story;
 
-type Story = StoryObj<AspectRatioProps>;
+type Story = StoryObj<Omit<AspectRatioProps, 'ratio'> & { ratio: '16/9' | '1/1' | '3/4' | 'None' }>;
 
 export const Playground: Story = {
   args: {
@@ -37,6 +37,7 @@ export const Playground: Story = {
         src="https://sun9-35.userapi.com/TH0O6TfKR2O5W8hjgSdzQzHvV_2TGRAXhLHuog/Js_f2L5EMYM.jpg"
       />
     ),
+    ratio: '16/9',
   },
   decorators: [
     (Component, context) => (
@@ -54,7 +55,7 @@ export const Playground: Story = {
 export const WithModeNone: Story = {
   ...Playground,
   args: {
-    ratio: 16 / 9,
+    ratio: '16/9',
     mode: 'none',
     children: (
       <img

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

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { getAvatarUrl } from '../../testing/mock';
+import { Image, ImageProps } from './Image';
+
+const story: Meta<ImageProps> = {
+  title: 'Blocks/Image',
+  component: Image,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ImageProps>;
+
+export const Playground: Story = {
+  args: {
+    src: getAvatarUrl('app_shorm_online'),
+  },
+};

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

@@ -15,21 +15,41 @@ const story: Meta<ListProps> = {
 
 export default story;
 
-type Story = StoryObj<ListProps>;
+type Story = StoryObj<
+  ListProps & {
+    items: Array<{
+      before: React.ReactNode;
+      title: string;
+    }>;
+  }
+>;
 
 export const Playground: Story = {
-  render: ({ children, ...args }) => <List {...args}>{children}</List>,
+  render: function Render({ items, ...args }) {
+    const [draggingList, updateDraggingList] = React.useState(items);
+
+    const onDragFinish = ({ from, to }: { from: number; to: number }) => {
+      const _list = [...draggingList];
+      _list.splice(from, 1);
+      _list.splice(to, 0, draggingList[from]);
+      updateDraggingList(_list);
+    };
+
+    return (
+      <List {...args}>
+        {draggingList.map((item) => (
+          <Cell key={item.title} before={item.before} draggable onDragFinish={onDragFinish}>
+            {item.title}
+          </Cell>
+        ))}
+      </List>
+    );
+  },
   args: {
-    children: [
-      <Cell key={0} expandable before={<Icon28UserOutline />}>
-        Учетная запись
-      </Cell>,
-      <Cell key={1} expandable before={<Icon28SettingsOutline />}>
-        Основные
-      </Cell>,
-      <Cell key={2} expandable before={<Icon28PrivacyOutline />}>
-        Приватность
-      </Cell>,
+    items: [
+      { before: <Icon28UserOutline />, title: 'Учетная запись' },
+      { before: <Icon28SettingsOutline />, title: 'Основные' },
+      { before: <Icon28PrivacyOutline />, title: 'Приватность' },
     ],
   },
   decorators: [

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { ModalDismissButton, ModalDismissButtonProps } from './ModalDismissButton';
+
+const story: Meta<ModalDismissButtonProps> = {
+  title: 'Modals/ModalDismissButton',
+  component: ModalDismissButton,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ModalDismissButtonProps>;
+
+export const Playground: Story = {
+  decorators: [
+    (Component) => (
+      <div style={{ position: 'relative' }}>
+        <Component />
+      </div>
+    ),
+  ],
+};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon24Cancel, Icon24Done } from '@vkontakte/icons';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { ModalWrapper } from '../../storybook/ModalWrapper';
+import { withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Div } from '../Div/Div';
+import { ModalPage } from '../ModalPage/ModalPage';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { ModalPageHeader, ModalPageHeaderProps } from './ModalPageHeader';
+
+const story: Meta<ModalPageHeaderProps> = {
+  title: 'Modals/ModalPageHeader',
+  component: ModalPageHeader,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [withVKUILayout],
+};
+
+export default story;
+
+type Story = StoryObj<ModalPageHeaderProps>;
+
+const MODAL_ID = 'MODAL_ID';
+
+export const Example: Story = {
+  render: function Render(args) {
+    const platform = usePlatform();
+
+    return (
+      <ModalWrapper modalId={MODAL_ID}>
+        <ModalPage
+          id={MODAL_ID}
+          header={
+            <ModalPageHeader
+              before={
+                <React.Fragment>
+                  {(platform === Platform.ANDROID || platform === Platform.VKCOM) && (
+                    <PanelHeaderButton>
+                      <Icon24Cancel />
+                    </PanelHeaderButton>
+                  )}
+                </React.Fragment>
+              }
+              after={
+                <React.Fragment>
+                  {(platform === Platform.ANDROID || platform === Platform.VKCOM) && (
+                    <PanelHeaderButton>
+                      <Icon24Done />
+                    </PanelHeaderButton>
+                  )}
+                  {platform === Platform.IOS && <PanelHeaderButton>Готово</PanelHeaderButton>}
+                </React.Fragment>
+              }
+              {...args}
+            >
+              Заголовок модальной страницы
+            </ModalPageHeader>
+          }
+        >
+          <Div style={{ height: 1000 }}>Example</Div>
+        </ModalPage>
+      </ModalWrapper>
+    );
+  },
+};

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

@@ -1,29 +1,17 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import {
-  Icon16Dropdown,
-  Icon24Done,
-  Icon28AddOutline,
-  Icon28Notifications,
-  Icon28PictureOutline,
-  Icon28SettingsOutline,
-  Icon28UsersOutline,
-} from '@vkontakte/icons';
+import { Icon28Notifications, Icon28PictureOutline, Icon28SettingsOutline } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { Avatar } from '../Avatar/Avatar';
-import { Cell } from '../Cell/Cell';
 import { Counter } from '../Counter/Counter';
 import { Div } from '../Div/Div';
-import { List } from '../List/List';
 import { Panel } from '../Panel/Panel';
 import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose';
-import { PanelHeaderContent } from '../PanelHeaderContent/PanelHeaderContent';
-import { PanelHeaderContext } from '../PanelHeaderContext/PanelHeaderContext';
 import { Search } from '../Search/Search';
 import { Tabs } from '../Tabs/Tabs';
 import { TabsItem } from '../TabsItem/TabsItem';
@@ -123,27 +111,6 @@ export const PanelHeaderWithMultipleIcons: Story = {
   ),
 };
 
-export const PanelHeaderWithPanelHeaderContent: Story = {
-  render: function Render() {
-    const platform = usePlatform();
-
-    return (
-      <View id="main" activePanel="panel1">
-        <Panel id="panel1">
-          <PanelHeader
-            before={<PanelHeaderBack label={platform === Platform.VKCOM ? 'Назад' : undefined} />}
-          >
-            <PanelHeaderContent before={<Avatar size={36} />} status="Был в сети вчера">
-              Влад Анесов
-            </PanelHeaderContent>
-          </PanelHeader>
-          <Div>PanelHeaderContent</Div>
-        </Panel>
-      </View>
-    );
-  },
-};
-
 export const PanelHeaderWithSearch: Story = {
   render: function Render() {
     const platform = usePlatform();
@@ -176,71 +143,3 @@ export const PanelHeaderWithTabs: Story = {
     </View>
   ),
 };
-
-export const PanelHeaderWithPanelHeaderContext: Story = {
-  render: function Render() {
-    const [contextOpened, setContextOpened] = React.useState(true);
-    const [mode, setMode] = React.useState<string | undefined>('all');
-
-    const toggleContext = () => {
-      setContextOpened((prev) => !prev);
-    };
-
-    const select = (e: React.MouseEvent<HTMLElement>) => {
-      const mode = e.currentTarget.dataset.mode;
-      setMode(mode);
-      requestAnimationFrame(toggleContext);
-    };
-
-    return (
-      <View id="main" activePanel="panel1">
-        <Panel id="panel1">
-          <PanelHeader
-            before={<PanelHeaderBack />}
-            after={
-              <PanelHeaderButton>
-                <Icon28AddOutline />
-              </PanelHeaderButton>
-            }
-          >
-            <PanelHeaderContent
-              aside={
-                <Icon16Dropdown
-                  style={{
-                    transform: `rotate(${contextOpened ? '180deg' : '0'})`,
-                  }}
-                />
-              }
-              onClick={toggleContext}
-            >
-              Communities
-            </PanelHeaderContent>
-          </PanelHeader>
-          <PanelHeaderContext opened={contextOpened} onClose={toggleContext}>
-            <List>
-              <Cell
-                before={<Icon28UsersOutline />}
-                after={mode === 'all' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null}
-                onClick={select}
-                data-mode="all"
-              >
-                Communities
-              </Cell>
-              <Cell
-                before={<Icon28SettingsOutline />}
-                after={
-                  mode === 'managed' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null
-                }
-                onClick={select}
-                data-mode="managed"
-              >
-                Managed Communities
-              </Cell>
-            </List>
-          </PanelHeaderContext>
-          <Div>PanelHeaderContext</Div>
-        </Panel>
-      </View>
-    );
-  },
-};