Merge pull request #176 from gridaco/staging

Assistant 2021 Oct Release

CHANGELOG.md

@@ -28,6 +28,18 @@
 - [Flutter] Poligon Node support with XImage (svg)
 - [Lint] Primal naming & grouping linting for better code export quality. this is tracked sperately on [lint](https://github.com/bridgedxyz/lint)
 
+## (Draft) [2021.11.1] - 2021-12-1
+
+> Live session support with experimental components support
+
+- Assistant Live - [#174](https://github.com/gridaco/assistant/pull/174)
+
+## [2021.11.1] - 2021-12-1
+
+- Add Vanilla Html codegen support (preview feature)
+- Fix ReactJS Codegen bugs
+- Fix Icons loading failure with 200 (caused by cors)
+
 ## [2021.9.1] - 2021-10-11
 
 > 2021.9 is a cold release
@@ -42,6 +54,10 @@
 - prevent thread lock on big screen
 - prevent thread lock on too many remote component screen
 
+### [2021.9.1f1] - 2021-10-26
+
+- Fix icons loader cors issue
+
 ## [2021.8.0b] - 2021-8-26
 
 **What's new**

app/lib/components/animated/index.ts

@@ -0,0 +1 @@
+export * from "./reveal-when-visible";

app/lib/components/animated/reveal-when-visible.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { useInView } from "react-intersection-observer";
+import { motion } from "framer-motion";
+
+/**
+ * A general component that can be used to animate a component when it is visible.
+ * @returns
+ */
+export function RevealWhenVisible({
+  children,
+  initialY = 0,
+  initialOpacity = 0,
+  duration = 0.5,
+}: {
+  children: React.ReactNode;
+  initialY?: number;
+  initialOpacity?: number;
+  duration?: number;
+}) {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    rootMargin: "-100px 0px",
+  });
+
+  const variants = {
+    visible: {
+      y: 0,
+      opacity: 1,
+    },
+    hidden: {
+      y: initialY,
+      opacity: initialOpacity,
+    },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial="hidden"
+      variants={variants}
+      animate={inView ? "visible" : "hidden"}
+      transition={{
+        duration: duration,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}

app/lib/components/navigation/route-back-button.tsx

@@ -3,11 +3,11 @@ import styled from "@emotion/styled";
 import { useHistory } from "react-router";
 import BackArrow from "@assistant/icons/back-arrow";
 
-export function RouteBackButton() {
+export function RouteBackButton({ onClick }: { onClick?: () => void }) {
   const history = useHistory();
 
   const close = () => {
-    history.goBack();
+    onClick ? onClick() : history.goBack();
   };
 
   return (

app/lib/main/index.tsx

@@ -25,6 +25,7 @@ import { CodeScreen } from "@app/design-to-code";
 import { AboutScreen } from "../pages/about";
 import { SigninScreen } from "@app/auth";
 import { ToolboxHome } from "@app/toolbox";
+import { LiveSessionPage } from "@app/live";
 import { DesignTextCdoeSyntaxHighligherScreen } from "@app/design-text-code-syntax-highlight";
 // endregion screens import
 
@@ -67,6 +68,8 @@ function Screen(props: { screen: WorkScreen }) {
       return <IconsScreen />;
     case WorkScreen.lint:
       return <LintScreen />;
+    case WorkScreen.live:
+      return <LiveSessionPage />;
     case WorkScreen.dev:
       return <ToolboxScreen />;
     case WorkScreen.g11n:

app/lib/routing/layout-preference.ts

@@ -11,7 +11,8 @@ export function getWorkmodeTabLayout(workspaceMode: WorkMode): TabLayout {
         return [
           WorkScreen.code,
           WorkScreen.component,
-          WorkScreen.layout,
+          WorkScreen.live,
+          // WorkScreen.layout,
           WorkScreen.lint,
         ];
       case WorkMode.design:
@@ -47,6 +48,8 @@ export function workScreenToName(appMode: WorkScreen): string {
       return "react";
     case WorkScreen.component:
       return "component";
+    case WorkScreen.live:
+      return "live";
     case WorkScreen.layout:
       return "layout";
     case WorkScreen.tool_home:

app/lib/routing/pages.ts

@@ -34,6 +34,12 @@ const page_code_lint: PageConfig = {
   path: "/code/lint",
 };
 
+const page_live_session: PageConfig = {
+  id: WorkScreen.live,
+  title: "Live",
+  path: "/code/live",
+};
+
 const page_design_icon: PageConfig = {
   id: WorkScreen.icon,
   title: "Icon",
@@ -131,6 +137,7 @@ const all_pages: PageConfig[] = [
   page_code_preview,
   page_code_component,
   page_code_lint,
+  page_live_session,
   // standalones
   page_signup,
   page_about,

app/lib/routing/release-visibility-preference.ts

@@ -13,6 +13,7 @@ const SCREEN_VISIBILITY_PREFERENCE: Map<WorkScreen, ReleaseChannel> = new Map([
   [WorkScreen.component, "beta"],
   [WorkScreen.layout, "beta"],
   [WorkScreen.icon, "release"],
+  [WorkScreen.live, "beta"],
   [WorkScreen.lint, "release"],
   [WorkScreen.g11n, "beta"],
   [WorkScreen.exporter, "beta"],

app/lib/routing/work-screen.ts

@@ -9,6 +9,7 @@ export enum WorkScreen {
   component = "component",
   layout = "layout",
   icon = "icon",
+  live = "live",
   lint = "lint",
   g11n = "g11n",
   dev = "dev",

app/package.json

@@ -38,6 +38,7 @@
         "prism-react-renderer": "^1.1.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-intersection-observer": "^8.32.2",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "recoil": "^0.0.13",

figma-core/code-thread/resize-screen.ts

@@ -1,5 +1,7 @@
 import { addEventHandler } from "./message-handler";
 
+/// Note.
+/// Figma's min size is 100x100. size smaller than 100x100 will be ignored by figma, the full size will be (w100)x(h41+100) where as 41 is a default handle's size
 export function __register__() {
   addEventHandler("resize", (msg) => {
     const MIN_WIDTH = 320;

figma-core/index.ts

@@ -46,14 +46,14 @@ figma.on("currentpagechange", () => {
 // MAIN INITIALIZATION
 import { showUI } from "./code-thread/show-ui";
 import { provideFigma } from "@design-sdk/figma";
-import { createPrimaryVisualStorePageIfNonExists } from "./physical-visual-store/page-manager/craete-page-if-non-exist";
+
 function main() {
   MainImageRepository.instance = new ImageRepositories();
   provideFigma(figma);
   showUI();
-
   // disabled on staging ----
   // create primary visual store
+  // import { createPrimaryVisualStorePageIfNonExists } from "./physical-visual-store/page-manager/craete-page-if-non-exist";
   // createPrimaryVisualStorePageIfNonExists();
   // ------------------------
 }

figma/CONTRIBUTING.md

@@ -12,3 +12,11 @@
 ## Good to know - Somethings leart from mistakes
 
 - figma's node does return property until they are referenced
+
+## Clearing the cache
+
+Clearing the cache to work with figma plugin api storage. on MacOS,
+
+```sh
+rm -rf "$HOME/Library/Application Support/Figma/"{Desktop,DesktopProfile}
+```

figma/src/ui.tsx

@@ -69,7 +69,7 @@ export function LiteHostedAppConnector() {
           // style={{ zoom: "80%" }} // use this to zoom inner content
           width="100%"
           height={`${initialized ? "100%" : "0px"}`}
-          sandbox="allow-scripts allow-same-origin allow-popups"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-modals"
           frameBorder="0"
           allowFullScreen
           src={`${_host}/init-figma`} //?platform=figma

package.json

@@ -15,16 +15,15 @@
       "webdev",
       "xd",
       "packages/*",
-      "packages/reflect-core/packages/*",
       "packages/design-sdk/*",
       "packages/base-sdk/*",
       "packages/base-sdk/_firstparty/*",
       "packages/reflect-core/packages/*",
       "packages/design-to-code/packages/designto-*",
       "packages/design-to-code/packages/builder-*",
       "packages/design-to-code/packages/support-*",
-      "packages/design-to-code/packages/coli/packages/*",
-      "packages/design-to-code/packages/reflect-detection"
+      "packages/design-to-code/packages/reflect-detection",
+      "packages/design-to-code/externals/coli/packages/*"
     ]
   },
   "repository": "https://github.com/gridaco/assistant",

packages/_firstparty-analytics/index.ts

@@ -12,8 +12,6 @@ export function initialize() {
           .NEXT_PUBLIC_BRIDGED_FIRST_PARTY_ANALYTICS_PROXY_SERVICE_TOTP_SECRET
     );
 
-    analytics.initWithCors();
-
     // Emmit login event to mock user. (since user authentication is optional to initially use assistant.)
     analytics.event({
       name: "login",

packages/_firstparty-auth/index.ts

@@ -1,4 +1,4 @@
-import { __HOSTS } from "@base-sdk/core";
+import { cors, __HOSTS } from "@base-sdk/core";
 import {
   __auth_proxy,
   ProxyAuthenticationMode,
@@ -7,11 +7,20 @@ import {
 } from "@base-sdk-fp/auth";
 import { client_id } from "plugin-app";
 import { AuthStorage } from "./storage";
+import Axios from "axios";
 
 const PROXY_AUTH_REQUEST_SECRET =
   process.env.GRIDA_FIRST_PARTY_PROXY_AUTH_REQUEST_TOTP_SECRET ??
   process.env.NEXT_PUBLIC_GRIDA_FIRST_PARTY_PROXY_AUTH_REQUEST_TOTP_SECRET;
 
+// pre configuration - this is required
+__auth_proxy.api.preconfigure({
+  useRetry: true,
+  useCors: {
+    apiKey: process.env.NEXT_PUBLIC_CORS_GRIDA_API_KEY,
+  },
+});
+
 function _make_request(): AuthProxySessionStartRequest {
   return {
     appId: "co.grida.assistant",
@@ -69,3 +78,26 @@ export async function checkAuthSession(session: string): Promise<boolean> {
   }
   return success;
 }
+
+const secure_axios = async () => {
+  const axios = Axios.create({
+    baseURL: "https://accounts.services.grida.co",
+    headers: {
+      Authorization: `Bearer ${await getAccessToken()}`,
+    },
+  });
+  cors.useAxiosCors(axios, {
+    apikey: process.env.NEXT_PUBLIC_CORS_GRIDA_API_KEY,
+  });
+  return axios;
+};
+
+export async function getUserProfile() {
+  try {
+    const resp = await (await secure_axios()).get(`profile`);
+    return resp.data;
+  } catch (error) {
+    console.log("Error while fetching my profile ", error);
+    throw error;
+  }
+}

packages/_firstparty-auth/storage.ts

@@ -17,7 +17,19 @@ async function getAuthCredential(): Promise<Credential> {
   return PluginSdk.getItem(_ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY);
 }
 
+function saveProfile(profile) {
+  // usees localstorage
+  window.localStorage.setItem("my-profile", JSON.stringify(profile));
+}
+
+function getProfile() {
+  // usees localstorage
+  return JSON.parse(window.localStorage.getItem("my-profile"));
+}
+
 export const AuthStorage = {
   save: saveAuthCredential,
+  saveProfile: saveProfile,
   get: getAuthCredential,
+  getProfile: getProfile,
 };