feat(pkg.gridvirtualizer): add gridvirtualizer

Author: avea-maria

apps/xi.storybook/src/stories/GridVirtualizer.stories.tsx

@@ -0,0 +1,145 @@
+import { useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GridVirtualizer } from '@xipkg/gridvirtualizer';
+
+type TMaterialItem = {
+  id: number;
+  title: string;
+  color: string;
+};
+
+const generateItems = (count: number): TMaterialItem[] => {
+  const colors = [
+    '#FF6B6B',
+    '#4ECDC4',
+    '#45B7D1',
+    '#96CEB4',
+    '#FFEAA7',
+    '#DDA0DD',
+    '#FF8C94',
+    '#88D8A8',
+  ];
+
+  return Array.from({ length: count }, (_, index) => ({
+    id: index + 1,
+    title: `Item ${index + 1}`,
+    color: colors[index % colors.length],
+  }));
+};
+
+const items = generateItems(100);
+
+const meta = {
+  title: 'Components/GridVirtualizer',
+  component: GridVirtualizer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: 'Массив данных',
+    },
+    defaultRowHeight: {
+      control: 'number',
+      description: 'Высота строки',
+      defaultValue: 100,
+    },
+    minItemWidth: {
+      control: 'number',
+      description: 'Ширина компонента, который рендерится',
+      defaultValue: 0,
+    },
+    gap: {
+      control: 'number',
+      defaultValue: 0,
+    },
+    maxColumns: {
+      control: 'number',
+      description: 'Количество колонок в сетке',
+      defaultValue: 1,
+    },
+    isSingleColumn: {
+      control: 'boolean',
+      description: 'Grid-сетка в одну колонку для мобильных версий',
+      defaultValue: false,
+    },
+    overscan: {
+      control: 'number',
+      description:
+        'Количество дополнительных строк, которые виртуализатор рендерит за пределами видимой области (сверху и снизу)',
+      defaultValue: 5,
+    },
+  },
+} satisfies Meta<typeof GridVirtualizer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type TCard = {
+  label: string;
+};
+
+const Card = ({ label }: TCard) => (
+  <div className="hover:border-brand-80 border-gray-20 bg-gray-0 w-full cursor-pointer rounded-md border p-2 transition-all duration-200">
+    <span>{label}</span>
+  </div>
+);
+
+const DefaultGridVirtualizer = (args: React.ComponentProps<typeof GridVirtualizer>) => {
+  console.log('args', args);
+  const parentRef = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      ref={parentRef}
+      className="bg-gray-10 h-[200px] w-[400px] flex-1 overflow-auto"
+      style={{
+        scrollbarWidth: 'none' /* Firefox */,
+        msOverflowStyle: 'none' /* IE/Edge */,
+      }}
+    >
+      <GridVirtualizer
+        {...args}
+        parentRef={parentRef}
+        items={items}
+        renderItem={(item) => <Card key={item.id} label={item.title} />}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: DefaultGridVirtualizer,
+  args: {
+    defaultRowHeight: 30,
+    minItemWidth: 100,
+    gap: 0,
+    maxColumns: 4,
+    isSingleColumn: false,
+    overscan: 5,
+  } as React.ComponentProps<typeof GridVirtualizer>,
+};
+
+export const SingleColumn: Story = {
+  render: DefaultGridVirtualizer,
+  args: {
+    defaultRowHeight: 30,
+    minItemWidth: 100,
+    gap: 0,
+    maxColumns: 4,
+    isSingleColumn: true,
+    overscan: 5,
+  } as React.ComponentProps<typeof GridVirtualizer>,
+};
+
+export const TwoColumnsGap: Story = {
+  render: DefaultGridVirtualizer,
+  args: {
+    defaultRowHeight: 30,
+    minItemWidth: 100,
+    gap: 5,
+    maxColumns: 3,
+    isSingleColumn: false,
+    overscan: 5,
+  } as React.ComponentProps<typeof GridVirtualizer>,
+};

package-lock.json

@@ -0,0 +1,103 @@
+import { RefObject, useCallback, useLayoutEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useResponsiveGrid } from './hooks';
+
+type TItem = {
+  id: number;
+};
+
+export type TGridVirtualizer<T> = {
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+  className?: string;
+  parentRef: RefObject<HTMLDivElement | null>;
+  defaultRowHeight?: number;
+  minItemWidth?: number;
+  gap?: number;
+  maxColumns?: number;
+  isSingleColumn?: boolean;
+  overscan?: number;
+};
+
+export const GridVirtualizer = <T extends TItem>({
+  items,
+  renderItem,
+  className,
+  parentRef,
+  defaultRowHeight = 100,
+  minItemWidth = 0,
+  gap = 0,
+  maxColumns = 1,
+  isSingleColumn = false,
+  overscan = 5,
+  ...props
+}: TGridVirtualizer<T>) => {
+  const { colCount: responsiveColCount } = useResponsiveGrid(
+    parentRef,
+    minItemWidth,
+    gap,
+    maxColumns,
+  );
+  const colCount = isSingleColumn ? 1 : responsiveColCount;
+
+  const rowVirtualizer = useVirtualizer({
+    count: Math.ceil(items.length / colCount),
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => defaultRowHeight + gap,
+    overscan,
+  });
+
+  const measureRow = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        rowVirtualizer.measureElement(element);
+      }
+    },
+    [rowVirtualizer],
+  );
+
+  useLayoutEffect(() => {
+    rowVirtualizer.measure();
+  }, [items.length, colCount, rowVirtualizer]);
+
+  return (
+    <div
+      className={className}
+      style={{
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        width: '100%',
+        position: 'relative',
+      }}
+      {...props}
+    >
+      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+        const startIndex = virtualItem.index * colCount;
+        const endIndex = Math.min(startIndex + colCount, items.length);
+        const rowItems = items.slice(startIndex, endIndex);
+
+        return (
+          <div
+            key={virtualItem.key}
+            data-index={virtualItem.index}
+            ref={measureRow}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              display: 'grid',
+              gap,
+              paddingBottom: gap,
+              gridTemplateColumns: `repeat(${colCount}, minmax(${minItemWidth}px, 1fr)`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            {rowItems.map((item) => (
+              <div key={item.id}>{renderItem(item)}</div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

packages/pkg.grid.virtualizer/GridVirtualizer.tsx

@@ -0,0 +1 @@
+export { useResponsiveGrid } from './useResponsiveGrid';

packages/pkg.grid.virtualizer/hooks/index.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState, RefObject } from 'react';
+import { calculateColCount } from '../utils';
+
+export const useResponsiveGrid = (
+  parentRef: RefObject<HTMLDivElement | null>,
+  itemWidth: number,
+  gap: number,
+  maxColumns: number,
+) => {
+  const [colCount, setColCount] = useState(1);
+
+  // Вычисляем количество колонок
+  useEffect(() => {
+    const el = parentRef.current;
+    if (!el) return;
+
+    const ro = new ResizeObserver(([entry]) => {
+      const { width } = entry.contentRect;
+      const cols = calculateColCount({ width, maxColumns, gap, itemWidth });
+      setColCount(cols);
+    });
+    ro.observe(el);
+
+    setColCount(calculateColCount({ width: el.clientWidth, maxColumns, gap, itemWidth }));
+
+    return () => ro.disconnect();
+  }, [parentRef, itemWidth, maxColumns, gap]);
+
+  return { colCount };
+};

packages/pkg.grid.virtualizer/hooks/useResponsiveGrid.ts

@@ -0,0 +1 @@
+export { GridVirtualizer } from './GridVirtualizer';