Merge pull request #209 from gridaco/staging

[Draft] AI Assistant Feb Release
gridaco · Feb 28, 2023 · ae41350 · ae41350 · vercel · Feb 28, 2023
2 parents 46c6e2f + f869e84
commit ae41350
Show file tree

Hide file tree

Showing 73 changed files with 2,688 additions and 125 deletions.
diff --git a/app/lib/components/navigation/secondary-menu-dropdown.tsx b/app/lib/components/navigation/secondary-menu-dropdown.tsx
@@ -56,12 +56,12 @@ export function SecondaryMenuDropdown() {
         history.push("/toolbox/home");
       },
     },
-    {
-      id: WorkMode.settings,
-      name: WorkMode.settings,
-      stage: "development",
-      onSelect: () => {},
-    },
+    // {
+    //   id: WorkMode.settings,
+    //   name: WorkMode.settings,
+    //   stage: "development",
+    //   onSelect: () => {},
+    // },
     {
       id: "feedback-toggle",
       name: "Feedback",
@@ -78,6 +78,14 @@ export function SecondaryMenuDropdown() {
         history.push("/about");
       },
     },
+    {
+      id: "upgrade",
+      name: "Upgrade",
+      stage: "production",
+      onSelect: () => {
+        history.push("/upgrade");
+      },
+    },
   ].filter((m) => {
     if (process.env.NODE_ENV == "production") {
       return m.stage === "production";

diff --git a/app/lib/components/navigation/secondary-workmode-choice.tsx b/app/lib/components/navigation/secondary-workmode-choice.tsx
@@ -10,7 +10,7 @@ export function SecondaryWorkmodeChoice(props: {
 }
 
 const Title = styled.h6`
-  font-size: 21px;
+  font-size: 19px;
   font-weight: 700;
   line-height: 26px;
   letter-spacing: 0em;

diff --git a/app/lib/components/navigation/work-mode-button.tsx b/app/lib/components/navigation/work-mode-button.tsx
@@ -22,7 +22,7 @@ interface Props {
 const WorkmodeLabel = styled.h3<Props>`
   display: flex;
   text-transform: capitalize;
-  font-size: 21px;
+  font-size: 19px;
   letter-spacing: 0em;
   cursor: pointer;
   user-select: none;
@@ -47,7 +47,6 @@ const WorkmodeLabel = styled.h3<Props>`
           color: #cfcfcf;
 
           &:hover {
-            font-size: 21px;
             font-weight: 400;
             line-height: 25px;
             letter-spacing: 0em;

diff --git a/app/lib/components/navigation/workmode-screen-tabs.tsx b/app/lib/components/navigation/workmode-screen-tabs.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 function a11yProps(index: number) {
@@ -38,8 +39,7 @@ export function WorkmodeScreenTabs(props: {
         },
       }}
       style={{
-        marginLeft: "-16px",
-        marginRight: "16px",
+        marginLeft: -12,
       }}
     >
       {layout.map((v, i) => {
@@ -59,29 +59,28 @@ export function WorkmodeScreenTabs(props: {
   return <>{tabs}</>;
 }
 
+const basestyle = css`
+  min-width: fit-content;
+  max-width: fit-content;
+  width: fit-content;
+  font-size: 13px;
+  line-height: 17px;
+  padding-top: 0px;
+`;
+
 const StyledTab = styled(Tab)`
   // for reset @material-ui style
   text-transform: capitalize !important;
 
   &.root {
-    min-width: fit-content;
-    max-width: fit-content;
-    width: fit-content;
-    padding: 18px 16px;
-    font-size: 14px;
+    ${basestyle}
     font-weight: 400 !important;
-    line-height: 17px;
-    color: #adaeb2;
+    color: #8e8e8e;
   }
 
   &.selected {
-    min-width: fit-content;
-    max-width: fit-content;
-    width: fit-content;
-    padding: 18px 16px;
-    font-size: 14px;
+    ${basestyle}
     font-weight: 700 !important;
-    line-height: 17px;
     color: #151617;
   }
 `;
diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx
@@ -16,15 +16,18 @@ import { ComponentViewScreen } from "@app/component-manage";
 import { LintScreen } from "@app/design-lint";
 import { PreviewScreen } from "@app/design-preview";
 import { IconsScreen } from "@app/icons-loader";
+import { PhotoScreen } from "@app/photo-loader";
 import { MetaEditorScreen, BatchMetaEditor } from "@app/meta-editor";
 import { ExporterScreen } from "@app/export-scene-as-json";
 import { DataMapperScreen } from "@app/data-mapper";
+import { CopywriterScreen } from "@app/copywriter";
 import { GlobalizationScreen } from "@app/i18n";
 import { ToolboxScreen } from "../pages/tool-box";
 import { FontReplacerScreen } from "@toolbox/font-replacer";
 import { CodeScreen } from "@app/design-to-code";
 import { AboutScreen } from "../pages/about";
 import { SigninScreen } from "@app/auth";
+import { UpgradePage } from "@assistant-fp/early-access";
 import { ToolboxHome } from "@app/toolbox";
 import { LiveSessionPage } from "@app/live";
 import { DesignTextCdoeSyntaxHighligherScreen } from "@app/design-text-code-syntax-highlight";
@@ -68,6 +71,10 @@ function Screen(props: { screen: WorkScreen }) {
       return <PreviewScreen />;
     case WorkScreen.icon:
       return <IconsScreen />;
+    case WorkScreen.photo:
+      return <PhotoScreen />;
+    case WorkScreen.copy:
+      return <CopywriterScreen />;
     case WorkScreen.lint:
       return <LintScreen />;
     case WorkScreen.live:
@@ -94,6 +101,8 @@ function Screen(props: { screen: WorkScreen }) {
       return <DesignTextCdoeSyntaxHighligherScreen />;
     case WorkScreen.signin:
       return <SigninScreen />;
+    case WorkScreen.upgrade:
+      return <UpgradePage />;
     default:
       return <div>Not found</div>;
   }
@@ -233,14 +242,17 @@ function RouterTabNavigationApp(props) {
   const path = "/" + workmode + "/" + work;
   useEffect(() => {
     const _page_config = get_page_config_by_path(path);
-
-    loadLayout().then((l) =>
-      setSavedLayout({
-        ...l,
-        currentWorkmode: workmode,
-        currentWork: _page_config.id,
-      })
-    );
+    if (_page_config) {
+      loadLayout().then((l) => {
+        setSavedLayout({
+          ...l,
+          currentWorkmode: workmode,
+          currentWork: _page_config.id,
+        });
+      });
+    } else {
+      throw `${path} is not registered`;
+    }
   }, []);
 
   return <>{savedLayout && <TabNavigationApp savedLayout={savedLayout} />}</>;

diff --git a/app/lib/routing/layout-preference.ts b/app/lib/routing/layout-preference.ts
@@ -19,8 +19,10 @@ export function getWorkmodeTabLayout(workspaceMode: WorkMode): TabLayout {
         return [
           WorkScreen.preview,
           WorkScreen.icon,
-          WorkScreen.layout,
+          WorkScreen.photo,
+          WorkScreen.copy,
           WorkScreen.lint,
+          WorkScreen.layout,
         ];
       case WorkMode.content:
         return [WorkScreen.g11n, WorkScreen.exporter];
@@ -45,6 +47,8 @@ export function workScreenToName(appMode: WorkScreen): string {
   switch (appMode) {
     case WorkScreen.about:
       return "about";
+    case WorkScreen.upgrade:
+      return "upgrade";
     case WorkScreen.code:
       return "code";
     case WorkScreen.code_flutter:
@@ -63,6 +67,10 @@ export function workScreenToName(appMode: WorkScreen): string {
       return "tools";
     case WorkScreen.icon:
       return "icon";
+    case WorkScreen.photo:
+      return "photo";
+    case WorkScreen.copy:
+      return "copy";
     case WorkScreen.lint:
       return "lint";
     case WorkScreen.exporter:

diff --git a/app/lib/routing/navigation-store/index.ts b/app/lib/routing/navigation-store/index.ts
@@ -12,11 +12,11 @@ export interface NavigationStoreState {
 
 const _default_state: NavigationStoreState = {
   workmodeSet: {
-    first: WorkMode.code,
-    second: WorkMode.design,
+    first: WorkMode.design,
+    second: WorkMode.code,
   },
-  currentWorkmode: WorkMode.code,
-  currentWork: WorkScreen.code,
+  currentWorkmode: WorkMode.design,
+  currentWork: WorkScreen.preview,
 };
 
 const __KEY = "app-navigation-full-layout";

diff --git a/app/lib/routing/pages.ts b/app/lib/routing/pages.ts
@@ -46,6 +46,18 @@ const page_design_icon: PageConfig = {
   path: "/design/icons",
 };
 
+const page_design_photo: PageConfig = {
+  id: WorkScreen.photo,
+  title: "Photo",
+  path: "/design/photos-loader",
+};
+
+const page_design_copywriter: PageConfig = {
+  id: WorkScreen.copy,
+  title: "Copy",
+  path: "/design/copywriter",
+};
+
 const page_design_layout: PageConfig = {
   id: WorkScreen.layout,
   title: "Layout",
@@ -125,6 +137,12 @@ const page_signup: PageConfig = {
   path: "/signin",
 };
 
+const page_early_access: PageConfig = {
+  id: WorkScreen.upgrade,
+  title: "Upgrade",
+  path: "/upgrade",
+};
+
 /**
  * list of all pages
  */
@@ -134,6 +152,8 @@ const all_pages: PageConfig[] = [
   page_design_preview,
   page_design_layout,
   page_design_icon,
+  page_design_photo,
+  page_design_copywriter,
   page_code_layout,
   page_code_preview,
   page_code_component,
@@ -142,6 +162,7 @@ const all_pages: PageConfig[] = [
   // standalones
   page_signup,
   page_about,
+  page_early_access,
   // tools
   page_toolbox_home,
   page_toolbox_data_mapper,
@@ -156,6 +177,7 @@ const all_pages: PageConfig[] = [
 export const standalone_pages: PageConfig[] = [
   page_signup,
   page_about,
+  page_early_access,
   // tools
   page_toolbox_home,
   page_toolbox_data_mapper,

diff --git a/app/lib/routing/primary-workmode-selector.ts b/app/lib/routing/primary-workmode-selector.ts
@@ -6,7 +6,7 @@ export interface PrimaryWorkmodeSet {
 
 export function getPrimaryWorkmodeSet(): PrimaryWorkmodeSet {
   return {
-    first: WorkMode.code,
-    second: WorkMode.design,
+    first: WorkMode.design,
+    second: WorkMode.code,
   };
 }
diff --git a/app/lib/routing/release-visibility-preference.ts b/app/lib/routing/release-visibility-preference.ts
@@ -10,9 +10,12 @@ export interface ReleaseVisibilityPreference {
 const SCREEN_VISIBILITY_PREFERENCE: Map<WorkScreen, ReleaseChannel> = new Map([
   [WorkScreen.code, "release"],
   [WorkScreen.about, "release"],
+  [WorkScreen.upgrade, "release"],
   [WorkScreen.component, "beta"],
   [WorkScreen.layout, "beta"],
   [WorkScreen.icon, "release"],
+  [WorkScreen.photo, "release"],
+  [WorkScreen.copy, "release"],
   [WorkScreen.preview, "release"],
   [WorkScreen.live, "beta"],
   [WorkScreen.lint, "release"],

diff --git a/app/lib/routing/work-screen.ts b/app/lib/routing/work-screen.ts
@@ -9,7 +9,9 @@ export enum WorkScreen {
   component = "component",
   preview = "preview",
   layout = "layout",
+  copy = "copy",
   icon = "icon",
+  photo = "photo",
   live = "live",
   lint = "lint",
   g11n = "g11n",
@@ -24,4 +26,5 @@ export enum WorkScreen {
   tool_batch_meta_editor = "tool_batch_meta_editor",
   tool_data_mapper = "tool_data_mapper",
   signin = "signin",
+  upgrade = "upgrade",
 }
diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts
@@ -1,5 +1,6 @@
 import { analyzeSelection, SelectionAnalysis } from "plugin-app/utils";
 import { convert } from "@design-sdk/figma";
+import type { ReflectSceneNode } from "@design-sdk/figma";
 import { Logger } from "logger";
 import { makeReference } from "@design-sdk/figma-node";
 import { runon } from "./runon";
@@ -106,7 +107,7 @@ export function onfigmaselectionchange() {
       targetNodeId = singleFigmaNodeSelection.id;
 
       // TODO: this will not trigger unless user deselects and re select the same node. currently node cache does not have expiry control.
-      let rnode;
+      let rnode: ReflectSceneNode;
       const _cached = FigmaNodeCache.getConverted(singleFigmaNodeSelection.id);
       if (_cached) {
         console.info("using cached", _cached.name);
@@ -123,6 +124,16 @@ export function onfigmaselectionchange() {
       // region sync selection event (search "selectionchange" for references)
       try {
         const data = makeReference(rnode);
+
+        // support text node (characters) =========
+        // FIXME: safely remove (migrate) this. (affected: @app/copywriter) - add a proper text support
+        if (rnode.type == "TEXT") {
+          if ("data" in rnode) {
+            data["characters"] = rnode.data;
+          }
+        }
+        // ========================================
+
         figma.ui.postMessage({
           type: "selectionchange",
           data: data,