refactor(menu): improve stories snippet parsing

src/components/Menu/__stories__/Borderless.tsx → src/components/Menu/__stories__/Borderless.stories.tsx

@@ -1,46 +1,47 @@
+import { ComponentStory } from '@storybook/react'
 import { fireEvent, screen } from '@storybook/testing-library'
 import Menu from '..'
-import { Template } from './Template'
+import { DefaultDisclosure } from './Template.stories'
 
-export const Borderless = Template.bind({})
-
-Borderless.parameters = {
-  docs: {
-    storyDescription: 'Property `borderless` removes border of the menu item.',
-  },
-}
-
-Borderless.args = {
-  children: [
-    <Menu.Item borderless>default</Menu.Item>,
+export const Borderless: ComponentStory<typeof Menu> = () => (
+  <Menu disclosure={DefaultDisclosure}>
+    <Menu.Item borderless>default</Menu.Item>
     <Menu.Item variant="danger" borderless>
       Danger
-    </Menu.Item>,
+    </Menu.Item>
     <Menu.Item variant="nav" borderless>
       Nav
-    </Menu.Item>,
-    <Menu.Item borderless>default</Menu.Item>,
+    </Menu.Item>
+    <Menu.Item borderless>default</Menu.Item>
     <Menu.Item
       href="/?path=/docs/components-navigation-menu--borderless"
       borderless
     >
       Link
-    </Menu.Item>,
+    </Menu.Item>
+
     <Menu.Item
       variant="danger"
       href="/?path=/docs/components-navigation-menu--borderless"
       borderless
     >
       Link Danger
-    </Menu.Item>,
+    </Menu.Item>
+
     <Menu.Item
       variant="nav"
       href="/?path=/docs/components-navigation-menu--borderless"
       borderless
     >
       Link Nav
-    </Menu.Item>,
-  ],
+    </Menu.Item>
+  </Menu>
+)
+
+Borderless.parameters = {
+  docs: {
+    storyDescription: 'Property `borderless` removes border of the menu item.',
+  },
 }
 
 Borderless.play = () => {

src/components/Menu/__stories__/ChildrenProps.stories.tsx

@@ -0,0 +1,51 @@
+import { ComponentStory } from '@storybook/react'
+import { fireEvent, screen } from '@storybook/testing-library'
+import Menu from '..'
+import { DefaultDisclosure } from './Template.stories'
+
+export const ChildrenProps: ComponentStory<typeof Menu> = () => (
+  <Menu disclosure={DefaultDisclosure}>
+    {({ toggle }) => (
+      <>
+        <Menu.Item>default</Menu.Item>
+        <Menu.Item onClick={toggle} variant="danger">
+          Danger
+        </Menu.Item>
+        <Menu.Item onClick={toggle} variant="nav">
+          Nav
+        </Menu.Item>
+        <Menu.Item onClick={toggle} variant="nav" disabled>
+          Nav disabled
+        </Menu.Item>
+        <Menu.Item onClick={toggle} variant="nav" disabled borderless>
+          Nav disabled borderless
+        </Menu.Item>
+        <Menu.Item
+          href="/?path=/docs/components-navigation-menu--children-props"
+          onClick={toggle}
+        >
+          Menu Item Link
+        </Menu.Item>
+      </>
+    )}
+  </Menu>
+)
+
+ChildrenProps.parameters = {
+  docs: {
+    storyDescription: `Use children props :
+- \`toggle\` to toggle menu with action`,
+  },
+}
+
+ChildrenProps.play = () => {
+  fireEvent.click(screen.getByRole('button'))
+}
+
+ChildrenProps.decorators = [
+  StoryComponent => (
+    <div style={{ height: '250px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

src/components/Menu/__stories__/FunctionDisclosure.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentStory } from '@storybook/react'
+import { fireEvent, screen } from '@storybook/testing-library'
+import Menu, { DisclosureProps } from '..'
+import Touchable from '../../Touchable'
+
+export const FunctionDisclosure: ComponentStory<typeof Menu> = () => {
+  const CustomDisclosure = ({ visible }: DisclosureProps) => (
+    <Touchable title="menu" name="menu">
+      {visible === true ? 'Menu (is opened)' : 'Menu (is closed)'}
+    </Touchable>
+  )
+
+  return (
+    <Menu disclosure={CustomDisclosure}>
+      <Menu.Item>Menu 1</Menu.Item>
+    </Menu>
+  )
+}
+
+FunctionDisclosure.parameters = {
+  docs: {
+    storyDescription:
+      'You can specify a function as disclosure and get popover props as argument',
+  },
+}
+
+FunctionDisclosure.play = () => {
+  fireEvent.click(screen.getByRole('button'))
+}
+
+FunctionDisclosure.decorators = [
+  StoryComponent => (
+    <div style={{ height: '300px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

src/components/Menu/__stories__/Playground.tsx → src/components/Menu/__stories__/Playground.stories.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, screen } from '@storybook/testing-library'
 import Menu from '..'
-import { Template } from './Template'
+import { Template } from './Template.stories'
 
 export const Playground = Template.bind({})
 

src/components/Menu/__stories__/Template.tsx → src/components/Menu/__stories__/Template.stories.tsx

@@ -3,7 +3,7 @@ import Menu from '..'
 import Icon from '../../Icon'
 import Touchable from '../../Touchable'
 
-const DefaultDisclosure = (
+export const DefaultDisclosure = (
   <Touchable title="menu" name="menu">
     <Icon name="dots-horizontal" color="neutral" size={24} />
   </Touchable>

src/components/Menu/__stories__/Variants.tsx → src/components/Menu/__stories__/Variants.stories.tsx

@@ -1,17 +1,9 @@
-import { Story } from '@storybook/react'
+import { ComponentStory } from '@storybook/react'
 import { fireEvent, screen } from '@storybook/testing-library'
 import Menu from '..'
-import Icon from '../../Icon'
-import Touchable from '../../Touchable'
+import { DefaultDisclosure } from './Template.stories'
 
-const DefaultDisclosure = (
-  <Touchable title="menu" name="menu">
-    <Icon name="dots-horizontal" color="neutral" size={24} />
-  </Touchable>
-)
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Variants: Story = _props => (
+export const Variants: ComponentStory<typeof Menu> = () => (
   <Menu disclosure={DefaultDisclosure}>
     <Menu.Item>default</Menu.Item>
     <Menu.Item variant="danger">Danger</Menu.Item>
@@ -52,6 +44,7 @@ export const Variants: Story = _props => (
     </Menu.Item>
   </Menu>
 )
+
 Variants.parameters = {
   docs: {
     storyDescription: `A set of variant you can add on MenuItem (danger, nav). You can use either props on MenuItem :
@@ -61,10 +54,6 @@ Variants.parameters = {
   },
 }
 
-Variants.args = {
-  children: [],
-}
-
 Variants.play = () => {
   fireEvent.click(screen.getByRole('button'))
 }