@nfq/storybook-github-issues
Description:
This is an Storybook plugin to manage issues in Github from Storybook directly so Designers can give Feedback without leaving Storybook.
Getting started
To setup the project locally follow the next steps:
Installation
To install the package run
npm install @nfq/storybook-github-issues
if you are on yarn
yarn add @nfq/storybook-github-issues
or on pnpm
pnpm install @nfq/storybook-github-issues
PeerDependencies:
The following PeerDependencies are needed so the addon does work (Most get installed with storybook itself):
- @storybook/blocks >= 7
- @storybook/components >= 7
- @storybook/core-events >= 7
- @storybook/manager-api >= 7
- @storybook/preview-api >= 7
- @storybook/theming >= 7
- @storybook/types >= 7
- react >= 18
- react-dom >= 18
- storybook >= 7
- styled-components >= 5
Usage
To use the addon go to your storybook config file in "/.storybook/main.ts" and add the following lines:
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
+ "@nfq/storybook-github-issues"
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
}
};
Add an .env file to your project and add the following variables:
STORYBOOK_GITHUB_OWNER: <your github owner>,
STORYBOOK_GITHUB_REPOSITORY: <your github repository>,
STORYBOOK_GITHUB_PUBLIC_TOKEN: <your github token>,
For the token to work you need to create a Github Token with the following permissions:
- access to the repository (Please use fine grained tokens and only give access to the repository you need)
- read:metadata
- read:discussions
- write:discussions
- read:issues
- write:issues
- read:pull_requests
- write:pull_requests
Support
Christoph Kruppe - [https://github.com/ckruppe] - c.kruppe@nfq.de