@seamapi/react 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -13,7 +13,7 @@ with everything you need to get started with [Seam].
13
13
  Play with them live in the [Storybook]!
14
14
 
15
15
  [Seam]: https://www.seam.co/
16
- [Storybook]: https://seam-react.vercel.app/
16
+ [Storybook]: https://react.seam.co/
17
17
 
18
18
  ## Installation
19
19
 
@@ -50,12 +50,40 @@ export const App = () => {
50
50
 
51
51
  [Seam Console]: https://console.seam.co/
52
52
 
53
+ ### Styles
54
+
55
+ > CSS is automatically included unless using `<SeamProvider disableCssInjection />`.
56
+
57
+ Components are styled with plain Cascading Style Sheets (CSS).
58
+ All styles are prefixed with `seam-` to avoid name collisions.
59
+
60
+ By default, the `SeamProvider` will inject a link tag into the document head to load the CSS.
61
+ If you prefer to manually load the CSS,
62
+ this behavior may be disabled with the `disableCssInjection` prop.
63
+ Then, either import the CSS using a supported bundler with
64
+
65
+ ```ts
66
+ import '@seamapi/react/index.css'
67
+ ```
68
+
69
+ or place the following in the `<head>` tag:
70
+
71
+ > You must match the version string below with the exact version of this package used by your application.
72
+
73
+ ```html
74
+ <link rel="stylesheet" href="https://react.seam.co/v/1.0.0/index.min.css" />
75
+ ```
76
+
53
77
  ### Fonts
54
78
 
55
- > The font is automatically included unless you specify `disableFontInjection` in `<SeamProvider />`
79
+ > Fonts are automatically included unless using `<SeamProvider disableFontInjection />`.
56
80
 
57
81
  The components are optimized for use with [Source Sans Pro], but will fallback to other system sans-serif fonts.
58
- Load the font from Google Fonts by placing the following in the `<head>` tag:
82
+
83
+ By default, the `SeamProvider` will inject a link tag into the document head to load the font.
84
+ If you prefer to manually provide the font,
85
+ this behavior may be disabled with the `disableFontInjection` prop.
86
+ Then, load it from Google Fonts by placing the following in the `<head>` tag:
59
87
 
60
88
  ```html
61
89
  <link
@@ -10,10 +10,7 @@ export interface SeamContext {
10
10
  userIdentifierKey?: string | undefined;
11
11
  clientSessionToken?: string | undefined;
12
12
  }
13
- type SeamProviderProps = {
14
- disableCssInjection?: boolean | undefined;
15
- disableFontInjection?: boolean | undefined;
16
- } & (SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions));
13
+ type SeamProviderProps = SeamProviderBaseProps & (SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions));
17
14
  interface SeamProviderPropsWithClient {
18
15
  client: Seam;
19
16
  }
@@ -24,8 +21,13 @@ interface SeamProviderPropsWithPublishableKey {
24
21
  interface SeamProviderPropsWithClientSessionToken {
25
22
  clientSessionToken: string;
26
23
  }
24
+ interface SeamProviderBaseProps {
25
+ disableCssInjection?: boolean | undefined;
26
+ disableFontInjection?: boolean | undefined;
27
+ useUnminifiedCss?: boolean | undefined;
28
+ }
27
29
  type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>;
28
- export declare function SeamProvider({ children, ...props }: PropsWithChildren<SeamProviderProps>): JSX.Element;
30
+ export declare function SeamProvider({ children, disableCssInjection, disableFontInjection, useUnminifiedCss, ...props }: PropsWithChildren<SeamProviderProps>): JSX.Element;
29
31
  export declare const seamContext: import("react").Context<SeamContext>;
30
32
  export declare function useSeamContext(): SeamContext;
31
33
  export {};
@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4
4
  import { createContext, useContext, useRef, } from 'react';
5
5
  import { useSeamFont } from './seam/use-seam-font.js';
6
6
  import { useSeamStyles } from './seam/use-seam-styles.js';
7
- export function SeamProvider({ children, ...props }) {
7
+ export function SeamProvider({ children, disableCssInjection = false, disableFontInjection = false, useUnminifiedCss = false, ...props }) {
8
8
  const { Provider } = seamContext;
9
9
  const queryClientRef = useRef(new QueryClient());
10
10
  const contextRef = useRef(createSeamContextValue(props));
@@ -18,8 +18,8 @@ export function SeamProvider({ children, ...props }) {
18
18
  contextRef.current.clientSessionToken == null) {
19
19
  throw new Error(`Must provide either a Seam client, clientSessionToken or a publishableKey.`);
20
20
  }
21
- useSeamStyles({ enabled: !(props.disableCssInjection ?? false) });
22
- useSeamFont({ enabled: !(props.disableFontInjection ?? false) });
21
+ useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss });
22
+ useSeamFont({ disabled: disableFontInjection });
23
23
  return (_jsx("div", { className: 'seam-components', children: _jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }) }));
24
24
  }
25
25
  const createDefaultSeamContextValue = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- export declare const useSeamFont: ({ enabled }: {
2
- enabled: boolean;
1
+ export declare const useSeamFont: ({ disabled }: {
2
+ disabled?: boolean | undefined;
3
3
  }) => void;
@@ -1,19 +1,19 @@
1
1
  import { useEffect } from 'react';
2
2
  const fontUrl = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap';
3
- export const useSeamFont = ({ enabled }) => {
3
+ export const useSeamFont = ({ disabled = false }) => {
4
4
  useEffect(() => {
5
- if (globalThis.document == null)
5
+ if (disabled)
6
6
  return;
7
- if (!enabled)
7
+ if (globalThis.document == null)
8
8
  return;
9
9
  const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`);
