@seamapi/react 0.14.0 → 0.15.1
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 +0 -21
- package/index.css +1 -0
- package/index.css.map +1 -1
- package/index.min.css.map +1 -1
- package/lib/hooks/use-access-codes.d.ts +5 -0
- package/lib/hooks/use-access-codes.js +16 -0
- package/lib/hooks/use-access-codes.js.map +1 -0
- package/lib/hooks/use-device.d.ts +5 -0
- package/lib/hooks/use-device.js +17 -0
- package/lib/hooks/use-device.js.map +1 -0
- package/lib/hooks/use-devices.d.ts +1 -0
- package/lib/hooks/use-devices.js +2 -0
- package/lib/hooks/use-devices.js.map +1 -0
- package/lib/hooks/use-seam-client.d.ts +1 -0
- package/lib/hooks/use-seam-client.js +2 -0
- package/lib/hooks/use-seam-client.js.map +1 -0
- package/lib/seam/use-seam-client.js +13 -26
- package/lib/seam/use-seam-client.js.map +1 -1
- package/lib/types/use-seam-query-result.d.ts +5 -0
- package/lib/types/use-seam-query-result.js +2 -0
- package/lib/types/use-seam-query-result.js.map +1 -0
- package/lib/ui/AccessCodeTable/AccessCodeTable.d.ts +1 -2
- package/lib/ui/AccessCodeTable/AccessCodeTable.js +8 -2
- package/lib/ui/AccessCodeTable/AccessCodeTable.js.map +1 -1
- package/lib/ui/DeviceDetails/DeviceDetails.d.ts +3 -2
- package/lib/ui/DeviceDetails/DeviceDetails.js +1 -3
- package/lib/ui/DeviceDetails/DeviceDetails.js.map +1 -1
- package/package.json +4 -3
- package/src/lib/hooks/use-access-codes.ts +21 -0
- package/src/lib/hooks/use-device.ts +26 -0
- package/src/lib/hooks/use-devices.ts +1 -0
- package/src/lib/hooks/use-seam-client.ts +1 -0
- package/src/lib/seam/use-seam-client.ts +21 -39
- package/src/lib/types/use-seam-query-result.ts +7 -0
- package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +8 -4
- package/src/lib/ui/DeviceDetails/DeviceDetails.tsx +7 -6
- package/src/styles/_access-code-table.scss +54 -0
- package/src/styles/_buttons.scss +17 -0
- package/src/styles/_device-details.scss +136 -0
- package/src/styles/_inputs.scss +12 -0
- package/src/styles/_layout.scss +27 -0
- package/src/styles/{main.scss → _main.scss} +16 -7
- package/src/styles/_tables.scss +48 -0
- package/src/styles/_typography.scss +28 -0
- package/src/styles/access-code-table.scss +0 -52
- package/src/styles/buttons.scss +0 -15
- package/src/styles/content-header.scss +0 -21
- package/src/styles/device-details.scss +0 -134
- package/src/styles/inputs.scss +0 -6
- package/src/styles/tables.scss +0 -36
- package/src/styles/typography.scss +0 -16
package/README.md
CHANGED
|
@@ -66,27 +66,6 @@ Load the font from Google Fonts by placing the following in the `<head>` tag:
|
|
|
66
66
|
|
|
67
67
|
[Source Sans Pro]: https://fonts.google.com/specimen/Source+Sans+Pro
|
|
68
68
|
|
|
69
|
-
### Content Security Policy (CSP)
|
|
70
|
-
|
|
71
|
-
By self hosting the recommended fonts (or choosing not to use them),
|
|
72
|
-
and proxying the Seam endpoint, the components are compatible with the strictest CSP:
|
|
73
|
-
|
|
74
|
-
```
|
|
75
|
-
default-src 'self'
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
When using the default endpoint:
|
|
79
|
-
|
|
80
|
-
```
|
|
81
|
-
default-src 'self'; connect-src https://connect.getseam.com
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
When serving the fonts from Google Fonts:
|
|
85
|
-
|
|
86
|
-
```
|
|
87
|
-
default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com
|
|
88
|
-
```
|
|
89
|
-
|
|
90
69
|
## Development and Testing
|
|
91
70
|
|
|
92
71
|
### Quickstart
|
package/index.css
CHANGED
package/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AAQA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGA;EACQ;;ACvBR;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAKF;EACE;;AAKF;EACE;;AClBF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMJ;EACE;EACA;EACA;;ACtCF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;ACXN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;ACjBF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;ACjDJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"index.css"}
|
package/index.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AAQA,iBACE,2JAIA,mBACA,uBACA,uBACA,uBACA,wBACA,gBACA,4BACA,yBAIQ,yCCvBR,wHAME,gBAKF,+BACE,yBAKF,mCACE,8BClBF,oCACE,aACA,8BACA,mBAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAMJ,iCACE,aACA,YACA,YAEA,uCACE,mBAGF,6CACE,gBACA,eAMJ,kCACE,aACA,mBACA,YCtCF,kCACE,cACA,YACA,qCACA,kBCJF,8BACE,kBACA,oCACA,eAEA,+CACE,gBACA,YACA,cAEA,qDACE,+BCXN,sCACE,YACA,aACA,mBACA,kBACA,uBACA,WAEA,sDACE,kBACA,QACA,6BACA,OACA,eAGF,kDACE,eACA,iBCjBF,8DACE,cAGF,4DACE,mBACA,YACA,eAGF,yDACE,OACA,aACA,mBACA,uBAEA,6DACE,WACA,YACA,aACA,mBACA,uBAIJ,yDACE,OACA,sBACA,uBACA,uBACA,QAEA,mFACE,eACA,iBACA,yBAEA,qGACE,aACA,yBAKN,2DACE,kBACA,aACA,mBACA,uBCjDJ,sCACE,oBAEA,iDACE,aACA,sBACA,SAEA,2DACE,qCACA,kBAEA,yEACE,4BAEA,2FACE,2BACA,aACA,mBACA,8BACA,eAEA,iGACE,gCAIJ,iGACE,yCAGF,qFACE,eACA,iBACA,yBAGF,qFACE,cACA,gBACA,eACA,iBAKN,+DACE,kBACA,mBACA,uBAEA,6EACE,aACA,mBACA,SAEA,yFACE,YACA,aACA,aACA,mBAEA,6FACE,eAKF,0GACE,mBACA,gBACA,eACA,iBAGF,yGACE,aACA,sCACA,mBACA,eACA,iBACA,YACA,gBAEA,qHACE,yBAGF,2HACE,yBAGF,6GACE,UACA,iBAGF,2GACE,aACA,mBAOV,iEACE,OACA,gBACA,aACA,mBACA,uBAEA,qEACE,WACA,YACA,aACA,mBACA,uBAIJ,iEACE,OAGF,mEACE,kBACA,aACA,mBACA","file":"index.min.css"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useQuery } from '@tanstack/react-query';
|
|
2
|
+
import { useSeamClient } from '../../lib/seam/use-seam-client.js';
|
|
3
|
+
export function useAccessCodes(params) {
|
|
4
|
+
const { client } = useSeamClient();
|
|
5
|
+
const { data, ...rest } = useQuery({
|
|
6
|
+
enabled: client != null,
|
|
7
|
+
queryKey: ['access_codes', 'list', params],
|
|
8
|
+
queryFn: async () => {
|
|
9
|
+
if (client == null)
|
|
10
|
+
return [];
|
|
11
|
+
return await client?.accessCodes.list(params);
|
|
12
|
+
},
|
|
13
|
+
});
|
|
14
|
+
return { ...rest, accessCodes: data };
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=use-access-codes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-access-codes.js","sourceRoot":"","sources":["../../src/lib/hooks/use-access-codes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAG3D,MAAM,UAAU,cAAc,CAAC,MAE9B;IACC,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAiB;QACjD,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,MAAM,CAAC;QAC1C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC/C,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;AACvC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useQuery } from '@tanstack/react-query';
|
|
2
|
+
import { useSeamClient } from '../../lib/seam/use-seam-client.js';
|
|
3
|
+
export function useDevice(params) {
|
|
4
|
+
const objParams = typeof params === 'string' ? { device_id: params } : params;
|
|
5
|
+
const { client } = useSeamClient();
|
|
6
|
+
const { data, ...rest } = useQuery({
|
|
7
|
+
enabled: client != null,
|
|
8
|
+
queryKey: ['devices', 'get', params],
|
|
9
|
+
queryFn: async () => {
|
|
10
|
+
if (client == null)
|
|
11
|
+
return [];
|
|
12
|
+
return await client?.devices.get(objParams);
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
return { ...rest, device: data };
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=use-device.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-device.js","sourceRoot":"","sources":["../../src/lib/hooks/use-device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAG3D,MAAM,UAAU,SAAS,CACvB,MAIU;IAEV,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAiB;QACjD,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC;QACpC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAC7C,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;AAClC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useDevices } from '../../lib/seam/devices/use-devices.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../src/lib/hooks/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useSeamClient } from '../../lib/seam/use-seam-client.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/hooks/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA"}
|
|
@@ -4,22 +4,15 @@ import { v4 as uuidv4 } from 'uuid';
|
|
|
4
4
|
import { useSeamContext } from '../../lib/SeamProvider.js';
|
|
5
5
|
export function useSeamClient() {
|
|
6
6
|
const { client, clientOptions, publishableKey, ...context } = useSeamContext();
|
|
7
|
-
const
|
|
8
|
-
const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey);
|
|
7
|
+
const userIdentifierKey = useUserIdentifierKeyOrFingerprint(context.userIdentifierKey);
|
|
9
8
|
const { isLoading, isError, error, data } = useQuery({
|
|
10
|
-
queryKey: ['client', { client,
|
|
9
|
+
queryKey: ['client', { client, userIdentifierKey }],
|
|
11
10
|
queryFn: async () => {
|
|
12
11
|
if (client != null)
|
|
13
12
|
return client;
|
|
14
13
|
if (publishableKey == null) {
|
|
15
14
|
throw new Error('Missing publishableKey');
|
|
16
15
|
}
|
|
17
|
-
if (clientSession != null) {
|
|
18
|
-
return new Seam({
|
|
19
|
-
...clientOptions,
|
|
20
|
-
clientSessionToken: clientSession.token,
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
16
|
const res = await Seam.getClientSessionToken({
|
|
24
17
|
...clientOptions,
|
|
25
18
|
publishableKey,
|
|
@@ -28,7 +21,6 @@ export function useSeamClient() {
|
|
|
28
21
|
if (!res.ok || res.client_session?.token == null) {
|
|
29
22
|
throw new Error('Failed to get client access token');
|
|
30
23
|
}
|
|
31
|
-
setClientSession(res.client_session);
|
|
32
24
|
return new Seam({
|
|
33
25
|
...clientOptions,
|
|
34
26
|
clientSessionToken: res.client_session.token,
|
|
@@ -37,24 +29,19 @@ export function useSeamClient() {
|
|
|
37
29
|
});
|
|
38
30
|
return { client: data ?? null, isLoading, isError, error };
|
|
39
31
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
cachedClientSession != null ? JSON.parse(cachedClientSession) : null,
|
|
48
|
-
setClientSession,
|
|
49
|
-
];
|
|
50
|
-
}
|
|
51
|
-
function useUserIdentifierKey(userIdentifierKey) {
|
|
32
|
+
/**
|
|
33
|
+
* You'll almost always want to supply a user identifier key, but if you don't
|
|
34
|
+
* we'll automatically pick a fingerprint for this user. The user interface
|
|
35
|
+
* will show warnings when you use a fingerprint because this client session
|
|
36
|
+
* is bound to this machine, and is effectively ephemeral.
|
|
37
|
+
*/
|
|
38
|
+
function useUserIdentifierKeyOrFingerprint(userIdentifierKey) {
|
|
52
39
|
if (userIdentifierKey != null) {
|
|
53
40
|
return userIdentifierKey;
|
|
54
41
|
}
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
globalThis?.localStorage?.setItem(
|
|
58
|
-
return
|
|
42
|
+
const fingerprintValue = globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
|
|
43
|
+
`fingerprint_${uuidv4()}`;
|
|
44
|
+
globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprintValue);
|
|
45
|
+
return fingerprintValue;
|
|
59
46
|
}
|
|
60
47
|
//# sourceMappingURL=use-seam-client.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,
|
|
1
|
+
{"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,MAAM,UAAU,aAAa;IAM3B,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,OAAO,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9E,MAAM,iBAAiB,GAAG,iCAAiC,CACzD,OAAO,CAAC,iBAAiB,CAC1B,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAO;QACzD,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;QACnD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAA;YAEjC,IAAI,cAAc,IAAI,IAAI,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAA;aAC1C;YAED,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,qBAAqB,CAAC;gBAC3C,GAAG,aAAa;gBAChB,cAAc;gBACd,iBAAiB;aAClB,CAAC,CAAA;YAEF,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,EAAE,KAAK,IAAI,IAAI,EAAE;gBAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;aACrD;YAED,OAAO,IAAI,IAAI,CAAC;gBACd,GAAG,aAAa;gBAChB,kBAAkB,EAAE,GAAG,CAAC,cAAc,CAAC,KAAK;aAC7C,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;AAC5D,CAAC;AAED;;;;;GAKG;AACH,SAAS,iCAAiC,CACxC,iBAAqC;IAErC,IAAI,iBAAiB,IAAI,IAAI,EAAE;QAC7B,OAAO,iBAAiB,CAAA;KACzB;IAED,MAAM,gBAAgB,GACpB,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC;QAC1D,eAAe,MAAM,EAAE,EAAE,CAAA;IAE3B,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAA;IAE5E,OAAO,gBAAgB,CAAA;AACzB,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { UseQueryResult } from '@tanstack/react-query';
|
|
2
|
+
import type { SeamError } from 'seamapi';
|
|
3
|
+
export type UseSeamQueryResult<Field extends string, ResponsePayload> = Omit<UseQueryResult<ResponsePayload, SeamError>, 'data'> & {
|
|
4
|
+
[key in Field]?: ResponsePayload;
|
|
5
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-seam-query-result.js","sourceRoot":"","sources":["../../src/lib/types/use-seam-query-result.ts"],"names":[],"mappings":""}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TableBody, TableCell, TableHeader, TableRow, TableTitle, } from '../../../lib/ui/Table/index.js';
|
|
3
|
+
import { useAccessCodes } from '../../../lib/hooks/use-access-codes.js';
|
|
3
4
|
import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
|
|
4
5
|
import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
|
|
5
6
|
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
|
|
6
7
|
import { Caption } from '../../../lib/ui/typography/Caption.js';
|
|
7
8
|
import { Title } from '../../../lib/ui/typography/Title.js';
|
|
8
9
|
export function AccessCodeTable(props) {
|
|
9
|
-
const { accessCodes
|
|
10
|
+
const { accessCodes } = useAccessCodes({
|
|
11
|
+
device_id: props.deviceId,
|
|
12
|
+
});
|
|
13
|
+
const { onClickBack } = props;
|
|
14
|
+
if (!accessCodes)
|
|
15
|
+
return _jsx(_Fragment, { children: null });
|
|
10
16
|
return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onClickBack: onClickBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell' })] }, code.access_code_id))) })] }));
|
|
11
17
|
}
|
|
12
18
|
const t = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,GACX,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAElD,MAAM,UAAU,eAAe,CAAC,KAG/B;IACC,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QACrC,SAAS,EAAE,KAAK,CAAC,QAAQ;KAC1B,CAAC,CAAA;IACF,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAE7B,IAAI,CAAC,WAAW;QAAE,OAAO,4BAAG,IAAI,GAAI,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,GAAI,EAC3C,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,eACP,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KAdC,IAAI,CAAC,cAAc,CAevB,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}
|
|
@@ -12,11 +12,9 @@ export function DeviceDetails(props) {
|
|
|
12
12
|
const { device } = props;
|
|
13
13
|
const lockStatus = device.properties.locked ? t.locked : t.unlocked;
|
|
14
14
|
const accessCodeLength = device.properties?.schlage_metadata?.access_code_length;
|
|
15
|
-
// TODO : Fetch access codes
|
|
16
|
-
const accessCodes = [];
|
|
17
15
|
const [showingAccessCodes, toggleAccessCodes] = useToggle();
|
|
18
16
|
if (showingAccessCodes) {
|
|
19
|
-
return (_jsx(AccessCodeTable, {
|
|
17
|
+
return (_jsx(AccessCodeTable, { deviceId: device.device_id, onClickBack: toggleAccessCodes }));
|
|
20
18
|
}
|
|
21
19
|
return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device' }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsx(OnlineStatus, { device: device }), _jsx(BatteryStatus, { device: device }), _jsx(ModelStatus, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodes, children: [_jsxs("span", { className: 'seam-value', children: ["49 ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content', children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
|
|
22
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seamapi/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.1",
|
|
4
4
|
"description": "Seam React component library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -93,17 +93,17 @@
|
|
|
93
93
|
"@tanstack/react-query": "^4.28.0",
|
|
94
94
|
"classnames": "^2.3.2",
|
|
95
95
|
"luxon": "^3.3.0",
|
|
96
|
-
"seamapi": "^5.19.0-alpha.
|
|
96
|
+
"seamapi": "^5.19.0-alpha.3",
|
|
97
97
|
"uuid": "^9.0.0"
|
|
98
98
|
},
|
|
99
99
|
"devDependencies": {
|
|
100
100
|
"@babel/preset-env": "^7.21.4",
|
|
101
101
|
"@babel/preset-react": "^7.18.6",
|
|
102
102
|
"@babel/preset-typescript": "^7.21.4",
|
|
103
|
-
"@seamapi/fake-seam-connect": "^0.3.0-alpha.5",
|
|
104
103
|
"@emotion/styled": "^11.10.6",
|
|
105
104
|
"@mui/icons-material": "^5.11.16",
|
|
106
105
|
"@mui/material": "^5.12.2",
|
|
106
|
+
"@seamapi/fake-seam-connect": "^0.3.0-alpha.5",
|
|
107
107
|
"@storybook/addon-essentials": "^7.0.2",
|
|
108
108
|
"@storybook/addon-interactions": "^7.0.2",
|
|
109
109
|
"@storybook/addon-links": "^7.0.2",
|
|
@@ -135,6 +135,7 @@
|
|
|
135
135
|
"eslint-plugin-unused-imports": "^2.0.0",
|
|
136
136
|
"fast-glob": "^3.2.12",
|
|
137
137
|
"http-proxy-middleware": "^2.0.6",
|
|
138
|
+
"isomorphic-fetch": "^3.0.0",
|
|
138
139
|
"jest": "^29.5.0",
|
|
139
140
|
"jest-environment-jsdom": "^29.5.0",
|
|
140
141
|
"prettier": "^2.3.0",
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useQuery } from '@tanstack/react-query'
|
|
2
|
+
import type { AccessCode, SeamError } from 'seamapi'
|
|
3
|
+
|
|
4
|
+
import { useSeamClient } from 'lib/seam/use-seam-client.js'
|
|
5
|
+
import type { UseSeamQueryResult } from 'lib/types/use-seam-query-result.js'
|
|
6
|
+
|
|
7
|
+
export function useAccessCodes(params: {
|
|
8
|
+
device_id: string
|
|
9
|
+
}): UseSeamQueryResult<'accessCodes', AccessCode[]> {
|
|
10
|
+
const { client } = useSeamClient()
|
|
11
|
+
const { data, ...rest } = useQuery<any, SeamError>({
|
|
12
|
+
enabled: client != null,
|
|
13
|
+
queryKey: ['access_codes', 'list', params],
|
|
14
|
+
queryFn: async () => {
|
|
15
|
+
if (client == null) return []
|
|
16
|
+
return await client?.accessCodes.list(params)
|
|
17
|
+
},
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
return { ...rest, accessCodes: data }
|
|
21
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useQuery } from '@tanstack/react-query'
|
|
2
|
+
import type { Device, SeamError } from 'seamapi'
|
|
3
|
+
|
|
4
|
+
import { useSeamClient } from 'lib/seam/use-seam-client.js'
|
|
5
|
+
import type { UseSeamQueryResult } from 'lib/types/use-seam-query-result.js'
|
|
6
|
+
|
|
7
|
+
export function useDevice(
|
|
8
|
+
params:
|
|
9
|
+
| {
|
|
10
|
+
device_id: string
|
|
11
|
+
}
|
|
12
|
+
| string
|
|
13
|
+
): UseSeamQueryResult<'device', Device<any>> {
|
|
14
|
+
const objParams = typeof params === 'string' ? { device_id: params } : params
|
|
15
|
+
const { client } = useSeamClient()
|
|
16
|
+
const { data, ...rest } = useQuery<any, SeamError>({
|
|
17
|
+
enabled: client != null,
|
|
18
|
+
queryKey: ['devices', 'get', params],
|
|
19
|
+
queryFn: async () => {
|
|
20
|
+
if (client == null) return []
|
|
21
|
+
return await client?.devices.get(objParams)
|
|
22
|
+
},
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
return { ...rest, device: data }
|
|
26
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useDevices } from 'lib/seam/devices/use-devices.js'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useSeamClient } from 'lib/seam/use-seam-client.js'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useQuery } from '@tanstack/react-query'
|
|
2
|
-
import {
|
|
2
|
+
import { Seam } from 'seamapi'
|
|
3
3
|
import { v4 as uuidv4 } from 'uuid'
|
|
4
4
|
|
|
5
5
|
import { useSeamContext } from 'lib/SeamProvider.js'
|
|
@@ -11,11 +11,12 @@ export function useSeamClient(): {
|
|
|
11
11
|
error: unknown
|
|
12
12
|
} {
|
|
13
13
|
const { client, clientOptions, publishableKey, ...context } = useSeamContext()
|
|
14
|
-
const
|
|
15
|
-
|
|
14
|
+
const userIdentifierKey = useUserIdentifierKeyOrFingerprint(
|
|
15
|
+
context.userIdentifierKey
|
|
16
|
+
)
|
|
16
17
|
|
|
17
18
|
const { isLoading, isError, error, data } = useQuery<Seam>({
|
|
18
|
-
queryKey: ['client', { client,
|
|
19
|
+
queryKey: ['client', { client, userIdentifierKey }],
|
|
19
20
|
queryFn: async () => {
|
|
20
21
|
if (client != null) return client
|
|
21
22
|
|
|
@@ -23,13 +24,6 @@ export function useSeamClient(): {
|
|
|
23
24
|
throw new Error('Missing publishableKey')
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
if (clientSession != null) {
|
|
27
|
-
return new Seam({
|
|
28
|
-
...clientOptions,
|
|
29
|
-
clientSessionToken: clientSession.token,
|
|
30
|
-
})
|
|
31
|
-
}
|
|
32
|
-
|
|
33
27
|
const res = await Seam.getClientSessionToken({
|
|
34
28
|
...clientOptions,
|
|
35
29
|
publishableKey,
|
|
@@ -40,8 +34,6 @@ export function useSeamClient(): {
|
|
|
40
34
|
throw new Error('Failed to get client access token')
|
|
41
35
|
}
|
|
42
36
|
|
|
43
|
-
setClientSession(res.client_session)
|
|
44
|
-
|
|
45
37
|
return new Seam({
|
|
46
38
|
...clientOptions,
|
|
47
39
|
clientSessionToken: res.client_session.token,
|
|
@@ -52,34 +44,24 @@ export function useSeamClient(): {
|
|
|
52
44
|
return { client: data ?? null, isLoading, isError, error }
|
|
53
45
|
}
|
|
54
46
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
JSON.stringify(clientSession)
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const cachedClientSession = globalThis?.localStorage?.getItem(localStorageKey)
|
|
69
|
-
|
|
70
|
-
return [
|
|
71
|
-
cachedClientSession != null ? JSON.parse(cachedClientSession) : null,
|
|
72
|
-
setClientSession,
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
function useUserIdentifierKey(userIdentifierKey: string | undefined): string {
|
|
47
|
+
/**
|
|
48
|
+
* You'll almost always want to supply a user identifier key, but if you don't
|
|
49
|
+
* we'll automatically pick a fingerprint for this user. The user interface
|
|
50
|
+
* will show warnings when you use a fingerprint because this client session
|
|
51
|
+
* is bound to this machine, and is effectively ephemeral.
|
|
52
|
+
*/
|
|
53
|
+
function useUserIdentifierKeyOrFingerprint(
|
|
54
|
+
userIdentifierKey: string | undefined
|
|
55
|
+
): string {
|
|
77
56
|
if (userIdentifierKey != null) {
|
|
78
57
|
return userIdentifierKey
|
|
79
58
|
}
|
|
80
59
|
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
60
|
+
const fingerprintValue =
|
|
61
|
+
globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
|
|
62
|
+
`fingerprint_${uuidv4()}`
|
|
63
|
+
|
|
64
|
+
globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprintValue)
|
|
65
|
+
|
|
66
|
+
return fingerprintValue
|
|
85
67
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { UseQueryResult } from '@tanstack/react-query'
|
|
2
|
+
import type { SeamError } from 'seamapi'
|
|
3
|
+
|
|
4
|
+
export type UseSeamQueryResult<Field extends string, ResponsePayload> = Omit<
|
|
5
|
+
UseQueryResult<ResponsePayload, SeamError>,
|
|
6
|
+
'data'
|
|
7
|
+
> & { [key in Field]?: ResponsePayload }
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import type { AccessCode } from 'seamapi'
|
|
2
|
-
|
|
3
1
|
import {
|
|
4
2
|
TableBody,
|
|
5
3
|
TableCell,
|
|
@@ -8,6 +6,7 @@ import {
|
|
|
8
6
|
TableTitle,
|
|
9
7
|
} from 'lib/ui/Table/index.js'
|
|
10
8
|
|
|
9
|
+
import { useAccessCodes } from 'lib/hooks/use-access-codes.js'
|
|
11
10
|
import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
|
|
12
11
|
import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
|
|
13
12
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
@@ -15,10 +14,15 @@ import { Caption } from 'lib/ui/typography/Caption.js'
|
|
|
15
14
|
import { Title } from 'lib/ui/typography/Title.js'
|
|
16
15
|
|
|
17
16
|
export function AccessCodeTable(props: {
|
|
18
|
-
|
|
17
|
+
deviceId: string
|
|
19
18
|
onClickBack?: () => void
|
|
20
19
|
}): JSX.Element {
|
|
21
|
-
const { accessCodes
|
|
20
|
+
const { accessCodes } = useAccessCodes({
|
|
21
|
+
device_id: props.deviceId,
|
|
22
|
+
})
|
|
23
|
+
const { onClickBack } = props
|
|
24
|
+
|
|
25
|
+
if (!accessCodes) return <>{null}</>
|
|
22
26
|
|
|
23
27
|
return (
|
|
24
28
|
<div className='seam-access-code-table'>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type LockDevice } from 'seamapi'
|
|
2
2
|
|
|
3
3
|
import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
|
|
4
4
|
import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
|
|
@@ -9,7 +9,11 @@ import { OnlineStatus } from 'lib/ui/DeviceDetails/OnlineStatus.js'
|
|
|
9
9
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
10
10
|
import useToggle from 'lib/use-toggle.js'
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export interface DeviceDetailsProps {
|
|
13
|
+
device: LockDevice
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
|
|
13
17
|
const { device } = props
|
|
14
18
|
|
|
15
19
|
const lockStatus = device.properties.locked ? t.locked : t.unlocked
|
|
@@ -17,15 +21,12 @@ export function DeviceDetails(props: { device: LockDevice }): JSX.Element {
|
|
|
17
21
|
const accessCodeLength =
|
|
18
22
|
device.properties?.schlage_metadata?.access_code_length
|
|
19
23
|
|
|
20
|
-
// TODO : Fetch access codes
|
|
21
|
-
const accessCodes: AccessCode[] = []
|
|
22
|
-
|
|
23
24
|
const [showingAccessCodes, toggleAccessCodes] = useToggle()
|
|
24
25
|
|
|
25
26
|
if (showingAccessCodes) {
|
|
26
27
|
return (
|
|
27
28
|
<AccessCodeTable
|
|
28
|
-
|
|
29
|
+
deviceId={device.device_id}
|
|
29
30
|
onClickBack={toggleAccessCodes}
|
|
30
31
|
/>
|
|
31
32
|
)
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@mixin all {
|
|
2
|
+
.seam-access-code-table {
|
|
3
|
+
.seam-content-header {
|
|
4
|
+
margin: 0 16px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.seam-table-header {
|
|
8
|
+
margin-bottom: 16px;
|
|
9
|
+
height: 56px;
|
|
10
|
+
padding: 0 16px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.seam-icon-cell {
|
|
14
|
+
flex: 0;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
|
|
19
|
+
> div {
|
|
20
|
+
width: 40px;
|
|
21
|
+
height: 40px;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.seam-name-cell {
|
|
29
|
+
flex: 1;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
align-items: flex-start;
|
|
33
|
+
gap: 2px;
|
|
34
|
+
|
|
35
|
+
.seam-access-code-details {
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
line-height: 134%;
|
|
38
|
+
color: var(--text-gray-1);
|
|
39
|
+
|
|
40
|
+
.seam-dot-divider {
|
|
41
|
+
margin: 0 4px;
|
|
42
|
+
color: var(--text-gray-3);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.seam-action-cell {
|
|
48
|
+
margin-right: 12px;
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@mixin all {
|
|
2
|
+
.seam-button {
|
|
3
|
+
border-radius: 6px;
|
|
4
|
+
border: 1px solid rgb(0 122 252 / 50%);
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
|
|
7
|
+
&.seam-icon-button {
|
|
8
|
+
background: #fff;
|
|
9
|
+
padding: 6px;
|
|
10
|
+
line-height: 0;
|
|
11
|
+
|
|
12
|
+
&:hover {
|
|
13
|
+
background: rgb(0 122 252 / 8%);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
@mixin all {
|
|
2
|
+
.seam-device-details {
|
|
3
|
+
padding: 0 24px 24px;
|
|
4
|
+
|
|
5
|
+
.seam-body {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: 16px;
|
|
9
|
+
|
|
10
|
+
.seam-box {
|
|
11
|
+
border: 1px solid var(--input-border);
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
|
|
14
|
+
.seam-content {
|
|
15
|
+
padding: 12px 12px 12px 16px;
|
|
16
|
+
|
|
17
|
+
&.seam-access-codes {
|
|
18
|
+
padding: 12px 8px 12px 16px;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: space-between;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
|
|
24
|
+
&:hover {
|
|
25
|
+
background: var(--item-hover-bg);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&.seam-access-code-length {
|
|
30
|
+
border-top: 1px solid var(--input-border);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.seam-label {
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
line-height: 134%;
|
|
36
|
+
color: var(--text-gray-1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.seam-value {
|
|
40
|
+
display: block;
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
font-size: 16px;
|
|
43
|
+
line-height: 134%;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.seam-summary {
|
|
49
|
+
padding: 24px 16px;
|
|
50
|
+
border-radius: 16px;
|
|
51
|
+
background: var(--bg-a);
|
|
52
|
+
|
|
53
|
+
.seam-content {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: 20px;
|
|
57
|
+
|
|
58
|
+
.seam-image {
|
|
59
|
+
width: 100px;
|
|
60
|
+
height: 100px;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
|
|
64
|
+
img {
|
|
65
|
+
max-width: 100%;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.seam-info {
|
|
70
|
+
.seam-device-name {
|
|
71
|
+
margin-bottom: 16px;
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
font-size: 21px;
|
|
74
|
+
line-height: 132%;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.seam-properties {
|
|
78
|
+
display: grid;
|
|
79
|
+
grid-template-columns: min-content 1fr;
|
|
80
|
+
grid-auto-rows: 1fr;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
line-height: 134%;
|
|
83
|
+
row-gap: 4px;
|
|
84
|
+
column-gap: 28px;
|
|
85
|
+
|
|
86
|
+
.seam-label {
|
|
87
|
+
color: var(--text-gray-2);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.seam-status-text {
|
|
91
|
+
color: var(--text-gray-1);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
svg {
|
|
95
|
+
scale: 0.75;
|
|
96
|
+
margin-right: 8px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
> * {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.seam-icon-cell {
|
|
109
|
+
flex: 0;
|
|
110
|
+
margin-left: 8px;
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
114
|
+
|
|
115
|
+
> div {
|
|
116
|
+
width: 40px;
|
|
117
|
+
height: 40px;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.seam-name-cell {
|
|
125
|
+
flex: 1;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.seam-action-cell {
|
|
129
|
+
margin-right: 12px;
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@mixin header {
|
|
2
|
+
.seam-content-header {
|
|
3
|
+
height: 56px;
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
position: relative;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
width: 100%;
|
|
9
|
+
|
|
10
|
+
.seam-back-icon {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 50%;
|
|
13
|
+
transform: translate(0, -25%);
|
|
14
|
+
left: 0;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.seam-title {
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
line-height: 134%;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin all {
|
|
26
|
+
@include header;
|
|
27
|
+
}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
@use './typography';
|
|
2
|
+
@use './tables';
|
|
3
|
+
@use './inputs';
|
|
4
|
+
@use './buttons';
|
|
5
|
+
@use './layout';
|
|
6
|
+
@use './access-code-table';
|
|
7
|
+
@use './device-details';
|
|
8
|
+
|
|
1
9
|
.seam-components {
|
|
2
10
|
font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont,
|
|
3
11
|
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
|
@@ -13,16 +21,17 @@
|
|
|
13
21
|
--item-hover-bg: #f4f6f8;
|
|
14
22
|
|
|
15
23
|
// Reset
|
|
24
|
+
/* stylelint-disable */
|
|
16
25
|
@import 'the-new-css-reset/css/reset.css';
|
|
17
26
|
|
|
18
27
|
// Globals
|
|
19
|
-
@
|
|
20
|
-
@
|
|
21
|
-
@
|
|
22
|
-
@
|
|
23
|
-
@
|
|
28
|
+
@include typography.all;
|
|
29
|
+
@include tables.all;
|
|
30
|
+
@include inputs.all;
|
|
31
|
+
@include buttons.all;
|
|
32
|
+
@include layout.all;
|
|
24
33
|
|
|
25
34
|
// Components
|
|
26
|
-
@
|
|
27
|
-
@
|
|
35
|
+
@include access-code-table.all;
|
|
36
|
+
@include device-details.all;
|
|
28
37
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@mixin header {
|
|
2
|
+
.seam-table-header {
|
|
3
|
+
display: flex;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
align-items: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.seam-table-title {
|
|
9
|
+
font-size: 21px;
|
|
10
|
+
line-height: 132%;
|
|
11
|
+
|
|
12
|
+
.seam-caption {
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
line-height: 134%;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin row {
|
|
20
|
+
.seam-table-row {
|
|
21
|
+
display: flex;
|
|
22
|
+
padding: 4px;
|
|
23
|
+
height: 72px;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
background: rgb(244 246 248 / 100%);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.seam-title {
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
font-size: 18px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin cell {
|
|
37
|
+
.seam-table-cell {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
padding: 4px;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@mixin all {
|
|
45
|
+
@include header;
|
|
46
|
+
@include row;
|
|
47
|
+
@include cell;
|
|
48
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@mixin headers {
|
|
2
|
+
h1,
|
|
3
|
+
h2,
|
|
4
|
+
h3,
|
|
5
|
+
h4,
|
|
6
|
+
h5,
|
|
7
|
+
h6 {
|
|
8
|
+
font-weight: 600;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin caption {
|
|
13
|
+
.seam-caption {
|
|
14
|
+
color: var(--text-gray-2);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin danger-text {
|
|
19
|
+
.seam-text-danger {
|
|
20
|
+
color: var(--status-red-alert);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin all {
|
|
25
|
+
@include headers;
|
|
26
|
+
@include caption;
|
|
27
|
+
@include danger-text;
|
|
28
|
+
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
.seam-access-code-table {
|
|
2
|
-
.seam-content-header {
|
|
3
|
-
margin: 0 16px;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.seam-table-header {
|
|
7
|
-
margin-bottom: 16px;
|
|
8
|
-
height: 56px;
|
|
9
|
-
padding: 0 16px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.seam-icon-cell {
|
|
13
|
-
flex: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
|
|
18
|
-
> div {
|
|
19
|
-
width: 40px;
|
|
20
|
-
height: 40px;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.seam-name-cell {
|
|
28
|
-
flex: 1;
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
align-items: flex-start;
|
|
32
|
-
gap: 2px;
|
|
33
|
-
|
|
34
|
-
.seam-access-code-details {
|
|
35
|
-
font-size: 14px;
|
|
36
|
-
line-height: 134%;
|
|
37
|
-
color: var(--text-gray-1);
|
|
38
|
-
|
|
39
|
-
.seam-dot-divider {
|
|
40
|
-
margin: 0 4px;
|
|
41
|
-
color: var(--text-gray-3);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.seam-action-cell {
|
|
47
|
-
margin-right: 12px;
|
|
48
|
-
display: flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
}
|
|
52
|
-
}
|
package/src/styles/buttons.scss
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
.seam-content-header {
|
|
2
|
-
height: 56px;
|
|
3
|
-
display: flex;
|
|
4
|
-
align-items: center;
|
|
5
|
-
position: relative;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
width: 100%;
|
|
8
|
-
|
|
9
|
-
.seam-back-icon {
|
|
10
|
-
position: absolute;
|
|
11
|
-
top: 50%;
|
|
12
|
-
transform: translate(0, -25%);
|
|
13
|
-
left: 0;
|
|
14
|
-
cursor: pointer;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.seam-title {
|
|
18
|
-
font-size: 16px;
|
|
19
|
-
line-height: 134%;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
.seam-device-details {
|
|
2
|
-
padding: 0 24px 24px;
|
|
3
|
-
|
|
4
|
-
.seam-body {
|
|
5
|
-
display: flex;
|
|
6
|
-
flex-direction: column;
|
|
7
|
-
gap: 16px;
|
|
8
|
-
|
|
9
|
-
.seam-box {
|
|
10
|
-
border: 1px solid var(--input-border);
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
|
|
13
|
-
.seam-content {
|
|
14
|
-
padding: 12px 12px 12px 16px;
|
|
15
|
-
|
|
16
|
-
&.seam-access-codes {
|
|
17
|
-
padding: 12px 8px 12px 16px;
|
|
18
|
-
display: flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
justify-content: space-between;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
|
|
23
|
-
&:hover {
|
|
24
|
-
background: var(--item-hover-bg);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&.seam-access-code-length {
|
|
29
|
-
border-top: 1px solid var(--input-border);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.seam-label {
|
|
33
|
-
font-size: 14px;
|
|
34
|
-
line-height: 134%;
|
|
35
|
-
color: var(--text-gray-1);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.seam-value {
|
|
39
|
-
display: block;
|
|
40
|
-
font-weight: 600;
|
|
41
|
-
font-size: 16px;
|
|
42
|
-
line-height: 134%;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.seam-summary {
|
|
48
|
-
padding: 24px 16px;
|
|
49
|
-
border-radius: 16px;
|
|
50
|
-
background: var(--bg-a);
|
|
51
|
-
|
|
52
|
-
.seam-content {
|
|
53
|
-
display: flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: 20px;
|
|
56
|
-
|
|
57
|
-
.seam-image {
|
|
58
|
-
width: 100px;
|
|
59
|
-
height: 100px;
|
|
60
|
-
display: flex;
|
|
61
|
-
align-items: center;
|
|
62
|
-
|
|
63
|
-
img {
|
|
64
|
-
max-width: 100%;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.seam-info {
|
|
69
|
-
.seam-device-name {
|
|
70
|
-
margin-bottom: 16px;
|
|
71
|
-
font-weight: 600;
|
|
72
|
-
font-size: 21px;
|
|
73
|
-
line-height: 132%;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.seam-properties {
|
|
77
|
-
display: grid;
|
|
78
|
-
grid-template-columns: min-content 1fr;
|
|
79
|
-
grid-auto-rows: 1fr;
|
|
80
|
-
font-size: 14px;
|
|
81
|
-
line-height: 134%;
|
|
82
|
-
row-gap: 4px;
|
|
83
|
-
column-gap: 28px;
|
|
84
|
-
|
|
85
|
-
.seam-label {
|
|
86
|
-
color: var(--text-gray-2);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.seam-status-text {
|
|
90
|
-
color: var(--text-gray-1);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
svg {
|
|
94
|
-
scale: 0.75;
|
|
95
|
-
margin-right: 8px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
> * {
|
|
99
|
-
display: flex;
|
|
100
|
-
align-items: center;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.seam-icon-cell {
|
|
108
|
-
flex: 0;
|
|
109
|
-
margin-left: 8px;
|
|
110
|
-
display: flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
justify-content: center;
|
|
113
|
-
|
|
114
|
-
> div {
|
|
115
|
-
width: 40px;
|
|
116
|
-
height: 40px;
|
|
117
|
-
display: flex;
|
|
118
|
-
align-items: center;
|
|
119
|
-
justify-content: center;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.seam-name-cell {
|
|
124
|
-
flex: 1;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.seam-action-cell {
|
|
128
|
-
margin-right: 12px;
|
|
129
|
-
display: flex;
|
|
130
|
-
align-items: center;
|
|
131
|
-
justify-content: center;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}
|
package/src/styles/inputs.scss
DELETED
package/src/styles/tables.scss
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
.seam-table-header {
|
|
2
|
-
display: flex;
|
|
3
|
-
justify-content: space-between;
|
|
4
|
-
align-items: center;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.seam-table-title {
|
|
8
|
-
font-size: 21px;
|
|
9
|
-
line-height: 132%;
|
|
10
|
-
|
|
11
|
-
.seam-caption {
|
|
12
|
-
font-size: 16px;
|
|
13
|
-
line-height: 134%;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.seam-table-row {
|
|
18
|
-
display: flex;
|
|
19
|
-
padding: 4px;
|
|
20
|
-
height: 72px;
|
|
21
|
-
|
|
22
|
-
&:hover {
|
|
23
|
-
background: rgb(244 246 248 / 100%);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.seam-title {
|
|
27
|
-
font-weight: 600;
|
|
28
|
-
font-size: 18px;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.seam-table-cell {
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
padding: 4px;
|
|
36
|
-
}
|