@seamapi/react 1.61.1 → 1.62.0

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -0,0 +1,93 @@
+import classNames from 'classnames'
+import { useEffect } from 'react'
+
+import { CheckGreenIcon } from 'lib/icons/CheckGreen.js'
+import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js'
+import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js'
+
+type SnackbarVariant = 'success' | 'error'
+
+interface SnackbarProps {
+  message: string
+  variant: SnackbarVariant
+  visible: boolean
+  onClose: () => void
+  action?: {
+    label: string
+    onClick: () => void
+  }
+  autoDismiss?: boolean
+  dismissAfterMs?: number
+  disableCloseButton?: boolean
+}
+
+export function Snackbar({
+  message,
+  variant,
+  visible,
+  action,
+  autoDismiss = false,
+  dismissAfterMs = 5000,
+  disableCloseButton = false,
+  onClose,
+}: SnackbarProps): JSX.Element {
+  const { label: actionLabel, onClick: handleActionClick } = action ?? {}
+
+  useEffect(() => {
+    if (!autoDismiss) {
+      return () => {}
+    }
+
+    const timeout = globalThis.setTimeout(() => {
+      onClose()
+    }, dismissAfterMs)
+
+    return () => {
+      globalThis.clearTimeout(timeout)
+    }
+  }, [autoDismiss, dismissAfterMs, onClose])
+
+  return (
+    <div className='seam-snackbar-wrap'>
+      <div
+        className={classNames('seam-snackbar', {
+          'seam-snackbar-visible': visible,
+        })}
+      >
+        <SnackbarIcon variant={variant} />
+        <div className='seam-snackbar-message-wrap'>
+          <p className='seam-snackbar-message'>{message}</p>
+        </div>
+        <div className='seam-snackbar-actions-wrap'>
+          {action != null && (
+            <button
+              className='seam-snackbar-action'
+              onClick={handleActionClick}
+            >
+              <span className='seam-snackbar-action-label'>{actionLabel}</span>
+            </button>
+          )}
+          {!disableCloseButton && (
+            <button
+              className='seam-snackbar-close-button'
+              onClick={() => {
+                onClose()
+              }}
+            >
+              <CloseWhiteIcon />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SnackbarIcon(props: { variant: SnackbarVariant }): JSX.Element {
+  switch (props.variant) {
+    case 'success':
+      return <CheckGreenIcon />
+    case 'error':
+      return <ExclamationCircleIcon />
+  }
+}

package/src/lib/ui/thermostat/ClimateModeMenu.tsx

@@ -24,7 +24,7 @@ export function ClimateModeMenu({
       renderButton={({ onOpen }) => (
         <button onClick={onOpen} className='seam-climate-mode-menu-button'>
           <div className='seam-climate-mode-menu-button-icon'>
-            {ModeIcon(mode)}
+            <ModeIcon mode={mode} />
           </div>
           <ChevronDownIcon />
         </button>
@@ -39,7 +39,7 @@ export function ClimateModeMenu({
         <ThermoModeMenuOption
           key={m}
           label={t[m]}
-          icon={ModeIcon(m)}
+          icon={<ModeIcon mode={m} />}
           isSelected={mode === m}
           onClick={() => {
             onChange(m)
@@ -50,8 +50,8 @@ export function ClimateModeMenu({
   )
 }
 
-function ModeIcon(mode: HvacModeSetting): JSX.Element {
-  switch (mode) {
+function ModeIcon(props: { mode: HvacModeSetting }): JSX.Element {
+  switch (props.mode) {
     case 'heat':
       return <ThermostatHeatIcon />
     case 'cool':

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.61.1'
+const seamapiReactVersion = '1.62.0'
 
 export default seamapiReactVersion

package/src/styles/_colors.scss

@@ -20,6 +20,7 @@ $bg-b: #e9edef;
 $bg-a: #f1f3f4;
 $bg-aa: #fafafa;
 $bg-gray: #ececec;
+$feedback-bg: #30373a;
 $status-red: #e36857;
 $white: #fff;
 $black: #000;
@@ -38,3 +39,4 @@ $thermo-orange: #fc8e28;
 $thermo-orange-faded: #fff2e0;
 $thermo-blue: #6b95ff;
 $thermo-blue-faded: #e7f2ff;
+$text-hyperlink: #6ac1ff;

package/src/styles/_loading_toast.scss

@@ -1,21 +1,10 @@
 @use './colors';
-
-@keyframes scale-in {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-}
+@use './motion';
 
 @mixin all {
   .seam-loading-toast {
+    @include motion.scale-in;
+
     height: 32px;
     padding: 0 10px;
     display: flex;
@@ -29,8 +18,8 @@
       0 0 1px 0 rgb(24 29 37 / 25%);
     gap: 8px;
     will-change: transform;
-    animation: scale-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
-    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: scale-in 0.2s motion.$ease-out-quint;
+    transition: all 0.2s motion.$ease-out-quint;
     pointer-events: none;
     position: absolute;
     z-index: 9;

package/src/styles/_main.scss

@@ -21,6 +21,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './snackbar';
 @use './spinner';
 @use './switch';
 @use './climate-setting-schedule-form';
@@ -45,6 +46,7 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include snackbar.all;
   @include spinner.all;
   @include switch.all;
   @include time-zone-picker.all;

package/src/styles/_motion.scss

@@ -0,0 +1,34 @@
+$ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+$ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
+
+@mixin scale-in {
+  @keyframes scale-in {
+    0% {
+      transform: scale(0.5);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    100% {
+      transform: scale(1);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+@mixin fade-in-up {
+  @keyframes fade-in-up {
+    0% {
+      transform: translateY(24px);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

package/src/styles/_snackbar.scss

@@ -0,0 +1,110 @@
+@use './colors';
+@use './motion';
+
+@mixin all {
+  .seam-snackbar-wrap {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    height: 0;
+    z-index: 9;
+  }
+
+  .seam-snackbar {
+    @include motion.fade-in-up;
+
+    pointer-events: auto;
+    display: flex;
+    padding: 16px;
+    align-items: flex-start;
+    border-radius: 12px;
+    background: colors.$feedback-bg;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 25%);
+    gap: 10px;
+    position: absolute;
+    bottom: 24px;
+    will-change: transform;
+    transition: all 0.2s motion.$ease-in-out-quint;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(24px);
+
+    &.seam-snackbar-visible {
+      animation: fade-in-up 0.2s motion.$ease-in-out-quint;
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .seam-snackbar-message-wrap {
+      display: flex;
+      max-width: 300px;
+    }
+
+    .seam-snackbar-message {
+      color: colors.$white;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 134%;
+      margin: 0;
+      padding: 0;
+    }
+
+    .seam-snackbar-actions-wrap {
+      height: 24px;
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 16px;
+    }
+
+    .seam-snackbar-action {
+      appearance: none;
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      padding-top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: none;
+      border: none;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+
+      &:hover {
+        opacity: 0.75;
+      }
+
+      .seam-snackbar-action-label {
+        color: colors.$text-hyperlink;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 0.8;
+        white-space: nowrap;
+      }
+    }
+
+    .seam-snackbar-close-button {
+      appearance: none;
+      background-color: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 0;
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+
+      &:hover {
+        opacity: 0.75;
+      }
+    }
+  }
+}

package/src/styles/_supported-device-table.scss

@@ -3,6 +3,10 @@
 $row-padding: 8px;
 
 @mixin all {
+  .seam-supported-device-table-content-wrap {
+    background: colors.$white;
+  }
+
   .seam-supported-device-table-filter-area {
     width: 100%;
     display: flex;
@@ -372,4 +376,9 @@ $row-padding: 8px;
       align-items: center;
     }
   }
+
+  .seam-supported-device-table-filter-menu-content {
+    max-height: 300px;
+    overflow: auto;
+  }
 }