@seamapi/react 0.16.0 → 0.17.0

package/src/lib/ui/index.ts

@@ -1 +1,3 @@
-export * from './DeviceManager/DeviceManager.js'
+export * from './AccessCodeTable/AccessCodeTable.js'
+export * from './DeviceDetails/DeviceDetails.js'
+export * from './DeviceTable/DeviceTable.js'

package/src/lib/ui/layout/ContentHeader.tsx

@@ -1,13 +1,18 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
+import { useNavigation } from 'lib/NavigationProvider.js'
+
+export function ContentHeader(props: { title?: string }): JSX.Element | null {
+  const { title } = props
+
+  const { goBack } = useNavigation()
+  if (!title && !goBack) {
+    return null
+  }
 
-export function ContentHeader(props: {
-  title?: string
-  onClickBack?: () => void
-}): JSX.Element {
   return (
     <div className='seam-content-header'>
-      <BackIcon onClick={props.onClickBack} />
-      <span className='seam-title'>{props.title}</span>
+      {goBack && <BackIcon onClick={goBack} />}
+      <span className='seam-title'>{title}</span>
     </div>
   )
 }

package/src/styles/_access-code-details.scss

@@ -0,0 +1,121 @@
+@use './colors';
+
+@mixin all {
+  .seam-access-code-details {
+    > .seam-summary {
+      background: colors.$bg-a;
+      border-radius: 16px;
+      margin: 0 24px 16px;
+
+      > .seam-top {
+        padding: 24px 16px;
+
+        > .seam-label {
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 134%;
+          color: colors.$text-gray-1;
+          margin-bottom: 4px;
+        }
+
+        > .seam-access-code-name {
+          font-weight: 600;
+          font-size: 21px;
+          line-height: 132%;
+          margin-bottom: 8px;
+        }
+
+        > .seam-code {
+          background: #fff;
+          border: 1px solid colors.$text-gray-2;
+          border-radius: 8px;
+          padding: 10px 16px;
+          font-weight: 600;
+          font-size: 24px;
+          line-height: 134%;
+          margin-bottom: 8px;
+        }
+
+        .seam-duration {
+          color: colors.$text-gray-1;
+          font-size: 14px;
+          line-height: 134%;
+
+          .seam-label {
+            font-weight: 600;
+            color: colors.$text-default;
+          }
+        }
+      }
+
+      .seam-access-code-device {
+        border-top: 1px solid colors.$bg-c;
+        padding: 8px 16px 8px 8px;
+        display: flex;
+        align-items: center;
+
+        .seam-device-image {
+          width: 72px;
+          height: 72px;
+          margin-right: 16px;
+
+          img {
+            width: 100%;
+            max-height: 100%;
+          }
+        }
+
+        .seam-body {
+          flex: 1;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 134%;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .seam-details {
+      font-size: 16px;
+      line-height: 134%;
+      border-bottom: 1px solid rgb(0 0 0 / 12%);
+      padding: 0 24px;
+
+      .seam-row {
+        padding: 16px;
+        display: flex;
+        border-top: 1px solid rgb(0 0 0 / 12%);
+
+        .seam-heading {
+          width: 112px;
+        }
+
+        .seam-content {
+          display: flex;
+          flex: 1;
+
+          .seam-times {
+            display: flex;
+            flex: 1;
+            font-size: 16px;
+            line-height: 134%;
+
+            .seam-label {
+              color: colors.$text-gray-2;
+            }
+
+            > div {
+              div {
+                margin-bottom: 4px;
+              }
+
+              &:first-child {
+                flex: 0 1 160px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/_access-code-table.scss

@@ -1,54 +1,50 @@
+@use './colors';
+
 @mixin all {
   .seam-access-code-table {
-    .seam-content-header {
-      margin: 0 16px;
-    }
-
-    .seam-table-header {
-      margin-bottom: 16px;
-      height: 56px;
-      padding: 0 16px;
-    }
+    .seam-table-row {
+      cursor: pointer;
 
-    .seam-icon-cell {
-      flex: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > div {
-        width: 40px;
-        height: 40px;
+      .seam-icon-cell {
+        flex: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > div {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
-    }
 
-    .seam-name-cell {
-      flex: 1;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 2px;
+      .seam-name-cell {
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
 
-      .seam-access-code-details {
-        font-size: 14px;
-        line-height: 134%;
-        color: var(--text-gray-1);
+        .seam-code-details {
+          font-size: 14px;
+          line-height: 134%;
+          color: colors.$text-gray-1;
 
-        .seam-dot-divider {
-          margin: 0 4px;
-          color: var(--text-gray-3);
+          .seam-dot-divider {
+            margin: 0 4px;
+            color: colors.$text-gray-3;
+          }
         }
       }
-    }
 
-    .seam-action-cell {
-      margin-right: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .seam-action-cell {
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

package/src/styles/_buttons.scss

@@ -1,17 +1,134 @@
-@mixin all {
-  .seam-button {
+@use './typography';
+@use './colors';
+
+@mixin icon-button {
+  .seam-icon-btn {
     border-radius: 6px;
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
+    background: #fff;
+    padding: 6px;
+    line-height: 0;
+
+    &:hover {
+      background: rgb(0 122 252 / 8%);
+    }
+  }
+}
+
+@mixin text-button {
+  .seam-text-btn {
+    color: colors.$primary;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
+      text-decoration: none;
+    }
+  }
+}
+
+@mixin button-size {
+  &.seam-btn-small {
+    font-size: 14px;
+    line-height: 22px;
+    border-radius: 6px;
+    padding: 4px 10px;
+  }
+
+  &.seam-btn-medium {
+    font-size: 16px;
+    line-height: 26px;
+    border-radius: 7px;
+    padding: 6px 16px;
+  }
+
+  &.seam-btn-large {
+    font-size: 19px;
+    line-height: 30px;
+    border-radius: 8px;
+    padding: 8px 22px;
+  }
+}
+
+@mixin button-variant {
+  &.seam-btn-solid {
+    background: colors.$primary;
+    color: #fff;
+    border: 1px solid colors.$primary;
 
-    &.seam-icon-button {
+    &:hover {
+      background: colors.$primary-dark;
+      border-color: colors.$primary-dark;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: colors.$primary-dim;
+      border-color: colors.$primary-dim;
+    }
+  }
+
+  &.seam-btn-outline {
+    color: colors.$primary;
+    border: 1px solid colors.$primary-50;
+    background: transparent;
+
+    &:hover {
+      background: colors.$primary-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: transparent;
+      color: colors.$primary-50;
+    }
+  }
+
+  &.seam-btn-neutral {
+    color: colors.$text-gray-1;
+    border: 1px solid colors.$text-gray-2-5;
+
+    &:hover {
+      background: colors.$bg-a;
+      border-color: colors.$text-gray-2-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-3;
       background: #fff;
-      padding: 6px;
-      line-height: 0;
+    }
+  }
+}
+
+@mixin button {
+  .seam-btn {
+    @include typography.font-family;
+    @include button-size;
+    @include button-variant;
 
-      &:hover {
-        background: rgb(0 122 252 / 8%);
-      }
+    font-weight: 600;
+    cursor: pointer;
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }
+
+@mixin all {
+  @include button;
+  @include icon-button;
+  @include text-button;
+}

package/src/styles/_colors.scss

@@ -0,0 +1,30 @@
+@use 'sass:color';
+
+$primary: #007afc !default;
+$primary-50: color.scale($primary, $lightness: 50%);
+$primary-30: color.scale($primary, $lightness: 70%);
+$primary-15: color.scale($primary, $lightness: 85%);
+$primary-8: color.scale($primary, $lightness: 92%);
+$primary-5: color.scale($primary, $lightness: 95%);
+$primary-dark: color.scale($primary, $lightness: -10%);
+$primary-dim: color.scale($primary-15, $lightness: -5%);
+$text-default: #232b3a;
+$text-gray-1: #6e7179;
+$text-gray-2: #9da1a9;
+$text-gray-2-5: #b9bec5;
+$text-gray-3: #d5d8dc;
+$divider-stroke-light: #eee;
+$bg-d: #cbd0d3;
+$bg-c: #dde0e2;
+$bg-b: #e9edef;
+$bg-a: #f1f3f4;
+$status-red: #e36857;
+$status-orange: #f3980f;
+$status-green: #27ae60;
+$alert-error-dark: #cb7d7d;
+$alert-error-line: #f1d4d4;
+$alert-error-fill: #ffefef;
+$alert-warn-dark: #ca8852;
+$alert-warn-line: #f8d8be;
+$alert-warn-fill: #fff2e0;
+$item-hover-bg: #f4f6f8;

package/src/styles/_device-details.scss

@@ -1,14 +1,15 @@
+@use './colors';
+
 @mixin all {
   .seam-device-details {
-    padding: 0 24px 24px;
-
     .seam-body {
       display: flex;
       flex-direction: column;
       gap: 16px;
+      margin: 0 24px 24px;
 
       .seam-box {
-        border: 1px solid var(--input-border);
+        border: 1px solid colors.$text-gray-3;
         border-radius: 8px;
 
         .seam-content {
@@ -22,18 +23,28 @@
             cursor: pointer;
 
             &:hover {
-              background: var(--item-hover-bg);
+              background: colors.$item-hover-bg;
             }
           }
 
           &.seam-access-code-length {
-            border-top: 1px solid var(--input-border);
+            border-top: 1px solid colors.$text-gray-3;
+          }
+
+          &.seam-lock-status {
+            display: flex;
+            justify-content: space-between;
+
+            > .seam-right {
+              display: flex;
+              align-items: center;
+            }
           }
 
           .seam-label {
             font-size: 14px;
             line-height: 134%;
-            color: var(--text-gray-1);
+            color: colors.$text-gray-1;
           }
 
           .seam-value {
@@ -48,7 +59,7 @@
       .seam-summary {
         padding: 24px 16px;
         border-radius: 16px;
-        background: var(--bg-a);
+        background: colors.$bg-a;
 
         .seam-content {
           display: flex;
@@ -67,6 +78,14 @@
           }
 
           .seam-info {
+            > .seam-label {
+              color: colors.$text-gray-1;
+              font-weight: 600;
+              font-size: 14px;
+              line-height: 134%;
+              margin-bottom: 4px;
+            }
+
             .seam-device-name {
               margin-bottom: 16px;
               font-weight: 600;
@@ -84,11 +103,11 @@
               column-gap: 28px;
 
               .seam-label {
-                color: var(--text-gray-2);
+                color: colors.$text-gray-2;
               }
 
               .seam-status-text {
-                color: var(--text-gray-1);
+                color: colors.$text-gray-1;
               }
 
               svg {

package/src/styles/_device-table.scss

@@ -0,0 +1,63 @@
+@use './colors';
+
+@mixin all {
+  .seam-device-table {
+    .seam-table-row {
+      cursor: pointer;
+
+      .seam-image-cell {
+        width: 64px;
+        height: 64px;
+        padding: 4px;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .seam-body-cell {
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
+
+        .seam-bottom {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+
+          .seam-device-model {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 134%;
+            color: colors.$text-gray-1;
+            flex: 0 1 190px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .seam-device-statuses {
+            display: flex;
+            align-items: center;
+            color: colors.$text-gray-1;
+            font-size: 14px;
+            line-height: 134%;
+
+            > div {
+              display: flex;
+              align-items: center;
+              margin-right: 16px;
+
+              svg {
+                scale: 0.75;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/_icons.scss

@@ -0,0 +1,9 @@
+@use './colors';
+
+@mixin all {
+  .seam-lock-icon {
+    * {
+      fill: colors.$text-gray-1;
+    }
+  }
+}

package/src/styles/_inputs.scss

@@ -1,8 +1,10 @@
+@use './colors';
+
 @mixin text-field {
   .seam-text-field {
     padding: 0 8px;
     height: 40px;
-    border: 1px solid var(--input-border);
+    border: 1px solid colors.$text-gray-3;
     border-radius: 8px;
   }
 }

package/src/styles/_layout.scss

@@ -1,3 +1,5 @@
+@use './colors';
+
 @mixin header {
   .seam-content-header {
     height: 56px;
@@ -5,12 +7,12 @@
     align-items: center;
     position: relative;
     justify-content: center;
-    width: 100%;
+    margin: 0 16px;
 
     .seam-back-icon {
       position: absolute;
       top: 50%;
-      transform: translate(0, -25%);
+      transform: translate(4px, -25%);
       left: 0;
       cursor: pointer;
     }
@@ -18,6 +20,7 @@
     .seam-title {
       font-size: 16px;
       line-height: 134%;
+      color: colors.$text-gray-1;
     }
   }
 }

package/src/styles/_main.scss

@@ -1,28 +1,19 @@
+@use './reset';
 @use './typography';
 @use './tables';
 @use './inputs';
 @use './buttons';
 @use './layout';
 @use './access-code-table';
+@use './colors';
+@use './icons';
 @use './device-details';
+@use './device-table';
+@use './access-code-details';
 
 .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;
-
   // Reset
-  /* stylelint-disable */
-  @import 'the-new-css-reset/css/reset.css';
+  @include reset.all;
 
   // Globals
   @include typography.all;
@@ -30,8 +21,11 @@
   @include inputs.all;
   @include buttons.all;
   @include layout.all;
+  @include icons.all;
 
   // Components
-  @include access-code-table.all;
   @include device-details.all;
+  @include device-table.all;
+  @include access-code-table.all;
+  @include access-code-details.all;
 }