feat(SupportedDevicesTable): Group list by brands

[mikewuu]

closes #234

Notable things

• Demo will show the 'View...all devices' button if the list has > 1 device, but it's actually set to 3.
• If a brand has <= 3 devices, it will just show all the models.
• Wasn't sure about the spacing when a brand is collapsed, opted to remove the 32px spacing. No longer relevant, see feat(SupportedDevicesTable): Group list by brands #251 (comment).

Screenshots

CleanShot.2023-06-29.at.04.06.28.mp4

[dawnho]

Is there a way to add some additional devices to the seed data, so that the story can capture the overlay behavior?

[dawnho]

The section expansion / compression logic is a bit wrong.

The section is supposed to compress back down to the 3-item view.

See the prototype here: https://www.figma.com/proto/6nCfNVHmYQ7wxhnFOpFBm6/Supported-devices?type=design&node-id=171-37116&t=qUp24hA279bNHfHY-0&scaling=min-zoom&page-id=167%3A15042&starting-point-node-id=171%3A37116

[razor-x]

Is there a way to add some additional devices to the seed data, so that the story can capture the overlay behavior?

Example data can be updated here https://github.com/seamapi/fake-seam-connect/blob/main/src/pages/api/internal/device_models/list.ts

[razor-x]

And the fake will need the /devices/list_device_providers endpoint.

[razor-x]

Still working though it, but leaving some comments for now. We need to address the fake updates and api usage first anyway.

[mikewuu]

The section expansion / compression logic is a bit wrong.

The section is supposed to compress back down to the 3-item view.

my bad! I thought it was weird that there was no spec for the spacing.

Updated in 031af09

CleanShot.2023-06-29.at.11.46.06.mp4

[mikewuu]

ok! This should be ready for re-review:

CleanShot.2023-06-29.at.12.50.18.mp4

[razor-x]

We do need to update the fake seam connect version so we can review the storybook and then we should get a review from @dawnho before merge. So consider this blocked until then.

Found a few quick code suggestions. The naming stuff is non-blocking as it's all internal, but always fun to chat about. Otherwise nothing else major blocking from me.

[dawnho]

Can we add the brands prop that will allow a user to filter for a subset of the brands?
i.e. <SupportedDeviceTable brands={ ["yale", "schlage"] } /> will return a table that only shows those two brands

[dawnho]

The accordion looks 🔥 ! Thanks for the fixes!

[mikewuu]

We do need to update the fake seam connect version so we can review the storybook and then we should get a review from @dawnho before merge. So consider this blocked until then.

Not sure where this needs to be updated for it to work in the Preview. It's already updated in package.json

[razor-x]

I was going to suggest we return null or isLoading while the hook is loading, but maybe the behavior that the provider will show as unknown until it loads or in case it fails is better UX since things will still partially render if this is loading or fails.

[razor-x]

@mikewuu Will merge this now but leave this comment open to discuses if we want to change this or not.

[dawnho]

Looks great! What does the filter button do, btw? I know nino added that in the designs, but he hadn't got around to creating a filter menu yet. We can hide that if it's not an active button.

[razor-x]

@dawnho You should be able to play with the Filter button in the storybook. It looks like this