From 839370501c82907fa7b08884d2a2dafce1641b57 Mon Sep 17 00:00:00 2001 From: Rene Shen Date: Thu, 18 Sep 2025 20:44:51 -0700 Subject: [PATCH 1/7] feat: Create ContentSharingV2 component --- .../content-sharing/ContentSharing.js | 7 +++ .../content-sharing/ContentSharingV2.tsx | 58 +++++++++++++++++++ .../stories/ContentSharing.stories.js | 11 ++++ .../stories/ContentSharingV2.stories.tsx | 30 ++++++++++ .../tests/ContentSharingV2-visual.stories.tsx | 28 +++++++++ src/elements/content-sharing/types.ts | 23 ++++++++ 6 files changed, 157 insertions(+) create mode 100644 src/elements/content-sharing/ContentSharingV2.tsx create mode 100644 src/elements/content-sharing/stories/ContentSharingV2.stories.tsx create mode 100644 src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx create mode 100644 src/elements/content-sharing/types.ts diff --git a/src/elements/content-sharing/ContentSharing.js b/src/elements/content-sharing/ContentSharing.js index 24466dab8c..96747eab5a 100644 --- a/src/elements/content-sharing/ContentSharing.js +++ b/src/elements/content-sharing/ContentSharing.js @@ -11,7 +11,9 @@ import * as React from 'react'; import API from '../../api'; // $FlowFixMe import { withBlueprintModernization } from '../common/withBlueprintModernization'; +import { isFeatureEnabled } from '../common/feature-checking'; import SharingModal from './SharingModal'; +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 { USMConfig } from '../../features/unified-share-modal/flowTypes'; @@ -65,6 +67,7 @@ function ContentSharing({ config, customButton, displayInModal, + features = {}, itemID, itemType, language, @@ -100,6 +103,10 @@ function ContentSharing({ } }, [config, customButton, displayInModal, itemID, itemType, language, launchButton, messages, isVisible]); + if (isFeatureEnabled(features, 'contentSharingV2')) { + return ; + } + return ( <> {launchButton} diff --git a/src/elements/content-sharing/ContentSharingV2.tsx b/src/elements/content-sharing/ContentSharingV2.tsx new file mode 100644 index 0000000000..006b3ee4c8 --- /dev/null +++ b/src/elements/content-sharing/ContentSharingV2.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; + +import { UnifiedShareModal } from '@box/unified-share-modal'; + +import API from '../../api'; +import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants'; +import Internationalize from '../common/Internationalize'; +import Providers from '../common/Providers'; +import ThemingStyles from '../common/theming/ThemingStyles'; + +import type { ContentSharingV2Props } from './types'; + +const createAPI = (apiHost, itemID, itemType, token) => + new API({ + apiHost, + clientName: CLIENT_NAME_CONTENT_SHARING, + id: `${itemType}_${itemID}`, + token, + version: CLIENT_VERSION, + }); + +function ContentSharingV2({ + apiHost = DEFAULT_HOSTNAME_API, + itemID, + itemType, + language, + messages, + hasProviders, + theme, + token, +}: ContentSharingV2Props) { + const [api, setAPI] = React.useState(createAPI(apiHost, itemID, itemType, token)); + + // Reset the API if necessary + React.useEffect(() => { + if (apiHost && itemID && itemType && token) { + setAPI(createAPI(apiHost, itemID, itemType, token)); + } + }, [apiHost, itemID, itemType, token]); + + // Retrieve item from API later + const mockItem = api && { + id: itemID, + name: 'Box Development Guide.pdf', + type: itemType, + }; + + return ( + + + + + + + ); +} + +export { ContentSharingV2 }; diff --git a/src/elements/content-sharing/stories/ContentSharing.stories.js b/src/elements/content-sharing/stories/ContentSharing.stories.js index fa90c3a888..f737e1bc35 100644 --- a/src/elements/content-sharing/stories/ContentSharing.stories.js +++ b/src/elements/content-sharing/stories/ContentSharing.stories.js @@ -21,6 +21,8 @@ export default { config: { showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false }, displayInModal: false, itemType: TYPE_FILE, + itemID: global.FILE_ID, + token: global.TOKEN, }, argTypes: { itemType: { @@ -29,3 +31,12 @@ export default { }, }, }; + +export const ContentSharingV2Enabled: StoryObj = { + args: { + features: { + ...global.FEATURE_FLAGS, + contentSharingV2: true, + }, + }, +}; diff --git a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx new file mode 100644 index 0000000000..727812b44a --- /dev/null +++ b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx @@ -0,0 +1,30 @@ +import { DEFAULT_HOSTNAME_API, 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', + itemType: TYPE_FILE, + itemID: global.FILE_ID, + messages: { + en: { + contentSharingV2: 'Content Sharing V2', + }, + }, + token: global.TOKEN, + theme: 'light', + }, + argTypes: { + itemType: { + options: [TYPE_FILE, TYPE_FOLDER], + control: { type: 'select' }, + }, + }, +}; diff --git a/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx b/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx new file mode 100644 index 0000000000..add7fb686d --- /dev/null +++ b/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx @@ -0,0 +1,28 @@ +import { DEFAULT_HOSTNAME_API, 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', + }, +}; + +export const Modernization = { + args: { + enableModernizedComponents: true, + }, +}; diff --git a/src/elements/content-sharing/types.ts b/src/elements/content-sharing/types.ts new file mode 100644 index 0000000000..bbb694ae64 --- /dev/null +++ b/src/elements/content-sharing/types.ts @@ -0,0 +1,23 @@ +import type { ItemType, StringMap } from '../../common/types/core'; +import type { Theme } from '../common/theming/types'; + +export type ContentSharingV2Props = { + /** apiHost - API hostname. Defaults to https://api.box.com */ + apiHost: string; + /** 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; + /** token - Valid access token */ + token: string; + /** hasProviders - Providers for notifications and tooltips */ + hasProviders?: boolean; + /** theme - Theme for the element */ + theme?: Theme; + /** uuid - Unique identifier, used for refreshing element visibility when called from the ES6 wrapper */ + uuid?: string; +}; From 5794c3c24238ef677f0b0c0574d064bb17f61737 Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 08:55:24 -0700 Subject: [PATCH 2/7] feat: Create ContentSharingV2 component --- scripts/jest/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/jest/jest.config.js b/scripts/jest/jest.config.js index c558824b13..09ada00444 100644 --- a/scripts/jest/jest.config.js +++ b/scripts/jest/jest.config.js @@ -26,6 +26,6 @@ module.exports = { testMatch: ['**/__tests__/**/*.test.+(js|jsx|ts|tsx)'], testPathIgnorePatterns: ['stories.test.js$', 'stories.test.tsx$', 'stories.test.d.ts'], transformIgnorePatterns: [ - 'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/metadata-filter|@box/metadata-view|@box/types|@box/box-item-type-selector)/)', + 'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/metadata-filter|@box/metadata-view|@box/types|@box/box-item-type-selector|@box/unified-share-modal|@box/user-selector|@box/copy-input)/)', ], }; From 23156176e19b6f36a0cd5e968b048b0f743e953d Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 09:08:42 -0700 Subject: [PATCH 3/7] fix: flow --- src/elements/content-sharing/ContentSharing.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/elements/content-sharing/ContentSharing.js b/src/elements/content-sharing/ContentSharing.js index 96747eab5a..752dce8dfb 100644 --- a/src/elements/content-sharing/ContentSharing.js +++ b/src/elements/content-sharing/ContentSharing.js @@ -11,8 +11,9 @@ import * as React from 'react'; import API from '../../api'; // $FlowFixMe import { withBlueprintModernization } from '../common/withBlueprintModernization'; -import { isFeatureEnabled } from '../common/feature-checking'; +import { isFeatureEnabled, type FeatureConfig } from '../common/feature-checking'; 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'; @@ -39,6 +40,8 @@ type ContentSharingProps = { * the modal will appear on page load. See ContentSharing.stories.js for examples. */ displayInModal: boolean, + /** features - Features for the element */ + features?: FeatureConfig, /** itemID - Box file or folder ID */ itemID: string, /** itemType - "file" or "folder" */ From 8f90da5cfcd84569987b59fb13fa3cab36edba57 Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 10:03:20 -0700 Subject: [PATCH 4/7] fix: remove not needed code --- .../content-sharing/ContentSharing.js | 13 ++++++-- .../content-sharing/ContentSharingV2.tsx | 32 +++---------------- .../stories/ContentSharing.stories.js | 3 +- src/elements/content-sharing/types.ts | 5 ++- 4 files changed, 19 insertions(+), 34 deletions(-) diff --git a/src/elements/content-sharing/ContentSharing.js b/src/elements/content-sharing/ContentSharing.js index 752dce8dfb..9e58a25932 100644 --- a/src/elements/content-sharing/ContentSharing.js +++ b/src/elements/content-sharing/ContentSharing.js @@ -11,13 +11,15 @@ import * as React from 'react'; import API from '../../api'; // $FlowFixMe import { withBlueprintModernization } from '../common/withBlueprintModernization'; -import { isFeatureEnabled, type FeatureConfig } from '../common/feature-checking'; +import { isFeatureEnabled } from '../common/feature-checking'; 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 { USMConfig } from '../../features/unified-share-modal/flowTypes'; +import type { FeatureConfig } from '../common/feature-checking'; import '../common/base.scss'; import '../common/fonts.scss'; @@ -26,6 +28,8 @@ import '../common/modal.scss'; type ContentSharingProps = { /** apiHost - API hostname. Defaults to https://api.box.com */ apiHost: string, + /** children - Children for the element to open the Unified Share Modal */ + children?: React.Element, /** config - Configuration object that shows/hides features in the USM */ config?: USMConfig, /** @@ -67,6 +71,7 @@ const createAPI = (apiHost, itemID, itemType, token) => function ContentSharing({ apiHost = DEFAULT_HOSTNAME_API, + children, config, customButton, displayInModal, @@ -107,7 +112,11 @@ function ContentSharing({ }, [config, customButton, displayInModal, itemID, itemType, language, launchButton, messages, isVisible]); if (isFeatureEnabled(features, 'contentSharingV2')) { - return ; + return ( + + {children} + + ); } return ( diff --git a/src/elements/content-sharing/ContentSharingV2.tsx b/src/elements/content-sharing/ContentSharingV2.tsx index 006b3ee4c8..9dffee976f 100644 --- a/src/elements/content-sharing/ContentSharingV2.tsx +++ b/src/elements/content-sharing/ContentSharingV2.tsx @@ -2,44 +2,21 @@ import * as React from 'react'; import { UnifiedShareModal } from '@box/unified-share-modal'; -import API from '../../api'; -import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants'; import Internationalize from '../common/Internationalize'; import Providers from '../common/Providers'; -import ThemingStyles from '../common/theming/ThemingStyles'; import type { ContentSharingV2Props } from './types'; -const createAPI = (apiHost, itemID, itemType, token) => - new API({ - apiHost, - clientName: CLIENT_NAME_CONTENT_SHARING, - id: `${itemType}_${itemID}`, - token, - version: CLIENT_VERSION, - }); - function ContentSharingV2({ - apiHost = DEFAULT_HOSTNAME_API, + children, itemID, itemType, language, messages, - hasProviders, - theme, - token, + hasProviders = true, }: ContentSharingV2Props) { - const [api, setAPI] = React.useState(createAPI(apiHost, itemID, itemType, token)); - - // Reset the API if necessary - React.useEffect(() => { - if (apiHost && itemID && itemType && token) { - setAPI(createAPI(apiHost, itemID, itemType, token)); - } - }, [apiHost, itemID, itemType, token]); - // Retrieve item from API later - const mockItem = api && { + const mockItem = { id: itemID, name: 'Box Development Guide.pdf', type: itemType, @@ -48,8 +25,7 @@ function ContentSharingV2({ return ( - - + {children} ); diff --git a/src/elements/content-sharing/stories/ContentSharing.stories.js b/src/elements/content-sharing/stories/ContentSharing.stories.js index f737e1bc35..7c43d3cc47 100644 --- a/src/elements/content-sharing/stories/ContentSharing.stories.js +++ b/src/elements/content-sharing/stories/ContentSharing.stories.js @@ -32,8 +32,9 @@ export default { }, }; -export const ContentSharingV2Enabled: StoryObj = { +export const ContentSharingV2Enabled: StoryObj = { args: { + children: , features: { ...global.FEATURE_FLAGS, contentSharingV2: true, diff --git a/src/elements/content-sharing/types.ts b/src/elements/content-sharing/types.ts index bbb694ae64..7a1bd79c78 100644 --- a/src/elements/content-sharing/types.ts +++ b/src/elements/content-sharing/types.ts @@ -1,9 +1,10 @@ import type { ItemType, StringMap } from '../../common/types/core'; -import type { Theme } from '../common/theming/types'; export type ContentSharingV2Props = { /** apiHost - API hostname. Defaults to https://api.box.com */ apiHost: string; + /** 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" */ @@ -16,8 +17,6 @@ export type ContentSharingV2Props = { token: string; /** hasProviders - Providers for notifications and tooltips */ hasProviders?: boolean; - /** theme - Theme for the element */ - theme?: Theme; /** uuid - Unique identifier, used for refreshing element visibility when called from the ES6 wrapper */ uuid?: string; }; From eadbc190e46dc213cbacbea1818e901ee87feacc Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 10:57:04 -0700 Subject: [PATCH 5/7] fix: remove not needed code --- src/elements/content-sharing/ContentSharingV2.tsx | 11 ++--------- src/elements/content-sharing/types.ts | 8 -------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/elements/content-sharing/ContentSharingV2.tsx b/src/elements/content-sharing/ContentSharingV2.tsx index 9dffee976f..e24c060361 100644 --- a/src/elements/content-sharing/ContentSharingV2.tsx +++ b/src/elements/content-sharing/ContentSharingV2.tsx @@ -7,14 +7,7 @@ import Providers from '../common/Providers'; import type { ContentSharingV2Props } from './types'; -function ContentSharingV2({ - children, - itemID, - itemType, - language, - messages, - hasProviders = true, -}: ContentSharingV2Props) { +function ContentSharingV2({ children, itemID, itemType, language, messages }: ContentSharingV2Props) { // Retrieve item from API later const mockItem = { id: itemID, @@ -24,7 +17,7 @@ function ContentSharingV2({ return ( - + {children} diff --git a/src/elements/content-sharing/types.ts b/src/elements/content-sharing/types.ts index 7a1bd79c78..2efb52dcc8 100644 --- a/src/elements/content-sharing/types.ts +++ b/src/elements/content-sharing/types.ts @@ -1,8 +1,6 @@ import type { ItemType, StringMap } from '../../common/types/core'; export type ContentSharingV2Props = { - /** apiHost - API hostname. Defaults to https://api.box.com */ - apiHost: string; /** children - Children for the element to open the Unified Share Modal */ children?: React.ReactElement; /** itemID - Box file or folder ID */ @@ -13,10 +11,4 @@ export type ContentSharingV2Props = { language: string; /** messages - Localized strings used by the element */ messages?: StringMap; - /** token - Valid access token */ - token: string; - /** hasProviders - Providers for notifications and tooltips */ - hasProviders?: boolean; - /** uuid - Unique identifier, used for refreshing element visibility when called from the ES6 wrapper */ - uuid?: string; }; From fa7cf77db166dbcabd13dac978d37fbdd0b16cd8 Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 11:46:07 -0700 Subject: [PATCH 6/7] fix: address comments --- .../content-sharing/ContentSharing.js | 15 ++++++++--- .../content-sharing/ContentSharingV2.tsx | 23 +++++++++++++--- .../stories/ContentSharing.stories.js | 20 +++++++------- .../stories/ContentSharingV2.stories.tsx | 17 +++--------- .../tests/ContentSharingV2-visual.stories.tsx | 27 ++++++------------- src/elements/content-sharing/types.ts | 14 ---------- 6 files changed, 53 insertions(+), 63 deletions(-) delete mode 100644 src/elements/content-sharing/types.ts diff --git a/src/elements/content-sharing/ContentSharing.js b/src/elements/content-sharing/ContentSharing.js index 9e58a25932..50663c283b 100644 --- a/src/elements/content-sharing/ContentSharing.js +++ b/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 ( - + {children} ); diff --git a/src/elements/content-sharing/ContentSharingV2.tsx b/src/elements/content-sharing/ContentSharingV2.tsx index e24c060361..5391c041f4 100644 --- a/src/elements/content-sharing/ContentSharingV2.tsx +++ b/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 ( - + {children} ); } -export { ContentSharingV2 }; +export default ContentSharingV2; diff --git a/src/elements/content-sharing/stories/ContentSharing.stories.js b/src/elements/content-sharing/stories/ContentSharing.stories.js index 7c43d3cc47..365d821f21 100644 --- a/src/elements/content-sharing/stories/ContentSharing.stories.js +++ b/src/elements/content-sharing/stories/ContentSharing.stories.js @@ -13,6 +13,16 @@ export const withCustomButton = { }, }; +export const withContentSharingV2Enabled = { + args: { + children: , + 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: , - features: { - ...global.FEATURE_FLAGS, - contentSharingV2: true, - }, - }, -}; diff --git a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx index 727812b44a..5299d6a9f5 100644 --- a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx +++ b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx @@ -1,5 +1,6 @@ -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 = {}; @@ -7,19 +8,9 @@ export default { title: 'Elements/ContentSharingV2', component: ContentSharingV2, args: { - apiHost: DEFAULT_HOSTNAME_API, - features: global.FEATURE_FLAGS, - hasProviders: true, - language: 'en', + children: , itemType: TYPE_FILE, itemID: global.FILE_ID, - messages: { - en: { - contentSharingV2: 'Content Sharing V2', - }, - }, - token: global.TOKEN, - theme: 'light', }, argTypes: { itemType: { diff --git a/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx b/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx index add7fb686d..f49a24b1dd 100644 --- a/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx +++ b/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, }, }; diff --git a/src/elements/content-sharing/types.ts b/src/elements/content-sharing/types.ts deleted file mode 100644 index 2efb52dcc8..0000000000 --- a/src/elements/content-sharing/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { ItemType, StringMap } from '../../common/types/core'; - -export type 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; -}; From 572b55f6010f76ef6464aef80e053f28da637864 Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Fri, 19 Sep 2025 12:03:49 -0700 Subject: [PATCH 7/7] fix: disable snapshot --- .../content-sharing/stories/ContentSharing.stories.js | 5 +++++ .../content-sharing/stories/ContentSharingV2.stories.tsx | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/elements/content-sharing/stories/ContentSharing.stories.js b/src/elements/content-sharing/stories/ContentSharing.stories.js index 365d821f21..c53757d03a 100644 --- a/src/elements/content-sharing/stories/ContentSharing.stories.js +++ b/src/elements/content-sharing/stories/ContentSharing.stories.js @@ -40,4 +40,9 @@ export default { control: { type: 'select' }, }, }, + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, }; diff --git a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx index 5299d6a9f5..166ca26ac5 100644 --- a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx +++ b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { TYPE_FILE, TYPE_FOLDER } from '../../../constants'; import ContentSharingV2 from '../ContentSharingV2'; -export const Basic = {}; +export const basic = {}; export default { title: 'Elements/ContentSharingV2', @@ -18,4 +18,9 @@ export default { control: { type: 'select' }, }, }, + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, };