@seamapi/react 0.16.0 → 0.16.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 (19) hide show
  1. package/index.css +110 -3
  2. package/index.css.map +1 -1
  3. package/index.min.css +1 -1
  4. package/index.min.css.map +1 -1
  5. package/lib/seam/use-seam-client.js +9 -6
  6. package/lib/seam/use-seam-client.js.map +1 -1
  7. package/lib/ui/AccessCodeTable/AccessCodeTableContent.d.ts +6 -0
  8. package/lib/ui/AccessCodeTable/AccessCodeTableContent.js +15 -0
  9. package/lib/ui/AccessCodeTable/AccessCodeTableContent.js.map +1 -0
  10. package/lib/ui/DeviceDetails/DeviceDetails.js +2 -1
  11. package/lib/ui/DeviceDetails/DeviceDetails.js.map +1 -1
  12. package/package.json +5 -5
  13. package/src/lib/seam/use-seam-client.ts +9 -6
  14. package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx +61 -0
  15. package/src/lib/ui/DeviceDetails/DeviceDetails.tsx +2 -1
  16. package/src/styles/_device-details.scss +8 -0
  17. package/src/styles/_layout.scss +0 -1
  18. package/src/styles/_main.scss +2 -2
  19. package/src/styles/_reset.scss +114 -0
package/index.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * CSS Reset heavily inspired by Fraser Boag's reset.
3
+ * Source: https://www.boag.online/blog/css-reset
4
+ */
1
5
  .seam-components {
2
6
  font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3
7
  --primary: #007afc;
@@ -8,8 +12,105 @@
8
12
  --bg-a: #f1f3f4;
9
13
  --status-red-alert: #e36857;
10
14
  --item-hover-bg: #f4f6f8;
11
- /* stylelint-disable */
12
- @import 'the-new-css-reset/css/reset.css';
15
+ }
16
+ .seam-components *,
17
+ .seam-components *::before,
18
+ .seam-components *::after {
19
+ box-sizing: border-box;
20
+ }
21
+ .seam-components html,
22
+ .seam-components body,
23
+ .seam-components div,
24
+ .seam-components span,
25
+ .seam-components object,
26
+ .seam-components iframe,
27
+ .seam-components figure,
28
+ .seam-components h1,
29
+ .seam-components h2,
30
+ .seam-components h3,
31
+ .seam-components h4,
32
+ .seam-components h5,
33
+ .seam-components h6,
34
+ .seam-components p,
35
+ .seam-components blockquote,
36
+ .seam-components pre,
37
+ .seam-components a,
38
+ .seam-components code,
39
+ .seam-components em,
40
+ .seam-components img,
41
+ .seam-components small,
42
+ .seam-components strike,
43
+ .seam-components strong,
44
+ .seam-components sub,
45
+ .seam-components sup,
46
+ .seam-components tt,
47
+ .seam-components b,
48
+ .seam-components u,
49
+ .seam-components i,
50
+ .seam-components ol,
51
+ .seam-components ul,
52
+ .seam-components li,
53
+ .seam-components fieldset,
54
+ .seam-components form,
55
+ .seam-components label,
56
+ .seam-components table,
57
+ .seam-components caption,
58
+ .seam-components tbody,
59
+ .seam-components tfoot,
60
+ .seam-components thead,
61
+ .seam-components tr,
62
+ .seam-components th,
63
+ .seam-components td,
64
+ .seam-components main,
65
+ .seam-components canvas,
66
+ .seam-components embed,
67
+ .seam-components footer,
68
+ .seam-components header,
69
+ .seam-components nav,
70
+ .seam-components section,
71
+ .seam-components video {
72
+ margin: 0;
73
+ padding: 0;
74
+ border: 0;
75
+ font-size: 100%;
76
+ font-family: inherit;
77
+ vertical-align: baseline;
78
+ text-rendering: optimizelegibility;
79
+ -webkit-font-smoothing: antialiased;
80
+ text-size-adjust: none;
81
+ }
82
+ .seam-components footer,
83
+ .seam-components header,
84
+ .seam-components nav,
85
+ .seam-components section,
86
+ .seam-components main {
87
+ display: block;
88
+ }
89
+ .seam-components body {
90
+ line-height: 1;
91
+ }
92
+ .seam-components ol,
93
+ .seam-components ul {
94
+ list-style: none;
95
+ }
96
+ .seam-components blockquote,
97
+ .seam-components q {
98
+ quotes: none;
99
+ }
100
+ .seam-components blockquote::before,
101
+ .seam-components blockquote::after,
102
+ .seam-components q::before,
103
+ .seam-components q::after {
104
+ content: "";
105
+ content: none;
106
+ }
107
+ .seam-components table {
108
+ border-collapse: collapse;
109
+ border-spacing: 0;
110
+ }
111
+ .seam-components input {
112
+ appearance: none;
113
+ border-radius: 0;
13
114
  }
