[Inbound Calling] Migrate to SB 8 (#5209)

* Add Concepts page * Component docs * Update packages/storybook8/stories/Components/IncomingCallNotification/IncomingCallNotification/Docs.mdx Co-authored-by: edwardlee-msft <[email protected]> Signed-off-by: Donald McEachern <[email protected]> * Update packages/storybook8/stories/Concepts/InboundCalling/Docs.mdx Co-authored-by: edwardlee-msft <[email protected]> Signed-off-by: Donald McEachern <[email protected]> * Update packages/storybook8/stories/Components/IncomingCallNotification/IncomingCallStack/index.stories.tsx Co-authored-by: edwardlee-msft <[email protected]> Signed-off-by: Donald McEachern <[email protected]> * Update packages/storybook8/stories/controlsUtils.ts Co-authored-by: edwardlee-msft <[email protected]> Signed-off-by: Donald McEachern <[email protected]> * fix canvas * fix sb build issue --------- Signed-off-by: Donald McEachern <[email protected]> Co-authored-by: edwardlee-msft <[email protected]>
Azure · Sep 26, 2024 · 2931ebd · 2931ebd
1 parent 3c34a8f
commit 2931ebd
Show file tree

Hide file tree

Showing 15 changed files with 764 additions and 48 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/common/config/rush/variants/stable/pnpm-lock.yaml b/common/config/rush/variants/stable/pnpm-lock.yaml
diff --git a/packages/storybook8/package.json b/packages/storybook8/package.json
@@ -64,6 +64,7 @@
     "@storybook/node-logger": "^8.2.6",
     "@storybook/preview-api": "^8.2.6",
     "@storybook/react": "^8.2.6",
+    "@storybook/test": "^8.2.6",
     "@storybook/react-webpack5": "^8.2.6",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/theming": "^8.2.6",

diff --git a/...8/stories/Components/IncomingCallNotification/IncomingCallNotification/Docs.mdx b/...8/stories/Components/IncomingCallNotification/IncomingCallNotification/Docs.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs';
+import {
+  IncomingCallNotificationExampleDocsOnly,
+  IncomingCallNotificationStylingExampleDocsOnly
+} from './index.stories';
+import * as IncomingCallNotificationStories from './index.stories';
+import IncomingCallNotificationText from '!!raw-loader!./snippets/IncomingCallNotification.snippet';
+import IncomingCallNotificationStylingText from '!!raw-loader!./snippets/IncomingCallNotificationStyling.snippet';
+import { IncomingCallNotification } from '@azure/communication-react';
+
+<Meta of={IncomingCallNotificationStories} />
+
+# IncomingCallNotification
+
+This component is a representation of an incoming call. It will show the name of the caller and allow you to
+accept the call with either audio or video or reject the call. This component is used by the `IncomingCallStack`
+for each of the calls held in its state.
+
+<Canvas of={IncomingCallNotificationExampleDocsOnly} source={{ code: IncomingCallNotificationText }} />
+## Styling Depending on your use of `IncomingCallNotification` and the `IncomingCallStack` you might want to customize
+Match your notification's appearance to your needs. Both components includes API's to adjust the CSS on many different
+elements of the notification. Below is an example of how you can customize `IncomingCallNotification`.
+
+<Canvas of={IncomingCallNotificationStylingExampleDocsOnly} source={{ code: IncomingCallNotificationStylingText }} />
+
+## Props
+
+<ArgTypes of={IncomingCallNotification}></ArgTypes>
diff --git a/...ents/IncomingCallNotification/IncomingCallNotification/IncomingCallNotification.story.tsx b/...ents/IncomingCallNotification/IncomingCallNotification/IncomingCallNotification.story.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IncomingCallNotification as IncomingCallNotificationComponent } from '@azure/communication-react';
+import React from 'react';
+
+const IncomingCallNotificationStory = (args: { callerName: string; showAcceptWithVideo: boolean }): JSX.Element => {
+  return (
+    <IncomingCallNotificationComponent
+      onAcceptWithAudio={function (): void {
+        alert('Accept with audio');
+      }}
+      onAcceptWithVideo={function (): void {
+        alert('Accept with video');
+      }}
+      onReject={function (): void {
+        alert('Rejected');
+      }}
+      callerName={args.callerName}
+      acceptOptions={{
+        showAcceptWithVideo: args.showAcceptWithVideo
+      }}
+    />
+  );
+};
+
+export const IncomingCallNotification = IncomingCallNotificationStory.bind({});
diff --git a/...k8/stories/Components/IncomingCallNotification/IncomingCallNotification/index.stories.tsx b/...k8/stories/Components/IncomingCallNotification/IncomingCallNotification/index.stories.tsx
@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IncomingCallNotification as IncomingCallNotificationComponent } from '@azure/communication-react';
+import { Meta } from '@storybook/react';
+
+import { controlsToAdd, hiddenControl } from '../../../controlsUtils';
+import { IncomingCallNotificationExample } from './snippets/IncomingCallNotification.snippet';
+import { IncomingCallNotificationStylingExample } from './snippets/IncomingCallNotificationStyling.snippet';
+
+export { IncomingCallNotification } from './IncomingCallNotification.story';
+export const IncomingCallNotificationExampleDocsOnly = {
+  render: IncomingCallNotificationExample
+};
+export const IncomingCallNotificationStylingExampleDocsOnly = {
+  render: IncomingCallNotificationStylingExample
+};
+
+const meta: Meta = {
+  title: 'Components/IncomingCallNotification/ Incoming Call Notification',
+  component: IncomingCallNotificationComponent,
+  argTypes: {
+    callerName: controlsToAdd.callerName,
+    acceptOptions: hiddenControl,
+    onAcceptWithAudio: hiddenControl,
+    onAcceptWithVideo: hiddenControl,
+    onReject: hiddenControl,
+    showAcceptWithVideo: hiddenControl,
+    alertText: hiddenControl,
+    avatarImage: hiddenControl,
+    personaSize: hiddenControl,
+    styles: hiddenControl,
+    strings: hiddenControl,
+    onDismiss: hiddenControl,
+    onRenderAvatar: hiddenControl
+  },
+  args: {
+    callerName: 'John Wick',
+    acceptOptions: {
+      showAcceptWithVideo: true
+    }
+  }
+};
+
+export default meta;
diff --git a/...ngCallNotification/IncomingCallNotification/snippets/IncomingCallNotification.snippet.tsx b/...ngCallNotification/IncomingCallNotification/snippets/IncomingCallNotification.snippet.tsx
@@ -0,0 +1,22 @@
+import { IncomingCallNotification } from '@azure/communication-react';
+import React from 'react';
+
+export const IncomingCallNotificationExample: () => JSX.Element = () => {
+  return (
+    <IncomingCallNotification
+      onAcceptWithAudio={function (): void {
+        alert('Accept with audio');
+      }}
+      onAcceptWithVideo={function (): void {
+        alert('Accept with video');
+      }}
+      onReject={function (): void {
+        alert('Rejected');
+      }}
+      callerName="John Wick"
+      acceptOptions={{
+        showAcceptWithVideo: true
+      }}
+    />
+  );
+};
diff --git a/...otification/IncomingCallNotification/snippets/IncomingCallNotificationStyling.snippet.tsx b/...otification/IncomingCallNotification/snippets/IncomingCallNotificationStyling.snippet.tsx
@@ -0,0 +1,56 @@
+import { IncomingCallNotification, useTheme } from '@azure/communication-react';
+import React from 'react';
+
+export const IncomingCallNotificationStylingExample: () => JSX.Element = () => {
+  const theme = useTheme();
+  return (
+    <IncomingCallNotification
+      onAcceptWithAudio={function (): void {
+        alert('Accept with audio');
+      }}
+      onAcceptWithVideo={function (): void {
+        alert('Accept with video');
+      }}
+      onReject={function (): void {
+        alert('Rejected');
+      }}
+      personaSize={54}
+      callerName="Dog"
+      avatarImage="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbm8wa2JwYmZlaXg2NzhrbzF4OHlvazVsM3dtMG9iMXhtMXM4eHlzdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Fu3OjBQiCs3s0ZuLY3/giphy-downsized.gif"
+      styles={{
+        root: {
+          root: {
+            background: theme.palette.purpleLight,
+            borderRadius: '10px',
+            width: '19rem',
+            padding: '1rem',
+            boxShadow: theme.effects.elevation16
+          }
+        },
+        acceptButton: {
+          root: {
+            borderRadius: '5px',
+            background: 'green',
+            color: 'white'
+          }
+        },
+        rejectButton: {
+          root: {
+            borderRadius: '5px',
+            background: 'darkred',
+            color: 'white'
+          }
+        },
+        avatarContainer: {
+          root: {
+            background: 'blue',
+            borderRadius: '2rem'
+          }
+        }
+      }}
+      acceptOptions={{
+        showAcceptWithVideo: true
+      }}
+    />
+  );
+};
diff --git a/...orybook8/stories/Components/IncomingCallNotification/IncomingCallStack/Docs.mdx b/...orybook8/stories/Components/IncomingCallNotification/IncomingCallStack/Docs.mdx
@@ -0,0 +1,17 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs';
+import { IncomingCallStackExampleDocsOnly } from './index.stories';
+import * as IncomingCallStackComponent from './index.stories';
+import { IncomingCallStack } from '@azure/communication-react';
+
+import IncomingCallStackExampleText from '!!raw-loader!./snippets/IncomingCallStack.snippet';
+
+<Meta of={IncomingCallStackComponent} />
+
+# IncomingCallStack
+
+This component is a manager for your different incoming calls. It will render the different calls using the
+`IncomingCallNotification` component. Using the `usePropsFor` hook it will be able to get these calls from the
+`Statefulcallclient` and render them in the UI. This component will allow you to manage multiple incoming calls.
+
+<Canvas of={IncomingCallStackExampleDocsOnly} source={{ code: IncomingCallStackExampleText }} />
+<ArgTypes of={IncomingCallStack}></ArgTypes>
diff --git a/...stories/Components/IncomingCallNotification/IncomingCallStack/IncomingCallStack.story.tsx b/...stories/Components/IncomingCallNotification/IncomingCallStack/IncomingCallStack.story.tsx
@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IncomingCallStack as IncomingCallStackComponent } from '@azure/communication-react';
+import React from 'react';
+
+const IncomingCallStackStory = (args): JSX.Element => {
+  const numberOfCalls = args.maxIncomingCallsToShow;
+  const incomingCalls = args.incomingCalls.slice(0, numberOfCalls);
+  const onAcceptCall = (incomingCallId: string, useVideo?: boolean): void => {
+    alert('Accepted, useVideo: ' + useVideo + ', incomingCallId: ' + incomingCallId);
+  };
+  const onRejectCall = (incomingCallId: string): void => {
+    alert('Rejected, incomingCallId: ' + incomingCallId);
+  };
+  return (
+    <IncomingCallStackComponent
+      activeIncomingCalls={incomingCalls}
+      removedIncomingCalls={[]}
+      onAcceptCall={onAcceptCall}
+      onRejectCall={onRejectCall}
+    />
+  );
+};
+
+export const IncomingCallStack = IncomingCallStackStory.bind({});
diff --git a/...torybook8/stories/Components/IncomingCallNotification/IncomingCallStack/index.stories.tsx b/...torybook8/stories/Components/IncomingCallNotification/IncomingCallStack/index.stories.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IncomingCallStack as IncomingCallStackComponent } from '@azure/communication-react';
+import { Meta } from '@storybook/react';
+import { controlsToAdd, hiddenControl } from '../../../controlsUtils';
+
+import { IncomingCallStackExample } from './snippets/IncomingCallStack.snippet';
+export const IncomingCallStackExampleDocsOnly = {
+  render: IncomingCallStackExample
+};
+
+export { IncomingCallStack } from './IncomingCallStack.story';
+
+const meta: Meta = {
+  title: 'Components/IncomingCallNotification/IncomingCallStack',
+  component: IncomingCallStackComponent,
+  argTypes: {
+    maxIncomingCallsToShow: controlsToAdd.maxIncomingCallsToShow,
+    incomingCalls: controlsToAdd.incomingCalls,
+    onAcceptCall: hiddenControl,
+    onRejectCall: hiddenControl,
+    activeIncomingCalls: hiddenControl,
+    removedIncomingCalls: hiddenControl,
+    styles: hiddenControl,
+    strings: hiddenControl,
+    tabIndex: hiddenControl
+  },
+  args: {
+    maxIncomingCallsToShow: 3,
+    incomingCalls: [
+      {
+        callerInfo: {
+          displayName: 'John Wick'
+        },
+        id: '1'
+      },
+      {
+        callerInfo: {
+          displayName: 'Dog'
+        },
+        id: '2'
+      },
+      {
+        callerInfo: {
+          displayName: 'Dog2'
+        },
+        id: '3'
+      }
+    ]
+  }
+};
+
+export default meta;
diff --git a/...ponents/IncomingCallNotification/IncomingCallStack/snippets/IncomingCallStack.snippet.tsx b/...ponents/IncomingCallNotification/IncomingCallStack/snippets/IncomingCallStack.snippet.tsx
@@ -0,0 +1,37 @@
+import { IncomingCallStackCall, IncomingCallStack } from '@azure/communication-react';
+import React from 'react';
+
+const mockActiveIncomingCalls: IncomingCallStackCall[] = [
+  {
+    callerInfo: {
+      displayName: 'John Wick'
+    },
+    id: '1',
+    videoAvailable: false
+  },
+  {
+    callerInfo: {
+      displayName: 'Dog'
+    },
+    id: '2',
+    videoAvailable: true
+  }
+];
+const mockRemovedIncomingCalls: IncomingCallStackCall[] = [];
+
+export const IncomingCallStackExample: () => JSX.Element = () => {
+  return (
+    <IncomingCallStack
+      activeIncomingCalls={mockActiveIncomingCalls}
+      removedIncomingCalls={mockRemovedIncomingCalls}
+      onAcceptCall={(incomingCallId: string, useVideo?: boolean) => {
+        if (useVideo) {
+          alert('call accepted with video id: ' + incomingCallId);
+        } else {
+          alert('call accepted id: ' + incomingCallId);
+        }
+      }}
+      onRejectCall={(incomingCallId: string) => alert('call rejected id: ' + incomingCallId)}
+    />
+  );
+};
diff --git a/packages/storybook8/stories/Concepts/InboundCalling/Docs.mdx b/packages/storybook8/stories/Concepts/InboundCalling/Docs.mdx
@@ -0,0 +1,38 @@
+import { Meta, Source } from '@storybook/react';
+
+<Meta title="Concepts/Inbound Calling" />
+
+import InboundCallingSource from '!!raw-loader!./snippets/IncomingCallStackPropsExample.snippet.tsx';
+
+# Inbound Calling
+
+Azure Communication Services UI Library is adding support for Inbound Calling. With this new feature, users will
+be able to see and monitor new incoming calls when signed in to Azure Communication Services or as a Teams User.
+Users will be able to accept with audio, accept with video, and reject incoming calls.
+
+Enabling this feature will allow them to see multiple incoming calls allowing the user to service multiple people
+at once. In any scenario, when your users are logged in, you are able to connect with your customers in a more direct way.
+
+## Incorporating Inbound Calling into your Experience
+
+Currently the UI library exports a series of components like the [Video
+Gallery](./?path=/docs/ui-components-videogallery--video-gallery) or
+[CallControls](./?path=/docs/ui-components-controlbar--control-bar) that allow you to build a Video calling
+experience that you can join through our [stateful client](./?path=/docs/quickstarts-statefulcallclient--page).
+With the introduction of these components, we are also allowing you to attach to your experience a way to have
+the calls come to you through these new react components. We are adding this capability with the new
+[IncomingCallStack](./?path=/docs/ui-components-internal-inboundcalling-incomingcallstack--incoming-call-stack) and
+[IncomingCallNotification](./?path=/docs/ui-components-internal-inboundcalling-incomingcallnotification--incoming-call-notification) Component.
+These new components will allow you to accept the call, accept with video, or reject the call. Accepting will bring you straight into the call.
+
+The following code is a snippet of how you can incorporate the Inbound Calling feature into your experience:
+
+<Source code={InboundCallingSource} />
+
+**Note:** this code should be wrapped in our different stateful client providers to fetch state. See how to use our [`usePropsFor` react hook](./?path=/docs/statefulclient-reacthooks-usepropsfor--page).
+
+## FAQ
+
+- I am having trouble with the Inbound Calling feature, what should I do?
+  - Please reach out to the ACS UI Library team for support. We are here to help you with any issues you may have. You can do this
+    by creating a new issue in the [GitHub repository](https://github.com/Azure/communication-ui-library/issues)
diff --git a/...ybook8/stories/Concepts/InboundCalling/snippets/IncomingCallStackPropsExample.snippet.tsx b/...ybook8/stories/Concepts/InboundCalling/snippets/IncomingCallStackPropsExample.snippet.tsx
@@ -0,0 +1,21 @@
+import { IncomingCallStack, usePropsFor } from '@azure/communication-react';
+import { Stack } from '@fluentui/react';
+import React from 'react';
+
+/**
+ * Your main call screen page.
+ */
+export const CallScreen = (): JSX.Element => {
+  /**
+   * The usage of `usePropsFor` is to get the props for the `IncomingCallStack` component.
+   *
+   */
+  const incomingCallStackProps = usePropsFor(IncomingCallStack);
+  return (
+    <Stack style={{ margin: 'auto', position: 'relative' }}>
+      <Stack style={{ position: 'absolute', top: '0', right: '0' }}>
+        <IncomingCallStack {...incomingCallStackProps} />
+      </Stack>
+    </Stack>
+  );
+};