Project Organization

.gitignore

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

README.md

@@ -9,16 +9,8 @@ title: Grida assistant for figma, sketch, xd
 
 ![Grida assistant](./branding/assistant-cover-v2021.8.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)
 
 > Any design to high quality code, with live preview.
@@ -53,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,7 +259,7 @@ export default function App(props: { platform: TargetPlatform }) {
 
     // region init analytics
     try {
-      initialize();
+      analytics_initialize();
     } catch (e) {
       console.warn("Analytics disabled", e);
     }

app/lib/pages/about/index.tsx

@@ -1,6 +1,6 @@
 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";

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;
 

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import { WhtieButton } from "../../../components/style/global-style";
+import { WhtieButtonStyle } from "@ui/core/button-style";
 import { assistant as analytics } from "@analytics.bridged.xyz/internal";
 import { PluginSdk } from "@plugin-sdk/app";
-import { preview } from "../../../scene-view";
+import { preview } from "@app/scene-view";
 import { NextUploadButton } from "./next-upload-button";
 import type { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { Framework } from "../framework-option";
@@ -78,7 +78,7 @@ const CodeFooterCtaWrapper = styled.footer`
   }
 `;
 const PreviewButton = styled.button`
-  ${WhtieButton}
+  ${WhtieButtonStyle}
   /* 1/3 size. 12 is wrapper padding */
   width: calc(33.333% - 12px);
 `;

app/lib/pages/code/footer-action/next-upload-button.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import { BlackButton } from "../../../components/style/global-style";
-import { registerScene } from "../../../scene-view";
+import { BlackButtonStyle } from "@ui/core/button-style";
+import { registerScene } from "@app/scene-view";
 import { PluginSdk } from "@plugin-sdk/app";
 import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt";
-import { isAuthenticated } from "../../../auth";
+import { isAuthenticated } from "@assistant-fp/auth";
 import { useHistory } from "react-router-dom";
 
 export function NextUploadButton(props: {
@@ -82,7 +82,7 @@ function buildOpenUrlForRegisteredScene(sceneId: string) {
 }
 
 const NextStepButton = styled.button`
-  ${BlackButton}
+  ${BlackButtonStyle}
   /* 2/3 size. 12 is wrapper padding  */
   width: calc(66.666% - 12px); /* FIXME: stupid! */
 

app/lib/pages/code/formatter.ts

@@ -1,4 +1,4 @@
-import { format as dart_format } from "../../utils/dart-format";
+import { format as dart_format } from "@core/code-formatter/dart-format";
 import { Language } from "./framework-option";
 import { format as remote_format } from "@base-sdk/functions-code-format";
 

app/lib/pages/index.ts

@@ -0,0 +1,5 @@
+///
+/// re-exports all the pages
+///
+
+export { GlobalizationScreen } from "@app/i18n";