feat(react-virtualizer): migrate package from fluentui core repo

.github/CODEOWNERS

@@ -23,6 +23,7 @@ packages/react-gamepad-navigation @microsoft/cxe-prg @hectorjjb
 packages/teams-components @microsoft/teams-prg
 packages/token-analyzer @microsoft/xc-uxe
 packages/react-contextual-pane @microsoft/teams-prg
+packages/react-virtualizer @microsoft/xc-uxe
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 #### Build/Infra

package.json

@@ -67,8 +67,8 @@
     "@swc/core": "1.11.24",
     "@swc/helpers": "~0.5.11",
     "@swc/jest": "0.2.38",
-    "@testing-library/react": "16.3.0",
     "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
     "@types/node": "20.14.9",

packages/react-virtualizer/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../babel.config.json"
+}

packages/react-virtualizer/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import rootConfig from '../../../.storybook/main';
+
+const config: StorybookConfig = {
+  ...rootConfig,
+  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+};
+
+export default config;

packages/react-virtualizer/.storybook/preview.tsx

@@ -0,0 +1,10 @@
+import type { Preview } from '@storybook/react';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import rootPreview from '../../../.storybook/preview';
+
+const preview: Preview = {
+  ...rootPreview,
+};
+
+export default preview;

packages/react-virtualizer/.storybook/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": [
+    "../stories/**/*.stories.ts",
+    "../stories/**/*.stories.js",
+    "../stories/**/*.stories.jsx",
+    "../stories/**/*.stories.tsx",
+    "../stories/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}

packages/react-virtualizer/.swcrc

@@ -0,0 +1,30 @@
+{
+  "jsc": {
+    "target": "es2019",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ],
+  "$schema": "https://json.schemastore.org/swcrc"
+}

packages/react-virtualizer/README.md

@@ -0,0 +1,30 @@
+# react-virtualizer
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build react-virtualizer` to build the library.
+
+## Running unit tests
+
+Run `nx test react-virtualizer` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Dependency
+
+When taking @fluentui/react-contributor as a dependency, we recommend using the latest patch version i.e. "@fluentui-contrib/react-virtualizer": "~0.0.1".
+This is due to major version bumps being reserved for future stable releases or major API changes, while minor versioning may contain smaller API modifications.
+
+## Description
+
+React-virtualizer is a new approach to virtualization that uses IntersectionObserver to enable scroll detection.
+
+The core benefit of this method, is that the virtualization itself is disconnected from both a scroll container, and any JS loop detection, to increase flexibility and react performance.
+
+This enables virtualization in the top level HTML page body, as well as multiple virtualized lists in a single scroll view.
+
+## Usage
+
+It is recommended to use the ScrollView versions of this virtualizer for simple virtualization scenarios, as it simplifies the encapsulation of virtualizer hooks and provides access to internal variables via context.
+
+If more complex virtualization is needed, a variety of static/dynamic hooks has been provided to configure virtualizer variants, be sure to take a look at the base virtualizer stories to see core implementation, or implement the hooks similar to the internal usage of VirtualizerScrollView/VirtualizerScrollViewDynamic.

packages/react-virtualizer/eslint.config.cjs

@@ -0,0 +1,19 @@
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+];

packages/react-virtualizer/eslint.config.js

@@ -0,0 +1,15 @@
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

packages/react-virtualizer/jest.config.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import { readFileSync } from 'fs';
+
+// Reading the SWC compilation config and remove the "exclude"
+// for the test files to be compiled by SWC
+const { exclude: _, ...swcJestConfig } = JSON.parse(
+  readFileSync(`${__dirname}/.swcrc`, 'utf-8')
+);
+
+// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
+// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
+if (swcJestConfig.swcrc === undefined) {
+  swcJestConfig.swcrc = false;
+}
+
+// Uncomment if using global setup/teardown files being transformed via swc
+// https://nx.dev/nx-api/jest/documents/overview#global-setupteardown-with-nx-libraries
+// jest needs EsModule Interop to find the default exported setup/teardown functions
+// swcJestConfig.module.noInterop = false;
+
+export default {
+  displayName: 'react-virtualizer',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  testEnvironment: 'jsdom',
+  coverageDirectory: '../../coverage/packages/react-virtualizer',
+};

packages/react-virtualizer/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@fluentui-contrib/react-virtualizer",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "devDependencies": {
+    "jsonc-eslint-parser": "2.4.0",
+    "@testing-library/react": "16.3.0"
+  },
+  "dependencies": {
+    "@fluentui/react-utilities": "^9.16.0",
+    "@griffel/react": "^1.5.14",
+    "@swc/helpers": "~0.5.11",
+    "jsonc-eslint-parser": "2.4.0"
+  },
+  "peerDependencies": {
+    "@fluentui/react-shared-contexts": ">=9.7.2 <10.0.0",
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
+  }
+}

packages/react-virtualizer/playwright.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './src',
+  /* Glob patterns or regular expressions that match test files. */
+  testMatch: '**/*.component-browser-@(spec|test).tsx',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'list',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Port to use for Playwright component endpoint. */
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    ctPort: 3100 + Number(require('./package.json').name.length),
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

packages/react-virtualizer/playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

packages/react-virtualizer/playwright/index.tsx

@@ -0,0 +1 @@
+// Import styles, initialize component theme here.

packages/react-virtualizer/project.json

@@ -0,0 +1,65 @@
+{
+  "name": "react-virtualizer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-virtualizer/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@fluentui-contrib/nx-plugin:build"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": [
+          "packages/react-virtualizer/**/*.ts",
+          "packages/react-virtualizer/**/*.tsx"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/react-virtualizer/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "type-check": {
+      "executor": "@fluentui-contrib/nx-plugin:type-check"
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/react-virtualizer/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/react-virtualizer",
+        "configDir": "packages/react-virtualizer/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "component-test": {
+      "executor": "@fluentui-contrib/nx-plugin:playwright",
+      "options": {
+        "testingType": "component",
+        "output": "{workspaceRoot}/dist/.playwright/packages/react-virtualizer",
+        "config": "packages/react-virtualizer/playwright.config.ts"
+      }
+    }
+  }
+}

packages/react-virtualizer/src/Hooks.ts

@@ -0,0 +1,17 @@
+export type {
+  IndexedResizeCallbackElement,
+  ResizeCallbackWithRef,
+  VirtualizerDynamicPaginationProps,
+  VirtualizerMeasureDynamicProps,
+  VirtualizerMeasureProps,
+  VirtualizerStaticPaginationProps,
+} from './hooks/index';
+export {
+  createResizeObserverFromDocument,
+  getRTLRootMargin,
+  useDynamicVirtualizerMeasure,
+  useIntersectionObserver,
+  useMeasureList,
+  useResizeObserverRef_unstable,
+  useStaticVirtualizerMeasure,
+} from './hooks/index';

packages/react-virtualizer/src/Utilities.ts

@@ -0,0 +1,14 @@
+export type {
+  DynamicVirtualizerContextProps,
+  ScrollToInterface,
+  ScrollToItemDynamicParams,
+  ScrollToItemStaticParams,
+  VirtualizerContextProps,
+} from './utilities/index';
+export {
+  VirtualizerContextProvider,
+  scrollToItemDynamic,
+  scrollToItemStatic,
+  useVirtualizerContextState_unstable,
+  useVirtualizerContext_unstable,
+} from './utilities/index';