14
115
  .seam-components h1,
15
116
  .seam-components h2,
@@ -80,7 +181,6 @@
80
181
  align-items: center;
81
182
  position: relative;
82
183
  justify-content: center;
83
- width: 100%;
84
184
  }
85
185
  .seam-components .seam-content-header .seam-back-icon {
86
186
  position: absolute;
@@ -194,6 +294,13 @@
194
294
  .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img {
195
295
  max-width: 100%;
196
296
  }
297
+ .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info > .seam-label {
298
+ color: var(--text-gray-1);
299
+ font-weight: 600;
300
+ font-size: 14px;
301
+ line-height: 134%;
302
+ margin-bottom: 4px;
303
+ }
197
304
  .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name {
198
305
  margin-bottom: 16px;
199
306
  font-weight: 600;
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/_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"}
1
+ {"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","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":"AAAA;AAAA;AAAA;AAAA;ACSA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADfA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAmDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AE9GF;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;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AChBF;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;EACA;;AAGF;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 CHANGED
@@ -1 +1 @@
1
- .seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--primary: #007afc;--text-gray-1: #6e7179;--text-gray-2: #9da1a9;--text-gray-3: #d5d8dc;--input-border: #d5d8dc;--bg-a: #f1f3f4;--status-red-alert: #e36857;--item-hover-bg: #f4f6f8;@import'the-new-css-reset/css/reset.css'}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:var(--text-gray-2)}.seam-components .seam-text-danger{color:var(--status-red-alert)}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-button{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer}.seam-components .seam-button.seam-icon-button{background:#fff;padding:6px;line-height:0}.seam-components .seam-button.seam-icon-button:hover{background:rgba(0,122,252,.08)}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;width:100%}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(0, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%}.seam-components .seam-access-code-table .seam-content-header{margin:0 16px}.seam-components .seam-access-code-table .seam-table-header{margin-bottom:16px;height:56px;padding:0 16px}.seam-components .seam-access-code-table .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details .seam-dot-divider{margin:0 4px;color:var(--text-gray-3)}.seam-components .seam-access-code-table .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details{padding:0 24px 24px}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:var(--item-hover-bg)}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid var(--input-border)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:var(--bg-a)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:var(--text-gray-2)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=index.min.css.map */
1
+ .seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--primary: #007afc;--text-gray-1: #6e7179;--text-gray-2: #9da1a9;--text-gray-3: #d5d8dc;--input-border: #d5d8dc;--bg-a: #f1f3f4;--status-red-alert: #e36857;--item-hover-bg: #f4f6f8}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:var(--text-gray-2)}.seam-components .seam-text-danger{color:var(--status-red-alert)}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-button{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer}.seam-components .seam-button.seam-icon-button{background:#fff;padding:6px;line-height:0}.seam-components .seam-button.seam-icon-button:hover{background:rgba(0,122,252,.08)}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(0, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%}.seam-components .seam-access-code-table .seam-content-header{margin:0 16px}.seam-components .seam-access-code-table .seam-table-header{margin-bottom:16px;height:56px;padding:0 16px}.seam-components .seam-access-code-table .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details .seam-dot-divider{margin:0 4px;color:var(--text-gray-3)}.seam-components .seam-access-code-table .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details{padding:0 24px 24px}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:var(--item-hover-bg)}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid var(--input-border)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:var(--bg-a)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:var(--text-gray-1);font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:var(--text-gray-2)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=index.min.css.map */
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/_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"}
1
+ {"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_reset.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":"AASA,iBACE,2JAIA,mBACA,uBACA,uBACA,uBACA,wBACA,gBACA,4BACA,yBCfA,wEAGE,sBAGF,ylCAmDE,SACA,UACA,SACA,eACA,oBACA,wBACA,kCACA,mCACA,sBAGF,oHAKE,cAGF,sBACE,cAGF,wCAEE,gBAGF,+CAEE,YAGF,4HAIE,WACA,aAGF,uBACE,yBACA,iBAGF,uBACE,gBACA,gBC9GF,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,uBAEA,sDACE,kBACA,QACA,6BACA,OACA,eAGF,kDACE,eACA,iBChBF,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,oGACE,yBACA,gBACA,eACA,iBACA,kBAGF,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"}
package/lib/seam/use-seam-client.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useQuery } from '@tanstack/react-query';
2
+ import { useEffect } from 'react';
2
3
  import { Seam } from 'seamapi';
3
4
  import { v4 as uuidv4 } from 'uuid';
4
5
  import { useSeamContext } from '../../lib/SeamProvider.js';
@@ -44,13 +45,15 @@ export function useSeamClient() {
44
45
  });
45
46
  return { client: data ?? null, isLoading, isError, error };
46
47
  }
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
48
  function useUserIdentifierKeyOrFingerprint(userIdentifierKey) {
49
+ useEffect(() => {
50
+ if (userIdentifierKey != null)
51
+ return;
52
+ // eslint-disable-next-line no-console
53
+ console.warn(`Using an automatically generated fingerprint for the SeamProvider userIdentifierKey!
54
+ The user interface will show warnings when using a fingerprint.
55
+ This is not recommended because the client session is now bound to this machine and is effectively ephemeral.`);
56
+ }, [userIdentifierKey]);
54
57
  if (userIdentifierKey != null) {
55
58
  return userIdentifierKey;
56
59
  }
package/lib/seam/use-seam-client.js.map CHANGED
@@ -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,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,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,GAAG,OAAO,EACX,GAAG,cAAc,EAAE,CAAA;IACpB,MAAM,iBAAiB,GAAG,iCAAiC,CACzD,kBAAkB,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAC5D,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAO;QACzD,QAAQ,EAAE;YACR,QAAQ;YACR;gBACE,MAAM;gBACN,aAAa;gBACb,cAAc;gBACd,iBAAiB;gBACjB,kBAAkB;aACnB;SACF;QACD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAA;YAEjC,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC9B,OAAO,IAAI,IAAI,CAAC;oBACd,GAAG,aAAa;oBAChB,kBAAkB;iBACnB,CAAC,CAAA;aACH;YAED,IAAI,cAAc,IAAI,IAAI,EAAE;gBAC1B,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAA;aACF;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"}
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,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,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,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,GAAG,OAAO,EACX,GAAG,cAAc,EAAE,CAAA;IACpB,MAAM,iBAAiB,GAAG,iCAAiC,CACzD,kBAAkB,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAC5D,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAO;QACzD,QAAQ,EAAE;YACR,QAAQ;YACR;gBACE,MAAM;gBACN,aAAa;gBACb,cAAc;gBACd,iBAAiB;gBACjB,kBAAkB;aACnB;SACF;QACD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAA;YAEjC,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC9B,OAAO,IAAI,IAAI,CAAC;oBACd,GAAG,aAAa;oBAChB,kBAAkB;iBACnB,CAAC,CAAA;aACH;YAED,IAAI,cAAc,IAAI,IAAI,EAAE;gBAC1B,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAA;aACF;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,SAAS,iCAAiC,CACxC,iBAAqC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,IAAI,IAAI;YAAE,OAAM;QACrC,sCAAsC;QACtC,OAAO,CAAC,IAAI,CAAC;;8GAE6F,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,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"}
package/lib/ui/AccessCodeTable/AccessCodeTableContent.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { AccessCode } from 'seamapi';
2
+ export interface AccessCodeTableContentProps {
3
+ accessCodes: AccessCode[];
4
+ onClickBack?: () => void;
5
+ }
6
+ export declare function AccessCodeTableContent(props: AccessCodeTableContentProps): JSX.Element;
package/lib/ui/AccessCodeTable/AccessCodeTableContent.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { TableBody, TableCell, TableHeader, TableRow, TableTitle, } from '../../../lib/ui/Table/index.js';
3
+ import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
4
+ import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
5
+ import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
6
+ import { Caption } from '../../../lib/ui/typography/Caption.js';
7
+ import { Title } from '../../../lib/ui/typography/Title.js';
8
+ export function AccessCodeTableContent(props) {
9
+ const { accessCodes, onClickBack } = props;
10
+ 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
+ }
12
+ const t = {
13
+ accessCodes: 'Access Codes',
14
+ };
15
+ //# sourceMappingURL=AccessCodeTableContent.js.map
package/lib/ui/AccessCodeTable/AccessCodeTableContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccessCodeTableContent.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTableContent.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;AAOlD,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,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"}
package/lib/ui/DeviceDetails/DeviceDetails.js CHANGED
@@ -16,7 +16,7 @@ export function DeviceDetails(props) {
16
16
  if (showingAccessCodes) {
17
17
  return (_jsx(AccessCodeTable, { deviceId: device.device_id, onClickBack: toggleAccessCodes }));
18
18
  }
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 })] })] })] }));
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("span", { className: 'seam-label', children: t.device }), _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 })] })] })] }));
20
20
  }
