chore(react-examples): remove all remaining vNext package deps/storyb…

…ook setup (#19456)

* fix: remove all remaining vNext packages deps from react-examples

* fix(react-provider): properly specify babel-make-styles dependency

* Change files

* chore(react-examples): get rid of unnecessary sb setup after react-components was migrated to new dx

change/@fluentui-react-provider-6e09c807-56fc-4681-b802-d7fcc1036d46.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix(react-provider): properly specify babel-make-styles dependency",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-examples/.storybook/manager.js

@@ -1,8 +1,6 @@
 import { addons } from '@storybook/addons';
-import fluentuiTheme from './fluentuiTheme';
 
 addons.setConfig({
   showPanel: true,
   panelPosition: 'right',
-  theme: fluentuiTheme, // override the default Storybook theme with a custom fluent theme
 });

packages/react-examples/.storybook/preview-loader.js

@@ -23,7 +23,7 @@ export default function loader(source) {
 
   source = source.replace(/PACKAGE_NAME/g, packageName);
 
-  if (packageName === 'react' || packageName === 'react-components') {
+  if (packageName === 'react') {
     // Compare the list of direct deps of suite packages with the list of packages with examples
     // to see which extra packages' examples should be used  (note: all names here are unscoped).
     const packagesWithExamples = fs.readdirSync(path.resolve(__dirname, '../src')).filter(p => !/\.tsx?$/.test(p));
@@ -32,21 +32,6 @@ export default function loader(source) {
     const reactDeps = Object.keys(reactPackageJson.dependencies).map(d => d.split('/')[1] || d);
     const reactDepsWithExamples = packagesWithExamples.filter(p => reactDeps.includes(p));
 
-    // @TODO
-    // - this is a temporary solution until all converged packages use new storybook configuration
-    // - after new config is in place remove this whole IF
-    //
-    // NOTE:
-    // - if we run storybook for react-components we wanna include all possible package collocated stories
-    // based on react-components package.json
-    if (packageName === 'react-components') {
-      const _convergedDependencies = reactDeps.filter(dependencyName => {
-        return dependencyName.startsWith('react-');
-      });
-
-      reactDepsWithExamples.push(..._convergedDependencies);
-    }
-
     source = source.replace(/REACT_DEPS/g, [...new Set(reactDepsWithExamples)].join('|'));
   }
 

packages/react-examples/.storybook/preview.js

@@ -3,22 +3,13 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { configure, addParameters, addDecorator } from '@storybook/react';
 import 'cypress-storybook/react';
 import { withPerformance } from 'storybook-addon-performance';
-import { withFluentProvider, withKeytipLayer, withStrictMode } from '@fluentui/storybook';
+import { withKeytipLayer, withStrictMode } from '@fluentui/storybook';
 
 /**
  * "PACKAGE_NAME" placeholder is being replaced by webpack loader - @link {./preview.loader}
  * @type {string}
  */
 const packageNamePlaceholder = 'PACKAGE_NAME';
-const storyOrder = [
-  'Concepts/Introduction',
-  'Concepts/Developer/Quick Start',
-  'Concepts/Developer/Styling Components',
-  'Concepts',
-  'Theme',
-  'Components',
-  'Migrations/Flex/Overview',
-];
 
 addDecorator(withPerformance);
 addCustomDecorators();
@@ -31,13 +22,7 @@ addParameters({
 
 configure(loadStories, module);
 
-export const parameters = {
-  options: {
-    storySort: {
-      order: storyOrder,
-    },
-  },
-};
+export const parameters = {};
 
 // ================================
 //          Helpers
@@ -57,38 +42,16 @@ function addCustomDecorators() {
    */
   const customDecorators = new Set();
 
-  if (['react-cards', 'react-checkbox', 'react-tabs'].includes(packageNamePlaceholder)) {
+  if (['react-cards', 'react-tabs'].includes(packageNamePlaceholder)) {
     initializeIcons();
     customDecorators.add(withStrictMode);
   }
 
-  if (['react-button', 'react-components', 'react-tooltip', 'react-checkbox'].includes(packageNamePlaceholder)) {
-    customDecorators.add(withFluentProvider).add(withStrictMode);
-  }
-
-  // add decorators to all stories except vNext react-components suite
-  // - this is needed so we don't creep v8 dependencies to vNext deps
-  // - `withKeytipLayer` is v8 dependency - including it to vNext suite was causing CI errors - `Cannot read property 'disableGlobalClassNames' of undefined `
-  if (packageNamePlaceholder !== 'react-components') {
-    customDecorators.add(withKeytipLayer);
-  }
+  customDecorators.add(withKeytipLayer);
 
   customDecorators.forEach(decorator => addDecorator(decorator));
 }
 
-/**
- *
- * @param {string} storyName
- */
-function getStoryOrder(storyName) {
-  for (let i = 0; i < storyOrder.length; i++) {
-    if (storyName.startsWith(storyOrder[i])) {
-      return i;
-    }
-  }
-  return storyOrder.length;
-}
-
 /**
  * @typedef {{
  *   default: { title: string };
@@ -110,41 +73,23 @@ function loadStories() {
     require.context('../src/PACKAGE_NAME', true, /\.(Example|stories)\.tsx$/),
   ];
 
-  if (packageNamePlaceholder === 'react' || packageNamePlaceholder === 'react-components') {
+  if (packageNamePlaceholder === 'react') {
     // For suite package storybooks, also show the examples of re-exported component packages.
     // preview-loader will replace REACT_ DEPS with the actual list.
     contexts.push(
       require.context('../src', true, /(REACT_DEPS|PACKAGE_NAME)\/\w+\/[\w.]+\.(Example|stories)\.(tsx|mdx)$/),
     );
   }
 
-  // @TODO
-  // - this is a temporary solution until all converged packages use new storybook configuration
-  // - after new config is in place remove this whole IF
-  if (packageNamePlaceholder === 'react-components') {
-    // include package collocated stories within react-components
-    contexts.push(require.context('../../', true, /(REACT_DEPS)\/src\/[\w./]+\.(Example|stories)\.(tsx|mdx)$/));
-  }
-
   for (const req of contexts) {
     req.keys().forEach(key => {
       generateStoriesFromExamples(key, stories, req);
     });
   }
 
   // convert stories Set to array
-  const sorted = [...stories.values()].sort((s1, s2) => {
-    const order1 = getStoryOrder(s1.default.title);
-    const order2 = getStoryOrder(s2.default.title);
-    if (order1 < order2) {
-      // the lowest order goes first
-      return -1;
-    }
-    if (order1 > order2) {
-      return 1;
-    }
-    return s1.default.title > s2.default.title ? 1 : -1;
-  });
+  const sorted = [...stories.values()].sort((s1, s2) => (s1.default.title > s2.default.title ? 1 : -1));
+
   return sorted;
 }
 

packages/react-examples/package.json

@@ -48,12 +48,7 @@
     "@fluentui/react-focus": "^8.1.11",
     "@fluentui/react-hooks": "^8.2.7",
     "@fluentui/react-icons-mdl2": "^1.1.9",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.58",
-    "@fluentui/react-menu": "^9.0.0-alpha.65",
-    "@fluentui/react-shared-contexts": "^9.0.0-alpha.22",
     "@fluentui/react-tabs": "^1.0.0-beta.145",
-    "@fluentui/react-theme": "^9.0.0-alpha.21",
-    "@fluentui/react-utilities": "^9.0.0-alpha.40",
     "@fluentui/scheme-utilities": "^8.1.7",
     "@fluentui/style-utilities": "^8.3.0",
     "@fluentui/theme": "^2.2.2",

packages/react-provider/package.json

@@ -25,6 +25,7 @@
     "start": "yarn storybook"
   },
   "devDependencies": {
+    "@fluentui/babel-make-styles": "^9.0.0-alpha.38",
     "@fluentui/eslint-plugin": "^1.4.0",
     "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.34",
     "@fluentui/react-conformance": "^0.4.4",