diff --git a/packages/shared/src/components/CustomFeedOptionsMenu.spec.tsx b/packages/shared/src/components/CustomFeedOptionsMenu.spec.tsx new file mode 100644 index 00000000000..dc3c3e430c0 --- /dev/null +++ b/packages/shared/src/components/CustomFeedOptionsMenu.spec.tsx @@ -0,0 +1,70 @@ +import type { ComponentProps } from 'react'; +import React from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { fireEvent, render, screen } from '@testing-library/react'; +import CustomFeedOptionsMenu from './CustomFeedOptionsMenu'; +import AuthContext from '../contexts/AuthContext'; +import type { AuthContextData } from '../contexts/AuthContext'; + +jest.mock('../hooks', () => ({ + ...jest.requireActual('../hooks'), + useFeeds: () => ({ feeds: { edges: [] } }), +})); + +const shareProps = { + text: "Check out Ido Shamun's profile on daily.dev", + link: 'https://app.daily.dev/idoshamun', +}; + +const renderMenu = ( + props: Partial> = {}, +) => { + const client = new QueryClient({ + defaultOptions: { queries: { retry: false, gcTime: 0 } }, + }); + + return render( + + + + + , + ); +}; + +describe('CustomFeedOptionsMenu', () => { + it('should list the share option by default', async () => { + renderMenu({ shareProps }); + + // Radix opens the menu on keydown; jsdom lacks the pointer-event support + // its click path relies on. + fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' }); + + expect(await screen.findByText('Share')).toBeInTheDocument(); + expect(screen.getByText('Add to custom feed')).toBeInTheDocument(); + }); + + it('should drop the share option when the surface promotes it elsewhere', async () => { + renderMenu({ shareProps, hideShare: true }); + + // Radix opens the menu on keydown; jsdom lacks the pointer-event support + // its click path relies on. + fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' }); + + expect(await screen.findByText('Add to custom feed')).toBeInTheDocument(); + expect(screen.queryByText('Share')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/shared/src/components/CustomFeedOptionsMenu.tsx b/packages/shared/src/components/CustomFeedOptionsMenu.tsx index f4bc4b9bd64..71459bdc71d 100644 --- a/packages/shared/src/components/CustomFeedOptionsMenu.tsx +++ b/packages/shared/src/components/CustomFeedOptionsMenu.tsx @@ -28,6 +28,8 @@ type CustomFeedOptionsMenuProps = { buttonVariant?: ButtonVariant; shareProps: UseShareOrCopyLinkProps; additionalOptions?: MenuItemProps[]; + /** Drop the in-menu share entry when the surface renders a visible one. */ + hideShare?: boolean; }; const CustomFeedOptionsMenu = ({ @@ -38,6 +40,7 @@ const CustomFeedOptionsMenu = ({ onCreateNewFeed, additionalOptions = [], buttonVariant = ButtonVariant.Float, + hideShare = false, }: CustomFeedOptionsMenuProps): ReactElement => { const { openModal } = useLazyModal(); const [, onShareOrCopyLink] = useShareOrCopyLink(shareProps); @@ -59,11 +62,15 @@ const CustomFeedOptionsMenu = ({ }; const options: MenuItemProps[] = [ - { - icon: , - label: 'Share', - action: () => onShareOrCopyLink(), - }, + ...(hideShare + ? [] + : [ + { + icon: , + label: 'Share', + action: () => onShareOrCopyLink(), + }, + ]), { icon: , label: 'Add to custom feed', diff --git a/packages/shared/src/components/profile/Header.tsx b/packages/shared/src/components/profile/Header.tsx index bfc29ef27a9..49708e3d399 100644 --- a/packages/shared/src/components/profile/Header.tsx +++ b/packages/shared/src/components/profile/Header.tsx @@ -45,6 +45,8 @@ import { import Link from '../utilities/Link'; import type { MenuItemProps } from '../dropdown/common'; import { ProfileMobileBackButton } from './ProfileBackButton'; +import { ProfileShareButton } from './ProfileShareButton'; +import { useShareProfileEnabled } from '../../hooks/profile/useShareProfileEnabled'; export interface HeaderProps { user: PublicProfile; @@ -83,6 +85,7 @@ export function Header({ }); const hasCoresAccess = useHasAccessToCores(); const canPurchaseCores = useCanPurchaseCores(); + const isShareEnabled = useShareProfileEnabled(); const onReportUser = React.useCallback( (defaultBlocked = false) => { @@ -218,6 +221,17 @@ export function Header({ variant={ButtonVariant.Float} /> )} + {/* Only while pinned: unpinned, the profile card right below owns the + share control, and two identical copy buttons on one screen read as + a mistake. `ml-1` keeps this utility icon out of the Follow group. */} + {isShareEnabled && sticky && ( + + )} {!isSameUser && ( @@ -241,6 +255,9 @@ export function Header({ `/feeds/new?entityId=${user.id}&entityType=${ContentPreferenceType.User}`, ) } + // Promoted out of the menu into a dedicated control when the + // share-profile experiment is on. + hideShare={isShareEnabled} shareProps={{ text: `Check out ${user.name}'s profile on daily.dev`, link: user.permalink, diff --git a/packages/shared/src/components/profile/ProfileActions.tsx b/packages/shared/src/components/profile/ProfileActions.tsx index d81d537948d..04892c8fe0c 100644 --- a/packages/shared/src/components/profile/ProfileActions.tsx +++ b/packages/shared/src/components/profile/ProfileActions.tsx @@ -37,6 +37,7 @@ import { AwardButton } from '../award/AwardButton'; import { Tooltip } from '../tooltip/Tooltip'; import { useAuthContext } from '../../contexts/AuthContext'; import { useCanAwardUser } from '../../hooks/useCoresFeature'; +import { useShareProfileEnabled } from '../../hooks/profile/useShareProfileEnabled'; import type { MenuItemProps } from '../dropdown/common'; export interface HeaderProps { @@ -59,6 +60,7 @@ const ProfileActions = ({ user, isPreviewMode }: HeaderProps): ReactElement => { sendingUser: loggedUser, receivingUser: user as LoggedUser, }); + const isShareEnabled = useShareProfileEnabled(); const onReportUser = React.useCallback( (defaultBlocked = false) => { @@ -195,6 +197,9 @@ const ProfileActions = ({ user, isPreviewMode }: HeaderProps): ReactElement => { `/feeds/new?entityId=${user.id}&entityType=${ContentPreferenceType.User}`, ) } + // Promoted out of the menu into the header's share control when the + // share-profile experiment is on. + hideShare={isShareEnabled} shareProps={{ text: `Check out ${user.name}'s profile on daily.dev`, link: user.permalink, diff --git a/packages/shared/src/components/profile/ProfileHeader.spec.tsx b/packages/shared/src/components/profile/ProfileHeader.spec.tsx new file mode 100644 index 00000000000..13e44192892 --- /dev/null +++ b/packages/shared/src/components/profile/ProfileHeader.spec.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { render, screen } from '@testing-library/react'; +import ProfileHeader from './ProfileHeader'; +import AuthContext from '../../contexts/AuthContext'; +import type { AuthContextData } from '../../contexts/AuthContext'; +import { getLogContextStatic } from '../../contexts/LogContext'; +import type { PublicProfile } from '../../lib/user'; +import { useConditionalFeature } from '../../hooks/useConditionalFeature'; + +jest.mock('../../hooks/useConditionalFeature'); +jest.mock('./ProfileActions', () => ({ + __esModule: true, + default: () =>
, +})); + +const mockUseConditionalFeature = jest.mocked(useConditionalFeature); + +const user = { + id: 'u1', + name: 'Ido Shamun', + username: 'idoshamun', + permalink: 'https://app.daily.dev/idoshamun', + reputation: 10, + createdAt: '2020-01-01T00:00:00.000Z', + bio: 'Building daily.dev', + image: 'https://daily.dev/image.jpg', + cover: 'https://daily.dev/cover.jpg', +} as PublicProfile; + +const userStats = { upvotes: 1, numFollowers: 2, numFollowing: 3 }; + +const renderHeader = (isSameUser: boolean) => { + const client = new QueryClient({ + defaultOptions: { queries: { retry: false, gcTime: 0 } }, + }); + const LogContext = getLogContextStatic(); + + return render( + + + false, + }} + > + + + + , + ); +}; + +describe('ProfileHeader share control', () => { + beforeEach(() => jest.clearAllMocks()); + + describe('when the flag is off', () => { + beforeEach(() => { + mockUseConditionalFeature.mockReturnValue({ + value: false, + isLoading: false, + }); + }); + + it('should not render a share control on a public profile', () => { + renderHeader(false); + + expect(screen.queryByLabelText(/Share/)).not.toBeInTheDocument(); + }); + + it('should keep the invisible edit placeholder on a public profile', () => { + renderHeader(false); + + expect(screen.getByLabelText('Edit profile')).toHaveClass('invisible'); + }); + + it('should keep the edit button on the owner profile', () => { + renderHeader(true); + + expect(screen.getByLabelText('Edit profile')).not.toHaveClass( + 'invisible', + ); + expect(screen.queryByLabelText(/Share/)).not.toBeInTheDocument(); + }); + }); + + describe('when the flag is on', () => { + beforeEach(() => { + mockUseConditionalFeature.mockReturnValue({ + value: true, + isLoading: false, + }); + }); + + it('should fill the edit slot with the share control on a public profile', () => { + renderHeader(false); + + expect( + screen.getByLabelText("Share @idoshamun's profile"), + ).toBeInTheDocument(); + expect(screen.queryByLabelText('Edit profile')).not.toBeInTheDocument(); + }); + + it('should sit next to the edit button on the owner profile', () => { + renderHeader(true); + + expect(screen.getByLabelText('Share your profile')).toBeInTheDocument(); + expect(screen.getByLabelText('Edit profile')).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx index 24a3ae432e9..41bf8cf1688 100644 --- a/packages/shared/src/components/profile/ProfileHeader.tsx +++ b/packages/shared/src/components/profile/ProfileHeader.tsx @@ -23,6 +23,8 @@ import { locationToString } from '../../lib/utils'; import { IconSize } from '../Icon'; import { fallbackImages } from '../../lib/config'; import { ProfileDesktopPwaBackButton } from './ProfileBackButton'; +import { ProfileShareButton } from './ProfileShareButton'; +import { useShareProfileEnabled } from '../../hooks/profile/useShareProfileEnabled'; import { ElementPlaceholder } from '../ElementPlaceholder'; @@ -61,6 +63,7 @@ const ProfileHeader = ({ const { name, username, bio, image, cover, isPlus } = user; const { user: loggedUser } = useAuthContext(); const isSameUser = propIsSameUser ?? loggedUser?.id === user.id; + const isShareEnabled = useShareProfileEnabled(); return (
@@ -75,19 +78,28 @@ const ProfileHeader = ({ className="absolute left-6 top-16 h-[7.5rem] w-[7.5rem] rounded-16 object-cover" />
- -
{name} diff --git a/packages/shared/src/components/profile/ProfileShareButton.spec.tsx b/packages/shared/src/components/profile/ProfileShareButton.spec.tsx new file mode 100644 index 00000000000..868df573aa0 --- /dev/null +++ b/packages/shared/src/components/profile/ProfileShareButton.spec.tsx @@ -0,0 +1,158 @@ +import React from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { ProfileShareButton } from './ProfileShareButton'; +import { getLogContextStatic } from '../../contexts/LogContext'; +import AuthContext from '../../contexts/AuthContext'; +import type { AuthContextData } from '../../contexts/AuthContext'; +import type { PublicProfile } from '../../lib/user'; +import { TOAST_NOTIF_KEY } from '../../hooks/useToastNotification'; +import type { ToastNotification } from '../../hooks/useToastNotification'; +import { shouldUseNativeShare } from '../../lib/func'; +import { useViewSize } from '../../hooks/useViewSize'; +import { LogEvent } from '../../lib/log'; +import { ShareProvider } from '../../lib/share'; + +jest.mock('../../lib/func', () => ({ + ...jest.requireActual('../../lib/func'), + shouldUseNativeShare: jest.fn(), +})); + +jest.mock('../../hooks/useViewSize', () => ({ + ...jest.requireActual('../../hooks/useViewSize'), + useViewSize: jest.fn(), +})); + +const mockShouldUseNativeShare = jest.mocked(shouldUseNativeShare); +const mockUseViewSize = jest.mocked(useViewSize); + +const user = { + id: 'u1', + name: 'Ido Shamun', + username: 'idoshamun', + permalink: 'https://app.daily.dev/idoshamun', +} as PublicProfile; + +const logEvent = jest.fn(); +const writeText = jest.fn().mockResolvedValue(undefined); + +const setupButton = ( + props: Partial> = {}, +) => { + const client = new QueryClient({ + defaultOptions: { queries: { retry: false, gcTime: 0 } }, + }); + const LogContext = getLogContextStatic(); + + render( + + + false, + }} + > + + + + , + ); + + return client; +}; + +describe('ProfileShareButton', () => { + beforeEach(() => { + jest.clearAllMocks(); + mockUseViewSize.mockReturnValue(false); + mockShouldUseNativeShare.mockReturnValue(false); + Object.defineProperty(globalThis.navigator, 'clipboard', { + configurable: true, + value: { writeText }, + }); + }); + + it('should label the control for the profile being shared', () => { + setupButton(); + + expect( + screen.getByLabelText("Share @idoshamun's profile"), + ).toBeInTheDocument(); + }); + + it('should label the control for the logged-in owner', () => { + setupButton({ isSameUser: true }); + + expect(screen.getByLabelText('Share your profile')).toBeInTheDocument(); + }); + + it('should copy the profile link and toast on mobile without native share', async () => { + const client = setupButton(); + + await userEvent.click(screen.getByLabelText("Share @idoshamun's profile")); + + await waitFor(() => + expect(writeText).toHaveBeenCalledWith('https://app.daily.dev/idoshamun'), + ); + await waitFor(() => { + const toast = client.getQueryData(TOAST_NOTIF_KEY); + expect(toast?.message).toEqual('✅ Copied link to clipboard'); + }); + expect(logEvent).toHaveBeenCalledWith( + expect.objectContaining({ + event_name: LogEvent.ShareProfile, + target_id: 'u1', + extra: expect.stringContaining(ShareProvider.CopyLink), + }), + ); + }); + + it('should open the native share sheet on mobile when available', async () => { + mockShouldUseNativeShare.mockReturnValue(true); + const share = jest.fn().mockResolvedValue(undefined); + Object.defineProperty(globalThis.navigator, 'share', { + configurable: true, + value: share, + }); + + setupButton(); + + await userEvent.click(screen.getByLabelText("Share @idoshamun's profile")); + + await waitFor(() => + expect(share).toHaveBeenCalledWith({ + text: "Check out Ido Shamun's profile on daily.dev\nhttps://app.daily.dev/idoshamun", + }), + ); + expect(writeText).not.toHaveBeenCalled(); + expect(logEvent).toHaveBeenCalledWith( + expect.objectContaining({ + event_name: LogEvent.ShareProfile, + extra: expect.stringContaining(ShareProvider.Native), + }), + ); + }); + + it('should reveal the share network list on desktop', async () => { + mockUseViewSize.mockReturnValue(true); + setupButton(); + + await userEvent.click(screen.getByLabelText("Share @idoshamun's profile")); + + expect(await screen.findByText('Copy link')).toBeInTheDocument(); + expect(screen.getByText('LinkedIn')).toBeInTheDocument(); + }); +}); diff --git a/packages/shared/src/components/profile/ProfileShareButton.tsx b/packages/shared/src/components/profile/ProfileShareButton.tsx new file mode 100644 index 00000000000..eee73ffadc4 --- /dev/null +++ b/packages/shared/src/components/profile/ProfileShareButton.tsx @@ -0,0 +1,60 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import { ShareActions } from '../share/ShareActions'; +import { ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ReferralCampaignKey } from '../../lib/referral'; +import { LogEvent, Origin, TargetType } from '../../lib/log'; +import { useLogContext } from '../../contexts/LogContext'; +import type { PublicProfile } from '../../lib/user'; +import type { ShareProvider } from '../../lib/share'; + +export interface ProfileShareButtonProps { + user: PublicProfile; + isSameUser?: boolean; + buttonSize?: ButtonSize; + buttonVariant?: ButtonVariant; + className?: string; +} + +/** + * Copy/share control for a profile. Wraps the shared `ShareActions` primitive + * so every profile surface ships the same share text, referral campaign and + * analytics payload. + */ +export function ProfileShareButton({ + user, + isSameUser, + buttonSize = ButtonSize.Medium, + buttonVariant = ButtonVariant.Float, + className, +}: ProfileShareButtonProps): ReactElement { + const { logEvent } = useLogContext(); + const text = isSameUser + ? 'Check out my profile on daily.dev' + : `Check out ${user.name}'s profile on daily.dev`; + const label = isSameUser + ? 'Share your profile' + : `Share @${user.username}'s profile`; + + const onShare = (provider: ShareProvider) => + logEvent({ + event_name: LogEvent.ShareProfile, + target_id: user.id, + target_type: TargetType.ProfilePage, + extra: JSON.stringify({ provider, origin: Origin.Profile }), + }); + + return ( + + ); +} diff --git a/packages/shared/src/hooks/profile/useShareProfileEnabled.spec.tsx b/packages/shared/src/hooks/profile/useShareProfileEnabled.spec.tsx new file mode 100644 index 00000000000..dea6c80e8c3 --- /dev/null +++ b/packages/shared/src/hooks/profile/useShareProfileEnabled.spec.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { renderHook } from '@testing-library/react'; +import { QueryClient } from '@tanstack/react-query'; +import { useShareProfileEnabled } from './useShareProfileEnabled'; +import { useConditionalFeature } from '../useConditionalFeature'; +import type { Feature } from '../../lib/featureManagement'; +import { + featureSharingVisibility, + featureShareProfile, +} from '../../lib/featureManagement'; +import { TestBootProvider } from '../../../__tests__/helpers/boot'; + +jest.mock('../useConditionalFeature', () => ({ + useConditionalFeature: jest.fn(), +})); + +const conditionalFeatureMock = useConditionalFeature as jest.Mock; +const evaluated: string[] = []; + +const mockFlags = (flags: Record) => + conditionalFeatureMock.mockImplementation( + ({ + feature, + shouldEvaluate, + }: { + feature: Feature; + shouldEvaluate?: boolean; + }) => { + if (shouldEvaluate !== false) { + evaluated.push(feature.id); + } + + return { + value: + shouldEvaluate === false ? feature.defaultValue : flags[feature.id], + isLoading: false, + }; + }, + ); + +const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +beforeEach(() => { + jest.clearAllMocks(); + evaluated.length = 0; +}); + +describe('useShareProfileEnabled', () => { + it('is off while the sharing-visibility kill switch is off', () => { + mockFlags({ + [featureSharingVisibility.id]: false, + [featureShareProfile.id]: true, + }); + + const { result } = renderHook(() => useShareProfileEnabled(), { + wrapper, + }); + + expect(result.current).toBe(false); + // The per-topic flag must not be evaluated for control users. + expect(evaluated).not.toContain(featureShareProfile.id); + }); + + it('is off when the per-topic flag is off', () => { + mockFlags({ + [featureSharingVisibility.id]: true, + [featureShareProfile.id]: false, + }); + + const { result } = renderHook(() => useShareProfileEnabled(), { + wrapper, + }); + + expect(result.current).toBe(false); + }); + + it('is on only when both flags are on', () => { + mockFlags({ + [featureSharingVisibility.id]: true, + [featureShareProfile.id]: true, + }); + + const { result } = renderHook(() => useShareProfileEnabled(), { + wrapper, + }); + + expect(result.current).toBe(true); + }); + + it('never evaluates anything when the caller opts out', () => { + mockFlags({ + [featureSharingVisibility.id]: true, + [featureShareProfile.id]: true, + }); + + const { result } = renderHook(() => useShareProfileEnabled(false), { + wrapper, + }); + + expect(result.current).toBe(false); + expect(evaluated).toHaveLength(0); + }); +}); diff --git a/packages/shared/src/hooks/profile/useShareProfileEnabled.ts b/packages/shared/src/hooks/profile/useShareProfileEnabled.ts new file mode 100644 index 00000000000..73e464a2bec --- /dev/null +++ b/packages/shared/src/hooks/profile/useShareProfileEnabled.ts @@ -0,0 +1,18 @@ +import { featureShareProfile } from '../../lib/featureManagement'; +import { useConditionalFeature } from '../useConditionalFeature'; +import { useSharingVisibility } from '../useSharingVisibility'; + +// Gate for the profile share affordance. It has to pass both the per-topic +// `share_profile` flag and the initiative-wide `sharing_visibility` +// kill-switch, and every profile surface needs the same answer, so the pair is +// resolved in one place. The per-topic flag is only evaluated once the master +// passes, so control users never get bucketed into the experiment. +export const useShareProfileEnabled = (shouldEvaluate = true): boolean => { + const { isEnabled: isSharingVisible } = useSharingVisibility(shouldEvaluate); + const { value } = useConditionalFeature({ + feature: featureShareProfile, + shouldEvaluate: shouldEvaluate && isSharingVisible, + }); + + return isSharingVisible && value; +}; diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts index 97b38cbdd2b..d1f6c71eb2a 100644 --- a/packages/shared/src/lib/featureManagement.ts +++ b/packages/shared/src/lib/featureManagement.ts @@ -308,3 +308,10 @@ export const featureSharingVisibility = new Feature( // high-traffic icon, so it ramps on its own flag to watch share/copy metrics. // Keep the default `false` (control = existing `LinkIcon`). export const featureShareCopyIcon = new Feature('share_copy_icon', false); + +// Surfaces a copy/share control on the profile header (own profile next to +// "Edit profile", public profiles in the otherwise-empty edit slot) and +// promotes the share action out of the "..." options menu. Also gated by the +// `sharing_visibility` master flag. Keep the default `false` — GrowthBook ramps +// it. +export const featureShareProfile = new Feature('share_profile', false); diff --git a/packages/storybook/stories/components/ProfileShareButton.stories.tsx b/packages/storybook/stories/components/ProfileShareButton.stories.tsx new file mode 100644 index 00000000000..756551dbd1b --- /dev/null +++ b/packages/storybook/stories/components/ProfileShareButton.stories.tsx @@ -0,0 +1,207 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { expect, fn, userEvent, waitFor, within } from 'storybook/test'; +import ProfileHeader from '@dailydotdev/shared/src/components/profile/ProfileHeader'; +import { ProfileShareButton } from '@dailydotdev/shared/src/components/profile/ProfileShareButton'; +import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext'; +import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext'; +import { + FeaturesReadyContext, + GrowthBookProvider, +} from '@dailydotdev/shared/src/components/GrowthBookProvider'; +import { BootApp } from '@dailydotdev/shared/src/lib/boot'; +import { getShortLinkProps } from '@dailydotdev/shared/src/hooks/utils/useGetShortUrl'; +import { ReferralCampaignKey } from '@dailydotdev/shared/src/lib/referral'; +import type { + LoggedUser, + PublicProfile as PublicProfileType, +} from '@dailydotdev/shared/src/lib/user'; + +const mockUser = { + id: 'u1', + name: 'Ido Shamun', + username: 'idoshamun', + email: 'ido@daily.dev', + image: 'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg', + providers: ['google'], + createdAt: '2020-01-01T00:00:00.000Z', + permalink: 'https://app.daily.dev/idoshamun', +} as unknown as LoggedUser; + +const profile = { + ...mockUser, + bio: 'Co-founder of daily.dev. Building the homepage millions of developers open every morning.', + cover: + 'https://media.daily.dev/image/upload/f_auto,q_auto/v1/placeholders/cover', + reputation: 4210, + isPlus: true, +} as unknown as PublicProfileType; + +const userStats = { upvotes: 1240, numFollowers: 8300, numFollowing: 210 }; + +const SHORT_LINK = 'https://dly.to/abc123'; + +// Storybook aliases `@growthbook/growthbook` to a mock whose `getFeatureValue` +// coerces every falsy default to the truthy string `'control'`, so a flag can't +// be evaluated as `false` here. Flag-off is therefore simulated by holding the +// features context as "not ready", which is the exact path +// `useConditionalFeature` takes to fall back to the (false) default value. +const withProviders = + (enabled: boolean) => + (Story: React.ComponentType): React.ReactElement => { + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false, staleTime: Infinity } }, + }); + + const { queryKey } = getShortLinkProps( + profile.permalink, + ReferralCampaignKey.ShareProfile, + mockUser, + ); + queryClient.setQueryData(queryKey, SHORT_LINK); + + const LogContext = getLogContextStatic(); + + return ( + + + + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + feature.defaultValue as any, + }} + > + false, + }} + > +
+ +
+ + + + + + ); + }; + +const meta: Meta = { + title: 'Components/Share/ProfileShareButton', + component: ProfileShareButton, + args: { user: profile }, + parameters: { + docs: { + description: { + component: + 'Profile copy/share control built on the shared `ShareActions` primitive. Gated by the `share_profile` flag plus the `sharing_visibility` master flag. On the owner profile it sits next to "Edit profile"; on public profiles it fills the slot the edit button leaves empty, well away from Follow so the two intents never read as one control group.', + }, + }, + }, + decorators: [withProviders(true)], +}; + +export default meta; + +type Story = StoryObj; + +// Public profile: the label names whose profile is being shared. +export const OnPublicProfile: Story = {}; + +// Owner profile: first-person label, same control. +export const OwnProfile: Story = { + args: { isSameUser: true }, +}; + +// Desktop: clicking the trigger reveals the full share network list. +export const NetworkList: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement.ownerDocument.body); + await userEvent.click( + within(canvasElement).getByLabelText("Share @idoshamun's profile"), + ); + await waitFor(() => expect(canvas.getByText('LinkedIn')).toBeVisible()); + }, +}; + +// Copying state: the copy chip flips to "Copied!" for a beat. The clipboard is +// stubbed because the Storybook iframe isn't allowed to write to the real one. +export const Copying: Story = { + play: async ({ canvasElement }) => { + Object.defineProperty(globalThis.navigator, 'clipboard', { + configurable: true, + value: { writeText: async () => undefined }, + }); + + const canvas = within(canvasElement.ownerDocument.body); + await userEvent.click( + within(canvasElement).getByLabelText("Share @idoshamun's profile"), + ); + await userEvent.click(await canvas.findByTestId('social-share-Copy link')); + await waitFor(() => expect(canvas.getByText('Copied!')).toBeInTheDocument()); + }, +}; + +type HeaderStory = StoryObj; + +const headerMeta = { + render: (args: React.ComponentProps) => ( + + ), +}; + +// The control in place on a public profile header — it takes over the slot the +// (inapplicable) edit button used to reserve. +export const InPublicHeader: HeaderStory = { + ...headerMeta, + args: { user: profile, userStats, isSameUser: false }, + decorators: [withProviders(true)], +}; + +// The control in place on the owner's header, alongside "Edit profile". +export const InOwnHeader: HeaderStory = { + ...headerMeta, + args: { user: profile, userStats, isSameUser: true }, + decorators: [withProviders(true)], +}; + +// Flag off — the header must render exactly what ships today: an invisible +// edit-button placeholder on public profiles, no share control anywhere. +export const HeaderControl: HeaderStory = { + ...headerMeta, + args: { user: profile, userStats, isSameUser: false }, + decorators: [withProviders(false)], +};