@sproutsocial/seeds-react-list 0.0.2 → 0.1.1

package/src/DataList.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { useRef } from "react";
+import List from "./List";
+import DataItemSkeleton from "./DataItemSkeleton";
+import ListItem from "./ListItem";
+import Box from "@sproutsocial/seeds-react-box";
+import Container from "./styles";
+import type { TypeDataListProps } from "./DataListTypes";
+import styled from "styled-components";
+
+const HeaderContent = styled(Box)`
+  width: 100%;
+  transition: transform 0.4s ease-in-out;
+`;
+
+const DataList = <T,>({
+  as = "ul",
+  data,
+  renderItem,
+  isLoading,
+  LoadingComponent = DataItemSkeleton,
+  listItemProps = {},
+  estimateItemSize = 50,
+  Header,
+  ...rest
+}: TypeDataListProps<T>) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const loadingItems = [0, 1, 2, 3, 4];
+
+  // Early return for loading state
+  if (isLoading) {
+    return (
+      <>
+        {Header && (
+          <HeaderContent
+            style={{
+              position: "sticky",
+              top: 0,
+              left: 0,
+              width: "100%",
+              zIndex: 1,
+            }}
+            id="header"
+          >
+            {Header}
+          </HeaderContent>
+        )}
+        <List as={as} {...rest}>
+          {loadingItems.map((index) => (
+            <ListItem key={index} {...listItemProps}>
+              <LoadingComponent />
+            </ListItem>
+          ))}
+        </List>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {Header && (
+        <HeaderContent
+          style={{
+            position: "sticky",
+            top: 0,
+            left: 0,
+            width: "100%",
+            zIndex: 1,
+          }}
+          id="header"
+        >
+          {Header}
+        </HeaderContent>
+      )}
+      <List as={as} {...rest}>
+        {data.map((item, index) => (
+          <ListItem key={index} {...listItemProps}>
+            {renderItem(item, index)}
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+};
+
+DataList.displayName = "DataList";
+
+export default DataList;

package/src/DataListTypes.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { TypeListProps } from "./ListTypes";
+import type { TypeDataItemSkeletonProps } from "./DataItemSkeletonTypes";
+import type { TypeListItemProps } from "./ListItemTypes";
+
+export interface TypeDataListProps<T> extends Omit<TypeListProps, "children"> {
+  /** Array of data items to render */
+  data: T[];
+  /** Function to render each item in the data array */
+  renderItem: (item: T, index?: number) => React.ReactNode;
+  /** If true, shows loading skeletons instead of data */
+  isLoading?: boolean;
+  /** Component to render when loading. Receives props for customizing skeleton appearance */
+  LoadingComponent?: React.ComponentType<TypeDataItemSkeletonProps>;
+  /** Estimated height of each item in pixels for virtualization. Defaults to 60 */
+  estimateItemSize?: number;
+  /** Props to pass to the list item component */
+  listItemProps?: Omit<TypeListItemProps, "children">;
+  /** Callback function called when the end of the list is reached (for infinite scrolling) */
+  onEndReached?: () => void;
+  /** Whether there is a next page available (for infinite scrolling) */
+  hasNextPage?: boolean;
+  /** Whether the next page is currently being fetched */
+  isFetchingNextPage?: boolean;
+  /** Header component to display at the top of the list */
+  Header?: React.ReactNode;
+  /** Scroll offset in pixels at which the header should be removed/hidden. Defaults to 500 */
+  removeHeaderDepth?: number;
+  /** Height of the header in pixels. Defaults to 60 */
+  headerHeight?: number;
+}

package/src/DynamicVirtualizedExample.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { faker } from "@faker-js/faker";
+import List from "./List";
+import ListItem from "./ListItem";
+
+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 RowVirtualizerDynamic() {
+  const parentRef = React.useRef<HTMLDivElement>(null);
+
+  const count = sentences.length;
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 45,
+  });
+
+  const items = virtualizer.getVirtualItems();
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 20,
+      }}
+    >
+      <h1>Dynamic Virtualizer Usage</h1>
+      <div style={{ width: "100%", flexGrow: 1 }}>
+        <div
+          ref={parentRef}
+          className="List"
+          style={{
+            width: "100%",
+            height: "100%",
+            overflowY: "auto",
+            contain: "strict",
+          }}
+        >
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            <ul
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${items[0]?.start ?? 0}px)`,
+              }}
+            >
+              {items.map((virtualRow) => (
+                <li
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  className={
+                    virtualRow.index % 2 ? "ListItemOdd" : "ListItemEven"
+                  }
+                >
+                  <div style={{ padding: "10px 0" }}>
+                    <div>Row {virtualRow.index}</div>
+                    <div>{sentences[virtualRow.index]}</div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/List.stories.tsx

@@ -139,8 +139,6 @@ export const WithIcons: Story = {
   },
 };
 
-// We will revisit this story when we have a more correct button component
-/*
 export const WithListItemButtons: Story = {
   name: "With List Item Buttons",
   render: () => {
@@ -157,12 +155,23 @@ export const WithListItemButtons: Story = {
           </ListItemButton>
         </ListItem>
         <ListItem>
-          <ListItemButton>
+          <ListItemButton onClick={() => alert("outer click")}>
             <ListItemContent
               iconName="tag-outline"
               text="Another Item"
-              details="This is a detail about the item"
+              details="This is a detail about the item 2"
               aside="Dec 10"
+              // Inside of a ListItemButton other buttons need to have a higher zIndex to be clickable
+              actions={
+                <Button
+                  appearance="unstyled"
+                  aria-label="Reconnect"
+                  onClick={() => alert("inner click")}
+                  style={{ zIndex: 1 }}
+                >
+                  <Icon name="plug-outline" size="small" aria-hidden="true" />
+                </Button>
+              }
             />
           </ListItemButton>
         </ListItem>
@@ -170,7 +179,6 @@ export const WithListItemButtons: Story = {
     );
   },
 };
-*/
 
 export const WithActions: Story = {
   name: "With Actions",

package/src/List.tsx

@@ -1,19 +1,10 @@
-import * as React from "react";
-import { Children } from "react";
-import Box from "@sproutsocial/seeds-react-box";
 import Container from "./styles";
 import type { TypeListProps } from "./ListTypes";
 
 const List = ({ as = "ul", children, ...rest }: TypeListProps) => {
-  const listItems = Children.toArray(children);
-
   return (
     <Container as={as} {...rest}>
-      {listItems.map((item, index) => (
-        <Box as="li" key={index} mt={300}>
-          {item}
-        </Box>
-      ))}
+      {children}
     </Container>
   );
 };

package/src/ListItem.tsx

@@ -1,26 +1,29 @@
 import * as React from "react";
 import Box from "@sproutsocial/seeds-react-box";
-import Text from "@sproutsocial/seeds-react-text";
-import { Icon } from "@sproutsocial/seeds-react-icon";
 import type { TypeListItemProps } from "./ListItemTypes";
 
-const ListItem = ({ isBordered, children, ...rest }: TypeListItemProps) => {
-  return (
-    <Box
-      borderRadius="outer"
-      {...(isBordered
-        ? {
-            border: 500,
-            borderColor: "container.border.base",
-            p: 300,
-          }
-        : {})}
-      {...rest}
-    >
-      {children}
-    </Box>
-  );
-};
+const ListItem = React.forwardRef<HTMLLIElement, TypeListItemProps>(
+  ({ isBordered, children, ...rest }, ref) => {
+    return (
+      <Box
+        as="li"
+        ref={ref}
+        borderRadius="outer"
+        {...(isBordered
+          ? {
+              border: 500,
+              borderColor: "container.border.base",
+              p: 300,
+            }
+          : {})}
+        mt={300}
+        {...rest}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
 
 ListItem.displayName = "ListItem";
 

package/src/ListItemButton.tsx

@@ -6,24 +6,36 @@ import Text from "@sproutsocial/seeds-react-text";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import type { TypeListItemButtonProps } from "./ListItemButtonTypes";
 
-const StyledButton = styled(Button)`
+const ButtonContainer = styled(Box)`
   border: 1px solid ${(props) => props.theme.colors.container.border.base};
-  text-align: initial;
-  font-weight: initial;
+  position: relative;
+  padding: ${(props) => props.theme.space[300]};
+  border-radius: ${(props) => props.theme.radii[500]};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  color: ${(props) => props.theme.colors.text.body};
 `;
 
