[No impact] auth integration & import cleanup

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "ui/editor-ui"]
 	path = ui/editor-ui
 	url = https://github.com/bridgedxyz/reflect-editor-ui
+[submodule "editor-packages/base-sdk"]
+	path = editor-packages/base-sdk
+	url = https://github.com/gridaco/base-sdk

.vscode/settings.json

@@ -11,6 +11,6 @@
     "**/node_modules": true,
     "**/bower_components": true,
     "**/*.code-search": true,
-    "yarn.lock": true
+    "**/yarn.lock": true
   }
 }

editor/babel.config.js

@@ -10,8 +10,8 @@ module.exports = {
           components: "./components",
           layouts: "./layouts",
           utils: "./utils",
-          pages: "./pages",
           public: "./public",
+          hooks: "./hooks",
         },
       },
     ],

editor/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-design";
 export * from "./use-async-effect";
+export * from "./use-auth-state";

editor/hooks/use-auth-state.ts

@@ -0,0 +1,13 @@
+import { useAuthState as useGridaAuthState } from "@base-sdk-fp/auth-components-react";
+import { useEffect, useState } from "react";
+
+export function useAuthState() {
+  const [authState, setAuthState] = useState<any>();
+  const gridaauthstate = useGridaAuthState();
+
+  useEffect(() => {
+    setAuthState(gridaauthstate);
+  }, [gridaauthstate]);
+
+  return authState;
+}

editor/next.config.js

@@ -2,6 +2,10 @@ const withTM = require("next-transpile-modules")([
   // region @editor-app
   "@editor-app/live-session",
 
+  // region editor-submodule deps
+  "@base-sdk-fp/auth",
+  "@base-sdk-fp/auth-components-react",
+
   // -----------------------------
   // region @designto-code
   "@designto/config",

editor/package.json

@@ -54,4 +54,4 @@
     "raw-loader": "^4.0.2",
     "typescript": "^4.2.3"
   }
-}
+}

editor/pages/_app.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Global, css } from "@emotion/react";
 import styled from "@emotion/styled";
 import Head from "next/head";
