@seamapi/react 0.10.0 → 0.12.0

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

@@ -0,0 +1,21 @@
+import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
+
+export function ContentHeader(props: {
+  title?: string
+  onClickBack?: () => void
+}) {
+  return (
+    <div className='seam-content-header'>
+      <BackIcon onClick={props.onClickBack} />
+      <span className='seam-title'>{props.title}</span>
+    </div>
+  )
+}
+
+function BackIcon(props: { onClick?: () => void }) {
+  if (props.onClick === undefined) {
+    return null
+  }
+
+  return <ArrowBackIcon className='seam-back-icon' onClick={props.onClick} />
+}

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

@@ -0,0 +1,3 @@
+export function DotDivider() {
+  return <span className='seam-dot-divider'>•</span>
+}

package/src/lib/ui/types.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, HtmlHTMLAttributes } from 'react'
+
+export type DivProps = HTMLAttributes<HTMLDivElement>
+export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>

package/src/lib/ui/typography/Caption.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function Caption(props: { children: ReactNode }) {
+  return <span className='seam-caption'>{props.children}</span>
+}

package/src/lib/ui/typography/Title.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function Title(props: { children: ReactNode }) {
+  return <span className='seam-title'>{props.children}</span>
+}

package/src/lib/use-toggle.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Simple util to quickly handle on/off states.
+ */
+const useToggle = (initialState: boolean = false): [boolean, () => void] => {
+  const [isTrue, setIsTrue] = useState(initialState)
+
+  // use callback otherwise it would yield unexpected results in promises
+
+  const toggle = useCallback(() => {
+    setIsTrue((isTrue) => !isTrue)
+  }, [setIsTrue])
+
+  return [isTrue, toggle]
+}
+
+export default useToggle

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

@@ -0,0 +1,52 @@
+.seam-access-code-table {
+  .seam-content-header {
+    margin: 0 16px;
+  }
+
+  .seam-table-header {
+    margin-bottom: 16px;
+    height: 56px;
+    padding: 0 16px;
+  }
+
+  .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-access-code-details {
+      font-size: 14px;
+      line-height: 134%;
+      color: var(--text-gray-1);
+
+      .seam-dot-divider {
+        margin: 0 4px;
+        color: var(--text-gray-3);
+      }
+    }
+  }
+
+  .seam-action-cell {
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/styles/buttons.scss

@@ -0,0 +1,15 @@
+.seam-button {
+  border-radius: 6px;
+  border: 1px solid rgb(0 122 252 / 50%);
+  cursor: pointer;
+
+  &.seam-icon-button {
+    background: #fff;
+    padding: 6px;
+    line-height: 0;
+
+    &:hover {
+      background: rgb(0 122 252 / 8%);
+    }
+  }
+}

package/src/styles/content-header.scss

@@ -0,0 +1,21 @@
+.seam-content-header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: center;
+  width: 100%;
+
+  .seam-back-icon {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -25%);
+    left: 0;
+    cursor: pointer;
+  }
+
+  .seam-title {
+    font-size: 16px;
+    line-height: 134%;
+  }
+}

package/src/styles/device-details.scss