10
- if (linkEl === null) {
11
- const link = globalThis.document.createElement('link');
12
- link.rel = 'stylesheet';
13
- link.type = 'text/css';
14
- link.href = fontUrl;
15
- globalThis.document.head.appendChild(link);
16
- }
17
- }, [enabled]);
10
+ if (linkEl != null)
11
+ return;
12
+ const link = globalThis.document.createElement('link');
13
+ link.rel = 'stylesheet';
14
+ link.type = 'text/css';
15
+ link.href = fontUrl;
16
+ globalThis.document.head.appendChild(link);
17
+ }, [disabled]);
18
18
  };
19
19
  //# sourceMappingURL=use-seam-font.js.map
@@ -1 +1 @@
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,OAAO,EAAwB,EAAE,EAAE;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI;YAAE,OAAM;QACvC,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,cAAc,OAAO,IAAI,CAAC,CAAA;QAE3E,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACtD,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;YACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAA;YACtB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAA;YAEnB,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;SAC3C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA"}
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"}
@@ -1,3 +1,4 @@
1
- export declare const useSeamStyles: ({ enabled }: {
2
- enabled: boolean;
1
+ export declare const useSeamStyles: ({ disabled, unminified, }: {
2
+ unminified?: boolean | undefined;
3
+ disabled?: boolean | undefined;
3
4
  }) => void;
@@ -1,20 +1,24 @@
1
1
  import { useEffect } from 'react';
2
- // TODO figure out the version automatically
3
- const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css';
4
- export const useSeamStyles = ({ enabled }) => {
2
+ import version from '../../lib/version.js';
3
+ const origin = 'https://react.seam.co';
4
+ export const useSeamStyles = ({ disabled = false, unminified = false, }) => {
5
+ const ext = `${unminified ? '' : 'min.'}css`;
6
+ const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}`;
5
7
  useEffect(() => {
6
- if (globalThis.document == null)
8
+ if (version === null)
9
+ return;
10
+ if (disabled)
7
11
  return;
8
- if (!enabled)
12
+ if (globalThis.document == null)
9
13
  return;
10
14
  const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`);
11
- if (linkEl === null) {
12
- const link = globalThis.document.createElement('link');
13
- link.rel = 'stylesheet';
14
- link.type = 'text/css';
15
- link.href = cssUrl;
16
- globalThis.document.head.appendChild(link);
17
- }
18
- }, [enabled]);
15
+ if (linkEl != null)
16
+ return;
17
+ const link = globalThis.document.createElement('link');
18
+ link.rel = 'stylesheet';
19
+ link.type = 'text/css';
20
+ link.href = cssUrl;
21
+ globalThis.document.head.appendChild(link);
22
+ }, [disabled, cssUrl]);
19
23
  };
20
24
  //# sourceMappingURL=use-seam-styles.js.map
@@ -1 +1 @@
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,4CAA4C;AAC5C,MAAM,MAAM,GAAG,0DAA0D,CAAA;AAEzE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI;YAAE,OAAM;QACvC,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,cAAc,MAAM,IAAI,CAAC,CAAA;QAE1E,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACtD,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;YACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAA;YACtB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAA;YAElB,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;SAC3C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA"}
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"}
@@ -0,0 +1,2 @@
1
+ declare const _default: null;
2
+ export default _default;
package/lib/version.js ADDED
@@ -0,0 +1 @@
1
+ export default '1.3.0'
@@ -0,0 +1 @@
1
+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAe,IAAI,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seamapi/react",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Seam React component library.",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -65,6 +65,7 @@
65
65
  "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .",
66
66
  "prelint": "prettier --check --ignore-path .gitignore .",
67
67
  "postlint": "stylelint '**/*.scss'",
