Add ability to have local-only stories, Add scaffolding for PiPiP component to demonstrate (#1354)

Author: JamesBurnside

change/@internal-react-components-db36ba1b-3a4a-410f-8918-bbc0b9da98bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Create scaffolding for PiPiP component",
+  "packageName": "@internal/react-components",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@internal-storybook-c6bc1980-a706-42b4-ac85-b3120e0ec7fd.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add ability to have local-only stories",
+  "packageName": "@internal/storybook",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/communication-react/src/index.ts

@@ -86,8 +86,120 @@ export type {
   ErrorBarSelector as ChatErrorBarSelector
 } from '../../chat-component-bindings/src';
 
+export {
+  _IdentifierProvider,
+  CameraButton,
+  ControlBar,
+  ControlBarButton,
+  DevicesButton,
+  EndCallButton,
+  ErrorBar,
+  GridLayout,
+  LocalizationProvider,
+  MessageStatusIndicator,
+  MessageThread,
+  MicrophoneButton,
+  ParticipantItem,
+  ParticipantList,
+  ParticipantsButton,
+  ScreenShareButton,
+  SendBox,
+  StreamMedia,
+  TypingIndicator,
+  VideoGallery,
+  VideoTile
+} from '../../react-components/src';
+
+export type {
+  _IdentifierProviderProps,
+  _Identifiers,
+  ActiveErrorMessage,
+  BaseCustomStyles,
+  CallParticipantListParticipant,
+  CameraButtonProps,
+  CameraButtonStrings,
+  ChatMessage,
+  CommunicationParticipant,
+  ComponentLocale,
+  ComponentStrings,
+  ContentSystemMessage,
+  ControlBarButtonProps,
+  ControlBarButtonStrings,
+  ControlBarButtonStyles,
+  ControlBarLayout,
+  ControlBarProps,
+  CustomAvatarOptions,
+  CustomMessage,
+  DevicesButtonContextualMenuStyles,
+  DevicesButtonProps,
+  DevicesButtonStrings,
+  DevicesButtonStyles,
+  EndCallButtonProps,
+  EndCallButtonStrings,
+  ErrorBarProps,
+  ErrorBarStrings,
+  ErrorType,
+  GridLayoutProps,
+  GridLayoutStyles,
+  HorizontalGalleryStyles,
+  JumpToNewMessageButtonProps,
+  LocalizationProviderProps,
+  Message,
+  MessageAttachedStatus,
+  MessageCommon,
+  MessageContentType,
+  MessageProps,
+  MessageRenderer,
+  MessageStatusIndicatorProps,
+  MessageStatusIndicatorStrings,
+  MessageThreadProps,
+  MessageThreadStrings,
+  MessageThreadStyles,
+  MicrophoneButtonProps,
+  MicrophoneButtonStrings,
+  OnRenderAvatarCallback,
+  OptionsDevice,
+  ParticipantAddedSystemMessage,
+  ParticipantItemProps,
+  ParticipantItemStrings,
+  ParticipantItemStyles,
+  ParticipantListItemStyles,
+  ParticipantListParticipant,
+  ParticipantListProps,
+  ParticipantListStyles,
+  ParticipantMenuItemsCallback,
+  ParticipantRemovedSystemMessage,
+  ParticipantsButtonContextualMenuStyles,
+  ParticipantsButtonProps,
+  ParticipantsButtonStrings,
+  ParticipantsButtonStyles,
+  ScreenShareButtonProps,
+  ScreenShareButtonStrings,
+  SendBoxProps,
+  SendBoxStrings,
+  SendBoxStylesProps,
+  StreamMediaProps,
+  SystemMessage,
+  SystemMessageCommon,
+  TopicUpdatedSystemMessage,
+  TypingIndicatorProps,
+  TypingIndicatorStrings,
+  TypingIndicatorStylesProps,
+  VideoGalleryLocalParticipant,
+  VideoGalleryParticipant,
+  VideoGalleryProps,
+  VideoGalleryRemoteParticipant,
+  VideoGalleryStream,
+  VideoGalleryStrings,
+  VideoGalleryStyles,
+  VideoStreamOptions,
+  VideoTileProps,
+  VideoTileStylesProps
+} from '../../react-components/src';
+export * from '../../react-components/src/localization/locales';
+export * from '../../react-components/src/theming';
+
 export * from '../../calling-stateful-client/src';
 export * from '../../chat-stateful-client/src';
-export * from '../../react-components/src';
 export * from '../../react-composites/src';
 export * from './mergedHooks';

packages/react-components/review/react-components.api.md

@@ -723,6 +723,14 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
     menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
 }
 
