Chore: add snippets for api section #11877
Conversation
|
lgtm! 👏 |
|
|
||
| <!--- Badge.stories.mdx ---> | ||
|
|
||
| <!--- This is your Story template function, shown here in React --> |
There was a problem hiding this comment.
I think maybe you misunderstood my meaning in including these comments. I was referring to the MDX files where there is a single line:
<!--- This is your Story template function, shown here in React -->
export const Template = (args) => <Button {...args} />
<Story name="X" args={{bla}} >
{Template.bind({})}
</Story>In such cases that line (export const Template ...) is the single thing that would be different between a react + angular version of the MDX snippet.
However in many of these examples there are large snippets of react-specific code and so I think they should "react" snippets. (Actually in this actual example I think we should maybe rewrite the snippet to use args, but in other examples they need to remain "react-ized").
| export const Basic = () => <MyComponent />; | ||
| export const WithProp = () => <MyComponent prop="value" />; |
| import { useParameter } from '@storybook/api'; | ||
| const PARAM_KEY = 'myAddon'; | ||
| const MyPanel = () => { | ||
| const value = useParameter(PARAM_KEY, null); | ||
| const item = value ? value.data : ''; | ||
| return <div>{item}</div>; | ||
| }; |
There was a problem hiding this comment.
This snippet is common -- not react specific (manager code is always react).
| addons.register(ADDON_ID, () => { | ||
| addons.add(PANEL_ID, { | ||
| type: types.PANEL, | ||
| title: 'My Addon', | ||
| render: () => <div>Addon tab content</div>, | ||
| paramKey: 'myAddon', // this element | ||
| }); | ||
| }); |
There was a problem hiding this comment.
This snippet is common -- not react specific (manager code is always react).
| import React from 'react'; | ||
| import { addons, types } from '@storybook/addons'; | ||
| import { AddonPanel } from '@storybook/components'; | ||
|
|
||
| const ADDON_ID = 'myaddon'; | ||
| const PANEL_ID = `${ADDON_ID}/panel`; | ||
|
|
||
| // give a unique name for the panel | ||
| const MyPanel = () => <div>MyAddon</div>; | ||
| addons.register(ADDON_ID, (api) => { | ||
| addons.add(PANEL_ID, { | ||
| type: types.PANEL, | ||
| title: 'My Addon', | ||
| render: ({ active, key }) => ( | ||
| <AddonPanel active={active} key={key}> | ||
| <MyPanel /> | ||
| </AddonPanel> | ||
| ), | ||
| }); | ||
| }); |
There was a problem hiding this comment.
This snippet is common -- not react specific (manager code is always react).
|
@tmeasday with the latest commit i addressed the feedback you mentioned. Let me know if you need anything else. |
|
conflicts are solved, let me know if you need anything else. |
With this pull request the snippets required for the api section are included and the markdown files are now adjusted to reflect the changes:
What was done:
Feel free to provide feedback