docs(react-virtualizer): Update virtualizer stories to use the same storybook Meta format as contrib repo

apps/docsite/src/Welcome.mdx

@@ -30,6 +30,8 @@ Explore the various packages available to extend your Fluent UI capabilities:
 
 - [**react-tree-grid**](/docs/packages-react-tree-grid--docs): TreeGrid component for hierarchical data.
 
+- [**react-virtualizer**](/docs/packages-react-virtualizer--docs): Virtualizer hooks and scroll view component for optimizing long-list renders
+
 ## Getting Started
 
 To get started with any of these packages in your project:

change/@fluentui-contrib-react-virtualizer-2a2a41f2-f708-4042-9566-0e3f176fa187.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Remove jsx automatic runtime from render functions, import react instead",
+  "packageName": "@fluentui-contrib/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-virtualizer/src/components/Virtualizer/renderVirtualizer.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource @fluentui/react-jsx-runtime */
-
 import * as React from 'react';
 import type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';
 

packages/react-virtualizer/src/components/VirtualizerScrollView/renderVirtualizerScrollView.tsx

@@ -1,6 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource @fluentui/react-jsx-runtime */
-
+import * as React from 'react';
 import type {
   VirtualizerScrollViewSlots,
   VirtualizerScrollViewState,

packages/react-virtualizer/src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource @fluentui/react-jsx-runtime */
+import * as React from 'react';
 import { assertSlots } from '@fluentui/react-utilities';
 import {
   VirtualizerScrollViewDynamicSlots,

packages/react-virtualizer/stories/Virtualizer/VirtualizerDescription.md

@@ -1,6 +1,5 @@
 <!-- Don't allow prettier to collapse code block into single line -->
 <!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
 >
 > ```jsx
 >
@@ -10,3 +9,7 @@
 >
 > - Features and APIs may change before final release
 > - Please contact us if you intend to use this in your product
+>
+>
+> This library contains hooks and helpers to enable virtualization using the browsers native IntersectionObserver
+> For simpler integration, please see VirtualizerScrollView & VirtualizerScrollViewDynamic

packages/react-virtualizer/stories/Virtualizer/index.stories.ts

@@ -1,5 +1,6 @@
-import { Virtualizer } from '@fluentui/react-virtualizer';
-import descriptionMd from './VirtualizerDescription.md';
+import description from '../../README.md';
+import { Meta } from '@storybook/react';
+import { Virtualizer } from '../../src/Virtualizer';
 
 export { Default } from './Default.stories';
 export { DefaultUnbounded } from './DefaultUnbounded.stories';
@@ -10,14 +11,16 @@ export { Reversed } from './Reversed.stories';
 export { RTL } from './RTL.stories';
 export { MultiUnbounded } from './MultiUnbounded.stories';
 
-export default {
-  title: 'Preview Components/Virtualizer',
+const meta: Meta<typeof Virtualizer> = {
+  title: 'Packages/react-virtualizer/Virtualizer',
   component: Virtualizer,
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd].join('\n'),
+        component: description,
       },
     },
   },
 };
+
+export default meta;

packages/react-virtualizer/stories/VirtualizerScrollView/VirtualizerScrollViewDescription.md

@@ -1,6 +1,5 @@
 <!-- Don't allow prettier to collapse code block into single line -->
 <!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
 >
 > ```jsx
 >
@@ -10,3 +9,7 @@
 >
 > - Features and APIs may change before final release
 > - Please contact us if you intend to use this in your product
+>
+> VirtualizerScrollView provides an out of the box static (uniform row/column sizing) implementation of Virtualizer hooks
+>
+> If looking for dynamic sizes or auto-measuring features, use VirtualizerScrollViewDynamic

packages/react-virtualizer/stories/VirtualizerScrollView/index.stories.ts

@@ -1,19 +1,23 @@
-import { VirtualizerScrollView } from '@fluentui/react-virtualizer';
-import descriptionMd from './VirtualizerScrollViewDescription.md';
 import accessibilityMd from './VirtualizerScrollViewAccessibility.md';
+import description from './VirtualizerScrollViewDescription.md';
+import { VirtualizerScrollView } from '../../src/VirtualizerScrollView';
+import { Meta } from '@storybook/react';
 
 export { Default } from './Default.stories';
 export { ScrollTo } from './ScrollTo.stories';
 export { SnapToAlignment } from './SnapToAlignment.stories';
 
-export default {
-  title: 'Preview Components/VirtualizerScrollView',
+const meta: Meta<typeof VirtualizerScrollView> = {
+  title: 'Packages/react-virtualizer/VirtualizerScrollView',
   component: VirtualizerScrollView,
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd, accessibilityMd].join('\n'),
+        accessibilityMd: accessibilityMd,
+        component: description,
       },
     },
   },
 };
+
+export default meta;

packages/react-virtualizer/stories/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamicDescription.md

@@ -1,6 +1,5 @@
 <!-- Don't allow prettier to collapse code block into single line -->
 <!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
 >
 > ```jsx
 >
@@ -10,3 +9,9 @@
 >
 > - Features and APIs may change before final release
 > - Please contact us if you intend to use this in your product
+>
+> VirtualizerScrollViewDynamic provides an out of the box virtualizer implementation for dynamic or variant sized columns/rows
+>
+> This component has auto enabled measuring functionality when getItemSize is not passed in as prop function.
+>
+> If rows/columns are known uniform sizes, use VirtualizerScrollView instead

packages/react-virtualizer/stories/VirtualizerScrollViewDynamic/index.stories.ts

@@ -1,21 +1,25 @@
-import { VirtualizerScrollViewDynamic } from '@fluentui/react-virtualizer';
-import descriptionMd from './VirtualizerScrollViewDynamicDescription.md';
+import description from './VirtualizerScrollViewDynamicDescription.md';
 import accessibilityMd from './VirtualizerScrollViewDynamicAccessibility.md';
+import { Meta } from '@storybook/react';
+import { VirtualizerScrollViewDynamic } from '../../src/VirtualizerScrollViewDynamic';
 
 export { AutoMeasure } from './AutoMeasure.stories';
 export { Default } from './Default.stories';
 export { ScrollTo } from './ScrollTo.stories';
 export { ScrollLoading } from './ScrollLoading.stories';
 export { SnapToAlignment } from './SnapToAlignment.stories';
 
-export default {
-  title: 'Preview Components/VirtualizerScrollViewDynamic',
+const meta: Meta<typeof VirtualizerScrollViewDynamic> = {
+  title: 'Packages/react-virtualizer/VirtualizerScrollViewDynamic',
   component: VirtualizerScrollViewDynamic,
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd, accessibilityMd].join('\n'),
+        accessibilityMd: accessibilityMd,
+        component: description,
       },
     },
   },
 };
+
+export default meta;