+// @internal
+export const _PictureInPictureInPicture: (props: _PictureInPictureInPictureProps) => JSX.Element;
+
+// @internal
+export interface _PictureInPictureInPictureProps {
+    onClick?: () => void;
+}
+
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 

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

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from 'react';
+
+/**
+ * Props for {@link _PictureInPictureInPicture} component.
+ *
+ * @internal
+ */
+export interface _PictureInPictureInPictureProps {
+  /**
+   * Callback when the {@link _PictureInPictureInPicture} is clicked.
+   */
+  onClick?: () => void;
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */ // REMOVE WHEN PROPS USED (BELOW)
+/**
+ * Component that displays a video feed for use as a Picture-in-Picture style component.
+ * It contains a secondary video feed resulting in an inner Picture-in-Picture style feed.
+ *
+ * @remarks
+ * The double nature of the Picture-in-Picture styles is where this component gets its name; Picture-in-Picture-in-Picture.
+ *
+ * @internal
+ */
+export const _PictureInPictureInPicture = (props: _PictureInPictureInPictureProps): JSX.Element => {
+  return <></>;
+};

packages/react-components/src/components/index.ts

@@ -81,3 +81,6 @@ export type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenS
 
 export { VideoTile } from './VideoTile';
 export type { VideoTileProps, VideoTileStylesProps } from './VideoTile';
+
+export { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';
+export type { _PictureInPictureInPictureProps } from './PictureInPictureInPicture/PictureInPictureInPicture';

packages/react-components/stable-review/react-components.api.md

@@ -723,6 +723,14 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
     menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
 }
 
+// @internal
+export const _PictureInPictureInPicture: (props: _PictureInPictureInPictureProps) => JSX.Element;
+
+// @internal
+export interface _PictureInPictureInPictureProps {
+    onClick?: () => void;
+}
+
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 

packages/storybook/.eslintrc.js

@@ -104,6 +104,12 @@ module.exports = {
       rules: {
         'header/header': 'off'
       }
+    },
+    {
+      files: 'stories/INTERNAL/**/*',
+      rules: {
+        'no-restricted-imports': 'off'
+      }
     }
   ]
 };

packages/storybook/.storybook/main.js

@@ -4,8 +4,12 @@
 const path = require('path');
 const webpack = require('webpack4');
 
+const PRODUCTION_BUILD = !!process.env.PRODUCTION;
+
 module.exports = {
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(ts|tsx)'],
+  // Include all stories that have .ts, .tsx or .mdx extensions. When in production do not
+  // include the INTERNAL/ folder.
+  stories: [`../stories/${PRODUCTION_BUILD ? '!(INTERNAL)/' : ''}**/*.stories.@(ts|tsx|mdx)`],
   // Speeds up webpack build time after every code change. Improvements of up
   // to 4-5 seconds can be seen. Comment if components don't render properly.
   typescript: { reactDocgen: 'react-docgen' },

packages/storybook/stories/INTERNAL/PictureInPictureInPicture/PictureInPictureInPicture.stories.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { _PictureInPictureInPicture as PictureInPictureInPictureComponent } from '@internal/react-components';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import { COMPONENT_FOLDER_PREFIX } from '../../constants';
+import { hiddenControl } from '../../controlsUtils';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const PictureInPictureInPictureStory = (args): JSX.Element => {
+  return <PictureInPictureInPictureComponent />;
+};
+
+// 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.
+export const PictureInPictureInPicture = PictureInPictureInPictureStory.bind({});
+
+export default {
+  id: `${COMPONENT_FOLDER_PREFIX}-internal-pictureinpictureinpicture`,
+  title: `${COMPONENT_FOLDER_PREFIX}/Internal/Picture In Picture In Picture`,
+  component: PictureInPictureInPictureComponent,
+  argTypes: {
+    // Hiding auto-generated controls
+    onClick: hiddenControl
+  }
+} as Meta;