chore: Add internal SSR test stories to ssr-tests-v9 (microsoft#23852)

* chore: Add internal SSR test stories to ssr-tests-v9

Adds the capability to have internal SSR tests that will not appear as a
part of the public documentation

* Setup storybook

* Update README.md

* revert charting

* fix build

* fix build

Author: ling1726

apps/ssr-tests-v9/.storybook/main.js

@@ -0,0 +1,14 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});

apps/ssr-tests-v9/.storybook/preview.js

@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };

apps/ssr-tests-v9/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}

apps/ssr-tests-v9/package.json

@@ -13,7 +13,10 @@
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "lint": "just-scripts lint",
-    "test": "jest && ts-node --transpile-only ./src/test.ts",
+    "storybook": "node ../../scripts/storybook/runner",
+    "test:unit": "jest",
+    "test:ssr": "ts-node --transpile-only ./src/test.ts",
+    "test": "yarn test:unit && yarn test:ssr",
     "type-check": "tsc -b tsconfig.json"
   },
   "dependencies": {

apps/ssr-tests-v9/src/build.ts

@@ -28,6 +28,7 @@ async function build() {
   const generateStartTime = process.hrtime();
 
   const rawStoriesGlobs = getVnextStories() as string[];
+  rawStoriesGlobs.push(path.resolve(path.join(__dirname, './stories/**/index.stories.tsx')));
   const storiesGlobs = rawStoriesGlobs
     // TODO: Find a better way for this. Pass the path via params? 👇
     .map(pattern => path.resolve(__dirname, pattern));

apps/ssr-tests-v9/src/stories/Menu/DefaultOpen.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Button, MenuItem, Menu, MenuTrigger, MenuPopover, MenuList } from '@fluentui/react-components';
+
+export const DefaultOpen = () => (
+  <Menu defaultOpen>
+    <MenuTrigger>
+      <Button>Default open</Button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>Item</MenuItem>
+        <MenuItem>Item</MenuItem>
+        <MenuItem>Item</MenuItem>
+        <MenuItem>Item</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);

apps/ssr-tests-v9/src/stories/Menu/index.stories.tsx

@@ -0,0 +1,5 @@
+export { DefaultOpen } from './DefaultOpen.stories';
+
+export default {
+  title: 'Menu',
+};

apps/ssr-tests-v9/src/stories/README.md

@@ -0,0 +1,8 @@
+# Internal stories for SSR tests
+
+This project is not configured to host a storybook but contains
+storyfiles. The storyfiles in this folder are used for test cases that we do
+not want on the public docsite.
+
+The project does not actually need to host a storybook, but the storybook
+setup is still applied for consistency with other projects.

apps/ssr-tests-v9/src/stories/Tooltip/DefaultOpen.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Button, Tooltip } from '@fluentui/react-components';
+
+export const DefaultOpen = () => (
+  <Tooltip relationship="description" visible content="Default open tooltip">
+    <Button>Default open</Button>
+  </Tooltip>
+);

apps/ssr-tests-v9/src/stories/Tooltip/index.stories.tsx

@@ -0,0 +1,5 @@
+export { DefaultOpen } from './DefaultOpen.stories';
+
+export default {
+  title: 'Tooltip',
+};

apps/ssr-tests-v9/src/utils/generateEntryPoints.ts

@@ -15,10 +15,7 @@ type GenerateEntryPointsConfig = {
 export async function generateEntryPoints(config: GenerateEntryPointsConfig): Promise<void> {
   const storiesFiles = config.storiesGlobs.map(pattern => glob.sync(pattern)).flatMap(pattern => pattern);
 
-  // TODO: Can removed after the issue will be solved https://github.com/microsoft/fluentui/issues/23393
-  const indexStoriesFiles = storiesFiles.filter(filename =>
-    fs.readFileSync(filename, { encoding: 'utf8' }).includes('export { Default } from'),
-  );
+  const indexStoriesFiles = storiesFiles.filter(filename => filename.includes('index.stories.ts'));
 
   const distDir = path.dirname(config.cjsEntryPoint);
   const imports = (

apps/ssr-tests-v9/tsconfig.json

@@ -18,6 +18,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }

apps/ssr-tests-v9/tsconfig.stories.json

@@ -14,25 +14,25 @@ const ShadowBox: React.FunctionComponent<
     shadow: string;
     isBrand: boolean;
   }
-> = props => (
+> = ({ shadow, isBrand, ...rest }) => (
   <div
-    {...props}
+    {...rest}
     style={{
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       flexDirection: 'column',
-      boxShadow: props.shadow,
+      boxShadow: shadow,
       minHeight: '2rem',
       fontFamily: 'monospace',
       fontSize: 10,
-      ...(props.isBrand && {
+      ...(isBrand && {
         backgroundColor: theme.light.colorBrandBackground,
         color: theme.light.colorNeutralForegroundOnBrand,
       }),
     }}
   >
-    {props.shadow.split('),').map((line, index, arr) => {
+    {shadow.split('),').map((line, index, arr) => {
       const value = index < arr.length - 1 ? line + ')' : line;
       return <div key={value}>{value}</div>;
     })}