✨ New empty state

graphql-editor · Sep 26, 2023 · 56a5894 · 56a5894
1 parent 976f490
commit 56a5894
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.9.4",
+  "version": "6.9.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.9.4",
+  "version": "6.9.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -45,7 +45,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^6.9.4",
+    "graphql-editor-worker": "^6.9.5",
     "graphql-js-tree": "^1.0.5",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/Relation/FTUX/BackgroundFTUX.tsx b/packages/editor/src/Relation/FTUX/BackgroundFTUX.tsx
@@ -1,15 +1,54 @@
 import { NewNode } from "@/shared/components/NewNode";
-import { Stack, Typography } from "@aexol-studio/styling-system";
+import {
+  ArrowNarrowBottomAlignment,
+  Button,
+  Stack,
+  Typography,
+} from "@aexol-studio/styling-system";
 import styled from "@emotion/styled";
 import React from "react";
 
-export const BackgroundFTUX = () => {
+export const BackgroundFTUX = ({
+  onImport,
+  onStartCoding,
+  showCode,
+}: {
+  showCode?: boolean;
+  onStartCoding: () => void;
+  onImport: () => void;
+}) => {
   return (
-    <Container direction="column" align="center" justify="center" gap="1rem;">
-      <Typography>
-        Your schema is empty! Please create your first node
-      </Typography>
-      <NewNode />
+    <Container direction="column" align="center" justify="center" gap="2rem">
+      <Stack direction="column" gap="4rem">
+        <Stack direction="column" gap="1rem">
+          <Typography>
+            Your schema is empty! Please create your first node.
+          </Typography>
+          <Stack gap="1rem">
+            {showCode && (
+              <Button onClick={onStartCoding} variant="neutral" size="small">
+                Start coding
+              </Button>
+            )}
+            <NewNode />
+          </Stack>
+        </Stack>
+        <Stack direction="column" gap="1rem">
+          <Typography>
+            You can also import the schema from URL and .graphql or .json file.
+          </Typography>
+          <Stack gap="1rem">
+            <Button
+              endAdornment={<ArrowNarrowBottomAlignment />}
+              onClick={onImport}
+              variant="neutral"
+              size="small"
+            >
+              Import schema
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
     </Container>
   );
 };

diff --git a/packages/editor/src/Relation/Relation.tsx b/packages/editor/src/Relation/Relation.tsx
@@ -5,20 +5,28 @@ import {
   useRelationsState,
   useTreesState,
 } from "@/state/containers";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { TransformWrapper } from "react-zoom-pan-pinch";
 import { Graf } from "@/Graf/Graf";
 import styled from "@emotion/styled";
 import { Chip } from "@aexol-studio/styling-system";
 import { AnimatePresence } from "framer-motion";
 import { BackgroundFTUX } from "@/Relation/FTUX/BackgroundFTUX";
+import { useRouter } from "@/state/containers/router";
+import { ImportSchema } from "@/shared/dialogs/ImportSchema";
 
-export const Relation: React.FC = () => {
+export const Relation: React.FC<{ setInitialSchema: (s: string) => void }> = ({
+  setInitialSchema,
+}) => {
   const { activeNode, focusMode, allNodes } = useTreesState();
   const { filteredFocusedNodes, filteredRelationNodes } =
     useRelationNodesState();
   const { editMode, ctrlToZoom } = useRelationsState();
+  const { set, routes } = useRouter();
   const { grafErrors } = useErrorsState();
+  const [popupsState, setPopupsState] = useState({
+    import: false,
+  });
   const isFocus = !!(focusMode && filteredFocusedNodes);
   const viewport = useMemo(() => {
     return (
@@ -73,9 +81,31 @@ export const Relation: React.FC = () => {
       </AnimatePresence>
       {!allNodes.nodes.length && (
         <AnimatePresence>
-          <BackgroundFTUX />
+          <BackgroundFTUX
+            showCode={routes.code === "off"}
+            onStartCoding={() => {
+              set(
+                {
+                  ...routes,
+                  code: routes.code === "off" ? "on" : "off",
+                  source: "internal",
+                },
+                "internal"
+              );
+            }}
+            onImport={() => {
+              setPopupsState({ import: true });
+            }}
+          />
         </AnimatePresence>
       )}
+      <ImportSchema
+        onClose={() => setPopupsState({ import: false })}
+        onImport={(s) => {
+          setInitialSchema(s);
+        }}
+        open={popupsState.import}
+      />
     </RelationContainer>
   );
 };

diff --git a/packages/editor/src/editor/Editor.tsx b/packages/editor/src/editor/Editor.tsx
@@ -345,7 +345,17 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
         )}
         {(routes.pane === "relation" || routes.pane === "docs") && (
           <ErrorOuterContainer>
-            {routes.pane === "relation" && <Relation />}
+            {routes.pane === "relation" && (
+              <Relation
+                setInitialSchema={(s) =>
+                  setSchema({
+                    code: s,
+                    libraries: schema.libraries,
+                    source: "outside",
+                  })
+                }
+              />
+            )}
             {routes.pane === "docs" && <Docs />}
             <NodeNavigation />
           </ErrorOuterContainer>

diff --git a/packages/editor/src/editor/EmbeddedEditor.tsx b/packages/editor/src/editor/EmbeddedEditor.tsx
@@ -109,7 +109,11 @@ export const EmbeddedEditor = ({ schema, theme }: EmbeddedEditorProps) => {
       }}
     >
       <ErrorOuterContainer>
-        <Relation />
+        <Relation
+          setInitialSchema={(s) => {
+            //noop
+          }}
+        />
         <NodeNavigation />
       </ErrorOuterContainer>
       {!!codeErrors.length && <ErrorsList>{errorsItems}</ErrorsList>}

diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox",
-  "version": "6.9.4",
+  "version": "6.9.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -48,7 +48,7 @@
     "@aexol-studio/styling-system": "^0.0.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "graphql-editor": "^6.9.4",
+    "graphql-editor": "^6.9.5",
     "graphql-js-tree": "^0.1.6",
     "socket.io-client": "^4.7.2"
   },

diff --git a/packages/socket-live-test/package.json b/packages/socket-live-test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "socket-live-test",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "testing editor live",
   "main": "index.js",
   "type": "module",

diff --git a/packages/svg-ts-sync/package.json b/packages/svg-ts-sync/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-ts-sync",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "private": false,
   "license": "MIT",
   "description": "Sync folders with svg's to react typescript components",