21
21
  function AccessCodeLength(props) {
22
22
  const { accessCodeLength } = props;
@@ -26,6 +26,7 @@ function AccessCodeLength(props) {
26
26
  return (_jsxs("div", { className: 'seam-content seam-access-code-length', children: [_jsx("span", { className: 'seam-label', children: t.codeLength }), _jsxs("span", { className: 'seam-value', children: [accessCodeLength, " ", t.digits] })] }));
27
27
  }
28
28
  const t = {
29
+ device: 'Device',
29
30
  locked: 'Locked',
30
31
  unlocked: 'Unlocked',
31
32
  accessCodes: 'access codes',
package/lib/ui/DeviceDetails/DeviceDetails.js.map CHANGED
@@ -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.16.0",
3
+ "version": "0.16.1",
4
4
  "description": "Seam React component library.",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -44,7 +44,7 @@
44
44
  "!src/stories"
45
45
  ],
46
46
  "scripts": {
47
- "start": "concurrently --raw --kill-others npm:examples npm:storybook",
47
+ "start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook",
48
48
  "dev": "npm run start",
49
49
  "build": "npm run build:js",
50
50
  "prebuild": "del 'index.*' lib",
@@ -54,7 +54,7 @@
54
54
  "postbuild:js": "tsc-alias --project tsconfig.build.json",
55
55
  "build:css": "sass --load-path=node_modules src/index.scss:index.css",
56
56
  "postbuild:css": "sass --style=compressed --load-path=node_modules src/index.scss:index.min.css",
57
- "docs:start": "concurrently --raw --kill-others npm:examples npm:storybook:docs",
57
+ "docs:start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook:docs",
58
58
  "docs:build": "storybook build --docs --output-dir docs",
59
59
  "predocs:build": "npm run examples:build",
60
60
  "typecheck": "tsc",
@@ -71,9 +71,10 @@
71
71
  "storybook:docs": "storybook dev --docs --port 6007",
72
72
  "storybook:build": "storybook build",
73
73
  "prestorybook:build": "vite build examples",
74
- "examples": "vite examples --host --clearScreen false",
74
+ "examples": "vite examples",
75
75
  "examples:build": "vite build examples",
76
76
  "examples:preview": "vite preview examples",
77
+ "examples:storybook": "vite examples --host --clearScreen false --mode storybook",
77
78
  "preexamples:preview": "npm run examples:build",
78
79
  "generate": "svgr --out-dir src/lib/icons -- src/icons",
79
80
  "pregenerate": "del src/lib/icons",
@@ -148,7 +149,6 @@
148
149
  "storybook-addon-designs": "^7.0.0-beta.2",
149
150
  "stylelint": "^15.6.0",
150
151
  "stylelint-config-standard-scss": "^9.0.0",
151
- "the-new-css-reset": "^1.8.4",
152
152
  "ts-jest": "^29.1.0",
153
153
  "tsc-alias": "^1.8.5",
154
154
  "tsconfig-paths-webpack-plugin": "^4.0.1",
package/src/lib/seam/use-seam-client.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useQuery } from '@tanstack/react-query'
2
+ import { useEffect } from 'react'
2
3
  import { Seam } from 'seamapi'
3
4
  import { v4 as uuidv4 } from 'uuid'
4
5
 
@@ -68,15 +69,17 @@ export function useSeamClient(): {
68
69
  return { client: data ?? null, isLoading, isError, error }
69
70
  }
70
71
 
71
- /**
72
- * You'll almost always want to supply a user identifier key, but if you don't
73
- * we'll automatically pick a fingerprint for this user. The user interface
74
- * will show warnings when you use a fingerprint because this client session
75
- * is bound to this machine, and is effectively ephemeral.
76
- */
77
72
  function useUserIdentifierKeyOrFingerprint(
78
73
  userIdentifierKey: string | undefined
79
74
  ): string {
75
+ useEffect(() => {
76
+ if (userIdentifierKey != null) return
77
+ // eslint-disable-next-line no-console
78
+ console.warn(`Using an automatically generated fingerprint for the SeamProvider userIdentifierKey!
79
+ The user interface will show warnings when using a fingerprint.
80
+ This is not recommended because the client session is now bound to this machine and is effectively ephemeral.`)
81
+ }, [userIdentifierKey])
82
+
80
83
  if (userIdentifierKey != null) {
81
84
  return userIdentifierKey
82
85
  }
package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx ADDED
@@ -0,0 +1,61 @@
1
+ import type { AccessCode } from 'seamapi'
2
+
3
+ import {
4
+ TableBody,
5
+ TableCell,
6
+ TableHeader,
7
+ TableRow,
8
+ TableTitle,
9
+ } from 'lib/ui/Table/index.js'
10
+
11
+ import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
12
+ import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
13
+ import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
14
+ import { Caption } from 'lib/ui/typography/Caption.js'
15
+ import { Title } from 'lib/ui/typography/Title.js'
16
+
17
+ export interface AccessCodeTableContentProps {
18
+ accessCodes: AccessCode[]
19
+ onClickBack?: () => void
20
+ }
21
+
22
+ export function AccessCodeTableContent(
23
+ props: AccessCodeTableContentProps
24
+ ): JSX.Element {
25
+ const { accessCodes, onClickBack } = props
26
+
27
+ return (
28
+ <div className='seam-access-code-table'>
29
+ <ContentHeader onClickBack={onClickBack} />
30
+ <TableHeader>
31
+ <TableTitle>
32
+ {t.accessCodes} <Caption>({accessCodes.length})</Caption>
33
+ </TableTitle>
34
+ </TableHeader>
35
+ <TableBody>
36
+ {accessCodes.map((code) => (
37
+ <TableRow key={code.access_code_id}>
38
+ <TableCell className='seam-icon-cell'>
39
+ <div>
40
+ <AccessCodeKeyIcon />
41
+ </div>
42
+ </TableCell>
43
+ <TableCell className='seam-name-cell'>
44
+ <Title>{code.name}</Title>
45
+ <CodeDetails accessCode={code} />
46
+ </TableCell>
47
+ <TableCell className='seam-action-cell'>
48
+ {/* <IconButton>
49
+ <DotsEllipsisMoreIcon />
50
+ </IconButton> */}
51
+ </TableCell>
52
+ </TableRow>
53
+ ))}
54
+ </TableBody>
55
+ </div>
56
+ )
57
+ }
58
+
59
+ const t = {
60
+ accessCodes: 'Access Codes',
61
+ }
package/src/lib/ui/DeviceDetails/DeviceDetails.tsx CHANGED
@@ -41,8 +41,8 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
41
41
  <div className='seam-image'>
42
42
  <DeviceImage device={device} />
43
43
  </div>
44
-
45
44
  <div className='seam-info'>
45
+ <span className='seam-label'>{t.device}</span>
46
46
  <h4 className='seam-device-name'>{device.properties.name}</h4>
47
47
  <div className='seam-properties'>
48
48
  <OnlineStatus device={device} />
@@ -93,6 +93,7 @@ function AccessCodeLength(props: {
93
93
  }
94
94
 
95
95
  const t = {
96
+ device: 'Device',
96
97
  locked: 'Locked',
97
98
  unlocked: 'Unlocked',
98
99
  accessCodes: 'access codes',
package/src/styles/_device-details.scss CHANGED
@@ -67,6 +67,14 @@
67
67
  }
68
68
 
69
69
  .seam-info {
70
+ > .seam-label {
71
+ color: var(--text-gray-1);
72
+ font-weight: 600;
73
+ font-size: 14px;
74
+ line-height: 134%;
75
+ margin-bottom: 4px;
76
+ }
77
+
70
78
  .seam-device-name {
71
79
  margin-bottom: 16px;
72
80
  font-weight: 600;
package/src/styles/_layout.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  align-items: center;
6
6
  position: relative;
7
7
  justify-content: center;
8
- width: 100%;
9
8
 
10
9
  .seam-back-icon {
11
10
  position: absolute;
package/src/styles/_main.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use './reset';
1
2
  @use './typography';
2
3
  @use './tables';
3
4
  @use './inputs';
@@ -21,8 +22,7 @@
21
22
  --item-hover-bg: #f4f6f8;
22
23
 
23
24
  // Reset
24
- /* stylelint-disable */
25
- @import 'the-new-css-reset/css/reset.css';
25
+ @include reset.all;
26
26
 
27
27
  // Globals
28
28
  @include typography.all;
package/src/styles/_reset.scss ADDED
@@ -0,0 +1,114 @@
1
+ /**
2
+ * CSS Reset heavily inspired by Fraser Boag's reset.
3
+ * Source: https://www.boag.online/blog/css-reset
4
+ */
5
+
6
+ @mixin all {
7
+ *,
8
+ *::before,
9
+ *::after {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ html,
14
+ body,
15
+ div,
16
+ span,
17
+ object,
18
+ iframe,
19
+ figure,
20
+ h1,
21
+ h2,
22
+ h3,
23
+ h4,
24
+ h5,
25
+ h6,
26
+ p,
27
+ blockquote,
28
+ pre,
29
+ a,
30
+ code,
31
+ em,
32
+ img,
33
+ small,
34
+ strike,
35
+ strong,
36
+ sub,
37
+ sup,
38
+ tt,
39
+ b,
40
+ u,
41
+ i,
42
+ ol,
43
+ ul,
44
+ li,
45
+ fieldset,
46
+ form,
47
+ label,
48
+ table,
49
+ caption,
50
+ tbody,
51
+ tfoot,
52
+ thead,
53
+ tr,
54
+ th,
55
+ td,
56
+ main,
57
+ canvas,
58
+ embed,
59
+ footer,
60
+ header,
61
+ nav,
62
+ section,
63
+ video {
64
+ margin: 0;
65
+ padding: 0;
66
+ border: 0;
67
+ font-size: 100%;
68
+ font-family: inherit;
69
+ vertical-align: baseline;
70
+ text-rendering: optimizelegibility;
71
+ -webkit-font-smoothing: antialiased;
72
+ text-size-adjust: none;
73
+ }
74
+
75
+ footer,
76
+ header,
77
+ nav,
78
+ section,
79
+ main {
80
+ display: block;
81
+ }
82
+
83
+ body {
84
+ line-height: 1;
85
+ }
86
+
87
+ ol,
88
+ ul {
89
+ list-style: none;
90
+ }
91
+
92
+ blockquote,
93
+ q {
94
+ quotes: none;
95
+ }
96
+
97
+ blockquote::before,
98
+ blockquote::after,
99
+ q::before,
100
+ q::after {
101
+ content: '';
102
+ content: none;
103
+ }
104
+
105
+ table {
106
+ border-collapse: collapse;
107
+ border-spacing: 0;
108
+ }
109
+
110
+ input {
111
+ appearance: none;
112
+ border-radius: 0;
113
+ }
114
+ }