@seamapi/react 4.6.0 → 4.7.0

package/src/lib/seam/thermostats/use-update-thermostat-climate-preset.ts

@@ -0,0 +1,103 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsUpdateClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type {
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseUpdateThermostatClimatePresetParams = never
+export type UseUpdateThermostatClimatePresetData = undefined
+
+export type UseUpdateThermostatClimatePresetVariables = Omit<
+  ThermostatsUpdateClimatePresetBody,
+  'manual_override_allowed'
+>
+
+export function useUpdateThermostatClimatePreset(): UseMutationResult<
+  UseUpdateThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseUpdateThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseUpdateThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.createClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(device, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatDevice[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): ThermostatDevice[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, variables)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedDevice(
+  device: ThermostatDevice,
+  variables: UseUpdateThermostatClimatePresetVariables
+): ThermostatDevice {
+  const preset: ThermostatClimatePreset = {
+    ...variables,
+    cooling_set_point_celsius: fahrenheitToCelsius(
+      variables.cooling_set_point_fahrenheit
+    ),
+    heating_set_point_celsius: fahrenheitToCelsius(
+      variables.heating_set_point_fahrenheit
+    ),
+    display_name: variables.name ?? variables.climate_preset_key,
+    can_delete: true,
+    can_edit: true,
+    manual_override_allowed: true,
+  }
+
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets: [
+        preset,
+        ...(device.properties.available_climate_presets ?? []),
+      ],
+    },
+  }
+}

package/src/lib/ui/Button.tsx

@@ -1,14 +1,17 @@
 import classNames from 'classnames'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
 
+import { Spinner } from 'lib/ui/Spinner/Spinner.js'
+
 interface ButtonProps extends PropsWithChildren {
-  variant?: 'solid' | 'outline' | 'neutral'
+  variant?: 'solid' | 'outline' | 'neutral' | 'danger'
   size?: 'small' | 'medium' | 'large'
   type?: 'button' | 'submit'
   disabled?: boolean
   onClick?: MouseEventHandler<HTMLButtonElement>
   className?: string
   onMouseDown?: MouseEventHandler<HTMLButtonElement>
+  loading?: boolean
 }
 
 export function Button({
@@ -20,6 +23,7 @@ export function Button({
   className,
   onMouseDown,
   type = 'button',
+  loading = false,
 }: ButtonProps): JSX.Element {
   return (
     <button
@@ -27,15 +31,28 @@ export function Button({
         `seam-btn seam-btn-${variant} seam-btn-${size}`,
         {
           'seam-btn-disabled': disabled,
+          'seam-btn-loading': loading,
         },
         className
       )}
       disabled={disabled}
-      onClick={onClick}
+      onClick={(e) => {
+        if (loading || disabled) {
+          e.preventDefault()
+          return
+        }
+
+        onClick?.(e)
+      }}
       onMouseDown={onMouseDown}
       type={type}
     >
-      {children}
+      <span className='seam-btn-content'>{children}</span>
+      {loading && (
+        <div className='seam-btn-loading'>
+          <Spinner size='small' />
+        </div>
+      )}
     </button>
   )
 }

package/src/lib/ui/IconButton.tsx

@@ -1,9 +1,26 @@
 import classNames from 'classnames'
+import type { Ref } from 'react'
 
 import type { ButtonProps } from 'lib/ui/types.js'
 
-export function IconButton({ className, ...props }: ButtonProps): JSX.Element {
+export type IconProps = ButtonProps & {
+  elRef?: Ref<HTMLButtonElement>
+}
+
+export function IconButton({
+  className,
+  elRef,
+  ...props
+}: IconProps): JSX.Element {
   return (
-    <button {...props} className={classNames('seam-icon-btn', className)} />
+    <button
+      {...props}
+      ref={elRef}
+      className={classNames(
+        'seam-icon-btn',
+        props.disabled === true && 'seam-icon-btn-disabled',
+        className
+      )}
+    />
   )
 }

package/src/lib/ui/Popover/Popover.tsx

@@ -0,0 +1,168 @@
+import {
+  autoUpdate,
+  flip,
+  limitShift,
+  offset,
+  type ReferenceElement,
+  shift,
+  useFloating,
+} from '@floating-ui/react'
+import {
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+import { seamComponentsClassName } from 'lib/seam/SeamProvider.js'
+
+export interface PopoverInstance {
+  show: () => void
+  hide: () => void
+  toggle: () => void
+}
+
+type PopoverChildren = (
+  params: {
+    setRef: (ref: HTMLElement | undefined | null) => void
+  } & PopoverInstance
+) => ReactNode
+
+export interface PopoverProps {
+  children: PopoverChildren
+  content: ReactNode | ((instance: PopoverInstance) => ReactNode)
+  instanceRef?: Ref<PopoverInstance>
+  preventCloseOnClickOutside?: boolean
+}
+
+export function Popover(props: PopoverProps): JSX.Element {
+  const { children, content, instanceRef, preventCloseOnClickOutside } = props
+
+  const [open, setOpen] = useState(false)
+
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    transform: false,
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom',
+    middleware: [
+      shift({
+        crossAxis: true,
+        limiter: limitShift(),
+      }),
+      flip(),
+      offset(5),
+    ],
+  })
+
+  const referenceEl = useRef<HTMLElement | null>()
+  const floatingEl = useRef<HTMLElement | null>()
+
+  const setFLoating = useCallback(
+    (ref: HTMLElement | null): void => {
+      refs.setFloating(ref)
+      floatingEl.current = ref
+    },
+    [refs, floatingEl]
+  )
+
+  const toggle = useCallback(() => {
+    setOpen((value) => !value)
+  }, [])
+
+  const instance = useMemo(
+    () => ({
+      show: () => {
+        setOpen(true)
+      },
+      hide: () => {
+        setOpen(false)
+      },
+      toggle,
+    }),
+    [toggle]
+  )
+
+  const setReference = useCallback(
+    (ref: ReferenceElement | undefined | null): void => {
+      if (!(ref instanceof HTMLElement) || referenceEl.current === ref) return
+
+      if (referenceEl.current != null) {
+        referenceEl.current.removeEventListener('click', toggle)
+      }
+
+      refs.setReference(ref)
+      ref.addEventListener('click', toggle)
+      referenceEl.current = ref
+    },
+    [toggle, refs]
+  )
+
+  useImperativeHandle(instanceRef, () => instance)
+
+  /**
+   * Closes the popover when the user clicks outside of it.
+   */
+  const windowClickHandler = useCallback((e: MouseEvent): void => {
+    const target = e.target as HTMLElement
+
+    // If the target is the reference element, do nothing.
+    if (
+      referenceEl.current === target ||
+      referenceEl.current?.contains(target) === true
+    ) {
+      return
+    }
+
+    const closest = target.closest('[data-seam-popover]')
+
+    // Prevents closing if target is floating element, also adds support for nested popovers somehow :)
+    if (
+      closest != null &&
+      referenceEl.current != null &&
+      !closest.contains(referenceEl.current)
+    ) {
+      return
+    }
+
+    setOpen(false)
+  }, [])
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (preventCloseOnClickOutside === false) return
+
+      globalThis.addEventListener('click', windowClickHandler)
+    }, 0)
+
+    return () => {
+      globalThis.removeEventListener('click', windowClickHandler)
+    }
+  }, [windowClickHandler, preventCloseOnClickOutside])
+
+  return (
+    <>
+      {children({ setRef: setReference, ...instance })}
+      {open &&
+        createPortal(
+          <div
+            className={seamComponentsClassName}
+            data-seam-popover=''
+            ref={setFLoating}
+            style={floatingStyles}
+          >
+            <div className='seam-popover'>
+              {typeof content === 'function' ? content(instance) : content}
+            </div>
+          </div>,
+          globalThis.document.body
+        )}
+    </>
+  )
+}

