nntc-ui 0.2.6 → 0.2.8

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

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

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

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

@@ -1,28 +0,0 @@
-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/src/components/view/Typography/typography.module.css

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

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