From ebab39fa07408089c871ff42c49e60c0cb0da826 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 25 Oct 2023 18:10:54 -0700 Subject: [PATCH 1/3] feat: Add SupportedDeviceTableManufacturerKeys --- ...rtedDeviceTableManufacturerKeys.element.ts | 9 +++ ...rtedDeviceTableManufacturerKeys.stories.ts | 18 +++++ .../SupportedDeviceTableManufacturerKeys.tsx | 65 +++++++++++++++++++ src/lib/seam/components/elements.ts | 1 + src/lib/seam/components/index.ts | 1 + src/styles/_main.scss | 2 + ...ported-device-table-manufacturer-keys.scss | 20 ++++++ 7 files changed, 116 insertions(+) create mode 100644 src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts create mode 100644 src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts create mode 100644 src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx create mode 100644 src/styles/_supported-device-table-manufacturer-keys.scss 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.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts new file mode 100644 index 000000000..1131aa9ab --- /dev/null +++ b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts @@ -0,0 +1,18 @@ +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 = {} 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..1c8105891 100644 --- a/src/lib/seam/components/elements.ts +++ b/src/lib/seam/components/elements.ts @@ -7,4 +7,5 @@ export * as CreateAccessCodeForm from './CreateAccessCodeForm/CreateAccessCodeFo 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 SupportedDeviceTableManufacturerKeys from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.js' export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js' diff --git a/src/lib/seam/components/index.ts b/src/lib/seam/components/index.ts index 1adce36fa..6fc73820b 100644 --- a/src/lib/seam/components/index.ts +++ b/src/lib/seam/components/index.ts @@ -8,4 +8,5 @@ export * from './CreateAccessCodeForm/CreateAccessCodeForm.js' export * from './DeviceDetails/DeviceDetails.js' export * from './DeviceTable/DeviceTable.js' export * from './EditAccessCodeForm/EditAccessCodeForm.js' +export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js' export * from './SupportedDeviceTable/SupportedDeviceTable.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..65a03de4b --- /dev/null +++ b/src/styles/_supported-device-table-manufacturer-keys.scss @@ -0,0 +1,20 @@ +@mixin all { + .supported-device-table-manufacturer-keys { + display: table; + 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; + } + } +} From 29a739231eaace74f496207df674e1801bfa1338 Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Thu, 26 Oct 2023 01:22:47 +0000 Subject: [PATCH 2/3] ci: Format code --- src/lib/seam/components/elements.ts | 2 +- src/lib/seam/components/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/seam/components/elements.ts b/src/lib/seam/components/elements.ts index 1c8105891..115e3b053 100644 --- a/src/lib/seam/components/elements.ts +++ b/src/lib/seam/components/elements.ts @@ -7,5 +7,5 @@ export * as CreateAccessCodeForm from './CreateAccessCodeForm/CreateAccessCodeFo 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 SupportedDeviceTableManufacturerKeys from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.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 6fc73820b..974455479 100644 --- a/src/lib/seam/components/index.ts +++ b/src/lib/seam/components/index.ts @@ -8,5 +8,5 @@ export * from './CreateAccessCodeForm/CreateAccessCodeForm.js' export * from './DeviceDetails/DeviceDetails.js' export * from './DeviceTable/DeviceTable.js' export * from './EditAccessCodeForm/EditAccessCodeForm.js' -export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js' export * from './SupportedDeviceTable/SupportedDeviceTable.js' +export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js' From e90098b38e65bbd05cbe7c96259d9a397fafe02e Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 25 Oct 2023 18:31:53 -0700 Subject: [PATCH 3/3] Allow container to scroll --- ... => SupportedDeviceTableManufacturerKeys.stories.tsx} | 9 +++++++++ .../_supported-device-table-manufacturer-keys.scss | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) rename src/lib/seam/components/SupportedDeviceTable/{SupportedDeviceTableManufacturerKeys.stories.ts => SupportedDeviceTableManufacturerKeys.stories.tsx} (70%) diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx similarity index 70% rename from src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts rename to src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx index 1131aa9ab..654b995c5 100644 --- a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.ts +++ b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.stories.tsx @@ -1,3 +1,4 @@ +import { Container } from '@mui/material' import type { Meta, StoryObj } from '@storybook/react' import { SupportedDeviceTableManufacturerKeys } from './SupportedDeviceTableManufacturerKeys.js' @@ -16,3 +17,11 @@ export default meta type Story = StoryObj export const Content: Story = {} + +export const ScrollingContent: Story = { + render: (props) => ( + + + + ), +} diff --git a/src/styles/_supported-device-table-manufacturer-keys.scss b/src/styles/_supported-device-table-manufacturer-keys.scss index 65a03de4b..a7a8b6e4a 100644 --- a/src/styles/_supported-device-table-manufacturer-keys.scss +++ b/src/styles/_supported-device-table-manufacturer-keys.scss @@ -1,6 +1,5 @@ @mixin all { .supported-device-table-manufacturer-keys { - display: table; font-size: 18px; .seam-manufacturer-key {