From 8867d4a9a39bc1c30e29a425924eb4a7635cfa52 Mon Sep 17 00:00:00 2001 From: Severin Ibarluzea Date: Sat, 27 May 2023 00:27:17 +0200 Subject: [PATCH 1/4] automatic style loading --- .storybook/preview.tsx | 2 ++ src/lib/SeamProvider.tsx | 11 ++++++++++- src/lib/seam/use-seam-font.ts | 21 +++++++++++++++++++++ src/lib/seam/use-seam-styles.ts | 22 ++++++++++++++++++++++ 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/lib/seam/use-seam-font.ts create mode 100644 src/lib/seam/use-seam-styles.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c5bd01fcc..55fc85db0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -66,6 +66,8 @@ const preview: Preview = { publishableKey={publishableKey} userIdentifierKey={userIdentifierKey} endpoint={seamEndpoint} + disableCssInjection + disableFontInjection > diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx index c3111494d..a2af3147d 100644 --- a/src/lib/SeamProvider.tsx +++ b/src/lib/SeamProvider.tsx @@ -8,6 +8,8 @@ import { useRef, } from 'react' import type { Seam, SeamClientOptions } from 'seamapi' +import { useSeamStyles } from './seam/use-seam-styles.js' +import { useSeamFont } from './seam/use-seam-font.js' declare global { // eslint-disable-next-line no-var @@ -22,10 +24,14 @@ export interface SeamContext { clientSessionToken?: string | undefined } -type SeamProviderProps = +type SeamProviderProps = { + disableCssInjection?: boolean | undefined + disableFontInjection?: boolean | undefined +} & ( | SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions) +) interface SeamProviderPropsWithClient { client: Seam @@ -69,6 +75,9 @@ export function SeamProvider({ ) } + useSeamStyles({ enabled: !(props.disableCssInjection ?? false) }) + useSeamFont({ enabled: !(props.disableFontInjection ?? false) }) + return (
diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts new file mode 100644 index 000000000..b61de56ea --- /dev/null +++ b/src/lib/seam/use-seam-font.ts @@ -0,0 +1,21 @@ +import { useEffect } from 'react' + +const fontUrl = + 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap' + +export const useSeamFont = ({ enabled }: { enabled: boolean }) => { + useEffect(() => { + if (typeof window === 'undefined') return + if (!enabled) return + const linkElement = document.querySelector(`link[href="${fontUrl}"]`) + + if (linkElement === null) { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = fontUrl + + document.head.appendChild(link) + } + }, [enabled]) +} diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts new file mode 100644 index 000000000..ab4a71437 --- /dev/null +++ b/src/lib/seam/use-seam-styles.ts @@ -0,0 +1,22 @@ +import { useEffect } from 'react' + +// TODO figure out the version automatically +const seamCssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' + +export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { + useEffect(() => { + if (typeof window === 'undefined') return + console.log('USE SEAM STYLES', { enabled }) + if (!enabled) return + const linkElement = document.querySelector(`link[href="${seamCssUrl}"]`) + + if (linkElement === null) { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = seamCssUrl + + document.head.appendChild(link) + } + }, [enabled]) +} From 1fe55756beb680185521a86c20e6b9ef13dc6e15 Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Fri, 26 May 2023 22:28:28 +0000 Subject: [PATCH 2/4] Run format --- src/lib/SeamProvider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx index a2af3147d..52e4dd4bb 100644 --- a/src/lib/SeamProvider.tsx +++ b/src/lib/SeamProvider.tsx @@ -8,8 +8,9 @@ import { useRef, } from 'react' import type { Seam, SeamClientOptions } from 'seamapi' -import { useSeamStyles } from './seam/use-seam-styles.js' + import { useSeamFont } from './seam/use-seam-font.js' +import { useSeamStyles } from './seam/use-seam-styles.js' declare global { // eslint-disable-next-line no-var From d9e87c65643d8c276f192031eb6553ea7aa120d4 Mon Sep 17 00:00:00 2001 From: Severin Ibarluzea Date: Sat, 27 May 2023 00:35:57 +0200 Subject: [PATCH 3/4] remove console.log --- src/lib/seam/use-seam-styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index ab4a71437..4f8bc08a5 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -6,7 +6,6 @@ const seamCssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { useEffect(() => { if (typeof window === 'undefined') return - console.log('USE SEAM STYLES', { enabled }) if (!enabled) return const linkElement = document.querySelector(`link[href="${seamCssUrl}"]`) From a3917de383240ddffe09fed4d01ac29aace9c336 Mon Sep 17 00:00:00 2001 From: Severin Ibarluzea Date: Sat, 27 May 2023 01:12:34 +0200 Subject: [PATCH 4/4] fixes from evan's review --- README.md | 4 ++-- examples/basic/index.html | 4 ---- examples/basic/src/App.tsx | 2 -- src/lib/seam/use-seam-font.ts | 10 +++++----- src/lib/seam/use-seam-styles.ts | 14 +++++++------- test/fixtures/react.tsx | 2 ++ 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 304df52dc..7b919657d 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,6 @@ $ npm install @seamapi/react 3. Drop in Seam components. ```ts -import '@seamapi/react/index.css' - import { SeamProvider, DeviceTable } from '@seamapi/react' export const App = () => { @@ -54,6 +52,8 @@ export const App = () => { ### Fonts +> The font is automatically included unless you specify `disableFontInjection` in `` + The components are optimized for use with [Source Sans Pro], but will fallback to other system sans-serif fonts. Load the font from Google Fonts by placing the following in the `` tag: diff --git a/examples/basic/index.html b/examples/basic/index.html index 045aee41d..98d397daf 100644 --- a/examples/basic/index.html +++ b/examples/basic/index.html @@ -4,10 +4,6 @@ Basic example - Seam React Components -
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx index 3476c738b..7e4120613 100644 --- a/examples/basic/src/App.tsx +++ b/examples/basic/src/App.tsx @@ -1,5 +1,3 @@ -import '@seamapi/react/index.css' - import { DeviceTable, SeamProvider } from '@seamapi/react' export const App = (): JSX.Element => { diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts index b61de56ea..9280f7c45 100644 --- a/src/lib/seam/use-seam-font.ts +++ b/src/lib/seam/use-seam-font.ts @@ -5,17 +5,17 @@ const fontUrl = export const useSeamFont = ({ enabled }: { enabled: boolean }) => { useEffect(() => { - if (typeof window === 'undefined') return + if (globalThis.document == null) return if (!enabled) return - const linkElement = document.querySelector(`link[href="${fontUrl}"]`) + const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`) - if (linkElement === null) { - const link = document.createElement('link') + if (linkEl === null) { + const link = globalThis.document.createElement('link') link.rel = 'stylesheet' link.type = 'text/css' link.href = fontUrl - document.head.appendChild(link) + globalThis.document.head.appendChild(link) } }, [enabled]) } diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index 4f8bc08a5..bd5a45460 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -1,21 +1,21 @@ import { useEffect } from 'react' // TODO figure out the version automatically -const seamCssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' +const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { useEffect(() => { - if (typeof window === 'undefined') return + if (globalThis.document == null) return if (!enabled) return - const linkElement = document.querySelector(`link[href="${seamCssUrl}"]`) + const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`) - if (linkElement === null) { - const link = document.createElement('link') + if (linkEl === null) { + const link = globalThis.document.createElement('link') link.rel = 'stylesheet' link.type = 'text/css' - link.href = seamCssUrl + link.href = cssUrl - document.head.appendChild(link) + globalThis.document.head.appendChild(link) } }, [enabled]) } diff --git a/test/fixtures/react.tsx b/test/fixtures/react.tsx index f350a3c63..31479aa41 100644 --- a/test/fixtures/react.tsx +++ b/test/fixtures/react.tsx @@ -19,6 +19,8 @@ function Providers({ children }: PropsWithChildren): JSX.Element { endpoint={globalThis.JEST_SEAM_ENDPOINT} publishableKey={globalThis.JEST_SEAM_PUBLISHABLE_KEY_1} userIdentifierKey='some_user' + disableCssInjection + disableFontInjection > {children}