@seamapi/react 1.30.2 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.30.2",
+  "version": "1.31.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -77,10 +77,12 @@
     "test:update": "jest --updateSnapshot",
     "test:watch": "jest --watch",
     "test:inspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
-    "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .",
+    "lint": "eslint --ignore-path .gitignore .",
     "prelint": "prettier --check --ignore-path .gitignore .",
     "postlint": "stylelint '**/*.scss'",
-    "prepack": "echo \"const seamapiReactVersion = '$(jq -r .version < package.json)'\n\nexport default seamapiReactVersion\" > src/lib/version.ts && tsc --project tsconfig.version.json",
+    "prepack": "tsx ./prepack.ts",
+    "version": "tsx ./version.ts",
+    "preversion": "tsx ./preversion.ts",
     "postversion": "git push --follow-tags",
     "storybook": "storybook dev --port 6006",
     "storybook:docs": "storybook dev --docs --port 6007",
@@ -94,7 +96,7 @@
     "generate": "svgr --out-dir src/lib/icons -- assets/icons",
     "pregenerate": "del src/lib/icons",
     "postgenerate": "eslint --fix src/lib/icons",
-    "format": "eslint --ignore-path .gitignore --fix --ext .js,.cjs,.mjs,.ts,.tsx .",
+    "format": "eslint --ignore-path .gitignore --fix .",
     "preformat": "prettier --write --ignore-path .gitignore .",
     "postformat": "stylelint --fix '**/*.scss'"
   },
@@ -160,8 +162,10 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "execa": "^7.1.1",
     "fast-glob": "^3.2.12",
     "http-proxy-middleware": "^2.0.6",
+    "isomorphic-fetch": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "^3.0.0",
@@ -177,6 +181,7 @@
     "ts-jest": "^29.1.0",
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "tsx": "^3.12.7",
     "typescript": "^5.1.0",
     "vite": "^4.2.1",
     "vite-tsconfig-paths": "^4.0.8",

package/src/lib/dates.ts

@@ -1,4 +1,4 @@
-import { DateTime } from 'luxon'
+import { DateTime, IANAZone } from 'luxon'
 
 export const compareByCreatedAtDesc = (
   a: { created_at: string },
@@ -9,3 +9,122 @@ export const compareByCreatedAtDesc = (
   if (!t1.isValid || !t2.isValid) return 0
   return t1.toMillis() - t2.toMillis()
 }
+
+/**
+ * Get the timezone strings supported by the user's browser.
+ *
+ * @returns string[]
+ */
+export function getTimezones(): string[] {
+  return Intl.supportedValuesOf('timeZone')
+}
+
+/**
+ * Get the default browser timezone.
+ *
+ * @returns string
+ */
+export function getBrowserTimezone(): string {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone
+}
+
+/**
+ * Takes an IANA timezone, like America/Los_Angeles, into a more readable
+ * string: Los Angeles (America).
+ * @param timezone
+ * @returns string
+ */
+export function getTimezoneLabel(timezone: string): string {
+  const [region = '', city = ''] = timezone.replace(/_/g, ' ').split('/')
+  return `${city} (${region})`
+}
+
+/**
+ * Get a timezones offset from UTC in minutes.
+ *
+ * @param timezone
+ * @returns minutes
+ */
+function getTimezoneOffsetMinutes(timezone: string): number {
+  return DateTime.local().setZone(timezone).offset
+}
+
+/**
+ * Compares 2 timezones (America/Los_angeles) by their offset
+ * minutes in ascending order.
+ *
+ * @param timezoneA
+ * @param timezonB
+ * @returns number
+ */
+export const compareByTimezoneOffsetAsc = (
+  timezoneA: string,
+  timezonB: string
+): number =>
+  getTimezoneOffsetMinutes(timezoneA) - getTimezoneOffsetMinutes(timezonB)
+
+/**
+ * Get the timezone offset
+ * America/Los_angeles -> -07:00
+ *
+ * eg. America/Los_Angeles -> UTC-07:00
+ *
+ * @param timezone
+ * @returns offset
+ */
+export function getTimezoneOffset(timezone: string): string {
+  return IANAZone.create(timezone).formatOffset(Date.now(), 'short')
+}
+
+const formatDateReadable = (
+  date: string,
+  options: {
+    showWeekday?: boolean
+  } = {}
+): string => {
+  const { showWeekday = true } = options
+
+  // '2023-04-17' to 'Mon Apr 17, 2023' / 'Apr 17, 2023'
+  const format = showWeekday ? 'EEE MMM d, yyyy' : 'MMM d, yyyy'
+
+  return DateTime.fromFormat(date, 'yyyy-MM-dd').toFormat(format)
+}
+
+const formatTimeReadable = (time: string): string | null => {
+  const dateTime = DateTime.fromFormat(time, 'HH:mm:ss')
+  if (!dateTime.isValid) {
+    return null
+  }
+
+  return dateTime.toFormat('h:mm a')
+}
+
+export const formatDateTimeReadable = (dateTime: string): string => {
+  const [date = '', time = ''] = dateTime.split('T')
+  return `${formatDateReadable(date, { showWeekday: false })} at ${
+    formatTimeReadable(time) ?? ''
+  }`
+}
+
+export const getNow = (): string => getDateTimeOnly(DateTime.now())
+export const get24HoursLater = (): string =>
+  getDateTimeOnly(DateTime.now().plus({ days: 1 }))
+
+function getDateTimeOnly(dateTime: DateTime): string {
+  const date = dateTime.toFormat('yyyy-MM-dd')
+  const time = dateTime.toFormat('HH:mm:ss')
+  return `${date}T${time}`
+}
+
+/**
+ * Takes a date (2023-07-20T00:00:00), and a timezone (America/Los_angeles), and
+ * returns an ISO8601 Date (2023-07-20T00:00:00.000-07:00).
+ *
+ * @param date
+ * @param timezone
+ * @returns ISOdate
+ */
+export const createIsoDate = (date: string, timezone: string): string => {
+  const offset = getTimezoneOffset(timezone)
+  return `${date}.000${offset}`
+}

package/src/lib/icons/CheckboxBlank.tsx

@@ -0,0 +1,22 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function CheckboxBlankIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#000'
+        fillOpacity={0.6}
+        d='M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z'
+      />
+    </svg>
+  )
+}