package/src/lib/ui/Popover/PopoverContentPrompt.tsx

@@ -0,0 +1,58 @@
+import { Button } from 'lib/ui/Button.js'
+
+export interface PopoverContentPromptProps {
+  onConfirm?: () => void
+  onCancel?: () => void
+  prompt?: string
+  description?: string
+  confirmText?: string
+  cancelText?: string
+  confirmLoading?: boolean
+}
+
+export function PopoverContentPrompt(
+  props: PopoverContentPromptProps
+): JSX.Element {
+  const {
+    confirmText = t.confirm,
+    cancelText = t.cancel,
+    confirmLoading = false,
+    prompt = t.areYouSure,
+    description,
+    onConfirm,
+    onCancel,
+  } = props
+
+  return (
+    <div className='seam-popover-content-prompt'>
+      <div>
+        <div className='seam-popover-content-prompt-text'>{prompt}</div>
+        {description != null && (
+          <div className='seam-popover-content-prompt-description'>
+            {description}
+          </div>
+        )}
+      </div>
+      <div className='seam-popover-content-prompt-buttons'>
+        <Button
+          variant='solid'
+          onClick={onConfirm}
+          loading={confirmLoading}
+          size='small'
+        >
+          {confirmText}
+        </Button>
+
+        <Button variant='danger' size='small' onClick={onCancel}>
+          {cancelText}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  areYouSure: 'Are you sure?',
+}

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

@@ -1,3 +1,6 @@
+import classNames from 'classnames'
+import type { CSSProperties } from 'react'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { OffIcon } from 'lib/icons/Off.js'
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
@@ -11,20 +14,49 @@ interface ClimateModeMenuProps {
   mode: HvacModeSetting
   onChange: (mode: HvacModeSetting) => void
   supportedModes?: HvacModeSetting[]
+  buttonTextVisible?: boolean
+  className?: string
+  style?: CSSProperties
+  block?: boolean
+  size?: 'regular' | 'large'
 }
 
 export function ClimateModeMenu({
   mode,
   onChange,
   supportedModes = ['heat', 'cool', 'heat_cool', 'off'],
+  buttonTextVisible = false,
+  className,
+  style,
+  block,
+  size = 'regular',
 }: ClimateModeMenuProps): JSX.Element {
   return (
     <Menu
       renderButton={({ onOpen }) => (
-        <button onClick={onOpen} className='seam-climate-mode-menu-button'>
+        <button
+          style={style}
+          onClick={onOpen}
+          className={classNames(
+            'seam-climate-mode-menu-button',
+            {
+              'seam-climate-mode-menu-button-block': block,
+              'seam-climate-mode-menu-button-regular': size === 'regular',
+              'seam-climate-mode-menu-button-large': size === 'large',
+            },
+            className
+          )}
+        >
           <div className='seam-climate-mode-menu-button-icon'>
             <ModeIcon mode={mode} />
           </div>
+
+          {buttonTextVisible && (
+            <span className='seam-climate-mode-menu-button-text'>
+              {t[mode]}
+            </span>
+          )}
+
           <ChevronDownIcon className='seam-climate-mode-menu-button-chevron' />
         </button>
       )}