nntc-ui 0.2.6 → 0.2.7

package/src/components/navigation/Tabs/Tabs.stories.tsx

@@ -1,959 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { AddIcon } from '@icons/AddIcon';
-import { BarChartIcon } from '@icons/BarChartIcon';
-import { ListIcon } from '@icons/ListIcon';
-import { SettingsIcon } from '@icons/SettingsIcon';
-import { TableChartIcon } from '@icons/TableChartIcon';
-import { UiProps } from '@models/UiProps';
-
-import { Item } from './models/Item';
-import { Tabs } from './Tabs';
-import * as styles from './tabs.stories.module.css';
-
-// SVG icon constants
-const homeIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +
-  '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
-
-const userIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +
-  '<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0' +
-  ' 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>' +
-  '</svg>';
-
-const settingsIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +
-  '<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64' +
-  '-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 ' +
-  'l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03' +
-  '-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 ' +
-  'h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,' +
-  '6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 ' +
-  'C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 ' +
-  'c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,' +
-  '0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 ' +
-  'c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-' +
-  '2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 ' +
-  'c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,' +
-  '12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 ' +
-  's1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>' +
-  '</svg>';
-
-type Props = UiProps<{
-  items: Item<string>[];
-  defaultSelected?: string;
-  onChange?: (newValue: string) => void;
-  filled?: boolean;
-  isVertical?: boolean;
-  disableBorder?: boolean;
-  allowDeselect?: boolean;
-  showTooltips?: boolean;
-  useExternalState?: boolean;
-  value?: string;
-}>;
-
-const meta: Meta<typeof Tabs<string>> = {
-  title: 'Navigation/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    defaultSelected: {
-      control: 'text',
-      description: 'Значение выбранной вкладки по умолчанию',
-    },
-    filled: {
-      control: 'boolean',
-      description: 'Включить заполненный фон для табов',
-    },
-    isVertical: {
-      control: 'boolean',
-      description: 'Вертикальное отображение табов с подчёркиванием справа',
-    },
-    disableBorder: {
-      control: 'boolean',
-      description: 'Отключить отображение границ (нижней для горизонтальных и правой для вертикальных табов)',
-    },
-    allowDeselect: {
-      control: 'boolean',
-      description: 'Разрешить отключение выбранной вкладки при повторном клике',
-    },
-    showTooltips: {
-      control: 'boolean',
-      description: 'Отображать названия вкладок как тултипы вместо текста рядом с иконками',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Обработчик изменения выбранной вкладки',
-    },
-    useExternalState: {
-      control: 'boolean',
-      description: 'Использовать внешнее состояние вместо внутреннего',
-    },
-    value: {
-      control: 'text',
-      description: 'Текущее значение выбранной вкладки (используется только при useExternalState=true)',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs<string>>;
-
-const TabsWrapper = (args: Props) => {
-  const [selectedTab, setSelectedTab] = useState<string | undefined>(args.defaultSelected);
-
-  return (
-    <div className={styles.tabsStoryWrapper}>
-      <Tabs<string> {...args} defaultSelected={selectedTab} onChange={setSelectedTab} />
-    </div>
-  );
-};
-
-const ExternalStateTabsWrapper = (args: Props) => {
-  const [selectedTab, setSelectedTab] = useState<string | undefined>(args.value || args.defaultSelected);
-
-  return (
-    <div className={styles.tabsStoryWrapper}>
-      <Tabs<string> {...args} useExternalState={true} value={selectedTab} onChange={setSelectedTab} />
-    </div>
-  );
-};
-
-const defaultItems: Item<string>[] = [
-  {
-    name: 'Первая вкладка',
-    value: 'tab1',
-  },
-  {
-    name: 'Вторая вкладка',
-    value: 'tab2',
-  },
-  {
-    name: 'Третья вкладка',
-    value: 'tab3',
-  },
-];
-
-export const Default: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-  },
-};
-
-export const WithDefaultSelected: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    defaultSelected: 'tab2',
-  },
-};
-
-export const LongTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Очень длинное название первой вкладки',
-        value: 'tab1',
-      },
-      {
-        name: 'Очень длинное название второй вкладки',
-        value: 'tab2',
-      },
-      {
-        name: 'Очень длинное название третьей вкладки',
-        value: 'tab3',
-      },
-    ],
-  },
-};
-
-export const ManyTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Вкладка 1',
-        value: 'tab1',
-      },
-      {
-        name: 'Вкладка 2',
-        value: 'tab2',
-      },
-      {
-        name: 'Вкладка 3',
-        value: 'tab3',
-      },
-      {
-        name: 'Вкладка 4',
-        value: 'tab4',
-      },
-      {
-        name: 'Вкладка 5',
-        value: 'tab5',
-      },
-      {
-        name: 'Вкладка 6',
-        value: 'tab6',
-      },
-    ],
-  },
-};
-
-export const WithIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-  },
-};
-
-export const Filled: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: defaultItems,
-  },
-};
-
-export const FilledWithIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-  },
-};
-
-export const WithStringIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Дом',
-        value: 'home',
-        icon: homeIcon,
-      },
-      {
-        name: 'Пользователь',
-        value: 'user',
-        icon: userIcon,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: settingsIcon,
-      },
-    ],
-  },
-};
-
-export const FilledWithStringIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Дом',
-        value: 'home',
-        icon: homeIcon,
-      },
-      {
-        name: 'Пользователь',
-        value: 'user',
-        icon: userIcon,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: settingsIcon,
-      },
-    ],
-  },
-};
-
-export const Vertical: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    isVertical: true,
-  },
-};
-
-export const VerticalWithDefaultSelected: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    defaultSelected: 'tab2',
-    isVertical: true,
-  },
-};
-
-export const VerticalWithIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-  },
-};
-
-export const VerticalFilled: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: defaultItems,
-    isVertical: true,
-  },
-};
-
-export const VerticalFilledWithIcons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-  },
-};
-
-export const VerticalFilledIconsOnly: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    filled: true,
-    items: [
-      {
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-  },
-};
-
-export const VerticalFilledIconsOnlySmall: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-  },
-};
-
-export const HorizontalFilledWithoutBorder: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    filled: true,
-    items: defaultItems,
-    disableBorder: true,
-  },
-};
-
-export const VerticalFilledWithoutBorder: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    filled: true,
-    items: defaultItems,
-    isVertical: true,
-    disableBorder: true,
-    componentSize: 'small',
-  },
-};
-
-export const VerticalFilledWithoutBorderIconsOnly: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    filled: true,
-    isVertical: true,
-    disableBorder: true,
-    componentSize: 'small',
-    items: [
-      {
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-  },
-};
-
-export const WithDeselect: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    allowDeselect: true,
-    defaultSelected: 'tab2',
-  },
-};
-
-export const FilledWithDeselect: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: defaultItems,
-    allowDeselect: true,
-    defaultSelected: 'tab2',
-  },
-};
-
-export const VerticalWithDeselect: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    isVertical: true,
-    allowDeselect: true,
-    defaultSelected: 'tab2',
-  },
-};
-
-export const WithButtonTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Первая вкладка',
-        value: 'tab1',
-      },
-      {
-        name: 'Вторая вкладка',
-        value: 'tab2',
-      },
-      {
-        name: 'Добавить',
-        value: 'add',
-        icon: <AddIcon />,
-        onClick: () => alert('Кнопка "Добавить" была нажата!'),
-      },
-    ],
-    defaultSelected: 'tab1',
-  },
-};
-
-export const WithMultipleButtonTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Добавить',
-        value: 'add',
-        icon: <AddIcon />,
-        onClick: () => alert('Добавление нового элемента'),
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-        onClick: () => alert('Открытие настроек'),
-      },
-    ],
-    defaultSelected: 'list',
-  },
-};
-
-export const FilledWithButtonTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Первая вкладка',
-        value: 'tab1',
-      },
-      {
-        name: 'Вторая вкладка',
-        value: 'tab2',
-      },
-      {
-        name: 'Добавить',
-        value: 'add',
-        icon: <AddIcon />,
-        onClick: () => alert('Кнопка "Добавить" была нажата!'),
-      },
-    ],
-    defaultSelected: 'tab1',
-  },
-};
-
-export const VerticalWithButtonTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'Добавить',
-        value: 'add',
-        icon: <AddIcon />,
-        onClick: () => alert('Добавление нового элемента'),
-      },
-    ],
-    isVertical: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const WithTooltips: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    showTooltips: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const FilledWithTooltips: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    showTooltips: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const VerticalWithTooltips: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-    showTooltips: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const VerticalFilledWithTooltips: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    isVertical: true,
-    showTooltips: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const WithTooltipsAndButtons: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'Добавить',
-        value: 'add',
-        icon: <AddIcon />,
-        onClick: () => alert('Добавление нового элемента'),
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-        onClick: () => alert('Открытие настроек'),
-      },
-    ],
-    showTooltips: true,
-    defaultSelected: 'list',
-  },
-};
-
-export const WithDisabledTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Активная вкладка',
-        value: 'active',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Отключенная вкладка',
-        value: 'disabled',
-        icon: <TableChartIcon />,
-        isDisabled: true,
-      },
-      {
-        name: 'Еще одна активная',
-        value: 'active2',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Отключенная кнопка',
-        value: 'disabledButton',
-        icon: <AddIcon />,
-        onClick: () => alert('Эта кнопка не должна сработать'),
-        isDisabled: true,
-      },
-    ],
-    defaultSelected: 'active',
-  },
-};
-
-export const FilledWithDisabledTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: [
-      {
-        name: 'Активная вкладка',
-        value: 'active',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Отключенная вкладка',
-        value: 'disabled',
-        icon: <TableChartIcon />,
-        isDisabled: true,
-      },
-      {
-        name: 'Еще одна активная',
-        value: 'active2',
-        icon: <BarChartIcon />,
-      },
-    ],
-    defaultSelected: 'active',
-  },
-};
-
-export const VerticalWithDisabledTabs: Story = {
-  render: (args) => <TabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Активная вкладка',
-        value: 'active',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Отключенная вкладка',
-        value: 'disabled',
-        icon: <TableChartIcon />,
-        isDisabled: true,
-      },
-      {
-        name: 'Еще одна активная',
-        value: 'active2',
-        icon: <BarChartIcon />,
-      },
-    ],
-    isVertical: true,
-    defaultSelected: 'active',
-  },
-};
-
-// Stories для демонстрации внешнего состояния
-export const ExternalState: Story = {
-  render: (args) => <ExternalStateTabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    value: 'tab2',
-  },
-};
-
-export const ExternalStateWithIcons: Story = {
-  render: (args) => <ExternalStateTabsWrapper {...args} />,
-  args: {
-    items: [
-      {
-        name: 'Список',
-        value: 'list',
-        icon: <ListIcon />,
-      },
-      {
-        name: 'Таблица',
-        value: 'table',
-        icon: <TableChartIcon />,
-      },
-      {
-        name: 'График',
-        value: 'chart',
-        icon: <BarChartIcon />,
-      },
-      {
-        name: 'Настройки',
-        value: 'settings',
-        icon: <SettingsIcon />,
-      },
-    ],
-    value: 'table',
-  },
-};
-
-export const ExternalStateFilled: Story = {
-  render: (args) => <ExternalStateTabsWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    filled: true,
-    items: defaultItems,
-    value: 'tab1',
-  },
-};
-
-export const ExternalStateVertical: Story = {
-  render: (args) => <ExternalStateTabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    isVertical: true,
-    value: 'tab3',
-  },
-};
-
-export const ExternalStateWithDeselect: Story = {
-  render: (args) => <ExternalStateTabsWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    allowDeselect: true,
-    value: 'tab2',
-  },
-};