Plugin host optimization

.gitignore

@@ -7,4 +7,7 @@ webdev/.eslintcache
 
 
 # we use yarn
-package-lock.json
+package-lock.json
+
+# log including yarn error log
+.log

README.md

@@ -6,8 +6,10 @@ title: Grida assistant for figma, sketch, xd
 
   <meta name="description" content="figma to flutter code exporter, lint your design. generate human level quality code from figma">
   <meta name="title" content="Grida assistant">
+
+![Grida assistant](./branding/assistant-cover-v2021.8.0.png)
 
-![Grida assistant](./branding/assistant-cover-v2021.2.0.png)
+<div style="text-align:center"><a href="https://www.producthunt.com/posts/grida-assistant-figma-2-flutter-react?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-grida-assistant-figma-2-flutter-react" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=310028&theme=light" alt="Grida Assistant - Figma 2 Flutter &React - Free & Opensource Design2Code Plugin with lot more features. | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a></div>
 
 # Grdia Assistant plugin (figma to flutter)
 
@@ -43,9 +45,12 @@ cd assistant
 # [REQUIRED] yarn will install dependencies, link packages, and generate compiled code of packages, so it can be referenced by root projects.
 yarn
 
-# [OPTIONAL 1] run figma plugin in dev mode
+# [OPTIONAL 1] run figma plugin in dev mode (use localhost server) (recommanded)
 yarn figma
 
+# [OPTIONAL 1-2] run figma plugin in dev mode (native)
+yarn figma-native
+
 # [OPTIONAL 2]run sketch plugin in dev mode
 yarn sketch
 

app/__plugin__init__/index.ts

@@ -0,0 +1,4 @@
+// DO NOT REMOVE THIS LINE
+import "../lib/pages/code/__plugin";
+import "@app/data-mapper/__plugin";
+import "@app/design-lint/__plugin";

app/lib/components/animation/animated-check-icon.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 
 import { motion } from "framer-motion";
