@seamapi/react 3.1.1 → 4.0.0-beta.1

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.tsx

@@ -1,175 +0,0 @@
-import classNames from 'classnames'
-import { useState } from 'react'
-
-import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
-import { ClimateSettingScheduleCard } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.js'
-import {
-  type CommonProps,
-  withRequiredCommonProps,
-} from 'lib/seam/components/common-props.js'
-import { NestedDeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
-import { useClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.js'
-import { useUpdateClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-update-climate-setting-schedule.js'
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { DetailRow } from 'lib/ui/layout/DetailRow.js'
-import { DetailSection } from 'lib/ui/layout/DetailSection.js'
-import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
-import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
-import { Switch } from 'lib/ui/Switch/Switch.js'
-import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
-
-import { formatDateTime } from './dates.js'
-
-export interface ClimateSettingScheduleDetailsProps extends CommonProps {
-  climateSettingScheduleId: string
-}
-
-export const NestedClimateSettingScheduleDetails = withRequiredCommonProps(
-  ClimateSettingScheduleDetails
-)
-
-export function ClimateSettingScheduleDetails({
-  climateSettingScheduleId,
-  disableLockUnlock = false,
-  disableDeleteAccessCode = false,
-  onBack,
-  className,
-  errorFilter = () => true,
-  warningFilter = () => true,
-  disableCreateAccessCode,
-  disableEditAccessCode,
-  disableResourceIds = false,
-  disableConnectedAccountInformation = false,
-  disableClimateSettingSchedules,
-}: ClimateSettingScheduleDetailsProps): JSX.Element | null {
-  useComponentTelemetry('ClimateSettingScheduleDetails')
-
-  const { climateSettingSchedule } = useClimateSettingSchedule({
-    climate_setting_schedule_id: climateSettingScheduleId,
-  })
-
-  const { mutate, isSuccess, isError } = useUpdateClimateSettingSchedule()
-
-  const [selectedDeviceId, selectDevice] = useState<string | null>(null)
-
-  if (climateSettingSchedule == null) {
-    return null
-  }
-
-  const isManualOverrideAllowed =
-    climateSettingSchedule.manual_override_allowed ?? false
-
-  if (selectedDeviceId != null) {
-    return (
-      <NestedDeviceDetails
-        deviceId={selectedDeviceId}
-        errorFilter={errorFilter}
-        warningFilter={warningFilter}
-        disableLockUnlock={disableLockUnlock}
-        disableCreateAccessCode={disableCreateAccessCode}
-        disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={disableDeleteAccessCode}
-        disableResourceIds={disableResourceIds}
-        disableConnectedAccountInformation={disableConnectedAccountInformation}
-        disableClimateSettingSchedules={disableClimateSettingSchedules}
-        onBack={() => {
-          selectDevice(null)
-        }}
-        className={className}
-      />
-    )
-  }
-
-  return (
-    <>
-      <div
-        className={classNames(
-          'seam-climate-setting-schedule-details',
-          className
-        )}
-      >
-        <ContentHeader title={t.climateSettingSchedule} onBack={onBack} />
-        <div className='seam-climate-setting-schedule-details-content'>
-          <ClimateSettingScheduleCard
-            climateSettingScheduleId={climateSettingScheduleId}
-            onSelectDevice={selectDevice}
-          />
-          <div className='seam-default-setting-message-container'>
-            <span className='seam-default-setting-message'>
-              {t.defaultSettingMessagePart1}{' '}
-              <span className='seam-default-setting-text'>
-                {t.defaultSetting}
-              </span>{' '}
-              {t.defaultSettingMessagePart2}
-            </span>
-          </div>
-          <DetailSectionGroup>
-            <DetailSection>
-              <DetailRow label={t.startEndTime}>
-                <span className='seam-climate-setting-details-value seam-climate-setting-details-schedule-range'>
-                  {formatDateTime(climateSettingSchedule.schedule_starts_at)}
-                  <ArrowRightIcon />
-                  {formatDateTime(climateSettingSchedule.schedule_ends_at)}
-                </span>
-              </DetailRow>
-              <DetailRow label={t.climateSetting}>
-                <ClimateSettingStatus
-                  climateSetting={climateSettingSchedule}
-                  iconPlacement='right'
-                />
-              </DetailRow>
-              <DetailRow label={t.allowManualOverride}>
-                <span className='seam-climate-setting-details-value'>
-                  <Switch
-                    checked={isManualOverrideAllowed}
-                    onChange={(checked) => {
-                      mutate({
-                        climate_setting_schedule_id:
-                          climateSettingSchedule.climate_setting_schedule_id,
-                        manual_override_allowed: checked,
-                      })
-                    }}
-                  />
-                </span>
-              </DetailRow>
-            </DetailSection>
-            <DetailSection>
-              <DetailRow label={t.creationDate}>
-                <div className='seam-creation-date'>
-                  {formatDateTime(climateSettingSchedule.created_at)}
-                </div>
-              </DetailRow>
-            </DetailSection>
-          </DetailSectionGroup>
-        </div>
-      </div>
-      <Snackbar
-        message={t.manualOverrideSuccess}
-        variant='success'
-        visible={isSuccess}
-        automaticVisibility
-      />
-
-      <Snackbar
-        message={t.manualOverrideError}
-        variant='error'
-        visible={isError}
-        automaticVisibility
-      />
-    </>
-  )
-}
-
-const t = {
-  climateSettingSchedule: 'Climate setting schedule',
-  startEndTime: 'Start/End Time',
-  climateSetting: 'Climate setting',
-  allowManualOverride: 'Allow manual override',
-  creationDate: 'Creation date',
-  defaultSettingMessagePart1: 'Thermostat will return to its',
-  defaultSetting: 'default setting',
-  defaultSettingMessagePart2: 'at end time.',
-  manualOverrideSuccess: 'Successfully updated manual override!',
-  manualOverrideError: 'Error updating manual override. Please try again.',
-}

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.tsx

@@ -1,72 +0,0 @@
-import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import {
-  isThermostatDevice,
-  type ThermostatDevice,
-} from 'lib/seam/thermostats/thermostat-device.js'
-import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
-import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
-
-export function ClimateSettingScheduleDeviceBar({
-  deviceId,
-  onSelectDevice,
-}: {
-  deviceId: string
-  onSelectDevice: (deviceId: string) => void
-}): JSX.Element | null {
-  const { isPending, device } = useDevice({
-    device_id: deviceId,
-  })
-
-  if (isPending) {
-    return null
-  }
-
-  if (device == null) {
-    return null
-  }
-
-  if (!isThermostatDevice(device)) {
-    return null
-  }
-
-  return <Content device={device} onSelectDevice={onSelectDevice} />
-}
-
-function Content(props: {
-  device: ThermostatDevice
-  onSelectDevice: (deviceId: string) => void
-}): JSX.Element {
-  const { device, onSelectDevice } = props
-
-  return (
-    <div
-      className='seam-climate-setting-schedule-device-bar'
-      onClick={() => {
-        onSelectDevice(device.device_id)
-      }}
-    >
-      <div className='seam-climate-setting-schedule-device-content'>
-        <div className='seam-device-image'>
-          <DeviceImage device={device} />
-        </div>
-        <div className='seam-climate-setting-schedule-device-details'>
-          <div className='seam-device-name'>{device.properties.name}</div>
-          <div className='seam-device-current-climate-setting'>
-            {t.currentClimate}:
-            <ClimateSettingStatus
-              climateSetting={device.properties.current_climate_setting}
-            />
-          </div>
-        </div>
-      </div>
-      <div className='seam-climate-setting-schedule-device-chevron'>
-        <ChevronWideIcon />
-      </div>
-    </div>
-  )
-}
-
-const t = {
-  currentClimate: 'Current climate',
-}

package/src/lib/seam/components/ClimateSettingScheduleDetails/dates.ts

@@ -1,10 +0,0 @@
-import { DateTime } from 'luxon'
-
-export const formatDateTime = (date: string): string =>
-  DateTime.fromISO(date).toLocaleString({
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    timeZoneName: 'short',
-  })

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.tsx

@@ -1,35 +0,0 @@
-import type { ClimateSettingSchedule } from '@seamapi/types/connect'
-
-import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.js'
-import { ClimateSettingScheduleRowDetails } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRowDetails.js'
-import { TableCell } from 'lib/ui/Table/TableCell.js'
-import { TableRow } from 'lib/ui/Table/TableRow.js'
-import { Title } from 'lib/ui/typography/Title.js'
-
-interface ClimateSettingScheduleRowProps {
-  climateSettingSchedule: ClimateSettingSchedule
-  onClick: () => void
-}
-
-export function ClimateSettingScheduleRow({
-  climateSettingSchedule,
-  onClick,
-}: ClimateSettingScheduleRowProps): JSX.Element {
-  return (
-    <TableRow onClick={onClick}>
-      <TableCell className='seam-icon-cell'>
-        <div>
-          <ClimateSettingScheduleIcon />
-        </div>
-      </TableCell>
-      <TableCell className='seam-name-cell'>
-        <Title className='seam-truncated-text'>
-          {climateSettingSchedule.name}
-        </Title>
-        <ClimateSettingScheduleRowDetails
-          climateSettingSchedule={climateSettingSchedule}
-        />
-      </TableCell>
-    </TableRow>
-  )
-}

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRowDetails.tsx

@@ -1,60 +0,0 @@
-import type { ClimateSettingSchedule } from '@seamapi/types/connect'
-import { DateTime } from 'luxon'
-
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import { DotDivider } from 'lib/ui/layout/DotDivider.js'
-import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
-import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
-
-export function ClimateSettingScheduleRowDetails(props: {
-  climateSettingSchedule: ClimateSettingSchedule
-}): JSX.Element {
-  const { climateSettingSchedule } = props
-  const { device } = useDevice({ device_id: climateSettingSchedule.device_id })
-
-  return (
-    <div className='seam-details'>
-      <span className='seam-device-name seam-truncated-text'>
-        {device?.properties.name}
-      </span>
-      <DotDivider />
-      <Duration climateSettingSchedule={climateSettingSchedule} />
-      <DotDivider />
-      <ClimateSettingStatus climateSetting={climateSettingSchedule} />
-    </div>
-  )
-}
-
-function Duration(props: {
-  climateSettingSchedule: ClimateSettingSchedule
-}): JSX.Element {
-  const { climateSettingSchedule } = props
-
-  const hasStarted =
-    useIsDateInPast(climateSettingSchedule.schedule_starts_at) ?? false
-
-  if (hasStarted) {
-    return (
-      <span>
-        {t.ends} {formatDate(climateSettingSchedule.schedule_ends_at)}{' '}
-      </span>
-    )
-  }
-
-  return (
-    <span>
-      {t.starts} {formatDate(climateSettingSchedule.schedule_starts_at)}
-    </span>
-  )
-}
-
-const formatDate = (date: string): string =>
-  DateTime.fromISO(date).toLocaleString({
-    month: 'long',
-    day: 'numeric',
-  })
-
-const t = {
-  starts: 'Starts',
-  ends: 'Ends',
-}

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.element.ts

@@ -1,17 +0,0 @@
-import type { ElementProps } from 'lib/element.js'
-
-import type { ClimateSettingScheduleTableProps } from './ClimateSettingScheduleTable.js'
-
-export const name = 'seam-climate-setting-schedule-table'
-
-export const props: ElementProps<ClimateSettingScheduleTableProps> = {
-  deviceId: 'string',
-  disableSearch: 'boolean',
-  onClimateSettingScheduleClick: 'object',
-  preventDefaultOnClimateSettingScheduleClick: 'boolean',
-  climateSettingScheduleFilter: 'object',
-  climateSettingScheduleComparator: 'object',
-  heading: 'string',
-}
-
-export { ClimateSettingScheduleTable as Component } from './ClimateSettingScheduleTable.js'

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.tsx

@@ -1,220 +0,0 @@
-import type { ClimateSettingSchedule } from '@seamapi/types/connect'
-import classNames from 'classnames'
-import { useCallback, useMemo, useState } from 'react'
-
-import { compareByCreatedAtDesc } from 'lib/dates.js'
-import { NestedClimateSettingScheduleDetails } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js'
-import { ClimateSettingScheduleRow } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.js'
-import {
-  type CommonProps,
-  withRequiredCommonProps,
-} from 'lib/seam/components/common-props.js'
-import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
-import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
-import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
-import { TableBody } from 'lib/ui/Table/TableBody.js'
-import { TableHeader } from 'lib/ui/Table/TableHeader.js'
-import { TableTitle } from 'lib/ui/Table/TableTitle.js'
-import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
-import { Caption } from 'lib/ui/typography/Caption.js'
-
-export const NestedClimateSettingScheduleTable = withRequiredCommonProps(
-  ClimateSettingScheduleTable
-)
-
-export interface ClimateSettingScheduleTableProps extends CommonProps {
-  deviceId: string
-  disableSearch?: boolean
-  onClimateSettingScheduleClick?: (climateSettingScheduleId: string) => void
-  preventDefaultOnClimateSettingScheduleClick?: boolean
-  climateSettingScheduleFilter?: (
-    climateSettingSchedule: ClimateSettingSchedule,
-    searchInputValue: string
-  ) => boolean
-  climateSettingScheduleComparator?: (
-    climateSettingScheduleA: ClimateSettingSchedule,
-    climateSettingScheduleB: ClimateSettingSchedule
-  ) => number
-  heading?: string | null
-}
-
-const defaultClimateSettingScheduleFilter = (
-  climateSettingSchedule: ClimateSettingSchedule,
-  searchInputValue: string
-): boolean => {
-  const value = searchInputValue.trim().toLowerCase()
-  if (value === '') return true
-  const name = climateSettingSchedule.name ?? ''
-  return name.trim().toLowerCase().includes(value)
-}
-
-export function ClimateSettingScheduleTable({
-  deviceId,
-  disableSearch = false,
-  onClimateSettingScheduleClick = () => {},
-  preventDefaultOnClimateSettingScheduleClick = false,
-  climateSettingScheduleFilter = defaultClimateSettingScheduleFilter,
-  climateSettingScheduleComparator = compareByCreatedAtDesc,
-  heading = t.climateSettingSchedules,
-  disableLockUnlock = false,
-  disableDeleteAccessCode = false,
-  onBack,
-  className,
-  errorFilter = () => true,
-  warningFilter = () => true,
-  disableCreateAccessCode,
-  disableEditAccessCode,
-  disableResourceIds = false,
-  disableConnectedAccountInformation = false,
-  disableClimateSettingSchedules,
-}: ClimateSettingScheduleTableProps): JSX.Element {
-  useComponentTelemetry('ClimateSettingScheduleTable')
-
-  const { climateSettingSchedules, isInitialLoading, isError, refetch } =
-    useClimateSettingSchedules({
-      device_id: deviceId,
-    })
-
-  const [searchInputValue, setSearchInputValue] = useState('')
-  const [
-    selectedViewClimateSettingScheduleId,
-    setSelectedViewClimateSettingScheduleId,
-  ] = useState<string | null>(null)
-
-  const filteredClimateSettingSchedules = useMemo(
-    () =>
-      climateSettingSchedules
-        ?.filter((schedule) =>
-          climateSettingScheduleFilter(schedule, searchInputValue)
-        )
-        ?.sort(climateSettingScheduleComparator) ?? [],
-    [
-      climateSettingSchedules,
-      searchInputValue,
-      climateSettingScheduleFilter,
-      climateSettingScheduleComparator,
-    ]
-  )
-
-  const handleClimateSettingScheduleClick = useCallback(
-    (climateSettingScheduleId: string): void => {
-      onClimateSettingScheduleClick(climateSettingScheduleId)
-      if (preventDefaultOnClimateSettingScheduleClick) return
-      setSelectedViewClimateSettingScheduleId(climateSettingScheduleId)
-    },
-    [
-      onClimateSettingScheduleClick,
-      preventDefaultOnClimateSettingScheduleClick,
-      setSelectedViewClimateSettingScheduleId,
-    ]
-  )
-
-  if (selectedViewClimateSettingScheduleId != null) {
-    return (
-      <NestedClimateSettingScheduleDetails
-        climateSettingScheduleId={selectedViewClimateSettingScheduleId}
-        errorFilter={errorFilter}
-        warningFilter={warningFilter}
-        disableLockUnlock={disableLockUnlock}
-        disableCreateAccessCode={disableCreateAccessCode}
-        disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={disableDeleteAccessCode}
-        disableResourceIds={disableResourceIds}
-        disableConnectedAccountInformation={disableConnectedAccountInformation}
-        disableClimateSettingSchedules={disableClimateSettingSchedules}
-        onBack={() => {
-          setSelectedViewClimateSettingScheduleId(null)
-        }}
-        className={className}
-      />
-    )
-  }
-
-  return (
-    <div className={classNames('seam-table', className)}>
-      <ContentHeader onBack={onBack} />
-      <TableHeader>
-        {heading != null ? (
-          <TableTitle>
-            {heading ?? t.climateSettingSchedules}{' '}
-            <Caption>({filteredClimateSettingSchedules.length})</Caption>
-          </TableTitle>
-        ) : (
-          <div className='seam-fragment' />
-        )}
-        <div className='seam-table-header-loading-wrap'>
-          <LoadingToast
-            isLoading={isInitialLoading}
-            label={t.loading}
-            top={-20}
-          />
-        </div>
-        {!disableSearch && (
-          <SearchTextField
-            value={searchInputValue}
-            onChange={setSearchInputValue}
-            disabled={(climateSettingSchedules?.length ?? 0) === 0}
-          />
-        )}
-      </TableHeader>
-      <TableBody>
-        <Content
-          climateSettingSchedules={filteredClimateSettingSchedules}
-          onClimateSettingScheduleClick={handleClimateSettingScheduleClick}
-        />
-      </TableBody>
-
-      <Snackbar
-        variant='error'
-        visible={isError}
-        message={t.fallbackErrorMessage}
-        action={{
-          label: t.tryAgain,
-          onClick: () => {
-            void refetch()
-          },
-        }}
-        disableCloseButton
-      />
-    </div>
-  )
-}
-
-function Content(props: {
-  climateSettingSchedules: ClimateSettingSchedule[]
-  onClimateSettingScheduleClick: (climateSettingScheduleId: string) => void
-}): JSX.Element {
-  const { climateSettingSchedules, onClimateSettingScheduleClick } = props
-
-  if (climateSettingSchedules.length === 0) {
-    return (
-      <EmptyPlaceholder>{t.noClimateSettingSchedulesMessage}</EmptyPlaceholder>
-    )
-  }
-
-  return (
-    <>
-      {climateSettingSchedules.map((schedule) => (
-        <ClimateSettingScheduleRow
-          climateSettingSchedule={schedule}
-          key={schedule.climate_setting_schedule_id}
-          onClick={() => {
-            onClimateSettingScheduleClick(schedule.climate_setting_schedule_id)
-          }}
-        />
-      ))}
-    </>
-  )
-}
-
-const t = {
-  climateSettingSchedules: 'Climate setting schedules',
-  noClimateSettingSchedulesMessage:
-    'Sorry, no climate setting schedules were found',
-  loading: 'Loading schedules',
-  tryAgain: 'Try again',
-  fallbackErrorMessage: 'Climate settings could not be loaded',
-}

package/src/lib/seam/components/CreateClimateSettingScheduleForm/CreateClimateSettingScheduleForm.element.ts

@@ -1,9 +0,0 @@
-import type { ElementProps } from 'lib/element.js'
-
-import type { CreateClimateSettingScheduleFormProps } from './CreateClimateSettingScheduleForm.js'
-
-export const name = 'seam-create-climate-setting-schedule-form'
-
-export const props: ElementProps<CreateClimateSettingScheduleFormProps> = {}
-
-export { CreateClimateSettingScheduleForm as Component } from './CreateClimateSettingScheduleForm.js'

package/src/lib/seam/components/CreateClimateSettingScheduleForm/CreateClimateSettingScheduleForm.tsx

@@ -1,56 +0,0 @@
-import type { CommonProps } from 'lib/seam/components/common-props.js'
-import { useCreateClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-create-climate-setting-schedule.js'
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-import {
-  ClimateSettingScheduleForm,
-  type ClimateSettingScheduleFormSubmitData,
-} from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-
-export interface CreateClimateSettingScheduleFormProps extends CommonProps {}
-
-export function CreateClimateSettingScheduleForm({
-  className,
-  onBack,
-}: CreateClimateSettingScheduleFormProps): JSX.Element | null {
-  useComponentTelemetry('CreateClimateSettingScheduleForm')
-
-  const { submit, isSubmitting } = useSubmitCreateClimateSettingSchedule(onBack)
-
-  return (
-    <ClimateSettingScheduleForm
-      className={className}
-      onBack={onBack}
-      onSubmit={submit}
-      isSubmitting={isSubmitting}
-    />
-  )
-}
-
-function useSubmitCreateClimateSettingSchedule(onSuccess?: () => void): {
-  submit: (data: ClimateSettingScheduleFormSubmitData) => void
-  isSubmitting: boolean
-} {
-  const { mutate, isPending: isSubmitting } = useCreateClimateSettingSchedule()
-  const submit = (data: ClimateSettingScheduleFormSubmitData): void => {
-    const { name, deviceId, startDate, endDate, climateSetting } = data
-
-    if (isSubmitting) {
-      return
-    }
-
-    mutate(
-      {
-        name,
-        device_id: deviceId,
-        schedule_starts_at: startDate,
-        schedule_ends_at: endDate,
-        ...climateSetting,
-      },
-      {
-        onSuccess,
-      }
-    )
-  }
-
-  return { submit, isSubmitting }
-}