@seamapi/react 1.1.0 → 1.3.0

package/README.md

@@ -13,7 +13,7 @@ with everything you need to get started with [Seam].
 Play with them live in the [Storybook]!
 
 [Seam]: https://www.seam.co/
-[Storybook]: https://seam-react.vercel.app/
+[Storybook]: https://react.seam.co/
 
 ## Installation
 
@@ -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 = () => {
@@ -52,10 +50,40 @@ export const App = () => {
 
 [Seam Console]: https://console.seam.co/
 
+### Styles
+
+> CSS is automatically included unless using `<SeamProvider disableCssInjection />`.
+
+Components are styled with plain Cascading Style Sheets (CSS).
+All styles are prefixed with `seam-` to avoid name collisions.
+
+By default, the `SeamProvider` will inject a link tag into the document head to load the CSS.
+If you prefer to manually load the CSS,
+this behavior may be disabled with the `disableCssInjection` prop.
+Then, either import the CSS using a supported bundler with
+
+```ts
+import '@seamapi/react/index.css'
+```
+
+or place the following in the `<head>` tag:
+
+> You must match the version string below with the exact version of this package used by your application.
+
+```html
+<link rel="stylesheet" href="https://react.seam.co/v/1.0.0/index.min.css" />
+```
+
 ### Fonts
 
+> Fonts are automatically included unless using `<SeamProvider disableFontInjection />`.
+
 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 `<head>` tag:
+
+By default, the `SeamProvider` will inject a link tag into the document head to load the font.
+If you prefer to manually provide the font,
+this behavior may be disabled with the `disableFontInjection` prop.
+Then, load it from Google Fonts by placing the following in the `<head>` tag:
 
 ```html
 <link

package/lib/SeamProvider.d.ts

@@ -10,7 +10,7 @@ export interface SeamContext {
     userIdentifierKey?: string | undefined;
     clientSessionToken?: string | undefined;
 }
-type SeamProviderProps = SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions);
+type SeamProviderProps = SeamProviderBaseProps & (SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions));
 interface SeamProviderPropsWithClient {
     client: Seam;
 }
@@ -21,8 +21,13 @@ interface SeamProviderPropsWithPublishableKey {
 interface SeamProviderPropsWithClientSessionToken {
     clientSessionToken: string;
 }
+interface SeamProviderBaseProps {
+    disableCssInjection?: boolean | undefined;
+    disableFontInjection?: boolean | undefined;
+    useUnminifiedCss?: boolean | undefined;
+}
 type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>;
-export declare function SeamProvider({ children, ...props }: PropsWithChildren<SeamProviderProps>): JSX.Element;
+export declare function SeamProvider({ children, disableCssInjection, disableFontInjection, useUnminifiedCss, ...props }: PropsWithChildren<SeamProviderProps>): JSX.Element;
 export declare const seamContext: import("react").Context<SeamContext>;
 export declare function useSeamContext(): SeamContext;
 export {};

package/lib/SeamProvider.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, useContext, useRef, } from 'react';
-export function SeamProvider({ children, ...props }) {
+import { useSeamFont } from './seam/use-seam-font.js';
+import { useSeamStyles } from './seam/use-seam-styles.js';
+export function SeamProvider({ children, disableCssInjection = false, disableFontInjection = false, useUnminifiedCss = false, ...props }) {
     const { Provider } = seamContext;
     const queryClientRef = useRef(new QueryClient());
     const contextRef = useRef(createSeamContextValue(props));
@@ -16,6 +18,8 @@ export function SeamProvider({ children, ...props }) {
         contextRef.current.clientSessionToken == null) {
         throw new Error(`Must provide either a Seam client, clientSessionToken or a publishableKey.`);
     }
+    useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss });
+    useSeamFont({ disabled: disableFontInjection });
     return (_jsx("div", { className: 'seam-components', children: _jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }) }));
 }
 const createDefaultSeamContextValue = () => {

package/lib/SeamProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}

package/lib/seam/use-seam-font.d.ts

@@ -0,0 +1,3 @@
+export declare const useSeamFont: ({ disabled }: {
+    disabled?: boolean | undefined;
+}) => void;

package/lib/seam/use-seam-font.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+const fontUrl = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap';
+export const useSeamFont = ({ disabled = false }) => {
+    useEffect(() => {
+        if (disabled)
+            return;
+        if (globalThis.document == null)
+            return;
+        const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`);
+        if (linkEl != null)
+            return;
+        const link = globalThis.document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = fontUrl;
+        globalThis.document.head.appendChild(link);
+    }, [disabled]);
+};
+//# sourceMappingURL=use-seam-font.js.map

