Rename SeamEditableDeviceName to EditableDeviceName (#677)

* Rename SeamEditableDeviceName to EditableDeviceName

* Move private functions down

Author: razor-x

src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -6,14 +6,14 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
-import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import type { LockDevice } from 'lib/seam/locks/lock-device.js'
 import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
@@ -98,7 +98,7 @@ export function LockDeviceDetails({
             </div>
             <div className='seam-info'>
               <span className='seam-label'>{t.device}</span>
-              <SeamEditableDeviceName
+              <EditableDeviceName
                 tagName='h4'
                 value={device.properties.name}
                 className='seam-device-name'

src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx

@@ -4,9 +4,9 @@ import { useState } from 'react'
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
-import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import type { NoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
 import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
@@ -48,7 +48,7 @@ export function NoiseSensorDeviceDetails({
               </div>
               <div className='seam-info'>
                 <span className='seam-label'>{t.noiseSensor}</span>
-                <SeamEditableDeviceName
+                <EditableDeviceName
                   onEdit={onEditName}
                   tagName='h4'
                   value={device.properties.name}

…bleDeviceName/SeamEditableDeviceName.tsx src/lib/ui/device/EditableDeviceName.tsxsrc/lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.tsx renamed to src/lib/ui/device/EditableDeviceName.tsx src/lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.tsx renamed to src/lib/ui/device/EditableDeviceName.tsx

@@ -12,62 +12,20 @@ import { CheckIcon } from 'lib/icons/Check.js'
 import { CloseIcon } from 'lib/icons/Close.js'
 import { EditIcon } from 'lib/icons/Edit.js'
 
-export type SeamDeviceNameProps = {
+type EditableDeviceNameProps = {
   onEdit?: (newName: string) => void
   editable?: boolean
   tagName?: string
   value: string
 } & HTMLAttributes<HTMLElement>
 
-function IconButton(
-  props: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>
-): JSX.Element {
-  return (
-    <button
-      {...props}
-      className={classNames(
-        'seam-editable-device-name-icon-button',
-        props.className
-      )}
-    >
-      {props.children}
-    </button>
-  )
-}
-
-const fixName = (name: string): string => {
-  return name.replace(/\s+/g, ' ').trim()
-}
-
-type Result = { type: 'success' } | { type: 'error'; message: string }
-
-const isValidName = (name: string): Result => {
-  if (name.length < 2) {
-    return {
-      type: 'error',
-      message: 'Name must be at least 2 characters long',
-    }
-  }
-
-  if (name.length > 64) {
-    return {
-      type: 'error',
-      message: 'Name must be at most 64 characters long',
-    }
-  }
-
-  return {
-    type: 'success',
-  } as const
-}
-
-export function SeamEditableDeviceName({
+export function EditableDeviceName({
   onEdit,
   editable = true,
   tagName,
   value,
   ...props
-}: SeamDeviceNameProps): JSX.Element {
+}: EditableDeviceNameProps): JSX.Element {
   const [editing, setEditing] = useState(false)
   const [errorText, setErrorText] = useState<null | string>(null)
   const [currentValue, setCurrentValue] = useState(value)
@@ -206,3 +164,50 @@ function ActionButtons(props: ActionButtonsProps): JSX.Element {
     </IconButton>
   )
 }
+
+function IconButton(
+  props: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>
+): JSX.Element {
+  return (
+    <button
+      {...props}
+      className={classNames(
+        'seam-editable-device-name-icon-button',
+        props.className
+      )}
+    >
+      {props.children}
+    </button>
+  )
+}
+
+const fixName = (name: string): string => {
+  return name.replace(/\s+/g, ' ').trim()
+}
+
+type Result =
+  | { type: 'success' }
+  | {
+      type: 'error'
+      message: string
+    }
+
+const isValidName = (name: string): Result => {
+  if (name.length < 2) {
+    return {
+      type: 'error',
+      message: 'Name must be at least 2 characters long',
+    }
+  }
+
+  if (name.length > 64) {
+    return {
+      type: 'error',
+      message: 'Name must be at most 64 characters long',
+    }
+  }
+
+  return {
+    type: 'success',
+  } as const
+}

src/lib/ui/thermostat/ThermostatCard.tsx

@@ -3,9 +3,9 @@ import { useState } from 'react'
 
 import { FanIcon } from 'lib/icons/Fan.js'
 import { OffIcon } from 'lib/icons/Off.js'
-import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 
@@ -52,7 +52,7 @@ function Content(props: ThermostatCardProps): JSX.Element | null {
       </div>
       <div className='seam-thermostat-card-details'>
         <div className='seam-thermostat-heading-wrap'>
-          <SeamEditableDeviceName
+          <EditableDeviceName
             value={device.properties.name}
             tagName='h4'
             className='seam-thermostat-card-heading'