fix: address comments

Author: reneshen0328

src/elements/content-sharing/ContentSharing.js

@@ -14,10 +14,10 @@ import { withBlueprintModernization } from '../common/withBlueprintModernization
 import { isFeatureEnabled } from '../common/feature-checking';
 import SharingModal from './SharingModal';
 // $FlowFixMe
-import { ContentSharingV2 } from './ContentSharingV2';
+import ContentSharingV2 from './ContentSharingV2';
 import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants';
-import type { ItemType, StringMap } from '../../common/types/core';
 
+import type { ItemType, StringMap } from '../../common/types/core';
 import type { USMConfig } from '../../features/unified-share-modal/flowTypes';
 import type { FeatureConfig } from '../common/feature-checking';
 
@@ -46,6 +46,8 @@ type ContentSharingProps = {
     displayInModal: boolean,
     /** features - Features for the element */
     features?: FeatureConfig,
+    /** hasProviders - Whether the element has providers for USM already */
+    hasProviders?: boolean,
     /** itemID - Box file or folder ID */
     itemID: string,
     /** itemType - "file" or "folder" */
@@ -76,6 +78,7 @@ function ContentSharing({
     customButton,
     displayInModal,
     features = {},
+    hasProviders = true,
     itemID,
     itemType,
     language,
@@ -113,7 +116,13 @@ function ContentSharing({
 
     if (isFeatureEnabled(features, 'contentSharingV2')) {
         return (
-            <ContentSharingV2 itemID={itemID} itemType={itemType} language={language} messages={messages}>
+            <ContentSharingV2
+                itemID={itemID}
+                itemType={itemType}
+                hasProviders={hasProviders}
+                language={language}
+                messages={messages}
+            >
                 {children}
             </ContentSharingV2>
         );

src/elements/content-sharing/ContentSharingV2.tsx

@@ -5,9 +5,24 @@ import { UnifiedShareModal } from '@box/unified-share-modal';
 import Internationalize from '../common/Internationalize';
 import Providers from '../common/Providers';
 
-import type { ContentSharingV2Props } from './types';
+import type { ItemType, StringMap } from '../../common/types/core';
 
-function ContentSharingV2({ children, itemID, itemType, language, messages }: ContentSharingV2Props) {
+export interface ContentSharingV2Props {
+    /** children - Children for the element to open the Unified Share Modal */
+    children?: React.ReactElement;
+    /** itemID - Box file or folder ID */
+    itemID: string;
+    /** itemType - "file" or "folder" */
+    itemType: ItemType;
+    /** hasProviders - Whether the element has providers for USM already */
+    hasProviders: boolean;
+    /** language - Language used for the element */
+    language?: string;
+    /** messages - Localized strings used by the element */
+    messages?: StringMap;
+}
+
+function ContentSharingV2({ children, itemID, itemType, hasProviders, language, messages }: ContentSharingV2Props) {
     // Retrieve item from API later
     const mockItem = {
         id: itemID,
@@ -17,11 +32,11 @@ function ContentSharingV2({ children, itemID, itemType, language, messages }: Co
 
     return (
         <Internationalize language={language} messages={messages}>
-            <Providers hasProviders>
+            <Providers hasProviders={hasProviders}>
                 <UnifiedShareModal item={mockItem}>{children}</UnifiedShareModal>
             </Providers>
         </Internationalize>
     );
 }
 
-export { ContentSharingV2 };
+export default ContentSharingV2;

src/elements/content-sharing/stories/ContentSharing.stories.js

@@ -13,6 +13,16 @@ export const withCustomButton = {
     },
 };
 
+export const withContentSharingV2Enabled = {
+    args: {
+        children: <button>Open Unified Share Modal</button>,
+        features: {
+            ...global.FEATURE_FLAGS,
+            contentSharingV2: true,
+        },
+    },
+};
+
 export default {
     title: 'Elements/ContentSharing',
     component: ContentSharing,
@@ -31,13 +41,3 @@ export default {
         },
     },
 };
-
-export const ContentSharingV2Enabled: StoryObj = {
-    args: {
-        children: <button>Open Unified Share Modal</button>,
-        features: {
-            ...global.FEATURE_FLAGS,
-            contentSharingV2: true,
-        },
-    },
-};

src/elements/content-sharing/stories/ContentSharingV2.stories.tsx

@@ -1,25 +1,16 @@
-import { DEFAULT_HOSTNAME_API, TYPE_FILE, TYPE_FOLDER } from '../../../constants';
-import { ContentSharingV2 } from '../ContentSharingV2';
+import * as React from 'react';
+import { TYPE_FILE, TYPE_FOLDER } from '../../../constants';
+import ContentSharingV2 from '../ContentSharingV2';
 
 export const Basic = {};
 
 export default {
     title: 'Elements/ContentSharingV2',
     component: ContentSharingV2,
     args: {
-        apiHost: DEFAULT_HOSTNAME_API,
-        features: global.FEATURE_FLAGS,
-        hasProviders: true,
-        language: 'en',
+        children: <button>Open Unified Share Modal</button>,
         itemType: TYPE_FILE,
         itemID: global.FILE_ID,
-        messages: {
-            en: {
-                contentSharingV2: 'Content Sharing V2',
-            },
-        },
-        token: global.TOKEN,
-        theme: 'light',
     },
     argTypes: {
         itemType: {

src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx

@@ -1,28 +1,17 @@
-import { DEFAULT_HOSTNAME_API, TYPE_FILE } from '../../../../constants';
-import { ContentSharingV2 } from '../../ContentSharingV2';
+import { TYPE_FILE } from '../../../../constants';
+import ContentSharingV2 from '../../ContentSharingV2';
+
+export const withModernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
 
 export default {
     title: 'Elements/ContentSharingV2/tests/visual-regression-tests',
     component: ContentSharingV2,
     args: {
-        apiHost: DEFAULT_HOSTNAME_API,
-        features: global.FEATURE_FLAGS,
-        hasProviders: true,
-        language: 'en',
         itemType: TYPE_FILE,
         itemID: global.FILE_ID,
-        messages: {
-            en: {
-                contentSharingV2: 'Content Sharing V2',
-            },
-        },
-        token: global.TOKEN,
-        theme: 'light',
-    },
-};
-
-export const Modernization = {
-    args: {
-        enableModernizedComponents: true,
     },
 };