-import { CheckIcon } from "../Icon/check-icon";
+import CheckIcon from "@assistant/icons/check";
 
 const variants = {
   "make-active": {

app/lib/components/animation/progress-bar.tsx → app/lib/components/animation/animated-progress-bar.tsx

@@ -7,7 +7,7 @@ interface IProgressBar {
   contorl?: () => void;
 }
 
-export function ProgressBar(props: IProgressBar) {
+export function AnimatedProgressBar(props: IProgressBar) {
   return (
     <Background>
       <AnimatePresence>

app/lib/components/comming-soon-template.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import React, { ReactNode } from "react";
-import { BlackButton } from "./style/global-style";
+import { BlackButtonStyle } from "@ui/core/button-style";
 
 interface Props {
   coverImage?: string;
@@ -50,6 +50,6 @@ const ButtonWrapper = styled.div`
 `;
 
 const Button = styled.button`
-  ${BlackButton}
+  ${BlackButtonStyle}
   width: calc(100vw - 32px);
 `;

app/lib/components/navigation/secondary-workmode-menu.tsx

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import React from "react";
-import { Column, Row } from "../style/global-style";
+import { Column, Row } from "@ui/core";
 import { SecondaryWorkmodeChoice } from "./secondary-workmode-choice";
+
 export function SecondaryWorkmodeMenu<T extends string>(props: {
   menus: {
     id: T;

app/lib/components/box-tab.tsx → app/lib/components/storybook-screen.tsx

@@ -1,6 +1,6 @@
 import Button from "@material-ui/core/Button";
 import * as React from "react";
-import { BoxDirectoryInput } from "./box-directory-input";
+// import { BoxDirectoryInput } from "./box-directory-input";
 
 const TEST_STORYBOOK_ROOT =
   "https://5f7d1f04988db70022c94c9a-bxsgusmnlc.chromatic.com";
@@ -39,7 +39,7 @@ export class BoxTab extends React.Component {
         <div />
         <Button onClick={this.onClickOpenStorybook}>open in storybook</Button>
         <Button onClick={this.onClickOpenGithub}>open in github</Button>
-        <BoxDirectoryInput />
+        {/* <BoxDirectoryInput /> */}
         <div />
         <h6>Box section end</h6>
       </div>

app/lib/components/upload-steps.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
-import { BlackButton, TransparencyButton } from "./style/global-style";
+import {
+  BlackButtonStyle,
+  TransparentButtonStyle,
+} from "@ui/core/button-style";
 import { Button } from "@material-ui/core";
-import { ProgressBar } from "./animation/progress-bar";
+import { AnimatedProgressBar } from "./animation/animated-progress-bar";
 import { AnimatedCheckIcon } from "./animation/animated-check-icon";
 import { motion } from "framer-motion";
-import { Preview } from ".";
-import { CheckIcon } from "./Icon/check-icon";
+import { Preview } from "@ui/previewer";
+import CheckIcon from "@assistant/icons/check";
 
 const step = [
   "converting design to universal format",
@@ -40,7 +43,7 @@ export function UploadSteps() {
   return (
     <>
       <Preview auto />
-      {isLoading && <ProgressBar contorl={animateHandle} />}
+      {isLoading && <AnimatedProgressBar contorl={animateHandle} />}
       <InnerWrapper variants={fieldVariants} animate="make-active">
         {isLoading ? (
           <Loading>
@@ -148,11 +151,11 @@ const IconBox = styled.div`
 `;
 
 const CheckButton = styled(Button)`
-  ${BlackButton};
+  ${BlackButtonStyle};
   width: 100%;
 `;
 const UncheckButton = styled(Button)`
-  ${TransparencyButton}
+  ${TransparentButtonStyle}
   width: 100%;
   cursor: pointer;
   text-transform: initial;

app/lib/index.ts

@@ -1,2 +1 @@
-export * from "./components";
-export * from "./main"
+export * from "./main";

app/lib/main/index.tsx

@@ -1,30 +1,29 @@
 import React, { useState, useEffect } from "react";
 import "../app.css"; /** TODO: remove raw css usage. */
-import { initialize } from "../analytics";
+import { initialize as analytics_initialize } from "@assistant-fp/analytics";
 
 // UI COMPS
-import { EK_SET_APP_MODE } from "../constants/ek.constant";
+import { EK_SET_APP_MODE } from "@core/constant/ek.constant";
 import { PluginApp } from "plugin-app";
-import BatchMetaEditor from "../pages/tool-box/batch-meta-editor";
 import { useHistory, Switch, Route } from "react-router-dom";
+import type { TargetPlatform } from "@plugin-sdk/core";
 
 //
 // region screens import
-import { FontReplacerScreen } from "../pages/tool-box/font-replacer";
-import { ButtonMakerScreen } from "../pages/design/button-maker-screen";
-import { ComponentViewScreen } from "../pages/component-view";
+import { ButtonMakerScreen } from "@app/button-maker";
 import { LayoutViewScreen } from "../pages/layout-view";
-import { LintScreen } from "../pages/lint/lint-screen";
-import { GlobalizationScreen } from "../pages/g11n-screen";
-import { IconsScreen } from "../pages/icons-screen";
-import { CodeScreen } from "../pages/code/code-screen";
+import { ComponentViewScreen } from "@app/component-manage";
+import { LintScreen } from "@app/design-lint";
+import { IconsScreen } from "@app/icons-loader";
+import { MetaEditorScreen, BatchMetaEditor } from "@app/meta-editor";
+import { ExporterScreen } from "@app/export-scene-as-json";
+import { DataMapperScreen } from "@app/data-mapper";
+import { GlobalizationScreen } from "@app/i18n";
 import { ToolboxScreen } from "../pages/tool-box";
-import { MetaEditorScreen } from "../pages/tool-box/meta-editor";
-import { ExporterScreen } from "../pages/tool-box/exporter";
-import { DataMapperScreen } from "../pages/tool-box/data-mapper/data-mapper-screen";
-import { TargetPlatform } from "../utils/plugin-init/init-target-platform";
+import { FontReplacerScreen } from "@toolbox/font-replacer";
+import { CodeScreen } from "../pages/code/code-screen";
 import { AboutScreen } from "../pages/about";
-import Signin from "../pages/signin";
+import { SigninScreen } from "@app/auth";
 // endregion screens import
 //
 
@@ -50,7 +49,7 @@ import {
   SecondaryMenuDropdown,
 } from "../components/navigation";
 import styled from "@emotion/styled";
-import { Column, Row } from "../components/style/global-style";
+import { Column, Row } from "@ui/core";
 import { UploadSteps } from "../components/upload-steps";
 
 function Screen(props: { screen: WorkScreen }) {
@@ -86,7 +85,7 @@ function Screen(props: { screen: WorkScreen }) {
     case WorkScreen.scene_upload_steps_final:
       return <UploadSteps />;
     case WorkScreen.signin:
-      return <Signin />;
+      return <SigninScreen />;
     default:
       return <div>Not found</div>;
   }
@@ -260,16 +259,19 @@ export default function App(props: { platform: TargetPlatform }) {
 
     // region init analytics
     try {
-      initialize();
+      analytics_initialize();
     } catch (e) {
       console.warn("Analytics disabled", e);
     }
     // endregion init GA
   }, []);
 
   const Router = getDedicatedRouter();
+
+  const Loading = <></>;
+
   return (
-    <PluginApp platform={props.platform}>
+    <PluginApp loading={Loading} platform={props.platform}>
       {/* @ts-ignore */}
       <Router>
         <Switch>

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

@@ -10,7 +10,7 @@ export interface ReleaseVisibilityPreference {
 const SCREEN_VISIBILITY_PREFERENCE: Map<WorkScreen, ReleaseChannel> = new Map([
   [WorkScreen.code, "release"],
   [WorkScreen.about, "release"],
-  [WorkScreen.component, "release"],
+  [WorkScreen.component, "beta"],
   [WorkScreen.layout, "beta"],
   [WorkScreen.icon, "release"],
   [WorkScreen.lint, "release"],

app/lib/pages/about/index.tsx

@@ -1,32 +1,32 @@
 import React from "react";
 import styled from "@emotion/styled";
-import * as about from "../../about";
+import * as about from "./manifest";
 import { __auth_proxy, ProxyAuthenticationMode } from "@base-sdk-fp/auth";
 import { useHistory } from "react-router-dom";
 import BackArrowIcon from "@assistant/icons/back-arrow";
 import { PluginSdk } from "@plugin-sdk/app";
 const URLS = {
   logo_256:
     "https://bridged-service-static.s3-us-west-1.amazonaws.com/branding/logo/256.png",
-  github_assitant: "https://github.com/bridgedxyz/assistant",
-  github_bridged: "https://github.com/bridgedxyz",
-  homepage_bridged: "https://bridged.xyz/",
+  github_assitant: "https://github.com/gridaco/assistant",
+  github_grida: "https://github.com/gridaco",
+  homepage_grida: "https://grida.co/",
   /**
    * @todo
    */
   homepage_assitant: "N/A",
   report_issue:
-    "https://github.com/bridgedxyz/assistant/issues/new?assignees=&labels=&template=bug_report.md&title=%5BBug%5D",
+    "https://github.com/gridaco/assistant/issues/new?assignees=&labels=&template=bug_report.md&title=%5BBug%5D",
   feature_request:
-    "https://github.com/bridgedxyz/assistant/issues/new?assignees=&labels=&template=feature_request.md&title=FeatureRequest",
-  signup: "https://accounts.bridged.xyz/signup",
-  blog: "https://blog.bridged.xyz",
-  twitter: "https://twitter.com/bridgedxyz",
-  facebook: "https://www.facebook.com/bridged.xyz/",
+    "https://github.com/gridaco/assistant/issues/new?assignees=&labels=&template=feature_request.md&title=FeatureRequest",
+  signup: "https://accounts.grida.co/signup",
+  blog: "https://blog.grida.co",
+  twitter: "https://twitter.com/grida_co",
+  facebook: "https://www.facebook.com/grida.co/",
   youtube: "https://www.youtube.com/channel/UCgJO5apXl_pXRfTxNrkbEBw",
   slack:
-    "https://join.slack.com/t/bridgedxyz/shared_invite/zt-nmf59381-prFEqq032K~aWe_zOekUmQ",
-  instagram: "https://www.instagram.com/bridged.xyz/",
+    "https://join.slack.com/t/gridaco/shared_invite/zt-nmf59381-prFEqq032K~aWe_zOekUmQ",
+  instagram: "https://www.instagram.com/grida.co/",
 };
 
 export function AboutScreen() {
@@ -63,42 +63,42 @@ export function AboutScreen() {
           </MenuItem>
         </MenuSection>
         <MenuSection>
-          <MenuSectionTitleItem>More from Bridged</MenuSectionTitleItem>
+          <MenuSectionTitleItem>More from Grida</MenuSectionTitleItem>
           <MenuItem onClick={signIntoAssistant}>Signup / Signin</MenuItem>
           <MenuItem onClick={linkTo(URLS.blog)}>Medium</MenuItem>
-          <MenuItem onClick={linkTo(URLS.homepage_bridged)}>Homepage</MenuItem>
+          <MenuItem onClick={linkTo(URLS.homepage_grida)}>Homepage</MenuItem>
         </MenuSection>
       </MenuContainer>
       <FooterSocialContainer>
         <SocialIconButton
           src={_social_icon("antd-twitter-outlined")}
-          alt="bridged on twitter"
+          alt="Grida on twitter"
           onClick={linkTo(URLS.twitter)}
         />
         <SocialIconButton
           src={_social_icon("antd-youtube-default")}
-          alt="bridged on youtube"
+          alt="Grida on youtube"
           onClick={linkTo(URLS.youtube)}
         />
         <SocialIconButton
           src={_social_icon("antd-slack-circle-default")}
-          alt="bridged on slack"
+          alt="Grida on slack"
           onClick={linkTo(URLS.slack)}
         />
         <SocialIconButton
           src={_social_icon("mdi_facebook")}
-          alt="bridged on facebook"
+          alt="Grida on facebook"
           onClick={linkTo(URLS.facebook)}
         />
         <SocialIconButton
           src={_social_icon("antd-instagram-default")}
-          alt="bridged on instagram"
+          alt="Grida on instagram"
           onClick={linkTo(URLS.instagram)}
         />
         <SocialIconButton
           src={_social_icon("antd-github-default")}
-          alt="bridged on github"
-          onClick={linkTo(URLS.github_bridged)}
+          alt="Grida on github"
+          onClick={linkTo(URLS.github_grida)}
         />
       </FooterSocialContainer>
     </>

app/lib/about.ts → app/lib/pages/about/manifest.ts

@@ -1,4 +1,4 @@
 // const _package = require("../package.jsonn");
 export const name = "Grida Assistant";
-export const version = "2021.2.2f0"; /*_package.version*/
+export const version = "2021.8.1f0"; /*_package.version*/
 export const versionText = `v${version}`;

app/lib/pages/code/__plugin/index.ts

@@ -1,7 +1,7 @@
 import {
   EK_GENERATED_CODE_PLAIN,
   EK_IMAGE_ASSET_REPOSITORY_MAP,
-} from "app/lib/constants/ek.constant";
+} from "@core/constant/ek.constant";
 import {
   onService,
   _Code_Event,

app/lib/pages/code/code-screen.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import CodeBox, { SourceInput } from "../../components/codebox";
-import { Preview } from "../../components/preview";
+import { CodeBox, SourceInput } from "@ui/codebox";
+import { Preview } from "@ui/previewer";
 import {
   EK_GENERATED_CODE_PLAIN,
   EK_IMAGE_ASSET_REPOSITORY_MAP,
-} from "../../constants/ek.constant";
+} from "@core/constant/ek.constant";
 import { repo_assets } from "@design-sdk/core";
 import { assistant as analytics } from "@analytics.bridged.xyz/internal";
 import {
@@ -19,7 +19,7 @@ import { PluginSdk } from "@plugin-sdk/app";
 import { CodeScreenFooter } from "./footer-action/code-screen-footer";
 import { CodeOptionsControl } from "./code-options-control";
 import { fromApp, CodeGenRequest } from "./__plugin/events";
-import { useSingleSelection } from "../../utils/plugin-hooks";
+import { useSingleSelection } from "plugin-app";
 
 type DesigntoCodeUserOptions = FrameworkOption;