Adds rowHeight story.

Author: natalyjazzviolin

src/components/Grid/Grid.stories.tsx

@@ -2,14 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from "..";
 import { Grid as CUIGrid } from "./Grid";
 
-const Cell: CellProps = ({
-  type,
-  rowIndex,
-  columnIndex,
-  isScrolling,
-  width,
-  ...props
-}) => {
+const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
   return (
     <div
       data-scrolling={isScrolling}
@@ -27,6 +20,7 @@ interface Props {
     row: number;
     column: number;
   };
+  autoheight?: boolean;
 }
 const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
   const [focus, setFocus] = useState(focusProp);
@@ -78,6 +72,7 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
           });
         }}
         getMenuOptions={getMenuOptions}
+        autoheight={props.autoheight}
         {...props}
       />
     </div>
@@ -128,3 +123,109 @@ export const Playground = {
     },
   },
 };
+
+export const AutoHeightWithVariableData = {
+  args: {
+    rowCount: 10,
+    columnCount: 5,
+    autoheight: true,
+    rowStart: 0,
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
+          const { rowCount, columnCount, autoheight, ...props } = story.args;
+          return `
+const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
+  let content = \`Row \${rowIndex}, Col \${columnIndex}\${rowIndex % 2 === 0 ? '\\nExtra line' : ''}\`;
+  
+  if (rowIndex === 0 && columnIndex === 0) {
+    content = \`CREATE TABLE random_user_events (
+    user_id UInt32,
+    event_time DateTime,
+    event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
+    item_id String,
+    price Decimal(10,2),
+    quantity UInt16
+) ENGINE = MergeTree()
+ORDER BY (user_id, event_time)
+PARTITION BY toYYYYMM(event_time)
+SETTINGS index_granularity = 8192;\`;
+  }
+
+  return (
+    <div
+      data-scrolling={isScrolling}
+      style={{
+        whiteSpace: 'pre-wrap',
+        padding: '8px',
+        borderBottom: '1px solid #ccc',
+        fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
+        fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
+      }}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};
+
+<Grid
+  cell={VariableCell}
+  focus={{ row: 0, column: 0 }}
+  columnWidth={() => 300}
+  autoheight={${autoheight}}
+${Object.entries(props)
+  .flatMap(([key, value]) =>
+    typeof value === "boolean"
+      ? value
+        ? `  ${key}`
+        : []
+      : `  ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
+  )
+  .join("\n")}
+/>
+`;
+        },
+      },
+    },
+  },
+  render: (args) => {
+    const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
+      let content = `Row ${rowIndex}, Col ${columnIndex}${rowIndex % 2 === 0 ? '\nExtra line' : ''}`;
+      
+      if (rowIndex === 0 && columnIndex === 0) {
+        content = `CREATE TABLE random_user_events (
+    user_id UInt32,
+    event_time DateTime,
+    event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
+    item_id String,
+    price Decimal(10,2),
+    quantity UInt16
+) ENGINE = MergeTree()
+ORDER BY (user_id, event_time)
+PARTITION BY toYYYYMM(event_time)
+SETTINGS index_granularity = 8192;`;
+      }
+
+      return (
+        <div
+          data-scrolling={isScrolling}
+          style={{
+            whiteSpace: 'pre-wrap',
+            padding: '8px',
+            borderBottom: '1px solid #ccc',
+            fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
+            fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
+          }}
+          {...props}
+        >
+          {content}
+        </div>
+      );
+    };
+
+    return <Grid {...args} cell={VariableCell} columnWidth={() => 300} />;
+  },
+};