diff --git a/.changeset/chubby-things-search.md b/.changeset/chubby-things-search.md new file mode 100644 index 00000000..e229cb2c --- /dev/null +++ b/.changeset/chubby-things-search.md @@ -0,0 +1,7 @@ +--- +'@youversion/platform-react-hooks': patch +'@youversion/platform-react-ui': patch +'@youversion/platform-core': patch +--- + +Fix broken bible reader when auth is disabled. diff --git a/packages/hooks/src/context/YouVersionContext.tsx b/packages/hooks/src/context/YouVersionContext.tsx index 7a6a57aa..9bdae246 100644 --- a/packages/hooks/src/context/YouVersionContext.tsx +++ b/packages/hooks/src/context/YouVersionContext.tsx @@ -7,6 +7,7 @@ type YouVersionContextData = { apiHost?: string; installationId?: string; theme?: 'light' | 'dark'; + authEnabled?: boolean; }; export const YouVersionContext = createContext(null); diff --git a/packages/hooks/src/context/YouVersionProvider.tsx b/packages/hooks/src/context/YouVersionProvider.tsx index ebfa4723..1cafb26e 100644 --- a/packages/hooks/src/context/YouVersionProvider.tsx +++ b/packages/hooks/src/context/YouVersionProvider.tsx @@ -49,6 +49,7 @@ export function YouVersionProvider( apiHost, installationId: YouVersionPlatformConfiguration.installationId, theme, + authEnabled: !!includeAuth, }} > @@ -68,6 +69,7 @@ export function YouVersionProvider( apiHost, installationId: YouVersionPlatformConfiguration.installationId, theme, + authEnabled: !!includeAuth, }} > {children} diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx index 11b09ed7..f91a0af9 100644 --- a/packages/ui/.storybook/preview.tsx +++ b/packages/ui/.storybook/preview.tsx @@ -43,21 +43,40 @@ const preview: Preview = { ( Story: PartialStoryFn, context: StoryContext, - ): React.ReactElement => ( - - - - - - ), + ): React.ReactElement => { + const includeAuth = context.parameters.includeAuth !== false; + const requiredEnvVars = includeAuth + ? ['STORYBOOK_YOUVERSION_APP_KEY', 'STORYBOOK_AUTH_REDIRECT_URL'] + : ['STORYBOOK_YOUVERSION_APP_KEY']; + + if (includeAuth) { + return ( + + + + + + ); + } + + return ( + + + + + + ); + }, ], parameters: { controls: { diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx index d4fee283..aac3d3d4 100644 --- a/packages/ui/src/components/bible-reader.stories.tsx +++ b/packages/ui/src/components/bible-reader.stories.tsx @@ -593,3 +593,57 @@ export const AuthenticatedWithoutAvatar: Story = { }); }, }; + +/** + * Tests that BibleReader works without auth enabled in the provider. + * The user menu should not be visible when auth is disabled. + */ +export const WithoutAuth: Story = { + tags: ['integration'], + args: { + versionId: 111, + book: 'JHN', + chapter: '1', + background: 'light', + }, + parameters: { + includeAuth: false, + }, + render: (args) => ( +
+ + + + +
+ ), + play: async ({ canvasElement }) => { + // Wait for the Bible content to load + await waitFor( + async () => { + const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]'); + await expect(verseContainer).toBeInTheDocument(); + }, + { timeout: 5000 }, + ); + + // Verify Bible content is displayed + const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]'); + await expect(verseContainer).toBeInTheDocument(); + + // User menu should not be visible when auth is disabled + const userMenuTrigger = canvasElement.querySelector('[data-testid="user-menu-trigger"]'); + await expect(userMenuTrigger).not.toBeInTheDocument(); + + // Chapter picker and version picker should still work + const chapterButton = screen.getByRole('button', { name: /change bible book and chapter/i }); + await expect(chapterButton).toBeInTheDocument(); + + const versionButton = screen.getByRole('button', { name: /change bible version/i }); + await expect(versionButton).toBeInTheDocument(); + + // Settings should still work + const settingsButton = screen.getByRole('button', { name: /settings/i }); + await expect(settingsButton).toBeInTheDocument(); + }, +}; diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx index 28a910e6..6fb42506 100644 --- a/packages/ui/src/components/bible-reader.tsx +++ b/packages/ui/src/components/bible-reader.tsx @@ -10,7 +10,13 @@ import { type ReactNode, } from 'react'; import { useControllableState } from '@radix-ui/react-use-controllable-state'; -import { useBooks, useVersion, useTheme, useYVAuth } from '@youversion/platform-react-hooks'; +import { + useBooks, + useVersion, + useTheme, + useYVAuth, + YouVersionContext, +} from '@youversion/platform-react-hooks'; import { BibleChapterPicker } from './bible-chapter-picker'; import { BibleVersionPicker } from './bible-version-picker'; import { BibleTextView } from './verse'; @@ -237,6 +243,43 @@ function Content() { ); } +function UserMenu() { + const { auth, signIn, signOut, userInfo } = useYVAuth(); + + return ( + + + {auth.isAuthenticated && userInfo?.avatarUrlFormat ? ( + {userInfo.name + ) : ( + + )} + + + {auth.isAuthenticated ? ( + + ) : ( + + )} + + + ); +} + function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { const { book, @@ -250,7 +293,8 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { setCurrentFontSize, background, } = useBibleReaderContext(); - const { auth, signIn, signOut, userInfo } = useYVAuth(); + const yvContext = useContext(YouVersionContext); + const authEnabled = yvContext?.authEnabled || false; return (
- - - {auth.isAuthenticated && userInfo?.avatarUrlFormat ? ( - {userInfo.name - ) : ( - - )} - - - {auth.isAuthenticated ? ( - - ) : ( - - )} - - + {authEnabled && }