@sproutsocial/seeds-react-list 0.0.2 → 0.1.1

package/src/VirtualizedDataList.stories.tsx

@@ -0,0 +1,353 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Experimental_VirtualizedDataList from "./VirtualizedDataList";
+import ListItemContent from "./ListItemContent";
+import DataItemSkeleton from "./DataItemSkeleton";
+import Box from "@sproutsocial/seeds-react-box";
+import type { TypeIconName } from "@sproutsocial/seeds-react-icon";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery,
+} from "@tanstack/react-query";
+import Message from "@sproutsocial/seeds-react-message";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import Skeleton from "@sproutsocial/seeds-react-skeleton";
+
+const queryClient = new QueryClient();
+
+const meta = {
+  title: "Components/Experimental_VirtualizedDataList",
+  component: Experimental_VirtualizedDataList,
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Box maxWidth="500px" height="600px">
+          <Story />
+        </Box>
+      </QueryClientProvider>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An experimental virtualized list component for rendering large datasets efficiently. This component uses virtual scrolling to only render visible items, providing better performance for lists with thousands of items.",
+      },
+    },
+  },
+} satisfies Meta<typeof Experimental_VirtualizedDataList>;
+
+export default meta;
+type Story<T = unknown> = StoryObj<
+  Meta<typeof Experimental_VirtualizedDataList<T>>
+>;
+
+interface ListItemData {
+  id: string;
+  text: string;
+  details?: string;
+  aside?: string;
+  iconName?: TypeIconName;
+}
+
+// Generate a large dataset for virtualization demo
+const generateLargeDataset = (count: number): ListItemData[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `virtual-${i + 1}`,
+    text: `Virtualized Item ${i + 1}`,
+    details: `This is item number ${i + 1} in a virtualized list ${
+      i % 5 === 0
+        ? "with lots of extra extra extra extra extra extra extra text to demonstrate variable height items"
+        : ""
+    }`,
+    aside: `#${i + 1}`,
+    iconName: i % 2 === 0 ? "tag-solid" : ("tag-outline" as TypeIconName),
+  }));
+};
+
+const largeDataset = generateLargeDataset(1000);
+
+export const Basic: Story<ListItemData> = {
+  name: "Basic - 1000 Items",
+  args: {
+    data: largeDataset,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+      />
+    ),
+  },
+};
+
+export const WithIcons: Story<ListItemData> = {
+  name: "With Icons - 1000 Items",
+  args: {
+    data: largeDataset,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+const Header = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box
+      backgroundColor="container.background.base"
+      border="1px solid"
+      borderColor="container.border.base"
+      borderWidth={500}
+      style={{ height: "60px" }}
+      p={300}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const WithHeader: Story<ListItemData> = {
+  name: "With Header",
+  args: {
+    data: largeDataset,
+    Header: <Header>List Header - Scroll to see it hide</Header>,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+export const CustomEstimatedSize: Story<ListItemData> = {
+  name: "Custom Estimated Item Size",
+  args: {
+    data: largeDataset,
+    estimateItemSize: 80,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+// Infinite scroll example
+async function fetchServerPage(
+  limit: number,
+  offset: number = 0
+): Promise<{ rows: ListItemData[]; nextOffset: number; hasMore: boolean }> {
+  const rows = Array.from({ length: limit }, (_, i) => ({
+    id: `async-${offset * limit + i}`,
+    text: `Async loaded row #${offset * limit + i}`,
+    details: `Details for async row #${offset * limit + i}`,
+    aside: `#${offset * limit + i}`,
+    iconName: "tag-outline" as TypeIconName,
+  }));
+
+  await new Promise((r) => setTimeout(r, 500));
+
+  return { rows, nextOffset: offset + 1, hasMore: offset < 10 };
+}
+
+const InfiniteScrollExample = () => {
+  const { data, isLoading, isFetchingNextPage, fetchNextPage, hasNextPage } =
+    useInfiniteQuery({
+      queryKey: ["virtualized-projects"],
+      queryFn: (ctx) => fetchServerPage(30, ctx.pageParam),
+      getNextPageParam: (lastGroup) =>
+        lastGroup.hasMore ? lastGroup.nextOffset : undefined,
+      initialPageParam: 0,
+    });
+
+  const allRows = data ? data.pages.flatMap((d) => d.rows) : [];
+
+  if (isLoading) {
+    return <Box p={400}>Loading initial data...</Box>;
+  }
+
+  return (
+    <Experimental_VirtualizedDataList
+      data={allRows}
+      renderItem={(item) => (
+        <ListItemContent
+          key={item.id}
+          text={item.text}
+          details={item.details}
+          aside={item.aside}
+          iconName={item.iconName}
+        />
+      )}
+      onEndReached={fetchNextPage}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      Header={
+        <Box
+          bg="container.background.decorative.neutral"
+          p={400}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          Infinite Scroll List - {allRows.length} items loaded
+        </Box>
+      }
+    />
+  );
+};
+
+export const InfiniteScroll: Story = {
+  name: "Infinite Scroll",
+  render: () => <InfiniteScrollExample />,
+};
+
+// Messages example
+interface MessageData {
+  id: string;
+  text: string;
+  profileName: string;
+}
+
+const generateMessageData = (count: number): MessageData[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `message-${i + 1}`,
+    text: `This is message number ${i + 1}. ${
+      i % 3 === 0
+        ? "This message has some extra content to make it longer and demonstrate variable height virtualization."
+        : ""
+    }`,
+    profileName: `User ${i + 1}`,
+  }));
+};
+
+const messageData = generateMessageData(500);
+
+const StoryMessage = ({ item }: { item: MessageData }) => {
+  return (
+    <Message density="condensed">
+      <Message.Header>
+        <Box display="flex" alignItems="center">
+          <Message.Avatar mr={350} appearance="leaf" name={item.profileName} />
+          {item.profileName}
+        </Box>
+        <Box>
+          <Message.Checkbox
+            id={`message-checkbox-${item.id}`}
+            ariaLabel="Message Checkbox"
+            onChange={() => {}}
+          />
+        </Box>
+      </Message.Header>
+      <Message.Body>{item.text}</Message.Body>
+      <Message.Footer>
+        <>
+          <Box ml={-350}>
+            <Message.Button>
+              <Icon name="comments-outline" mr={200} aria-hidden />
+            </Message.Button>
+          </Box>
+          <Box>
+            <Message.Button aria-label="Heart Icon">
+              <Icon name="heart-outline" aria-hidden />
+            </Message.Button>
+            <Message.Button aria-label="Tag Icon">
+              <Icon name="tag-outline" aria-hidden />
+            </Message.Button>
+          </Box>
+        </>
+      </Message.Footer>
+    </Message>
+  );
+};
+
+export const WithMessages: Story<MessageData> = {
+  name: "With Messages - 500 Items",
+  render: () => (
+    <Experimental_VirtualizedDataList
+      data={messageData}
+      estimateItemSize={120}
+      renderItem={(item) => <StoryMessage item={item} />}
+      Header={
+        <Box
+          bg="container.background.decorative.neutral"
+          p={400}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          Messages ({messageData.length})
+        </Box>
+      }
+    />
+  ),
+};
+
+// Variable height items
+const generateVariableHeightData = (count: number): ListItemData[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `var-${i + 1}`,
+    text: `Item ${i + 1}`,
+    details:
+      i % 3 === 0
+        ? "This item has a lot of details. ".repeat(5)
+        : i % 2 === 0
+        ? "This item has medium details. ".repeat(2)
+        : "Short details.",
+    aside: `#${i + 1}`,
+    iconName: "tag-outline" as TypeIconName,
+  }));
+};
+
+const variableHeightData = generateVariableHeightData(200);
+
+export const VariableHeights: Story<ListItemData> = {
+  name: "Variable Heights - 200 Items",
+  args: {
+    data: variableHeightData,
+    estimateItemSize: 60,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+export const CustomHeaderSettings: Story<ListItemData> = {
+  name: "Custom Header Settings",
+  args: {
+    data: largeDataset,
+    Header: <Header>Custom Header - Hides after 200px depth</Header>,
+    removeHeaderDepth: 200,
+    headerHeight: 83,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};

package/src/VirtualizedDataList.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import List from "./List";
+import ListItem from "./ListItem";
+import Box from "@sproutsocial/seeds-react-box";
+import Loader from "@sproutsocial/seeds-react-loader";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import type { TypeDataListProps } from "./DataListTypes";
+import { useInView } from "react-intersection-observer";
+import styled from "styled-components";
+
+const HeaderContent = styled(Box)`
+  width: 100%;
+  transition: transform 0.4s ease-in-out;
+  background-color: red;
+`;
+
+const Experimental_VirtualizedDataList = <T,>({
+  as = "ul",
+  data,
+  renderItem,
+  estimateItemSize = 50,
+  onEndReached,
+  hasNextPage,
+  isFetchingNextPage,
+  Header,
+  removeHeaderDepth = 500,
+  headerHeight = 60,
+  ...rest
+}: TypeDataListProps<T>) => {
+  const afterInView = useInView();
+
+  const parentRef = React.useRef<HTMLDivElement>(null);
+
+  const count = data.length;
+
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => estimateItemSize,
+    overscan: 5,
+  });
+
+  const items = virtualizer.getVirtualItems();
+  const offset = virtualizer.scrollOffset;
+
+  const transform =
+    offset && offset > removeHeaderDepth
+      ? `translateY(-${headerHeight}px)`
+      : "translateY(0px)";
+
+  React.useEffect(() => {
+    if (afterInView.inView) {
+      onEndReached?.();
+    }
+  }, [onEndReached, afterInView.inView]);
+
+  return (
+    <div
+      ref={parentRef}
+      className="List"
+      style={{
+        width: "100%",
+        height: "100%",
+        overflowY: "auto",
+        contain: "strict",
+      }}
+    >
+      {Header && (
+        <HeaderContent
+          style={{
+            position: "sticky",
+            transform,
+            top: 0,
+            left: 0,
+            width: "100%",
+            zIndex: 1,
+          }}
+          id="header"
+        >
+          {Header}
+        </HeaderContent>
+      )}
+      <List
+        as={as}
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {items.map((virtualRow) => {
+          return (
+            <ListItem
+              key={virtualRow.key}
+              data-index={virtualRow.index}
+              ref={virtualizer.measureElement}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${
+                  virtualRow.start - virtualizer.options.scrollMargin
+                }px)`,
+              }}
+            >
+              {renderItem(data[virtualRow.index] as T)}
+            </ListItem>
+          );
+        })}
+      </List>
+      <div ref={afterInView.ref}>
+        <Loader delay={false} />
+      </div>
+    </div>
+  );
+};
+
+Experimental_VirtualizedDataList.displayName =
+  "Experimental_VirtualizedDataList";
+
+export default Experimental_VirtualizedDataList;

package/src/VirtualizedExamples.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { faker } from "@faker-js/faker";
+
+import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
+
+const randomNumber = (min: number, max: number) =>
+  faker.number.int({ min, max });
+
+const sentences = new Array(10000)
+  .fill(true)
+  .map(() => faker.lorem.sentence(randomNumber(20, 70)));
+
+export function WindowExample() {
+  const parentRef = React.useRef<HTMLDivElement | null>(null);
+
+  const virtualizer = useWindowVirtualizer({
+    count: 10000,
+    estimateSize: () => 35,
+    overscan: 5,
+    scrollMargin: parentRef.current?.offsetTop ?? 0,
+  });
+
+  return (
+    <>
+      <div ref={parentRef} className="List">
+        <div
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {virtualizer.getVirtualItems().map((item) => (
+            <div
+              key={item.key}
+              className={item.index % 2 ? "ListItemOdd" : "ListItemEven"}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${item.size}px`,
+                transform: `translateY(${
+                  item.start - virtualizer.options.scrollMargin
+                }px)`,
+              }}
+            >
+              Row {item.index}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}