68
+ "prepack": "echo \"export default '$(jq -r .version < package.json)'\" > lib/version.js",
68
69
  "postversion": "git push --follow-tags",
69
70
  "storybook": "storybook dev --port 6006",
70
71
  "storybook:docs": "storybook dev --docs --port 6007",
@@ -25,14 +25,12 @@ export interface SeamContext {
25
25
  clientSessionToken?: string | undefined
26
26
  }
27
27
 
28
- type SeamProviderProps = {
29
- disableCssInjection?: boolean | undefined
30
- disableFontInjection?: boolean | undefined
31
- } & (
32
- | SeamProviderPropsWithClient
33
- | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
34
- | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
35
- )
28
+ type SeamProviderProps = SeamProviderBaseProps &
29
+ (
30
+ | SeamProviderPropsWithClient
31
+ | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
32
+ | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
33
+ )
36
34
 
37
35
  interface SeamProviderPropsWithClient {
38
36
  client: Seam
@@ -47,10 +45,19 @@ interface SeamProviderPropsWithClientSessionToken {
47
45
  clientSessionToken: string
48
46
  }
49
47
 
48
+ interface SeamProviderBaseProps {
49
+ disableCssInjection?: boolean | undefined
50
+ disableFontInjection?: boolean | undefined
51
+ useUnminifiedCss?: boolean | undefined
52
+ }
53
+
50
54
  type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>
51
55
 
52
56
  export function SeamProvider({
53
57
  children,
58
+ disableCssInjection = false,
59
+ disableFontInjection = false,
60
+ useUnminifiedCss = false,
54
61
  ...props
55
62
  }: PropsWithChildren<SeamProviderProps>): JSX.Element {
56
63
  const { Provider } = seamContext
@@ -76,8 +83,8 @@ export function SeamProvider({
76
83
  )
77
84
  }
78
85
 
79
- useSeamStyles({ enabled: !(props.disableCssInjection ?? false) })
80
- useSeamFont({ enabled: !(props.disableFontInjection ?? false) })
86
+ useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss })
87
+ useSeamFont({ disabled: disableFontInjection })
81
88
 
82
89
  return (
83
90
  <div className='seam-components'>
@@ -3,19 +3,18 @@ import { useEffect } from 'react'
3
3
  const fontUrl =
4
4
  'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
5
5
 
6
- export const useSeamFont = ({ enabled }: { enabled: boolean }) => {
6
+ export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => {
7
7
  useEffect(() => {
8
+ if (disabled) return
8
9
  if (globalThis.document == null) return
9
- if (!enabled) return
10
- const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
11
10
 
12
- if (linkEl === null) {
13
- const link = globalThis.document.createElement('link')
14
- link.rel = 'stylesheet'
15
- link.type = 'text/css'
16
- link.href = fontUrl
11
+ const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
12
+ if (linkEl != null) return
17
13
 
18
- globalThis.document.head.appendChild(link)
19
- }
20
- }, [enabled])
14
+ const link = globalThis.document.createElement('link')
15
+ link.rel = 'stylesheet'
16
+ link.type = 'text/css'
17
+ link.href = fontUrl
18
+ globalThis.document.head.appendChild(link)
19
+ }, [disabled])
21
20
  }
@@ -1,21 +1,31 @@
1
1
  import { useEffect } from 'react'
2
2
 
3
- // TODO figure out the version automatically
4
- const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css'
3
+ import version from 'lib/version.js'
4
+
5
+ const origin = 'https://react.seam.co'
6
+
7
+ export const useSeamStyles = ({
8
+ disabled = false,
9
+ unminified = false,
10
+ }: {
11
+ unminified?: boolean
12
+ disabled?: boolean
13
+ }) => {
14
+ const ext = `${unminified ? '' : 'min.'}css`
15
+ const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}`
5
16
 
6
- export const useSeamStyles = ({ enabled }: { enabled: boolean }) => {
7
17
  useEffect(() => {
18
+ if (version === null) return
19
+ if (disabled) return
8
20
  if (globalThis.document == null) return
9
- if (!enabled) return
10
- const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
11
21
 
12
- if (linkEl === null) {
13
- const link = globalThis.document.createElement('link')
14
- link.rel = 'stylesheet'
15
- link.type = 'text/css'
16
- link.href = cssUrl
22
+ const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
23
+ if (linkEl != null) return
17
24
 
18
- globalThis.document.head.appendChild(link)
19
- }
20
- }, [enabled])
25
+ const link = globalThis.document.createElement('link')
26
+ link.rel = 'stylesheet'
27
+ link.type = 'text/css'
28
+ link.href = cssUrl
29
+ globalThis.document.head.appendChild(link)
30
+ }, [disabled, cssUrl])
21
31
  }
@@ -0,0 +1 @@
1
+ export default null