package/src/lib/icons/CheckboxFilled.tsx

@@ -0,0 +1,23 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function CheckboxFilledIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#2196F3'
+        d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z'
+      />
+    </svg>
+  )
+}

package/src/lib/icons/Edit.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function EditIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='edit_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#edit_svg__a)'>
+        <path
+          fill='#232B3A'
+          d='M5 19h1.4l8.625-8.625-1.4-1.4L5 17.6V19ZM19.3 8.925l-4.25-4.2 1.4-1.4a1.92 1.92 0 0 1 1.413-.575 1.92 1.92 0 0 1 1.412.575l1.4 1.4c.383.383.583.846.6 1.388a1.806 1.806 0 0 1-.55 1.387L19.3 8.925ZM17.85 10.4 7.25 21H3v-4.25l10.6-10.6 4.25 4.25Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/RadioChecked.tsx

@@ -0,0 +1,21 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function RadioCheckedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#2196F3'
+        d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z'
+      />
+    </svg>
+  )
+}

package/src/lib/icons/RadioUnchecked.tsx

@@ -0,0 +1,23 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function RadioUncheckedIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#232B3A'
+        d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z'
+      />
+    </svg>
+  )
+}

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

@@ -1,13 +1,25 @@
 import classNames from 'classnames'
 import { useState } from 'react'
+import type { AccessCode } from 'seamapi'
 
+import {
+  createIsoDate,
+  get24HoursLater,
+  getBrowserTimezone,
+  getNow,
+} from 'lib/dates.js'
 import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
+import { AccessCodeFormDatePicker } from 'lib/seam/components/AccessCodeForm/AccessCodeFormDatePicker.js'
+import { AccessCodeFormTimes } from 'lib/seam/components/AccessCodeForm/AccessCodeFormTimes.js'
+import { AccessCodeFormTimezonePicker } from 'lib/seam/components/AccessCodeForm/AccessCodeFormTimezonePicker.js'
 import { useDevice, type UseDeviceData } from 'lib/seam/devices/use-device.js'
 import { Button } from 'lib/ui/Button.js'
 import { FormField } from 'lib/ui/FormField.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { RadioField } from 'lib/ui/RadioField/RadioField.js'
 import { TextField } from 'lib/ui/TextField/TextField.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface AccessCodeFormProps {
   deviceId: string
