nntc-ui 0.2.6 → 0.2.7

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

@@ -1,324 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { FieldSize } from '@components/common/FieldShell';
-import { DeleteIcon } from '@icons/DeleteIcon';
-import { EditIcon } from '@icons/EditIcon';
-import { UiProps } from '@models/UiProps';
-
-import { Menu } from './Menu';
-import { Divider } from './models/Divider';
-import { Item } from './models/Item';
-
-type Props = UiProps<{
-  items: (Item | Divider)[];
-  componentSize?: FieldSize;
-  descriptionPosition?: 'right' | 'bottom';
-}>;
-
-const meta: Meta<typeof Menu> = {
-  title: 'Navigation/Menu',
-  component: Menu,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large', 'extraLarge'],
-      description: 'Размер компонента',
-    },
-    descriptionPosition: {
-      control: 'select',
-      options: ['right', 'bottom'],
-      description: 'Позиция описания пункта меню',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Menu>;
-
-const MenuWrapper = (args: Props) => {
-  const [selectedItem, setSelectedItem] = useState<string | undefined>(undefined);
-
-  const handleItemClick = (item: Item) => {
-    setSelectedItem(item.name);
-    item.onClick?.();
-  };
-
-  const items = args.items.map((item) => {
-    if (item.type === 'item') {
-      return {
-        ...item,
-        selected: item.name === selectedItem,
-        onClick: () => handleItemClick(item),
-      };
-    }
-    return item;
-  });
-
-  return (
-    <div style={{ width: '300px' }}>
-      <Menu {...args} items={items} />
-    </div>
-  );
-};
-
-const defaultItems: (Item | Divider)[] = [
-  {
-    type: 'item',
-    name: 'Пункт меню 1',
-    onClick: () => console.log('Пункт 1'),
-  },
-  {
-    type: 'item',
-    name: 'Пункт меню 2',
-    onClick: () => console.log('Пункт 2'),
-  },
-  {
-    type: 'divider',
-    name: 'Разделитель',
-  },
-  {
-    type: 'item',
-    name: 'Пункт меню 3',
-    onClick: () => console.log('Пункт 3'),
-  },
-];
-
-export const Default: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'medium',
-    items: defaultItems,
-  },
-};
-
-export const Small: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    items: defaultItems,
-  },
-};
-
-export const Large: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'large',
-    items: defaultItems,
-  },
-};
-
-export const WithIcons: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'medium',
-    items: [
-      {
-        type: 'item',
-        name: 'Редактировать',
-        icon: '✏️',
-        onClick: () => console.log('Редактировать'),
-      },
-      {
-        type: 'item',
-        name: 'Удалить',
-        icon: '🗑️',
-        onClick: () => console.log('Удалить'),
-      },
-      {
-        type: 'divider',
-        name: 'Разделитель',
-      },
-      {
-        type: 'item',
-        name: 'Копировать',
-        icon: '📋',
-        onClick: () => console.log('Копировать'),
-      },
-    ],
-  },
-};
-
-export const WithDescriptions: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'medium',
-    descriptionPosition: 'right',
-    items: [
-      {
-        type: 'item',
-        name: 'Настройки',
-        description: 'Настройки приложения',
-        onClick: () => console.log('Настройки'),
-      },
-      {
-        type: 'item',
-        name: 'Профиль',
-        description: 'Управление профилем',
-        onClick: () => console.log('Профиль'),
-      },
-      {
-        type: 'divider',
-        name: 'Разделитель',
-      },
-      {
-        type: 'item',
-        name: 'Выход',
-        description: 'Выйти из системы',
-        onClick: () => console.log('Выход'),
-      },
-    ],
-  },
-};
-
-export const WithDescriptionsBottom: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'medium',
-    descriptionPosition: 'bottom',
-    items: [
-      {
-        type: 'item',
-        name: 'Настройки',
-        description: 'Настройки приложения',
-        onClick: () => console.log('Настройки'),
-      },
-      {
-        type: 'item',
-        name: 'Профиль',
-        description: 'Управление профилем',
-        onClick: () => console.log('Профиль'),
-      },
-      {
-        type: 'divider',
-        name: 'Разделитель',
-      },
-      {
-        type: 'item',
-        name: 'Выход',
-        description: 'Выйти из системы',
-        onClick: () => console.log('Выход'),
-      },
-    ],
-  },
-};
-
-export const WithSubButtons: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    items: [
-      {
-        type: 'item',
-        name: 'Профиль 1',
-        subButtons: [
-          {
-            icon: <EditIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 1 - Редактировать'),
-          },
-          {
-            icon: <DeleteIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 1 - Удалить'),
-          },
-        ],
-        onClick: () => console.log('Профиль 1'),
-      },
-      {
-        type: 'item',
-        name: 'Профиль 2',
-        subButtons: [
-          {
-            icon: <EditIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 2 - Редактировать'),
-          },
-          {
-            icon: <DeleteIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 2 - Удалить'),
-          },
-        ],
-        onClick: () => console.log('Профиль 2'),
-      },
-      {
-        type: 'item',
-        name: 'Профиль 3',
-        subButtons: [
-          {
-            icon: <EditIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 3 - Редактировать'),
-          },
-          {
-            icon: <DeleteIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 3 - Удалить'),
-          },
-        ],
-        onClick: () => console.log('Профиль 3'),
-      },
-    ],
-  },
-};
-
-export const WithSubButtonsAndDescriptionsBottom: Story = {
-  render: (args) => <MenuWrapper {...args} />,
-  args: {
-    componentSize: 'small',
-    descriptionPosition: 'bottom',
-    items: [
-      {
-        type: 'item',
-        name: 'Профиль 1',
-        description: 'Описание профиля 1',
-        subButtons: [
-          {
-            icon: <EditIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 1 - Редактировать'),
-          },
-          {
-            icon: <DeleteIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 1 - Удалить'),
-          },
-        ],
-        onClick: () => console.log('Профиль 1'),
-      },
-      {
-        type: 'item',
-        name: 'Профиль 2',
-        description: 'Описание профиля 2',
-        subButtons: [
-          {
-            icon: <EditIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 2 - Редактировать'),
-          },
-          {
-            icon: <DeleteIcon />,
-            variant: 'text',
-            textSecondary: true,
-            onClick: () => console.log('Профиль 2 - Удалить'),
-          },
-        ],
-        onClick: () => console.log('Профиль 2'),
-      },
-    ],
-  },
-};

