diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.native.tsx | 17 | ||||
-rw-r--r-- | src/App.web.tsx | 9 | ||||
-rw-r--r-- | src/lib/statsig/gates.ts | 1 | ||||
-rw-r--r-- | src/screens/Onboarding/StepFinished.tsx | 4 | ||||
-rw-r--r-- | src/tours/Debug.tsx | 18 | ||||
-rw-r--r-- | src/tours/HomeTour.tsx | 93 | ||||
-rw-r--r-- | src/tours/Tooltip.tsx | 168 | ||||
-rw-r--r-- | src/tours/index.tsx | 62 | ||||
-rw-r--r-- | src/tours/positioning.ts | 23 | ||||
-rw-r--r-- | src/tours/positioning.web.ts | 27 | ||||
-rw-r--r-- | src/view/screens/Home.tsx | 10 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 25 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 11 | ||||
-rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 22 |
14 files changed, 34 insertions, 456 deletions
diff --git a/src/App.native.tsx b/src/App.native.tsx index a4282e7fb..c26052a92 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -60,7 +60,6 @@ import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' import {Provider as PortalProvider} from '#/components/Portal' import {Splash} from '#/Splash' -import {Provider as TourProvider} from '#/tours' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army' @@ -127,15 +126,13 @@ function InnerApp() { <UnreadNotifsProvider> <BackgroundNotificationPreferencesProvider> <MutedThreadsProvider> - <TourProvider> - <ProgressGuideProvider> - <GestureHandlerRootView - style={s.h100pct}> - <TestCtrls /> - <Shell /> - </GestureHandlerRootView> - </ProgressGuideProvider> - </TourProvider> + <ProgressGuideProvider> + <GestureHandlerRootView + style={s.h100pct}> + <TestCtrls /> + <Shell /> + </GestureHandlerRootView> + </ProgressGuideProvider> </MutedThreadsProvider> </BackgroundNotificationPreferencesProvider> </UnreadNotifsProvider> diff --git a/src/App.web.tsx b/src/App.web.tsx index 69a8020c2..fa1fba031 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -48,7 +48,6 @@ import {ThemeProvider as Alf} from '#/alf' import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' import {Provider as PortalProvider} from '#/components/Portal' -import {Provider as TourProvider} from '#/tours' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' function InnerApp() { @@ -111,11 +110,9 @@ function InnerApp() { <BackgroundNotificationPreferencesProvider> <MutedThreadsProvider> <SafeAreaProvider> - <TourProvider> - <ProgressGuideProvider> - <Shell /> - </ProgressGuideProvider> - </TourProvider> + <ProgressGuideProvider> + <Shell /> + </ProgressGuideProvider> </SafeAreaProvider> </MutedThreadsProvider> </BackgroundNotificationPreferencesProvider> diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts index 0f92cd14a..39594bdbf 100644 --- a/src/lib/statsig/gates.ts +++ b/src/lib/statsig/gates.ts @@ -2,7 +2,6 @@ export type Gate = // Keep this alphabetic please. | 'debug_show_feedcontext' | 'fixed_bottom_bar' - | 'new_user_guided_tour' | 'onboarding_minimum_interests' | 'show_follow_back_label_v2' | 'suggested_feeds_interstitial' diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx index 379807d8f..bc765781a 100644 --- a/src/screens/Onboarding/StepFinished.tsx +++ b/src/screens/Onboarding/StepFinished.tsx @@ -44,7 +44,6 @@ import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import {TOURS, useSetQueuedTour} from '#/tours' export function StepFinished() { const {_} = useLingui() @@ -59,7 +58,6 @@ export function StepFinished() { const activeStarterPack = useActiveStarterPack() const setActiveStarterPack = useSetActiveStarterPack() const setHasCheckedForStarterPack = useSetHasCheckedForStarterPack() - const setQueuedTour = useSetQueuedTour() const {startProgressGuide} = useProgressGuideControls() const finishOnboarding = React.useCallback(async () => { @@ -189,7 +187,6 @@ export function StepFinished() { setSaving(false) setActiveStarterPack(undefined) setHasCheckedForStarterPack(true) - setQueuedTour(TOURS.HOME) startProgressGuide('like-10-and-follow-7') dispatch({type: 'finish'}) onboardDispatch({type: 'finish'}) @@ -223,7 +220,6 @@ export function StepFinished() { requestNotificationsPermission, setActiveStarterPack, setHasCheckedForStarterPack, - setQueuedTour, startProgressGuide, ]) diff --git a/src/tours/Debug.tsx b/src/tours/Debug.tsx deleted file mode 100644 index ba643a802..000000000 --- a/src/tours/Debug.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import {useTourGuideController} from 'rn-tourguide' - -import {Button} from '#/components/Button' -import {Text} from '#/components/Typography' - -export function TourDebugButton() { - const {start} = useTourGuideController('home') - return ( - <Button - label="Start tour" - onPress={() => { - start() - }}> - {() => <Text>t</Text>} - </Button> - ) -} diff --git a/src/tours/HomeTour.tsx b/src/tours/HomeTour.tsx deleted file mode 100644 index d938fe0e0..000000000 --- a/src/tours/HomeTour.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import { - IStep, - TourGuideZone, - TourGuideZoneByPosition, - useTourGuideController, -} from 'rn-tourguide' - -import {DISCOVER_FEED_URI} from '#/lib/constants' -import {isWeb} from '#/platform/detection' -import {useSetSelectedFeed} from '#/state/shell/selected-feed' -import {TOURS} from '.' -import {useHeaderPosition} from './positioning' - -export function HomeTour() { - const {_} = useLingui() - const {tourKey, eventEmitter} = useTourGuideController(TOURS.HOME) - const setSelectedFeed = useSetSelectedFeed() - const headerPosition = useHeaderPosition() - - React.useEffect(() => { - const handleOnStepChange = (step?: IStep) => { - if (step?.order === 2) { - setSelectedFeed('following') - } else if (step?.order === 3) { - setSelectedFeed(`feedgen|${DISCOVER_FEED_URI}`) - } - } - eventEmitter?.on('stepChange', handleOnStepChange) - return () => { - eventEmitter?.off('stepChange', handleOnStepChange) - } - }, [eventEmitter, setSelectedFeed]) - - return ( - <> - <TourGuideZoneByPosition - isTourGuide - tourKey={tourKey} - zone={1} - top={headerPosition.top} - left={headerPosition.left} - width={headerPosition.width} - height={headerPosition.height} - borderRadiusObject={headerPosition.borderRadiusObject} - text={_(msg`Switch between feeds to control your experience.`)} - /> - <TourGuideZoneByPosition - isTourGuide - tourKey={tourKey} - zone={2} - top={headerPosition.top} - left={headerPosition.left} - width={headerPosition.width} - height={headerPosition.height} - borderRadiusObject={headerPosition.borderRadiusObject} - text={_(msg`Following shows the latest posts from people you follow.`)} - /> - <TourGuideZoneByPosition - isTourGuide - tourKey={tourKey} - zone={3} - top={headerPosition.top} - left={headerPosition.left} - width={headerPosition.width} - height={headerPosition.height} - borderRadiusObject={headerPosition.borderRadiusObject} - text={_(msg`Discover learns which posts you like as you browse.`)} - /> - </> - ) -} - -export function HomeTourExploreWrapper({ - children, -}: React.PropsWithChildren<{}>) { - const {_} = useLingui() - const {tourKey} = useTourGuideController(TOURS.HOME) - return ( - <TourGuideZone - tourKey={tourKey} - zone={4} - tooltipBottomOffset={50} - shape={isWeb ? 'rectangle' : 'circle'} - text={_( - msg`Find more feeds and accounts to follow in the Explore page.`, - )}> - {children} - </TourGuideZone> - ) -} diff --git a/src/tours/Tooltip.tsx b/src/tours/Tooltip.tsx deleted file mode 100644 index e7727763b..000000000 --- a/src/tours/Tooltip.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react' -import { - AccessibilityInfo, - findNodeHandle, - Pressable, - Text as RNText, - View, -} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {FocusScope} from '@tamagui/focus-scope' -import {IStep, Labels} from 'rn-tourguide' - -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import {useA11y} from '#/state/a11y' -import {Logo} from '#/view/icons/Logo' -import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' -import {leading, Text} from '#/components/Typography' - -const stopPropagation = (e: any) => e.stopPropagation() - -export interface TooltipComponentProps { - isFirstStep?: boolean - isLastStep?: boolean - currentStep: IStep - labels?: Labels - handleNext?: () => void - handlePrev?: () => void - handleStop?: () => void -} - -export function TooltipComponent({ - isLastStep, - handleNext, - handleStop, - currentStep, - labels, -}: TooltipComponentProps) { - const t = useTheme() - const {_} = useLingui() - const btnRef = React.useRef<View>(null) - const textRef = React.useRef<RNText>(null) - const {screenReaderEnabled} = useA11y() - useWebBodyScrollLock(true) - - const focusTextNode = () => { - const node = textRef.current ? findNodeHandle(textRef.current) : undefined - if (node) { - AccessibilityInfo.setAccessibilityFocus(node) - } - } - - // handle initial focus immediately on mount - React.useLayoutEffect(() => { - focusTextNode() - }, []) - - // handle focus between steps - const innerHandleNext = () => { - handleNext?.() - setTimeout(() => focusTextNode(), 200) - } - - return ( - <FocusScope loop enabled trapped> - <View - role="alert" - aria-role="alert" - aria-label={_(msg`A help tooltip`)} - accessibilityLiveRegion="polite" - // iOS - accessibilityViewIsModal - // Android - importantForAccessibility="yes" - // @ts-ignore web only - onClick={stopPropagation} - onStartShouldSetResponder={_ => true} - onTouchEnd={stopPropagation} - style={[ - t.atoms.bg, - a.px_lg, - a.py_lg, - a.flex_col, - a.gap_md, - a.rounded_sm, - a.shadow_md, - {maxWidth: 300}, - ]}> - {screenReaderEnabled && ( - <Pressable - style={[ - a.absolute, - a.inset_0, - a.z_10, - {height: 10, bottom: 'auto'}, - ]} - accessibilityLabel={_( - msg`Start of onboarding tour window. Do not move backward. Instead, go forward for more options, or press to skip.`, - )} - accessibilityHint={undefined} - onPress={handleStop} - /> - )} - - <View style={[a.flex_row, a.align_center, a.gap_sm]}> - <Logo width={16} style={{position: 'relative', top: 0}} /> - <Text - accessible={false} - style={[a.text_sm, a.font_semibold, t.atoms.text_contrast_medium]}> - <Trans>Quick tip</Trans> - </Text> - </View> - <RNText - ref={textRef} - testID="stepDescription" - accessibilityLabel={_( - msg`Onboarding tour step ${currentStep.name}: ${currentStep.text}`, - )} - accessibilityHint={undefined} - style={[ - a.text_md, - t.atoms.text, - a.pb_sm, - { - lineHeight: leading(a.text_md, a.leading_snug), - }, - ]}> - {currentStep.text} - </RNText> - {!isLastStep ? ( - <Button - ref={btnRef} - variant="gradient" - color="gradient_sky" - size="medium" - onPress={innerHandleNext} - label={labels?.next || _(msg`Go to the next step of the tour`)}> - <ButtonText>{labels?.next || _(msg`Next`)}</ButtonText> - </Button> - ) : ( - <Button - variant="gradient" - color="gradient_sky" - size="medium" - onPress={handleStop} - label={ - labels?.finish || - _(msg`Finish tour and begin using the application`) - }> - <ButtonText>{labels?.finish || _(msg`Let's go!`)}</ButtonText> - </Button> - )} - - {screenReaderEnabled && ( - <Pressable - style={[a.absolute, a.inset_0, a.z_10, {height: 10, top: 'auto'}]} - accessibilityLabel={_( - msg`End of onboarding tour window. Do not move forward. Instead, go backward for more options, or press to skip.`, - )} - accessibilityHint={undefined} - onPress={handleStop} - /> - )} - </View> - </FocusScope> - ) -} diff --git a/src/tours/index.tsx b/src/tours/index.tsx deleted file mode 100644 index 8d4ca26b8..000000000 --- a/src/tours/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react' -import {InteractionManager} from 'react-native' -import {TourGuideProvider, useTourGuideController} from 'rn-tourguide' - -import {useGate} from '#/lib/statsig/statsig' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' -import {HomeTour} from './HomeTour' -import {TooltipComponent} from './Tooltip' - -export enum TOURS { - HOME = 'home', -} - -type StateContext = TOURS | null -type SetContext = (v: TOURS | null) => void - -const stateContext = React.createContext<StateContext>(null) -const setContext = React.createContext<SetContext>((_: TOURS | null) => {}) - -export function Provider({children}: React.PropsWithChildren<{}>) { - const theme = useColorModeTheme() - const [state, setState] = React.useState<TOURS | null>(() => null) - - return ( - <TourGuideProvider - androidStatusBarVisible - tooltipComponent={TooltipComponent} - backdropColor={ - theme === 'light' ? 'rgba(0, 0, 0, 0.15)' : 'rgba(0, 0, 0, 0.8)' - } - preventOutsideInteraction> - <stateContext.Provider value={state}> - <setContext.Provider value={setState}> - <HomeTour /> - {children} - </setContext.Provider> - </stateContext.Provider> - </TourGuideProvider> - ) -} - -export function useTriggerTourIfQueued(tour: TOURS) { - const {start} = useTourGuideController(tour) - const setQueuedTour = React.useContext(setContext) - const queuedTour = React.useContext(stateContext) - const gate = useGate() - - return React.useCallback(() => { - if (queuedTour === tour) { - setQueuedTour(null) - InteractionManager.runAfterInteractions(() => { - if (gate('new_user_guided_tour')) { - start() - } - }) - } - }, [tour, queuedTour, setQueuedTour, start, gate]) -} - -export function useSetQueuedTour() { - return React.useContext(setContext) -} diff --git a/src/tours/positioning.ts b/src/tours/positioning.ts deleted file mode 100644 index 03d61f53f..000000000 --- a/src/tours/positioning.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {useWindowDimensions} from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' - -import {useShellLayout} from '#/state/shell/shell-layout' - -export function useHeaderPosition() { - const {headerHeight} = useShellLayout() - const {width} = useWindowDimensions() - const insets = useSafeAreaInsets() - - return { - top: insets.top, - left: 10, - width: width - 20, - height: headerHeight.value, - borderRadiusObject: { - topLeft: 4, - topRight: 4, - bottomLeft: 4, - bottomRight: 4, - }, - } -} diff --git a/src/tours/positioning.web.ts b/src/tours/positioning.web.ts deleted file mode 100644 index fd0f7aa71..000000000 --- a/src/tours/positioning.web.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {useWindowDimensions} from 'react-native' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useShellLayout} from '#/state/shell/shell-layout' - -export function useHeaderPosition() { - const {headerHeight} = useShellLayout() - const winDim = useWindowDimensions() - const {isMobile} = useWebMediaQueries() - - let left = 0 - let width = winDim.width - if (width > 590 && !isMobile) { - left = winDim.width / 2 - 295 - width = 590 - } - - let offset = isMobile ? 45 : 0 - - return { - top: headerHeight.value - offset, - left, - width, - height: 45, - borderRadiusObject: undefined, - } -} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index af424428d..92599546d 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -29,7 +29,6 @@ import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed' import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' -import {TOURS, useTriggerTourIfQueued} from '#/tours' import {HomeHeader} from '../com/home/HomeHeader' type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home' | 'Start'> @@ -88,7 +87,6 @@ function HomeScreenReady({ const selectedIndex = Math.max(0, maybeFoundIndex) const selectedFeed = allFeeds[selectedIndex] const requestNotificationsPermission = useRequestNotificationsPermission() - const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME) const gate = useGate() useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName) @@ -141,16 +139,10 @@ function HomeScreenReady({ React.useCallback(() => { setMinimalShellMode(false) setDrawerSwipeDisabled(selectedIndex > 0) - triggerTourIfQueued() return () => { setDrawerSwipeDisabled(false) } - }, [ - setDrawerSwipeDisabled, - selectedIndex, - setMinimalShellMode, - triggerTourIfQueued, - ]), + }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]), ) useFocusEffect( diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 80886b320..b5ad92b4c 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -45,7 +45,6 @@ import { Message_Stroke2_Corner0_Rounded as Message, Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, } from '#/components/icons/Message' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {styles} from './BottomBarStyles' type TabOptions = @@ -163,19 +162,17 @@ export function BottomBar({navigation}: BottomTabBarProps) { <Btn testID="bottomBarSearchBtn" icon={ - <HomeTourExploreWrapper> - {isAtSearch ? ( - <MagnifyingGlassFilled - width={iconWidth + 2} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - /> - ) : ( - <MagnifyingGlass - width={iconWidth + 2} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - /> - )} - </HomeTourExploreWrapper> + isAtSearch ? ( + <MagnifyingGlassFilled + width={iconWidth + 2} + style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + /> + ) : ( + <MagnifyingGlass + width={iconWidth + 2} + style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + /> + ) } onPress={onPressSearch} accessibilityRole="search" diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index c89d2a63c..21c253ee0 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -41,7 +41,6 @@ import { UserCircle_Filled_Corner0_Rounded as UserCircleFilled, UserCircle_Stroke2_Corner0_Rounded as UserCircle, } from '#/components/icons/UserCircle' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {styles} from './BottomBarStyles' export function BottomBarWeb() { @@ -95,12 +94,10 @@ export function BottomBarWeb() { {({isActive}) => { const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass return ( - <HomeTourExploreWrapper> - <Icon - width={iconWidth + 2} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - /> - </HomeTourExploreWrapper> + <Icon + width={iconWidth + 2} + style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + /> ) }} </NavItem> diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 49fb7fc99..ca8073f57 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -63,7 +63,6 @@ import { UserCircle_Filled_Corner0_Rounded as UserCircleFilled, UserCircle_Stroke2_Corner0_Rounded as UserCircle, } from '#/components/icons/UserCircle' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {router} from '../../../routes' const NAV_ICON_WIDTH = 28 @@ -341,19 +340,14 @@ export function DesktopLeftNav() { iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />} label={_(msg`Home`)} /> - <HomeTourExploreWrapper> - <NavItem - href="/search" - icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />} - iconFilled={ - <MagnifyingGlassFilled - style={pal.text} - width={NAV_ICON_WIDTH} - /> - } - label={_(msg`Search`)} - /> - </HomeTourExploreWrapper> + <NavItem + href="/search" + icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />} + iconFilled={ + <MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} /> + } + label={_(msg`Search`)} + /> <NavItem href="/notifications" count={numUnreadNotifications} |