Migrate @storybook/addon-graphql to typescript (#6935)

Migrate @storybook/addon-graphql to typescript

addons/graphql/package.json

@@ -17,7 +17,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },

addons/graphql/src/components/FullScreen/index.js → addons/graphql/src/components/FullScreen/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import style from './style';
+import { style } from './style';
 
-export default function FullScreen({ children }) {
+export const FullScreen: FunctionComponent = ({ children }) => {
   return <div style={style.wrapper}>{children}</div>;
-}
+};
 
 FullScreen.defaultProps = { children: null };
 FullScreen.propTypes = { children: PropTypes.node };

addons/graphql/src/components/FullScreen/style.js → addons/graphql/src/components/FullScreen/style.ts

@@ -1,6 +1,6 @@
-export default {
+export const style = {
   wrapper: {
-    position: 'absolute',
+    position: 'absolute' as const,
     top: 0,
     right: 0,
     bottom: 0,

addons/graphql/src/manager.js → addons/graphql/src/manager.tsx

@@ -1,36 +1,21 @@
-import { fetch } from 'global';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import GraphiQL from 'graphiql';
 import 'graphiql/graphiql.css';
 
-import { Consumer } from '@storybook/api';
+import { Consumer, Combo } from '@storybook/api';
 
 import { PARAM_KEY } from '.';
+import { reIndentQuery, getDefaultFetcher } from './shared';
 
-const FETCH_OPTIONS = {
-  method: 'post',
-  headers: { 'Content-Type': 'application/json' },
-};
-
-function getDefaultFetcher(url) {
-  return params => {
-    const body = JSON.stringify(params);
-    const options = Object.assign({ body }, FETCH_OPTIONS);
-    return fetch(url, options).then(res => res.json());
-  };
-}
-
-function reIndentQuery(query) {
-  const lines = query.split('\n');
-  const spaces = lines[lines.length - 1].length - 1;
-  return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
+interface GQLProps {
+  active: boolean;
 }
 
-const GQL = ({ active }) => {
+const GQL: FunctionComponent<GQLProps> = ({ active }) => {
   return active ? (
     <Consumer>
-      {({ api, state }) => {
+      {({ api, state }: Combo) => {
         const story = state.storiesHash[state.storyId];
         const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
 

addons/graphql/src/preview.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import GraphiQL from 'graphiql';
+
+import 'graphiql/graphiql.css';
+
+import { FullScreen } from './components/FullScreen';
+import { reIndentQuery, getDefaultFetcher } from './shared';
+
+export interface FetcherParams {
+  query: string;
+  variables?: string;
+  operationName?: string;
+}
+
+export interface SetupGraphiQLConfig {
+  url: string;
+  fetcher?: (params: FetcherParams) => Promise<any>;
+}
+
+export const setupGraphiQL = (config: SetupGraphiQLConfig) => (
+  _query: string,
+  variables = '{}'
+) => {
+  const query = reIndentQuery(_query);
+  const fetcher = config.fetcher || getDefaultFetcher(config.url);
+  return () => (
+    <FullScreen>
+      <GraphiQL query={query} variables={variables} fetcher={fetcher} />
+    </FullScreen>
+  );
+};

addons/graphql/src/register.js → addons/graphql/src/register.ts

@@ -3,7 +3,7 @@ import { addons, types } from '@storybook/addons';
 import GQL from './manager';
 import { ADDON_ID } from '.';
 
-export function register() {
+export const register = () => {
   addons.register(ADDON_ID, () => {
     addons.add(ADDON_ID, {
       title: 'GraphiQL',
@@ -13,4 +13,4 @@ export function register() {
       render: GQL,
     });
   });
-}
+};

addons/graphql/src/shared.ts

@@ -0,0 +1,22 @@
+import { fetch } from 'global';
+
+import { FetcherParams } from './preview';
+
+const FETCH_OPTIONS = {
+  method: 'post',
+  headers: { 'Content-Type': 'application/json' },
+};
+
+export const getDefaultFetcher = (url: string) => {
+  return (params: FetcherParams) => {
+    const body = JSON.stringify(params);
+    const options = Object.assign({ body }, FETCH_OPTIONS);
+    return fetch(url, options).then((res: any) => res.json());
+  };
+};
+
+export const reIndentQuery = (query: string) => {
+  const lines = query.split('\n');
+  const spaces = lines[lines.length - 1].length - 1;
+  return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
+};

addons/graphql/src/typings.d.ts

@@ -0,0 +1,7 @@
+declare module 'global';
+
+// There are no types for graphiql
+declare module 'graphiql' {
+  const GraphiQL: any;
+  export default GraphiQL;
+}

addons/graphql/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}