├── .babelrc ├── .gitignore ├── .npmignore ├── .scripts └── npm-prepublish.js ├── .storybook ├── config.js └── stories.js ├── CHANGELOG.md ├── README.md ├── demo ├── data.json ├── index.js └── package.json ├── dist ├── components │ └── FullScreen │ │ ├── index.js │ │ └── style.js ├── index.js └── preview.js ├── docs └── screenshot.png ├── package.json └── src ├── components └── FullScreen │ ├── index.js │ └── style.js ├── index.js └── preview.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .babelrc 3 | -------------------------------------------------------------------------------- /.scripts/npm-prepublish.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var shell = require('shelljs'); 3 | var babel = ['node_modules', '.bin', 'babel'].join(path.sep); 4 | 5 | shell.rm('-rf', 'dist') 6 | shell.exec(babel + ' --ignore __tests__ src --out-dir dist') 7 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import * as storybook from '@kadira/storybook'; 2 | storybook.configure(() => require('./stories'), module); 3 | -------------------------------------------------------------------------------- /.storybook/stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@kadira/storybook' 3 | import { setupGraphiQL } from '../src' 4 | 5 | // setup the graphiql helper which can be used with the add method later 6 | const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' }); 7 | 8 | storiesOf('GraphQL Demo', module) 9 | .add('get user info', graphiql(`{ 10 | user(id: "1") { 11 | name 12 | } 13 | }`)); 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Changelog 2 | 3 | ### v1.0.0 4 | 5 | * First stable release 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GraphiQL Addon 2 | 3 | This contents of this repo was moved to the [Storybook monorepo](https://github.com/storybooks/storybook/) and the NPM package name has been changed. 4 | 5 | - The old name of the package was: **@kadira/storybook-addon-graphql** 6 | - The new name of the package is: **@storybook/addon-graphql** 7 | - The location of the code is: https://github.com/storybooks/storybook/tree/master/addons/graphql 8 | 9 | The repo you're looking at now is out of date and no longer maintained. 10 | -------------------------------------------------------------------------------- /demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "1": { 3 | "id": "1", 4 | "name": "Dan" 5 | }, 6 | "2": { 7 | "id": "2", 8 | "name": "Marie" 9 | }, 10 | "3": { 11 | "id": "3", 12 | "name": "Jessie" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | // Import the required libraries 2 | var graphql = require('graphql'); 3 | var graphqlHTTP = require('express-graphql'); 4 | var express = require('express'); 5 | var cors = require('cors'); 6 | 7 | // Import the data you created above 8 | var data = require('./data.json'); 9 | 10 | // Define the User type with two string fields: `id` and `name`. 11 | // The type of User is GraphQLObjectType, which has child fields 12 | // with their own types (in this case, GraphQLString). 13 | var userType = new graphql.GraphQLObjectType({ 14 | name: 'User', 15 | fields: { 16 | id: { type: graphql.GraphQLString }, 17 | name: { type: graphql.GraphQLString }, 18 | } 19 | }); 20 | 21 | // Define the schema with one top-level field, `user`, that 22 | // takes an `id` argument and returns the User with that ID. 23 | // Note that the `query` is a GraphQLObjectType, just like User. 24 | // The `user` field, however, is a userType, which we defined above. 25 | var schema = new graphql.GraphQLSchema({ 26 | query: new graphql.GraphQLObjectType({ 27 | name: 'Query', 28 | fields: { 29 | user: { 30 | type: userType, 31 | // `args` describes the arguments that the `user` query accepts 32 | args: { 33 | id: { type: graphql.GraphQLString } 34 | }, 35 | // The resolve function describes how to "resolve" or fulfill 36 | // the incoming query. 37 | // In this case we use the `id` argument from above as a key 38 | // to get the User from `data` 39 | resolve: function (_, args) { 40 | return data[args.id]; 41 | } 42 | } 43 | } 44 | }) 45 | }); 46 | 47 | express() 48 | .use(cors()) 49 | .use('/graphql', graphqlHTTP({ schema: schema, pretty: true })) 50 | .listen(3000); 51 | 52 | console.log('GraphQL server running on http://localhost:3000/graphql'); 53 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "graphql-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "Muhammed Thanish (http://thanish.me/)", 11 | "license": "MIT", 12 | "dependencies": { 13 | "cors": "^2.8.0", 14 | "express": "^4.14.0", 15 | "express-graphql": "^0.5.4", 16 | "graphql": "^0.7.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /dist/components/FullScreen/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _style = require('./style'); 14 | 15 | var _style2 = _interopRequireDefault(_style); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var FullScreen = function (_Component) { 26 | _inherits(FullScreen, _Component); 27 | 28 | function FullScreen() { 29 | _classCallCheck(this, FullScreen); 30 | 31 | return _possibleConstructorReturn(this, (FullScreen.__proto__ || Object.getPrototypeOf(FullScreen)).apply(this, arguments)); 32 | } 33 | 34 | _createClass(FullScreen, [{ 35 | key: 'render', 36 | value: function render() { 37 | return _react2.default.createElement( 38 | 'div', 39 | { style: _style2.default.wrapper }, 40 | this.props.children 41 | ); 42 | } 43 | }]); 44 | 45 | return FullScreen; 46 | }(_react.Component); 47 | 48 | exports.default = FullScreen; -------------------------------------------------------------------------------- /dist/components/FullScreen/style.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = { 7 | wrapper: { 8 | position: 'absolute', 9 | top: 0, 10 | right: 0, 11 | bottom: 0, 12 | left: 0 13 | } 14 | }; -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _preview = require('./preview'); 8 | 9 | Object.defineProperty(exports, 'setupGraphiQL', { 10 | enumerable: true, 11 | get: function get() { 12 | return _preview.setupGraphiQL; 13 | } 14 | }); -------------------------------------------------------------------------------- /dist/preview.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.setupGraphiQL = setupGraphiQL; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _graphiql = require('graphiql'); 13 | 14 | var _graphiql2 = _interopRequireDefault(_graphiql); 15 | 16 | var _FullScreen = require('./components/FullScreen'); 17 | 18 | var _FullScreen2 = _interopRequireDefault(_FullScreen); 19 | 20 | require('graphiql/graphiql.css'); 21 | 22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 23 | 24 | var FETCH_OPTIONS = { 25 | method: 'post', 26 | headers: { 'Content-Type': 'application/json' } 27 | }; 28 | 29 | function getDefautlFetcher(url) { 30 | return function (params) { 31 | var body = JSON.stringify(params); 32 | var options = Object.assign({ body: body }, FETCH_OPTIONS); 33 | return fetch(url, options).then(function (res) { 34 | return res.json(); 35 | }); 36 | }; 37 | } 38 | 39 | function reIndentQuery(query) { 40 | var lines = query.split('\n'); 41 | var spaces = lines[lines.length - 1].length - 1; 42 | return lines.map(function (l, i) { 43 | return i === 0 ? l : l.slice(spaces); 44 | }).join('\n'); 45 | } 46 | 47 | function setupGraphiQL(config) { 48 | return function (_query) { 49 | var variables = arguments.length <= 1 || arguments[1] === undefined ? '{}' : arguments[1]; 50 | 51 | var query = reIndentQuery(_query); 52 | var fetcher = config.fetcher || getDefautlFetcher(config.url); 53 | return function () { 54 | return _react2.default.createElement( 55 | _FullScreen2.default, 56 | null, 57 | _react2.default.createElement(_graphiql2.default, { query: query, variables: variables, fetcher: fetcher }) 58 | ); 59 | }; 60 | }; 61 | } -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybook-eol/storybook-addon-graphql/2f1cb7004f361f3b06900a7786e29511a4672548/docs/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kadira/storybook-addon-graphql", 3 | "version": "1.0.1", 4 | "description": "Storybook addon to display the GraphiQL IDE", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "deploy-storybook": "storybook-to-ghpages", 8 | "prepublish": "node .scripts/npm-prepublish.js", 9 | "storybook": "start-storybook -p 9001", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/kadirahq/storybook-addon-graphql.git" 15 | }, 16 | "keywords": [ 17 | "storybook" 18 | ], 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/kadirahq/storybook-addon-graphql/issues" 22 | }, 23 | "homepage": "https://github.com/kadirahq/storybook-addon-graphql#readme", 24 | "devDependencies": { 25 | "@kadira/storybook": "^2.20.1", 26 | "babel-cli": "^6.11.4", 27 | "babel-preset-es2015": "^6.9.0", 28 | "babel-preset-react": "^6.11.1", 29 | "babel-preset-stage-0": "^6.5.0", 30 | "react": "^15.3.2", 31 | "react-dom": "^15.3.2", 32 | "shelljs": "^0.7.3" 33 | }, 34 | "peerDependencies": { 35 | "@kadira/storybook-addons": "^1.3.0", 36 | "react": "^0.14.7 || ^15.0.0" 37 | }, 38 | "dependencies": { 39 | "graphiql": "^0.7.8", 40 | "graphql": "^0.7.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/FullScreen/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import style from './style'; 3 | 4 | export default class FullScreen extends Component { 5 | render() { 6 | return ( 7 |
8 | {this.props.children} 9 |
10 | ); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/FullScreen/style.js: -------------------------------------------------------------------------------- 1 | export default { 2 | wrapper: { 3 | position: 'absolute', 4 | top: 0, 5 | right: 0, 6 | bottom: 0, 7 | left: 0, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { setupGraphiQL } from './preview'; 2 | -------------------------------------------------------------------------------- /src/preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import GraphiQL from 'graphiql'; 3 | import FullScreen from './components/FullScreen'; 4 | import 'graphiql/graphiql.css'; 5 | 6 | const FETCH_OPTIONS = { 7 | method: 'post', 8 | headers: { 'Content-Type': 'application/json' }, 9 | }; 10 | 11 | function getDefautlFetcher(url) { 12 | return function (params) { 13 | const body = JSON.stringify(params); 14 | const options = Object.assign({ body }, FETCH_OPTIONS); 15 | return fetch(url, options).then(res => res.json()); 16 | }; 17 | } 18 | 19 | function reIndentQuery(query) { 20 | const lines = query.split('\n'); 21 | const spaces = lines[lines.length - 1].length - 1; 22 | return lines.map((l, i) => i === 0 ? l : l.slice(spaces)).join('\n'); 23 | } 24 | 25 | export function setupGraphiQL(config) { 26 | return function (_query, variables = '{}') { 27 | const query = reIndentQuery(_query); 28 | const fetcher = config.fetcher || getDefautlFetcher(config.url); 29 | return () => ( 30 | 31 | 32 | 33 | ); 34 | } 35 | } 36 | --------------------------------------------------------------------------------