Merge pull request #151 from gridaco/organization

Project Organization

Author: softmarshmallow

.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/lib/utils/plugin-init/README.md renamed to app/__plugin__init__/README.md

@@ -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/__plugin__init__/index.ts

@@ -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/animated-check-icon.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/animation/progress-bar.tsx renamed to app/lib/components/animation/animated-progress-bar.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/comming-soon-template.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/navigation/secondary-workmode-menu.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/box-tab.tsx renamed to app/lib/components/storybook-screen.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;