-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy path2-DOCUMENTATION-stories-mdx.ceb2df87.iframe.bundle.js
9 lines (9 loc) · 17.6 KB
/
2-DOCUMENTATION-stories-mdx.ceb2df87.iframe.bundle.js
1
2
3
4
5
6
7
8
9
"use strict";(globalThis.webpackChunkmetamask_crx=globalThis.webpackChunkmetamask_crx||[]).push([[52564],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");let MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return boundMDXComponent;function boundMDXComponent(props){let allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){let contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo(()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components},[contextComponents,components])}let emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./.storybook/2.DOCUMENTATION.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>__WEBPACK_DEFAULT_EXPORT__}),__webpack_require__("./node_modules/react/index.js");var _home_runner_work_metamask_extension_metamask_extension_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){let _components=Object.assign({h1:"h1",blockquote:"blockquote",p:"p",a:"a",h2:"h2",ul:"ul",li:"li",code:"code",strong:"strong",pre:"pre"},(0,_home_runner_work_metamask_extension_metamask_extension_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.RP)(),props.components);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__.W8,{title:"Getting Started / Documentation Guidelines"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h1,{id:"documentation-guidelines",children:"Documentation Guidelines"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.blockquote,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["💡 To improve the quality of our component documentation we are currently in the process of updating our storybook to use Storyboook's ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-controls/",target:"_blank",rel:"nofollow noopener noreferrer",children:"controls"}),", ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-a11y/",target:"_blank",rel:"nofollow noopener noreferrer",children:"a11y"})," and ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-docs/",target:"_blank",rel:"nofollow noopener noreferrer",children:"docs"})," plugins. You will find most components currently without documentation and use ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-knobs",target:"_blank",rel:"nofollow noopener noreferrer",children:"knobs"}),"(deprecated) for their primary interactivity. These will eventually be updated. Want to contribute? Check out the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("a",{href:"https://github.com/MetaMask/metamask-extension/issues?q=is%3Aopen+is%3Aissue+label%3Atype-story",targe:"_blank",children:"storybook issues on github"})]}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"general-guidelines",children:"General Guidelines"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Thorough documentation makes it much easier for a component to be found, adapted and reused. It also provides space for explanation and reasoning for a component. This is useful as components become more complex."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Some general documentation best practices to follow:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.li,{children:"Put yourself in the shoes of another developer trying to use the component you just created for the first time"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Write a brief description of the component and what it's used for in the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"README.mdx"})," file"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Display the component's API using the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"<ArgsTable of={YourComponent} />"})," component from storybook docs. Add descriptions of each prop by using jsDoc style comments in the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"propTypes"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Use the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-controls/",target:"_blank",rel:"nofollow noopener noreferrer",children:"controls"})," over ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/addons/@storybook/addon-knobs",target:"_blank",rel:"nofollow noopener noreferrer",children:"knobs"}),"(deprecated)"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Use the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/docs/react/essentials/actions#action-argtype-annotation",target:"_blank",rel:"nofollow noopener noreferrer",children:"action argType annotation"})," over importing the actions plugin directly"]}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["See the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://metamask.github.io/metamask-storybook/index.html?path=/story/components-ui-button--default-story",target:"_blank",rel:"nofollow noopener noreferrer",children:"Button"}),"(",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"ui/components/ui/button/button.stories.js"}),") component for reference"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"creating-a-story",children:"Creating a Story"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://storybook.js.org/docs/react/api/csf",target:"_blank",rel:"nofollow noopener noreferrer",children:"Component Story Format (CSF)"})," is the recommended way to write stories. It's an open standard based on ES6 modules."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["A story ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.strong,{children:"without MDX"})," documentation can be as simple as:"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-jsx",children:"import React from 'react';\nimport MyComponent from '.';\n\nexport default {\n title: 'Components/UI/MyComponent', // title should follow the folder structure location of the component. Don't use spaces.\n\n};\n\nexport const DefaultStory = () => <MyComponent />;\n\nDefaultStory.storyName = 'Default';\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["For a more in-depth and higher quality form of story and documentation, you can use controls and MDX docs.\nThe example below displays the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"Button"})," component and it explains how we should write our stories:"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-jsx",children:"// Button component example story\n\nimport React from 'react';\n\nimport IconTokenSearch from '../icon/icon-token-search';\n\n// The mdx file to document props and usage\nimport README from './README.mdx';\nimport Button from '.';\n\n// The default storybook component export should always follow the same template\nexport default {\n // The `title` effects the components tile and location in storybook\n // It should follow the folder structure location of the component. Don't use spaces.\n title: 'Components/UI/Button',\n component: Button, // The component you are documenting\n parameters: {\n docs: {\n page: README, // Reference to the docs page MDX file\n },\n },\n // the controls plugin argTypes are used for the interactivity of the component\n argTypes: {\n children: { control: 'text' },\n disabled: { control: 'boolean' },\n // use the updated action API to log actions in the actions tab\n onClick: { action: 'clicked' },\n type: {\n control: {\n type: 'select',\n },\n options: [\n 'default',\n 'primary',\n 'secondary',\n 'warning',\n 'danger',\n 'danger-primary',\n 'link',\n ],\n },\n submit: { control: 'boolean' },\n large: { control: 'boolean' },\n className: { control: 'text' },\n icon: {\n control: {\n type: 'select',\n },\n options: ['IconTokenSearch'],\n mapping: {\n IconTokenSearch: <IconTokenSearch />,\n },\n },\n },\n};\n\n// First story component should always be called \"DefaultStory\"\n// The `DefaultStory` should include argTypes and controls where appropriate\nexport const DefaultStory = (args) => (\n <Button {...args}>{args.children}</Button>\n);\n\n// The name of the DefaultStory component can be renamed to simply \"Default\"\nDefaultStory.storyName = 'Default';\n\n// More stories should be added for different usage examples\n// You can add as many stories as you think appropriate to comprehensively document the component\n// A good convention is to name the story component after the prop you are highlighting\nexport const Type = (args) => (\n <>\n <Button {...args} type=\"default\">\n {args.children || 'Default'}\n </Button>\n <Button {...args} type=\"primary\">\n {args.children || 'Primary'}\n </Button>\n <Button {...args} type=\"secondary\">\n {args.children || 'Secondary'}\n </Button>\n <Button {...args} type=\"warning\">\n {args.children || 'Warning'}\n </Button>\n <Button {...args} type=\"danger\">\n {args.children || 'Danger'}\n </Button>\n <Button {...args} type=\"danger-primary\">\n {args.children || 'Danger primary'}\n </Button>\n <Button {...args} type=\"link\">\n {args.children || 'Link'}\n </Button>\n </>\n);\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"writing-mdx-documentation",children:"Writing MDX Documentation"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["Now the storybook components are complete, the ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"README.mdx"})," documentation should explain the component in detail. ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://mdxjs.com/",target:"_blank",rel:"nofollow noopener noreferrer",children:"MDX"})," format lets you seamlessly use ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"JSX"})," in your markdown documents. You can import react components and stories into your documentation to enhance the developer experience."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-md",children:"<!-- import the necessary blocks from storybook docs -->\n\nimport { Story, Canvas, ArgsTable } from '@storybook/addon-docs';\n\n<!-- import the component to use for the ArgsTable under ## Props -->\n\nimport Button from '.';\n\n<!-- Title of the component -->\n\n# Button\n\n<!-- Brief description of the component -->\n\nButtons communicate actions that users can take.\n\n<!-- Embed the DefaultStory using the storybook url -->\n\n<Canvas>\n <Story id=\"components-ui-button--default-story\" />\n</Canvas>\n\n## Props\n\n<!-- Display the Props using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props. See button.component.js Button.propTypes for an example of jsDoc style comments\n-->\n\n<ArgsTable of={Button} />\n\n## Usage\n\n<!-- Further documentation on usage of the component -->\n\nThe following describes the props and example usage for this component.\n\n### Type\n\nBy changing the `type` prop you can use different styles of the button.\n\n| type | Description |\n| ----------------- | ----------------------------------------------------------------------------------------------------- |\n| `default` | default style of the button |\n| `primary` | the principle call to action on the page |\n| `secondary` | secondary actions on each page |\n| `warning` | a warning action in the page |\n| `danger` | a negative action (such as Delete) on the page |\n| `danger--primary` | a negative principle call to action (such as Delete) on the page |\n| `link` | an optional action or navigation action out of the app changes root html tag from `<button>` to `<a>` |\n\n<!-- Embed other stories to further illustrate component usage -->\n\n<Canvas>\n <Story id=\"components-ui-button--type\" />\n</Canvas>\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Nice work! You're now ready to start creating comprehensive documentation using storybook 🎉👍"})]})}function MDXContent(props={}){let{wrapper:MDXLayout}=Object.assign({},(0,_home_runner_work_metamask_extension_metamask_extension_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.RP)(),props.components);return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}let __page=()=>{throw Error("Docs-only story")};__page.parameters={docsOnly:!0};let componentMeta={title:"Getting Started / Documentation Guidelines",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:MDXContent};let __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["__page"]},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{/** @license React v16.14.0
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var f=__webpack_require__("./node_modules/react/index.js"),g=60103;if(exports.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element"),exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,k){var b,d={},e=null,l=null;for(b in void 0!==k&&(e=""+k),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(l=a.ref),a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
//# sourceMappingURL=2-DOCUMENTATION-stories-mdx.ceb2df87.iframe.bundle.js.map