+const StyledButton = styled(Button)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
 // This button is not currently used. It is possible to pass interactive elements inside the button which is an accessibility violation.
 // In order to reintroduce it, we will want to mimic confluence's approach of using relative positioning to add a sibling to content which allows clicking
 const ListItemButton = ({
   appearance = "unstyled",
   width = "100%",
   children,
+  onClick,
   ...rest
 }: TypeListItemButtonProps) => {
   return (
-    <StyledButton appearance={appearance} width={width} {...rest}>
+    <ButtonContainer>
+      <StyledButton onClick={onClick}>&nbsp;</StyledButton>
       {children}
-    </StyledButton>
+    </ButtonContainer>
   );
 };
 

package/src/ListItemTypes.ts

@@ -7,6 +7,8 @@ export interface TypeListItemProps extends TypeStyledComponentsCommonProps {
   isBordered?: boolean;
   /** Children to display inside the list item */
   children: React.ReactNode;
+  /** Inline styles to apply to the list item element */
+  style?: React.CSSProperties;
 }
 
 export interface TypeListItemContentProps

package/src/ListTypes.ts

@@ -8,4 +8,6 @@ export interface TypeListProps extends TypeStyledComponentsCommonProps {
   as?: TypeListElement;
   /** Array of elements to render as list items */
   children: React.ReactNode;
+  /** Inline styles to apply to the list element */
+  style?: React.CSSProperties;
 }