@seamapi/react 0.22.0 → 0.22.2

package/src/lib/copy.ts

@@ -0,0 +1,3 @@
+export async function copy(value: string) {
+  await window.navigator.clipboard.writeText(value)
+}

package/src/lib/icons/Copy.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const CopyIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={18}
+    height={18}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='copy_svg__a'
+      width={18}
+      height={18}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h18v18H0z' />
+    </mask>
+    <g mask='url(#copy_svg__a)'>
+      <path
+        fill='#007AFC'
+        d='M3.75 16.5c-.413 0-.766-.147-1.06-.44A1.446 1.446 0 0 1 2.25 15V4.5h1.5V15H12v1.5H3.75Zm3-3c-.412 0-.766-.147-1.059-.44A1.445 1.445 0 0 1 5.25 12V3c0-.413.147-.766.441-1.06.293-.293.647-.44 1.059-.44h6.75c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44H6.75Zm0-1.5h6.75V3H6.75v9Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,11 +1,15 @@
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
+import { copy } from 'lib/copy.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { CopyIcon } from 'lib/icons/Copy.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -71,7 +75,28 @@ export function AccessCodeTable(
               <Title>{code.name}</Title>
               <CodeDetails accessCode={code} />
             </TableCell>
-            <TableCell className='seam-action-cell' />
+            <TableCell className='seam-action-cell'>
+              <MoreActionsMenu
+                MenuProps={{
+                  BackgroundProps: {
+                    className: 'seam-access-code-table-action-menu',
+                  },
+                }}
+              >
+                <MenuItem
+                  onClick={() => {
+                    void copy(code.code ?? '')
+                  }}
+                >
+                  <div className='menu-item-copy'>
+                    <span>
+                      {t.copyCode} - {code.code}
+                    </span>
+                    <CopyIcon />
+                  </div>
+                </MenuItem>
+              </MoreActionsMenu>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -81,4 +106,5 @@ export function AccessCodeTable(
 
 const t = {
   accessCodes: 'Access Codes',
+  copyCode: 'Copy code',
 }

package/src/lib/ui/Menu/Menu.tsx

@@ -0,0 +1,179 @@
+import classNames from 'classnames'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+export interface MenuProps {
+  children: JSX.Element | JSX.Element[]
+  verticalOffset?: number
+  horizontalOffset?: number
+  edgeOffset?: number
+  button: (props: {
+    open: (event: React.MouseEvent<HTMLElement>) => void
+  }) => React.ReactElement
+  BackgroundProps?: Partial<{
+    className?: string
+  }>
+}
+
+interface MenuContextProps {
+  close: () => void
+}
+
+const MenuContext = createContext<MenuContextProps | undefined>(undefined)
+
+const Menu = ({
+  verticalOffset = 5,
+  horizontalOffset = 0,
+  edgeOffset = 5,
+  children,
+  button,
+  BackgroundProps,
+}: MenuProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [documentEl, setDocumentEl] = useState<null | Element>(null)
+  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null)
+  const [top, setTop] = useState(0)
+  const [left, setLeft] = useState(0)
+
+  useEffect(() => {
+    const containers = document.querySelectorAll('.seam-components')
+    const el = containers[containers.length - 1]
+    if (el != null) {
+      setDocumentEl(el)
+    }
+  }, [setDocumentEl])
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const setPositions = useCallback(() => {
+    if (anchorEl == null || contentEl == null || documentEl == null) return
+
+    const { right: containerRight, bottom: containerBottom } =
+      documentEl.getBoundingClientRect()
+
+    const {
+      top: anchorTop,
+      left: anchorLeft,
+      height: anchorHeight,
+    } = anchorEl.getBoundingClientRect()
+
+    const { width: contentWidth, height: contentHeight } =
+      contentEl.getBoundingClientRect()
+
+    const anchorBottom = anchorTop + anchorHeight
+
+    const top = anchorBottom + verticalOffset
+    const left = anchorLeft + horizontalOffset
+    const right = left + contentWidth
+    const bottom = top + contentHeight
+
+    // If the content would overflow right, we'll need to set it relative
+    // to the right of the container.
+    const isOverflowingRight = right > containerRight
+    const visibleLeft = isOverflowingRight
+      ? containerRight - contentWidth - horizontalOffset - edgeOffset
+      : left
+    setLeft(visibleLeft)
+
+    // If the content would overflow bottom, we'll position it to be
+    // above the anchor.
+    const isOverFlowingBottom = bottom > containerBottom
+    const visibleTop = isOverFlowingBottom
+      ? anchorTop - contentHeight - verticalOffset
+      : top
+    setTop(visibleTop)
+  }, [
+    anchorEl,
+    horizontalOffset,
+    verticalOffset,
+    contentEl,
+    documentEl,
+    edgeOffset,
+  ])
+
+  const isOpen = Boolean(anchorEl)
+
+  useLayoutEffect(() => {
+    setPositions()
+    window.addEventListener('scroll', setPositions)
+    window.addEventListener('resize', setPositions)
+    return () => {
+      window.removeEventListener('scroll', setPositions)
+      window.removeEventListener('resize', setPositions)
+    }
+  }, [setPositions])
+
+  const hasSetPosition = top !== 0 && left !== 0
+  const visible = isOpen && hasSetPosition
+
+  if (documentEl == null) {
+    return null
+  }
+
+  return (
+    <MenuContext.Provider
+      value={{
+        close: handleClose,
+      }}
+    >
+      {button({ open })}
+      {createPortal(
+        <div
+          className={classNames('seam-menu-bg', BackgroundProps?.className)}
+          style={{
+            display: visible ? 'flex' : 'none',
+          }}
+          onClick={(e) => {
+            e.stopPropagation()
+            handleClose()
+          }}
+        >
+          <div
+            className='seam-menu-content'
+            style={{
+              top,
+              left,
+            }}
+          >
+            {children}
+          </div>
+        </div>,
+        documentEl
+      )}
+
+      {/*
+       * Render a shadow element to calculate the content size even if we're
+       * not actually showing the content yet.
+       */}
+      <div className='seam-menu-shadow'>
+        <div className='seam-menu-content' ref={setContentEl}>
+          {children}
+        </div>
+      </div>
+    </MenuContext.Provider>
+  )
+}
+
+export function useMenu() {
+  const context = useContext(MenuContext)
+  if (context === undefined) {
+    throw new Error('useMenu must be used within a Menu.')
+  }
+
+  return context
+}
+
+export default Menu

package/src/lib/ui/Menu/MenuItem.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+
+import { useMenu } from 'lib/ui/Menu/Menu.js'
+
+export interface MenuItemProps {
+  children: ReactNode
+  onClick: () => void
+}
+
+export function MenuItem({ children, onClick }: MenuItemProps) {
+  const { close: closeMenu } = useMenu()
+
+  return (
+    <div
+      className='seam-menu-item'
+      onClick={() => {
+        onClick()
+        closeMenu()
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/lib/ui/Menu/MoreActionsMenu.tsx

@@ -0,0 +1,27 @@
+import { DotsEllipsisMoreIcon } from 'lib/icons/DotsEllipsisMore.js'
+import { IconButton } from 'lib/ui/IconButton.js'
+import Menu, { type MenuProps } from 'lib/ui/Menu/Menu.js'
+
+export interface MoreActionsMenuProps {
+  children: JSX.Element | JSX.Element[]
+  MenuProps?: Partial<MenuProps>
+}
+export function MoreActionsMenu({ children, MenuProps }: MoreActionsMenuProps) {
+  return (
+    <Menu
+      button={({ open }) => (
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation()
+            open(e)
+          }}
+        >
+          <DotsEllipsisMoreIcon />
+        </IconButton>
+      )}
+      {...MenuProps}
+    >
+      {children}
+    </Menu>
+  )
+}

package/src/lib/ui/SupportedDevices/SupportedDeviceRow.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames'
+
+import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
+
+export interface SupportedDeviceRowProps {
+  deviceModel: DeviceModel
+}
+
+export default function SupportedDeviceRow({
+  deviceModel,
+}: SupportedDeviceRowProps) {
+  function getColorFromSupportLevel() {
+    switch (deviceModel.support_level) {
+      case 'Live':
+        return 'green'
+      case 'Beta':
+        return 'blue'
+      case 'Unsupported':
+        return 'orange'
+      default:
+        return 'gray'
+    }
+  }
+
+  return (
+    <tr>
+      <td>
+        <img style={{ width: 40 }} src={deviceModel.icon_url} />
+      </td>
+      <td>{deviceModel.main_category}</td>
+      <td>{deviceModel.model_name}</td>
+      <td>{deviceModel.manufacturer_model_id}</td>
+      <td>{deviceModel.connection_type}</td>
+      <td>
+        <div
+          className={classNames(
+            'seam-status-pill',
+            `status-${getColorFromSupportLevel()}`
+          )}
+        >
+          <span>{deviceModel.support_level}</span>
+        </div>
+      </td>
+    </tr>
+  )
+}

package/src/lib/ui/SupportedDevices/SupportedDevices.tsx

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+
+import { Button } from 'lib/ui/Button.js'
+import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
+
+import SupportedDeviceRow from './SupportedDeviceRow.js'
+import SupportedDevicesHeader from './SupportedDevicesHeader.js'
+
+export default function SupportedDevices() {
+  const { data, isLoading, isError, refetch } = useQuery<{
+    data: {
+      device_models?: DeviceModel[]
+    }
+  }>({
+    queryKey: ['supported_devices'],
+    queryFn: async () => {
+      return await axios.get('https://devicedb.seam.co/api/device_models/list')
+    },
+  })
+
+  return (
+    <>
+      <div className='seam-supported-devices-table-wrap'>
+        {isLoading && (
+          <div className='seam-supported-devices-table-state-block'>
+            <p>Loading device models...</p>
+          </div>
+        )}
+
+        {isError && (
+          <div className='seam-supported-devices-table-state-block'>
+            <p>There was an error fetching device models.</p>
+            <Button
+              variant='solid'
+              size='small'
+              onClick={() => {
+                void refetch()
+              }}
+            >
+              Retry
+            </Button>
+          </div>
+        )}
+
+        {!isLoading &&
+          !isError &&
+          data?.data?.device_models !== null &&
+          Array.isArray(data?.data?.device_models) && (
+            <table className='seam-supported-devices-table'>
+              <SupportedDevicesHeader />
+              <tbody>
+                {data.data.device_models.map((deviceModel) => (
+                  <SupportedDeviceRow
+                    key={deviceModel.manufacturer_model_id}
+                    deviceModel={deviceModel}
+                  />
+                ))}
+              </tbody>
+            </table>
+          )}
+      </div>
+    </>
+  )
+}

package/src/lib/ui/SupportedDevices/SupportedDevicesHeader.tsx

@@ -0,0 +1,14 @@
+export default function SupportedDevicesHeader() {
+  return (
+    <thead>
+      <tr>
+        <th />
+        <th>Category</th>
+        <th>Model Name</th>
+        <th>Manufacturer Model ID</th>
+        <th>Connection Type</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+  )
+}

package/src/lib/ui/SupportedDevices/types.ts

@@ -0,0 +1,10 @@
+export interface DeviceModel {
+  main_category: string
+  model_name: string
+  manufacturer_model_id: string
+  connection_type: string
+  support_level: 'Live' | 'Beta' | 'Unsupported'
+  brand: string
+  icon_url: string
+  seam_device_model_page_url: string
+}

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

@@ -47,4 +47,13 @@
       }
     }
   }
