wip: add og react-virtuoso

Author: petyosi

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "packages/message-list"]
 	path = packages/message-list
 	url = git@github.com:virtuoso-dev/message-list.git
+  branch = monorepo

common/config/rush/pnpm-lock.yaml

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Petyo Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/react-virtuoso/LICENSE

@@ -0,0 +1,102 @@
+<img src="https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png" width="229" />
+
+[![npm version](https://img.shields.io/npm/v/react-virtuoso.svg?style=flat)](//badge.fury.io/js/react-virtuoso)
+
+**React Virtuoso** - the most complete React virtualization rendering list/table/grid family of components.
+
+- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
+- [Chat message list UI](https://virtuoso.dev/virtuoso-message-list/) **NEW**;
+- [Grouped mode with sticky headers](https://virtuoso.dev/grouped-by-first-letter/);
+- [Responsive grid layout](https://virtuoso.dev/grid-responsive-columns/);
+- [Table Support](https://virtuoso.dev/hello-table/);
+- [Automatic handling of content resize](https://virtuoso.dev/auto-resizing/);
+- [Custom Header, Footer, and empty list components](https://virtuoso.dev/customize-structure/);
+- [Pinned top items](https://virtuoso.dev/top-items/);
+- [Endless scrolling](https://virtuoso.dev/endless-scrolling/), [press to load more](https://virtuoso.dev/press-to-load-more/);
+- [Initial top most item index](https://virtuoso.dev/initial-index/);
+- [Scroll to index method](https://virtuoso.dev/scroll-to-index/).
+
+For live examples and documentation, check the [documentation website](https://virtuoso.dev).
+
+## Sponsors
+
+If you are using Virtuoso for work, [sponsor it](https://github.com/sponsors/petyosi). Any donation helps a lot with the project development and maintenance.
+
+## Get Started
+
+```sh
+npm install react-virtuoso
+```
+
+```jsx
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { Virtuoso } from 'react-virtuoso'
+
+const App = () => {
+  return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## [Message List](https://virtuoso.dev/virtuoso-message-list/)
+
+The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes an imperative data management 
+API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation.
+
+## [Grouped Mode](https://virtuoso.dev/grouped-by-first-letter/)
+
+The `GroupedVirtuoso` component is a variant of the "flat" `Virtuoso`, with the following differences:
+
+- Instead of `totalCount`, the component exposes `groupCounts: number[]` property, which specifies the amount of items in each group.
+  For example, passing `[20, 30]` will render two groups with 20 and 30 items each;
+- In addition the `itemContent` property, the component requires an additional `groupContent` property,
+  which renders the **group header**. The `groupContent` callback receives the zero-based group index as a parameter.
+
+## [Grid](https://virtuoso.dev/grid-responsive-columns/)
+
+The `VirtuosoGrid` component displays **same sized items** in multiple columns.
+The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
+
+## [Table](https://virtuoso.dev/hello-table/)
+
+The `TableVirtuoso` component works just like `Virtuoso`, but with HTML tables.
+It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.
+
+## Works With Your UI Library of Choice
+
+You can customize the markup up to your requirements - check [the Material UI list demo](https://virtuoso.dev/material-ui-endless-scrolling/).
+If you need to support reordering, [check the React Sortable HOC example](https://virtuoso.dev/react-sortable-hoc/).
+
+## Documentation and Demos
+
+For in-depth documentation and live examples of the supported features and live demos, check the [documentation website](https://virtuoso.dev).
+
+## Browser support
+
+To support [legacy browsers](https://caniuse.com/resizeobserver), you might have to load a [ResizeObserver Polyfill](https://www.npmjs.com/package/resize-observer-polyfill) before using `react-virtuoso`:
+
+```
+import ResizeObserver from 'resize-observer-polyfill'
+if (!window.ResizeObserver)
+  window.ResizeObserver = ResizeObserver
+```
+
+## Author
+
+Petyo Ivanov [@petyosi](//twitter.com/petyosi).
+
+## Contributing
+
+### Fixes and new Features
+
+To run the tests, use `npm run test`.
+An end-to-end browser-based test suite is runnable with `npm run e2e`, with the pages being `e2e/*.tsx` and the tests `e2e/*.test.ts`.
+
+A convenient way to debug something is to preview the test cases in the browser.
+To do that, run `npm run dev` - it will launch a Ladle server that lets you browse the components in the `examples` folder.
+
+## License
+
+MIT License.

packages/react-virtuoso/README.md

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "extends": ["../../biome.jsonc"],
+  "linter": {
+    "rules": {
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "info"
+      }
+    }
+  }
+}

packages/react-virtuoso/biome.jsonc

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+//@ts-expect-error - type module and playwright
+import { navigateToExample } from './utils.ts'
+
+test.describe('list with collapsible long items', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await navigateToExample(page, baseURL, 'collapsible-long-item')
+    await page.waitForSelector('[data-testid=virtuoso-scroller]')
+    await page.waitForTimeout(200)
+  })
+
+  test('compensates correctly when collapsing an item', async ({ page }) => {
+    await page.evaluate(() => {
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
+      scroller.scrollBy({ top: -400 })
+    })
+
+    await page.waitForTimeout(500)
+
+    await page.evaluate(() => {
+      const button = document.querySelector('[data-index="90"] button') as HTMLButtonElement
+      button.click()
+    })
+
+    await page.waitForTimeout(200)
+
+    const scrollTop = await page.evaluate(() => {
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
+      return scroller.scrollTop
+    })
+
+    expect(scrollTop).toBe(9200)
+  })
+})

packages/react-virtuoso/e2e/collapsible-long-item.test.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+//@ts-expect-error - type module and playwright
+import { navigateToExample } from './utils.ts'
+
+test.describe('list with hundred items', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await navigateToExample(page, baseURL, 'data')
+    await page.waitForSelector('[data-testid=virtuoso-scroller]')
+    await page.waitForTimeout(100)
+  })
+
+  test('renders 10 items', async ({ page }) => {
+    const itemCount = await page.evaluate(() => {
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
+      return listContainer.childElementCount
+    })
+    expect(itemCount).toBe(10)
+  })
+
+  test('fills in the scroller', async ({ page }) => {
+    const scrollHeight = await page.evaluate(() => {
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
+      return scroller.scrollHeight
+    })
+    expect(scrollHeight).toBe(100 * 30)
+  })
+
+  test('increases the items', async ({ page }) => {
+    await page.evaluate(() => {
+      document.querySelector('button')!.click()
+    })
+
+    const scrollHeight = await page.evaluate(() => {
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
+      return scroller.scrollHeight
+    })
+
+    expect(scrollHeight).toBe(120 * 30)
+  })
+})

packages/react-virtuoso/e2e/data.test.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+//@ts-expect-error - type module and playwright
+import { navigateToExample } from './utils.ts'
+
+test.describe('list with hundred items', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await navigateToExample(page, baseURL, 'follow-output-loading-image')
+    await page.waitForTimeout(100)
+  })
+
+  test('scrolls to bottom when image is loaded', async ({ page }) => {
+    await page.locator('data-testid=add-image').click()
+    await page.waitForTimeout(800)
+    const scrollTop = await page.locator('data-testid=virtuoso-scroller').evaluate((el) => el.scrollTop)
+    expect(scrollTop).toBe(2800)
+  })
+})