[Inbound Calling] Add Stateful Client Calling sample App (#4840)

* Add new component

* Add icons and Locale

* add CC to notification

* add storybook page

* lint

* Change files

* Add style API

* add customization updates and snippet

* fix lint

* Change files

* app initial commit

* it lives

* update to support multiple call notifications

* update API

* create login component

* update stable lock

* simplify to 1 array

* fix cte

* add incoming Call Manager component

* fix lint

* add cc

* fix lock

Author: dmceachernmsft

common/config/rush/pnpm-lock.yaml

@@ -191,6 +191,7 @@ const incomingCallToastStyle = (theme: Theme): IStackStyles => {
     root: {
       minWidth: '20rem',
       maxWidth: '40rem',
+      background: theme.palette.white,
       opacity: 0.95,
       borderRadius: '0.5rem',
       boxShadow: theme.effects.elevation8,

common/config/rush/variants/stable/pnpm-lock.yaml

@@ -80,6 +80,11 @@
       "projectFolder": "samples/CallWithChat",
       "reviewCategory": "sample"
     },
+    {
+      "packageName": "@internal/callingstateful",
+      "projectFolder": "samples/CallingStateful",
+      "reviewCategory": "sample"
+    },
     {
       "packageName": "@internal/component-examples",
       "projectFolder": "samples/ComponentExamples",

packages/react-components/src/components/IncomingCallNotification.tsx

@@ -0,0 +1,15 @@
+const commonConfig = require('../../common/config/babel/.babelrc.js');
+
+module.exports = {
+  ...commonConfig,
+  /**
+   * retainLines is needed to maintain the lines of the comments in the output to preprocess. This will cause in the output
+   * the comments assigned to their original position in the file so any linter options will be maintained on their respective node.
+   *
+   * this is caused by the comments being both trailing and leading to the nodes either above or below it, regardless
+   * of which node it is touching on the next line.
+   *
+   * link to babel docs on this: https://babeljs.io/docs/en/options#retainlines
+   */
+  retainLines: true
+};

rush.json

@@ -0,0 +1,5 @@
+docs/
+public/
+dist/
+node_modules/
+preprocessed/

samples/CallingStateful/.babelrc.js

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'header'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': [
+      'warn',
+      {
+        allowExpressions: true,
+        allowTypedFunctionExpressions: true
+      }
+    ],
+    eqeqeq: 'warn',
+    'header/header': ['error', 'line', ' Copyright (c) Microsoft Corporation.\n Licensed under the MIT License.'],
+    'react/display-name': 'off',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^_' }],
+    curly: 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['@internal/*'],
+            message: 'Use @azure/communication-react instead.'
+          }
+        ]
+      }
+    ]
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  overrides: [
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx', '**/mocks/*'],
+      env: {
+        jest: true
+      }
+    }
+  ]
+};