fix(app): add DropdownMenu stories (#15283)

* fix(app): add DropdownMenu stories

app/src/atoms/MenuList/DropdownMenu.stories.tsx

@@ -0,0 +1,29 @@
+import { DropdownMenu as DropdownMenuComponent } from './DropdownMenu'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { DropdownOption } from './DropdownMenu'
+
+const mockOptions: DropdownOption[] = [
+  { name: 'option 1', value: '1' },
+  { name: 'option 2', value: '2' },
+  { name: 'option 3', value: '3' },
+  { name: 'option 4', value: '4' },
+  { name: 'option 5', value: '5' },
+  { name: 'option 6', value: '6' },
+]
+
+const meta: Meta<typeof DropdownMenuComponent> = {
+  title: 'App/Atoms/DropdownMenu',
+  component: DropdownMenuComponent,
+}
+export default meta
+
+type Story = StoryObj<typeof DropdownMenuComponent>
+
+export const DropdownMenu: Story = {
+  args: {
+    filterOptions: mockOptions,
+    onClick: () => {},
+    currentOption: mockOptions[0],
+  },
+}

app/src/atoms/MenuList/MenuItem.stories.tsx

@@ -1,24 +1,20 @@
-import * as React from 'react'
-import { MenuItem } from './MenuItem'
+import { VIEWPORT } from '@opentrons/components'
+import { MenuItem as MenuItemComponent } from './MenuItem'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof MenuItemComponent> = {
   title: 'App/Atoms/MenuItem',
-  component: MenuItem,
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof MenuItem>> = args => (
-  <MenuItem {...args} />
-)
-export const Primary = Template.bind({})
-Primary.args = {
-  children: 'Example menu btn',
-  disabled: false,
+  component: MenuItemComponent,
+  parameters: VIEWPORT.touchScreenViewport,
 }
+export default meta
+
+type Story = StoryObj<typeof MenuItemComponent>
 
-Primary.parameters = {
-  viewport: {
-    defaultViewport: 'onDeviceDisplay',
+export const MenuItem: Story = {
+  args: {
+    children: 'Example menu btn',
+    disabled: false,
   },
 }

app/src/atoms/MenuList/MenuList.stories.tsx

@@ -1,27 +1,32 @@
 import * as React from 'react'
-import { MenuList } from './index'
+import { action } from '@storybook/addon-actions'
+import { MenuList as MenuListComponent } from './index'
 import { MenuItem } from './MenuItem'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const menuBtn = 'example menu btn'
+
+const meta: Meta<typeof MenuListComponent> = {
   title: 'App/Atoms/MenuList',
-  component: MenuList,
-  onClick: { action: 'clicked' },
-} as Meta
+  component: MenuListComponent,
+  args: {
+    onClick: action('clicked'),
+  },
+}
 
-const Template: Story<React.ComponentProps<typeof MenuList>> = args => (
-  <MenuList {...args} />
-)
+export default meta
 
-const menuBtn = 'example menu btn'
-export const Primary = Template.bind({})
-Primary.args = {
-  children: (
-    <>
-      <MenuItem>{menuBtn}</MenuItem>
-      <MenuItem>{menuBtn}</MenuItem>
-      <MenuItem>{menuBtn}</MenuItem>
-    </>
-  ),
+type Story = StoryObj<typeof MenuListComponent>
+
+export const MenuList: Story = {
+  args: {
+    children: (
+      <>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+      </>
+    ),
+  },
 }

app/src/atoms/MenuList/OverflowBtn.stories.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react'
-import { OverflowBtn } from './OverflowBtn'
+import { OverflowBtn as OverflowBtnComponent } from './OverflowBtn'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof OverflowBtnComponent> = {
   title: 'App/Atoms/OverflowBtn',
-  component: OverflowBtn,
-} as Meta
+  component: OverflowBtnComponent,
+}
+export default meta
+
+type Story = StoryObj<typeof OverflowBtnComponent>
 
-const Template: Story<React.ComponentProps<typeof OverflowBtn>> = args => (
-  <OverflowBtn {...args} />
-)
-export const Basic = Template.bind({})
-Basic.args = {
-  title: 'overflow btn with all the states',
+export const OverflowBtn: Story = {
+  args: {
+    title: 'overflow btn with all the states',
+  },
 }

app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { vi, it, expect, describe } from 'vitest'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
 import { COLORS } from '@opentrons/components'
 
 import { renderWithProviders } from '../../../__testing-utils__'
@@ -13,21 +13,20 @@ const render = (props: React.ComponentProps<typeof OverflowBtn>) => {
 describe('OverflowBtn', () => {
   it('renders a clickable button', () => {
     const handleClick = vi.fn()
-    const { getByRole } = render({
+    render({
       onClick: handleClick,
     })
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
     fireEvent.click(button)
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
   it('renders a hover state', () => {
-    const { getByRole } = render({
+    render({
       onClick: vi.fn(),
     })
-
-    expect(getByRole('button')).toHaveStyle(
+    expect(screen.getByRole('button')).toHaveStyle(
       `background-color: ${COLORS.transparent}`
     )
   })

app/src/molecules/InterventionModal/InterventionModal.stories.tsx

@@ -1,31 +1,51 @@
 import * as React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
 
 import { StyledText } from '@opentrons/components'
+import { configReducer } from '../../redux/config/reducer'
 import { InterventionModal as InterventionModalComponent } from './'
-import type { Story, Meta } from '@storybook/react'
 
-export default {
+import type { Store } from 'redux'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const dummyConfig = {
+  config: {
+    isOnDevice: false,
+  },
+} as any
+const store: Store<any> = createStore(configReducer, dummyConfig)
+
+const meta: Meta<typeof InterventionModalComponent> = {
   title: 'App/Molecules/InterventionModal',
   component: InterventionModalComponent,
-} as Meta
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+}
+export default meta
 
-const Template: Story<
-  React.ComponentProps<typeof InterventionModalComponent>
-> = args => <InterventionModalComponent {...args} />
+type Story = StoryObj<typeof InterventionModalComponent>
 
-export const ErrorIntervention = Template.bind({})
-ErrorIntervention.args = {
-  robotName: 'Otie',
-  type: 'error',
-  heading: <StyledText as="h3">Oh no, an error!</StyledText>,
-  iconName: 'alert-circle',
-  children: <StyledText as="p">Heres some error content</StyledText>,
+export const ErrorIntervention: Story = {
+  args: {
+    type: 'error',
+    titleHeading: <StyledText as="h3">Oh no, an error!</StyledText>,
+    iconName: 'alert-circle',
+    children: <StyledText as="p">{"Here's some error content"}</StyledText>,
+  },
 }
 
-export const InterventionRequiredIntervention = Template.bind({})
-InterventionRequiredIntervention.args = {
-  robotName: 'Otie',
-  type: 'intervention-required',
-  heading: <StyledText as="h3">Looks like theres something to do</StyledText>,
-  children: <StyledText as="p">Youve got to intervene!</StyledText>,
+export const InterventionRequiredIntervention: Story = {
+  args: {
+    type: 'intervention-required',
+    titleHeading: (
+      <StyledText as="h3">Looks like theres something to do</StyledText>
+    ),
+    children: <StyledText as="p">{"You've got to intervene!"}</StyledText>,
+  },
 }

app/src/organisms/NetworkSettings/SetWifiCred.tsx

@@ -42,7 +42,7 @@ export function SetWifiCred({
 
   React.useEffect(() => {
     if (inputRef.current != null) {
-      inputRef?.current?.focus()
+      inputRef.current.focus()
     }
   }, [password])