add upgrade-examples app with v8 and v9 working together (#22226)

* add upgrade-examples app with v8 and v9 working together

* fix version

* remove changelog files

apps/ts-minbar-test-react-components/package.json

@@ -5,7 +5,7 @@
   "description": "Testing Fluent UI React Components compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-components": "^9.0.0-rc.2"
+    "@fluentui/react-components": "^9.0.0-rc.6"
   },
   "scripts": {
     "build": "just-scripts build",

apps/upgrade-examples-v8-v9/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
+  "root": true,
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/jsx-no-bind": "off",
+    "deprecation/deprecation": "off",
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+  }
+}

apps/upgrade-examples-v8-v9/.storybook/main.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const custom = require('@fluentui/scripts/storybook/webpack.config');
+
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  core: {
+    builder: 'webpack5',
+  },
+  babel: {},
+  typescript: {
+    // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+    reactDocgen: false,
+  },
+  webpackFinal: config => {
+    return custom(config);
+  },
+  addons: ['@storybook/addon-actions'],
+};

apps/upgrade-examples-v8-v9/just.config.ts

@@ -0,0 +1,5 @@
+import { preset, task } from '@fluentui/scripts';
+
+preset();
+
+task('build', 'build:node-lib').cached();

apps/upgrade-examples-v8-v9/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@fluentui/upgrade-examples-v8-v9",
+  "version": "1.0.0",
+  "private": true,
+  "description": "A collection of examples demonstrating how to upgrade from v8 to v9",
+  "scripts": {
+    "build": "just-scripts build",
+    "build-storybook": "build-storybook -s ./public -o ./dist/storybook --docs",
+    "chromatic": "npx [email protected] --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name build-storybook",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "start": "just-scripts dev:storybook"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*"
+  },
+  "dependencies": {
+    "@fluentui/react": "^8.62.4",
+    "@fluentui/scripts": "^1.0.0",
+    "@fluentui/storybook": "^1.0.0",
+    "@fluentui/react-components": "^9.0.0-rc.6",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "tslib": "^2.1.0"
+  }
+}

apps/upgrade-examples-v8-v9/src/stories/Button.stories.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DefaultButton } from '@fluentui/react/lib/Button';
+import { Button, webLightTheme, FluentProvider } from '@fluentui/react-components';
+
+export default {
+  title: 'Button',
+  component: DefaultButton,
+};
+
+export const v8 = () => <DefaultButton>Click me</DefaultButton>;
+export const v9 = () => (
+  <FluentProvider theme={webLightTheme}>
+    <Button>No Click Me</Button>
+  </FluentProvider>
+);
+export const Both = () => (
+  <FluentProvider theme={webLightTheme}>
+    <DefaultButton>Click me</DefaultButton> <Button>No Click Me</Button>
+  </FluentProvider>
+);

apps/upgrade-examples-v8-v9/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "lib",
+    "module": "commonjs",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "forceConsistentCasingInFileNames": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "preserveConstEnums": true,
+    "skipLibCheck": true,
+    "types": ["webpack-env", "@storybook/react", "screener-storybook"]
+  },
+  "include": ["src"]
+}

workspace.json

@@ -731,6 +731,11 @@
       "projectType": "library",
       "implicitDependencies": []
     },
+    "@fluentui/upgrade-examples-v8-v9": {
+      "root": "apps/upgrade-examples-v8-v9",
+      "projectType": "application",
+      "implicitDependencies": []
+    },
     "@fluentui/vr-tests": {
       "root": "apps/vr-tests",
       "projectType": "application",