-import DevTools from "../layout/dev-tools";
+import DevTools from "../layouts/dev-tools";
 
 function GlobalCss() {
   return (

editor/pages/_development/editor-ui/workspace-default.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { LayerHierarchy } from "../../../components/editor-hierarchy";
-import { DefaultEditorWorkspaceLayout } from "../../../layout/default-editor-workspace-layout";
-import { WorkspaceContentPanel } from "../../../layout/panel";
-import { WorkspaceBottomPanelDockLayout } from "../../../layout/panel/workspace-bottom-panel-dock-layout";
-import { WorkspaceContentPanelGridLayout } from "../../../layout/panel/workspace-content-panel-grid-layout";
+import { DefaultEditorWorkspaceLayout } from "../../../layouts/default-editor-workspace-layout";
+import { WorkspaceContentPanel } from "../../../layouts/panel";
+import { WorkspaceBottomPanelDockLayout } from "../../../layouts/panel/workspace-bottom-panel-dock-layout";
+import { WorkspaceContentPanelGridLayout } from "../../../layouts/panel/workspace-content-panel-grid-layout";
 
 export default function WorkspaceDefaultLayoutPage_DEV() {
   return (

editor/pages/authenticate/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useAuthState } from "../../hooks";
+import { useRouter } from "next/router";
+
+export default function AuthenticationPage() {
+  const router = useRouter();
+  const authstate = useAuthState();
+  switch (authstate) {
+    case "signedin": {
+      router.back();
+      break;
+    }
+    case "expired":
+    case "unauthorized": {
+      return (
+        <>
+          <button
+            onClick={() => {
+              router.replace(
+                "https://accounts.grida.co/signin?redirect_uri=" +
+                  window.location.href
+              );
+            }}
+          >
+            sign in
+          </button>
+        </>
+      );
+    }
+    case "loading":
+    default: {
+      return (
+        <>
+          <h6>Loading...</h6>
+        </>
+      );
+    }
+  }
+}

editor/pages/figma/inspect-component.tsx

@@ -10,13 +10,13 @@ import {
   WidgetTree,
   WidgetTreeLegend,
 } from "../../components/visualization/json-visualization/json-tree";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
-import LoadingLayout from "../../layout/loading-overlay";
+import { DefaultEditorWorkspaceLayout } from "../../layouts/default-editor-workspace-layout";
+import LoadingLayout from "../../layouts/loading-overlay";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../../layout/panel";
-import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
+} from "../../layouts/panel";
+import { WorkspaceBottomPanelDockLayout } from "../../layouts/panel/workspace-bottom-panel-dock-layout";
 import { useDesign } from "../../hooks";
 import { make_instance_component_meta } from "@code-features/component";
 

editor/pages/figma/inspect-frame.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { MonacoEditor } from "../../components/code-editor";
 import { SceneNode } from "@design-sdk/figma-types";
 import { useDesign } from "../../hooks";
-import LoadingLayout from "../../layout/loading-overlay";
+import LoadingLayout from "../../layouts/loading-overlay";
 
 /**
  * shows layout related data as json in a monaco editor

editor/pages/figma/inspect-raw.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MonacoEditor } from "../../components/code-editor";
 import { useDesign } from "../../hooks";
-import LoadingLayout from "../../layout/loading-overlay";
+import LoadingLayout from "../../layouts/loading-overlay";
 
 /**
  * shows full node data as json in a monaco editor

editor/pages/figma/to-flutter.tsx

@@ -9,16 +9,16 @@ import {
 import { output } from "@designto/config";
 import { tokenize } from "@designto/token";
 import { utils_dart } from "../../utils";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
+import { DefaultEditorWorkspaceLayout } from "../../layouts/default-editor-workspace-layout";
 import { LayerHierarchy } from "../../components/editor-hierarchy";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../../layout/panel";
+} from "../../layouts/panel";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
 import { useDesign } from "../../hooks";
 import { CodeEditor, MonacoEditor } from "../../components/code-editor";
-import LoadingLayout from "../../layout/loading-overlay";
+import LoadingLayout from "../../layouts/loading-overlay";
 
 export default function FigmaToFlutterPage() {
   const design = useDesign({ type: "use-router" });

editor/pages/figma/to-react.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
+import { DefaultEditorWorkspaceLayout } from "../../layouts/default-editor-workspace-layout";
 import { LayerHierarchy } from "../../components/editor-hierarchy";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../../layout/panel";
-import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
+} from "../../layouts/panel";
+import { WorkspaceBottomPanelDockLayout } from "../../layouts/panel/workspace-bottom-panel-dock-layout";
 import { WidgetTree } from "../../components/visualization/json-visualization/json-tree";
 import { CodeEditor } from "../../components/code-editor";
 import { tokenize } from "@designto/token";

editor/pages/figma/to-token.tsx

@@ -5,18 +5,18 @@ import {
   JsonTree,
   WidgetTree,
 } from "../../components/visualization/json-visualization/json-tree";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
+import { DefaultEditorWorkspaceLayout } from "../../layouts/default-editor-workspace-layout";
 import { LayerHierarchy } from "../../components/editor-hierarchy";
-import { WorkspaceContentPanelGridLayout } from "../../layout/panel/workspace-content-panel-grid-layout";
-import { WorkspaceContentPanel } from "../../layout/panel";
-import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
+import { WorkspaceContentPanelGridLayout } from "../../layouts/panel/workspace-content-panel-grid-layout";
+import { WorkspaceContentPanel } from "../../layouts/panel";
+import { WorkspaceBottomPanelDockLayout } from "../../layouts/panel/workspace-bottom-panel-dock-layout";
 import { useDesign } from "../../hooks";
 import {
   ImageRepository,
   MainImageRepository,
 } from "@design-sdk/core/assets-repository";
 import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
-import LoadingLayout from "../../layout/loading-overlay";
+import LoadingLayout from "../../layouts/loading-overlay";
 
 export default function FigmaToReflectWidgetTokenPage() {
   const design = useDesign({ type: "use-router" });

editor/pages/index.tsx

@@ -5,8 +5,8 @@ import { RecentDesignCardList } from "../components/recent-design-card";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../layout/panel";
-import { DefaultEditorWorkspaceLayout } from "../layout/default-editor-workspace-layout";
+} from "../layouts/panel";
+import { DefaultEditorWorkspaceLayout } from "../layouts/default-editor-workspace-layout";
 import { SideNavigation } from "../components/side-navigation";
 
 export default function Home() {

editor/pages/live/index.tsx

@@ -1,16 +1,15 @@
 import React, { useState, useEffect } from "react";
 import Pusher from "pusher-js";
-import LoadingLayout from "../../layout/loading-overlay";
-import { useDesign } from "../../hooks";
+import LoadingLayout from "layouts/loading-overlay";
+import { useDesign } from "hooks";
 import { designToCode, Result } from "@designto/code";
 import { TargetNodeConfig } from "../../query/target-node";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../../layout/panel";
-import { PreviewAndRunPanel } from "../../components/preview-and-run";
-import { CodeEditor } from "../../components/code-editor";
+} from "layouts/panel";
+import { PreviewAndRunPanel } from "components/preview-and-run";
+import { CodeEditor } from "components/code-editor";
 import {
   ImageRepository,
   MainImageRepository,
@@ -23,6 +22,7 @@ import {
   flutter_presets,
   vanilla_presets,
 } from "@grida/builder-config-preset";
+import {} from "hooks";
 
 const _base_url =
   "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc";
@@ -142,7 +142,6 @@ function ResultProxyPage({ design }: { design: TargetNodeConfig }) {
   }
 
   const { code, scaffold, name: componentName } = result;
-  console.log("preview", preview);
   return (
     <WorkspaceContentPanelGridLayout>
       <WorkspaceContentPanel disableBorder>

editor/pages/to-code/index.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useState } from "react";
 import { designToCode, Result } from "@designto/code";
 import { useDesign } from "../../hooks";
 import styled from "@emotion/styled";
-import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
+import { DefaultEditorWorkspaceLayout } from "../../layouts/default-editor-workspace-layout";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
-} from "../../layout/panel";
-import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
+} from "../../layouts/panel";
+import { WorkspaceBottomPanelDockLayout } from "../../layouts/panel/workspace-bottom-panel-dock-layout";
 import { CodeEditor } from "../../components/code-editor";
 import {
   react_presets,
@@ -23,7 +23,7 @@ import {
   ImageRepository,
   MainImageRepository,
 } from "@design-sdk/core/assets-repository";
-import LoadingLayout from "../../layout/loading-overlay";
+import LoadingLayout from "../../layouts/loading-overlay";
 import { DesignInput } from "@designto/config/input";
 import { ClearRemoteDesignSessionCache } from "../../components/clear-remote-design-session-cache";
 import { WidgetTree } from "../../components/visualization/json-visualization/json-tree";

editor/tsconfig.json

@@ -12,7 +12,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "components/*": ["./components/*"],
+      "layout/*": ["./layouts/*"],
+      "utils/*": ["./utils/*"],
+      "public/*": ["./public/*"],
+      "hooks/*": ["./hooks/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -7,6 +7,7 @@
     "workspaces": [
         "editor",
         "editor-packages/*",
+        "editor-packages/base-sdk/_firstparty/*",
         "packages/*",
         "ui/*",
         "packages/reflect-core/packages/*",