fix: address comments

Author: reneshen0328

src/elements/content-sharing/ContentSharing.js

@@ -16,49 +16,49 @@ import SharingModal from './SharingModal';
 // $FlowFixMe
 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';
 
 import '../common/base.scss';
 import '../common/fonts.scss';
 import '../common/modal.scss';
 
-type ContentSharingProps = {
+interface ContentSharingProps {
     /** apiHost - API hostname. Defaults to https://api.box.com */
-    apiHost: string,
+    apiHost: string;
     /** children - Children for the element to open the Unified Share Modal */
-    children?: React.Element<any>,
+    children?: React.Element<any>;
     /** config - Configuration object that shows/hides features in the USM */
-    config?: USMConfig,
+    config?: USMConfig;
     /**
      * customButton - Clickable element for opening the SharingModal component.
      * This property should always be used in conjunction with displayInModal.
      */
-    customButton?: React.Element<any>,
+    customButton?: React.Element<any>;
     /**
      * displayInModal - Whether the SharingModal component should be displayed in a modal.
      * If false, the SharingModal component will appear as a form within the surrounding page.
      * This property can be used with or without a customButton. If used without a customButton,
      * the modal will appear on page load. See ContentSharing.stories.js for examples.
      */
-    displayInModal: boolean,
+    displayInModal: boolean;
     /** features - Features for the element */
-    features?: FeatureConfig,
+    features?: FeatureConfig;
     /** itemID - Box file or folder ID */
-    itemID: string,
+    itemID: string;
     /** itemType - "file" or "folder" */
-    itemType: ItemType,
+    itemType: ItemType;
     /** language - Language used for the element */
-    language: string,
+    language: string;
     /** messages - Localized strings used by the element */
-    messages?: StringMap,
+    messages?: StringMap;
     /** token - Valid access token */
-    token: string,
+    token: string;
     /** uuid - Unique identifier, used for refreshing element visibility when called from the ES6 wrapper */
-    uuid?: string,
-};
+    uuid?: string;
+}
 
 const createAPI = (apiHost, itemID, itemType, token) =>
     new API({

src/elements/content-sharing/ContentSharingV2.tsx

@@ -5,7 +5,20 @@ 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';
+
+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;
+    /** language - Language used for the element */
+    language: string;
+    /** messages - Localized strings used by the element */
+    messages?: StringMap;
+}
 
 function ContentSharingV2({ children, itemID, itemType, language, messages }: ContentSharingV2Props) {
     // Retrieve item from API later

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,4 +1,5 @@
-import { DEFAULT_HOSTNAME_API, TYPE_FILE, TYPE_FOLDER } from '../../../constants';
+import * as React from 'react';
+import { TYPE_FILE, TYPE_FOLDER } from '../../../constants';
 import { ContentSharingV2 } from '../ContentSharingV2';
 
 export const Basic = {};
@@ -7,19 +8,10 @@ export default {
     title: 'Elements/ContentSharingV2',
     component: ContentSharingV2,
     args: {
-        apiHost: DEFAULT_HOSTNAME_API,
+        children: <button>Open Unified Share Modal</button>,
         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',
     },
     argTypes: {
         itemType: {

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

@@ -1,23 +1,13 @@
-import { DEFAULT_HOSTNAME_API, TYPE_FILE } from '../../../../constants';
+import { TYPE_FILE } from '../../../../constants';
 import { ContentSharingV2 } from '../../ContentSharingV2';
 
 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',
     },
 };