package/src/components/navigation/Menu/Menu.tsx

@@ -1,157 +0,0 @@
-import classnames from 'classnames';
-import { HTMLAttributes, MouseEvent, forwardRef, useCallback } from 'react';
-
-import { Button } from '@components/common/Button';
-import { ButtonsGroup } from '@components/common/ButtonsGroup';
-import { FieldSize } from '@models/FieldSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './menu.module.css';
-import { Divider } from './models/Divider';
-import { Item } from './models/Item';
-
-type DescriptionPosition = 'right' | 'bottom';
-
-interface Props {
-  items: (Item | Divider)[];
-  componentSize?: FieldSize;
-  descriptionPosition?: DescriptionPosition;
-}
-
-export const Menu = forwardRef<HTMLDivElement, UiProps<Props> & HTMLAttributes<HTMLDivElement>>(function Menu(
-  { items, componentSize = 'medium', descriptionPosition = 'right', classes, className, ...rest },
-  ref,
-) {
-  const handleClick = useCallback(
-    (item: Item) => (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
-      item?.onClick?.();
-      e.currentTarget.blur();
-    },
-    [],
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(styles.root, styles[componentSize as keyof typeof styles], className, classes?.root)}
-      {...rest}
-    >
-      {' '}
-      {items.map((item, index) => {
-        const Component = item.type === 'item' && item.subButtons?.length ? 'div' : 'button';
-        return item.type === 'item' ? (
-          <Component
-            tabIndex={-10}
-            key={`menu-item-${item.name}-${index}`}
-            className={classnames(
-              styles.item,
-              item.selected ? styles.itemSelected : undefined,
-              item.disabled ? styles.itemDisabled : undefined,
-              classes?.item,
-              item.selected ? classes?.itemSelected : undefined,
-              item.disabled ? classes?.itemDisabled : undefined,
-            )}
-            onClick={!item.disabled ? handleClick(item) : undefined}
-            title={item.name}
-          >
-            <span className={classnames(styles.stateLayer)}>
-              {!!item.icon && (
-                <span
-                  className={classnames(
-                    styles.itemIcon,
-                    classes?.itemIcon,
-                    item.selected ? classes?.itemSelectedIcon : undefined,
-                    item.disabled ? classes?.itemDisabledIcon : undefined,
-                  )}
-                >
-                  {item.icon}
-                </span>
-              )}
-              {descriptionPosition === 'bottom' && !!item.description ? (
-                <span className={classnames(styles.itemTextBlock)}>
-                  <span
-                    className={classnames(
-                      styles.itemTitleTop,
-                      styles.itemTitle,
-                      classes?.itemTitle,
-                      item.selected ? classes?.itemSelectedTitle : undefined,
-                      item.disabled ? classes?.itemDisabledTitle : undefined,
-                    )}
-                  >
-                    {item.name}
-                  </span>
-                  <span
-                    className={classnames(
-                      styles.itemDescription,
-                      classes?.itemDescription,
-                      item.selected ? classes?.itemSelectedDescription : undefined,
-                      item.disabled ? classes?.itemDisabledDescription : undefined,
-                    )}
-                  >
-                    {item.description}
-                  </span>
-                </span>
-              ) : (
-                <>
-                  <span
-                    className={classnames(
-                      styles.itemTitle,
-                      classes?.itemTitle,
-                      item.selected ? classes?.itemSelectedTitle : undefined,
-                      item.disabled ? classes?.itemDisabledTitle : undefined,
-                    )}
-                  >
-                    {item.name}
-                  </span>
-                  {!!item.description && (
-                    <span
-                      className={classnames(
-                        styles.itemDescription,
-                        classes?.itemDescription,
-                        item.selected ? classes?.itemSelectedDescription : undefined,
-                        item.disabled ? classes?.itemDisabledDescription : undefined,
-                      )}
-                    >
-                      {item.description}
-                    </span>
-                  )}
-                </>
-              )}
-              {!!item.subButtons?.length && (
-                <div
-                  className={classnames(
-                    styles.itemActions,
-                    classes?.itemActions,
-                    item.selected ? classes?.itemSelectedActions : undefined,
-                    item.disabled ? classes?.itemDisabledActions : undefined,
-                  )}
-                >
-                  <ButtonsGroup>
-                    {item.subButtons.map((sb, sbIndex) => (
-                      <Button
-                        key={`subButton-${sbIndex}`}
-                        variant={sb.variant}
-                        componentSize={componentSize}
-                        textSecondary={sb.textSecondary}
-                        isActive={sb.isActive}
-                        icon={sb.icon}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          sb.onClick?.();
-                        }}
-                      />
-                    ))}
-                  </ButtonsGroup>
-                </div>
-              )}
-            </span>
-          </Component>
-        ) : (
-          <div key={`menu-divider-${item.name}-${index}`} className={classnames(styles.divider, classes?.divider)}>
-            {item.name}
-          </div>
-        );
-      })}
-    </div>
-  );
-});

