@seamapi/react 1.1.0 → 1.2.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 +2 -2
- package/lib/SeamProvider.d.ts +4 -1
- package/lib/SeamProvider.js +4 -0
- package/lib/SeamProvider.js.map +1 -1
- package/lib/seam/use-seam-font.d.ts +3 -0
- package/lib/seam/use-seam-font.js +19 -0
- package/lib/seam/use-seam-font.js.map +1 -0
- package/lib/seam/use-seam-styles.d.ts +3 -0
- package/lib/seam/use-seam-styles.js +20 -0
- package/lib/seam/use-seam-styles.js.map +1 -0
- package/package.json +1 -1
- package/src/lib/SeamProvider.tsx +11 -1
- package/src/lib/seam/use-seam-font.ts +21 -0
- package/src/lib/seam/use-seam-styles.ts +21 -0
package/README.md
CHANGED
|
@@ -34,8 +34,6 @@ $ npm install @seamapi/react
|
|
|
34
34
|
3. Drop in Seam components.
|
|
35
35
|
|
|
36
36
|
```ts
|
|
37
|
-
import '@seamapi/react/index.css'
|
|
38
|
-
|
|
39
37
|
import { SeamProvider, DeviceTable } from '@seamapi/react'
|
|
40
38
|
|
|
41
39
|
export const App = () => {
|
|
@@ -54,6 +52,8 @@ export const App = () => {
|
|
|
54
52
|
|
|
55
53
|
### Fonts
|
|
56
54
|
|
|
55
|
+
> The font is automatically included unless you specify `disableFontInjection` in `<SeamProvider />`
|
|
56
|
+
|
|
57
57
|
The components are optimized for use with [Source Sans Pro], but will fallback to other system sans-serif fonts.
|
|
58
58
|
Load the font from Google Fonts by placing the following in the `<head>` tag:
|
|
59
59
|
|
package/lib/SeamProvider.d.ts
CHANGED
|
@@ -10,7 +10,10 @@ export interface SeamContext {
|
|
|
10
10
|
userIdentifierKey?: string | undefined;
|
|
11
11
|
clientSessionToken?: string | undefined;
|
|
12
12
|
}
|
|
13
|
-
type SeamProviderProps =
|
|
13
|
+
type SeamProviderProps = {
|
|
14
|
+
disableCssInjection?: boolean | undefined;
|
|
15
|
+
disableFontInjection?: boolean | undefined;
|
|
16
|
+
} & (SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions));
|
|
14
17
|
interface SeamProviderPropsWithClient {
|
|
15
18
|
client: Seam;
|
|
16
19
|
}
|
package/lib/SeamProvider.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
4
4
|
import { createContext, useContext, useRef, } from 'react';
|
|
5
|
+
import { useSeamFont } from './seam/use-seam-font.js';
|
|
6
|
+
import { useSeamStyles } from './seam/use-seam-styles.js';
|
|
5
7
|
export function SeamProvider({ children, ...props }) {
|
|
6
8
|
const { Provider } = seamContext;
|
|
7
9
|
const queryClientRef = useRef(new QueryClient());
|
|
@@ -16,6 +18,8 @@ export function SeamProvider({ children, ...props }) {
|
|
|
16
18
|
contextRef.current.clientSessionToken == null) {
|
|
17
19
|
throw new Error(`Must provide either a Seam client, clientSessionToken or a publishableKey.`);
|
|
18
20
|
}
|
|
21
|
+
useSeamStyles({ enabled: !(props.disableCssInjection ?? false) });
|
|
22
|
+
useSeamFont({ enabled: !(props.disableFontInjection ?? false) });
|
|
19
23
|
return (_jsx("div", { className: 'seam-components', children: _jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }) }));
|
|
20
24
|
}
|
|
21
25
|
const createDefaultSeamContextValue = () => {
|
package/lib/SeamProvider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EACL,aAAa,EAEb,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
const fontUrl = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap';
|
|
3
|
+
export const useSeamFont = ({ enabled }) => {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (globalThis.document == null)
|
|
6
|
+
return;
|
|
7
|
+
if (!enabled)
|
|
8
|
+
return;
|
|
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]);
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=use-seam-font.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
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 }) => {
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (globalThis.document == null)
|
|
7
|
+
return;
|
|
8
|
+
if (!enabled)
|
|
9
|
+
return;
|
|
10
|
+
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]);
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=use-seam-styles.js.map
|
|
@@ -0,0 +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"}
|
package/package.json
CHANGED
package/src/lib/SeamProvider.tsx
CHANGED
|
@@ -9,6 +9,9 @@ import {
|
|
|
9
9
|
} from 'react'
|
|
10
10
|
import type { Seam, SeamClientOptions } from 'seamapi'
|
|
11
11
|
|
|
12
|
+
import { useSeamFont } from './seam/use-seam-font.js'
|
|
13
|
+
import { useSeamStyles } from './seam/use-seam-styles.js'
|
|
14
|
+
|
|
12
15
|
declare global {
|
|
13
16
|
// eslint-disable-next-line no-var
|
|
14
17
|
var seam: SeamProviderProps | undefined
|
|
@@ -22,10 +25,14 @@ export interface SeamContext {
|
|
|
22
25
|
clientSessionToken?: string | undefined
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
type SeamProviderProps =
|
|
28
|
+
type SeamProviderProps = {
|
|
29
|
+
disableCssInjection?: boolean | undefined
|
|
30
|
+
disableFontInjection?: boolean | undefined
|
|
31
|
+
} & (
|
|
26
32
|
| SeamProviderPropsWithClient
|
|
27
33
|
| (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
|
|
28
34
|
| (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
|
|
35
|
+
)
|
|
29
36
|
|
|
30
37
|
interface SeamProviderPropsWithClient {
|
|
31
38
|
client: Seam
|
|
@@ -69,6 +76,9 @@ export function SeamProvider({
|
|
|
69
76
|
)
|
|
70
77
|
}
|
|
71
78
|
|
|
79
|
+
useSeamStyles({ enabled: !(props.disableCssInjection ?? false) })
|
|
80
|
+
useSeamFont({ enabled: !(props.disableFontInjection ?? false) })
|
|
81
|
+
|
|
72
82
|
return (
|
|
73
83
|
<div className='seam-components'>
|
|
74
84
|
<QueryClientProvider client={queryClientRef.current}>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useEffect } from 'react'
|
|
2
|
+
|
|
3
|
+
const fontUrl =
|
|
4
|
+
'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
|
|
5
|
+
|
|
6
|
+
export const useSeamFont = ({ enabled }: { enabled: boolean }) => {
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (globalThis.document == null) return
|
|
9
|
+
if (!enabled) return
|
|
10
|
+
const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
|
|
11
|
+
|
|
12
|
+
if (linkEl === null) {
|
|
13
|
+
const link = globalThis.document.createElement('link')
|
|
14
|
+
link.rel = 'stylesheet'
|
|
15
|
+
link.type = 'text/css'
|
|
16
|
+
link.href = fontUrl
|
|
17
|
+
|
|
18
|
+
globalThis.document.head.appendChild(link)
|
|
19
|
+
}
|
|
20
|
+
}, [enabled])
|
|
21
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useEffect } from 'react'
|
|
2
|
+
|
|
3
|
+
// TODO figure out the version automatically
|
|
4
|
+
const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css'
|
|
5
|
+
|
|
6
|
+
export const useSeamStyles = ({ enabled }: { enabled: boolean }) => {
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (globalThis.document == null) return
|
|
9
|
+
if (!enabled) return
|
|
10
|
+
const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
|
|
11
|
+
|
|
12
|
+
if (linkEl === null) {
|
|
13
|
+
const link = globalThis.document.createElement('link')
|
|
14
|
+
link.rel = 'stylesheet'
|
|
15
|
+
link.type = 'text/css'
|
|
16
|
+
link.href = cssUrl
|
|
17
|
+
|
|
18
|
+
globalThis.document.head.appendChild(link)
|
|
19
|
+
}
|
|
20
|
+
}, [enabled])
|
|
21
|
+
}
|