diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 018b086eb..f97f8e482 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -66,7 +66,6 @@ const preview: Preview = { publishableKey={publishableKey} userIdentifierKey={userIdentifierKey} endpoint={seamEndpoint} - disableCssInjection disableFontInjection > diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx index f1eb08f3d..7e4120613 100644 --- a/examples/basic/src/App.tsx +++ b/examples/basic/src/App.tsx @@ -6,7 +6,6 @@ export const App = (): JSX.Element => { endpoint={import.meta.env.SEAM_ENDPOINT} publishableKey={import.meta.env.SEAM_PUBLISHABLE_KEY} userIdentifierKey={import.meta.env.SEAM_USER_IDENTIFIER_KEY} - disableCssInjection >

Seam Components

diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx index 79f88fab7..97ea9fef9 100644 --- a/src/lib/SeamProvider.tsx +++ b/src/lib/SeamProvider.tsx @@ -1,4 +1,5 @@ 'use client' +import '@seamapi/react/index.css' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { @@ -10,7 +11,6 @@ import { import type { Seam, SeamClientOptions } from 'seamapi' import { useSeamFont } from './seam/use-seam-font.js' -import { useSeamStyles } from './seam/use-seam-styles.js' declare global { // eslint-disable-next-line no-var @@ -46,18 +46,17 @@ interface SeamProviderPropsWithClientSessionToken { } interface SeamProviderBaseProps { - disableCssInjection?: boolean | undefined disableFontInjection?: boolean | undefined useUnminifiedCss?: boolean | undefined + disableStyles?: boolean | undefined } type AllowedSeamClientOptions = Pick export function SeamProvider({ children, - disableCssInjection = false, disableFontInjection = false, - useUnminifiedCss = false, + disableStyles = false, ...props }: PropsWithChildren): JSX.Element { const { Provider } = seamContext @@ -83,11 +82,12 @@ export function SeamProvider({ ) } - useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss }) useSeamFont({ disabled: disableFontInjection }) + const className = disableStyles ? '' : 'seam-components' + return ( -
+
{children} diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts deleted file mode 100644 index 7e13a43fa..000000000 --- a/src/lib/seam/use-seam-styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { useEffect } from 'react' - -import version from 'lib/version.js' - -const origin = 'https://react.seam.co' - -export const useSeamStyles = ({ - disabled = false, - unminified = false, -}: { - unminified?: boolean - disabled?: boolean -}) => { - const ext = `${unminified ? '' : 'min.'}css` - const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}` - - useEffect(() => { - if (version === null) return - if (disabled) return - if (globalThis.document == null) return - - const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`) - if (linkEl != null) return - - const link = globalThis.document.createElement('link') - link.rel = 'stylesheet' - link.type = 'text/css' - link.href = cssUrl - globalThis.document.head.appendChild(link) - }, [disabled, cssUrl]) -} diff --git a/test/fixtures/react.tsx b/test/fixtures/react.tsx index 31479aa41..efe31bc32 100644 --- a/test/fixtures/react.tsx +++ b/test/fixtures/react.tsx @@ -19,7 +19,6 @@ function Providers({ children }: PropsWithChildren): JSX.Element { endpoint={globalThis.JEST_SEAM_ENDPOINT} publishableKey={globalThis.JEST_SEAM_PUBLISHABLE_KEY_1} userIdentifierKey='some_user' - disableCssInjection disableFontInjection > {children}