nntc-ui 0.2.4 → 0.2.6

package/src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx

@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import { JSX, memo, useEffect, useState } from 'react';
+
+import { AddIcon, ChevronDownIcon, DoneIcon } from '@icons/index';
+
+import * as styles from './treeViewItem.module.css';
+import { Typography } from '../../../Typography';
+import { Item } from '../../models/Item';
+
+interface Props {
+  title: string;
+  value: string;
+  searchValue: string;
+  selected: Record<string, boolean>;
+  onSelect?: (id: string) => void;
+  type?: string;
+  isSelectable?: boolean;
+  startIcons?: Record<string, JSX.Element>;
+  children?: Item[];
+}
+
+export default memo(function TreeViewItem({
+  title,
+  value,
+  searchValue,
+  selected,
+  onSelect,
+  type,
+  isSelectable,
+  startIcons,
+  children,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(!!searchValue);
+  }, [searchValue]);
+
+  const hasChildren = !!children?.length;
+
+  const startIcon = type && startIcons?.[type];
+
+  const handleClick = () => {
+    if (isSelectable && onSelect) {
+      onSelect(value);
+    } else {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const isSelected = selected[value];
+
+  return (
+    <div>
+      <div className={classNames(styles.item, { [styles.selectable]: isSelectable })} onClick={handleClick}>
+        {hasChildren && <ChevronDownIcon />}
+        <div className={classNames(styles.title, { [styles.selected]: isSelected })}>
+          {startIcon}
+          <Typography variant="subtitle2">{title}</Typography>
+
+          {isSelectable && <span className={styles.selectIcon}>{isSelected ? <DoneIcon /> : <AddIcon />}</span>}
+        </div>
+      </div>
+      {isOpen && hasChildren && (
+        <div className={styles.children}>
+          {children.map((c) => (
+            <TreeViewItem
+              key={c.id}
+              title={c.name}
+              value={c.id}
+              children={c.children}
+              selected={selected}
+              searchValue={searchValue}
+              type={c.type}
+              isSelectable={c.isSelectable}
+              startIcons={startIcons}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});

package/{components/view/TreeView/ui/TreeViewItem/index.d.ts → src/components/view/TreeView/ui/TreeViewItem/index.ts}

@@ -1,2 +1 @@
 export { default as TreeViewItem } from './TreeViewItem';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/TreeView/ui/TreeViewItem/treeViewItem.module.css

@@ -0,0 +1,30 @@
+.item {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  cursor: pointer;
+  transition: 0.225s;
+}
+
+.selectable:hover {
+  background-color: var(--theme-input-filled);
+}
+
+.children {
+  margin-left: 20px;
+}
+
+.title {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.title.selected {
+  color: var(--theme-icon-hover-on-selected);
+}
+
+.select-icon {
+  margin-left: auto;
+}

package/src/components/view/TreeView/utils/getFilteredTree.ts

@@ -0,0 +1,23 @@
+import { Item } from '../models/Item';
+
+export const getFilteredTree = (tree: Item[], search: string) => {
+  const lowerCasedSearch = search.toLowerCase();
+
+  const getChildren = (acc: Item[], cur: Item) => {
+    if (cur.name.toLowerCase().includes(lowerCasedSearch)) {
+      acc.push(cur);
+
+      return acc;
+    }
+
+    if (Array.isArray(cur.children)) {
+      const children = cur.children.reduce(getChildren, []);
+
+      if (children.length) acc.push({ ...cur, children });
+    }
+
+    return acc;
+  };
+
+  return tree.reduce(getChildren, []);
+};

package/src/components/view/Typography/Typography.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'View/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'subtitle1',
+        'subtitle2',
+        'subtitle3',
+        'body1',
+        'body2',
+        'body3',
+        'button',
+        'caption',
+        'caption2',
+        'doubleCaption',
+        'overline',
+        'label',
+      ],
+    },
+    component: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const H1: Story = {
+  args: {
+    variant: 'h1',
+    children: 'Заголовок H1',
+  },
+};
+
+export const H2: Story = {
+  args: {
+    variant: 'h2',
+    children: 'Заголовок H2',
+  },
+};
+
+export const H3: Story = {
+  args: {
+    variant: 'h3',
+    children: 'Заголовок H3',
+  },
+};
+
+export const Subtitle1: Story = {
+  args: {
+    variant: 'subtitle1',
+    children: 'Подзаголовок 1',
+  },
+};
+
+export const Subtitle2: Story = {
+  args: {
+    variant: 'subtitle2',
+    children: 'Подзаголовок 2',
+  },
+};
+
+export const Body1: Story = {
+  args: {
+    variant: 'body1',
+    children: 'Основной текст 1',
+  },
+};
+
+export const Body2: Story = {
+  args: {
+    variant: 'body2',
+    children: 'Основной текст 2',
+  },
+};
+
+export const Button: Story = {
+  args: {
+    variant: 'button',
+    children: 'Текст кнопки',
+  },
+};
+
+export const Caption: Story = {
+  args: {
+    variant: 'caption',
+    children: 'Подпись',
+  },
+};
+
+export const Overline: Story = {
+  args: {
+    variant: 'overline',
+    children: 'Надстрочный текст',
+  },
+};
+
+export const CustomComponent: Story = {
+  args: {
+    variant: 'h1',
+    component: 'p',
+    children: 'Заголовок H1 в теге p',
+  },
+};

package/src/components/view/Typography/Typography.tsx

@@ -0,0 +1,28 @@
+import classnames from 'classnames';
+import { ElementType, HTMLProps, forwardRef } from 'react';
+
+import { TypographyVariant } from '@models/TypographyVariant';
+
+import * as styles from './typography.module.css';
+
+interface Props {
+  variant?: TypographyVariant;
+  component?: ElementType;
+}
+
+export const Typography = forwardRef<HTMLParagraphElement, HTMLProps<HTMLParagraphElement> & Props>(function Typography(
+  { variant = 'body2', component, children, className, ...typographyProps },
+  propRef,
+) {
+  const Component = component || 'span';
+
+  return (
+    <Component
+      className={classnames(styles[variant as keyof typeof styles], className)}
+      {...typographyProps}
+      ref={propRef}
+    >
+      {children}
+    </Component>
+  );
+});

package/{components/view/Typography/index.d.ts → src/components/view/Typography/index.ts}

@@ -1,2 +1 @@
 export { Typography } from './Typography';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/Typography/typography.module.css

@@ -0,0 +1,132 @@
+.h1 {
+  font-size: var(--text-headline1-size);
+  font-weight: var(--text-headline1-weight);
+  line-height: var(--text-headline1-height);
+  letter-spacing: var(--text-headline1-letter);
+}
+
+.h2 {
+  font-size: var(--text-headline2-size);
+  font-weight: var(--text-headline2-weight);
+  line-height: var(--text-headline2-height);
+  letter-spacing: var(--text-headline2-letter);
+}
+
+.h3 {
+  font-size: var(--text-headline3-size);
+  font-weight: var(--text-headline3-weight);
+  line-height: var(--text-headline3-height);
+  letter-spacing: var(--text-headline3-letter);
+}
+
+.h4 {
+  font-size: var(--text-headline4-size);
+  font-weight: var(--text-headline4-weight);
+  line-height: var(--text-headline4-height);
+  letter-spacing: var(--text-headline4-letter);
+}
+
+.h5 {
+  font-size: var(--text-headline5-size);
+  font-weight: var(--text-headline5-weight);
+  line-height: var(--text-headline5-height);
+  letter-spacing: var(--text-headline5-letter);
+}
+
+.h6 {
+  font-size: var(--text-headline6-size);
+  font-weight: var(--text-headline6-weight);
+  line-height: var(--text-headline6-height);
+  letter-spacing: var(--text-headline6-letter);
+}
+
+.h7 {
+  font-size: var(--text-headline7-size);
+  font-weight: var(--text-headline7-weight);
+  line-height: var(--text-headline7-height);
+  letter-spacing: var(--text-headline7-letter);
+}
+
+.subtitle1 {
+  font-size: var(--text-subtitle1-size);
+  font-weight: var(--text-subtitle1-weight);
+  line-height: var(--text-subtitle1-height);
+  letter-spacing: var(--text-subtitle1-letter);
+}
+
+.subtitle2 {
+  font-size: var(--text-subtitle2-size);
+  font-weight: var(--text-subtitle2-weight);
+  line-height: var(--text-subtitle2-height);
+  letter-spacing: var(--text-subtitle2-letter);
+}
+
+.subtitle3 {
+  font-size: var(--text-subtitle3-size);
+  font-weight: var(--text-subtitle3-weight);
+  line-height: var(--text-subtitle3-height);
+  letter-spacing: var(--text-subtitle3-letter);
+}
+
+.body1 {
+  font-size: var(--text-body1-size);
+  font-weight: var(--text-body1-weight);
+  line-height: var(--text-body1-height);
+  letter-spacing: var(--text-body1-letter);
+}
+
+.body2 {
+  font-size: var(--text-body2-size);
+  font-weight: var(--text-body2-weight);
+  line-height: var(--text-body2-height);
+  letter-spacing: var(--text-body2-letter);
+}
+
+.body3 {
+  font-size: var(--text-body3-size);
+  font-weight: var(--text-body3-weight);
+  line-height: var(--text-body3-height);
+  letter-spacing: var(--text-body3-letter);
+}
+
+.button {
+  font-size: var(--text-button-size);
+  font-weight: var(--text-button-weight);
+  line-height: var(--text-button-height);
+  letter-spacing: var(--text-button-letter);
+}
+
+.caption {
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-height);
+  letter-spacing: var(--text-caption-letter);
+}
+
+.caption2 {
+  font-size: var(--text-caption2-size);
+  font-weight: var(--text-caption2-weight);
+  line-height: var(--text-caption2-height);
+  letter-spacing: var(--text-caption2-letter);
+}
+
+.doubleCaption {
+  font-size: var(--text-double-caption-size);
+  font-weight: var(--text-double-caption-weight);
+  line-height: var(--text-double-caption-height);
+  letter-spacing: var(--text-double-caption-letter);
+}
+
+.overline {
+  font-size: var(--text-overline-size);
+  font-weight: var(--text-overline-weight);
+  line-height: var(--text-overline-height);
+  letter-spacing: var(--text-overline-letter);
+}
+
+.label {
+  font-size: var(--text-label-size);
+  font-weight: var(--text-label-weight);
+  line-height: var(--text-label-height);
+  letter-spacing: var(--text-label-letter);
+}

package/src/components/view/VirtualTable/VirtualTable.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Tabs } from '@components/navigation/Tabs';
+import { DeleteIcon, DoneIcon } from '@icons/index';
+
+import { baseColumns } from './constants/baseColumns';
+import { bigBaseColumns } from './constants/bigBaseColumns';
+import { bigSampleData } from './constants/bigSampleData';
+import { sampleData } from './constants/sampleData';
+import { TableColumn } from './models/TableColumn';
+import { TableRow } from './models/TableRow';
+import { VirtualTable } from './VirtualTable';
+
+/** Колонка «Статус»: фильтр по значениям + пункт меню «Только уникальные». */
+const columnsWithSelectUniqueStatus: TableColumn[] = baseColumns.map((col) =>
+  col.id === 'status' ? { ...col, selectUnique: true } : col,
+);
+
+const meta: Meta<typeof VirtualTable> = {
+  title: 'View/VirtualTable',
+  component: VirtualTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VirtualTable>;
+
+const rowspanSampleData: TableRow[] = [
+  {
+    id: { value: '1' },
+    name: { value: 'Группа А', rowspan: 3 },
+    age: { value: 31 },
+    email: { value: 'group-a@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: '1993-05-23T00:00:00.000Z' },
+    prop2: { value: 'Объединение 3 строки' },
+    prop3: { value: 'Короткий текст' },
+  },
+  {
+    id: { value: '2' },
+    name: { value: 'Скрытая ячейка name' },
+    age: { value: 28 },
+    email: { value: 'a-2@example.com' },
+    status: { value: 'Отдельный статус', rowspan: 2 },
+    birthday: { value: '1996-01-10T00:00:00.000Z' },
+    prop2: { value: 'Вторая строка группы' },
+    prop3: { value: 'Текст с переносом\nдля проверки динамической высоты строки.' },
+  },
+  {
+    id: { value: '3' },
+    name: { value: 'Скрытая ячейка name' },
+    age: { value: 27 },
+    email: { value: 'a-3@example.com' },
+    status: { value: 'Скрытая ячейка status' },
+    birthday: { value: '1997-03-11T00:00:00.000Z' },
+    prop2: { value: 'Третья строка группы' },
+    prop3: { value: 'Еще одна строка' },
+  },
+  {
+    id: { value: '4' },
+    name: { value: 'Группа B', rowspan: 2 },
+    age: { value: 35 },
+    email: { value: 'group-b@example.com' },
+    status: { value: 'Неактивен' },
+    birthday: { value: '1989-08-08T00:00:00.000Z' },
+    prop2: { value: 'Объединение 2 строки' },
+    prop3: {
+      value:
+        'Длинный текст в соседнем столбце.\nОн увеличивает высоту строки,\n' +
+        'и rowspan должен корректно пересчитать суммарную высоту.',
+    },
+  },
+  {
+    id: { value: '5' },
+    name: { value: 'Скрытая ячейка name' },
+    age: { value: 22 },
+    email: { value: 'b-2@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: '2002-02-20T00:00:00.000Z' },
+    prop2: { value: 'Вторая строка группы B' },
+    prop3: { value: 'Короткий текст' },
+  },
+  {
+    id: { value: '6' },
+    name: { value: 'Обычная строка' },
+    age: { value: 29 },
+    email: { value: 'single@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: '1995-11-30T00:00:00.000Z' },
+    prop2: { value: 'Без объединения' },
+    prop3: { value: 'Обычная ячейка для сравнения' },
+  },
+];
+
+export const Basic: Story = {
+  name: 'Базовый пример',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    height: 200,
+    showUniqueValuesCount: true,
+  },
+};
+
+export const WithSelectRows: Story = {
+  name: 'С выделением строк',
+  render: () => {
+    const [selectedRows, setSelectedRows] = useState<TableRow[]>([sampleData[3], sampleData[4]]);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div>Выделено строк: {selectedRows.length}</div>
+        <VirtualTable
+          rows={sampleData}
+          columns={baseColumns}
+          height={320}
+          enableSelectRows
+          globalSelectedRows={[sampleData[3], sampleData[4]]}
+          onSelectRowsChange={setSelectedRows}
+          showRowsNumbers
+        />
+      </div>
+    );
+  },
+};
+
+export const WithFixedColumns: Story = {
+  name: 'С фиксированными колонками',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    fixedColumnsCount: 2,
+    height: 200,
+  },
+};
+
+export const WithRowsNumber: Story = {
+  name: 'С номерами строк',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    height: 200,
+    showRowsNumbers: true,
+    showUniqueValuesCount: true,
+  },
+};
+
+export const WithActionButtons: Story = {
+  name: 'C кнопками действий',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    rowButtons: () => [
+      {
+        title: 'Редактировать',
+        icon: <DoneIcon />,
+        onClick: (index, original) => console.log('Edit', index, original),
+      },
+      {
+        title: 'Удалить',
+        icon: <DeleteIcon />,
+        onClick: (index, original) => console.log('Delete', index, original),
+      },
+    ],
+    height: 200,
+  },
+};
+
+export const WithDynamicRowHeight: Story = {
+  name: 'C динамической высотой строк',
+  args: {
+    rows: bigSampleData,
+    columns: bigBaseColumns,
+    dynamicRowHeight: true,
+    height: 200,
+  },
+};
+
+export const WithCustomCellWidth: Story = {
+  name: 'C кастомной шириной ячеек',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    cellWidth: (index) => (index === 0 ? 150 : 200),
+    height: 200,
+  },
+};
+
+export const WithFixedColumnsActionButtonsDynamicRowHeight: Story = {
+  name: 'C фиксированными колонками, кнопками действий и динамической высотой строк',
+  args: {
+    rows: bigSampleData,
+    columns: bigBaseColumns,
+    fixedColumnsCount: 2,
+    dynamicRowHeight: true,
+    rowButtons: () => [
+      {
+        title: 'Редактировать',
+        icon: <DoneIcon />,
+        onClick: (index, original) => console.log('Edit', index, original),
+      },
+      {
+        title: 'Удалить',
+        icon: <DeleteIcon />,
+        onClick: (index, original) => console.log('Delete', index, original),
+      },
+    ],
+    height: 200,
+  },
+};
+
+export const UseTableContainerAsRootForPopup: Story = {
+  name: 'Использовать контейнер таблицы в качестве родителя для всплывающих окон',
+  args: {
+    rows: sampleData,
+    columns: baseColumns,
+    height: 500,
+    useTableContainerAsRootForPopup: true,
+  },
+};
+
+export const TwoTablesInTabs: Story = {
+  name: 'Две таблицы во вкладках (попап в header)',
+  render: () => {
+    const [tab, setTab] = useState<'a' | 'b'>('a');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 400 }}>
+        <Tabs<'a' | 'b'>
+          items={[
+            { name: 'Таблица A', value: 'a' },
+            { name: 'Таблица B', value: 'b' },
+          ]}
+          useExternalState
+          value={tab}
+          onChange={(v) => setTab(v ?? 'a')}
+        />
+        {tab === 'a' && (
+          <VirtualTable
+            key="vt-a"
+            rows={sampleData}
+            columns={baseColumns}
+            height={280}
+            useTableContainerAsRootForPopup
+            showUniqueValuesCount
+          />
+        )}
+        {tab === 'b' && (
+          <VirtualTable
+            key="vt-b"
+            rows={bigSampleData}
+            columns={bigBaseColumns}
+            height={280}
+            useTableContainerAsRootForPopup
+            showUniqueValuesCount
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithRowspanCells: Story = {
+  name: 'C ячейками rowspan',
+  args: {
+    rows: rowspanSampleData,
+    columns: baseColumns,
+    dynamicRowHeight: true,
+    height: 280,
+  },
+};
+
+export const WithSelectUnique: Story = {
+  name: 'Только уникальные значения (меню колонки)',
+  args: {
+    rows: sampleData,
+    columns: columnsWithSelectUniqueStatus,
+    height: 420,
+    showUniqueValuesCount: true,
+    useTableContainerAsRootForPopup: true,
+  },
+};