generated from storybookjs/addon-kit
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
31 changed files
with
2,206 additions
and
1,811 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
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 |
|---|---|---|
|
|
@@ -3,4 +3,5 @@ node_modules/ | |
| storybook-static/ | ||
| build-storybook.log | ||
| .DS_Store | ||
| .env | ||
| .env | ||
| yarn-*.log | ||
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 |
|---|---|---|
| @@ -1,92 +1,8 @@ | ||
| # Storybook Addon Addon coverage | ||
| Tools to support code coverage in Storybook | ||
| # Storybook Addon Coverage | ||
|
|
||
| Tools to support code coverage in Storybook and the [test runner](https://github.com/storybookjs/test-runner) | ||
|
|
||
| ### Development scripts | ||
|
|
||
| - `yarn start` runs babel in watch mode and starts Storybook | ||
| - `yarn build` build and package your addon code | ||
|
|
||
| ### Switch from TypeScript to JavaScript | ||
|
|
||
| Don't want to use TypeScript? We offer a handy eject command: `yarn eject-ts` | ||
|
|
||
| This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code. | ||
|
|
||
| ## What's included? | ||
|
|
||
|  | ||
|
|
||
| The addon code lives in `src`. It demonstrates all core addon related concepts. The three [UI paradigms](https://storybook.js.org/docs/react/addons/addon-types#ui-based-addons) | ||
|
|
||
| - `src/Tool.js` | ||
| - `src/Panel.js` | ||
| - `src/Tab.js` | ||
|
|
||
| Which, along with the addon itself, are registered in `src/preset/manager.js`. | ||
|
|
||
| Managing State and interacting with a story: | ||
|
|
||
| - `src/withGlobals.js` & `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story. | ||
| - `src/withRoundTrip.js` & `src/Panel.js` demonstrates two-way communication using channels. | ||
| - `src/Tab.js` demonstrates how to use `useParameter` to access the current story's parameters. | ||
|
|
||
| Your addon might use one or more of these patterns. Feel free to delete unused code. Update `src/preset/manager.js` and `src/preset/preview.js` accordingly. | ||
|
|
||
| Lastly, configure you addon name in `src/constants.js`. | ||
|
|
||
| ### Metadata | ||
|
|
||
| Storybook addons are listed in the [catalog](https://storybook.js.org/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. This project has been configured with sample data. Learn more about available options in the [Addon metadata docs](https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata). | ||
|
|
||
| ## Release Management | ||
|
|
||
| ### Setup | ||
|
|
||
| This project is configured to use [auto](https://github.com/intuit/auto) for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both: | ||
|
|
||
| - [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions. | ||
| - [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope. | ||
|
|
||
| Then open your `package.json` and edit the following fields: | ||
|
|
||
| - `name` | ||
| - `author` | ||
| - `repository` | ||
|
|
||
| #### Local | ||
|
|
||
| To use `auto` locally create a `.env` file at the root of your project and add your tokens to it: | ||
|
|
||
| ```bash | ||
| GH_TOKEN=<value you just got from GitHub> | ||
| NPM_TOKEN=<value you just got from npm> | ||
| ``` | ||
|
|
||
| Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package. | ||
|
|
||
| ```bash | ||
| npx auto create-labels | ||
| ``` | ||
|
|
||
| If you check on GitHub, you’ll now see a set of labels that `auto` would like you to use. Use these to tag future pull requests. | ||
|
|
||
| #### GitHub Actions | ||
|
|
||
| This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository. | ||
|
|
||
| Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`. | ||
|
|
||
| ### Creating a release | ||
|
|
||
| To create a release locally you can run the following command, otherwise the GitHub action will make the release for you. | ||
|
|
||
| ```sh | ||
| yarn release | ||
| ``` | ||
|
|
||
| That will: | ||
|
|
||
| - Build and package the addon code | ||
| - Bump the version | ||
| - Push a release to GitHub and npm | ||
| - Push a changelog to GitHub |
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,20 @@ | ||
| module.exports = function ({ types: t }) { | ||
| return { | ||
| visitor: { | ||
| ExportDefaultDeclaration: { | ||
| enter({ node }) { | ||
| // set default.parameters.coverage | ||
| /** | ||
| * { | ||
| * coverage: { | ||
| * fileName: '', | ||
| * filePath: '', | ||
| * source: '' <- raw source | ||
| * } | ||
| * } | ||
| */ | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| }; |
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 was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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,47 @@ | ||
|
|
||
| import React from 'react'; | ||
| import { useChannel, useAddonState } from '@storybook/api'; | ||
| import { SyntaxHighlighter } from '@storybook/components'; | ||
|
|
||
| import { ADDON_ID, EVENTS } from '../constants'; | ||
| import { CoverageDetail } from '../types'; | ||
| import { lineCoverage } from '../utils'; | ||
|
|
||
| interface DetailPanelProps { | ||
| detail: CoverageDetail; | ||
| } | ||
|
|
||
| const DetailPanel: React.FC<DetailPanelProps> = ({ detail }) => { | ||
| if (!(detail.source && detail.item)) { | ||
| return <div>No coverage set</div>; | ||
| } | ||
|
|
||
| const lineToMissing = lineCoverage(detail.item); | ||
| const lineProps = (lineNumber: number) => | ||
| lineToMissing[lineNumber] ? { style: { backgroundColor: '#ffcccc', borderLeft: '5px solid #f85151' } } : { style: { borderLeft: '5px solid #95de95' } }; | ||
| return ( | ||
| <SyntaxHighlighter | ||
| language="jsx" | ||
| showLineNumbers | ||
| // @ts-ignore | ||
| wrapLines | ||
| // @ts-ignore | ||
| lineProps={lineProps} | ||
| format={false} | ||
| copyable={false} | ||
| padded | ||
| > | ||
| {detail.source} | ||
| </SyntaxHighlighter> | ||
| ); | ||
| }; | ||
|
|
||
| export const CoveragePanel: React.VFC = () => { | ||
| const [coverageDetail, setCoverageDetail] = useAddonState<CoverageDetail>(ADDON_ID, null); | ||
|
|
||
| useChannel({ | ||
| [EVENTS.COVERAGE_DETAIL]: (detail: CoverageDetail) => setCoverageDetail(detail), | ||
| }); | ||
|
|
||
| return coverageDetail ? <DetailPanel detail={coverageDetail} /> : <div>No coverage</div>; | ||
| }; |
Oops, something went wrong.