@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.
Files changed (51) hide show
  1. package/README.md +0 -21
  2. package/index.css +1 -0
  3. package/index.css.map +1 -1
  4. package/index.min.css.map +1 -1
  5. package/lib/hooks/use-access-codes.d.ts +5 -0
  6. package/lib/hooks/use-access-codes.js +16 -0
  7. package/lib/hooks/use-access-codes.js.map +1 -0
  8. package/lib/hooks/use-device.d.ts +5 -0
  9. package/lib/hooks/use-device.js +17 -0
  10. package/lib/hooks/use-device.js.map +1 -0
  11. package/lib/hooks/use-devices.d.ts +1 -0
  12. package/lib/hooks/use-devices.js +2 -0
  13. package/lib/hooks/use-devices.js.map +1 -0
  14. package/lib/hooks/use-seam-client.d.ts +1 -0
  15. package/lib/hooks/use-seam-client.js +2 -0
  16. package/lib/hooks/use-seam-client.js.map +1 -0
  17. package/lib/seam/use-seam-client.js +13 -26
  18. package/lib/seam/use-seam-client.js.map +1 -1
  19. package/lib/types/use-seam-query-result.d.ts +5 -0
  20. package/lib/types/use-seam-query-result.js +2 -0
  21. package/lib/types/use-seam-query-result.js.map +1 -0
  22. package/lib/ui/AccessCodeTable/AccessCodeTable.d.ts +1 -2
  23. package/lib/ui/AccessCodeTable/AccessCodeTable.js +8 -2
  24. package/lib/ui/AccessCodeTable/AccessCodeTable.js.map +1 -1
  25. package/lib/ui/DeviceDetails/DeviceDetails.d.ts +3 -2
  26. package/lib/ui/DeviceDetails/DeviceDetails.js +1 -3
  27. package/lib/ui/DeviceDetails/DeviceDetails.js.map +1 -1
  28. package/package.json +4 -3
  29. package/src/lib/hooks/use-access-codes.ts +21 -0
  30. package/src/lib/hooks/use-device.ts +26 -0
  31. package/src/lib/hooks/use-devices.ts +1 -0
  32. package/src/lib/hooks/use-seam-client.ts +1 -0
  33. package/src/lib/seam/use-seam-client.ts +21 -39
  34. package/src/lib/types/use-seam-query-result.ts +7 -0
  35. package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +8 -4
  36. package/src/lib/ui/DeviceDetails/DeviceDetails.tsx +7 -6
  37. package/src/styles/_access-code-table.scss +54 -0
  38. package/src/styles/_buttons.scss +17 -0
  39. package/src/styles/_device-details.scss +136 -0
  40. package/src/styles/_inputs.scss +12 -0
  41. package/src/styles/_layout.scss +27 -0
  42. package/src/styles/{main.scss → _main.scss} +16 -7
  43. package/src/styles/_tables.scss +48 -0
  44. package/src/styles/_typography.scss +28 -0
  45. package/src/styles/access-code-table.scss +0 -52
  46. package/src/styles/buttons.scss +0 -15
  47. package/src/styles/content-header.scss +0 -21
  48. package/src/styles/device-details.scss +0 -134
  49. package/src/styles/inputs.scss +0 -6
  50. package/src/styles/tables.scss +0 -36
  51. 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
@@ -8,6 +8,7 @@
8
8
  --bg-a: #f1f3f4;
9
9
  --status-red-alert: #e36857;
10
10
  --item-hover-bg: #f4f6f8;
11
+ /* stylelint-disable */
11
12
  @import 'the-new-css-reset/css/reset.css';
12
13
  }
13
14
  .seam-components h1,
