(chore) Move @fluentui/react-components to react-components subfolder (…

…#22557)

.codesandbox/ci.json

@@ -1,6 +1,6 @@
 {
   "buildCommand": "build:codesandbox",
-  "packages": ["packages/react", "packages/react-components"],
+  "packages": ["packages/react", "packages/react-components/react-components"],
   "sandboxes": ["x5u3t", "spnyu"],
   "node": "12"
 }

.github/CODEOWNERS

@@ -137,7 +137,7 @@ packages/react-button @microsoft/cxe-red @khmakoto
 packages/react-card @microsoft/cxe-prg
 packages/react-checkbox @microsoft/cxe-red @khmakoto
 packages/react-combobox @microsoft/cxe-coastal @smhigley
-packages/react-components @microsoft/fluentui-react
+packages/react-components/react-components @microsoft/fluentui-react
 packages/react-dialog @microsoft/cxe-prg
 packages/react-divider @microsoft/cxe-coastal
 packages/react-focus @microsoft/cxe-red @khmakoto

apps/public-docsite-v9/.storybook/main.utils.js

@@ -9,14 +9,27 @@ const path = require('path');
 function getVnextStories() {
   /** @type {Record<string,unknown>} */
   const packageJson = JSON.parse(
-    fs.readFileSync(path.resolve(__dirname, '../../../packages/react-components/package.json'), 'utf-8'),
+    fs.readFileSync(
+      path.resolve(__dirname, '../../../packages/react-components/react-components/package.json'),
+      'utf-8',
+    ),
   );
 
   const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies);
 
   return Object.keys({ ...dependencies, '@fluentui/react-components': '' })
     .filter(pkgName => pkgName.startsWith('@fluentui/'))
-    .map(pkgName => '../../../packages/' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)');
+    .map(pkgName => {
+      const name = pkgName.replace('@fluentui/', '');
+      const storiesGlob = '/src/**/*.stories.@(ts|tsx|mdx)';
+
+      //TODO: simplify once all v9 packages have been moved to the new react-components subfolder.
+      if (fs.existsSync(`../../packages/${name}/package.json`)) {
+        return `../../../packages/${name}${storiesGlob}`;
+      } else {
+        return `../../../packages/react-components/${name}${storiesGlob}`;
+      }
+    });
 }
 
 exports.getVnextStories = getVnextStories;

apps/public-docsite-v9/.storybook/main.utils.test.js

@@ -7,14 +7,14 @@ describe(`main utils`, () => {
       const actual = utils.getVnextStories();
 
       const expected = [
-        expect.stringContaining('../../react-'),
+        expect.stringContaining('../../../packages/react-'),
         expect.stringContaining('/src/**/*.stories.@(ts|tsx|mdx)'),
       ];
 
       expect(actual).toEqual(expect.arrayContaining(expected));
 
       const first = actual[0];
-      expect(first.startsWith('../../react-')).toBeTruthy();
+      expect(first.startsWith('../../../packages/react-')).toBeTruthy();
       expect(first.endsWith('/src/**/*.stories.@(ts|tsx|mdx)')).toBeTruthy();
     });
   });

change/@fluentui-react-components-20dff592-d70a-4a60-bfd6-64b1cc2abd97.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "react-components: Move to new common folder",
+  "packageName": "@fluentui/react-components",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "none"
+}

lerna.json

@@ -1,5 +1,13 @@
 {
-  "packages": ["apps/*", "packages/*", "scripts", "packages/fluentui/*", "tools", "typings"],
+  "packages": [
+    "apps/*",
+    "packages/*",
+    "packages/react-components/*",
+    "scripts",
+    "packages/fluentui/*",
+    "tools",
+    "typings"
+  ],
   "npmClient": "yarn",
   "useWorkspaces": true,
   "version": "0.0.0"

package.json

@@ -264,6 +264,7 @@
       "apps/*",
       "packages/*",
       "packages/fluentui/*",
+      "packages/react-components/*",
       "scripts",
       "tools",
       "typings"
@@ -300,6 +301,7 @@
       "package.json",
       "apps/*/package.json",
       "packages/!(web-components)/package.json",
+      "packages/react-components/*/package.json",
       "packages/fluentui/*/package.json",
       "scripts/package.json"
     ],

packages/react-components/.eslintrc.json → packages/react-components/react-components/.eslintrc.json

@@ -5,12 +5,21 @@
     {
       "files": "**/index.ts",
       "rules": {
-        "@rnx-kit/no-export-all": ["error", { "expand": "all" }],
+        "@rnx-kit/no-export-all": [
+          "error",
+          {
+            "expand": "all"
+          }
+        ],
         "@fluentui/ban-imports": [
           "error",
           {
             "pathRegex": ".*",
-            "names": [{ "regex": "Commons$" }],
+            "names": [
+              {
+                "regex": "Commons$"
+              }
+            ],
             "message": "Commons types should not be exported from @fluentui/react-components"
           }
         ]

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

@@ -1,7 +1,7 @@
-const rootMain = require('../../../.storybook/main');
+const rootMain = require('../../../../.storybook/main');
 const utils = require('./main.utils');
 
-module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
   stories: [
     ...rootMain.stories,

packages/react-components/.storybook/main.utils.js → packages/react-components/react-components/.storybook/main.utils.js

@@ -14,7 +14,18 @@ function getVnextStories() {
 
   return Object.keys(dependencies)
     .filter(pkgName => pkgName.startsWith('@fluentui/'))
-    .map(pkgName => '../../' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)');
+    .map(pkgName => {
+      const name = pkgName.replace('@fluentui/', '');
+      const storiesGlob = '/src/**/*.stories.@(ts|tsx|mdx)';
+      const pkgUnmigratedPath = `../../${name}`;
+      const pkgMigratedPath = `../${name}`;
+      //TODO: simplify once all v9 packages have been moved to the new react-components subfolder.
+      if (fs.existsSync(pkgUnmigratedPath + '/package.json')) {
+        return `../${pkgUnmigratedPath}${storiesGlob}`;
+      } else {
+        return `../${pkgMigratedPath}${storiesGlob}`;
+      }
+    });
 }
 
 exports.getVnextStories = getVnextStories;

packages/react-components/.storybook/main.utils.test.js → packages/react-components/react-components/.storybook/main.utils.test.js

@@ -5,16 +5,15 @@ describe(`main utils`, () => {
   describe(`#getVnextStories`, () => {
     it(`should generate storybook stories string array of glob based on package.json#dependencies field`, () => {
       const actual = utils.getVnextStories();
-
       const expected = [
-        expect.stringContaining('../../react-'),
+        expect.stringContaining('../../../react-'),
         expect.stringContaining('/src/**/*.stories.@(ts|tsx|mdx)'),
       ];
 
       expect(actual).toEqual(expect.arrayContaining(expected));
 
       const first = actual[0];
-      expect(first.startsWith('../../react-')).toBeTruthy();
+      expect(first.startsWith('../../../react-')).toBeTruthy();
       expect(first.endsWith('/src/**/*.stories.@(ts|tsx|mdx)')).toBeTruthy();
     });
   });

packages/react-components/.storybook/preview.js → packages/react-components/react-components/.storybook/preview.js

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