From 4c3143f3e52016af1a549273824c42ccad4f1d58 Mon Sep 17 00:00:00 2001
From: Dmitry Artemov <d-artemov@yandex-team.ru>
Date: Thu, 18 Jul 2024 11:57:08 +0200
Subject: [PATCH] feat(Table): get rid of gravity usage in the base table

---
 .../SortIndicator/SortIndicator.scss          | 13 +++--
 src/components/Table/Table.scss               | 47 +++++--------------
 .../ColumnPinningDemo.classname.ts            |  4 +-
 .../__stories__/ColumnPinningDemo.scss        |  6 +--
 .../__stories__/GroupingDemo.classname.ts     |  3 ++
 src/components/__stories__/GroupingDemo.scss  |  5 ++
 src/components/__stories__/GroupingDemo.tsx   | 12 ++++-
 src/components/__stories__/GroupingDemo2.tsx  | 12 ++++-
 .../__stories__/GroupingWithSelectionDemo.tsx | 11 ++++-
 .../__stories__/HeaderGroupsDemo.classname.ts |  2 +-
 .../__stories__/TreeWithGroupsDemo.tsx        | 12 ++++-
 .../VirtualizationDemo.classname.ts           |  3 ++
 .../__stories__/VirtualizationDemo.scss       |  5 ++
 .../__stories__/VirtualizationDemo.tsx        | 10 +++-
 .../__stories__/WindowVirtualizationDemo.tsx  | 12 ++++-
 .../cells/ColumnPinningHeaderCell.tsx         |  6 +--
 .../__stories__/constants/columnPinning.tsx   | 25 ++--------
 src/utils/renderDefaultGroupHeader.tsx        | 13 ++++-
 18 files changed, 121 insertions(+), 80 deletions(-)
 create mode 100644 src/components/__stories__/GroupingDemo.classname.ts
 create mode 100644 src/components/__stories__/GroupingDemo.scss
 create mode 100644 src/components/__stories__/VirtualizationDemo.classname.ts
 create mode 100644 src/components/__stories__/VirtualizationDemo.scss

diff --git a/src/components/SortIndicator/SortIndicator.scss b/src/components/SortIndicator/SortIndicator.scss
index f6ad760..4630bd8 100644
--- a/src/components/SortIndicator/SortIndicator.scss
+++ b/src/components/SortIndicator/SortIndicator.scss
@@ -1,20 +1,25 @@
 @use '../variables';
 
 $block: '.#{variables.$ns}sort-indicator';
+$blockTable: '.#{variables.$ns}table';
 
 #{$block} {
     display: inline-flex;
-    align-items: center;
-
-    transform: rotate(180deg);
+    margin-inline-start: 4px;
+    vertical-align: middle;
+    transform: rotate(0);
 
     color: var(--g-color-text-hint);
 
     &_invisible {
         opacity: 0;
+
+        #{$blockTable}__header-cell:hover & {
+            opacity: 1;
+        }
     }
 
     &_order_asc {
-        transform: rotate(0);
+        transform: rotate(180deg);
     }
 }
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
index 751b4d5..575f2bc 100644
--- a/src/components/Table/Table.scss
+++ b/src/components/Table/Table.scss
@@ -14,17 +14,9 @@ $block: '.#{variables.$ns}table';
     &__row {
         &_interactive {
             cursor: pointer;
-
-            &:hover {
-                background-color: var(--g-color-base-generic);
-            }
         }
     }
 
-    &__header {
-        background: var(--g-color-base-background);
-    }
-
     &__cell,
     &__header-cell {
         height: inherit;
@@ -36,10 +28,6 @@ $block: '.#{variables.$ns}table';
         font-weight: normal;
     }
 
-    &__sort-indicator {
-        margin-inline-start: var(--g-spacing-1);
-    }
-
     &__header-cell {
         position: relative;
 
@@ -48,12 +36,6 @@ $block: '.#{variables.$ns}table';
         &_sortable {
             cursor: pointer;
             user-select: none;
-
-            &:hover {
-                #{$block}__sort-indicator {
-                    opacity: 1;
-                }
-            }
         }
 
         &:hover {
@@ -61,26 +43,30 @@ $block: '.#{variables.$ns}table';
                 opacity: 1;
             }
         }
-
-        &_wide {
-        }
     }
 