@@ -42,37 +54,53 @@ function Content({
   device: NonNullable<UseDeviceData>
 }): JSX.Element {
   const [name, setName] = useState('')
+  const [type, setType] = useState<AccessCode['type']>('ongoing')
+  const [datePickerVisible, setDatePickerVisible] = useState(false)
+  const [timezone, setTimezone] = useState<string>(getBrowserTimezone())
+  const [startDate, setStartDate] = useState<string>(getNow())
+  const [endDate, setEndDate] = useState<string>(get24HoursLater())
+  const [timezonePickerVisible, toggleTimezonePicker] = useToggle()
 
-  const createAccessCode = useCreateAccessCode()
-
-  const save = (): void => {
-    if (name === '') {
-      return
-    }
+  const { submit, isLoading } = useSubmit({
+    name,
+    type,
+    device,
+    startDate,
+    endDate,
+    timezone,
+    onSuccess: onBack,
+  })
 
-    if (createAccessCode.isLoading) {
-      return
-    }
+  if (timezonePickerVisible) {
+    return (
+      <AccessCodeFormTimezonePicker
+        value={timezone}
+        onChange={setTimezone}
+        onClose={toggleTimezonePicker}
+      />
+    )
+  }
 
-    createAccessCode.mutate(
-      {
-        name,
-        device_id: device.device_id,
-      },
-      {
-        onSuccess: () => {
-          onBack?.()
-        },
-      }
+  if (datePickerVisible) {
+    return (
+      <AccessCodeFormDatePicker
+        startDate={startDate}
+        setStartDate={setStartDate}
+        endDate={endDate}
+        setEndDate={setEndDate}
+        timezone={timezone}
+        onChangeTimezone={toggleTimezonePicker}
+        onBack={() => {
+          setDatePickerVisible(false)
+        }}
+      />
     )
   }
 
   const nameError = name.length > 60 ? t.overCharacterLimitError : undefined
 
   const isFormValid =
-    name.trim().length > 0 &&
-    nameError === undefined &&
-    !createAccessCode.isLoading
+    name.trim().length > 0 && nameError === undefined && !isLoading
 
   return (
     <>
@@ -93,9 +121,38 @@ function Content({
             helperText={nameError}
           />
         </FormField>
+        <FormField>
+          <InputLabel>{t.timingInputLabel}</InputLabel>
+          <RadioField
+            value={type}
+            onChange={setType}
+            name='type'
+            options={[
+              {
+                label: t.typeOngoingLabel,
+                value: 'ongoing',
+              },
+              {
+                label: t.typeTimeBoundLabel,
+                value: 'time_bound',
+              },
+            ]}
+          />
+          <>
+            {type === 'time_bound' && (
+              <AccessCodeFormTimes
+                startDate={startDate}
+                endDate={endDate}
+                onEdit={() => {
+                  setDatePickerVisible(true)
+                }}
+              />
+            )}
+          </>
+        </FormField>
         <div className='seam-actions'>
           <Button onClick={onBack}>{t.cancel}</Button>
-          <Button variant='solid' disabled={!isFormValid} onMouseDown={save}>
+          <Button variant='solid' disabled={!isFormValid} onMouseDown={submit}>
             {t.save}
           </Button>
         </div>
@@ -104,10 +161,67 @@ function Content({
   )
 }
 
+function useSubmit(params: {
+  name: string
+  type: AccessCode['type']
+  device: NonNullable<UseDeviceData>
+  startDate: string
+  endDate: string
+  timezone: string
+  onSuccess?: () => void
+}): {
+  submit: () => void
+  isLoading: boolean
+} {
+  const { name, type, device, startDate, endDate, timezone, onSuccess } = params
+
+  const { mutate, isLoading } = useCreateAccessCode()
+  const submit = (): void => {
+    if (name === '') {
+      return
+    }
+
+    if (isLoading) {
+      return
+    }
+
+    if (type === 'time_bound') {
+      mutate(
+        {
+          name,
+          device_id: device.device_id,
+          starts_at: createIsoDate(startDate, timezone),
+          ends_at: createIsoDate(endDate, timezone),
+        },
+        {
+          onSuccess,
+        }
+      )
+
+      return
+    }
+
+    mutate(
+      {
+        name,
+        device_id: device.device_id,
+      },
+      {
+        onSuccess,
+      }
+    )
+  }
+
+  return { submit, isLoading }
+}
+
 const t = {
   addNewAccessCode: 'Add new access code',
   overCharacterLimitError: '60 characters max',
   nameInputLabel: 'Name the new code',
   cancel: 'Cancel',
   save: 'Save',
+  timingInputLabel: 'Timing',
+  typeOngoingLabel: 'Ongoing',
+  typeTimeBoundLabel: 'Start/end times',
 }

package/src/lib/seam/components/AccessCodeForm/AccessCodeFormDatePicker.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames'
+
+import { getTimezoneLabel } from 'lib/dates.js'
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+
+interface AccessCodeFormDatePickerProps {
+  startDate: string
+  setStartDate: (date: string) => void
+  endDate: string
+  setEndDate: (date: string) => void
+  timezone: string
+  onChangeTimezone: () => void
+  className?: string
+  onBack?: () => void
+}
+
+export function AccessCodeFormDatePicker({
+  timezone,
+  onBack,
+  className,
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  onChangeTimezone,
+}: AccessCodeFormDatePickerProps): JSX.Element {
+  return (
+    <div className={classNames('seam-schedule-picker', className)}>
+      <ContentHeader title={t.timingTitle} onBack={onBack} />
+      <div className='seam-content'>
+        <div className='seam-timezone'>
+          <span className='seam-label'>{t.selectedTimezoneLabel}</span>
+          <span className='seam-selected' onClick={onChangeTimezone}>
+            {getTimezoneLabel(timezone)}
+            <ChevronRightIcon />
+          </span>
+        </div>
+        <FormField>
+          <InputLabel>{t.startTimeLabel}</InputLabel>
+          <DateTimePicker
+            value={startDate == null ? '' : startDate}
+            onChange={setStartDate}
+            size='large'
+          />
+        </FormField>
+        <FormField>
+          <InputLabel>{t.endTimeLabel}</InputLabel>
+          <DateTimePicker
+            value={endDate == null ? '' : endDate}
+            onChange={setEndDate}
+            size='large'
+          />
+        </FormField>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  timingTitle: 'Timing',
+  selectedTimezoneLabel: 'All times in',
+  startTimeLabel: 'Start',
+  endTimeLabel: 'End',
+}

package/src/lib/seam/components/AccessCodeForm/AccessCodeFormTimes.tsx

@@ -0,0 +1,34 @@
+import { formatDateTimeReadable } from 'lib/dates.js'
+import { EditIcon } from 'lib/icons/Edit.js'
+import { IconButton } from 'lib/ui/IconButton.js'
+
+interface AccessCodeFormTimesProps {
+  startDate: string
+  endDate: string
+  onEdit: () => void
+}
+
+export function AccessCodeFormTimes({
+  startDate,
+  endDate,
+  onEdit,
+}: AccessCodeFormTimesProps): JSX.Element {
+  return (
+    <div className='seam-selected-times'>
+      <div>
+        <span className='seam-label'>{t.startTimeLabel}</span>
+        <span className='seam-time'>{formatDateTimeReadable(startDate)}</span>
+        <span className='seam-label'>{t.endTimeLabel}</span>
+        <span className='seam-time'>{formatDateTimeReadable(endDate)}</span>
+      </div>
+      <IconButton onClick={onEdit} className='seam-show-date-picker-btn'>
+        <EditIcon />
+      </IconButton>
+    </div>
+  )
+}
+
+const t = {
+  startTimeLabel: 'Start',
+  endTimeLabel: 'End',
+}

package/src/lib/seam/components/AccessCodeForm/AccessCodeFormTimezonePicker.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+import {
+  getBrowserTimezone,
+  getTimezoneLabel,
+  getTimezoneOffset,
+  getTimezones,
+} from 'lib/dates.js'
+import { Checkbox } from 'lib/ui/Checkbox.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { handleString } from 'lib/ui/TextField/TextField.js'
+
+interface AccessCodeFormTimezonePickerProps {
+  value: string
+  onChange: (timezone: string) => void
+  onClose: () => void
+}
+
+export function AccessCodeFormTimezonePicker({
+  onChange,
+  value,
+  onClose,
+}: AccessCodeFormTimezonePickerProps): JSX.Element {
+  const [manualTimezoneEnabled, setManualTimezoneEnabled] = useState(false)
+
+  const isBrowserTimezone = value === getBrowserTimezone()
+  const isManualTimezone = !isBrowserTimezone || manualTimezoneEnabled
+
+  const handleChangeManualTimezone = (enabled: boolean): void => {
+    setManualTimezoneEnabled(enabled)
+    if (!enabled) {
+      onChange(getBrowserTimezone())
+    }
+  }
+
+  const title = isManualTimezone ? t.titleManual : t.titleAuto
+
+  return (
+    <div className='seam-timezone-picker'>
+      <ContentHeader title={title} onBack={onClose} />
+      <div className='seam-content'>
+        <Checkbox
+          label={t.setTimezoneManuallyLabel}
+          checked={isManualTimezone}
+          onChange={handleChangeManualTimezone}
+          className='seam-manual-timezone-checkbox'
+        />
+
+        <select
+          value={value}
+          onChange={handleString(onChange)}
+          className='seam-timezone-select'
+          disabled={!isManualTimezone}
+        >
+          {getTimezones().map((timezone) => (
+            <option value={timezone} key={timezone}>
+              UTC {getTimezoneOffset(timezone)} {getTimezoneLabel(timezone)}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  titleAuto: 'Time Zone (automatic)',
+  titleManual: 'Time Zone (manual)',
+  setTimezoneManuallyLabel: 'Set time zone manually',
+}