Update storybook snippet imports to point to @azure/communication-react (#219)

packages/storybook/.storybook/main.js

@@ -29,7 +29,7 @@ module.exports = {
     // Note: This triggers babel to retranspile all package dependency files during webpack's compilation step.
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
-      "react-components": path.resolve(__dirname, "../../react-components/src"),
+      "@azure/communication-react": path.resolve(__dirname, "../../communication-react/src"),
       "react-composites": path.resolve(__dirname, "../../react-composites/src"),
       "@azure/acs-chat-declarative": path.resolve(__dirname, "../../acs-chat-declarative/src"),
       "@azure/acs-chat-selector": path.resolve(__dirname, "../../acs-chat-selector/src"),

packages/storybook/.storybook/preview.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
-import { FluentThemeProvider, defaultThemes } from 'react-components';
+import { FluentThemeProvider, defaultThemes } from '@azure/communication-react';
 import { initializeIcons, loadTheme, mergeStyles } from '@fluentui/react';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { BackToTop, TableOfContents } from 'storybook-docs-toc';

packages/storybook/package.json

@@ -5,8 +5,7 @@
   "description": "Azure Communication Services UI Toolkit Storybook",
   "scripts": {
     "build": "build-storybook -s stories,public,.storybook  --quiet --loglevel warn",
-    "start": "concurrently \"rush build:watch -T storybook\" \"rushx start:storybook\"",
-    "start:storybook": "start-storybook -p 6006 -s stories,./public --no-manager-cache --quiet --loglevel warn",
+    "start": "start-storybook -p 6006 -s stories,./public --no-manager-cache --quiet --loglevel warn",
     "deploy-storybook": "storybook-to-ghpages --script build",
     "test": "jest",
     "test:coverage": "npm run test -- --coverage",
@@ -23,6 +22,7 @@
     "@azure/communication-calling": "1.0.1-beta.1",
     "@azure/communication-chat": "1.0.0-beta.4",
     "@azure/communication-common": "1.0.0-beta.3",
+    "@azure/communication-react": "1.0.0-beta",
     "@azure/communication-signaling": "1.0.0-beta.1",
     "@azure/core-http": "^1.2.3",
     "@fluentui/react": "^7.117.1",

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

@@ -4,7 +4,7 @@ import { Canvas, Description, Heading, Props, Source, SourceState, Title } from
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { CameraButton } from 'react-components';
+import { CameraButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 import { CustomCameraButtonExample } from './snippets/Custom.snippet';

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 'react-components';
+import { CameraButton } from '@azure/communication-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 'react-components';
+import { CameraButton } from '@azure/communication-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 'react-components';
+import { CameraButton } from '@azure/communication-react';
 
 export const CameraButtonWithLabelExample: () => JSX.Element = () => {
   return (

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

@@ -4,7 +4,7 @@ import { Canvas, Description, Heading, Props, Source, SourceState, Title } from
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { MicrophoneButton } from 'react-components';
+import { MicrophoneButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 import { MicrophoneButtonExample } from './snippets/MicrophoneButton.snippet';
@@ -17,7 +17,7 @@ const MicrophoneButtonWithLabelExampleText = require('!!raw-loader!./snippets/Mi
 const CustomMicrophoneButtonExampleText = require('!!raw-loader!./snippets/CustomMicrophoneButton.snippet.tsx').default;
 
 const importStatement = `
-import { MicrophoneButton } from 'react-components';
+import { MicrophoneButton } from '@azure/communication-react';
 `;
 
 const getDocs: () => JSX.Element = () => {

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 'react-components';
+import { MicrophoneButton } from '@azure/communication-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 'react-components';
+import { MicrophoneButton } from '@azure/communication-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 'react-components';
+import { MicrophoneButton } from '@azure/communication-react';
 
 export const MicrophoneButtonWithLabelExample: () => JSX.Element = () => {
   return (

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

@@ -4,7 +4,7 @@ import { Canvas, Description, Heading, Props, Source, SourceState, Title } from
 import { boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { ScreenShareButton } from 'react-components';
+import { ScreenShareButton } from '@azure/communication-react';
 
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 import { CustomScreenShareButtonExample } from './snippets/Custom.snippet';

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 'react-components';
+import { ScreenShareButton } from '@azure/communication-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 'react-components';
+import { ScreenShareButton } from '@azure/communication-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 'react-components';
+import { ScreenShareButton } from '@azure/communication-react';
 
 export const ScreenShareButtonWithLabelExample: () => JSX.Element = () => {
   return (

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

@@ -9,7 +9,7 @@ import {
   MicrophoneButton,
   OptionsButton,
   ScreenShareButton
-} from 'react-components';
+} from '@azure/communication-react';
 import { boolean, select } from '@storybook/addon-knobs';
 import { getDocs } from './ControlBarDocs';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';

packages/storybook/stories/ControlBar/ControlBarDocs.tsx

@@ -2,7 +2,7 @@
 
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { ControlBar } from 'react-components';
+import { ControlBar } from '@azure/communication-react';
 import { AllButtonsControlBarExample } from './snippets/AllButtonsControlBar.snippet';
 import { ControlBarLayoutExample } from './snippets/ControlBarLayout.snippet';
 import { CustomButtonsExample } from './snippets/CustomButtons.snippet';
@@ -15,7 +15,7 @@ const CustomControlBarStylesExampleText = require('!!raw-loader!./snippets/Custo
 const OptionsButtonExampleText = require('!!raw-loader!./snippets/OptionsButton.snippet.tsx').default;
 
 const importStatement = `
-import { FluentThemeProvider, ControlBar } from 'react-components';
+import { FluentThemeProvider, ControlBar } from '@azure/communication-react';
 import { DefaultButton } from '@fluentui/react';
 `;
 

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

@@ -9,7 +9,7 @@ import {
   ScreenShareButton,
   answerButtonProps,
   recordButtonProps
-} from 'react-components';
+} from '@azure/communication-react';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
 
 export const AllButtonsControlBarExample: () => JSX.Element = () => {

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

@@ -7,7 +7,7 @@ import {
   MicrophoneButton,
   OptionsButton,
   ScreenShareButton
-} from 'react-components';
+} from '@azure/communication-react';
 
 export const ControlBarExample: () => JSX.Element = () => {
   return (

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

@@ -7,7 +7,7 @@ import {
   MicrophoneButton,
   OptionsButton,
   ScreenShareButton
-} from 'react-components';
+} from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
 
 export const ControlBarLayoutExample: () => JSX.Element = () => {

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { CameraButton, ControlBar, EndCallButton, FluentThemeProvider, MicrophoneButton } from 'react-components';
+import {
+  CameraButton,
+  ControlBar,
+  EndCallButton,
+  FluentThemeProvider,
+  MicrophoneButton
+} from '@azure/communication-react';
 import { CallEndIcon } from '@fluentui/react-northstar';
 
 export const CustomButtonsExample: () => JSX.Element = () => {

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

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

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

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

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

@@ -2,7 +2,7 @@
 
 import { Meta } from '@storybook/react/types-6-0';
 import React, { useState } from 'react';
-import { CommunicationUiErrorSeverity, ErrorBar as ErrorBarComponent } from 'react-components';
+import { CommunicationUiErrorSeverity, ErrorBar as ErrorBarComponent } from '@azure/communication-react';
 import { text, select } from '@storybook/addon-knobs';
 import { getDocs } from './ErrorBarDocs';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';

packages/storybook/stories/ErrorBar/ErrorBarDocs.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
-import { ErrorBar } from 'react-components';
+import { ErrorBar } from '@azure/communication-react';
 import { ErrorBarExample } from './snippets/ErrorBar.snippet';
 import { OtherSeverityErrorBarExample } from './snippets/OtherSeverityErrorBar.snippet';
 
@@ -10,7 +10,7 @@ const ErrorBarExampleText = require('!!raw-loader!./snippets/ErrorBar.snippet.ts
 const OtherSeverityErrorBarExampleText = require('!!raw-loader!./snippets/OtherSeverityErrorBar.snippet.tsx').default;
 
 const importStatement = `
-import { ErrorBarComponent, CommunicationUiErrorSeverity } from 'react-components';
+import { ErrorBarComponent, CommunicationUiErrorSeverity } from '@azure/communication-react';
 `;
 
 export const getDocs: () => JSX.Element = () => {

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

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

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

@@ -103,7 +103,7 @@ const IncomingCallToast = (props: IncomingCallToastProps): JSX.Element => {
 `;
 
 const exampleIncomingCallModal = `
-import { StreamMedia, VideoTile } from 'react-components';
+import { StreamMedia, VideoTile } from '@azure/communication-react';
 import { DefaultButton, Persona, PersonaSize, Stack, Dialog, DialogType, DialogFooter } from '@fluentui/react';
 import { CallEndIcon, CallIcon, CallVideoIcon, CallVideoOffIcon } from '@fluentui/react-northstar';
 import { getTheme, mergeStyles } from '@fluentui/react';

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

@@ -11,7 +11,7 @@ import {
   mediaGalleryHeightOptions,
   EXAMPLES_FOLDER_PREFIX
 } from '../../constants';
-import { GridLayout, VideoTile } from 'react-components';
+import { GridLayout, VideoTile } from '@azure/communication-react';
 import { Stack, mergeStyles, PersonaSize, Persona } from '@fluentui/react';
 import { getDocs } from './LayoutsDocs';
 

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

@@ -10,7 +10,7 @@ import {
   mediaGalleryHeightOptions,
   EXAMPLES_FOLDER_PREFIX
 } from '../../constants';
-import { GridLayout, VideoTile } from 'react-components';
+import { GridLayout, VideoTile } from '@azure/communication-react';
 import { Stack, mergeStyles, PersonaSize, Persona, Label } from '@fluentui/react';
 import { getDocs } from './LayoutsDocs';
 

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

@@ -1,4 +1,4 @@
-import { VideoTile } from 'react-components';
+import { VideoTile } from '@azure/communication-react';
 import { mergeStyles, Persona, PersonaSize, Stack } from '@fluentui/react';
 import React from 'react';
 

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

@@ -1,4 +1,4 @@
-import { VideoTile } from 'react-components';
+import { VideoTile } from '@azure/communication-react';
 import { Label, mergeStyles, Persona, PersonaSize, Stack } from '@fluentui/react';
 import React from 'react';
 

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

@@ -1,4 +1,4 @@
-import { StreamMedia, VideoTile } from 'react-components';
+import { StreamMedia, VideoTile } from '@azure/communication-react';
 import { useTheme } from '@fluentui/react-theme-provider';
 import React from 'react';
 import { renderVideoStream } from '../../../utils';

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta } from '@storybook/react/types-6-0';
-import { ParticipantItem } from 'react-components';
+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';

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ParticipantItem } from 'react-components';
+import { ParticipantItem } from '@azure/communication-react';
 import { Icon, PersonaPresence, Stack } from '@fluentui/react';
 
 export const InteractiveParticipantListExample: () => JSX.Element = () => {

packages/storybook/stories/Examples/TeamsInterop/snippets/CallComponent.snippet.tsx

@@ -1,4 +1,4 @@
-import { StreamMedia, VideoTile } from 'react-components';
+import { StreamMedia, VideoTile } from '@azure/communication-react';
 import React from 'react';
 import { renderVideoStream } from '../../../utils';
 import { Banner } from './Banner.snippet';

packages/storybook/stories/Examples/TeamsInterop/snippets/CallControlBar.snippet.tsx

@@ -1,4 +1,4 @@
-import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton } from 'react-components';
+import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton } from '@azure/communication-react';
 import React from 'react';
 
 // TODO: Add unique keys to the list here.

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

@@ -15,7 +15,7 @@ export const getDocs: () => JSX.Element = () => {
     MicrophoneButton,
     ScreenShareButton,
     VideoTile
-  } from 'react-components';
+  } from '@azure/communication-react';
 
   const TeamsTheme = {
     palette: {

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

@@ -13,7 +13,7 @@ import {
   MicrophoneButton,
   ScreenShareButton,
   VideoTile
-} from 'react-components';
+} from '@azure/communication-react';
 
 const TeamsTheme = {
   palette: {

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

@@ -12,7 +12,7 @@ import {
   mediaGalleryHeightOptions,
   COMPONENT_FOLDER_PREFIX
 } from '../constants';
-import { GridLayout as GridLayoutComponent, VideoTile, StreamMedia } from 'react-components';
+import { GridLayout as GridLayoutComponent, VideoTile, StreamMedia } from '@azure/communication-react';
 import { renderVideoStream } from '../utils';
 
 // This must be the only named export from this module, and must be named to match the storybook path suffix.

packages/storybook/stories/GridLayout/GridLayoutDocs.tsx

@@ -2,12 +2,12 @@
 
 import React from 'react';
 import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
-import { GridLayout } from 'react-components';
+import { GridLayout } from '@azure/communication-react';
 import { GridLayoutExample } from './snippets/GridLayout.snippet';
 const GridLayoutExampleText = require('!!raw-loader!./snippets/GridLayout.snippet').default;
 
 const importStatement = `
-import { GridLayout, VideoTile } from 'react-components';
+import { GridLayout, VideoTile } from '@azure/communication-react';
 `;
 export const getDocs: () => JSX.Element = () => {
   return (

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

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

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

@@ -9,7 +9,7 @@ import {
   CustomMessage,
   SystemMessage,
   DefaultMessageRendererType
-} from 'react-components';
+} from '@azure/communication-react';
 import { boolean } from '@storybook/addon-knobs';
 import { PrimaryButton, Stack } from '@fluentui/react';
 import { Divider } from '@fluentui/react-northstar';

packages/storybook/stories/MessageThread/MessageThreadDocs.tsx

@@ -2,7 +2,7 @@
 
 import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { MessageThread } from 'react-components';
+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;
@@ -29,7 +29,7 @@ const MessageThreadWithCustomReadReceiptExampleText = require('!!raw-loader!./sn
   .default;
 
 const importStatement = `
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 `;
 
 export const getDocs: () => JSX.Element = () => {

packages/storybook/stories/MessageThread/placeholdermessages.ts

@@ -1,6 +1,12 @@
 // © Microsoft Corporation. All rights reserved.
 
-import { MessageStatus, MessageAttachedStatus, ChatMessage, CustomMessage, SystemMessage } from 'react-components';
+import {
+  MessageStatus,
+  MessageAttachedStatus,
+  ChatMessage,
+  CustomMessage,
+  SystemMessage
+} from '@azure/communication-react';
 
 export const MessageThreadContainerStyles = {
   width: '100%',

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import React from 'react';
 import { GetHistoryChatMessages } from './placeholdermessages';
 

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import { Persona, PersonaPresence, PersonaSize } from '@fluentui/react';
 import React from 'react';
 import { GetHistoryChatMessages } from './placeholdermessages';

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import React from 'react';
 import { GetHistoryChatMessages } from './placeholdermessages';
 

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import React from 'react';
 import { GetHistoryWithSystemMessages } from './placeholdermessages';
 

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

@@ -1,4 +1,9 @@
-import { DefaultMessageRendererType, FluentThemeProvider, MessageProps, MessageThread } from 'react-components';
+import {
+  DefaultMessageRendererType,
+  FluentThemeProvider,
+  MessageProps,
+  MessageThread
+} from '@azure/communication-react';
 import { Divider } from '@fluentui/react-northstar';
 import React from 'react';
 import { GetHistoryWithCustomMessages } from './placeholdermessages';

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

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

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import React from 'react';
 import { GetHistoryChatMessages } from './placeholdermessages';
 

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider, MessageThread } from 'react-components';
+import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
 import React from 'react';
 import { GetHistoryWithSystemMessages } from './placeholdermessages';
 

packages/storybook/stories/MessageThread/snippets/placeholdermessages.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, CustomMessage, MessageStatus, SystemMessage } from 'react-components';
+import { ChatMessage, CustomMessage, MessageStatus, SystemMessage } from '@azure/communication-react';
 
 // This is some mock messages for example purposes.
 // For actual projects, you can get chat messages from declarative/selectors for ACS.

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

@@ -4,7 +4,7 @@ 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 'react-components';
+import { ParticipantItem as ParticipantItemComponent } from '@azure/communication-react';
 import { getDocs } from './ParticipantItemDocs';
 import { Stack } from '@fluentui/react';
 import { MicOffIcon, CallControlPresentNewIcon } from '@fluentui/react-northstar';

packages/storybook/stories/ParticipantItem/ParticipantItemDocs.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
-import { ParticipantItem } from 'react-components';
+import { ParticipantItem } from '@azure/communication-react';
 import { ParticipantItemExample } from './snippets/ParticipantItem.snippet';
 import { CustomAvatarExample } from './snippets/CustomAvatar.snippet';
 import { CustomIconExample } from './snippets/CustomIcon.snippet';
@@ -12,7 +12,7 @@ const CustomAvatarExampleText = require('!!raw-loader!./snippets/CustomAvatar.sn
 const CustomIconExampleText = require('!!raw-loader!./snippets/CustomIcon.snippet.tsx').default;
 
 const importStatement = `
-import { ParticipantItem, ParticipantItemProps } from 'react-components';
+import { ParticipantItem, ParticipantItemProps } from '@azure/communication-react';
 import { IContextualMenuItem, PersonaPresence } from '@fluentui/react';`;
 
 export const getDocs: () => JSX.Element = () => {

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

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

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

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

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

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

packages/storybook/stories/QuickStarts/QuickstartComposite.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
-import { GroupCall, GroupChat } from 'react-components';
+import { GroupCall, GroupChat } from '@azure/communication-react';
 import { App as QuickstartCompositeExample } from './snippets/QuickstartComposite.snippet.tsx';
 import QuickstartCompositeText from '!!raw-loader!./snippets/QuickstartComposite.snippet.tsx';
 

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider } from 'react-components';
+import { FluentThemeProvider } from '@azure/communication-react';
 import React from 'react';
 
 function App() {

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

@@ -7,7 +7,7 @@ import {
   OptionsButton,
   ScreenShareButton,
   VideoTile
-} from 'react-components';
+} from '@azure/communication-react';
 
 import { Stack, IContextualMenuProps } from '@fluentui/react';
 import React from 'react';

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

@@ -1,4 +1,4 @@
-import { MessageThread, ChatMessage as WebUiChatMessage, SendBox, MessageStatus } from 'react-components';
+import { MessageThread, ChatMessage as WebUiChatMessage, SendBox, MessageStatus } from '@azure/communication-react';
 import React from 'react';
 
 export const ChatComponents = (): JSX.Element => {

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

@@ -1,4 +1,4 @@
-import { FluentThemeProvider } from 'react-components';
+import { FluentThemeProvider } from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
 import React from 'react';
 import { CallingComponents } from './CallingComponents.snippet';

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

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 
 import React from 'react';
-import { MessageStatus, ReadReceipt as ReadRecieptComponent } from 'react-components';
+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';

packages/storybook/stories/ReadReceipt/ReadReceiptDocs.tsx

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

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import { boolean, text } from '@storybook/addon-knobs';
 import { getDocs } from './SendBoxDocs';
-import { SendBox as SendBoxComponent } from 'react-components';
+import { SendBox as SendBoxComponent } from '@azure/communication-react';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
 import { Meta } from '@storybook/react/types-6-0';
 

packages/storybook/stories/SendBox/SendBoxDocs.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
-import { SendBox } from 'react-components';
+import { SendBox } from '@azure/communication-react';
 import { SendBoxExample } from './snippets/SendBox.snippet';
 import { SendBoxWithSystemMessageExample } from './snippets/SendBoxWithSystemMessage.snippet';
 import { CustomIconExample } from './snippets/CustomIcon.snippet';
@@ -14,7 +14,7 @@ const SendBoxWithSystemMessageExampleText = require('!!raw-loader!./snippets/Sen
 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 'react-components';`;
+const importStatement = `import { SendBox } from '@azure/communication-react';`;
 
 export const getDocs: () => JSX.Element = () => {
   return (

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

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

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

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

packages/storybook/stories/Styling/Styling.stories.mdx

@@ -8,7 +8,7 @@ import {
   MicrophoneButton,
   OptionsButton,
   ScreenShareButton
-} from 'react-components';
+} from '@azure/communication-react';
 import { ControlBarExample } from './snippets/StylingControlBar.snippet';
 import { VideoTileExample } from './snippets/StylingVideoTile.snippet';
 import ControlBarExampleText from '!!raw-loader!./snippets/StylingControlBar.snippet.tsx';

packages/storybook/stories/Styling/snippets/StylingControlBar.snippet.tsx

@@ -1,4 +1,10 @@
-import { CameraButton, ControlBar, EndCallButton, FluentThemeProvider, MicrophoneButton } from 'react-components';
+import {
+  CameraButton,
+  ControlBar,
+  EndCallButton,
+  FluentThemeProvider,
+  MicrophoneButton
+} from '@azure/communication-react';
 import React from 'react';
 
 // ControlBar component accepts a `styles` prop with only the `root` key as a valid property.

packages/storybook/stories/Styling/snippets/StylingVideoTile.snippet.tsx

@@ -6,7 +6,7 @@ import {
   MicrophoneButton,
   StreamMedia,
   VideoTile
-} from 'react-components';
+} from '@azure/communication-react';
 import React from 'react';
 import { renderVideoStream } from '../../utils';
 

packages/storybook/stories/Theming.stories.mdx

@@ -17,7 +17,7 @@ import {
   OptionsButton,
   ScreenShareButton,
   darkTheme
-} from 'react-components';
+} from '@azure/communication-react';
 
 <Meta title="Theming" />
 

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

@@ -1,7 +1,7 @@
 // © Microsoft Corporation. All rights reserved.
 import { object, text, boolean } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react/types-6-0';
-import { TypingIndicator as TypingIndicatorComponent } from 'react-components';
+import { TypingIndicator as TypingIndicatorComponent } from '@azure/communication-react';
 import React from 'react';
 import { getDocs } from './TypingIndicatorDocs';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';

packages/storybook/stories/TypingIndicator/TypingIndicatorDocs.tsx

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

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

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

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

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

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

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

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

@@ -11,7 +11,7 @@ import {
   OptionsButton,
   StreamMedia,
   VideoTile as VideoTileComponent
-} from 'react-components';
+} from '@azure/communication-react';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import { renderVideoStream } from '../utils';
 import { getDocs } from './VideoTileDocs';

packages/storybook/stories/VideoTile/VideoTileDocs.tsx

@@ -2,7 +2,7 @@
 
 import { Canvas, Description, Heading, Props, Source, Title, Subheading } from '@storybook/addon-docs/blocks';
 import React from 'react';
-import { VideoTile } from 'react-components';
+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';
@@ -10,7 +10,7 @@ const VideoTilePlaceholderText = require('!!raw-loader!./snippets/VideoTilePlace
 import { VideoTileExample as VideoTileStylineExample } from '../Styling/snippets/StylingVideoTile.snippet';
 const VideoTileStylineExampleText = require('!!raw-loader!../Styling/snippets/StylingVideoTile.snippet').default;
 
-const importStatement = `import { VideoTile } from 'react-components';`;
+const importStatement = `import { VideoTile } from '@azure/communication-react';`;
 
 export const getDocs: () => JSX.Element = () => {
   return (

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VideoTile, FluentThemeProvider, StreamMedia } from 'react-components';
+import { VideoTile, FluentThemeProvider, StreamMedia } from '@azure/communication-react';
 import { renderVideoStream } from '../../utils';
 import { Stack } from '@fluentui/react';
 

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

@@ -7,7 +7,7 @@ import {
   OptionsButton,
   ScreenShareButton,
   defaultThemes
-} from 'react-components';
+} from '@azure/communication-react';
 import React from 'react';
 
 export const DarkControlBar = (): JSX.Element => {

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

@@ -6,7 +6,7 @@ import {
   FluentThemeProvider,
   MicrophoneButton,
   ScreenShareButton
-} from 'react-components';
+} from '@azure/communication-react';
 
 export const FluentThemeProviderSnippet = (): JSX.Element => {
   return (