-    &__group-title-wrapper {
+    &__group-title {
         position: sticky;
         inset-inline-start: 0;
-        padding: var(--g-spacing-1) 0;
+        margin: 0;
     }
 
-    &__group-title {
-        margin: 0;
+    &__group-title-arrow {
+        display: inline-block;
+        vertical-align: middle;
+        transform: rotate(-90deg);
+        transition: transform 0.1s ease-out;
+
+        &_down {
+            transform: rotate(0);
+        }
     }
 
     &__group-expand-button {
         appearance: none;
 
         display: flex;
-        gap: var(--g-spacing-2);
+        gap: 8px;
         padding: 0;
         width: 100%;
 
@@ -92,15 +78,8 @@ $block: '.#{variables.$ns}table';
 
     &__group-title-content {
         display: inline-flex;
-        gap: var(--g-spacing-1);
-
-        font-size: var(--g-text-body-2-font-size);
+        gap: 4px;
         font-weight: 500;
-        line-height: var(--g-text-body-2-line-height);
-    }
-
-    &__group-total {
-        color: var(--g-color-text-secondary);
     }
 
     &__resizer {
diff --git a/src/components/__stories__/ColumnPinningDemo.classname.ts b/src/components/__stories__/ColumnPinningDemo.classname.ts
index 3e7a3bf..11c60f1 100644
--- a/src/components/__stories__/ColumnPinningDemo.classname.ts
+++ b/src/components/__stories__/ColumnPinningDemo.classname.ts
@@ -1,3 +1,3 @@
-import {block} from '../../utils';
+import {cn} from '../../utils';
 
-export const cnColumnPinningDemo = block('column-pinning-demo');
+export const cnColumnPinningDemo = cn('column-pinning-demo');
diff --git a/src/components/__stories__/ColumnPinningDemo.scss b/src/components/__stories__/ColumnPinningDemo.scss
index b542f76..a2e7043 100644
--- a/src/components/__stories__/ColumnPinningDemo.scss
+++ b/src/components/__stories__/ColumnPinningDemo.scss
@@ -1,8 +1,4 @@
-@use '../variables';
-
-$block: '.#{variables.$ns}column-pinning-demo';
-
-#{$block} {
+.column-pinning-demo {
     --default-border: 1px solid var(--g-color-line-generic);
 
     width: 600px;
diff --git a/src/components/__stories__/GroupingDemo.classname.ts b/src/components/__stories__/GroupingDemo.classname.ts
new file mode 100644
index 0000000..4299ad6
--- /dev/null
+++ b/src/components/__stories__/GroupingDemo.classname.ts
@@ -0,0 +1,3 @@
+import {cn} from '../../utils';
+
+export const cnGroupingDemo = cn('grouping-demo');
diff --git a/src/components/__stories__/GroupingDemo.scss b/src/components/__stories__/GroupingDemo.scss
new file mode 100644
index 0000000..7661484
--- /dev/null
+++ b/src/components/__stories__/GroupingDemo.scss
@@ -0,0 +1,5 @@
+.grouping-demo {
+    .gt-table__group-total {
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/src/components/__stories__/GroupingDemo.tsx b/src/components/__stories__/GroupingDemo.tsx
index e403412..ae2d36c 100644
--- a/src/components/__stories__/GroupingDemo.tsx
+++ b/src/components/__stories__/GroupingDemo.tsx
@@ -5,9 +5,12 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {GroupOrItem} from './constants/grouping';
 import {columns, data} from './constants/grouping';
 
+import './GroupingDemo.scss';
+
 const checkIsGroupRow = (row: Row<GroupOrItem>) => 'items' in row.original;
 const getGroupTitle = (row: Row<GroupOrItem>) => row.getValue<string>('name');
 
@@ -26,5 +29,12 @@ export const GroupingDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };
diff --git a/src/components/__stories__/GroupingDemo2.tsx b/src/components/__stories__/GroupingDemo2.tsx
index 5dd3eb5..52c7902 100644
--- a/src/components/__stories__/GroupingDemo2.tsx
+++ b/src/components/__stories__/GroupingDemo2.tsx
@@ -5,10 +5,13 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import {columns} from './constants/columns';
 import type {Item} from './types';
 import {generateData} from './utils';
 
+import './GroupingDemo.scss';
+
 const data = generateData(300);
 const grouping: Array<keyof Item> = ['status', 'age'];
 
@@ -31,5 +34,12 @@ export const GroupingDemo2 = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };
diff --git a/src/components/__stories__/GroupingWithSelectionDemo.tsx b/src/components/__stories__/GroupingWithSelectionDemo.tsx
index 47bfab3..2a0026a 100644
--- a/src/components/__stories__/GroupingWithSelectionDemo.tsx
+++ b/src/components/__stories__/GroupingWithSelectionDemo.tsx
@@ -6,9 +6,11 @@ import {defaultSelectionColumn} from '../../constants';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {GroupOrItem} from './constants/grouping';
 import {data, columns as originalColumns} from './constants/grouping';
 
+import './GroupingDemo.scss';
 const columns: ColumnDef<GroupOrItem>[] = [
     defaultSelectionColumn as ColumnDef<GroupOrItem>,
     ...originalColumns,
@@ -37,5 +39,12 @@ export const GroupingWithSelectionDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };
diff --git a/src/components/__stories__/HeaderGroupsDemo.classname.ts b/src/components/__stories__/HeaderGroupsDemo.classname.ts
index 55a06b6..f169213 100644
--- a/src/components/__stories__/HeaderGroupsDemo.classname.ts
+++ b/src/components/__stories__/HeaderGroupsDemo.classname.ts
@@ -1,3 +1,3 @@
-import {cn} from '@bem-react/classname';
+import {cn} from '../../utils';
 
 export const cnHeaderGroupsDemo = cn('header-groups-demo');
diff --git a/src/components/__stories__/TreeWithGroupsDemo.tsx b/src/components/__stories__/TreeWithGroupsDemo.tsx
index e43a0ca..664591d 100644
--- a/src/components/__stories__/TreeWithGroupsDemo.tsx
+++ b/src/components/__stories__/TreeWithGroupsDemo.tsx
@@ -5,9 +5,12 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {TreeGroupItem} from './constants/tree';
 import {groupsColumns, groupsData} from './constants/tree';
 
+import './GroupingDemo.scss';
+
 const checkIsGroupRow = (row: Row<TreeGroupItem>) => 'items' in row.original;
 const getGroupTitle = (row: Row<TreeGroupItem>) => row.getValue<string>('name');
 
@@ -26,5 +29,12 @@ export const TreeWithGroupsDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };
diff --git a/src/components/__stories__/VirtualizationDemo.classname.ts b/src/components/__stories__/VirtualizationDemo.classname.ts
new file mode 100644
index 0000000..aaba477
--- /dev/null
+++ b/src/components/__stories__/VirtualizationDemo.classname.ts
@@ -0,0 +1,3 @@
+import {cn} from '../../utils';
+
+export const cnVirtualizationDemo = cn('virtualization-demo');
diff --git a/src/components/__stories__/VirtualizationDemo.scss b/src/components/__stories__/VirtualizationDemo.scss
new file mode 100644
index 0000000..661fe7d
--- /dev/null
+++ b/src/components/__stories__/VirtualizationDemo.scss
@@ -0,0 +1,5 @@
+.virtualization-demo {
+    &__header {
+        background: var(--g-color-base-background);
+    }
+}
diff --git a/src/components/__stories__/VirtualizationDemo.tsx b/src/components/__stories__/VirtualizationDemo.tsx
index 9a0305b..5beaa8c 100644
--- a/src/components/__stories__/VirtualizationDemo.tsx
+++ b/src/components/__stories__/VirtualizationDemo.tsx
@@ -3,9 +3,12 @@ import React from 'react';
 import {useRowVirtualizer, useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnVirtualizationDemo} from './VirtualizationDemo.classname';
 import {columns} from './constants/columns';
 import {generateData} from './utils';
 
+import './VirtualizationDemo.scss';
+
 const data = generateData(300);
 
 export const VirtualizationDemo = () => {
@@ -26,7 +29,12 @@ export const VirtualizationDemo = () => {
 
     return (
         <div ref={containerRef} style={{height: '90vh', overflow: 'auto'}}>
-            <Table table={table} rowVirtualizer={rowVirtualizer} />
+            <Table
+                table={table}
+                rowVirtualizer={rowVirtualizer}
+                className={cnVirtualizationDemo()}
+                headerClassName={cnVirtualizationDemo('header')}
+            />
         </div>
     );
 };
diff --git a/src/components/__stories__/WindowVirtualizationDemo.tsx b/src/components/__stories__/WindowVirtualizationDemo.tsx
index f8b5ec7..338120f 100644
--- a/src/components/__stories__/WindowVirtualizationDemo.tsx
+++ b/src/components/__stories__/WindowVirtualizationDemo.tsx
@@ -3,9 +3,12 @@ import React from 'react';
 import {useTable, useWindowRowVirtualizer} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnVirtualizationDemo} from './VirtualizationDemo.classname';
 import {columns} from './constants/columns';
 import {generateData} from './utils';
 
+import './VirtualizationDemo.scss';
+
 const data = generateData(300);
 
 export const WindowVirtualizationDemo = () => {
@@ -21,5 +24,12 @@ export const WindowVirtualizationDemo = () => {
         overscan: 5,
     });
 
-    return <Table table={table} rowVirtualizer={rowVirtualizer} />;
+    return (
+        <Table
+            table={table}
+            rowVirtualizer={rowVirtualizer}
+            className={cnVirtualizationDemo()}
+            headerClassName={cnVirtualizationDemo('header')}
+        />
+    );
 };
diff --git a/src/components/__stories__/cells/ColumnPinningHeaderCell.tsx b/src/components/__stories__/cells/ColumnPinningHeaderCell.tsx
index feb3d58..42670f8 100644
--- a/src/components/__stories__/cells/ColumnPinningHeaderCell.tsx
+++ b/src/components/__stories__/cells/ColumnPinningHeaderCell.tsx
@@ -2,18 +2,16 @@ import React from 'react';
 
 import type {HeaderContext} from '@tanstack/react-table';
 
-import type {HeaderCellProps} from '../../HeaderCell';
+import {cnColumnPinningDemo} from '../ColumnPinningDemo.classname';
 
 interface ColumnPinningHeaderCellProps<TData> {
     info: HeaderContext<TData, unknown>;
     value: string;
-    className?: HeaderCellProps<TData, unknown>['className'];
 }
 
 export const ColumnPinningHeaderCell = <TData,>({
     value,
     info,
-    className,
 }: ColumnPinningHeaderCellProps<TData>) => {
     const canPin = info.column.getCanPin();
 
@@ -34,7 +32,7 @@ export const ColumnPinningHeaderCell = <TData,>({
     };
 
     return (
-        <div className={className}>
+        <div className={cnColumnPinningDemo('header-cell')}>
             <div>{value}</div>
             {canPin && (
                 <div>
diff --git a/src/components/__stories__/constants/columnPinning.tsx b/src/components/__stories__/constants/columnPinning.tsx
index c90e0fd..5aeb7d3 100644
--- a/src/components/__stories__/constants/columnPinning.tsx
+++ b/src/components/__stories__/constants/columnPinning.tsx
@@ -2,42 +2,23 @@ import React from 'react';
 
 import type {ColumnDef} from '@tanstack/react-table';
 
-import {cnColumnPinningDemo} from '../ColumnPinningDemo.classname';
 import {ColumnPinningHeaderCell} from '../cells/ColumnPinningHeaderCell';
 import type {Item} from '../types';
 
 export const columns: ColumnDef<Item>[] = [
     {
         accessorKey: 'name',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Name"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
+        header: (info) => <ColumnPinningHeaderCell value="Name" info={info} />,
         minSize: 200,
     },
     {
         accessorKey: 'age',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Age"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
+        header: (info) => <ColumnPinningHeaderCell value="Age" info={info} />,
         minSize: 200,
     },
     {
         accessorKey: 'status',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Status"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
+        header: (info) => <ColumnPinningHeaderCell value="Status" info={info} />,
         minSize: 300,
     },
 ];
diff --git a/src/utils/renderDefaultGroupHeader.tsx b/src/utils/renderDefaultGroupHeader.tsx
index 4b3daf3..379dfed 100644
--- a/src/utils/renderDefaultGroupHeader.tsx
+++ b/src/utils/renderDefaultGroupHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {ArrowToggle} from '@gravity-ui/uikit';
 import type {Row} from '@tanstack/react-table';
 
 import {b} from '../components/Table/Table.classname';
@@ -11,7 +10,17 @@ export const renderDefaultGroupHeader = <TData,>(
 ) => (
     <h2 className={b('group-title')}>
         <button onClick={row.getToggleExpandedHandler()} className={b('group-expand-button')}>
-            <ArrowToggle direction={row.getIsExpanded() ? 'bottom' : 'right'} size={16} />
+            <svg
+                className={b('group-title-arrow', {down: row.getIsExpanded()})}
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+            >
+                <path
+                    d="M2.97 5.47a.75.75 0 0 1 1.06 0L8 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06Z"
+                    fill="currentColor"
+                />
+            </svg>
             <span className={b('group-title-content')}>
                 <span>{getGroupTitle?.(row) ?? row.id}</span>
                 <span className={b('group-total')}>{row.subRows.length ?? ''}</span>