diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts new file mode 100644 index 000000000..3481a79b2 --- /dev/null +++ b/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 = {} + +export { SupportedDeviceTableManufacturerKeys as Component } from './SupportedDeviceTableManufacturerKeys.js' diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx new file mode 100644 index 000000000..654b995c5 --- /dev/null +++ b/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 = { + title: 'Components/SupportedDeviceTableManufacturerKeys', + component: SupportedDeviceTableManufacturerKeys, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Content: Story = {} + +export const ScrollingContent: Story = { + render: (props) => ( + + + + ), +} diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx new file mode 100644 index 000000000..3723aa0c3 --- /dev/null +++ b/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 ( +
+ {manufacturers?.map((manufacturer) => ( + + ))} +
+ ) +} + +function ManufacturerKey({ + manufacturer, +}: { + manufacturer: Manufacturer +}): JSX.Element { + const key = manufacturer.display_name + return ( +
+
{key}
+ { + void copyToClipboard(key) + }} + > + + +
+ ) +} diff --git a/src/lib/seam/components/elements.ts b/src/lib/seam/components/elements.ts index 868e485fd..115e3b053 100644 --- a/src/lib/seam/components/elements.ts +++ b/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' diff --git a/src/lib/seam/components/index.ts b/src/lib/seam/components/index.ts index 1adce36fa..974455479 100644 --- a/src/lib/seam/components/index.ts +++ b/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' diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 2f44ecded..cdadbc177 100644 --- a/src/styles/_main.scss +++ b/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; diff --git a/src/styles/_supported-device-table-manufacturer-keys.scss b/src/styles/_supported-device-table-manufacturer-keys.scss new file mode 100644 index 000000000..a7a8b6e4a --- /dev/null +++ b/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; + } + } +}