-
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs/12367 Adding storybook essentials addons (#12393)
* Adding storybook essentials and documentation contribution guidelines * Deprecation updates * Update ui/2.DOCUMENTATION.stories.mdx Co-authored-by: Elliot Winkler <[email protected]> * Updating spelling and adding label to i18n-party plugin in toolbar Co-authored-by: kumavis <[email protected]> Co-authored-by: Elliot Winkler <[email protected]>
- Loading branch information
3 people
authored
Oct 29, 2021
1 parent
487080b
commit d72f729
Showing
11 changed files
with
2,917 additions
and
1,347 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,48 @@ | ||
| # things that *are* used, that depcheck is wrong about | ||
| ignores: | ||
| # | ||
| # | ||
| # webapp deps | ||
| # | ||
| # | ||
|
|
||
| - "@babel/runtime" | ||
| - "@fortawesome/fontawesome-free" | ||
| - "punycode" | ||
| # | ||
| - '@babel/runtime' | ||
| - '@fortawesome/fontawesome-free' | ||
| - 'punycode' | ||
|
|
||
| # | ||
| # dev deps | ||
| # | ||
|
|
||
| # safety fallback for npm lifecycle scripts, not used normally | ||
| - "@lavamoat/preinstall-always-fail" | ||
| - '@lavamoat/preinstall-always-fail' | ||
| # used in testing + ci | ||
| - "@metamask/auto-changelog" # invoked as `auto-changelog` | ||
| - "@metamask/forwarder" | ||
| - "@metamask/test-dapp" | ||
| - "@sentry/cli" # invoked as `sentry-cli` | ||
| - "chromedriver" | ||
| - "depcheck" # ooo meta | ||
| - "ganache-cli" | ||
| - "geckodriver" | ||
| - "jest" | ||
| - "lavamoat-viz" | ||
| - "prettier-plugin-sort-json" # automatically imported by prettier | ||
| - "source-map-explorer" | ||
| - '@metamask/auto-changelog' # invoked as `auto-changelog` | ||
| - '@metamask/forwarder' | ||
| - '@metamask/test-dapp' | ||
| - '@sentry/cli' # invoked as `sentry-cli` | ||
| - 'chromedriver' | ||
| - 'depcheck' # ooo meta | ||
| - 'ganache-cli' | ||
| - 'geckodriver' | ||
| - 'jest' | ||
| - 'lavamoat-viz' | ||
| - 'prettier-plugin-sort-json' # automatically imported by prettier | ||
| - 'source-map-explorer' | ||
| # development tool | ||
| - "yarn-deduplicate" | ||
| - "improved-yarn-audit" | ||
| - 'yarn-deduplicate' | ||
| - 'improved-yarn-audit' | ||
| # storybook | ||
| - "@storybook/core" | ||
| - "@storybook/addon-backgrounds" | ||
| - "@storybook/addon-toolbars" | ||
| - "style-loader" | ||
| - "css-loader" | ||
| - "sass-loader" | ||
| - "resolve-url-loader" | ||
| - '@storybook/core' | ||
| - '@storybook/addon-essentials' | ||
| - '@storybook/addon-a11y' | ||
| - 'style-loader' | ||
| - 'css-loader' | ||
| - 'sass-loader' | ||
| - 'resolve-url-loader' | ||
|
|
||
| # files depcheck should not parse | ||
| # files depcheck should not parse | ||
| ignorePatterns: | ||
| # seems to incorrectly parse scss @include pragmas? | ||
| - "**/*.scss" | ||
| - '**/*.scss' | ||
| # self-contained bundle used for testing | ||
| - "**/send-eth-with-private-key-test/web3js.js" | ||
| - "**/send-eth-with-private-key-test/ethereumjs-tx.js" | ||
|
|
||
| - '**/send-eth-with-private-key-test/web3js.js' | ||
| - '**/send-eth-with-private-key-test/ethereumjs-tx.js' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,41 @@ | ||
| // import { useGlobals } from '@storybook/api'; | ||
| const { useGlobals } = require('@storybook/api') | ||
| const React = require("react") | ||
| const { addons, types } = require("@storybook/addons") | ||
| const { Icons, IconButton } = require('@storybook/components') | ||
| const localeList = require('../../app/_locales/index.json') | ||
| const { useEffect } = React | ||
| const { useGlobals } = require('@storybook/api'); | ||
| const React = require('react'); | ||
| const { addons, types } = require('@storybook/addons'); | ||
| const { Icons, IconButton } = require('@storybook/components'); | ||
| const localeList = require('../../app/_locales/index.json'); | ||
| const { useEffect } = React; | ||
|
|
||
| addons.register("i18n-party", () => { | ||
|
|
||
| addons.add("i18n-party", { | ||
| title: "rotates through every i18n locale", | ||
| addons.register('i18n-party', () => { | ||
| addons.add('i18n-party', { | ||
| title: 'rotates through every i18n locale', | ||
| //👇 Sets the type of UI element in Storybook | ||
| type: types.TOOL, | ||
| match: () => true, | ||
| render: (...args) => { | ||
| // https://github.com/storybookjs/storybook/blob/6490a0d646dbaa293b76bbde477daca615efe789/addons/toolbars/src/components/MenuToolbar.tsx#L2 | ||
| const [globals, updateGlobals] = useGlobals() | ||
| const [globals, updateGlobals] = useGlobals(); | ||
| useEffect(() => { | ||
| if (!globals.localeParty) return | ||
| if (!globals.localeParty) return; | ||
| const interval = setInterval((...args) => { | ||
| const currentIndex = localeList.findIndex(({ code }) => code === globals.locale) | ||
| const nextIndex = (currentIndex + 1) % localeList.length | ||
| const nextLocale = localeList[nextIndex].code | ||
| updateGlobals({ locale: nextLocale }) | ||
| }, 2000) | ||
| return () => clearInterval(interval) | ||
| }) | ||
| const currentIndex = localeList.findIndex( | ||
| ({ code }) => code === globals.locale, | ||
| ); | ||
| const nextIndex = (currentIndex + 1) % localeList.length; | ||
| const nextLocale = localeList[nextIndex].code; | ||
| updateGlobals({ locale: nextLocale }); | ||
| }, 2000); | ||
| return () => clearInterval(interval); | ||
| }); | ||
|
|
||
| return ( | ||
| <IconButton onClick={() => updateGlobals({ localeParty: !globals.localeParty })}> | ||
| <Icons icon={globals.localeParty ? 'star' : 'starhollow'}/> | ||
| <IconButton | ||
| onClick={() => updateGlobals({ localeParty: !globals.localeParty })} | ||
| > | ||
| <Icons icon={globals.localeParty ? 'star' : 'starhollow'} /> | ||
| <span> Shuffle i18n locale</span> | ||
| </IconButton> | ||
| ) | ||
| ); | ||
| }, | ||
| }) | ||
| }) | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Getting Started / Introduction" /> | ||
|
|
||
| # Introduction | ||
|
|
||
| Welcome to the MetaMask Browser Extension Storybook. | ||
|
|
||
| ## Building locally and Contributing | ||
|
|
||
| This document is currently only specific to storybook best practices and component documentation guidelines. This may change in future but for now if you are looking to get a local build of Metamask up and running or contribute to the extension codebase please read the Metamask [README.md](https://github.com/MetaMask/metamask-extension) | ||
|
|
||
| ## Documentation Guidelines | ||
|
|
||
| If you're here to improve our storybook documentation you're in the right place! Please head over to the [Documentation Guidelines](./?path=/story/getting-started-documentation-guidelines--page) for contributing to component documentation in storybook. |
Oops, something went wrong.