Community Readonly Editor

editor-packages/editor-figma-file/repository.ts

@@ -39,7 +39,11 @@ export class FigmaDesignRepository {
     if (existing) {
       // everytime the file is consumed consider it as used, we upsert the file so that the lastUsed can be updated.
       metastore.upsert(existing.key, existing);
-      yield { ...existing, __initial: false } as TFetchFileForApp;
+      yield {
+        ...existing,
+        __initial: false,
+        __type: "file-fetched-for-app",
+      } as TFetchFileForApp;
     }
 
     const _iter = fetch.fetchFile({ file: filekey, auth: this.auth });

editor/components/home/home-side-bar-tree.tsx

@@ -89,6 +89,12 @@ const preset_pages: PresetPage[] = [
       },
     ],
   },
+  {
+    id: "/community/files",
+    name: "Community Files",
+    path: "/community/files",
+    depth: 0,
+  },
 ];
 
 export function HomeSidebarTree() {

editor/components/prompt-banner-signin-to-continue/index.tsx

@@ -1,9 +1,10 @@
 import styled from "@emotion/styled";
-import React, { useEffect } from "react";
+import React from "react";
 import { useAuthState } from "hooks";
 import { useRouter } from "next/router";
-
-const __is_dev = process.env.NODE_ENV == "development";
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+const __is_prod = process.env.NODE_ENV == "production";
+const __overide_show_if_dev = true;
 
 export function SigninToContinuePrmoptProvider({
   children,
@@ -17,7 +18,9 @@ export function SigninToContinuePrmoptProvider({
   return (
     <>
       {children}
-      {!__is_dev && shouldshow && <SigninToContinueBannerPrmopt />}
+      {((__is_prod && shouldshow) || (!__is_prod && __overide_show_if_dev)) && (
+        <SigninToContinueBannerPrmopt />
+      )}
     </>
   );
 }
@@ -31,91 +34,93 @@ export function SigninToContinueBannerPrmopt() {
 
   return (
     <Positioner>
-      <Contents>
-        <Desc>Ready to build your apps with Grida?</Desc>
-        <NextButton onClick={onnextclick}>Next</NextButton>
-      </Contents>
+      <Container>
+        <h5>Ready to build your Apps with Grida?</h5>
+        <CTAButton onClick={onnextclick}>
+          Sign Up
+          <ArrowRightIcon width={20} height={20} />
+        </CTAButton>
+      </Container>
     </Positioner>
   );
 }
 
 const Positioner = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-
   position: fixed;
   bottom: 0;
-  left: 0px;
-  right: 0px;
+  left: 0;
+  right: 0;
+  padding: 40px 40px;
 
-  background-color: #fff;
   z-index: 998;
-
+  display: flex;
   justify-content: center;
   flex-direction: column;
-  align-items: end;
+  align-items: center;
   box-sizing: border-box;
-  padding: 16px 20px;
 
   a {
     margin: 0px 2px;
     text-decoration: underline;
   }
 `;
 
-const Contents = styled.div`
+const Container = styled.div`
+  width: 100%;
+  max-width: 600px;
+  min-width: 400px;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(21px);
+  color: white;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   flex-direction: row;
   align-items: center;
   flex: none;
+  padding: 16px 24px;
+  border-radius: 48px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
   gap: 48px;
-  width: 439px;
-  height: 59px;
   box-sizing: border-box;
-`;
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.24);
 
-const Desc = styled.span`
-  color: rgba(0, 0, 0, 1);
-  text-overflow: ellipsis;
-  font-size: 16px;
-  font-family: "Helvetica Neue", sans-serif;
-  font-weight: 500;
-  text-align: center;
+  h5 {
+    color: white;
+    margin: 0;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
 `;
 
-const NextButton = styled.button`
+const CTAButton = styled.button`
+  cursor: pointer;
   display: flex;
   justify-content: center;
   flex-direction: row;
   align-items: center;
   flex: none;
-  gap: 10px;
-  border-radius: 4px;
-  width: 116px;
-  height: 59px;
-  background-color: rgba(45, 66, 255, 1);
+  gap: 4px;
+  border-radius: 24px;
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.4);
   box-sizing: border-box;
-  padding: 10px 10px;
+  padding: 8px 16px;
 
   outline: none;
-  border: none;
 
-  color: rgba(255, 255, 255, 1);
+  color: white;
   text-overflow: ellipsis;
-  font-size: 21px;
-  font-family: "Helvetica Neue", sans-serif;
-  font-weight: 400;
+  font-weight: 500;
   text-align: left;
 
   :hover {
     opacity: 0.9;
+    scale: 1.02;
   }
 
   :focus {
     opacity: 0.9;
   }
+
+  transition: all 0.1s ease-in-out;
 `;

editor/core/reducers/editor-reducer.ts

@@ -21,7 +21,7 @@ import type {
   EnterIsolatedInspectionAction,
   ExitIsolatedInspectionAction,
 } from "core/actions";
-import { EditorState } from "core/states";
+import { EditorState, EssentialWorkspaceInfo } from "core/states";
 import { NextRouter, useRouter } from "next/router";
 import { CanvasStateStore } from "@code-editor/canvas/stores";
 import q from "@design-sdk/query";
@@ -31,8 +31,6 @@ import { nanoid } from "nanoid";
 import { last_page_by_mode } from "core/stores";
 import { track } from "@code-editor/analytics";
 
-const _editor_path_name = "/files/[key]/";
-
 const _DEV_CLEAR_LOG = false;
 
 const clearlog = (by: string) => {
@@ -42,7 +40,10 @@ const clearlog = (by: string) => {
   }
 };
 
-export function editorReducer(state: EditorState, action: Action): EditorState {
+export function editorReducer(
+  state: EditorState & EssentialWorkspaceInfo,
+  action: Action
+): EditorState {
   const router = useRouter();
   const filekey = state.design.key;
 
@@ -395,10 +396,8 @@ function update_route(
 
   // remove undefined fields
   Object.keys(q).forEach((k) => q[k] === undefined && delete q[k]);
-
   router.push(
     {
-      pathname: _editor_path_name,
       query: { ...router.query, ...q },
     },
     undefined,

editor/core/states/workspace-initial-state.ts

@@ -1,5 +1,5 @@
 import { EditorSnapshot } from "./editor-state";
-import { WorkspaceState } from "./workspace-state";
+import { WorkspaceState, EssentialWorkspaceInfo } from "./workspace-state";
 import {
   createInitialHistoryState,
   createPendingHistoryState,
@@ -23,7 +23,7 @@ export function merge_initial_workspace_state_with_editor_snapshot(
   };
 }
 
-export function create_initial_pending_workspace_state(): WorkspaceState {
+export function create_initial_pending_workspace_state({}: EssentialWorkspaceInfo): WorkspaceState {
   return {
     taskQueue: {
       isBusy: false,

editor/core/states/workspace-state.ts

@@ -1,7 +1,11 @@
 import { config } from "@grida/builder-config";
 import { HistoryState } from "core/states/history-state";
 
-export interface WorkspaceState {
+export interface EssentialWorkspaceInfo {
+  // Add workspace seed data here, which cannot be automatically filled on initial state.
+}
+
+export interface WorkspaceState extends EssentialWorkspaceInfo {
   history: HistoryState;
   /**
    * hovered layer; single or none.

editor/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from "./use-design";
+export * from "./use-figma";
 export * from "./use-async-effect";
 export * from "./use-auth-state";
 export * from "./use-target-node";

editor/hooks/use-figma/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-figma";
+export * from "./use-figma-community";

editor/hooks/use-figma/types.ts

@@ -0,0 +1,37 @@
+import type { NextRouter } from "next/router";
+import type { TFetchFileForApp } from "@editor/figma-file";
+
+export type UseFigmaInput =
+  | (UseFigmaFromRouter & UseFigmaOptions)
+  | (UseFimgaFromUrl & UseFigmaOptions)
+  | (UseFigmaFromFileNodeKey & UseFigmaOptions);
+
+export interface UseFigmaOptions {
+  use_session_cache?: boolean;
+}
+
+export interface UseFigmaFromRouter {
+  type: "use-router";
+  router?: NextRouter;
+}
+
+export interface UseFimgaFromUrl {
+  type: "use-url";
+  url: string;
+}
+
+export interface UseFigmaFromFileNodeKey {
+  type: "use-file-node-id";
+  file: string;
+  node: string;
+}
+
+export type TUseDesignFile =
+  | TFetchFileForApp
+  | {
+      __type: "error";
+      reason: "no-auth" | "unauthorized";
+      cached?: TFetchFileForApp;
+    }
+  | { __type: "error"; reason: "no-file" }
+  | { __type: "loading" };

editor/hooks/use-figma/use-figma-community.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+import type { TUseDesignFile, UseFigmaInput, UseFimgaFromUrl } from "./types";
+import { Client } from "@figma-api/community";
+import { TargetNodeConfig } from "query/target-node";
+
+const client = Client();
+
+/**
+ * Figma Community File Retrieval Hook
+ * This does not use...
+ * 1. local store since the api response is static and cached by browser.
+ * 2. procedual loading since whole file is archived at the server.
+ * @returns
+ */
+export function useFigmaCommunityFile({ id }: { id: string }) {
+  const [file, setFile] = useState<TUseDesignFile>({
+    __type: "loading",
+  });
+
+  useEffect(() => {
+    // load with community client
+    client.file(id).then(({ data }) => {
+      setFile({
+        ...data,
+        key: id,
+        __initial: true, // ?
+        __type: "file-fetched-for-app",
+      });
+    });
+  }, [id]);
+
+  //
+  return file;
+}
+
+export function useFigmaCommunityNode() {
+  const [design, setDesign] = useState<TargetNodeConfig>(null);
+  throw new Error("not implemented");
+  //
+}