package/lib/seam/use-seam-font.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-seam-font.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,OAAO,GACX,wFAAwF,CAAA;AAE1F,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,EAA0B,EAAE,EAAE;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAM;QACpB,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI;YAAE,OAAM;QAEvC,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,cAAc,OAAO,IAAI,CAAC,CAAA;QAC3E,IAAI,MAAM,IAAI,IAAI;YAAE,OAAM;QAE1B,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACtD,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;QACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAA;QACtB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAA;QACnB,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAChB,CAAC,CAAA"}

package/lib/seam/use-seam-styles.d.ts

@@ -0,0 +1,4 @@
+export declare const useSeamStyles: ({ disabled, unminified, }: {
+    unminified?: boolean | undefined;
+    disabled?: boolean | undefined;
+}) => void;

package/lib/seam/use-seam-styles.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import version from '../../lib/version.js';
+const origin = 'https://react.seam.co';
+export const useSeamStyles = ({ disabled = false, unminified = false, }) => {
+    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]);
+};
+//# sourceMappingURL=use-seam-styles.js.map

package/lib/seam/use-seam-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-seam-styles.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,OAAO,MAAM,gBAAgB,CAAA;AAEpC,MAAM,MAAM,GAAG,uBAAuB,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,KAAK,GAInB,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,CAAA;IAC5C,MAAM,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,IAAI,EAAE,UAAU,GAAG,EAAE,CAAA;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI;YAAE,OAAM;QAC5B,IAAI,QAAQ;YAAE,OAAM;QACpB,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI;YAAE,OAAM;QAEvC,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,cAAc,MAAM,IAAI,CAAC,CAAA;QAC1E,IAAI,MAAM,IAAI,IAAI;YAAE,OAAM;QAE1B,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACtD,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;QACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAA;QACtB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAA;QAClB,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AACxB,CAAC,CAAA"}

package/lib/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/lib/version.js

@@ -0,0 +1 @@
+export default '1.3.0'

package/lib/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAe,IAAI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -65,6 +65,7 @@
     "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .",
     "prelint": "prettier --check --ignore-path .gitignore .",
     "postlint": "stylelint '**/*.scss'",
+    "prepack": "echo \"export default '$(jq -r .version < package.json)'\" > lib/version.js",
     "postversion": "git push --follow-tags",
     "storybook": "storybook dev --port 6006",
     "storybook:docs": "storybook dev --docs --port 6007",

package/src/lib/SeamProvider.tsx

@@ -9,6 +9,9 @@ import {
 } from 'react'
 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
   var seam: SeamProviderProps | undefined
@@ -22,10 +25,12 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-type SeamProviderProps =
-  | SeamProviderPropsWithClient
-  | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
-  | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
+type SeamProviderProps = SeamProviderBaseProps &
+  (
+    | SeamProviderPropsWithClient
+    | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
+    | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
+  )
 
 interface SeamProviderPropsWithClient {
   client: Seam
@@ -40,10 +45,19 @@ interface SeamProviderPropsWithClientSessionToken {
   clientSessionToken: string
 }
 
+interface SeamProviderBaseProps {
+  disableCssInjection?: boolean | undefined
+  disableFontInjection?: boolean | undefined
+  useUnminifiedCss?: boolean | undefined
+}
+
 type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>
 
 export function SeamProvider({
   children,
+  disableCssInjection = false,
+  disableFontInjection = false,
+  useUnminifiedCss = false,
   ...props
 }: PropsWithChildren<SeamProviderProps>): JSX.Element {
   const { Provider } = seamContext
@@ -69,6 +83,9 @@ export function SeamProvider({
     )
   }
 
+  useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss })
+  useSeamFont({ disabled: disableFontInjection })
+
   return (
     <div className='seam-components'>
       <QueryClientProvider client={queryClientRef.current}>

package/src/lib/seam/use-seam-font.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+
+const fontUrl =
+  'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
+
+export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => {
+  useEffect(() => {
+    if (disabled) return
+    if (globalThis.document == null) return
+
+    const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
+    if (linkEl != null) return
+
+    const link = globalThis.document.createElement('link')
+    link.rel = 'stylesheet'
+    link.type = 'text/css'
+    link.href = fontUrl
+    globalThis.document.head.appendChild(link)
+  }, [disabled])
+}

package/src/lib/seam/use-seam-styles.ts

@@ -0,0 +1,31 @@
+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])
+}

package/src/lib/version.ts

@@ -0,0 +1 @@
+export default null