@sproutsocial/seeds-react-list 0.0.2 → 0.1.0

package/src/DataList.stories.tsx

@@ -0,0 +1,659 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DataList from "./DataList";
+import ListItemContent from "./ListItemContent";
+import ListItemButton from "./ListItemButton";
+import DataItemSkeleton from "./DataItemSkeleton";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeIconName } from "@sproutsocial/seeds-react-icon";
+import {
+  ActionMenu,
+  MenuToggleButton,
+  MenuContent,
+  MenuItem,
+} from "@sproutsocial/seeds-react-menu";
+import Box from "@sproutsocial/seeds-react-box";
+
+const meta = {
+  title: "Components/DataList",
+  component: DataList,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="500px" height="100%">
+        <Story />
+      </Box>
+    ),
+  ],
+} satisfies Meta<typeof DataList>;
+
+export default meta;
+type Story<T = unknown> = StoryObj<Meta<typeof DataList<T>>>;
+
+interface SimpleItem {
+  id: string;
+  name: string;
+}
+
+const simpleData: SimpleItem[] = [
+  { id: "1", name: "First item" },
+  { id: "2", name: "Second item" },
+  { id: "3", name: "Third item" },
+];
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <DataList
+      data={simpleData}
+      renderItem={(item) => <div key={item.id}>{item.name}</div>}
+    />
+  ),
+};
+
+interface ListItemData {
+  id: string;
+  text: string;
+  details?: string;
+  aside?: string;
+  iconName?: TypeIconName;
+}
+
+const listItemData: ListItemData[] = [
+  {
+    id: "1",
+    text: "Negative Spikes – Snouts Paws & Tails",
+    details:
+      "Are there any negative sentiment spikes in Snouts Paws & Tails Brand?",
+    aside: "Nov 5",
+  },
+  {
+    id: "2",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+  },
+  {
+    id: "3",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+  },
+  {
+    id: "4",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+  },
+  {
+    id: "5",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+  },
+];
+
+export const WithListItems: Story<ListItemData> = {
+  name: "With List Items",
+  args: {
+    data: listItemData,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+      />
+    ),
+  },
+};
+
+const listItemWithIconsData: ListItemData[] = [
+  {
+    id: "1",
+    text: "Negative Spikes – Snouts Paws & Tails",
+    details: "Are there any negative sentiment spikes in Snouts Paws Brand?",
+    aside: "Nov 5",
+    iconName: "tag-solid",
+  },
+  {
+    id: "2",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "3",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "4",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "5",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "6",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "7",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "8",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "9",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "10",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "11",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "12",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "13",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "14",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "15",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "16",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "17",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "18",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "19",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+  {
+    id: "20",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+  },
+];
+
+export const WithIcons: Story<ListItemData> = {
+  name: "With Icons",
+  args: {
+    data: listItemWithIconsData,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+export const WithBordered: Story<ListItemData> = {
+  name: "With Bordered",
+  args: {
+    data: listItemWithIconsData,
+    listItemProps: {
+      isBordered: true,
+    },
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+export const WithListItemButtons: Story<ListItemData> = {
+  name: "With List Item Buttons",
+  args: {
+    data: listItemWithIconsData,
+    renderItem: (item) => (
+      <ListItemButton onClick={() => console.log("Button clicked", item.id)}>
+        <ListItemContent
+          key={item.id}
+          text={item.text}
+          details={item.details}
+          aside={item.aside}
+          iconName={item.iconName}
+          actions={
+            <Button appearance="unstyled" aria-label="Reconnect">
+              <Icon name="plug-outline" size="small" aria-hidden="true" />
+            </Button>
+          }
+        />
+      </ListItemButton>
+    ),
+  },
+};
+
+interface ListItemWithActionsData extends ListItemData {
+  hasReconnect?: boolean;
+}
+
+const listItemWithActionsData: ListItemWithActionsData[] = [
+  {
+    id: "1",
+    text: "Groupon Babies is disconnected",
+    details:
+      "It looks like your Facebook profile needs reauthorization due to the...",
+    aside: "2 days ago",
+    iconName: "tag-solid",
+    hasReconnect: true,
+  },
+  {
+    id: "2",
+    text: "New secure forms submission received in a message.",
+    aside: "Nov 3, 2025",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "3",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "4",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "5",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "6",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "7",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "8",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "9",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+  {
+    id: "10",
+    text: "Another Item",
+    details: "This is a detail about the item",
+    aside: "Dec 10",
+    iconName: "tag-outline",
+    hasReconnect: false,
+  },
+];
+
+export const WithActions: Story<ListItemWithActionsData> = {
+  name: "With Actions",
+  args: {
+    data: listItemWithActionsData,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+        actions={
+          item.hasReconnect ? (
+            <Button appearance="unstyled" aria-label="Reconnect">
+              <Icon name="plug-outline" size="small" aria-hidden="true" />
+            </Button>
+          ) : (
+            <ActionMenu
+              menuToggleElement={
+                <MenuToggleButton
+                  appearance="unstyled"
+                  aria-label="More actions"
+                >
+                  <Icon
+                    name="ellipsis-horizontal-outline"
+                    size="small"
+                    aria-hidden="true"
+                  />
+                </MenuToggleButton>
+              }
+            >
+              <MenuContent>
+                <MenuItem
+                  id="edit"
+                  onClick={() => console.log("Edit clicked", item.id)}
+                >
+                  Edit
+                </MenuItem>
+                <MenuItem
+                  id="delete"
+                  onClick={() => console.log("Delete clicked", item.id)}
+                >
+                  Delete
+                </MenuItem>
+              </MenuContent>
+            </ActionMenu>
+          )
+        }
+      />
+    ),
+  },
+};
+
+const Header = () => {
+  return (
+    <Box
+      backgroundColor="container.background.base"
+      border="1px solid"
+      borderColor="container.border.base"
+      borderWidth={500}
+      style={{ height: "60px" }}
+      p={300}
+    >
+      Header
+    </Box>
+  );
+};
+
+export const WithHeader: Story<ListItemData> = {
+  name: "With Header",
+  args: {
+    data: listItemWithIconsData,
+    Header: <Header />,
+    renderItem: (item) => (
+      <ListItemContent
+        key={item.id}
+        text={item.text}
+        details={item.details}
+        aside={item.aside}
+        iconName={item.iconName}
+      />
+    ),
+  },
+};
+
+export const Loading: Story<ListItemData> = {
+  name: "Loading",
+  render: () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <DataList
+        data={listItemWithIconsData}
+        isLoading={isLoading}
+        renderItem={(item) => (
+          <ListItemContent key={item.id} text={item.text} />
+        )}
+      />
+    );
+  },
+};
+
+export const LoadingWithIconAndAside: Story<ListItemData> = {
+  name: "Loading with Icon and Aside",
+  render: () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <DataList
+        data={listItemWithIconsData}
+        isLoading={isLoading}
+        LoadingComponent={(props) => (
+          <DataItemSkeleton {...props} hasIcon hasAside />
+        )}
+        renderItem={(item) => (
+          <ListItemContent
+            key={item.id}
+            text={item.text}
+            aside={item.aside}
+            iconName={item.iconName}
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const LoadingWithAllContent: Story<ListItemData> = {
+  name: "Loading with All Content",
+  render: () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <DataList
+        data={listItemWithIconsData}
+        isLoading={isLoading}
+        LoadingComponent={(props) => (
+          <DataItemSkeleton hasIcon hasAside hasSubtext />
+        )}
+        renderItem={(item) => (
+          <ListItemContent
+            key={item.id}
+            text={item.text}
+            details={item.details}
+            aside={item.aside}
+            iconName={item.iconName}
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const LoadingWithBorder: Story<ListItemData> = {
+  name: "Loading with Border",
+  render: () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <DataList
+        data={listItemWithIconsData}
+        isLoading={isLoading}
+        LoadingComponent={(props) => (
+          <DataItemSkeleton hasIcon hasAside hasSubtext />
+        )}
+        listItemProps={{
+          isBordered: true,
+        }}
+        renderItem={(item) => (
+          <ListItemContent
+            key={item.id}
+            text={item.text}
+            details={item.details}
+            aside={item.aside}
+            iconName={item.iconName}
+          />
+        )}
+      />
+    );
+  },
+};
+
+// Story showing two DataLists side by side, one loading and one loaded
+// to demonstrate consistent layout
+export const LoadingAlwaysWithAllFeatures: Story<ListItemData> = {
+  name: "Loading Always",
+  render: () => {
+    return (
+      <Box width="1000px" height="100%" display="flex">
+        <Box width="500px">
+          <DataList
+            data={listItemWithIconsData}
+            isLoading={true}
+            LoadingComponent={(props) => (
+              <DataItemSkeleton {...props} hasIcon hasAside hasSubtext />
+            )}
+            renderItem={(item) => (
+              <ListItemContent
+                key={item.id}
+                text={item.text}
+                details={item.details}
+                aside={item.aside}
+                iconName={item.iconName}
+              />
+            )}
+          />
+        </Box>
+        <Box width="500px">
+          <DataList
+            data={listItemWithIconsData.slice(0, 5)}
+            isLoading={false}
+            LoadingComponent={(props) => (
+              <DataItemSkeleton {...props} hasIcon hasAside hasSubtext />
+            )}
+            renderItem={(item) => (
+              <ListItemContent
+                key={item.id}
+                text={item.text}
+                details={item.details}
+                aside={item.aside}
+                iconName={item.iconName}
+              />
+            )}
+          />
+        </Box>
+      </Box>
+    );
+  },
+};