m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating storybook documentation guidelines (#12957)

Browse Source 
* Updating storybook documentation guidelines

* Grammer fixes
This commit is contained in:
George Marshall 2021-12-07 10:24:06 -08:00 committed by GitHub
parent 981db6e0ea
commit 80134137ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/2.DOCUMENTATION.stories.mdx
View File

@ -23,7 +23,26 @@ See the [Button](https://metamask.github.io/metamask-storybook/index.html?path=/
## Creating a Story
[Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf) is the recommended way to write stories. It's an open standard based on ES6 modules. The below example is of the Button component and it explains how we should write our stories.
[Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf) is the recommended way to write stories. It's an open standard based on ES6 modules.
A story can be as simple as:
```jsx
import React from 'react';
import MyComponent from '.';
export default {
title: 'Components/UI/MyComponent', // title should follow the folder structure location of the component. Don't use spaces.
id: __filename,
};
export const DefaultStory = () => <MyComponent />;
DefaultStory.storyName = 'Default';
```
For a more in-depth and higher quality form of story and documentation, you can use controls and MDX docs.
The example below displays the Button component and it explains how we should write our stories:
```jsx
// Button component example story
@ -38,12 +57,14 @@ import Button from '.';
// The default storybook component export should always follow the same template
export default {
title: 'Button', // The `title` effects the components tile and location in storybook
// The `title` effects the components tile and location in storybook
// It should follow the folder structure location of the component. Don't use spaces.
title: 'Components/UI/Button',
id: __filename, // The file name id is used to track what storybook files have changed in CI
component: Button, // The component you are documenting
parameters: {
docs: {
page: README, // Reference to the mdx file docs page
page: README, // Reference to the docs page MDX file
},
},
// the controls plugin argTypes are used for the interactivity of the component
@ -148,7 +169,7 @@ Buttons communicate actions that users can take.
## Component API
<!-- Display the component api using the ArgsTable -->
<!-- Display the component api using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props -->
<ArgsTable of={Button} />