package/src/components/navigation/Menu/menu.module.css

@@ -1,153 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-}
-
-.medium {
-  padding: 8px 0;
-}
-
-.small {
-  padding: 4px 0;
-}
-
-.item {
-  width: 100%;
-  padding: 0;
-  font-size: var(--text-caption-size);
-  font-weight: var(--text-caption-weight);
-  line-height: var(--text-caption-height);
-  text-align: left;
-  letter-spacing: var(--text-caption-letter);
-  cursor: pointer;
-  outline: none;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-}
-
-.state-layer {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  color: var(--theme-text-secondary);
-  background-color: transparent;
-}
-
-.extraLarge .state-layer {
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.large .state-layer {
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.medium .state-layer {
-  gap: 8px;
-  padding: 8px 16px;
-}
-
-.small .state-layer {
-  gap: 4px;
-  padding: 4px 8px;
-}
-
-.item:not(.item-disabled):hover > .state-layer {
-  color: var(--theme-text-primary);
-  background-color: var(--theme-overlay-8);
-}
-
-.item:not(.item-disabled):focus > .state-layer {
-  color: var(--theme-text-primary);
-  background-color: var(--theme-overlay-12);
-}
-
-.item:not(.item-disabled):active > .state-layer,
-.item-selected > .state-layer {
-  color: var(--theme-text-primary);
-  background-color: var(--theme-overlay-12);
-}
-
-.item-disabled {
-  cursor: default;
-}
-
-.item-disabled > .state-layer {
-  color: var(--theme-text-secondary);
-  background-color: transparent;
-}
-
-.item-icon {
-  display: block;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-}
-
-.small .item-icon {
-  width: 20px;
-  height: 20px;
-}
-
-.item-icon > svg {
-  fill: var(--theme-text-secondary);
-}
-
-.item-title {
-  display: block;
-  flex: 1 1 0;
-  width: 0;
-  min-width: 40%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.item-text-block {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.item-title-top {
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.item-description {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--text-caption-size);
-  font-weight: var(--text-caption-weight);
-  line-height: var(--text-caption-height);
-  color: var(--theme-text-secondary);
-  letter-spacing: var(--text-caption-letter);
-  white-space: nowrap;
-}
-
-.item-actions {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-}
-
-.divider {
-  margin: 8px 12px;
-  font-size: var(--text-overline-size);
-  font-weight: var(--text-overline-weight);
-  line-height: var(--text-overline-height);
-  color: var(--theme-text-inactive);
-  text-transform: uppercase;
-  letter-spacing: var(--text-overline-letter);
-  border-bottom: 1px solid var(--theme-divider);
-}

package/src/components/navigation/Menu/models/Divider.ts

@@ -1,4 +0,0 @@
-export interface Divider {
-  type: 'divider';
-  name?: string;
-}

package/src/components/navigation/Menu/models/Item.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-
-import { ButtonVariant } from '@models/ButtonVariant';
-
-export interface Item {
-  type: 'item';
-  name: string;
-  icon?: ReactNode;
-  description?: string | number;
-  subButtons?: {
-    variant?: ButtonVariant;
-    icon?: ReactNode;
-    textSecondary?: boolean;
-    isActive?: boolean;
-    onClick?: () => void;
-  }[];
-  onClick?: () => void;
-  selected?: boolean;
-  disabled?: boolean;
-}