nntc-ui 0.2.3 → 0.2.6

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

@@ -0,0 +1,324 @@
+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

@@ -0,0 +1,157 @@
+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/{components/navigation/Menu/index.d.ts → src/components/navigation/Menu/index.ts}

@@ -1,4 +1,4 @@
 export { Menu } from './Menu';
+
 export type { Item } from './models/Item';
 export type { Divider } from './models/Divider';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,153 @@
+.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

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

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

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