feat: Add SupportedDeviceTableManufacturerKeys

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts

@@ -0,0 +1,9 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { SupportedDeviceTableManufacturerKeysProps } from './SupportedDeviceTableManufacturerKeys.js'
+
+export const name = 'seam-supported-device-table-manufacturer-keys'
+
+export const props: ElementProps<SupportedDeviceTableManufacturerKeysProps> = {}
+
+export { SupportedDeviceTableManufacturerKeys as Component } from './SupportedDeviceTableManufacturerKeys.js'

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx

@@ -0,0 +1,27 @@
+import { Container } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { SupportedDeviceTableManufacturerKeys } from './SupportedDeviceTableManufacturerKeys.js'
+
+/**
+ * These stories showcase the supported devices table.
+ */
+const meta: Meta<typeof SupportedDeviceTableManufacturerKeys> = {
+  title: 'Components/SupportedDeviceTableManufacturerKeys',
+  component: SupportedDeviceTableManufacturerKeys,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SupportedDeviceTableManufacturerKeys>
+
+export const Content: Story = {}
+
+export const ScrollingContent: Story = {
+  render: (props) => (
+    <Container sx={{ height: 200 }}>
+      <SupportedDeviceTableManufacturerKeys {...props} />
+    </Container>
+  ),
+}

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx

@@ -0,0 +1,65 @@
+import type { Manufacturer } from '@seamapi/types/devicedb'
+import classNames from 'classnames'
+
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
+
+import { CopyIcon } from 'lib/icons/Copy.js'
+import {
+  type CommonProps,
+  withRequiredCommonProps,
+} from 'lib/seam/components/common-props.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+import { useManufacturers } from './use-manufacturers.js'
+
+export interface SupportedDeviceTableManufacturerKeysProps
+  extends CommonProps {}
+
+export const NestedSupportedDeviceTableManufacturerKeys =
+  withRequiredCommonProps(SupportedDeviceTableManufacturerKeys)
+
+export function SupportedDeviceTableManufacturerKeys({
+  className,
+}: SupportedDeviceTableManufacturerKeysProps = {}): JSX.Element {
+  useComponentTelemetry('SupportedDeviceTableManufacturerKeys')
+
+  const { manufacturers } = useManufacturers()
+
+  return (
+    <div
+      className={classNames(
+        'supported-device-table-manufacturer-keys',
+        className
+      )}
+    >
+      {manufacturers?.map((manufacturer) => (
+        <ManufacturerKey
+          key={manufacturer.manufacturer_id}
+          manufacturer={manufacturer}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ManufacturerKey({
+  manufacturer,
+}: {
+  manufacturer: Manufacturer
+}): JSX.Element {
+  const key = manufacturer.display_name
+  return (
+    <div className='seam-manufacturer-key'>
+      <div className='seam-manufacturer-key-value'>{key}</div>
+      <MenuItem
+        className='seam-copy-button'
+        onClick={() => {
+          void copyToClipboard(key)
+        }}
+      >
+        <CopyIcon />
+      </MenuItem>
+    </div>
+  )
+}

src/lib/seam/components/elements.ts

@@ -8,3 +8,4 @@ export * as DeviceDetails from './DeviceDetails/DeviceDetails.element.js'
 export * as DeviceTable from './DeviceTable/DeviceTable.element.js'
 export * as EditAccessCodeForm from './EditAccessCodeForm/EditAccessCodeForm.element.js'
 export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js'
+export * as SupportedDeviceTableManufacturerKeys from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.js'

src/lib/seam/components/index.ts

@@ -9,3 +9,4 @@ export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
 export * from './EditAccessCodeForm/EditAccessCodeForm.js'
 export * from './SupportedDeviceTable/SupportedDeviceTable.js'
+export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js'

src/styles/_main.scss

@@ -13,6 +13,7 @@
 @use './device-table';
 @use './access-code-details';
 @use './supported-device-table';
+@use './supported-device-table-manufacturer-keys';
 @use './access-code-form';
 @use './input-label';
 @use './form-field';
@@ -59,6 +60,7 @@
   @include climate-setting-schedule-form.all;
   @include alert.all;
   @include supported-device-table.all;
+  @include supported-device-table-manufacturer-keys.all;
   @include thermostat.all;
   @include seam-table.all;
   @include climate-setting-schedule-details.all;

src/styles/_supported-device-table-manufacturer-keys.scss

@@ -0,0 +1,19 @@
+@mixin all {
+  .supported-device-table-manufacturer-keys {
+    font-size: 18px;
+
+    .seam-manufacturer-key {
+      display: table-row;
+    }
+
+    .seam-manufacturer-key-value {
+      display: table-cell;
+    }
+
+    .seam-copy-button {
+      display: table-cell;
+      cursor: pointer;
+      padding-left: 10px;
+    }
+  }
+}