chore: migrate whole repo to new @fluentui/scripts-* family of packages (#26182)

* chore(scripts/generators): update create-* generators to contain new granular script packages

* chore: migrate scripts/ sub-folders to packages

* chore: migrate apps/ to use new scripts-* packages

* chore: migrate packages/ to use new scripts-* packages

* chore(.github): update codeowners

* generate change-files

* chore: make danger work with packaged api

Author: Hotell

.github/CODEOWNERS

@@ -28,7 +28,6 @@
 /.githooks @microsoft/fluentui-react-build
 /.storybook @microsoft/fluentui-react-build
 /.vscode @microsoft/fluentui-react-build
-/scripts @microsoft/fluentui-react-build
 /tools @microsoft/fluentui-react-build
 
 #### Root Build files
@@ -58,6 +57,33 @@
 /.github/CODEOWNERS @microsoft/fluentui-react-build @justSlone @jurokapsiar @tudorpopams
 /.github/ISSUE_TEMPLATE* @justSlone @jurokapsiar @tudorpopams
 
+## Tooling packages
+scripts/api-extractor @microsoft/fluentui-react-build
+scripts/babel @microsoft/fluentui-react-build
+scripts/beachball @microsoft/fluentui-react-build
+scripts/cypress @microsoft/fluentui-react-build
+scripts/dangerjs @microsoft/fluentui-react-build
+scripts/dependency-graph-generator @microsoft/fluentui-react-build
+scripts/executors @microsoft/fluentui-react-build
+scripts/fluentui-publish @microsoft/fluentui-react-build
+scripts/generators @microsoft/fluentui-react-build
+scripts/github @microsoft/fluentui-react-build
+scripts/gulp @microsoft/fluentui-react-build @microsoft/teams-prg
+scripts/jest @microsoft/fluentui-react-build
+scripts/lint-staged @microsoft/fluentui-react-build
+scripts/monorepo @microsoft/fluentui-react-build
+scripts/package-manager @microsoft/fluentui-react-build
+scripts/prettier @microsoft/fluentui-react-build
+scripts/projects-test @microsoft/fluentui-react-build
+scripts/puppeteer @microsoft/fluentui-react-build
+scripts/storybook @microsoft/fluentui-react-build
+scripts/tasks @microsoft/fluentui-react-build
+scripts/triage-bot @microsoft/fluentui-react-build @microsoft/cxe-prg
+scripts/ts-node @microsoft/fluentui-react-build
+scripts/update-release-notes @microsoft/fluentui-react-build
+scripts/utils @microsoft/fluentui-react-build
+scripts/webpack @microsoft/fluentui-react-build
+
 #### Fluent UI N*
 packages/a11y-rules @microsoft/fluentui-northstar
 packages/a11y-testing @microsoft/fluentui-northstar
@@ -182,8 +208,6 @@ packages/react-components/react-tags @microsoft/cxe-coastal @TristanWatanabe
 packages/react-components/react-data-grid-react-window @microsoft/teams-prg
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
-
-
 ## Components
 packages/react @microsoft/cxe-red @microsoft/cxe-coastal
 packages/react/src/components/ActivityItem @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto

.gulp.js

@@ -1,6 +1,6 @@
 // https://github.com/gulpjs/gulp-cli#configuration
 module.exports = {
   flags: {
-    require: '@fluentui/scripts/babel/register',
+    require: '@fluentui/scripts-babel/register',
   },
 };

.storybook/main.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 const exportToCodesandboxAddon = require('storybook-addon-export-to-codesandbox');
 
-const { loadWorkspaceAddon, getCodesandboxBabelOptions } = require('@fluentui/scripts/storybook');
+const { loadWorkspaceAddon, getCodesandboxBabelOptions } = require('@fluentui/scripts-storybook');
 
 /**
  * @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig

apps/perf-test-react-components/just.config.ts

@@ -1,5 +1,5 @@
 import { getPerfRegressions } from './tasks/perf-test';
-import { preset, task, series } from '@fluentui/scripts/tasks';
+import { preset, task, series } from '@fluentui/scripts-tasks';
 
 preset();
 

apps/perf-test-react-components/package.json

@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "@griffel/core": "^1.9.0",

apps/perf-test-react-components/tasks/perf-test.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill';
 import { scenarioIterations } from '../src/scenarioIterations';
 import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes';
-import { argv } from '@fluentui/scripts/tasks';
+import { argv } from '@fluentui/scripts-tasks';
 
 type ScenarioSetting = Record<string, { scenarioName: string; iterations: number; renderType: string }>;
 

apps/perf-test-react-components/webpack.config.js

@@ -1,4 +1,4 @@
-const { resources } = require('@fluentui/scripts/webpack');
+const { resources } = require('@fluentui/scripts-webpack');
 
 // The issue here is making readable Flamegraphs that don't have complicated paths like:
 //  ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render

apps/perf-test/just.config.ts

@@ -1,5 +1,5 @@
 import { getPerfRegressions } from './tasks/perf-test';
-import { preset, task, series } from '@fluentui/scripts/tasks';
+import { preset, task, series } from '@fluentui/scripts-tasks';
 
 preset();
 

apps/perf-test/package.json

@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "@fluentui/example-data": "^8.4.5",

apps/perf-test/tasks/perf-test.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill';
 import { scenarioIterations } from '../src/scenarioIterations';
 import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes';
-import { argv } from '@fluentui/scripts/tasks';
+import { argv } from '@fluentui/scripts-tasks';
 
 type ScenarioSetting = Record<string, { scenarioName: string; iterations: number; renderType: string }>;
 // TODO: consolidate with newer version of fluent perf-test

apps/perf-test/webpack.config.js

@@ -1,4 +1,4 @@
-const { resources } = require('@fluentui/scripts/webpack');
+const { resources } = require('@fluentui/scripts-webpack');
 
 // The issue here is making readable Flamegraphs that don't have complicated paths like:
 //  ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render

apps/pr-deploy-site/just.config.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import { series, task, copyInstructionsTask, copyInstructions, cleanTask } from '@fluentui/scripts/tasks';
-import { findGitRoot, getAllPackageInfo } from '@fluentui/scripts/monorepo';
+import { series, task, copyInstructionsTask, copyInstructions, cleanTask } from '@fluentui/scripts-tasks';
+import { findGitRoot, getAllPackageInfo } from '@fluentui/scripts-monorepo';
 
 task('clean', cleanTask());
 

apps/pr-deploy-site/package.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-monorepo": "*"
   }
 }

apps/public-docsite-resources/config/api-docs.js

@@ -3,7 +3,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const { findRepoDeps, findGitRoot } = require('@fluentui/scripts/monorepo');
+const { findRepoDeps, findGitRoot } = require('@fluentui/scripts-monorepo');
 
 const gitRoot = findGitRoot();
 

apps/public-docsite-resources/just.config.ts

@@ -1,4 +1,4 @@
-import { preset, task, series } from '@fluentui/scripts/tasks';
+import { preset, task, series } from '@fluentui/scripts-tasks';
 import { generatePageJsonFiles } from '@fluentui/api-docs';
 
 preset();

apps/public-docsite-resources/package.json

@@ -29,7 +29,9 @@
   "devDependencies": {
     "@fluentui/api-docs": "^8.2.5",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-monorepo": "*",
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "@fluentui/react": "^8.104.4",

apps/public-docsite-resources/webpack.serve.config.js

@@ -1,6 +1,6 @@
 // @ts-check
 const path = require('path');
-const { resources, getResolveAlias } = require('@fluentui/scripts/webpack');
+const { resources, getResolveAlias } = require('@fluentui/scripts-webpack');
 const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig');
 
 const BUNDLE_NAME = 'demo-app';

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

@@ -1,5 +1,5 @@
 const rootMain = require('../../../.storybook/main');
-const { getPackageStoriesGlob } = require('@fluentui/scripts/storybook');
+const { getPackageStoriesGlob } = require('@fluentui/scripts-storybook');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,

apps/public-docsite-v9/just.config.ts

@@ -1,4 +1,4 @@
-import { preset, task } from '@fluentui/scripts/tasks';
+import { preset, task } from '@fluentui/scripts-tasks';
 
 preset();
 

apps/public-docsite-v9/package.json

@@ -18,7 +18,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-storybook": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@fluentui/react": "^8.104.4",

apps/public-docsite/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();

apps/public-docsite/package.json

@@ -26,8 +26,9 @@
     "@fluentui/common-styles": "^1.2.15",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-monaco-editor": "^1.7.42",
-    "@fluentui/scripts": "*",
-    "write-file-webpack-plugin": "^4.1.0"
+    "write-file-webpack-plugin": "^4.1.0",
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "@fluentui/font-icons-mdl2": "^8.5.6",

apps/public-docsite/webpack.config.js

@@ -2,8 +2,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { resources } = require('@fluentui/scripts/webpack');
-const { getResolveAlias } = require('@fluentui/scripts/webpack');
+const { resources } = require('@fluentui/scripts-webpack');
+const { getResolveAlias } = require('@fluentui/scripts-webpack');
 const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig');
 const { getLoadSiteConfig } = require('@fluentui/public-docsite-setup/scripts/getLoadSiteConfig');
 

apps/public-docsite/webpack.serve.config.js

@@ -4,7 +4,7 @@ const path = require('path');
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpack-plugin');
-const { getResolveAlias, resources } = require('@fluentui/scripts/webpack');
+const { getResolveAlias, resources } = require('@fluentui/scripts-webpack');
 const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig');
 const { getLoadSiteConfig } = require('@fluentui/public-docsite-setup/scripts/getLoadSiteConfig');
 

apps/react-18-tests-v8/cypress.config.ts

@@ -1,3 +1,3 @@
-import { baseConfig } from '@fluentui/scripts/cypress';
+import { baseConfig } from '@fluentui/scripts-cypress';
 
 export default baseConfig;

apps/react-18-tests-v8/jest.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { createV8Config: createConfig } = require('@fluentui/scripts/jest');
+const { createV8Config: createConfig } = require('@fluentui/scripts-jest');
 
 /**
  * @type {import('@jest/types').Config.InitialOptions}

apps/react-18-tests-v8/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();

apps/react-18-tests-v8/package.json

@@ -15,7 +15,10 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-cypress": "*",
+    "@fluentui/scripts-jest": "*",
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "@fluentui/react": "^8.104.4",

apps/react-18-tests-v8/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-const { getResolveAlias } = require('@fluentui/scripts/webpack');
+const { getResolveAlias } = require('@fluentui/scripts-webpack');
 
 module.exports = () => {
   return {

apps/react-18-tests-v9/cypress.config.ts

@@ -1,3 +1,3 @@
-import { baseConfig } from '@fluentui/scripts/cypress';
+import { baseConfig } from '@fluentui/scripts-cypress';
 
 export default baseConfig;

apps/react-18-tests-v9/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();

apps/react-18-tests-v9/package.json

@@ -15,7 +15,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-cypress": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@fluentui/react-components": "^9.9.1",

apps/ssr-tests-v9/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();

apps/ssr-tests-v9/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-storybook": "*"
   }
 }

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

@@ -1,4 +1,4 @@
-import { getPackageStoriesGlob } from '@fluentui/scripts/storybook';
+import { getPackageStoriesGlob } from '@fluentui/scripts-storybook';
 import { isCI } from 'ci-info';
 import * as fs from 'fs';
 import * as path from 'path';

apps/ssr-tests/just.config.ts

@@ -1,4 +1,4 @@
-import { preset, task, logger, spawn } from '@fluentui/scripts/tasks';
+import { preset, task, logger, spawn } from '@fluentui/scripts-tasks';
 
 preset();
 

apps/ssr-tests/package.json

@@ -16,9 +16,10 @@
     "@fluentui/react": "^8.104.4",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "^7.0.2",
-    "@fluentui/scripts": "*",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "mocha": "^7.1.2"
+    "mocha": "^7.1.2",
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
     "tslib": "^2.1.0"

apps/ssr-tests/webpack.config.js

@@ -1,4 +1,4 @@
-const { getResolveAlias, resources } = require('@fluentui/scripts/webpack');
+const { getResolveAlias, resources } = require('@fluentui/scripts-webpack');
 
 module.exports = resources.createConfig('ssr-tests', false, {
   entry: './test/test.js',

apps/stress-test/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();

apps/stress-test/package.json

@@ -19,5 +19,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "random-seedable": "1.0.8"
+  },
+  "devDependencies": {
+    "@fluentui/scripts-tasks": "*"
   }
 }

apps/test-bundles/just.config.ts

@@ -1,4 +1,4 @@
-import { preset, task, resolveCwd } from '@fluentui/scripts/tasks';
+import { preset, task, resolveCwd } from '@fluentui/scripts-tasks';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - parallel-webpack has no types
 import { run } from 'parallel-webpack';

apps/test-bundles/package.json

@@ -12,7 +12,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "*",
-    "parallel-webpack": "^2.6.0"
+    "parallel-webpack": "^2.6.0",
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-webpack": "*"
   }
 }

apps/test-bundles/webpackUtils.js

@@ -1,7 +1,7 @@
 // @ts-check
 const path = require('path');
 const fs = require('fs-extra');
-const { resources } = require('@fluentui/scripts/webpack');
+const { resources } = require('@fluentui/scripts-webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserPlugin = require('terser-webpack-plugin');
 

apps/theming-designer/just.config.ts

@@ -1,3 +1,3 @@
-import { preset } from '@fluentui/scripts/tasks';
+import { preset } from '@fluentui/scripts-tasks';
 
 preset();