nntc-ui 0.2.3 → 0.2.6

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

@@ -0,0 +1,959 @@
+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',
+  },
+};