Add sort imports linting rule to Storybook code (#222)

change/@azure-acs-calling-declarative-581edcd4-fdf3-408b-b51b-22e590fc8992.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "@azure/acs-calling-declarative",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

change/@azure-acs-calling-selector-bd6b839f-e70e-4a50-bbc2-5864d162f743.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "@azure/acs-calling-selector",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

change/@azure-acs-chat-declarative-d0544052-642c-4c81-a219-8f4f789e909e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "@azure/acs-chat-declarative",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

change/@azure-acs-chat-selector-d86e1dbe-5ee8-4f21-87fe-ff5b9776d021.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "@azure/acs-chat-selector",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

change/react-components-5cc63f13-d333-4c7b-908e-7045f5342155.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "react-components",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

change/react-composites-bcaead91-62d7-4e26-9065-b9f2c06237ec.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "ensure consistent eslint-plugin-import version across packages",
+  "packageName": "react-composites",
+  "email": "mail@jamesburnside.com",
+  "dependentChangeType": "none"
+}

packages/acs-calling-declarative/package.json

@@ -46,7 +46,7 @@
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint": "^7.7.0",
     "jest": "26.6.0",

packages/acs-calling-selector/package.json

@@ -49,7 +49,7 @@
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "jest": "26.6.0",
     "rollup": "~2.42.4",
     "typescript": "4.1.5",

packages/acs-chat-declarative/package.json

@@ -48,7 +48,7 @@
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint": "^7.7.0",
     "jest": "26.6.0",

packages/acs-chat-selector/package.json

@@ -47,7 +47,7 @@
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "rollup": "~2.42.4",
     "typescript": "4.1.5",
     "jest": "26.6.0",

packages/check-treeshaking/package.json

@@ -26,6 +26,6 @@
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1"
+    "eslint-plugin-import": "~2.22.1"
   }
 }

packages/communication-react/package.json

@@ -70,7 +70,7 @@
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react-hooks": "^4.1.2",

packages/react-components/package.json

@@ -66,7 +66,7 @@
     "core-js": "^3.8.3",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react-hooks": "^4.1.2",

packages/react-composites/package.json

@@ -80,7 +80,7 @@
     "core-js": "^3.8.3",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react-hooks": "^4.1.2",

packages/storybook/.eslintrc.js

@@ -8,6 +8,8 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
     'plugin:prettier/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended'
@@ -32,8 +34,21 @@ module.exports = {
     ],
     '@typescript-eslint/no-explicit-any': 'off',
     eqeqeq: 'warn',
