@seamapi/react 1.48.1 → 1.49.0

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

@@ -1,8 +1,9 @@
 import classNames from 'classnames'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import type { ClimateSettingSchedule } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
+import { ClimateSettingScheduleDetails } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js'
 import {
   useClimateSettingSchedules,
   type UseClimateSettingSchedulesData,
@@ -20,6 +21,8 @@ import { ClimateSettingScheduleRow } from './ClimateSettingScheduleRow.js'
 export interface ClimateSettingScheduleTableProps {
   deviceId: string
   disableSearch?: boolean
+  onClimateSettingScheduleClick?: (climateSettingScheduleId: string) => void
+  preventDefaultOnClimateSettingScheduleClick?: boolean
   climateSettingScheduleFilter?: (
     climateSettingSchedule: ClimateSettingSchedule,
     searchInputValue: string
@@ -46,8 +49,11 @@ const defaultClimateSettingScheduleFilter = (
 export function ClimateSettingScheduleTable({
   deviceId,
   disableSearch = false,
+  onClimateSettingScheduleClick = () => {},
+  preventDefaultOnClimateSettingScheduleClick = false,
   climateSettingScheduleFilter = defaultClimateSettingScheduleFilter,
   climateSettingScheduleComparator = compareByCreatedAtDesc,
+
   onBack,
   heading = t.climateSettingSchedules,
   className,
@@ -58,6 +64,10 @@ export function ClimateSettingScheduleTable({
     })
 
   const [searchInputValue, setSearchInputValue] = useState('')
+  const [
+    selectedViewClimateSettingScheduleId,
+    setSelectedViewClimateSettingScheduleId,
+  ] = useState<string | null>(null)
 
   const filteredClimateSettingSchedules = useMemo(
     () =>
@@ -74,6 +84,31 @@ export function ClimateSettingScheduleTable({
     ]
   )
 
+  const handleClimateSettingScheduleClick = useCallback(
+    (climateSettingScheduleId: string): void => {
+      onClimateSettingScheduleClick(climateSettingScheduleId)
+      if (preventDefaultOnClimateSettingScheduleClick) return
+      setSelectedViewClimateSettingScheduleId(climateSettingScheduleId)
+    },
+    [
+      onClimateSettingScheduleClick,
+      preventDefaultOnClimateSettingScheduleClick,
+      setSelectedViewClimateSettingScheduleId,
+    ]
+  )
+
+  if (selectedViewClimateSettingScheduleId != null) {
+    return (
+      <ClimateSettingScheduleDetails
+        className={className}
+        climateSettingScheduleId={selectedViewClimateSettingScheduleId}
+        onBack={() => {
+          setSelectedViewClimateSettingScheduleId(null)
+        }}
+      />
+    )
+  }
+
   if (isLoading) {
     return <p className={className}>...</p>
   }
@@ -105,7 +140,7 @@ export function ClimateSettingScheduleTable({
       <TableBody>
         <Content
           climateSettingSchedules={filteredClimateSettingSchedules}
-          onClimateSettingScheduleClick={() => {}}
+          onClimateSettingScheduleClick={handleClimateSettingScheduleClick}
         />
       </TableBody>
     </div>

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

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react'
+
+import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+
+interface AccordionRowProps extends PropsWithChildren {
+  label: string
+  rightCollapsedContent?: JSX.Element
+}
+
+export function AccordionRow({
+  label,
+  rightCollapsedContent,
+  children,
+}: AccordionRowProps): JSX.Element {
+  const [isExpanded, toggle] = useToggle()
+
+  return (
+    <div className='seam-accordion-row' aria-expanded={isExpanded}>
+      <button className='seam-accordion-row-trigger' onClick={toggle}>
+        <p className='seam-row-label'>{label}</p>
+        <div className='seam-row-inner-wrap'>
+          <div className='seam-row-trigger-right-content'>
+            {rightCollapsedContent}
+          </div>
+          <div className='seam-accordion-icon-wrap'>
+            <ChevronWideIcon />
+          </div>
+        </div>
+      </button>
+      <div className='seam-accordion-row-content'>
+        <div className='seam-accordion-row-inner-content'>{children}</div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react'
+
+interface DetailRowProps {
+  label: string
+}
+
+export function DetailRow({
+  label,
+  children,
+}: PropsWithChildren<DetailRowProps>): JSX.Element {
+  return (
+    <div className='seam-detail-row'>
+      <p className='seam-row-label'>{label}</p>
+      <div className='seam-detail-row-right-area-content'>{children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+
+import { Tooltip } from 'lib/ui/Tooltip/Tooltip.js'
+
+interface DetailSectionProps {
+  label?: string
+  tooltipContent?: string
+}
+
+export function DetailSection({
+  label,
+  tooltipContent,
+  children,
+}: PropsWithChildren<DetailSectionProps>): JSX.Element {
+  return (
+    <div className='seam-detail-section'>
+      <div className='seam-detail-label-wrap'>
+        {label != null && <p className='seam-detail-label'>{label}</p>}
+        {tooltipContent != null && <Tooltip>{tooltipContent}</Tooltip>}
+      </div>
+
+      <div className='seam-detail-group'>{children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+export function DetailSectionGroup({
+  children,
+}: PropsWithChildren): JSX.Element {
+  return <div className='seam-detail-sections'>{children}</div>
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.48.1'
+const seamapiReactVersion = '1.49.0'
 
 export default seamapiReactVersion

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

@@ -33,11 +33,35 @@
           background: colors.$white;
           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;
+          display: flex;
+          justify-content: space-between;
+
+          > span {
+            padding: 10px 16px;
+          }
+
+          > .seam-icon-btn {
+            height: auto;
+            border: 0;
+            overflow: visible;
+            padding: 0;
+            padding: 16px 10px;
+            flex: 0 0 48px;
+            border-radius: 0 8px 8px 0;
+            border-left: 1px solid colors.$divider-stroke-light;
+
+            &:hover {
+              background: colors.$item-hover-bg;
+            }
+
+            svg {
+              scale: 0.8333;
+            }
+          }
         }
 
         .seam-duration {
@@ -105,6 +129,23 @@
           display: flex;
           flex: 1;
 
+          &.seam-code-id {
+            display: flex;
+            justify-content: space-between;
+
+            .seam-icon-btn {
+              border: 0;
+
+              &:hover {
+                background: transparent;
+              }
+
+              svg {
+                scale: 0.8333;
+              }
+            }
+          }
+
           .seam-times {
             display: flex;
             flex: 1;

package/src/styles/_climate-setting-schedule-details.scss

@@ -0,0 +1,44 @@
+@use './colors';
+
+@mixin all {
+  .seam-climate-setting-schedule-details {
+    .seam-climate-setting-schedule-details-content {
+      margin: 0 16px;
+    }
+
+    .seam-climate-setting-details-value {
+      font-style: normal;
+      font-weight: 400;
+      line-height: 118%;
+      font-size: 14px;
+      color: colors.$text-gray-1;
+
+      &.seam-climate-setting-details-schedule-range {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .seam-default-setting-message-container {
+      display: flex;
+      justify-content: center;
+      margin: 16px 0;
+
+      .seam-default-setting-message {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 115%;
+        color: colors.$text-gray-2;
+
+        .seam-default-setting-text {
+          color: colors.$text-gray-1;
+        }
+      }
+    }
+
+    .seam-creation-date {
+      color: colors.$text-gray-1;
+    }
+  }
+}

package/src/styles/_layout.scss

@@ -33,6 +33,152 @@
   }
 }
 
+@mixin detail-section {
+  .seam-detail-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .seam-detail-section {
+    width: 100%;
+  }
+
+  .seam-detail-label-wrap {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  .seam-detail-label {
+    color: colors.$text-gray-1;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 134%;
+  }
+
+  .seam-detail-group {
+    border-radius: 8px;
+    border: 1px solid colors.$text-gray-3;
+    overflow: hidden;
+  }
+}
+
+@mixin detail-row-common {
+  .seam-detail-row,
+  .seam-accordion-row {
+    background-color: colors.$white;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid colors.$divider-stroke-light;
+    }
+  }
+
+  .seam-detail-row,
+  .seam-accordion-row-trigger {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    min-height: 64px;
+    padding: 8px 16px;
+  }
+
+  .seam-row-label {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 118%;
+  }
+}
+
+@mixin detail-row {
+  .seam-detail-row-right-area-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 8px;
+  }
+}
+
+@mixin accordion-row {
+  .seam-accordion-row {
+    overflow: hidden;
+
+    .seam-accordion-row-trigger {
+      appearance: none;
+      width: 100%;
+      background-color: colors.$white;
+      font-size: 16px;
+      border: none;
+      box-shadow: none;
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    .seam-accordion-row-content {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      max-height: 0;
+      opacity: 0;
+      transition: all 0.3s ease-in-out;
+    }
+
+    &[aria-expanded='true'] {
+      .seam-accordion-row-content {
+        max-height: 64px;
+        opacity: 1;
+      }
+
+      .seam-accordion-icon-wrap {
+        transform: rotate(180deg);
+      }
+
+      .seam-row-trigger-right-content {
+        transform: scale(0.95);
+        opacity: 0;
+      }
+    }
+
+    .seam-accordion-row-inner-content {
+      height: 64px;
+      padding: 0 16px;
+      overflow: hidden;
+    }
+
+    .seam-row-inner-wrap {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      gap: 16px;
+    }
+
+    .seam-row-trigger-right-content {
+      transition: 0.2s ease-in-out;
+    }
+
+    .seam-accordion-icon-wrap {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+}
+
 @mixin all {
   @include header;
+  @include detail-section;
+  @include detail-row-common;
+  @include detail-row;
+  @include accordion-row;
 }

package/src/styles/_main.scss

@@ -20,6 +20,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './climate-setting-schedule-details';
 @use './switch';
 
 .seam-components {
@@ -50,4 +51,5 @@
   @include supported-device-table.all;
   @include thermostat.all;
   @include seam-table.all;
+  @include climate-setting-schedule-details.all;
 }

package/src/styles/_seam-table.scss

@@ -99,6 +99,14 @@
       align-items: center;
       justify-content: space-between;
       flex: 1;
+
+      svg {
+        scale: 0.75;
+
+        * {
+          fill: colors.$primary;
+        }
+      }
     }
   }
 }

package/src/styles/_thermostat.scss

@@ -304,7 +304,6 @@
   .seam-climate-setting-schedule-card {
     background: colors.$bg-a;
     border-radius: 16px;
-    margin: 0 24px 16px;
 
     .seam-climate-setting-schedule-content {
       display: flex;
@@ -394,6 +393,10 @@
         }
       }
     }
+
+    .seam-climate-setting-schedule-device-chevron {
+      transform: rotate(270deg);
+    }
   }
 }