Extract addon-graphql from monorepo (WIP)

README.md

@@ -1,106 +1,64 @@
-# Storybook Addon Kit
+# Storybook GraphiQL Addon
 
-Simplify the creation of Storybook addons
+Storybook GraphQL Addon can be used to display the GraphiQL IDE with example queries in [Storybook](https://storybook.js.org).
 
-- 📝 Live-editing in development
-- ⚛️ React/JSX support
-- 📦 Transpiling and bundling with Babel
-- 🏷 Plugin metadata
-- 🚢 Release management with [Auto](https://github.com/intuit/auto)
-- 🧺 Boilerplate and sample code
+[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
 
-## Getting Started
-
-Click the **Use this template** button to get started.
+![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/graphql/docs/screenshot.png)
 
-![](https://user-images.githubusercontent.com/42671/106809879-35b32000-663a-11eb-9cdc-89f178b5273f.gif)
+## Getting Started
 
-Clone your repository and install dependencies.
+First, install the addon
 
 ```sh
-npm install
+yarn add @storybook/addon-graphql --dev
 ```
 
-### Development scripts
-
-- `npm run start` runs babel in watch mode and starts Storybook
-- `npm run build` build and package your addon code
-
-## What's included?
-
-![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)
-
-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`.
+Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url.
 
-### Metadata
+```js
+import { storiesOf } from '@storybook/react'
+import { setupGraphiQL } from '@storybook/addon-graphql'
 
-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).
+// setup the graphiql helper which can be used with the add method later
+const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' });
 
-## 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>
+storiesOf('GraphQL Demo', module)
+  .add('get user info', graphiql(`{
+    user(id: "1") {
+      name
+    }
+  }`));
 ```
 
-Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
-
-```bash
-npx auto create-labels
-```
+> Tip: try creating the helper in another file and import the configured graphiql helper from it
 
-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.
+## Advanced Setup
 
-#### GitHub Actions
+The `setupGraphiQL` function also accepts a fetcher parameter which can be used to change how graphiql gets data. If the fetcher parameter is not given, it'll create a fetcher which uses the `fetch` api to make requests. The above example can also be written using a custom fetcher.
 
-This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
+```js
+import { storiesOf } from '@storybook/react'
+import { setupGraphiQL } from '@storybook/addon-graphql'
 
-Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
+import { url } from './settings';
 
-### Creating a releasing
+const fetcher = params => {
+  const options = {
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  };
+  return fetch(url, options).then(res => res.json());
+};
 
-To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
+// create the helper with a custom fetcher
+const graphiql = setupGraphiQL({ fetcher });
 
-```sh
-npm run release
+storiesOf('GraphQL Demo', module)
+  .add('get user info', graphiql(`{
+    user(id: "1") {
+      name
+    }
+  }`));
 ```
-
-That will:
-
-- Build and package the addon code
-- Bump the version
-- Push a release to GitHub and npm
-- Push a changelog to GitHub