-    'react/display-name': 'off',
-    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^_' }]
+    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^_' }],
+    'import/named': 'off', // very time consuming
+    'import/namespace': 'off', // very time consuming
+    'import/no-unresolved': 'off', // handled by tsc
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        }
+      }
+    ],
+    'react/display-name': 'off'
   },
   root: true,
   settings: {

packages/storybook/package.json

@@ -86,7 +86,7 @@
     "core-js": "^3.8.3",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react-hooks": "^4.1.2",

packages/storybook/stories/CompositeStringUtils.tsx

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
 import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const COMPOSITE_STRING_CONNECTIONSTRING = 'Connection String';
 export const COMPOSITE_STRING_REQUIREDCONNECTIONSTRING = 'Connection String is required to run the {0} widget.';

packages/storybook/stories/ControlBar/Buttons/Camera/Camera.stories.tsx

@@ -1,19 +1,19 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { CameraButton } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { CameraButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 import { CustomCameraButtonExample } from './snippets/Custom.snippet';
 import { CameraButtonExample } from './snippets/Default.snippet';
 import { CameraButtonWithLabelExample } from './snippets/WithLabel.snippet';
 
-const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
 const CustomButtonExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
 const DefaultButtonExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
+const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
 
 const importStatement = `
 import { CameraButton } from '@azure/communication-ui';

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Custom.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
 import { CameraButton } from '@azure/communication-react';
+import { IButtonProps, Icon, Label, Stack } from '@fluentui/react';
+import React from 'react';
 
 export const CustomCameraButtonExample: () => JSX.Element = () => {
   const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Default.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { CameraButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const CameraButtonExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/WithLabel.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { CameraButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const CameraButtonWithLabelExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/EndCall/EndCall.stories.tsx

@@ -1,19 +1,19 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { EndCallButton } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { EndCallButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+import { EndCallButtonCustomExample } from './snippets/Custom.snippet';
 import { EndCallButtonDefaultExample } from './snippets/Default.snippet';
 import { EndCallButtonWithLabelExample } from './snippets/WithLabel.snippet';
-import { EndCallButtonCustomExample } from './snippets/Custom.snippet';
 
+const EndCallButtonCustomExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
 const EndCallButtonDefaultExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
 const EndCallButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
-const EndCallButtonCustomExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
 
 const importStatement = `
 import { EndCallButton, FluentThemeProvider } from '@azure/communication-react';

packages/storybook/stories/ControlBar/Buttons/EndCall/snippets/Custom.snippet.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { IButtonProps, Icon, Label, Stack } from '@fluentui/react';
 import { EndCallButton } from '@azure/communication-react';
+import { Icon, Label, Stack } from '@fluentui/react';
+import React from 'react';
 
 export const EndCallButtonCustomExample: () => JSX.Element = () => {
   const customOnRenderIcon = (): JSX.Element => {
     return <Icon key={'endCallCustomIconKey'} iconName={'DeclineCall'} style={{ color: 'black', fontSize: '25px' }} />;
   };
 
-  const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+  const customOnRenderText = (/*props?: IButtonProps*/): JSX.Element => {
     return (
       <Label key={'endCallCustomLabelKey'} style={{ color: 'blue', fontStyle: 'italic' }}>
         end call

packages/storybook/stories/ControlBar/Buttons/EndCall/snippets/Default.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { EndCallButton, FluentThemeProvider } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const EndCallButtonDefaultExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/EndCall/snippets/WithLabel.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { EndCallButton, FluentThemeProvider } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const EndCallButtonWithLabelExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/Microphone/Microphone.stories.tsx

@@ -1,20 +1,20 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { MicrophoneButton } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { MicrophoneButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+import { CustomMicrophoneButtonExample } from './snippets/CustomMicrophoneButton.snippet';
 import { MicrophoneButtonExample } from './snippets/MicrophoneButton.snippet';
 import { MicrophoneButtonWithLabelExample } from './snippets/MicrophoneButtonWithLabel.snippet';
-import { CustomMicrophoneButtonExample } from './snippets/CustomMicrophoneButton.snippet';
 
+const CustomMicrophoneButtonExampleText = require('!!raw-loader!./snippets/CustomMicrophoneButton.snippet.tsx').default;
 const MicrophoneButtonExampleText = require('!!raw-loader!./snippets/MicrophoneButton.snippet.tsx').default;
 const MicrophoneButtonWithLabelExampleText = require('!!raw-loader!./snippets/MicrophoneButtonWithLabel.snippet.tsx')
   .default;
-const CustomMicrophoneButtonExampleText = require('!!raw-loader!./snippets/CustomMicrophoneButton.snippet.tsx').default;
 
 const importStatement = `
 import { MicrophoneButton } from '@azure/communication-react';

packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/CustomMicrophoneButton.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
 import { MicrophoneButton } from '@azure/communication-react';
+import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
+import React from 'react';
 
 export const CustomMicrophoneButtonExample: () => JSX.Element = () => {
   const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {

packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButton.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { MicrophoneButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const MicrophoneButtonExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButtonWithLabel.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { MicrophoneButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const MicrophoneButtonWithLabelExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/ScreenShare/ScreenShare.stories.tsx

@@ -1,19 +1,19 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { ScreenShareButton } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { ScreenShareButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 import { CustomScreenShareButtonExample } from './snippets/Custom.snippet';
 import { ScreenShareButtonExample } from './snippets/Default.snippet';
 import { ScreenShareButtonWithLabelExample } from './snippets/WithLabel.snippet';
 
-const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
 const CustomButtonExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
 const DefaultButtonExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
+const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
 
 const importStatement = `
 import { ScreenShareButton } from '@azure/communication-ui';

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Custom.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
 import { ScreenShareButton } from '@azure/communication-react';
+import { IButtonProps, Icon, Label, Stack } from '@fluentui/react';
+import React from 'react';
 
 export const CustomScreenShareButtonExample: () => JSX.Element = () => {
   const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Default.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { ScreenShareButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const ScreenShareButtonExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/WithLabel.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack } from '@fluentui/react';
 import { ScreenShareButton } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const ScreenShareButtonWithLabelExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/ControlBar.stories.tsx

@@ -1,7 +1,5 @@
 // © Microsoft Corporation. All rights reserved.
 
-import { Meta } from '@storybook/react/types-6-0';
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -11,8 +9,10 @@ import {
   ScreenShareButton
 } from '@azure/communication-react';
 import { boolean, select } from '@storybook/addon-knobs';
-import { getDocs } from './ControlBarDocs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './ControlBarDocs';
 
 const CONTROL_BAR_LAYOUTS = [
   'horizontal',

packages/storybook/stories/ControlBar/ControlBarDocs.tsx

@@ -1,8 +1,8 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { ControlBar } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { ControlBar } from '@azure/communication-react';
 import { AllButtonsControlBarExample } from './snippets/AllButtonsControlBar.snippet';
 import { ControlBarLayoutExample } from './snippets/ControlBarLayout.snippet';
 import { CustomButtonsExample } from './snippets/CustomButtons.snippet';

packages/storybook/stories/ControlBar/snippets/AllButtonsControlBar.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -11,6 +10,7 @@ import {
   recordButtonProps
 } from '@azure/communication-react';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
+import React from 'react';
 
 export const AllButtonsControlBarExample: () => JSX.Element = () => {
   const exampleOptionsMenuProps: IContextualMenuProps = {

packages/storybook/stories/ControlBar/snippets/ControlBar.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -8,6 +7,7 @@ import {
   OptionsButton,
   ScreenShareButton
 } from '@azure/communication-react';
+import React from 'react';
 
 export const ControlBarExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/snippets/ControlBarLayout.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -9,6 +8,7 @@ import {
   ScreenShareButton
 } from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
+import React from 'react';
 
 export const ControlBarLayoutExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/ControlBar/snippets/CustomButtons.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -7,6 +6,7 @@ import {
   MicrophoneButton
 } from '@azure/communication-react';
 import { CallEndIcon } from '@fluentui/react-northstar';
+import React from 'react';
 
 export const CustomButtonsExample: () => JSX.Element = () => {
   const CustomEndCallButton: () => JSX.Element = () => {

packages/storybook/stories/ControlBar/snippets/CustomControlBarStyles.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -6,6 +5,7 @@ import {
   FluentThemeProvider,
   MicrophoneButton
 } from '@azure/communication-react';
+import React from 'react';
 
 export const CustomControlBarStylesExample: () => JSX.Element = () => {
   const customStyles = {

packages/storybook/stories/ControlBar/snippets/OptionsButton.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { CameraButton, ControlBar, FluentThemeProvider, OptionsButton } from '@azure/communication-react';
 import { IContextualMenuProps } from '@fluentui/react';
+import React from 'react';
 
 export const OptionsButtonExample: () => JSX.Element = () => {
   const exampleOptionsMenuProps: IContextualMenuProps = {

packages/storybook/stories/ErrorBar/ErrorBar.stories.tsx

@@ -1,11 +1,11 @@
 // © Microsoft Corporation. All rights reserved.
 
-import { Meta } from '@storybook/react/types-6-0';
-import React, { useState } from 'react';
 import { CommunicationUiErrorSeverity, ErrorBar as ErrorBarComponent } from '@azure/communication-react';
 import { text, select } from '@storybook/addon-knobs';
-import { getDocs } from './ErrorBarDocs';
+import { Meta } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './ErrorBarDocs';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.
 // This ensures that storybook hoists the story instead of creating a folder with a single entry.

packages/storybook/stories/ErrorBar/ErrorBarDocs.tsx

@@ -1,8 +1,8 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
 import { ErrorBar } from '@azure/communication-react';
+import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { ErrorBarExample } from './snippets/ErrorBar.snippet';
 import { OtherSeverityErrorBarExample } from './snippets/OtherSeverityErrorBar.snippet';
 

packages/storybook/stories/ErrorBar/snippets/ErrorBar.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ErrorBar } from '@azure/communication-react';
+import React from 'react';
 
 export const ErrorBarExample: () => JSX.Element = () => {
   const message = 'Something went wrong';

packages/storybook/stories/ErrorBar/snippets/OtherSeverityErrorBar.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ErrorBar, CommunicationUiErrorSeverity } from '@azure/communication-react';
+import React from 'react';
 
 export const OtherSeverityErrorBarExample: () => JSX.Element = () => {
   return (

packages/storybook/stories/Examples/IncomingCallAlerts/IncomingCallModal.stories.tsx

@@ -1,12 +1,12 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import { IncomingCallModal } from 'react-composites';
 import { text, files, boolean } from '@storybook/addon-knobs';
-import { getDocs } from './IncomingCallAlertsDocs';
-import { renderVideoStream } from '../../utils';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { IncomingCallModal } from 'react-composites';
 import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
+import { renderVideoStream } from '../../utils';
+import { getDocs } from './IncomingCallAlertsDocs';
 
 export const IncomingCallModalComponent: () => JSX.Element = () => {
   const alertText = text('Alert Text', 'Incoming Video Call');

packages/storybook/stories/Examples/IncomingCallAlerts/IncomingCallToast.stories.tsx

@@ -1,12 +1,12 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import { IncomingCallToast } from 'react-composites';
-import { text, files } from '@storybook/addon-knobs';
-import { getDocs } from './IncomingCallAlertsDocs';
-import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
 import { Stack } from '@fluentui/react';
+import { text, files } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { IncomingCallToast } from 'react-composites';
+import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
+import { getDocs } from './IncomingCallAlertsDocs';
 
 export const IncomingCallToastComponent: () => JSX.Element = () => {
   const callerName = text('Caller Name', 'John Doe');

packages/storybook/stories/Examples/Layouts/LayoutsDocs.tsx

@@ -2,11 +2,11 @@
 
 import { Canvas, Description, Heading, Source, Title, SourceState } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { ScreenShareLayoutExample } from './snippets/ScreenShareLayout.snippet';
 import { OneToOneCallLayoutExample } from './snippets/OneToOneCallLayout.snippet';
+import { ScreenShareLayoutExample } from './snippets/ScreenShareLayout.snippet';
 
-const ScreenShareLayoutExampleText = require('!!raw-loader!./snippets/ScreenShareLayout.snippet.tsx').default;
 const OneToOneCallLayoutExampleText = require('!!raw-loader!./snippets/OneToOneCallLayout.snippet.tsx').default;
+const ScreenShareLayoutExampleText = require('!!raw-loader!./snippets/ScreenShareLayout.snippet.tsx').default;
 
 export const getDocs: () => JSX.Element = () => {
   return (

packages/storybook/stories/Examples/Layouts/OneToOneCallLayout.stories.tsx

@@ -1,9 +1,11 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { GridLayout, VideoTile } from '@azure/communication-react';
+import { Stack, mergeStyles, PersonaSize, Persona } from '@fluentui/react';
+import { number } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { number } from '@storybook/addon-knobs';
 import {
   mediaGalleryWidthDefault,
   mediaGalleryWidthOptions,
@@ -11,8 +13,6 @@ import {
   mediaGalleryHeightOptions,
   EXAMPLES_FOLDER_PREFIX
 } from '../../constants';
-import { GridLayout, VideoTile } from '@azure/communication-react';
-import { Stack, mergeStyles, PersonaSize, Persona } from '@fluentui/react';
 import { getDocs } from './LayoutsDocs';
 
 export const OneToOneCallLayout: () => JSX.Element = () => {

packages/storybook/stories/Examples/Layouts/ScreenShareLayout.stories.tsx

@@ -1,17 +1,17 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { GridLayout, VideoTile } from '@azure/communication-react';
+import { Stack, mergeStyles, PersonaSize, Persona, Label } from '@fluentui/react';
+import { number, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { number, select } from '@storybook/addon-knobs';
 import {
   mediaGalleryWidthOptions,
   mediaGalleryHeightDefault,
   mediaGalleryHeightOptions,
   EXAMPLES_FOLDER_PREFIX
 } from '../../constants';
-import { GridLayout, VideoTile } from '@azure/communication-react';
-import { Stack, mergeStyles, PersonaSize, Persona, Label } from '@fluentui/react';
 import { getDocs } from './LayoutsDocs';
 
 export const ScreenShareLayout: () => JSX.Element = () => {

packages/storybook/stories/Examples/Lobby/Lobby.stories.tsx

@@ -2,8 +2,8 @@ import { boolean, text } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
-import { Lobby } from './snippets/Lobby.snippet';
 import { getDocs } from './LobbyDocs';
+import { Lobby } from './snippets/Lobby.snippet';
 
 export const LobbyComponent: () => JSX.Element = () => {
   const callStateText = text('Call State Text', 'Waiting for others to join');

packages/storybook/stories/Examples/Lobby/LobbyDocs.tsx

@@ -1,7 +1,7 @@
 import { Description, Heading, Source, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
-const LobbyControlBarText = require('!!raw-loader!./snippets/LobbyControlBar.snippet.tsx').default;
 const LobbyComponentText = require('!!raw-loader!./snippets/Lobby.snippet.tsx').default;
+const LobbyControlBarText = require('!!raw-loader!./snippets/LobbyControlBar.snippet.tsx').default;
 
 export const getDocs: () => JSX.Element = () => {
   return (

packages/storybook/stories/Examples/Lobby/snippets/LobbyControlBar.snippet.tsx

@@ -1,8 +1,8 @@
 // LobbyControlBar.example.tsx
 
-import React from 'react';
 import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton } from '@azure/communication-react';
 import { useTheme } from '@fluentui/react-theme-provider';
+import React from 'react';
 
 export const LobbyCallControlBar = (): JSX.Element => {
   const theme = useTheme();

packages/storybook/stories/Examples/ParticipantList/ParticipantList.stories.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
 import { ParticipantItem } from '@azure/communication-react';
-import { boolean, text, select } from '@storybook/addon-knobs';
-import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
 import { Stack, PersonaPresence } from '@fluentui/react';
 import { MicOffIcon, CallControlPresentNewIcon } from '@fluentui/react-northstar';
+import { boolean, text, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
 import { getDocs } from './ParticipantListDocs';
 
 const onlyUnique = (value: string, index: number, self: string[]): boolean => {

packages/storybook/stories/Examples/ParticipantList/ParticipantListDocs.tsx

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
 import { Title, Heading, Description, Canvas, Source } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { BasicParticipantListExample } from './snippets/BasicParticipantList.snippet';
 import { InteractiveParticipantListExample } from './snippets/InteractiveParticipantList.snippet';
 

packages/storybook/stories/Examples/ParticipantList/snippets/BasicParticipantList.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ParticipantItem } from '@azure/communication-react';
 import { PersonaPresence, Stack } from '@fluentui/react';
+import React from 'react';
 
 export const BasicParticipantListExample: () => JSX.Element = () => {
   const participants = [

packages/storybook/stories/Examples/ParticipantList/snippets/InteractiveParticipantList.snippet.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { ParticipantItem } from '@azure/communication-react';
 import { Icon, PersonaPresence, Stack } from '@fluentui/react';
+import React, { useState } from 'react';
 
 export const InteractiveParticipantListExample: () => JSX.Element = () => {
   const [isMuted1, setIsMuted1] = useState<any>(false);

packages/storybook/stories/Examples/TeamsInterop/NoticeBanner.stories.tsx

@@ -2,8 +2,8 @@ import { button } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React, { useState } from 'react';
 import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
-import { CallComponent } from './snippets/CallComponent.snippet';
 import { getDocs } from './Docs';
+import { CallComponent } from './snippets/CallComponent.snippet';
 
 export const NoticeBanner: () => JSX.Element = () => {
   const [teamsInterop, setTeamsInterop] = useState({

packages/storybook/stories/Examples/Themes/ThemesTeams.stories.tsx

@@ -1,9 +1,5 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import { getDocs } from './ThemesDocs';
-import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
 import {
   CameraButton,
   ControlBar,
@@ -14,6 +10,10 @@ import {
   ScreenShareButton,
   VideoTile
 } from '@azure/communication-react';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { EXAMPLES_FOLDER_PREFIX } from '../../constants';
+import { getDocs } from './ThemesDocs';
 
 const TeamsTheme = {
   palette: {

packages/storybook/stories/GridLayout/GridLayout.stories.tsx

@@ -1,10 +1,10 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { GridLayout as GridLayoutComponent, VideoTile, StreamMedia } from '@azure/communication-react';
+import { number, object } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { number, object } from '@storybook/addon-knobs';
-import { getDocs } from './GridLayoutDocs';
 import {
   mediaGalleryWidthDefault,
   mediaGalleryWidthOptions,
@@ -12,8 +12,8 @@ import {
   mediaGalleryHeightOptions,
   COMPONENT_FOLDER_PREFIX
 } from '../constants';
-import { GridLayout as GridLayoutComponent, VideoTile, StreamMedia } from '@azure/communication-react';
 import { renderVideoStream } from '../utils';
+import { getDocs } from './GridLayoutDocs';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.
 // This ensures that storybook hoists the story instead of creating a folder with a single entry.

packages/storybook/stories/GridLayout/GridLayoutDocs.tsx

@@ -1,8 +1,8 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
 import { GridLayout } from '@azure/communication-react';
+import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { GridLayoutExample } from './snippets/GridLayout.snippet';
 const GridLayoutExampleText = require('!!raw-loader!./snippets/GridLayout.snippet').default;
 

packages/storybook/stories/GridLayout/snippets/GridLayout.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { GridLayout, VideoTile } from '@azure/communication-react';
+import React from 'react';
 
 export const GridLayoutExample = (): JSX.Element => {
   const videoTileStyles = { root: { padding: '10px', border: '1px solid #999' } };

packages/storybook/stories/GroupCallComposite/GroupCallComposite.stories.tsx

@@ -1,19 +1,19 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { CommunicationIdentityClient, CommunicationUserToken } from '@azure/communication-administration';
+import { text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
 import React, { useEffect, useState } from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { text } from '@storybook/addon-knobs';
-import { v1 as createGUID } from 'uuid';
-import { CommunicationIdentityClient, CommunicationUserToken } from '@azure/communication-administration';
-import { getDocs } from './GroupCallCompositeDocs';
 import { GroupCall as GroupCallComposite } from 'react-composites';
-import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
+import { v1 as createGUID } from 'uuid';
 import {
   CompositeConnectionParamsErrMessage,
   COMPOSITE_STRING_CONNECTIONSTRING,
   COMPOSITE_STRING_REQUIREDCONNECTIONSTRING
 } from '../CompositeStringUtils';
+import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './GroupCallCompositeDocs';
 
 export default {
   title: `${COMPOSITE_FOLDER_PREFIX}/Group Call`,

packages/storybook/stories/GroupCallComposite/GroupCallCompositeDocs.tsx

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
 import { Title, Description, Heading, Source, Props } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { GroupCall } from 'react-composites';
 
 const importStatement = `

packages/storybook/stories/GroupChatComposite/GroupChatComposite.stories.tsx

@@ -1,20 +1,19 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React, { useEffect } from 'react';
-import { text } from '@storybook/addon-knobs';
-import { getDocs } from './GroupChatCompositeDocs';
-import { ChatConfig, GroupChat as GroupChatComposite } from 'react-composites';
-import { AzureCommunicationUserCredential } from '@azure/communication-common';
 import { CommunicationIdentityClient } from '@azure/communication-administration';
 import { ChatClient } from '@azure/communication-chat';
-import { useState } from 'react';
-import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
+import { AzureCommunicationUserCredential } from '@azure/communication-common';
+import { text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React, { useState, useEffect } from 'react';
+import { ChatConfig, GroupChat as GroupChatComposite } from 'react-composites';
 import {
   CompositeConnectionParamsErrMessage,
   COMPOSITE_STRING_CONNECTIONSTRING,
   COMPOSITE_STRING_REQUIREDCONNECTIONSTRING
 } from '../CompositeStringUtils';
-import { Meta } from '@storybook/react/types-6-0';
+import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './GroupChatCompositeDocs';
 
 export default {
   title: `${COMPOSITE_FOLDER_PREFIX}/Group Chat`,

packages/storybook/stories/GroupChatComposite/GroupChatCompositeDocs.tsx

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 import { Title, Description, Props, Heading, Source } from '@storybook/addon-docs/blocks';
-import { GroupChat } from 'react-composites';
 import React from 'react';
+import { GroupChat } from 'react-composites';
 
 const importStatement = `import { GroupChat } from 'react-composites';`;
 const usageCode = `import { GroupChat } from 'react-composites';

packages/storybook/stories/ManageCookies.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
 import { PrimaryButton } from '@fluentui/react';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
 
 function openManageCookiesModal(): void {
   (window as any).parent.siteConsent?.manageConsent();

packages/storybook/stories/MessageThread/MessageThread.stories.tsx

@@ -1,7 +1,5 @@
 // © Microsoft Corporation. All rights reserved.
 
-import { Meta } from '@storybook/react/types-6-0';
-import React, { useState } from 'react';
 import {
   MessageProps,
   MessageThread as MessageThreadComponent,
@@ -10,9 +8,12 @@ import {
   SystemMessage,
   DefaultMessageRendererType
 } from '@azure/communication-react';
-import { boolean } from '@storybook/addon-knobs';
 import { PrimaryButton, Stack } from '@fluentui/react';
 import { Divider } from '@fluentui/react-northstar';
+import { boolean } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { COMPONENT_FOLDER_PREFIX } from '../constants';
 import { getDocs } from './MessageThreadDocs';
 import {
   GenerateMockNewChatMessage,
@@ -25,7 +26,6 @@ import {
   GenerateMockSystemMessage,
   GenerateMockCustomMessage
 } from './placeholdermessages';
-import { COMPONENT_FOLDER_PREFIX } from '../constants';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.
 // This ensures that storybook hoists the story instead of creating a folder with a single entry.

packages/storybook/stories/MessageThread/MessageThreadDocs.tsx

@@ -1,32 +1,32 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { MessageThread } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { MessageThread } from '@azure/communication-react';
-const ExampleConstantsText = require('!!raw-loader!./snippets/placeholdermessages.ts').default;
 import { DefaultMessageThreadExample } from './snippets/MessageThread.snippet';
-const DefaultMessageThreadExampleText = require('!!raw-loader!./snippets/MessageThread.snippet.tsx').default;
-import { MessageThreadWithReadReceiptExample } from './snippets/MessageThreadWithReadReceipt.snippet';
-const MessageThreadWithReadReceiptExampleText = require('!!raw-loader!./snippets/MessageThreadWithReadReceipt.snippet.tsx')
-  .default;
 import { MessageThreadWithCustomAvatarExample } from './snippets/MessageThreadWithCustomAvatar.snippet';
+import { MessageThreadWithCustomChatContainerExample } from './snippets/MessageThreadWithCustomChatContainer.snippet';
+import { MessageThreadWithCustomMessageContainerExample } from './snippets/MessageThreadWithCustomMessageContainer.snippet';
+import { MessageThreadWithCustomMessagesExample } from './snippets/MessageThreadWithCustomMessages.snippet';
+import { MessageThreadWithCustomReadReceiptExample } from './snippets/MessageThreadWithCustomReadReceipt.snippet';
+import { MessageThreadWithReadReceiptExample } from './snippets/MessageThreadWithReadReceipt.snippet';
+import { MessageThreadWithSystemMessagesExample } from './snippets/MessageThreadWithSystemMessages.snippet';
+const DefaultMessageThreadExampleText = require('!!raw-loader!./snippets/MessageThread.snippet.tsx').default;
 const MessageThreadWithCustomAvatarExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomAvatar.snippet.tsx')
   .default;
-import { MessageThreadWithSystemMessagesExample } from './snippets/MessageThreadWithSystemMessages.snippet';
-const MessageThreadWithSystemMessagesExampleText = require('!!raw-loader!./snippets/MessageThreadWithSystemMessages.snippet.tsx')
-  .default;
-import { MessageThreadWithCustomMessagesExample } from './snippets/MessageThreadWithCustomMessages.snippet';
-const MessageThreadWithCustomMessagesExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomMessages.snippet.tsx')
-  .default;
-import { MessageThreadWithCustomChatContainerExample } from './snippets/MessageThreadWithCustomChatContainer.snippet';
 const MessageThreadWithCustomChatContainerExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomChatContainer.snippet.tsx')
   .default;
-import { MessageThreadWithCustomMessageContainerExample } from './snippets/MessageThreadWithCustomMessageContainer.snippet';
 const MessageThreadWithCustomMessageContainerExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomMessageContainer.snippet.tsx')
   .default;
-import { MessageThreadWithCustomReadReceiptExample } from './snippets/MessageThreadWithCustomReadReceipt.snippet';
+const MessageThreadWithCustomMessagesExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomMessages.snippet.tsx')
+  .default;
 const MessageThreadWithCustomReadReceiptExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomReadReceipt.snippet.tsx')
   .default;
+const MessageThreadWithReadReceiptExampleText = require('!!raw-loader!./snippets/MessageThreadWithReadReceipt.snippet.tsx')
+  .default;
+const MessageThreadWithSystemMessagesExampleText = require('!!raw-loader!./snippets/MessageThreadWithSystemMessages.snippet.tsx')
+  .default;
+const ExampleConstantsText = require('!!raw-loader!./snippets/placeholdermessages.ts').default;
 
 const importStatement = `
 import { FluentThemeProvider, MessageThread } from '@azure/communication-react';

packages/storybook/stories/MessageThread/snippets/MessageThreadWithCustomReadReceipt.snippet.tsx

@@ -1,5 +1,5 @@
 import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
-import { Text } from '@fluentui/react/lib/Text';
+import { Text } from '@fluentui/react';
 import React from 'react';
 import { GetHistoryChatMessages } from './placeholdermessages';
 

packages/storybook/stories/OneToOneCallComposite/OneToOneCallComposite.stories.tsx

@@ -1,18 +1,18 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React, { useEffect, useState } from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { text } from '@storybook/addon-knobs';
 import { CommunicationIdentityClient, CommunicationUserToken } from '@azure/communication-administration';
-import { getDocs } from './OneToOneCallCompositeDocs';
+import { text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React, { useEffect, useState } from 'react';
 import { OneToOneCall as OneToOneCallComposite } from 'react-composites';
-import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
 import {
   CompositeConnectionParamsErrMessage,
   COMPOSITE_STRING_CONNECTIONSTRING,
   COMPOSITE_STRING_REQUIREDCONNECTIONSTRING
 } from '../CompositeStringUtils';
+import { COMPOSITE_EXPERIENCE_CONTAINER_STYLE, COMPOSITE_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './OneToOneCallCompositeDocs';
 
 export default {
   title: `${COMPOSITE_FOLDER_PREFIX}/One To One Call`,

packages/storybook/stories/ParticipantItem/ParticipantItem.stories.tsx

@@ -1,14 +1,14 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Meta } from '@storybook/react/types-6-0';
-import { boolean, text } from '@storybook/addon-knobs';
 import { ParticipantItem as ParticipantItemComponent } from '@azure/communication-react';
-import { getDocs } from './ParticipantItemDocs';
 import { Stack } from '@fluentui/react';
 import { MicOffIcon, CallControlPresentNewIcon } from '@fluentui/react-northstar';
+import { boolean, text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './ParticipantItemDocs';
 
 const onlyUnique = (value: string, index: number, self: string[]): boolean => {
   return self.indexOf(value) === index;

packages/storybook/stories/ParticipantItem/ParticipantItemDocs.tsx

@@ -1,15 +1,15 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
 import { ParticipantItem } from '@azure/communication-react';
-import { ParticipantItemExample } from './snippets/ParticipantItem.snippet';
+import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { CustomAvatarExample } from './snippets/CustomAvatar.snippet';
 import { CustomIconExample } from './snippets/CustomIcon.snippet';
+import { ParticipantItemExample } from './snippets/ParticipantItem.snippet';
 
-const ParticipantItemExampleText = require('!!raw-loader!./snippets/ParticipantItem.snippet.tsx').default;
 const CustomAvatarExampleText = require('!!raw-loader!./snippets/CustomAvatar.snippet.tsx').default;
 const CustomIconExampleText = require('!!raw-loader!./snippets/CustomIcon.snippet.tsx').default;
+const ParticipantItemExampleText = require('!!raw-loader!./snippets/ParticipantItem.snippet.tsx').default;
 
 const importStatement = `
 import { ParticipantItem, ParticipantItemProps } from '@azure/communication-react';

packages/storybook/stories/ParticipantItem/snippets/CustomAvatar.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ParticipantItem } from '@azure/communication-react';
 import { PersonaPresence } from '@fluentui/react';
+import React from 'react';
 
 export const CustomAvatarExample: () => JSX.Element = () => {
   const avatarStyle = {

packages/storybook/stories/ParticipantItem/snippets/CustomIcon.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ParticipantItem, ParticipantItemProps } from '@azure/communication-react';
 import { PersonaPresence, Icon } from '@fluentui/react';
+import React from 'react';
 
 export const CustomIconExample: () => JSX.Element = () => {
   const onRenderIcon = (props?: ParticipantItemProps): JSX.Element | null => {

packages/storybook/stories/ParticipantItem/snippets/ParticipantItem.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ParticipantItem } from '@azure/communication-react';
 import { IContextualMenuItem, PersonaPresence } from '@fluentui/react';
+import React from 'react';
 
 export const ParticipantItemExample: () => JSX.Element = () => {
   const menuItems: IContextualMenuItem[] = [

packages/storybook/stories/QuickStarts/snippets/App.snippet.tsx

@@ -1,7 +1,7 @@
 import { FluentThemeProvider } from '@azure/communication-react';
 import React from 'react';
 
-function App() {
+function App(): JSX.Element {
   return <FluentThemeProvider>{/*Add Components!*/}</FluentThemeProvider>;
 }
 

packages/storybook/stories/QuickStarts/snippets/CallingComponents.snippet.tsx

@@ -10,8 +10,7 @@ import {
 } from '@azure/communication-react';
 
 import { Stack, IContextualMenuProps } from '@fluentui/react';
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export const CallingComponents = (): JSX.Element => {
   const exampleOptionsMenuProps: IContextualMenuProps = {

packages/storybook/stories/QuickStarts/snippets/QuickstartComposite.snippet.tsx

@@ -1,5 +1,5 @@
-import { GroupCall, GroupChat } from 'react-composites';
 import React from 'react';
+import { GroupCall, GroupChat } from 'react-composites';
 
 function App(): JSX.Element {
   return (

packages/storybook/stories/ReadReceipt/ReadReceipt.stories.tsx

@@ -1,11 +1,11 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
 import { MessageStatus, ReadReceipt as ReadRecieptComponent } from '@azure/communication-react';
 import { select, text } from '@storybook/addon-knobs';
-import { getDocs } from './ReadReceiptDocs';
-import { COMPONENT_FOLDER_PREFIX } from '../constants';
 import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './ReadReceiptDocs';
 
 export default {
   title: `${COMPONENT_FOLDER_PREFIX}/Read Receipt`,

packages/storybook/stories/ReadReceipt/ReadReceiptDocs.tsx

@@ -1,8 +1,8 @@
 // © Microsoft Corporation. All rights reserved.
-import React from 'react';
-import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
 import { ReadReceipt } from '@azure/communication-react';
 import { Provider, teamsTheme } from '@fluentui/react-northstar';
+import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
+import React from 'react';
 
 const importStatement = `import { ReadReceipt, MessageStatus } from '@azure/communication-react';`;
 const usageCode = `<ReadReceipt messageStatus={MessageStatus.DELIVERED} />

packages/storybook/stories/SendBox/SendBox.stories.tsx

@@ -1,11 +1,11 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { boolean, text } from '@storybook/addon-knobs';
-import { getDocs } from './SendBoxDocs';
 import { SendBox as SendBoxComponent } from '@azure/communication-react';
-import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { boolean, text } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './SendBoxDocs';
 
 export default {
   title: `${COMPONENT_FOLDER_PREFIX}/Send Box`,

packages/storybook/stories/SendBox/SendBoxDocs.tsx

@@ -1,18 +1,18 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
 import { SendBox } from '@azure/communication-react';
-import { SendBoxExample } from './snippets/SendBox.snippet';
-import { SendBoxWithSystemMessageExample } from './snippets/SendBoxWithSystemMessage.snippet';
+import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
+import React from 'react';
 import { CustomIconExample } from './snippets/CustomIcon.snippet';
 import { CustomStylingExample } from './snippets/CustomStyling.snippet';
+import { SendBoxExample } from './snippets/SendBox.snippet';
+import { SendBoxWithSystemMessageExample } from './snippets/SendBoxWithSystemMessage.snippet';
 
+const CustomIconExampleText = require('!!raw-loader!./snippets/CustomIcon.snippet.tsx').default;
+const CustomStylingExampleText = require('!!raw-loader!./snippets/CustomStyling.snippet.tsx').default;
 const SendBoxExampleText = require('!!raw-loader!./snippets/SendBox.snippet.tsx').default;
 const SendBoxWithSystemMessageExampleText = require('!!raw-loader!./snippets/SendBoxWithSystemMessage.snippet.tsx')
   .default;
-const CustomIconExampleText = require('!!raw-loader!./snippets/CustomIcon.snippet.tsx').default;
-const CustomStylingExampleText = require('!!raw-loader!./snippets/CustomStyling.snippet.tsx').default;
 
 const importStatement = `import { SendBox } from '@azure/communication-react';`;
 

packages/storybook/stories/SendBox/snippets/CustomIcon.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { SendBox, FluentThemeProvider } from '@azure/communication-react';
 import { Icon } from '@fluentui/react';
+import React from 'react';
 
 export const CustomIconExample: () => JSX.Element = () => (
   <FluentThemeProvider>

packages/storybook/stories/SendBox/snippets/CustomStyling.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { SendBox, FluentThemeProvider } from '@azure/communication-react';
+import React from 'react';
 
 export const CustomStylingExample: () => JSX.Element = () => {
   const sendBoxStyles = {

packages/storybook/stories/SendBox/snippets/SendBox.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { SendBox, FluentThemeProvider } from '@azure/communication-react';
+import React from 'react';
 
 export const SendBoxExample: () => JSX.Element = () => (
   <FluentThemeProvider>

packages/storybook/stories/SendBox/snippets/SendBoxWithSystemMessage.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { SendBox, FluentThemeProvider } from '@azure/communication-react';
+import React from 'react';
 
 export const SendBoxWithSystemMessageExample: () => JSX.Element = () => (
   <FluentThemeProvider>

packages/storybook/stories/TypingIndicator/TypingIndicator.stories.tsx

@@ -1,10 +1,10 @@
 // © Microsoft Corporation. All rights reserved.
+import { TypingIndicator as TypingIndicatorComponent } from '@azure/communication-react';
 import { object, text, boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
-import { TypingIndicator as TypingIndicatorComponent } from '@azure/communication-react';
 import React from 'react';
-import { getDocs } from './TypingIndicatorDocs';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
+import { getDocs } from './TypingIndicatorDocs';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.
 // This ensures that storybook hoists the story instead of creating a folder with a single entry.

packages/storybook/stories/TypingIndicator/TypingIndicatorDocs.tsx

@@ -1,14 +1,14 @@
 // © Microsoft Corporation. All rights reserved.
+import { TypingIndicator } from '@azure/communication-react';
 import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { TypingIndicator } from '@azure/communication-react';
-import { TypingIndicatorSnippet } from './snippets/TypingIndicator.snippet';
 import { CustomStylingSnippet } from './snippets/CustomStyling.snippet';
 import { CustomUserRenderSnippet } from './snippets/CustomUserRender.snippet';
+import { TypingIndicatorSnippet } from './snippets/TypingIndicator.snippet';
 
-const TypingIndicatorSnippetText = require('!!raw-loader!./snippets/TypingIndicator.snippet.tsx').default;
 const CustomStylingSnippetText = require('!!raw-loader!./snippets/CustomStyling.snippet.tsx').default;
 const CustomUserRenderSnippetText = require('!!raw-loader!./snippets/CustomUserRender.snippet.tsx').default;
+const TypingIndicatorSnippetText = require('!!raw-loader!./snippets/TypingIndicator.snippet.tsx').default;
 
 const importStatement = `import { TypingIndicator } from '@azure/communication-react';`;
 

packages/storybook/stories/TypingIndicator/snippets/CustomStyling.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { TypingIndicator } from '@azure/communication-react';
+import React from 'react';
 
 export const CustomStylingSnippet: () => JSX.Element = () => {
   const twoTypingUsers = [

packages/storybook/stories/TypingIndicator/snippets/CustomUserRender.snippet.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { TypingIndicator, WebUiChatParticipant } from '@azure/communication-react';
 import { mergeStyles } from '@fluentui/react';
+import React from 'react';
 
 export const CustomUserRenderSnippet: () => JSX.Element = () => {
   const avatarStyle = {

packages/storybook/stories/TypingIndicator/snippets/TypingIndicator.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { TypingIndicator, WebUiChatParticipant } from '@azure/communication-react';
+import React from 'react';
 
 export const TypingIndicatorSnippet: () => JSX.Element = () => {
   const oneTypingUsers = [{ userId: '1', displayName: 'User1' }];

packages/storybook/stories/VideoTile/VideoTile.stories.tsx

@@ -1,8 +1,5 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import { Stack } from '@fluentui/react';
 import {
   CameraButton,
   ControlBar,
@@ -12,10 +9,13 @@ import {
   StreamMedia,
   VideoTile as VideoTileComponent
 } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
 import { text, boolean, number } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { COMPONENT_FOLDER_PREFIX } from '../constants';
 import { renderVideoStream } from '../utils';
 import { getDocs } from './VideoTileDocs';
-import { COMPONENT_FOLDER_PREFIX } from '../constants';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.
 // This ensures that storybook hoists the story instead of creating a folder with a single entry.

packages/storybook/stories/VideoTile/VideoTileDocs.tsx

@@ -1,14 +1,15 @@
 // © Microsoft Corporation. All rights reserved.
 
+import { VideoTile } from '@azure/communication-react';
 import { Canvas, Description, Heading, Props, Source, Title, Subheading } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { VideoTile } from '@azure/communication-react';
-import { VideoTileExample } from './snippets/VideoTile.snippet';
-const VideoTileExampleText = require('!!raw-loader!./snippets/VideoTile.snippet').default;
-import { VideoTilePlaceholderExample } from './snippets/VideoTilePlaceholder.snippet';
-const VideoTilePlaceholderText = require('!!raw-loader!./snippets/VideoTilePlaceholder.snippet').default;
 import { VideoTileExample as VideoTileStylineExample } from '../Styling/snippets/StylingVideoTile.snippet';
+import { VideoTileExample } from './snippets/VideoTile.snippet';
+import { VideoTilePlaceholderExample } from './snippets/VideoTilePlaceholder.snippet';
+
 const VideoTileStylineExampleText = require('!!raw-loader!../Styling/snippets/StylingVideoTile.snippet').default;
+const VideoTileExampleText = require('!!raw-loader!./snippets/VideoTile.snippet').default;
+const VideoTilePlaceholderText = require('!!raw-loader!./snippets/VideoTilePlaceholder.snippet').default;
 
 const importStatement = `import { VideoTile } from '@azure/communication-react';`;
 

packages/storybook/stories/VideoTile/snippets/VideoTile.snippet.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { VideoTile, FluentThemeProvider, StreamMedia } from '@azure/communication-react';
+import React from 'react';
 import { renderVideoStream } from '../../utils';
 
 export const VideoTileExample: () => JSX.Element = () => {

packages/storybook/stories/VideoTile/snippets/VideoTilePlaceholder.snippet.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { VideoTile, FluentThemeProvider, StreamMedia } from '@azure/communication-react';
-import { renderVideoStream } from '../../utils';
 import { Stack } from '@fluentui/react';
+import React from 'react';
+import { renderVideoStream } from '../../utils';
 
 export const VideoTilePlaceholderExample: () => JSX.Element = () => {
   const videoTileStyles = { root: { height: '300px', width: '400px', border: '1px solid #999' } };

packages/storybook/stories/snippets/FluentThemeProvider.snippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   CameraButton,
   ControlBar,
@@ -7,6 +6,7 @@ import {
   MicrophoneButton,
   ScreenShareButton
 } from '@azure/communication-react';
+import React from 'react';
 
 export const FluentThemeProviderSnippet = (): JSX.Element => {
   return (

packages/storybook/stories/snippets/ThemedButton.snippet.tsx

@@ -1,5 +1,5 @@
-import { useTheme } from '@fluentui/react-theme-provider';
 import { DefaultButton } from '@fluentui/react';
+import { useTheme } from '@fluentui/react-theme-provider';
 import React from 'react';
 
 export const ThemedButton = (): JSX.Element => {

samples/Calling/package.json

@@ -94,6 +94,7 @@
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-header": "^3.1.0",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^4.1.2",

samples/Chat/package.json

@@ -90,6 +90,7 @@
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-header": "^3.1.0",
+    "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^4.1.2",