+
+  .seam-access-code-table-action-menu {
+    .menu-item-copy {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+    }
+  }
 }

package/src/styles/_main.scss

@@ -7,9 +7,11 @@
 @use './access-code-table';
 @use './colors';
 @use './icons';
+@use './menus';
 @use './device-details';
 @use './device-table';
 @use './access-code-details';
+@use './supported-devices';
 
 .seam-components {
   // Reset
@@ -22,10 +24,12 @@
   @include buttons.all;
   @include layout.all;
   @include icons.all;
+  @include menus.all;
 
   // Components
   @include device-details.all;
   @include device-table.all;
   @include access-code-table.all;
   @include access-code-details.all;
+  @include supported-devices.all;
 }

package/src/styles/_menus.scss

@@ -0,0 +1,46 @@
+@use './colors';
+
+@mixin all {
+  .seam-menu-bg {
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+    display: none; // Toggled in JS (component)
+  }
+
+  .seam-menu-content {
+    width: 250px;
+    position: absolute;
+    padding: 8px 0;
+    background: #fff;
+    box-shadow: 0 0 1px rgb(0 0 0 / 30%), 0 2px 16px 2px rgb(15 22 28 / 15%);
+    border-radius: 8px;
+
+    .seam-menu-item {
+      padding: 0 16px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      line-height: 134%;
+      cursor: pointer;
+
+      &:hover {
+        background: colors.$item-hover-bg;
+      }
+    }
+  }
+
+  .seam-menu-shadow {
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+    top: 0;
+    right: 0;
+    position: fixed;
+  }
+}

