chore: move all stories from react-components package to public-docsi…

…te-v9 and remove storybook setup from suite package (microsoft#31440)

apps/public-docsite-v9/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",

apps/public-docsite-v9/config/tests.js

@@ -0,0 +1,3 @@
+/** Jest test setup file. */
+
+require('@testing-library/jest-dom');

apps/public-docsite-v9/jest.config.js

@@ -0,0 +1,22 @@
+// @ts-check
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  displayName: 'public-docsite-v9',
+  preset: '../../jest.preset.js',
+  // TODO: lets not allow path aliases which point only to v9 packages ATM
+  moduleNameMapper: {},
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        isolatedModules: true,
+      },
+    ],
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
+};

apps/public-docsite-v9/package.json

@@ -15,7 +15,8 @@
     "type-check": "just-scripts type-check",
     "start": "yarn storybook:docs",
     "storybook": "start-storybook --port 3000 --no-manager-cache",
-    "storybook:docs": "yarn storybook --docs"
+    "storybook:docs": "yarn storybook --docs",
+    "test": "jest --passWithNoTests"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -44,6 +45,7 @@
     "react-dom": "17.0.2",
     "react-window": "^1.8.6",
     "tslib": "^2.1.0",
+    "react-hook-form": "^5.7.2",
     "@fluentui/react-nav-preview": "*"
   }
 }

packages/react-components/react-components/stories/AccessibilityScenarios/TabListOverflow.stories.tsx → apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.stories.tsx

