docs: add react-virtuoso examples

package.json

@@ -186,6 +186,7 @@
     "react-dom-16": "npm:[email protected]",
     "react-dom-17": "npm:[email protected]",
     "react-virtualized": "9.22.3",
+    "react-virtuoso": "^2.17.2",
     "react-window": "1.8.7",
     "release-it": "15.3.0",
     "require-from-string": "2.0.2",

stories/examples/45-virtual.stories.tsx

@@ -1,20 +1,23 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
-import ReactWindowList from '../src/virtual/react-window/list';
-import ReactVirtualizedList from '../src/virtual/react-virtualized/list';
+import React from 'react';
 import { getQuotes } from '../src/data';
-import ReactWindowBoard from '../src/virtual/react-window/board';
 import ReactVirtualizedBoard from '../src/virtual/react-virtualized/board';
+import ReactVirtualizedList from '../src/virtual/react-virtualized/list';
 import ReactVirtualizedWindowList from '../src/virtual/react-virtualized/window-list';
+import ReactVirtuosoBoard from '../src/virtual/react-virtuoso/board';
+import ReactVirtuosoList from '../src/virtual/react-virtuoso/list';
+import ReactWindowBoard from '../src/virtual/react-window/board';
+import ReactWindowList from '../src/virtual/react-window/list';
+
+storiesOf('Examples/Virtual: react-virtuoso', module)
+  .add('list', () => <ReactVirtuosoList initial={getQuotes(1000)} />)
+  .add('board', () => <ReactVirtuosoBoard />);
 
 storiesOf('Examples/Virtual: react-window', module)
   .add('list', () => <ReactWindowList initial={getQuotes(1000)} />)
   .add('board', () => <ReactWindowBoard />);
 
