refactor(docs): convert VirtualizedGrid stories FILES to TS

packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx

@@ -50,7 +50,7 @@ export interface VirtualizedGridProps extends VibeComponentProps {
     item: ItemType,
     index: number,
     style: CSSProperties
-  ) => ItemType | ComponentType<GridChildComponentProps<ItemType>>;
+  ) => ItemType | ComponentType<GridChildComponentProps<ItemType>> | JSX.Element;
   /**
    * in order to calculate the number of rows to render in the grid, the component needs the height of the row
    * return `number`

packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.helpers.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { Text } from "../../Text";
-
-export const generateItems = (height = 30, width = "100%", itemsCount) => {
-  const items = [];
-  for (let i = 0; i < itemsCount; i++) {
-    items.push({ value: `Item ${i}`, height, width, id: i });
-  }
-  return items;
-};
-
-export const itemRenderer = (item, index, style) => {
-  if (item) {
-    const backgroundColor = index % 2 === 0 ? "#e1e1e1" : "#f8f8f0";
-    return (
-      <div key={index} style={style}>
-        <Text
-          color={Text.colors.FIXED_DARK}
-          style={{
-            backgroundColor,
-            height: item.height,
-            width: item.width,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          {item.value}
-        </Text>
-      </div>
-    );
-  }
-  return <div key={index} style={style} />;
-};

packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.helpers.tsx

@@ -0,0 +1,40 @@
+import React, { ComponentType } from "react";
+import { GridChildComponentProps } from "react-window";
+import { VirtualizedListItem } from "/workspaces/vibe/packages/core/src/components/VirtualizedList/VirtualizedList";
+import { Text } from "../../Text";
+
+export const generateItems = (height = 30, width = 100, itemsCount: number): VirtualizedListItem[] => {
+  const items: VirtualizedListItem[] = [];
+  for (let i = 0; i < itemsCount; i++) {
+    items.push({ value: `Item ${i}`, height, width, id: `${i}` });
+  }
+  return items;
+};
+
+export const itemRenderer = (
+  item: VirtualizedListItem,
+  index: number,
+  style: React.CSSProperties
+): JSX.Element | ComponentType<GridChildComponentProps<VirtualizedListItem>> => {
+  if (item) {
+    const backgroundColor = index % 2 === 0 ? "#e1e1e1" : "#f8f8f0";
+    return (
+      <div key={index} style={style}>
+        <Text
+          color={Text.colors.FIXED_DARK}
+          style={{
+            backgroundColor,
+            height: item.height,
+            width: item.width,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          {item.value}
+        </Text>
+      </div>
+    );
+  }
+  return <div key={index} style={style} />;
+};

packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.js → packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.tsx

@@ -8,31 +8,43 @@ export default {
   component: VirtualizedGrid
 };
 
-const virtualizedGridTemplate = args => {
-  const [scrollToId, setScrollToId] = useState(null);
-  const [lastScrolledId, setLastScrolledId] = useState(null);
-  const [scrollToDisabled, setScrollToDisabled] = useState(false);
-  const [nextScrollToId, setNextScrollToId] = useState(args.itemsCount - 1);
+interface VirtualizedGridTemplateArgs {
+  wrapperStyle: React.CSSProperties;
+  wrapperId: string;
+  itemsCount: number;
+}
+
+const virtualizedGridTemplate = (args: VirtualizedGridTemplateArgs) => {
+  const [scrollToId, setScrollToId] = useState<number | null>(null);
+  const [lastScrolledId, setLastScrolledId] = useState<string | null>(null);
+  const [scrollToDisabled, setScrollToDisabled] = useState<boolean>(false);
+  const [nextScrollToId, setNextScrollToId] = useState<number>(args.itemsCount - 1);
+
   const getColumnWidth = useCallback(() => {
     return 100;
   }, []);
+
   const getRowHeight = useCallback(() => {
     return 50;
   }, []);
+
   const items = useMemo(() => {
     return generateItems(50, 100, args.itemsCount);
   }, [args.itemsCount]);
+
   const onClickToScroll = useCallback(() => {
     setScrollToId(nextScrollToId);
-    setLastScrolledId("");
+    setLastScrolledId(null);
     setScrollToDisabled(true);
   }, [setScrollToId, setScrollToDisabled, nextScrollToId]);
+
   const onScrollToFinished = useCallback(() => {
-    setLastScrolledId(nextScrollToId);
+    setLastScrolledId(nextScrollToId.toString());
     setScrollToId(null);
     setNextScrollToId(Math.round(Math.random() * items.length));
     setScrollToDisabled(false);
   }, [nextScrollToId, items, setNextScrollToId, setLastScrolledId]);
+
   return (
     <div style={args.wrapperStyle}>
       <div style={{ width: "430px", height: "100%" }}>