@@ -70,6 +70,8 @@ const tabs: SettingsTab[] = [
 
 type OverflowMenuItemProps = {
   tab: SettingsTab;
+  // FIXME: This should be a consistent callback type
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type
   onClick: React.MouseEventHandler<HTMLDivElement>;
 };
 
@@ -89,6 +91,8 @@ const OverflowMenuItem = (props: OverflowMenuItemProps) => {
 };
 
 type OverflowMenuProps = {
+  // FIXME: This should be a consistent callback type
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type
   onTabSelect?: (tabId: string) => void;
 };
 

packages/react-components/react-components/stories/Concepts/Accessibility/FocusIndicator.stories.mdx → apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx

@@ -82,8 +82,7 @@ The [Link](?path=/docs/components-link--default) component uses `createCustomFoc
 </Canvas>
 
 ```tsx
-import { makeStyles } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-components';
+import { makeStyles, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   focusIndicator: createCustomFocusIndicatorStyle({

apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx

@@ -39,7 +39,7 @@ Fluent UI React v9 uses Griffel as CSS-in-JS to apply styles. To provide determi
 To configure the sorting behavior, please pass `compareMediaQueries` function with the same signature as sort functions in e.g. `Array.prototype.sort`.
 
 ```js
-import { createDOMRenderer } from '@griffel/react';
+import { createDOMRenderer } from '@fluentui/react-components';
 
 const mediaQueryOrder = [
   'only screen and (min-width: 1024px)',
@@ -69,7 +69,7 @@ const renderer = createDOMRenderer(document, {
 For mobile-first methodology, consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries):
 
 ```js
-import { createDOMRenderer } from '@griffel/react';
+import { createDOMRenderer } from '@fluentui/react-components';
 import sortCSSmq from 'sort-css-media-queries';
 
 const renderer = createDOMRenderer(document, {

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx

@@ -16,7 +16,7 @@ const Component = () => <Card>Lorem ipsum, dolor sit amet consectetur adipisicin
 After:
 
 ```tsx
-import { Card } from '@fluentui/react-components/unstable';
+import { Card } from '@fluentui/react-components';
 const Component = () => <Card>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</Card>;
 ```
 
@@ -65,7 +65,7 @@ After:
 
 ```tsx
 // in COMPONENT_NAME.tsx
-import { Card } from '@fluentui/react-components/unstable';
+import { Card } from '@fluentui/react-components';
 import { useStyles } from './COMPONENT_NAME.styles.ts';
 
 export const Component = () => {
@@ -75,7 +75,7 @@ export const Component = () => {
 };
 
 // in COMPONENT_NAME.styles.ts
-import { makeStyles, tokens } from '@fluentui/react-components/unstable';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useStyles = makeStyles({
   actionCard: {
@@ -127,7 +127,7 @@ After:
 
 ```tsx
 // in COMPONENT_NAME.tsx
-import { Card, mergeClasses } from '@fluentui/react-components/unstable';
+import { Card, mergeClasses } from '@fluentui/react-components';
 import { useStyles } from './COMPONENT_NAME.styles.ts';
 
 export const Component = props => {
@@ -141,7 +141,7 @@ export const Component = props => {
 };
 
 // in COMPONENT_NAME.styles.ts
-import { makeStyles } from '@fluentui/react-components/unstable';
+import { makeStyles } from '@fluentui/react-components';
 
 export const useStyles = makeStyles({
   chatListGroupTitleAsHeader: {
@@ -168,8 +168,8 @@ After:
 
 ```tsx
 import * as React from 'react';
-import { makeStyles } from '@fluentui/react-components/unstable';
-import { Card } from '@fluentui/react-components/unstable';
+import { makeStyles } from '@fluentui/react-components';
+import { Card } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   centeredCard: {
@@ -204,8 +204,8 @@ After:
 
 ```jsx
 import * as React from 'react';
-import { makeStyles } from '@fluentui/react-components/unstable';
-import { Card } from '@fluentui/react-components/unstable';
+import { makeStyles } from '@fluentui/react-components';
+import { Card } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   parent: {

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx

@@ -25,7 +25,7 @@ export const CardBodyExample = () => (
 After:
 
 ```jsx
-import { Card } from '@fluentui/react-components/unstable';
+import { Card } from '@fluentui/react-components';
 
 export const CardBodyExample = () => (
   <Card>

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx

@@ -17,7 +17,7 @@ const Component = () => <CardFooter>Lorem ipsum</CardFooter>;
 After:
 
 ```tsx
-import { CardFooter } from '@fluentui/react-components/unstable';
+import { CardFooter } from '@fluentui/react-components';
 
 const Component = () => <CardFooter Footer="Lorem ipsum" />;
 ```

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx

@@ -17,7 +17,7 @@ const Component = () => <CardHeader>Lorem ipsum</CardHeader>;
 After:
 
 ```tsx
-import { CardHeader } from '@fluentui/react-components/unstable';
+import { CardHeader } from '@fluentui/react-components';
 
 const Component = () => <CardHeader header="Lorem ipsum" />;
 ```

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx

@@ -21,7 +21,7 @@ const Component = () => (
 After:
 
 ```tsx
-import { CardPreview } from '@fluentui/react-components/unstable';
+import { CardPreview } from '@fluentui/react-components';
 
 const Component = () => (
   <CardPreview>

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx

@@ -5,12 +5,12 @@ import { Button, mergeClasses, Tooltip } from '@fluentui/react-components';
 import { V0IconComponent, V9IconComponent } from './types';
 import { useComparisonTileStyles } from './ComparisonTile.styles';
 
-interface IComparisonTileProps {
+interface ComparisonTileProps {
   V0Icon: V0IconComponent;
   V9Icon?: V9IconComponent;
 }
 
-export const ComparisonTile: React.FC<IComparisonTileProps> = ({ V0Icon, V9Icon }) => {
+export const ComparisonTile: React.FC<ComparisonTileProps> = ({ V0Icon, V9Icon }) => {
   const noV9Icon = !V9Icon;
 
   const tooltipWarningContent = <ul>{noV9Icon && <li>No equivalent icon available</li>}</ul>;

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx

@@ -6,7 +6,7 @@ import { V0IconComponent, V9IconComponent } from './types';
 
 const ComparisonTile = React.memo(ComparisonTileBase);
 
-interface IIconGridProps {
+interface IconGridProps {
   entries: {
     V0Icon: V0IconComponent;
     V9Icon?: V9IconComponent;
@@ -15,11 +15,11 @@ interface IIconGridProps {
 
 const ROW_SIZE = 3;
 
-interface IRowProps extends ListChildComponentProps {
-  data: IIconGridProps['entries'];
+interface RowProps extends ListChildComponentProps {
+  data: IconGridProps['entries'];
 }
 
-const Row = ({ index, style, data }: IRowProps) => {
+const Row = ({ index, style, data }: RowProps) => {
   const start = index * ROW_SIZE;
   const items = data.slice(start, start + 3);
   return (
@@ -33,7 +33,7 @@ const Row = ({ index, style, data }: IRowProps) => {
   );
 };
 
-export const IconGrid: React.FC<IIconGridProps> = ({ entries }) => {
+export const IconGrid: React.FC<IconGridProps> = ({ entries }) => {
   return (
     <List width="100%" itemCount={entries.length / ROW_SIZE} height={600} itemData={entries} itemSize={110}>
       {Row}

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx

@@ -25,9 +25,8 @@ An equivalent `Input` v9 usage is
 
 ```tsx
 import * as React from 'react';
-import { Label, Input } from '@fluentui/react-components/unstable';
+import { makeStyles, Label, Input } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { makeStyles } from '@griffel/react';
 
 const useLayoutStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx

@@ -40,10 +40,8 @@ An equivalent `Input` usage is:
 
 ```tsx
 import * as React from 'react';
-import { Text } from '@fluentui/react-components';
-import { Label, Input } from '@fluentui/react-components/unstable';
+import { makeStyles, Text, Label, Input } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { makeStyles } from '@griffel/react';
 
 const useStackStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx

@@ -102,9 +102,8 @@ An equivalent `RadioGroup` implementation:
 
 ```tsx
 import * as React from 'react';
-import { Label, Radio, RadioGroup } from '@fluentui/react-components';
+import { makeStyles, shorthands, Label, Radio, RadioGroup } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { makeStyles, shorthands } from '@griffel/react';
 import { AnimalCat24Regular } from '@fluentui/react-icons';
 
 const useIconOptionStyles = makeStyles({

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx

@@ -47,10 +47,9 @@ An equivalent `SpinButton` v9 usage is
 
 ```tsx
 import * as React from 'react';
-import { Label, SpinButton } from '@fluentui/react-components/unstable';
-import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components/unstable';
+import { makeStyles, Label, SpinButton } from '@fluentui/react-components';
+import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { makeStyles } from '@griffel/react';
 
 const useLayoutStyles = makeStyles({
   root: {
@@ -185,10 +184,9 @@ const SpinButtonV8CustomSuffixBasicExample: React.FunctionComponent = () => {
 
 ```tsx
 import * as React from 'react';
-import { Label, SpinButton } from '@fluentui/react-components/unstable';
-import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components/unstable';
+import { makeStyles, Label, SpinButton } from '@fluentui/react-components';
+import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { makeStyles } from '@griffel/react';
 
 const useLayoutStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { darkThemeBrandMap, lightThemeBrandMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 export const useColorBlockStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx

@@ -1,4 +1,4 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 
 import { ColorInfo } from './types';

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { namedColorMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { lightThemeNeutralMap, darkThemeNeutralMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { semanticToAliasMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { Input, tokens, typographyStyles } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, shorthands, Input, tokens, typographyStyles } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx

@@ -7,11 +7,11 @@ type Box = {
   text: 'string';
 };
 
-interface IWhatsNewBoxProps {
+interface WhatsNewBoxProps {
   boxes: Box[];
 }
 
-export const WhatsNewBoxes: React.FC<IWhatsNewBoxProps> = props => {
+export const WhatsNewBoxes: React.FC<WhatsNewBoxProps> = props => {
   const styles = useWhatsNewStyles();
 
   return (

apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx

@@ -3,14 +3,14 @@ import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
 import { FluentStoryContext } from '@fluentui/react-storybook-addon';
 import { webLightTheme, FluentProvider } from '@fluentui/react-components';
 
-interface IFluentDocsContainerProps {
+interface FluentDocsContainerProps {
   context: FluentStoryContext & DocsContextProps;
 }
 
 /**
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
-export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
+export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
   return (
     <>
       {/** TODO add table of contents */}