DO NOT MERGE - DEMO

.eslintrc.js

@@ -4,12 +4,18 @@ module.exports = {
     es6: true,
     node: true
   },
-  extends: ['@microsoft/eslint-config-msgraph', 'plugin:storybook/recommended'],
+  extends: [
+    '@microsoft/eslint-config-msgraph',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended'
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: [
       'packages/mgt/tsconfig.json',
       'packages/mgt-element/tsconfig.json',
+      'packages/mgt-chat/tsconfig.json',
       'packages/mgt-components/tsconfig.json',
       'packages/mgt-react/tsconfig.json',
       'packages/mgt-spfx-utils/tsconfig.json',
@@ -23,12 +29,29 @@ module.exports = {
     ],
     sourceType: 'module'
   },
-  plugins: ['eslint-plugin-jsdoc', 'eslint-plugin-prefer-arrow', 'eslint-plugin-react', '@typescript-eslint'],
+  plugins: [
+    'eslint-plugin-jsdoc',
+    'eslint-plugin-prefer-arrow',
+    'eslint-plugin-react',
+    '@typescript-eslint',
+    'jsx-a11y',
+    'react-hooks'
+  ],
   root: true,
   ignorePatterns: ['**/**-css.ts', '.eslintrc.js', '*.cjs', 'rollup.config.mjs'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'warn',
     // prefer-nullish-coalescing requires strictNullChecking to be turned on
-    '@typescript-eslint/prefer-nullish-coalescing': 'off'
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    'react/jsx-curly-spacing': 'off',
+    'react/jsx-equals-spacing': 'off',
+    'react/jsx-tag-spacing': [
+      'off',
+      {
+        afterOpening: 'allow',
+        closingSlash: 'allow'
+      }
+    ],
+    'react/jsx-wrap-multilines': 'off'
   }
 };

.github/workflows/pr-chat.yml

@@ -0,0 +1,53 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Deploy mgt-chat sample app
+
+on:
+  push:
+    branches: [next/mgt-chat]
+
+jobs:
+  react-contoso:
+    runs-on: ubuntu-latest
+    # increase node heap size to ensure that the build can succeed
+    env:
+      NODE_OPTIONS: '--max_old_space_size=9182'
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install deps 🛠
+        run: |
+          echo "installing yarn"
+          npm install -g yarn
+          echo "installing deps for packages"
+          yarn
+
+      - name: Setup env file
+        shell: bash
+        run: |
+          cp samples/react-contoso/.env.sample samples/react-contoso/.env
+          sed -i 's|REACT_APP_CLIENT_ID="ed072e38-e76e-45ae-ab76-073cb95495bb"|REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"|g' samples/react-contoso/.env
+          sed -i 's|REACT_APP_BASE_DIR="/"|REACT_APP_BASE_DIR="/next/mgt-chat"|g' samples/react-contoso/.env
+
+      - name: Build 🛠
+        run: |
+          yarn build
+          yarn build:react-contoso
+
+      - name: Deploy mgt.dev/next/mgt-chat 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          branch: gh-pages
+          folder: samples/react-contoso/build
+          target-folder: next/mgt-chat

.github/workflows/pr-test-app.yml

@@ -16,6 +16,9 @@ jobs:
   react-contoso:
     if: "contains(github.event.pull_request.labels.*.name, 'Build: React Contoso')"
     runs-on: ubuntu-latest
+    # increase node heap size to ensure that the build can succeed
+    env:
+      NODE_OPTIONS: '--max_old_space_size=9182'
 
     strategy:
       matrix:

.github/workflows/push-preview-release.yml

@@ -1,3 +1,6 @@
+# Copyright (c) Microsoft Corporation.
+# Licensed under the MIT License.
+
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -6,6 +6,7 @@ import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from '../../env';
 import { beautifyContent } from '../../utils/beautifyContent';
 
 const mgtScriptName = './mgt.storybook.js';
+const mgtPreviewScriptName = './mgt.preview.storybook.js';
 
 // function is used for dragging and moving
 const setupEditorResize = (first, separator, last, dragComplete) => {
@@ -193,21 +194,27 @@ export const withCodeEditor = makeDecorator({
       </header>
 `;
 
+    const resolveScript = () => {
+      const usingPreview =
+        editor.files.js.indexOf(`import '@microsoft/mgt-components/dist/es6/components/preview'`) > -1;
+      return usingPreview ? mgtPreviewScriptName : mgtScriptName;
+    };
+
     let providerInitCode = `
-      import {Providers, MockProvider} from "${mgtScriptName}";
+      import {Providers, MockProvider} from "${resolveScript()}";
       Providers.globalProvider = new MockProvider(true);
     `;
 
     const channel = addons.getChannel();
     channel.on(SETPROVIDER_EVENT, params => {
       if (params.state === ProviderState.SignedIn && params.name === 'MgtMockProvider') {
         providerInitCode = `
-          import { Providers, MockProvider } from "${mgtScriptName}";
+          import { Providers, MockProvider } from "${resolveScript()}";
           Providers.globalProvider = new MockProvider(true);
         `;
       } else if (params.state === ProviderState.SignedIn && params.name === 'MgtMsal2Provider') {
         providerInitCode = `
-          import { Providers, Msal2Provider, LoginType } from "${mgtScriptName}";
+          import { Providers, Msal2Provider, LoginType } from "${resolveScript()}";
           Providers.globalProvider = new Msal2Provider({
             clientId: "${CLIENTID}",
             loginType: LoginType.Popup,
@@ -230,6 +237,8 @@ export const withCodeEditor = makeDecorator({
           let doc = storyElement.contentDocument;
 
           let { html, css, js } = editor.files;
+          // strip the preview import, we include it in the resolved script
+          js = js.replace(/import '@microsoft\/mgt-components\/dist\/es6\/components\/preview'/gm, ``);
           js = js.replace(
             /import \{([^\}]+)\}\s+from\s+['"]@microsoft\/mgt\x2d.*['"];/gm,
             `import {$1} from '${mgtScriptName}';`

.vscode/settings.json

@@ -11,15 +11,15 @@
   "less.validate": false,
   "scss.validate": false,
   "[scss]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
   },
   "[css]": {
     "editor.defaultFormatter": "stylelint.vscode-stylelint"
   },
   "stylelint.packageManager": "yarn",
   "stylelint.snippet": ["css", "less", "postcss", "scss"],
   "stylelint.validate": ["css", "less", "postcss", "scss"],
-  "cSpell.words": ["mailenabledsecurity"],
+  "cSpell.words": ["odata", "mailenabledsecurity"],
   "liveServer.settings.root": "storybook-static",
   "liveServer.settings.port": 6006
 }