package/src/styles/_supported-devices.scss

@@ -0,0 +1,105 @@
+@use './colors';
+
+$row-padding: 8px;
+
+@mixin all {
+  .seam-supported-devices-table-state-block {
+    width: 100%;
+    background-color: colors.$bg-a;
+    padding: 32px 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .seam-supported-devices-table {
+    width: 100%;
+    overflow-x: auto;
+    table-layout: auto;
+    border-collapse: collapse;
+
+    th,
+    td {
+      white-space: nowrap;
+      padding: 0 8px;
+    }
+
+    thead {
+      width: 100%;
+      height: 50px;
+      background: colors.$bg-a;
+      overflow: hidden;
+
+      tr {
+        border-radius: 8px;
+      }
+
+      th {
+        vertical-align: middle;
+        text-align: left;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+
+    tbody {
+      tr {
+        height: 60px;
+        border-bottom: 1px solid colors.$bg-b;
+      }
+
+      td {
+        vertical-align: middle;
+      }
+    }
+
+    // stylelint-disable-next-line no-descending-specificity
+    tr {
+      th:first-of-type,
+      td:first-of-type {
+        padding-left: $row-padding;
+      }
+
+      th:last-of-type,
+      td:last-of-type {
+        padding-right: $row-padding;
+      }
+    }
+
+    .seam-status-pill {
+      display: inline-flex;
+      padding: 4px 8px;
+      border-radius: 90px;
+      background-color: colors.$status-green;
+
+      & span {
+        color: white;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1;
+      }
+
+      &.status-green {
+        background-color: colors.$status-green;
+      }
+
+      &.status-orange {
+        background-color: colors.$status-orange;
+      }
+
+      &.status-red {
+        background-color: colors.$status-red;
+      }
+
+      &.status-blue {
+        background-color: colors.$primary;
+      }
+
+      &.status-gray {
+        background-color: colors.$bg-d;
+      }
+    }
+  }
+}