docs: add virtualized grid description and component (#1892)

src/storybook/components/related-components/component-description-map.tsx

@@ -55,6 +55,7 @@ import { SliderDescription } from "./descriptions/slider-description";
 import { IconDescription } from "./descriptions/icon-description";
 import { BoxDescription } from "./descriptions/box-description";
 import { TableDescription } from "./descriptions/table-description";
+import { VirtualizedGridDescription } from "./descriptions/virtualized-grid-description/virtualized-grid-description";
 
 export const SPLIT_BUTTON = "split-button";
 export const BUTTON_GROUP = "button-group";
@@ -104,6 +105,7 @@ export const TEXT = "text";
 export const ACCORDION = "accordion";
 export const EXPAND_COLLAPSE = "expand-collapse";
 export const VIRTUALIZED_LIST = "virtualized-list";
+export const VIRTUALIZED_GRID = "virtualized-grid";
 export const COLOR_PICKER = "color-picker";
 export const SLIDER = "slider";
 export const BOX = "box";
@@ -165,6 +167,7 @@ const COMPONENTS_DESCRIPTIONS_ENTRIES: [string, JSX.Element][] = [
   [ACCORDION, <AccordionDescription />],
   [EXPAND_COLLAPSE, <ExpandCollapseDescription />],
   [VIRTUALIZED_LIST, <VirtualizedListDescription />],
+  [VIRTUALIZED_GRID, <VirtualizedGridDescription />],
   [COLOR_PICKER, <ColorPickerDescription />],
   [BOX, <BoxDescription />],
   [TABLE, <TableDescription />]

src/storybook/components/related-components/descriptions/virtualized-grid-description/virtualized-grid-description.jsx

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { RelatedComponent } from "vibe-storybook-components";
+import VirtualizedGrid from "../../../../../components/VirtualizedGrid/VirtualizedGrid";
+import {
+  generateItems,
+  itemRenderer
+} from "../../../../../components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.helpers";
+import styles from "./virtualizedGrid.module.scss";
+
+export const VirtualizedGridDescription = () => {
+  const component = useMemo(() => {
+    return (
+      <div className={styles.virtualizedGridItem}>
+        <div className={styles.virtualizedGridItemChild}>
+          <VirtualizedGrid id={"id"} items={generateItems(50, 100, 50)} itemRenderer={itemRenderer} />
+        </div>
+      </div>
+    );
+  }, []);
+  return (
+    <RelatedComponent
+      component={component}
+      title="VirtualizedGrid"
+      href="/?path=/docs/navigation-virtualizedgrid--docs"
+      description="VirtualizedGrid is a component which only renders visible grid items, it is a logic component and doesn't change and look and feel."
+    />
+  );
+};

src/storybook/components/related-components/descriptions/virtualized-grid-description/virtualizedGrid.module.scss

@@ -0,0 +1,12 @@
+.virtualizedGridItem {
+  display: flex;
+  align-items: center;
+  overflow-x: hidden;
+  width: 230px;
+  height: 100%;
+}
+
+.virtualizedGridItemChild {
+  width: inherit;
+  height: inherit;
+}