chore(react-storybook): migrate to new DX stage 1 (microsoft#19037)

* chore(react-storybook): migrate to new DX stage 1
* chore: update codeowners for storybook packages

.github/CODEOWNERS

@@ -125,8 +125,8 @@ packages/react-focus/ @microsoft/cxe-red @khmakoto
 packages/react-image/ @microsoft/cxe-prg
 packages/react-text/ @microsoft/cxe-prg
 packages/react-input/ @microsoft/cxe-red @ecraig12345
-packages/react-storybook/ @microsoft/cxe-prg @ling1726 @layershifter
-packages/storybook/ @microsoft/cxe-prg @ling1726 @layershifter
+packages/react-storybook/ @microsoft/cxe-prg @microsoft/teams-prg
+packages/storybook/ @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-link/ @microsoft/cxe-red @khmakoto
 packages/react-slider/ @microsoft/cxe-red
 packages/react-tabs/ @microsoft/cxe-red @behowell

nx.json

@@ -107,7 +107,7 @@
     "@fluentui/react-positioning": { "tags": ["vNext"], "implicitDependencies": [] },
     "@fluentui/react-provider": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-shared-contexts": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
-    "@fluentui/react-storybook": { "implicitDependencies": [] },
+    "@fluentui/react-storybook": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-tabs": { "implicitDependencies": [] },
     "@fluentui/react-tabster": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-text": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },

packages/react-storybook/.storybook/main.js

@@ -0,0 +1,11 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    return localConfig;
+  },
+});

packages/react-storybook/.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 };

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

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
+  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
+  "include": ["../src/**/*", "*.js"]
+}

packages/react-storybook/config/api-extractor.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
 }

packages/react-storybook/config/api-extractor.local.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+}

packages/react-storybook/package.json

@@ -18,10 +18,11 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "echo \"This is DEPRECATED instead use 'test --watch'\" && just-scripts jest-watch",
+    "start": "yarn storybook",
     "test": "jest",
-    "update-snapshots": "echo \"This is DEPRECATED instead use 'test -u'\" && just-scripts jest -u"
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-storybook/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.2",

packages/react-storybook/tsconfig.json

@@ -1,16 +1,17 @@
 {
   "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES5",
     "module": "CommonJS",
     "lib": ["ES2015", "dom"],
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,
+    "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"]
+  }
 }

workspace.json

@@ -192,7 +192,11 @@
       "projectType": "library",
       "sourceRoot": "packages/react-shared-contexts/src"
     },
-    "@fluentui/react-storybook": { "root": "packages/react-storybook", "projectType": "library" },
+    "@fluentui/react-storybook": {
+      "root": "packages/react-storybook",
+      "projectType": "library",
+      "sourceRoot": "packages/react-storybook/src"
+    },
     "@fluentui/react-tabs": { "root": "packages/react-tabs", "projectType": "library" },
     "@fluentui/react-tabster": {
       "root": "packages/react-tabster",