Merge pull request graphql-editor#2 from slothking-online/master

Sync with base fork

package.json

@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/classnames": "2.2.3",
+    "@types/classnames": "^2.2.6",
     "@types/faker": "^4.1.4",
     "@types/graphql": "^14.0.1",
     "@types/history": "4.6.2",
@@ -41,7 +41,7 @@
     "webpack-dev-server": "^3.1.8"
   },
   "dependencies": {
-    "@slothking-online/diagram": "^0.2.12",
+    "@slothking-online/diagram": "^0.2.15",
     "@slothking-online/form": "^0.1.36",
     "classnames": "^2.2.5",
     "faker": "^4.1.0",

src/app/Code.tsx

@@ -3,84 +3,100 @@ import * as styles from '../style/Code';
 import { xonokai } from 'react-syntax-highlighter/styles/prism';
 import SyntaxHighlighter from 'react-syntax-highlighter/prism';
 import * as FileSaver from 'file-saver';
-import * as cx from 'classnames';
+import cx from 'classnames';
 import { makeNodes } from '../livegen/import/makeNodes';
 import { GraphQLNodeType } from 'livegen/gens';
 import { LinkType } from '@slothking-online/diagram';
+import { Button } from '../ui/Button';
+import { ButtonFile } from '../ui/ButtonFile';
+
+import { ArrowLeft2, Pushpin, CloudUpload, Download } from '../assets/icons';
 
 export type CodeEditorProps = {
   liveCode: string;
+  onPinChange?: (pinned) => void;
+  onHide?: (hidden) => void;
+  pinned: boolean;
+  hidden: boolean;
   loadNodes: (
     props: {
       nodes: GraphQLNodeType[];
       links: LinkType[];
     }
   ) => void;
 };
-export type CodeEditorState = {
-  editor?: boolean;
-};
+export type CodeEditorState = {};
 
 export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
   state: CodeEditorState = {};
+
+  loadFromFile = (e) => {
+    const file = e.target.files[0];
+    // if (file.type.match('application/json')) {
+    console.log(file.type);
+    const reader = new FileReader();
+    reader.onload = (f) => {
+      const result = makeNodes((f.target as any).result);
+      this.props.loadNodes(result);
+    };
+    reader.readAsText(file);
+    // }
+  };
+
+  saveToFile = () => {
+    var file = new File([this.props.liveCode], `graphql-editor-schema.gql`, {
+      type: 'application/json'
+    });
+    FileSaver.saveAs(file, `graphql-editor-schema.gql`);
+  }
+
   render() {
     return (
       <div
-        className={cx({
-          [styles.HideEditor]: this.state.editor,
-          [styles.ShowEditor]: !this.state.editor,
-          [styles.Editor]: true
-        })}
+        className={cx(
+          styles.Sidebar,
+          { [styles.SidebarHidden]: this.props.hidden }
+        )}
       >
-        <SyntaxHighlighter
-          PreTag={({ children }) => <div className={styles.Pre}>{children}</div>}
-          language="graphql"
-          style={xonokai}
-        >
-          {this.props.liveCode}
-        </SyntaxHighlighter>
-
-        <input
-          type="file"
-          id="load"
-          style={{ display: 'none' }}
-          onChange={(e) => {
-            const file = e.target.files[0];
-            // if (file.type.match('application/json')) {
-            console.log(file.type);
-            const reader = new FileReader();
-            reader.onload = (f) => {
-              const result = makeNodes((f.target as any).result);
-              this.props.loadNodes(result);
-            };
-            reader.readAsText(file);
-            // }
-          }}
-        />
-        <label htmlFor="load" className={styles.Load} onClick={() => {}}>
-          Load
-        </label>
-        <div
-          className={styles.Save}
-          onClick={() => {
-            var file = new File([this.props.liveCode], `graphql-editor-schema.gql`, {
-              type: 'application/json'
-            });
-            FileSaver.saveAs(file, `graphql-editor-schema.gql`);
-          }}
-        >
-          Save to file
+        <div className={cx(
+          styles.Toolbar,
+          { [styles.ToolbarHidden]: this.props.hidden }
+        )}>
+          <ButtonFile icon={CloudUpload} onChange={this.loadFromFile}>
+            Save to file
+          </ButtonFile>
+          <Button icon={Download} onClick={this.saveToFile} className={styles.SidebarControl}>
+            Save to file
+          </Button>
+          <Button
+            icon={Pushpin}
+            active={this.props.pinned}
+            className={styles.SidebarControl}
+            onClick={() => this.props.onPinChange(!this.props.pinned)}
+          />
+          <Button
+            rounded={this.props.hidden}
+            disabled={this.props.pinned}
+            className={cx(styles.SidebarControl, { [styles.FlippedButton]: this.props.hidden })}
+            icon={ArrowLeft2}
+            onClick={() => this.props.onHide(!this.props.hidden)}
+          />
         </div>
         <div
-          className={styles.ClickInfo}
-          onClick={() => {
-            this.setState({
-              editor: !this.state.editor
-            });
-          }}
+          className={cx(
+            styles.CodeContainer,
+            { [styles.CodeContainerHidden]: this.props.hidden }
+          )}
         >
-          {this.state.editor ? `>>` : `<<`}
+          <SyntaxHighlighter
+            PreTag={({ children }) => <div className={styles.Pre}>{children}</div>}
+            language="graphql"
+            style={xonokai}
+          >
+            {this.props.liveCode}
+          </SyntaxHighlighter>
         </div>
+
       </div>
     );
   }

src/app/Home.tsx

@@ -9,6 +9,7 @@ import {
 } from '@slothking-online/diagram';
 import { categories, singlePortOutput } from '../categories';
 import * as styles from '../style/Home';
+import cx from 'classnames';
 import {
   typeTemplate,
   interfaceTemplate,
@@ -18,7 +19,9 @@ import {
   rootQueryTemplate,
   rootMutationTemplate,
   TemplateProps,
-  rootSubscriptionTemplate
+  rootSubscriptionTemplate,
+  scalarTemplate,
+  unionTemplate
 } from '../livegen/gens/graphql/template';
 import { nodeTypes, SubTypes } from '../nodeTypes';
 import { GraphQLNodeType } from '../livegen/gens';
@@ -34,6 +37,8 @@ export type ModelState = {
   loaded?: LoadedFile;
   projectId?: string;
   liveCode: string;
+  sidebarPinned: boolean;
+  sidebarHidden: boolean;
 };
 
 class Home extends React.Component<{}, ModelState> {
@@ -46,7 +51,9 @@ class Home extends React.Component<{}, ModelState> {
       tabs: []
     },
     projectId: null,
-    liveCode: ''
+    liveCode: '',
+    sidebarPinned: false,
+    sidebarHidden: false,
   };
   componentDidMount() {}
   render() {
@@ -115,6 +122,14 @@ class Home extends React.Component<{}, ModelState> {
                       name: nodeTypes.input,
                       items: addType(this.state.nodes, nodeTypes.input)
                     },
+                    {
+                      name: nodeTypes.scalar,
+                      items: addType(this.state.nodes, nodeTypes.scalar)
+                    },
+                    {
+                      name: nodeTypes.union,
+                      items: addType(this.state.nodes, nodeTypes.union)
+                    },
                     {
                       name: nodeTypes.enum,
                       items: addType(this.state.nodes, nodeTypes.enum)
@@ -127,9 +142,13 @@ class Home extends React.Component<{}, ModelState> {
       )
     ];
     return (
-      <div className={styles.Full}>
+      <div className={cx(styles.Full, {[styles.Pinned]: this.state.sidebarPinned})}>
         <CodeEditor
           liveCode={this.state.liveCode}
+          onPinChange={pinned => this.setState({ sidebarPinned: pinned })}
+          onHide={hidden => this.setState({sidebarHidden: hidden})}
+          hidden={this.state.sidebarHidden}
+          pinned={this.state.sidebarPinned}
           loadNodes={(props) => {
             this.setState({
               loaded: {
@@ -175,40 +194,53 @@ class Home extends React.Component<{}, ModelState> {
             nodeInputs = [...nodeInputs, ...crudMacroNodes];
             const generator = (
               type: keyof typeof nodeTypes,
-              template: (props: TemplateProps) => string
+              template: (props: TemplateProps) => string,
+              joinString = '\n\n'
             ) =>
               nodeInputs
                 .filter((n) => n.node.type === type)
                 .map(template)
-                .join('\n');
+                .join(joinString);
+            const scalarsCode = generator(nodeTypes.scalar, scalarTemplate);
             const typesCode = generator(nodeTypes.type, typeTemplate);
             const enumsCode = generator(nodeTypes.enum, enumTemplate);
             const interfacesCode = generator(nodeTypes.interface, interfaceTemplate);
             const inputsCode = generator(nodeTypes.input, inputTemplate);
-            const queriesCode = rootQueryTemplate(generator(nodeTypes.query, queryTemplate));
+            const unionsCode = generator(nodeTypes.union, unionTemplate);
+            const queriesCode = rootQueryTemplate(generator(nodeTypes.query, queryTemplate, '\n'));
             const mutationsCode = rootMutationTemplate(
-              generator(nodeTypes.mutation, queryTemplate)
+              generator(nodeTypes.mutation, queryTemplate, '\n')
             );
             const subscriptionsCode = rootSubscriptionTemplate(
-              generator(nodeTypes.subscription, queryTemplate)
+              generator(nodeTypes.subscription, queryTemplate, '\n')
             );
             const resolverCode = nodeInputs.map(generateFakerResolver).join('\n');
             resolverCode;
-            const mainCode = `schema{
-  query: Query,
-  mutation: Mutation,
-  subscription: Subscription
-}`;
+            let mainCode = 'schema{';
+            if (queriesCode) {
+              mainCode += '\n\tquery: Query';
+            }
+            if (mutationsCode) {
+              mainCode += '\n\tmutation: Mutation';
+            }
+            if (subscriptionsCode) {
+              mainCode += '\n\tsubscription: Subscription';
+            }
+            mainCode += '\n}';
             const liveCode = [
+              scalarsCode,
               enumsCode,
               inputsCode,
               interfacesCode,
               typesCode,
+              unionsCode,
               queriesCode,
               mutationsCode,
               subscriptionsCode,
               mainCode
-            ].join('\n');
+            ]
+              .filter((c) => c.length > 0)
+              .join('\n\n');
             this.setState({
               liveCode,
               nodes,

src/assets/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}