package/index.css.map CHANGED
@@ -1 +1 @@
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/content-header.scss","src/styles/access-code-table.scss","src/styles/device-details.scss"],"names":[],"mappings":"AAAA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGQ;;ACfV;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;EACE;;AAGF;EACE;;ACdF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AClCF;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"}
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/main.scss","src/styles/typography.scss","src/styles/tables.scss","src/styles/inputs.scss","src/styles/buttons.scss","src/styles/content-header.scss","src/styles/access-code-table.scss","src/styles/device-details.scss"],"names":[],"mappings":"AAAA,iBACE,2JAIA,mBACA,uBACA,uBACA,uBACA,wBACA,gBACA,4BACA,yBAGQ,yCCfV,wHAME,gBAGF,+BACE,yBAGF,mCACE,8BCdF,oCACE,aACA,8BACA,mBAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAIJ,iCACE,aACA,YACA,YAEA,uCACE,mBAGF,6CACE,gBACA,eAIJ,kCACE,aACA,mBACA,YClCF,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"}
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,5 @@
1
+ import type { AccessCode } from 'seamapi';
2
+ import type { UseSeamQueryResult } from '../../lib/types/use-seam-query-result.js';
3
+ export declare function useAccessCodes(params: {
4
+ device_id: string;
5
+ }): UseSeamQueryResult<'accessCodes', AccessCode[]>;
@@ -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,5 @@
1
+ import type { Device } from 'seamapi';
2
+ import type { UseSeamQueryResult } from '../../lib/types/use-seam-query-result.js';
3
+ export declare function useDevice(params: {
4
+ device_id: string;
5
+ } | string): UseSeamQueryResult<'device', Device<any>>;
@@ -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,2 @@
1
+ export { useDevices } from '../../lib/seam/devices/use-devices.js';
2
+ //# sourceMappingURL=use-devices.js.map
@@ -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,2 @@
1
+ export { useSeamClient } from '../../lib/seam/use-seam-client.js';
2
+ //# sourceMappingURL=use-seam-client.js.map
@@ -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 [clientSession, setClientSession] = useClientSession();
8
- const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey);
7
+ const userIdentifierKey = useUserIdentifierKeyOrFingerprint(context.userIdentifierKey);
9
8
  const { isLoading, isError, error, data } = useQuery({
10
- queryKey: ['client', { client, clientSession, userIdentifierKey }],
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
- function useClientSession() {
41
- const localStorageKey = 'seam_client_session';
42
- const setClientSession = (clientSession) => {
43
- globalThis?.localStorage?.setItem(localStorageKey, JSON.stringify(clientSession));
44
- };
45
- const cachedClientSession = globalThis?.localStorage?.getItem(localStorageKey);
46
- return [
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 localStorageKey = 'seam_user_identifier_key';
56
- const key = globalThis?.localStorage?.getItem(localStorageKey) ?? uuidv4();
57
- globalThis?.localStorage?.setItem(localStorageKey, key);
58
- return key;
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":"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"}
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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=use-seam-query-result.js.map
@@ -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,5 +1,4 @@
1
- import type { AccessCode } from 'seamapi';
2
1
  export declare function AccessCodeTable(props: {
3
- accessCodes: AccessCode[];
2
+ deviceId: string;
4
3
  onClickBack?: () => void;
5
4
  }): JSX.Element;
@@ -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, onClickBack } = props;
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":";AAEA,OAAO,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,GACX,MAAM,uBAAuB,CAAA;AAE9B,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,WAAW,EAAE,GAAG,KAAK,CAAA;IAE1C,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"}
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"}
@@ -1,4 +1,5 @@
1
1
  import { type LockDevice } from 'seamapi';
2
- export declare function DeviceDetails(props: {
2
+ export interface DeviceDetailsProps {
3
3
  device: LockDevice;
4
- }): JSX.Element;
4
+ }
5
+ export declare function DeviceDetails(props: DeviceDetailsProps): JSX.Element;
@@ -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, { accessCodes: accessCodes, onClickBack: toggleAccessCodes }));
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":"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"}
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.14.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.2",
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 { type ClientSession, Seam } from 'seamapi'
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 [clientSession, setClientSession] = useClientSession()
15
- const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey)
14
+ const userIdentifierKey = useUserIdentifierKeyOrFingerprint(
15
+ context.userIdentifierKey
16
+ )
16
17
 
17
18
  const { isLoading, isError, error, data } = useQuery<Seam>({
18
- queryKey: ['client', { client, clientSession, userIdentifierKey }],
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
- function useClientSession(): [
56
- clientSession: ClientSession | null,
57
- setClientSession: (clientSession: ClientSession) => void
58
- ] {
59
- const localStorageKey = 'seam_client_session'
60
-
61
- const setClientSession = (clientSession: ClientSession): void => {
62
- globalThis?.localStorage?.setItem(
63
- localStorageKey,
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 localStorageKey = 'seam_user_identifier_key'
82
- const key = globalThis?.localStorage?.getItem(localStorageKey) ?? uuidv4()
83
- globalThis?.localStorage?.setItem(localStorageKey, key)
84
- return key
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
- accessCodes: AccessCode[]
17
+ deviceId: string
19
18
  onClickBack?: () => void
20
19
  }): JSX.Element {
21
- const { accessCodes, onClickBack } = props
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 AccessCode, type LockDevice } from 'seamapi'
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 function DeviceDetails(props: { device: LockDevice }): JSX.Element {
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
- accessCodes={accessCodes}
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,12 @@
1
+ @mixin text-field {
2
+ .seam-text-field {
3
+ padding: 0 8px;
4
+ height: 40px;
5
+ border: 1px solid var(--input-border);
6
+ border-radius: 8px;
7
+ }
8
+ }
9
+
10
+ @mixin all {
11
+ @include text-field;
12
+ }
@@ -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
- @import './typography';
20
- @import './tables';
21
- @import './inputs';
22
- @import './buttons';
23
- @import './content-header';
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
- @import './access-code-table';
27
- @import './device-details';
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
- }
@@ -1,15 +0,0 @@
1
- .seam-button {
2
- border-radius: 6px;
3
- border: 1px solid rgb(0 122 252 / 50%);
4
- cursor: pointer;
5
-
6
- &.seam-icon-button {
7
- background: #fff;
8
- padding: 6px;
9
- line-height: 0;
10
-
11
- &:hover {
12
- background: rgb(0 122 252 / 8%);
13
- }
14
- }
15
- }
@@ -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
- }
@@ -1,6 +0,0 @@
1
- .seam-text-field {
2
- padding: 0 8px;
3
- height: 40px;
4
- border: 1px solid var(--input-border);
5
- border-radius: 8px;
6
- }
@@ -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
- }
@@ -1,16 +0,0 @@
1
- h1,
2
- h2,
3
- h3,
4
- h4,
5
- h5,
6
- h6 {
7
- font-weight: 600;
8
- }
9
-
10
- .seam-caption {
11
- color: var(--text-gray-2);
12
- }
13
-
14
- .seam-text-danger {
15
- color: var(--status-red-alert);
16
- }