@@ -0,0 +1,134 @@
+.seam-device-details {
+  padding: 0 24px 24px;
+
+  .seam-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .seam-box {
+      border: 1px solid var(--input-border);
+      border-radius: 8px;
+
+      .seam-content {
+        padding: 12px 12px 12px 16px;
+
+        &.seam-access-codes {
+          padding: 12px 8px 12px 16px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          cursor: pointer;
+
+          &:hover {
+            background: var(--item-hover-bg);
+          }
+        }
+
+        &.seam-access-code-length {
+          border-top: 1px solid var(--input-border);
+        }
+
+        .seam-label {
+          font-size: 14px;
+          line-height: 134%;
+          color: var(--text-gray-1);
+        }
+
+        .seam-value {
+          display: block;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 134%;
+        }
+      }
+    }
+
+    .seam-summary {
+      padding: 24px 16px;
+      border-radius: 16px;
+      background: var(--bg-a);
+
+      .seam-content {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+
+        .seam-image {
+          width: 100px;
+          height: 100px;
+          display: flex;
+          align-items: center;
+
+          img {
+            max-width: 100%;
+          }
+        }
+
+        .seam-info {
+          .seam-device-name {
+            margin-bottom: 16px;
+            font-weight: 600;
+            font-size: 21px;
+            line-height: 132%;
+          }
+
+          .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-label {
+              color: var(--text-gray-2);
+            }
+
+            .seam-status-text {
+              color: var(--text-gray-1);
+            }
+
+            svg {
+              scale: 0.75;
+              margin-right: 8px;
+            }
+
+            > * {
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+
+    .seam-icon-cell {
+      flex: 0;
+      margin-left: 8px;
+      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;
+    }
+
+    .seam-action-cell {
+      margin-right: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/src/styles/inputs.scss

@@ -0,0 +1,6 @@
+.seam-text-field {
+  padding: 0 8px;
+  height: 40px;
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+}

package/src/styles/main.scss

@@ -0,0 +1,28 @@
+.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
+  @import 'the-new-css-reset/css/reset.css';
+
+  // Globals
+  @import './typography';
+  @import './tables';
+  @import './inputs';
+  @import './buttons';
+  @import './content-header';
+
+  // Components
+  @import './access-code-table';
+  @import './device-details';
+}

package/src/styles/tables.scss

@@ -0,0 +1,36 @@
+.seam-table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.seam-table-title {
+  font-size: 21px;
+  line-height: 132%;
+
+  .seam-caption {
+    font-size: 16px;
+    line-height: 134%;
+  }
+}
+
+.seam-table-row {
+  display: flex;
+  padding: 4px;
+  height: 72px;
+
+  &:hover {
+    background: rgb(244 246 248 / 100%);
+  }
+
+  .seam-title {
+    font-weight: 600;
+    font-size: 18px;
+  }
+}
+
+.seam-table-cell {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}

package/src/styles/typography.scss

@@ -0,0 +1,16 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
+.seam-caption {
+  color: var(--text-gray-2);
+}
+
+.seam-text-danger {
+  color: var(--status-red-alert);
+}

package/lib/components/DeviceManager/DeviceManager.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeviceManager.js","sourceRoot":"","sources":["../../../src/lib/components/DeviceManager/DeviceManager.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAyB,MAAM,0BAA0B,CAAA;AAI5E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAEhE,IAAI,SAAS;QAAE,OAAO,YAAG,IAAI,EAAC,SAAS,YAAE,CAAC,CAAC,OAAO,GAAK,CAAA;IACvD,IAAI,OAAO;QAAE,OAAO,sBAAI,KAAK,EAAE,OAAO,GAAK,CAAA;IAE3C,OAAO,CACL,uBACG,OAAO;YACN,EAAE,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACP,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,CACtE;YACD,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAChB,KAAC,iBAAiB,OAA4B,MAAM,IAA5B,MAAM,CAAC,SAAS,CAAgB,CACzD,CAAC,GACD,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,CACxB,KAAqC,EACxB,EAAE;IACf,OAAO,CACL,yBACE,wBACG,CAAC,CAAC,SAAS,QAAI,KAAK,CAAC,SAAS,IAC7B,EACJ,wBACG,CAAC,CAAC,IAAI,QAAI,KAAK,CAAC,UAAU,CAAC,IAAI,IAC9B,IACD,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,GAAG;IACR,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,aAAa;CACpB,CAAA"}

package/lib/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA"}

package/lib/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './use-seam.js';

package/lib/hooks/index.js

@@ -1,2 +0,0 @@
-export * from './use-seam.js';
-//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/lib/hooks/use-devices.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../src/lib/hooks/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,uBAAuB,CAAA;AAOrE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AASvC,MAAM,UAAU,UAAU,CAAC,MAA0B;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC3C,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}

package/lib/hooks/use-seam.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-seam.js","sourceRoot":"","sources":["../../src/lib/hooks/use-seam.ts"],"names":[],"mappings":"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"}

package/lib/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/lib/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,aAAa,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAA;AAsBrE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAG,KAAK,EAC6B;IACrC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;IAEhC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAA;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,IACE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI;QACjC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EACzC;QACA,UAAU,CAAC,OAAO,GAAG,uBAAuB,CAAA;KAC7C;IAED,IACE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI;QACjC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EACzC;QACA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAA;KAC1E;IAED,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,mBAAmB,IAAC,MAAM,EAAE,cAAc,CAAC,OAAO,YACjD,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,YAAG,QAAQ,GAAY,GAC7C,GAClB,CACP,CAAA;AACH,CAAC;AAED,MAAM,6BAA6B,GAAG,GAAgB,EAAE;IACtD,IACE,UAAU,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI;QAC/B,UAAU,CAAC,IAAI,EAAE,cAAc,IAAI,IAAI,EACvC;QACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;IAED,IAAI;QACF,OAAO,sBAAsB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;KAC/C;IAAC,OAAO,GAAG,EAAE;QACZ,sCAAsC;QACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACjB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,EAC9B,MAAM,EACN,GAAG,OAAO,EAC0B,EAAe,EAAE;IACrD,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACvD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;IAED,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE;QACnE,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAA;KACF;IAED,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,OAAO,CAAA;IAEvE,IAAI,MAAM,IAAI,IAAI,EAAE;QAClB,OAAO,EAAE,MAAM,EAAE,CAAA;KAClB;IAED,OAAO;QACL,MAAM,EAAE,IAAI;QACZ,cAAc;QACd,iBAAiB;QACjB,aAAa;KACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,uBAAuB,GAAG,6BAA6B,EAAE,CAAA;AAE/D,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,uBAAuB,CAAC,CAAA"}

package/src/lib/hooks/index.ts

@@ -1 +0,0 @@
-export * from './use-seam.js'

package/src/styles/_main.scss

@@ -1,10 +0,0 @@
-.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: #9da1a9;
-  --input-border: #d5d8dc;
-
-  font-family: var(--font-family);
-}