@nfq/storybook-github-issues

1. Description
2. Getting started
   1. Installation
   2. PeerDependencies
3. Usage
4. Support

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] - [email protected]