-storiesOf(
-  'Examples/Virtual: react-virtualized (this library does not official support for react 18)',
-  module,
-)
+storiesOf('Examples/Virtual: react-virtualized', module)
   .add('list', () => <ReactVirtualizedList initial={getQuotes(1000)} />)
   .add('board', () => <ReactVirtualizedBoard />)
   .add(

stories/src/primatives/quote-item.tsx

@@ -1,18 +1,19 @@
-import React, { CSSProperties } from 'react';
-import styled from '@emotion/styled';
 import { colors } from '@atlaskit/theme';
+import styled from '@emotion/styled';
 import type { DraggableProvided } from '@hello-pangea/dnd';
+import React, { CSSProperties } from 'react';
 import { borderRadius, grid } from '../constants';
-import type { Quote, AuthorColors } from '../types';
+import type { AuthorColors, Quote } from '../types';
 
 interface Props {
   quote: Quote;
   isDragging: boolean;
-  provided: DraggableProvided;
+  provided?: DraggableProvided;
   isClone?: boolean;
   isGroupedOver?: boolean;
   style?: CSSProperties;
   index?: number;
+  className?: string;
 }
 
 const getBackgroundColor = (
@@ -158,13 +159,13 @@ const QuoteId = styled.small`
   text-align: right;
 `;
 
-function getStyle(provided: DraggableProvided, style?: CSSProperties | null) {
+function getStyle(provided?: DraggableProvided, style?: CSSProperties | null) {
   if (!style) {
-    return provided.draggableProps.style;
+    return provided?.draggableProps.style ?? {};
   }
 
   return {
-    ...provided.draggableProps.style,
+    ...provided?.draggableProps.style,
     ...style,
   };
 }
@@ -177,23 +178,32 @@ function getStyle(provided: DraggableProvided, style?: CSSProperties | null) {
 // things we should be doing in the selector as we do not know if consumers
 // will be using PureComponent
 function QuoteItem(props: Props) {
-  const { quote, isDragging, isGroupedOver, provided, style, isClone, index } =
-    props;
+  const {
+    quote,
+    isDragging,
+    isGroupedOver,
+    provided,
+    style,
+    isClone,
+    index,
+    className,
+  } = props;
 
   return (
     <Container
       href={quote.author.url}
       isDragging={isDragging}
       isGroupedOver={Boolean(isGroupedOver)}
       colors={quote.author.colors}
-      ref={provided.innerRef}
-      {...provided.draggableProps}
-      {...provided.dragHandleProps}
+      ref={provided?.innerRef}
+      {...provided?.draggableProps}
+      {...provided?.dragHandleProps}
       style={getStyle(provided, style)}
       data-is-dragging={isDragging}
       data-testid={quote.id}
       data-index={index}
       aria-label={`${quote.author.name} quote ${quote.content}`}
+      className={className}
     >
       <Avatar src={quote.author.avatarUrl} alt={quote.author.name} />
       {isClone ? <CloneBadge>Clone</CloneBadge> : null}

stories/src/virtual/react-virtualized/board.tsx

@@ -1,28 +1,28 @@
-import React, { CSSProperties, ReactElement, useReducer } from 'react';
-import ReactDOM from 'react-dom';
-import 'react-virtualized/styles.css';
-import { List } from 'react-virtualized';
-import styled from '@emotion/styled';
-import { Global, css } from '@emotion/react';
 import { colors } from '@atlaskit/theme';
+import { css, Global } from '@emotion/react';
+import styled from '@emotion/styled';
 import type {
-  DropResult,
   DraggableLocation,
   DraggableProvided,
+  DraggableRubric,
   DraggableStateSnapshot,
   DroppableProvided,
   DroppableStateSnapshot,
-  DraggableRubric,
+  DropResult,
 } from '@hello-pangea/dnd';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import type { QuoteMap, Quote } from '../../types';
-import Title from '../../primatives/title';
-import { reorderQuoteMap } from '../../reorder';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React, { CSSProperties, ReactElement, useReducer } from 'react';
+import ReactDOM from 'react-dom';
+import { List } from 'react-virtualized';
+import 'react-virtualized/styles.css';
+import { borderRadius, grid } from '../../constants';
+import { generateQuoteMap } from '../../data';
 import QuoteItem from '../../primatives/quote-item';
-import { grid, borderRadius } from '../../constants';
 import { getBackgroundColor } from '../../primatives/quote-list';
+import Title from '../../primatives/title';
+import { reorderQuoteMap } from '../../reorder';
+import type { Quote, QuoteMap } from '../../types';
 import QuoteCountSlider from '../quote-count-chooser';
-import { generateQuoteMap } from '../../data';
 
 const Container = styled.div`
   display: flex;
@@ -229,6 +229,10 @@ function Board(): ReactElement {
 
   return (
     <>
+      <p>
+        React virtualized is no longer maintained and does not support React 18.
+        Try react-virtuoso or react-window instead.
+      </p>
       <DragDropContext onDragEnd={onDragEnd}>
         <Container>
           {state.columnKeys.map((key: string) => {

stories/src/virtual/react-virtualized/list.tsx

@@ -1,14 +1,14 @@
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import React, { CSSProperties, ReactElement, useState } from 'react';
 import ReactDOM from 'react-dom';
-import 'react-virtualized/styles.css';
 import { List } from 'react-virtualized';
-import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
+import 'react-virtualized/styles.css';
 
 import type {
-  DroppableProvided,
   DraggableProvided,
-  DraggableStateSnapshot,
   DraggableRubric,
+  DraggableStateSnapshot,
+  DroppableProvided,
   DropResult,
 } from '@hello-pangea/dnd';
 import type { Quote } from '../../types';
@@ -67,46 +67,52 @@ function App(props: Props): ReactElement {
   }
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable
-        droppableId="droppable"
-        mode="virtual"
-        renderClone={(
-          provided: DraggableProvided,
-          snapshot: DraggableStateSnapshot,
-          rubric: DraggableRubric,
-        ) => (
-          <QuoteItem
-            provided={provided}
-            isDragging={snapshot.isDragging}
-            quote={quotes[rubric.source.index]}
-            style={{ margin: 0 }}
-            index={rubric.source.index}
-          />
-        )}
-      >
-        {(droppableProvided: DroppableProvided) => (
-          <List
-            height={500}
-            rowCount={quotes.length}
-            rowHeight={110}
-            width={300}
-            ref={(ref: any) => {
-              // react-virtualized has no way to get the list's ref that I can so
-              // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
-              if (ref) {
-                // eslint-disable-next-line react/no-find-dom-node
-                const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
-                if (whatHasMyLifeComeTo instanceof HTMLElement) {
-                  droppableProvided.innerRef(whatHasMyLifeComeTo);
+    <>
+      <p>
+        React virtualized is no longer maintained and does not support React 18.
+        Try react-virtuoso or react-window instead.
+      </p>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable
+          droppableId="droppable"
+          mode="virtual"
+          renderClone={(
+            provided: DraggableProvided,
+            snapshot: DraggableStateSnapshot,
+            rubric: DraggableRubric,
+          ) => (
+            <QuoteItem
+              provided={provided}
+              isDragging={snapshot.isDragging}
+              quote={quotes[rubric.source.index]}
+              style={{ margin: 0 }}
+              index={rubric.source.index}
+            />
+          )}
+        >
+          {(droppableProvided: DroppableProvided) => (
+            <List
+              height={500}
+              rowCount={quotes.length}
+              rowHeight={110}
+              width={300}
+              ref={(ref: any) => {
+                // react-virtualized has no way to get the list's ref that I can so
+                // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
+                if (ref) {
+                  // eslint-disable-next-line react/no-find-dom-node
+                  const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
+                  if (whatHasMyLifeComeTo instanceof HTMLElement) {
+                    droppableProvided.innerRef(whatHasMyLifeComeTo);
+                  }
                 }
-              }
-            }}
-            rowRenderer={getRowRender(quotes)}
-          />
-        )}
-      </Droppable>
-    </DragDropContext>
+              }}
+              rowRenderer={getRowRender(quotes)}
+            />
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
   );
 }