diff --git a/.gitignore b/.gitignore index 7bb59f4a..ac0c76f0 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,7 @@ webdev/.eslintcache # we use yarn -package-lock.json \ No newline at end of file +package-lock.json + +# log including yarn error log +.log \ No newline at end of file diff --git a/README.md b/README.md index 048ea9c6..e73e7df3 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,10 @@ title: Grida assistant for figma, sketch, xd + +![Grida assistant](./branding/assistant-cover-v2021.8.0.png) -![Grida assistant](./branding/assistant-cover-v2021.2.0.png) +
Grida Assistant - Figma 2 Flutter &React - Free & Opensource Design2Code Plugin with lot more features. | Product Hunt
# 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 diff --git a/app/lib/utils/plugin-init/README.md b/app/__plugin__init__/README.md similarity index 100% rename from app/lib/utils/plugin-init/README.md rename to app/__plugin__init__/README.md diff --git a/app/__plugin__init__/index.ts b/app/__plugin__init__/index.ts new file mode 100644 index 00000000..ef25073e --- /dev/null +++ b/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"; diff --git a/app/lib/components/animation/animated-check-icon.tsx b/app/lib/components/animation/animated-check-icon.tsx index e6e39877..e75532c3 100644 --- a/app/lib/components/animation/animated-check-icon.tsx +++ b/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": { diff --git a/app/lib/components/animation/progress-bar.tsx b/app/lib/components/animation/animated-progress-bar.tsx similarity index 92% rename from app/lib/components/animation/progress-bar.tsx rename to app/lib/components/animation/animated-progress-bar.tsx index b695ad13..f1dfe3da 100644 --- a/app/lib/components/animation/progress-bar.tsx +++ b/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 ( diff --git a/app/lib/components/comming-soon-template.tsx b/app/lib/components/comming-soon-template.tsx index dbe21cd7..de9b03ec 100644 --- a/app/lib/components/comming-soon-template.tsx +++ b/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); `; diff --git a/app/lib/components/navigation/secondary-workmode-menu.tsx b/app/lib/components/navigation/secondary-workmode-menu.tsx index 7beb1673..b7bc33a2 100644 --- a/app/lib/components/navigation/secondary-workmode-menu.tsx +++ b/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(props: { menus: { id: T; diff --git a/app/lib/components/box-tab.tsx b/app/lib/components/storybook-screen.tsx similarity index 92% rename from app/lib/components/box-tab.tsx rename to app/lib/components/storybook-screen.tsx index 11bd05d8..247d06b6 100644 --- a/app/lib/components/box-tab.tsx +++ b/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 {
- + {/* */}
Box section end
diff --git a/app/lib/components/upload-steps.tsx b/app/lib/components/upload-steps.tsx index 7b707638..7fa8ae16 100644 --- a/app/lib/components/upload-steps.tsx +++ b/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 ( <> - {isLoading && } + {isLoading && } {isLoading ? ( @@ -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; diff --git a/app/lib/index.ts b/app/lib/index.ts index 74a48b44..d66d2cdb 100644 --- a/app/lib/index.ts +++ b/app/lib/index.ts @@ -1,2 +1 @@ -export * from "./components"; -export * from "./main" \ No newline at end of file +export * from "./main"; diff --git a/app/lib/lint/index.ts b/app/lib/lint/index.ts deleted file mode 100644 index 27973214..00000000 --- a/app/lib/lint/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./lint-item-row"; -export * from "./lint-tree-view"; diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index d9d52fbb..f7db192d 100644 --- a/app/lib/main/index.tsx +++ b/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 ; case WorkScreen.signin: - return ; + return ; default: return
Not found
; } @@ -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); } @@ -268,8 +267,11 @@ export default function App(props: { platform: TargetPlatform }) { }, []); const Router = getDedicatedRouter(); + + const Loading = <>; + return ( - + {/* @ts-ignore */} diff --git a/app/lib/mock/index.ts b/app/lib/mock/index.ts deleted file mode 100644 index 21cd2cbc..00000000 --- a/app/lib/mock/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./metadata" \ No newline at end of file diff --git a/app/lib/navigation/release-visibility-preference.ts b/app/lib/navigation/release-visibility-preference.ts index 425493e1..1c2e5f04 100644 --- a/app/lib/navigation/release-visibility-preference.ts +++ b/app/lib/navigation/release-visibility-preference.ts @@ -10,7 +10,7 @@ export interface ReleaseVisibilityPreference { const SCREEN_VISIBILITY_PREFERENCE: Map = new Map([ [WorkScreen.code, "release"], [WorkScreen.about, "release"], - [WorkScreen.component, "release"], + [WorkScreen.component, "beta"], [WorkScreen.layout, "beta"], [WorkScreen.icon, "release"], [WorkScreen.lint, "release"], diff --git a/app/lib/pages/about/index.tsx b/app/lib/pages/about/index.tsx index c6883b38..bf784987 100644 --- a/app/lib/pages/about/index.tsx +++ b/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"; @@ -8,25 +8,25 @@ 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() { - More from Bridged + More from Grida Signup / Signin Medium - Homepage + Homepage diff --git a/app/lib/about.ts b/app/lib/pages/about/manifest.ts similarity index 69% rename from app/lib/about.ts rename to app/lib/pages/about/manifest.ts index 19728849..27336806 100644 --- a/app/lib/about.ts +++ b/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}`; diff --git a/app/lib/pages/code/__plugin/index.ts b/app/lib/pages/code/__plugin/index.ts index 0dfbcb35..fbcef43b 100644 --- a/app/lib/pages/code/__plugin/index.ts +++ b/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, diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx index e95d41a3..c69f585c 100644 --- a/app/lib/pages/code/code-screen.tsx +++ b/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; diff --git a/app/lib/pages/code/footer-action/code-screen-footer.tsx b/app/lib/pages/code/footer-action/code-screen-footer.tsx index 81fb0cfa..3cefe062 100644 --- a/app/lib/pages/code/footer-action/code-screen-footer.tsx +++ b/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"; @@ -62,8 +62,8 @@ export function CodeScreenFooter(props: ICodeScreenFooter) { } const CodeFooterCtaWrapper = styled.footer` - /* 16 is body's padding */ - width: calc(100% - 16px); + /* 32 is padding */ + width: calc(100% - 32px); padding: 12px 16px; display: flex; background: #fff; @@ -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); `; diff --git a/app/lib/pages/code/footer-action/next-upload-button.tsx b/app/lib/pages/code/footer-action/next-upload-button.tsx index 54216d1c..bedfb3ef 100644 --- a/app/lib/pages/code/footer-action/next-upload-button.tsx +++ b/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! */ diff --git a/app/lib/pages/code/formatter.ts b/app/lib/pages/code/formatter.ts index a7b6c1bb..2eed6074 100644 --- a/app/lib/pages/code/formatter.ts +++ b/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"; diff --git a/app/lib/pages/icons-screen.tsx b/app/lib/pages/icons-screen.tsx deleted file mode 100644 index 6bfe36c7..00000000 --- a/app/lib/pages/icons-screen.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react" -import { IconsLoader } from "../components/icons-loader" -export function IconsScreen() { - return -} \ No newline at end of file diff --git a/app/lib/pages/index.ts b/app/lib/pages/index.ts new file mode 100644 index 00000000..e7fb3727 --- /dev/null +++ b/app/lib/pages/index.ts @@ -0,0 +1,5 @@ +/// +/// re-exports all the pages +/// + +export { GlobalizationScreen } from "@app/i18n"; diff --git a/app/lib/pages/lint/index.ts b/app/lib/pages/lint/index.ts deleted file mode 100644 index df8c0a77..00000000 --- a/app/lib/pages/lint/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./lint-screen"; diff --git a/app/lib/repositories/README.md b/app/lib/repositories/README.md deleted file mode 100644 index d8102d62..00000000 --- a/app/lib/repositories/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Repositories -> A repository directory to hold inter app related data store implementations \ No newline at end of file diff --git a/app/lib/utils/index.ts b/app/lib/utils/index.ts deleted file mode 100644 index 6454e2e6..00000000 --- a/app/lib/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Logger } from "./logger"; diff --git a/app/lib/utils/plugin-init/index.ts b/app/lib/utils/plugin-init/index.ts deleted file mode 100644 index 323e283a..00000000 --- a/app/lib/utils/plugin-init/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// DO NOT REMOVE THIS LINE -import "../../pages/code/__plugin"; -import "../../pages/tool-box/data-mapper/__plugin"; -import "../../lint/__plugin"; diff --git a/app/lib/utils/plugin-init/init-target-platform.ts b/app/lib/utils/plugin-init/init-target-platform.ts deleted file mode 100644 index 7bec58a1..00000000 --- a/app/lib/utils/plugin-init/init-target-platform.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { PluginSdk } from "@plugin-sdk/app"; - -/** - * Target platform this ui runs on. this gloval variable will be set on initial entry on each platform's main ui import - */ -export let TARGET_PLATFORM: TargetPlatform; - -/** - * this only sets TARGET_PLATFORM on ui thread. - * @param platform - */ -export async function initializeTargetPlatform(platform: TargetPlatform) { - TARGET_PLATFORM = platform; - if (platform == TargetPlatform.webdev) { - return true; - } - - // sync this to code side. - await PluginSdk.request({ - namespace: "__INTERNAL__", - key: "sync-target-platform", - data: platform, - }); - console.info(`thread#ui: target platform set as ${platform}`); -} - -export function __syncTargetPlatformForCodeThread( - platform: TargetPlatform -): boolean { - console.info(`thread#code: syncing target platform to ${platform}`); - TARGET_PLATFORM = platform; - return true; -} - -export enum TargetPlatform { - bridged = "xyz.bridged.bridged", - figma = "com.figma.Desktop", - sketch = "com.bohemiancoding.sketch3", - xd = "xd", - zeplin = "zeplin", - webdev = "xyz.bridged.assistant-web-dev", -} diff --git a/app/package.json b/app/package.json index ba5f9097..4daf202b 100644 --- a/app/package.json +++ b/app/package.json @@ -9,6 +9,7 @@ "dependencies": { "@assistant/icons": "0.0.0", "@assistant/lint-icons": "0.0.0", + "@app/data-mapper": "0.0.0", "@analytics.bridged.xyz/internal": "^0.0.9", "@base-sdk-fp/auth": "0.1.0-2", "@base-sdk/base": "0.1.0-5", @@ -29,7 +30,6 @@ "classnames": "^2.3.1", "coli": "0.0.3", "copy-to-clipboard": "^3.3.1", - "dart-style": "^1.3.2-dev", "firebase": "^7.23.0", "framer-motion": "^4.1.17", "lodash": "^4.17.21", diff --git a/branding/assistant-cover-v2021.8.0.png b/branding/assistant-cover-v2021.8.0.png new file mode 100644 index 00000000..821f9ceb Binary files /dev/null and b/branding/assistant-cover-v2021.8.0.png differ diff --git a/figma-core/README.md b/figma-core/README.md new file mode 100644 index 00000000..2b152794 --- /dev/null +++ b/figma-core/README.md @@ -0,0 +1,7 @@ +# Figma core api module + +> all figma accessing logics will be placed here + +## Good to know - Somethings leart from mistakes + +- figma's node does return property until they are referenced diff --git a/figma-core/code-thread/broadcast-selection-preview.ts b/figma-core/code-thread/broadcast-selection-preview.ts index 153f1077..e1923c1a 100644 --- a/figma-core/code-thread/broadcast-selection-preview.ts +++ b/figma-core/code-thread/broadcast-selection-preview.ts @@ -1,4 +1,4 @@ -import { EK_PREVIEW_SOURCE } from "app/lib/constants/ek.constant"; +import { EK_PREVIEW_SOURCE } from "@core/constant/ek.constant"; /** * extracts the png image of selection, broadcasts to listeners. diff --git a/figma-core/code-thread/runon.ts b/figma-core/code-thread/runon.ts index 8d8975b4..8f359dde 100644 --- a/figma-core/code-thread/runon.ts +++ b/figma-core/code-thread/runon.ts @@ -2,7 +2,7 @@ import { EK_COMPUTE_STARTED, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_VANILLA_TRANSPORT, -} from "app/lib/constants/ek.constant"; +} from "@core/constant/ek.constant"; import { vanilla } from "@design-sdk/core"; import { ReflectFrameNode, ReflectSceneNode } from "@design-sdk/core/nodes"; import { user_interest } from "./user-interest"; diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index a21eedd9..2fb3afa4 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -1,6 +1,6 @@ import { analyzeSelection, SelectionAnalysis } from "plugin-app/utils"; import { convert } from "@design-sdk/figma"; -import { Logger } from "app/lib/utils"; +import { Logger } from "logger"; import { light } from "@design-sdk/core/nodes"; import { runon } from "./runon"; import { FigmaNodeCache } from "../node-cache"; diff --git a/figma-core/code-thread/user-interest.ts b/figma-core/code-thread/user-interest.ts index 2cd29a10..f66750ec 100644 --- a/figma-core/code-thread/user-interest.ts +++ b/figma-core/code-thread/user-interest.ts @@ -1,4 +1,4 @@ -import { EK_SET_APP_MODE } from "app/lib/constants"; +import { EK_SET_APP_MODE } from "@core/constant"; import { addEventHandler } from "./message-handler"; /** diff --git a/figma-core/event-handlers/create-icon.ts b/figma-core/event-handlers/create-icon.ts index f8467a9e..fbaf63d6 100644 --- a/figma-core/event-handlers/create-icon.ts +++ b/figma-core/event-handlers/create-icon.ts @@ -1,5 +1,5 @@ import { IconConfig } from "@reflect-ui/core"; -import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "app/lib/constants"; +import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "@core/constant"; import { PluginSdkService } from "@plugin-sdk/service"; import { IconPlacement, renderSvgIcon } from "../reflect-render/icons.render"; import { addEventHandler } from "../code-thread"; diff --git a/figma-core/event-handlers/replace-font.ts b/figma-core/event-handlers/replace-font.ts index 0b868703..bdd3fe5f 100644 --- a/figma-core/event-handlers/replace-font.ts +++ b/figma-core/event-handlers/replace-font.ts @@ -1,4 +1,4 @@ -import { EK_REPLACE_FONT } from "app/lib/constants"; +import { EK_REPLACE_FONT } from "@core/constant"; import { replaceAllTextFontInFrame } from "../tool-box/manipulate"; import { addEventHandler, singleFigmaNodeSelection } from "../code-thread"; diff --git a/figma-core/index.ts b/figma-core/index.ts index e9c2798d..65751d47 100644 --- a/figma-core/index.ts +++ b/figma-core/index.ts @@ -1,6 +1,6 @@ // ========== // init plugin -/* do not delete this line */ import "app/lib/utils/plugin-init"; // NO REMOVE +/* do not delete this line */ import "app/__plugin__init__"; // NO REMOVE // ========== // ========== diff --git a/figma-core/platform-features/file-checksum/store.ts b/figma-core/platform-features/file-checksum/store.ts index 2787f98d..46353c8f 100644 --- a/figma-core/platform-features/file-checksum/store.ts +++ b/figma-core/platform-features/file-checksum/store.ts @@ -1,4 +1,4 @@ -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "app/lib/constants"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { checksum } from "./api"; /** * root node's id is always 0:0 on plugin api. [learn more](https://github.com/figma/plugin-typings/issues/13) diff --git a/figma-lite/README.md b/figma-lite/README.md deleted file mode 100644 index 6e4db78f..00000000 --- a/figma-lite/README.md +++ /dev/null @@ -1 +0,0 @@ -# Figma lite - A web hosted version of figma plugin. diff --git a/figma-lite/manifest.json b/figma-lite/manifest.json deleted file mode 100644 index f31d254a..00000000 --- a/figma-lite/manifest.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "Grida", - "id": "896445082033423994", - "api": "1.0.0", - "main": "dist/code.js", - "ui": "dist/ui.html" -} \ No newline at end of file diff --git a/figma-lite/package.json b/figma-lite/package.json deleted file mode 100644 index 094cec4a..00000000 --- a/figma-lite/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "figma-lite", - "description": "A web hosted version of figma plugin.", - "authors": "Grida.co", - "version": "0.0.0", - "private": false, - "dependencies": { - "@ui/skeleton": "0.0.0" - }, - "scripts": { - "build": "webpack -p --mode=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch" - } -} \ No newline at end of file diff --git a/figma-lite/src/handle-proxy-requests.ts b/figma-lite/src/handle-proxy-requests.ts deleted file mode 100644 index 4b6cf0a1..00000000 --- a/figma-lite/src/handle-proxy-requests.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { - TransportPluginEvent, - PLUGIN_SDK_EK_BROWSER_OPEN_URI, -} from "@plugin-sdk/core"; - -export function handle(payload: TransportPluginEvent) { - console.log("handling proxy request from hosted app.", payload); - if (payload.key == PLUGIN_SDK_EK_BROWSER_OPEN_URI) { - open(payload.data.uri); - } -} diff --git a/figma-lite/src/ui.tsx b/figma-lite/src/ui.tsx deleted file mode 100644 index 5dfb96ab..00000000 --- a/figma-lite/src/ui.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useRef, useState, useEffect } from "react"; -import * as ReactDOM from "react-dom"; -import { AppSkeleton } from "@ui/skeleton"; -import { handle } from "./handle-proxy-requests"; - -ReactDOM.render( - , - document.getElementById("react-page") -); - -function LiteHostedAppConnector() { - const frame = useRef(); - - const [initialized, setInitialized] = useState(false); - - useEffect(() => { - if (frame) { - window.addEventListener("message", (event) => { - // console.log("event recievd from lite-fima-app", event.data); - if (event.data == "plugin-app-initialized") { - setInitialized(true); - } - - if ("pluginMessage" in event.data) { - if (event.data.pluginMessage.__proxy_request_from_hosted_plugin) { - handle(event.data.pluginMessage); - return; - } - if ( - "pluginId" in event.data || - event.data.pluginMessage.type === "response" - ) { - frame.current.contentWindow.postMessage(event.data, "*"); - } else { - parent.postMessage( - { - ...event.data, - "message-transport": true, - }, - "*" - ); - } - } - }); - } - }, [frame]); - - const _host = - process.env.NODE_ENV === "production" - ? "https://assistant-serve.grida.co" - : "http://localhost:3000"; - - // use opacity - // if (initialized) => show iframe only - // eles, show iframe with opacity 0 & enable AppSkeleton - // - - return ( -
- + diff --git a/figma/tsconfig.json b/figma/tsconfig.json index 6c295bfc..67cd3dc6 100644 --- a/figma/tsconfig.json +++ b/figma/tsconfig.json @@ -6,9 +6,9 @@ "jsx": "react", "esModuleInterop": true, "outDir": "dist", - "declaration": true, + "declaration": false, "allowSyntheticDefaultImports": true, - "sourceMap": true, + "sourceMap": false, "experimentalDecorators": true, "noUnusedLocals": false, "typeRoots": [ diff --git a/figma/webpack.config.js b/figma/webpack.config.js index b33e5388..d4ec003d 100644 --- a/figma/webpack.config.js +++ b/figma/webpack.config.js @@ -1,7 +1,6 @@ const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); -const Dotenv = require("dotenv-webpack"); const TerserPlugin = require("terser-webpack-plugin"); module.exports = (env, argv) => ({ @@ -15,7 +14,6 @@ module.exports = (env, argv) => ({ devtool: argv.mode === "production" ? false : "inline-source-map", entry: { - ui: "./src/ui.tsx", // The entry point for your UI code code: "./src/code.ts", // The entry point for your plugin code }, @@ -23,23 +21,11 @@ module.exports = (env, argv) => ({ rules: [ // Converts TypeScript code to JavaScript { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ }, - - // Enables including CSS by doing "import './file.css'" in your TypeScript code - { - test: /\.css$/, - loader: [{ loader: "style-loader" }, { loader: "css-loader" }], - }, - - // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI - { - test: /\.(png|jpg|gif|webp|svg|zip)$/, - loader: [{ loader: "url-loader" }], - }, ], }, // Webpack tries these extensions for you if you omit the extension like "import './file'" - resolve: { extensions: [".tsx", ".ts", ".jsx", ".js"] }, + resolve: { extensions: [".ts", ".js"] }, output: { filename: "[name].js", @@ -48,23 +34,12 @@ module.exports = (env, argv) => ({ // minimize optimization: { - minimize: false, + minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { - sourceMap: true, - compress: { - keep_classnames: true, // keep class name cause, flutter-builder uses class name reflection. - keep_fnames: true, - drop_console: true, - conditionals: true, - unused: true, - comparisons: true, - dead_code: true, - if_return: true, - join_vars: true, - warnings: false, - }, + keep_classnames: true, // keep class name cause, flutter-builder uses class name reflection. + sourceMap: false, output: { comments: false, }, @@ -80,8 +55,12 @@ module.exports = (env, argv) => ({ filename: "ui.html", inlineSource: ".(js)$", chunks: ["ui"], + // custom env var - ref: https://stackoverflow.com/a/49375928/5463235 + host: + argv.mode == "production" + ? "https://assistant-serve.grida.co" + : "http://localhost:3000", }), new HtmlWebpackInlineSourcePlugin(), - new Dotenv(), ], }); diff --git a/package.json b/package.json index 138824bb..a935359e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "app", "figma", "figma-core", - "figma-lite", + "figma-native", "sketch", "web", "webdev", @@ -31,13 +31,13 @@ "author": "Grida.co, bridged.xyz softmarshmallow ", "scripts": { "pull:all": "git submodule update --init --recursive", - "figma": "yarn workspace figma run webpack:watch", - "figma-lite": "yarn workspace figma-lite run build:dev && yarn web", - "build:figma:prod": "yarn workspace figma-lite run build", + "figma-native": "yarn workspace figma-native run webpack:watch", + "figma": "yarn workspace figma run build:dev && yarn web", + "build:figma:prod": "yarn workspace figma run build", "sketch": "yarn workspace sketch run render", "web": "yarn workspace web run dev", "xd": "yarn workspace xd run build", - "test": "cd figma && yarn build" + "test": "cd figma-native && yarn build" }, "collective": { "type": "opencollective", diff --git a/packages/README.md b/packages/README.md index 6f5a708b..c29387f3 100644 --- a/packages/README.md +++ b/packages/README.md @@ -1,13 +1,18 @@ ## sub packages directory. - -> the modules imprted, [flutter-builder](https://github.com/bridgedxyz/flutter-builder), and [lint](https://github.com/bridgedxyz/lint) are git submodules, please visit theirs repository to contribute on sub modules. - - +> the modules imprted, [flutter-builder](https://github.com/bridgedxyz/flutter-builder), and [lint](https://github.com/bridgedxyz/lint) are git submodules, please visit theirs repository to contribute on sub modules. ### Packages + - lint - box - flutter-builder - web-builder - design-plugins-sdk + +## The naming + +- @app - app related logics & ui +- @core - logics only +- @toolbox - like @app, contains logics & ui, but in a micro way (features that are unlikely to be primarily used) +- @ui - ui related / shared components diff --git a/app/lib/analytics/README.md b/packages/_firstparty-analytics/README.md similarity index 100% rename from app/lib/analytics/README.md rename to packages/_firstparty-analytics/README.md diff --git a/app/lib/analytics/index.ts b/packages/_firstparty-analytics/index.ts similarity index 100% rename from app/lib/analytics/index.ts rename to packages/_firstparty-analytics/index.ts diff --git a/packages/_firstparty-analytics/package.json b/packages/_firstparty-analytics/package.json new file mode 100644 index 00000000..205440ad --- /dev/null +++ b/packages/_firstparty-analytics/package.json @@ -0,0 +1,7 @@ +{ + "name": "@assistant-fp/analytics", + "description": "First party analytics for assistant", + "authors": "Grida.co", + "version": "0.0.0", + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/auth/README.md b/packages/_firstparty-auth/README.md similarity index 100% rename from app/lib/auth/README.md rename to packages/_firstparty-auth/README.md diff --git a/app/lib/auth/index.ts b/packages/_firstparty-auth/index.ts similarity index 100% rename from app/lib/auth/index.ts rename to packages/_firstparty-auth/index.ts diff --git a/app/lib/auth/no-auth-trial-manager.ts b/packages/_firstparty-auth/no-auth-trial-manager.ts similarity index 100% rename from app/lib/auth/no-auth-trial-manager.ts rename to packages/_firstparty-auth/no-auth-trial-manager.ts diff --git a/packages/_firstparty-auth/package.json b/packages/_firstparty-auth/package.json new file mode 100644 index 00000000..2e141da4 --- /dev/null +++ b/packages/_firstparty-auth/package.json @@ -0,0 +1,7 @@ +{ + "name": "@assistant-fp/auth", + "description": "First party authentication for assistant", + "authors": "Grida.co", + "version": "0.0.0", + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/auth/storage.ts b/packages/_firstparty-auth/storage.ts similarity index 100% rename from app/lib/auth/storage.ts rename to packages/_firstparty-auth/storage.ts diff --git a/app/lib/utils/logger/index.ts b/packages/_logger/index.ts similarity index 100% rename from app/lib/utils/logger/index.ts rename to packages/_logger/index.ts diff --git a/packages/_logger/package.json b/packages/_logger/package.json new file mode 100644 index 00000000..b585f92a --- /dev/null +++ b/packages/_logger/package.json @@ -0,0 +1,8 @@ +{ + "name": "logger", + "description": "custom logger", + "authors": "Grida co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/packages/app-auth/index.ts b/packages/app-auth/index.ts new file mode 100644 index 00000000..0a8ebd6e --- /dev/null +++ b/packages/app-auth/index.ts @@ -0,0 +1 @@ +export { SigninScreen } from "./signin/signin-screen"; diff --git a/packages/app-auth/package.json b/packages/app-auth/package.json new file mode 100644 index 00000000..ad01aee0 --- /dev/null +++ b/packages/app-auth/package.json @@ -0,0 +1,6 @@ +{ + "name": "@app/auth", + "version": "0.0.0", + "description": "First pary auth - UI only container", + "private": false +} \ No newline at end of file diff --git a/app/lib/pages/signin/signin-prompts.tsx b/packages/app-auth/signin/signin-prompts.tsx similarity index 96% rename from app/lib/pages/signin/signin-prompts.tsx rename to packages/app-auth/signin/signin-prompts.tsx index a025cc3a..a331cfc3 100644 --- a/app/lib/pages/signin/signin-prompts.tsx +++ b/packages/app-auth/signin/signin-prompts.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "@emotion/styled"; import { BlackButton, WhtieButton } from "../../components/style/global-style"; import { useHistory } from "react-router"; -import { startAuthentication } from "../../auth"; +import { startAuthentication } from "@assistant-fp/auth"; import BackArrowIcon from "@assistant/icons/back-arrow"; import { BackIcon, diff --git a/app/lib/pages/signin/index.tsx b/packages/app-auth/signin/signin-screen.tsx similarity index 90% rename from app/lib/pages/signin/index.tsx rename to packages/app-auth/signin/signin-screen.tsx index cc468924..4278ee7d 100644 --- a/app/lib/pages/signin/index.tsx +++ b/packages/app-auth/signin/signin-screen.tsx @@ -4,14 +4,9 @@ import { startAuthenticationWithSession, startAuthenticationSession, checkAuthSession, -} from "../../auth"; +} from "@assistant-fp/auth"; import { AuthProxySessionStartResult } from "@base-sdk-fp/auth"; -import { - BlackButton, - ButtonStyle, - Column, - WhtieButton, -} from "../../components/style/global-style"; +import { ButtonStyle } from "@ui/core/button-style"; import { useHistory } from "react-router"; import { BackIcon, @@ -26,27 +21,7 @@ import { Wrapper, } from "./style"; import { PluginSdk } from "@plugin-sdk/app"; - -// onClick={() => { -// startAuthentication(); -// }} - -function LeftArrow() { - return ( - - - - ); -} +import BackArrow from "@assistant/icons/back-arrow"; function InitialStateContent() { return ( @@ -112,7 +87,7 @@ function FinishCheckingAuth(props: { username: string }) { ); } -function Signin() { +export function SigninScreen() { const [isLoading, setIsLoading] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false); const [sessionInfo, setSessionInfo] = useState(); @@ -126,7 +101,7 @@ function Signin() { return ( - + {!isAuthenticated ? ( @@ -229,5 +204,3 @@ const StyledButton = styled.button` margin-bottom: 53px; border: 0; `; - -export default Signin; diff --git a/app/lib/pages/signin/style.ts b/packages/app-auth/signin/style.ts similarity index 91% rename from app/lib/pages/signin/style.ts rename to packages/app-auth/signin/style.ts index c87845c0..992398f2 100644 --- a/app/lib/pages/signin/style.ts +++ b/packages/app-auth/signin/style.ts @@ -1,10 +1,7 @@ import React from "react"; import styled from "@emotion/styled"; -import { - BlackButton, - Column, - WhtieButton, -} from "../../components/style/global-style"; +import { BlackButtonStyle, WhtieButtonStyle } from "@ui/core/button-style"; +import { Column } from "@ui/core"; export const Wrapper = styled.div` // 66 is body margin 8*2, wrapper padding 25*2 @@ -47,7 +44,7 @@ export const BtnWrapper = styled.div` `; export const SignInBtn = styled.button` - ${BlackButton} + ${BlackButtonStyle} width: calc(100vw - 54px); font-weight: bold; font-size: 14px; @@ -55,7 +52,7 @@ export const SignInBtn = styled.button` `; export const SignUpBtn = styled.button` - ${WhtieButton} + ${WhtieButtonStyle} width: calc(100vw - 54px); font-weight: bold; font-size: 14px; diff --git a/app/lib/pages/component-view/README.md b/packages/app-component-manage/README.md similarity index 100% rename from app/lib/pages/component-view/README.md rename to packages/app-component-manage/README.md diff --git a/app/lib/pages/component-view/component-codebox.tsx b/packages/app-component-manage/component-codebox.tsx similarity index 89% rename from app/lib/pages/component-view/component-codebox.tsx rename to packages/app-component-manage/component-codebox.tsx index 08149dd9..5bf38ee0 100644 --- a/app/lib/pages/component-view/component-codebox.tsx +++ b/packages/app-component-manage/component-codebox.tsx @@ -1,6 +1,5 @@ import React from "react"; -import { CodeboxEditDialog } from "../../components/codebox-edit-dialog"; -import CodeBox from "../../components/codebox"; +import { CodeBox, CodeboxEditDialog } from "@ui/codebox"; import Settings from "@material-ui/icons/Settings"; import IconButton from "@material-ui/core/IconButton/IconButton"; diff --git a/app/lib/pages/component-view/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx similarity index 96% rename from app/lib/pages/component-view/component-view-screen.tsx rename to packages/app-component-manage/component-view-screen.tsx index 5db96f86..5dfaa915 100644 --- a/app/lib/pages/component-view/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Preview } from "../../components/preview"; +import { Preview } from "@ui/previewer"; import Button from "@material-ui/core/Button"; import Dialog from "@material-ui/core/Dialog/Dialog"; import DialogTitle from "@material-ui/core/DialogTitle/DialogTitle"; @@ -9,7 +9,7 @@ import TextField from "@material-ui/core/TextField/TextField"; import DialogActions from "@material-ui/core/DialogActions/DialogActions"; import { PluginSdk } from "@plugin-sdk/app"; import { Divider, IconButton, Typography } from "@material-ui/core"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { Edit, Settings } from "@material-ui/icons"; import { ComponentCodebox } from "./component-codebox"; import { ComponentSchemaEditor } from "./schema-editor"; @@ -23,7 +23,7 @@ interface VisualComponentManifest { codeSnippet: string; } -import { useSingleSelection } from "../../utils/plugin-hooks"; +import { useSingleSelection } from "plugin-app"; export function ComponentViewScreen() { const [data, setData] = useState(undefined); diff --git a/app/lib/pages/component-view/index.ts b/packages/app-component-manage/index.ts similarity index 100% rename from app/lib/pages/component-view/index.ts rename to packages/app-component-manage/index.ts diff --git a/packages/app-component-manage/package.json b/packages/app-component-manage/package.json new file mode 100644 index 00000000..d7097fcd --- /dev/null +++ b/packages/app-component-manage/package.json @@ -0,0 +1,7 @@ +{ + "name": "@app/component-manage", + "description": "description", + "authors": "author", + "version": "0.0.0", + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/pages/component-view/schema-editor.tsx b/packages/app-component-manage/schema-editor.tsx similarity index 67% rename from app/lib/pages/component-view/schema-editor.tsx rename to packages/app-component-manage/schema-editor.tsx index 59bae7fc..5f988fd6 100644 --- a/app/lib/pages/component-view/schema-editor.tsx +++ b/packages/app-component-manage/schema-editor.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { SchemaEditor } from "../../components/schema-editor"; +import { SchemaEditor } from "@app/schema-editor"; import { schema } from "coli"; export function ComponentSchemaEditor() { diff --git a/app/lib/pages/tool-box/data-mapper/README.md b/packages/app-data-mapper/README.md similarity index 100% rename from app/lib/pages/tool-box/data-mapper/README.md rename to packages/app-data-mapper/README.md diff --git a/app/lib/pages/tool-box/data-mapper/__plugin/events.ts b/packages/app-data-mapper/__plugin/events.ts similarity index 100% rename from app/lib/pages/tool-box/data-mapper/__plugin/events.ts rename to packages/app-data-mapper/__plugin/events.ts diff --git a/app/lib/pages/tool-box/data-mapper/__plugin/index.ts b/packages/app-data-mapper/__plugin/index.ts similarity index 100% rename from app/lib/pages/tool-box/data-mapper/__plugin/index.ts rename to packages/app-data-mapper/__plugin/index.ts diff --git a/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx b/packages/app-data-mapper/data-mapper-screen.tsx similarity index 93% rename from app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx rename to packages/app-data-mapper/data-mapper-screen.tsx index ac5559e8..170b8454 100644 --- a/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx +++ b/packages/app-data-mapper/data-mapper-screen.tsx @@ -1,9 +1,6 @@ -import { Button } from "@material-ui/core"; import React, { useState } from "react"; -import { - usePairSelection, - useRangeSelection, -} from "../../../utils/plugin-hooks"; +import { Button } from "@material-ui/core"; +import { useRangeSelection } from "plugin-app"; import { findDatasourceNodeAndOthers } from "./data-source-node"; import { fromApp } from "./__plugin/events"; diff --git a/app/lib/pages/tool-box/data-mapper/data-source-node.tsx b/packages/app-data-mapper/data-source-node.ts similarity index 100% rename from app/lib/pages/tool-box/data-mapper/data-source-node.tsx rename to packages/app-data-mapper/data-source-node.ts diff --git a/app/lib/pages/tool-box/data-mapper/example-data-source.ts b/packages/app-data-mapper/example-data-source.ts similarity index 100% rename from app/lib/pages/tool-box/data-mapper/example-data-source.ts rename to packages/app-data-mapper/example-data-source.ts diff --git a/packages/app-data-mapper/index.ts b/packages/app-data-mapper/index.ts new file mode 100644 index 00000000..7c6d734e --- /dev/null +++ b/packages/app-data-mapper/index.ts @@ -0,0 +1 @@ +export { DataMapperScreen } from "./data-mapper-screen"; diff --git a/app/lib/pages/tool-box/data-mapper/mock-data-example.json b/packages/app-data-mapper/mock-data-example.json similarity index 100% rename from app/lib/pages/tool-box/data-mapper/mock-data-example.json rename to packages/app-data-mapper/mock-data-example.json diff --git a/packages/app-data-mapper/package.json b/packages/app-data-mapper/package.json new file mode 100644 index 00000000..ecbcdd90 --- /dev/null +++ b/packages/app-data-mapper/package.json @@ -0,0 +1,5 @@ +{ + "name": "@app/data-mapper", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/app/lib/lint/README.md b/packages/app-design-lint/README.md similarity index 100% rename from app/lib/lint/README.md rename to packages/app-design-lint/README.md diff --git a/app/lib/lint/__plugin/events.ts b/packages/app-design-lint/__plugin/events.ts similarity index 100% rename from app/lib/lint/__plugin/events.ts rename to packages/app-design-lint/__plugin/events.ts diff --git a/app/lib/lint/__plugin/index.ts b/packages/app-design-lint/__plugin/index.ts similarity index 100% rename from app/lib/lint/__plugin/index.ts rename to packages/app-design-lint/__plugin/index.ts diff --git a/app/lib/lint/actions/index.ts b/packages/app-design-lint/actions/index.ts similarity index 100% rename from app/lib/lint/actions/index.ts rename to packages/app-design-lint/actions/index.ts diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/packages/app-design-lint/error-by-layer-item.tsx similarity index 86% rename from app/lib/pages/lint/error-by-layer-item.tsx rename to packages/app-design-lint/error-by-layer-item.tsx index 9cbbaf2a..251f5412 100644 --- a/app/lib/pages/lint/error-by-layer-item.tsx +++ b/packages/app-design-lint/error-by-layer-item.tsx @@ -1,8 +1,8 @@ import styled from "@emotion/styled"; import * as React from "react"; -import { Level } from "../../lint/lint-colors"; -import { LintError, LintErrorIcon } from "../../lint/lint-error-icon"; -import { LintLevelIndicator } from "../../lint/lint-level-indicator"; +import { Level } from "./lint-colors"; +import { LintError, LintErrorIcon } from "./lint-error-icon"; +import { LintLevelIndicator } from "./lint-level-indicator"; import { default as CloseIcon } from "@assistant/icons/caret-up"; import { default as ExpandIcon } from "@assistant/icons/caret-down"; diff --git a/app/lib/pages/lint/fix-your-self.tsx b/packages/app-design-lint/fix-your-self.tsx similarity index 91% rename from app/lib/pages/lint/fix-your-self.tsx rename to packages/app-design-lint/fix-your-self.tsx index 2fe10fb6..c1d53078 100644 --- a/app/lib/pages/lint/fix-your-self.tsx +++ b/packages/app-design-lint/fix-your-self.tsx @@ -1,11 +1,11 @@ import React, { useState, useEffect } from "react"; import styled from "@emotion/styled"; import { PluginSdk } from "@plugin-sdk/app"; -import { ReflectLintFeedback } from "../../../../packages/lint/lib/feedbacks"; -import { BlackButton } from "../../components/style/global-style"; -import { LintItemRow } from "../../lint"; -import { LintProcessPaginator } from "../../lint/lint-process-paginator"; -import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; +import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks"; +import { BlackButtonStyle } from "@ui/core/button-style"; +import { LintItemRow } from "@app/design-lint"; +import { LintProcessPaginator } from "@app/design-lint/lint-process-paginator"; +import { _APP_EVENT_LINT_RESULT_EK } from "@app/design-lint/__plugin/events"; import BackArrowIcon from "@assistant/icons/back-arrow"; /** Fix your self as page with router props ver. (not used. planned.) */ @@ -150,7 +150,7 @@ const Pagination = styled.div` `; const NextLayerBtn = styled.button` - ${BlackButton} + ${BlackButtonStyle} width: calc(100% - 32px); position: absolute; bottom: 16px; diff --git a/app/lib/lint/group-by/README.md b/packages/app-design-lint/group-by/README.md similarity index 100% rename from app/lib/lint/group-by/README.md rename to packages/app-design-lint/group-by/README.md diff --git a/app/lib/lint/group-by/index.ts b/packages/app-design-lint/group-by/index.ts similarity index 100% rename from app/lib/lint/group-by/index.ts rename to packages/app-design-lint/group-by/index.ts diff --git a/app/lib/lint/hooks/README.md b/packages/app-design-lint/hooks/README.md similarity index 100% rename from app/lib/lint/hooks/README.md rename to packages/app-design-lint/hooks/README.md diff --git a/packages/app-design-lint/index.ts b/packages/app-design-lint/index.ts new file mode 100644 index 00000000..a3add772 --- /dev/null +++ b/packages/app-design-lint/index.ts @@ -0,0 +1,4 @@ +export * from "./lint-screen"; +export * from "./lint-item-row"; +export * from "./lint-tree-view"; +export * from "./lint-level-indicator"; diff --git a/app/lib/lint/lint-colors.ts b/packages/app-design-lint/lint-colors.ts similarity index 100% rename from app/lib/lint/lint-colors.ts rename to packages/app-design-lint/lint-colors.ts diff --git a/app/lib/lint/lint-error-icon.tsx b/packages/app-design-lint/lint-error-icon.tsx similarity index 100% rename from app/lib/lint/lint-error-icon.tsx rename to packages/app-design-lint/lint-error-icon.tsx diff --git a/app/lib/lint/lint-item-row/index.ts b/packages/app-design-lint/lint-item-row/index.ts similarity index 100% rename from app/lib/lint/lint-item-row/index.ts rename to packages/app-design-lint/lint-item-row/index.ts diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/packages/app-design-lint/lint-item-row/lint-item-row.tsx similarity index 97% rename from app/lib/lint/lint-item-row/lint-item-row.tsx rename to packages/app-design-lint/lint-item-row/lint-item-row.tsx index edcd2230..2a2703a1 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/packages/app-design-lint/lint-item-row/lint-item-row.tsx @@ -4,7 +4,7 @@ import type { ReflectLintFeedbackLevel } from "@reflect-ui/lint/lib/feedbacks"; import { LintError, LintErrorIcon } from "../lint-error-icon"; import { LintLevelIndicator } from "../lint-level-indicator"; import { choiceItem } from "../lint-list-view"; -import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item"; +import { OptionChoiceItem } from "../lint-option-choice-item"; import { default as CloseIcon } from "@assistant/icons/caret-up"; import { default as ExpandIcon } from "@assistant/icons/caret-down"; diff --git a/app/lib/lint/lint-level-indicator.tsx b/packages/app-design-lint/lint-level-indicator.tsx similarity index 100% rename from app/lib/lint/lint-level-indicator.tsx rename to packages/app-design-lint/lint-level-indicator.tsx diff --git a/app/lib/lint/lint-list-view/index.tsx b/packages/app-design-lint/lint-list-view/index.tsx similarity index 100% rename from app/lib/lint/lint-list-view/index.tsx rename to packages/app-design-lint/lint-list-view/index.tsx diff --git a/app/lib/pages/lint/lint-option-choice-item.tsx b/packages/app-design-lint/lint-option-choice-item.tsx similarity index 96% rename from app/lib/pages/lint/lint-option-choice-item.tsx rename to packages/app-design-lint/lint-option-choice-item.tsx index ae580c6f..790a6186 100644 --- a/app/lib/pages/lint/lint-option-choice-item.tsx +++ b/packages/app-design-lint/lint-option-choice-item.tsx @@ -1,7 +1,7 @@ -import { css } from "@emotion/react"; -import styled from "@emotion/styled"; import * as React from "react"; -import { Column, Row } from "../../components/style/global-style"; +import styled from "@emotion/styled"; +import { css } from "@emotion/react"; +import { Column, Row } from "@ui/core"; interface Props { selected: boolean; diff --git a/app/lib/lint/lint-process-paginator.tsx b/packages/app-design-lint/lint-process-paginator.tsx similarity index 100% rename from app/lib/lint/lint-process-paginator.tsx rename to packages/app-design-lint/lint-process-paginator.tsx diff --git a/app/lib/pages/lint/lint-screen.tsx b/packages/app-design-lint/lint-screen.tsx similarity index 90% rename from app/lib/pages/lint/lint-screen.tsx rename to packages/app-design-lint/lint-screen.tsx index 1819d8ed..c7f70149 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/packages/app-design-lint/lint-screen.tsx @@ -2,20 +2,22 @@ import React, { useState } from "react"; import styled from "@emotion/styled"; import { PluginSdk } from "@plugin-sdk/app"; import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks"; -/* non used (planned. do not remove) */ import { +import { + /* non used (planned. do not remove) */ LintItemRow, + /* non used (planned. do not remove) */ LintTreeView, -} from "../../lint"; -import { LintLevelIndicator } from "../../lint/lint-level-indicator"; -import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; + LintLevelIndicator, +} from "@app/design-lint"; +import { _APP_EVENT_LINT_RESULT_EK } from "@app/design-lint/__plugin/events"; import { - BlackButton, - TransparencyButton, -} from "../../components/style/global-style"; -import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; -import { useSingleSelection } from "../../utils/plugin-hooks"; -import { mapGrandchildren } from "@design-sdk/core/utils"; + BlackButtonStyle, + TransparentButtonStyle, +} from "@ui/core/button-style"; +import { useSingleSelection } from "plugin-app"; +import { makeSummary, requestLintOnCurrentSelection } from "./actions"; import { FixYourSelf } from "./fix-your-self"; +import { mapGrandchildren } from "@design-sdk/core/utils"; import Dialog from "@material-ui/core/Dialog"; export const LintScreen = () => { @@ -27,7 +29,11 @@ export const LintScreen = () => { const msg = ev.data.pluginMessage; if (msg.type == _APP_EVENT_LINT_RESULT_EK) { const _feedbacks = msg.data as Array; - setFeedbacks(_feedbacks); + if (_feedbacks.length === 0) { + PluginSdk.notify("🤩 Neat and clean (nothing to clean)", 2); + } else { + setFeedbacks(_feedbacks); + } } }); @@ -213,20 +219,20 @@ const FooterActionsWrapper = styled.div` `; const RunLintButtton = styled.button` - ${BlackButton} + ${BlackButtonStyle} width: calc(100% - 32px); // FIXME: position: absolute; bottom: 16px; `; const FirstErrorButton = styled.button` - ${BlackButton} + ${BlackButtonStyle} width: 66.6666%; margin-right: 8px; `; const ClearButton = styled.button` - ${TransparencyButton} + ${TransparentButtonStyle} width: 33.3333%; background: #fff; `; diff --git a/app/lib/lint/lint-tree-view/index.ts b/packages/app-design-lint/lint-tree-view/index.ts similarity index 100% rename from app/lib/lint/lint-tree-view/index.ts rename to packages/app-design-lint/lint-tree-view/index.ts diff --git a/app/lib/lint/lint-tree-view/lint-tree-view.tsx b/packages/app-design-lint/lint-tree-view/lint-tree-view.tsx similarity index 100% rename from app/lib/lint/lint-tree-view/lint-tree-view.tsx rename to packages/app-design-lint/lint-tree-view/lint-tree-view.tsx diff --git a/packages/app-design-lint/package.json b/packages/app-design-lint/package.json new file mode 100644 index 00000000..988a5247 --- /dev/null +++ b/packages/app-design-lint/package.json @@ -0,0 +1,8 @@ +{ + "name": "@app/design-lint", + "description": "design linter related package", + "authors": "Grida.co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/pages/g11n-screen.tsx b/packages/app-i18n/i18n-screen.tsx similarity index 97% rename from app/lib/pages/g11n-screen.tsx rename to packages/app-i18n/i18n-screen.tsx index a28862ba..6a2a1c83 100644 --- a/app/lib/pages/g11n-screen.tsx +++ b/packages/app-i18n/i18n-screen.tsx @@ -8,12 +8,11 @@ import { repo_assets } from "@design-sdk/core"; import Button from "@material-ui/core/Button"; import LinearProgress from "@material-ui/core/LinearProgress"; import { ImageManifest } from "@reflect-ui/core/lib"; -import { PluginSdk } from "@plugin-sdk/app"; import { EK_COMPUTE_STARTED, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_VANILLA_TRANSPORT, -} from "../constants/ek.constant"; +} from "@core/constant/ek.constant"; interface State { loading: boolean; diff --git a/packages/app-i18n/index.ts b/packages/app-i18n/index.ts new file mode 100644 index 00000000..9453fa05 --- /dev/null +++ b/packages/app-i18n/index.ts @@ -0,0 +1 @@ +export { GlobalizationScreen } from "./i18n-screen"; diff --git a/packages/app-i18n/package.json b/packages/app-i18n/package.json new file mode 100644 index 00000000..e1eb8bab --- /dev/null +++ b/packages/app-i18n/package.json @@ -0,0 +1,5 @@ +{ + "name": "@app/i18n", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/app/lib/components/icons-loader.tsx b/packages/app-icons-loader/icons-loader.tsx similarity index 99% rename from app/lib/components/icons-loader.tsx rename to packages/app-icons-loader/icons-loader.tsx index 450db5e3..d6433295 100644 --- a/app/lib/components/icons-loader.tsx +++ b/packages/app-icons-loader/icons-loader.tsx @@ -7,14 +7,14 @@ import GridListTile from "@material-ui/core/GridListTile"; import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED, -} from "../constants/ek.constant"; +} from "@core/constant/ek.constant"; import LinearProgress from "@material-ui/core/LinearProgress"; import CircularProgress from "@material-ui/core/CircularProgress"; import { withStyles, Select, MenuItem, InputBase } from "@material-ui/core"; import { Search } from "@material-ui/icons"; const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/all.json"; -import { Draggable } from "../utils/draggable"; +import { Draggable } from "@plugin-sdk/draggable"; import { assistant as analytics } from "@analytics.bridged.xyz/internal"; import styled from "@emotion/styled"; diff --git a/packages/app-icons-loader/icons-screen.tsx b/packages/app-icons-loader/icons-screen.tsx new file mode 100644 index 00000000..2177cd79 --- /dev/null +++ b/packages/app-icons-loader/icons-screen.tsx @@ -0,0 +1,5 @@ +import React from "react"; +import { IconsLoader } from "./icons-loader"; +export function IconsScreen() { + return ; +} diff --git a/packages/app-icons-loader/index.ts b/packages/app-icons-loader/index.ts new file mode 100644 index 00000000..5f017dee --- /dev/null +++ b/packages/app-icons-loader/index.ts @@ -0,0 +1,2 @@ +export * from "./icons-screen"; +export * from "./icons-loader"; diff --git a/packages/app-icons-loader/package.json b/packages/app-icons-loader/package.json new file mode 100644 index 00000000..d76b6460 --- /dev/null +++ b/packages/app-icons-loader/package.json @@ -0,0 +1,8 @@ +{ + "name": "@app/icons-loader", + "description": "icons loader related package", + "authors": "Grida.co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/pages/tool-box/batch-meta-editor/README.md b/packages/app-meta-editor/batch-meta-editor/README.md similarity index 100% rename from app/lib/pages/tool-box/batch-meta-editor/README.md rename to packages/app-meta-editor/batch-meta-editor/README.md diff --git a/app/lib/pages/tool-box/batch-meta-editor/index.tsx b/packages/app-meta-editor/batch-meta-editor/index.tsx similarity index 98% rename from app/lib/pages/tool-box/batch-meta-editor/index.tsx rename to packages/app-meta-editor/batch-meta-editor/index.tsx index 69ec8992..2475bb84 100644 --- a/app/lib/pages/tool-box/batch-meta-editor/index.tsx +++ b/packages/app-meta-editor/batch-meta-editor/index.tsx @@ -13,7 +13,7 @@ import { SupportedBatchMetaOperationTargetTypes, } from "@plugin-sdk/core"; -export default function BatchMetaEditor() { +export function BatchMetaEditor() { const [targetType, setTargetType] = useState( BatchMetaOperationTargetType.root ); diff --git a/packages/app-meta-editor/index.ts b/packages/app-meta-editor/index.ts new file mode 100644 index 00000000..39e4f004 --- /dev/null +++ b/packages/app-meta-editor/index.ts @@ -0,0 +1,4 @@ +export * from "./meta-editor"; +export * from "./batch-meta-editor"; +export * from "./repository"; +export * as mock from "./mock"; diff --git a/app/lib/pages/tool-box/meta-editor/README.md b/packages/app-meta-editor/meta-editor/README.md similarity index 100% rename from app/lib/pages/tool-box/meta-editor/README.md rename to packages/app-meta-editor/meta-editor/README.md diff --git a/app/lib/pages/tool-box/meta-editor/index.tsx b/packages/app-meta-editor/meta-editor/index.tsx similarity index 97% rename from app/lib/pages/tool-box/meta-editor/index.tsx rename to packages/app-meta-editor/meta-editor/index.tsx index f70b241f..56a04925 100644 --- a/app/lib/pages/tool-box/meta-editor/index.tsx +++ b/packages/app-meta-editor/meta-editor/index.tsx @@ -7,8 +7,8 @@ import Switch from "@material-ui/core/Switch"; import { MetaDataRepository, MetaDataRepositoryFactory, -} from "../../../repositories/metadata"; -import { useSingleSelection } from "../../../utils/plugin-hooks"; +} from "@app/meta-editor"; +import { useSingleSelection } from "plugin-app"; import { PluginSdk } from "@plugin-sdk/app"; interface MetaDataFieldDef { diff --git a/app/lib/mock/metadata/index.ts b/packages/app-meta-editor/mock/index.ts similarity index 100% rename from app/lib/mock/metadata/index.ts rename to packages/app-meta-editor/mock/index.ts diff --git a/packages/app-meta-editor/package.json b/packages/app-meta-editor/package.json new file mode 100644 index 00000000..a1756ed4 --- /dev/null +++ b/packages/app-meta-editor/package.json @@ -0,0 +1,8 @@ +{ + "name": "@app/meta-editor", + "description": "icons loader related package", + "authors": "Grida.co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/repositories/metadata/index.ts b/packages/app-meta-editor/repository/index.ts similarity index 84% rename from app/lib/repositories/metadata/index.ts rename to packages/app-meta-editor/repository/index.ts index f6b1dd34..3c1b51ef 100644 --- a/app/lib/repositories/metadata/index.ts +++ b/packages/app-meta-editor/repository/index.ts @@ -1,9 +1,6 @@ -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants"; -import { MetaDataMockDataProvider } from "../../mock"; -import { - TargetPlatform, - TARGET_PLATFORM, -} from "../../utils/plugin-init/init-target-platform"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; +import { MetaDataMockDataProvider } from "../mock"; +import { TargetPlatform, target_platform } from "@plugin-sdk/core"; import { PluginSdk } from "@plugin-sdk/app"; import { figma } from "@design-sdk/figma"; export class MetaDataRepositoryFactory { @@ -24,7 +21,7 @@ export abstract class MetaDataRepository { abstract key: string; async fetch(): Promise { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.figma: return await PluginSdk.fetchMetadata({ id: this.id, @@ -38,7 +35,7 @@ export abstract class MetaDataRepository { } async update(data: T) { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { // TODO -- figma api call does not work here. case TargetPlatform.figma: return await PluginSdk.updateMetadata({ @@ -54,7 +51,7 @@ export abstract class MetaDataRepository { } clear() { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.figma: const data = figma .getNodeById(this.id) diff --git a/app/lib/pages/tool-box/exporter/README.md b/packages/app-scene-export-json/README.md similarity index 100% rename from app/lib/pages/tool-box/exporter/README.md rename to packages/app-scene-export-json/README.md diff --git a/app/lib/pages/tool-box/exporter/export-utils.ts b/packages/app-scene-export-json/export-utils.ts similarity index 63% rename from app/lib/pages/tool-box/exporter/export-utils.ts rename to packages/app-scene-export-json/export-utils.ts index 538dd99c..1f13737c 100644 --- a/app/lib/pages/tool-box/exporter/export-utils.ts +++ b/packages/app-scene-export-json/export-utils.ts @@ -1,9 +1,12 @@ +/** + * this triggers the file download from the design tool you are interacting with + */ export function downloadFile(content) { const blob = new Blob([content], { type: "text/plain" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; - a.download = `export-node.json`; + a.download = `export-node.json`; // TODO: make name more flexible a.click(); a.remove(); window.URL.revokeObjectURL(url); diff --git a/app/lib/pages/tool-box/exporter/exporter.tsx b/packages/app-scene-export-json/exporter.tsx similarity index 100% rename from app/lib/pages/tool-box/exporter/exporter.tsx rename to packages/app-scene-export-json/exporter.tsx diff --git a/app/lib/pages/tool-box/exporter/figma-exporter.tsx b/packages/app-scene-export-json/figma-exporter.tsx similarity index 98% rename from app/lib/pages/tool-box/exporter/figma-exporter.tsx rename to packages/app-scene-export-json/figma-exporter.tsx index 7014142c..c5fe7ae7 100644 --- a/app/lib/pages/tool-box/exporter/figma-exporter.tsx +++ b/packages/app-scene-export-json/figma-exporter.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import * as FigmaApi from "figma-js"; import { Button, LinearProgress, TextField, Tooltip } from "@material-ui/core"; -import { useSingleSelection } from "../../../utils/plugin-hooks"; +import { useSingleSelection } from "plugin-app"; import { parseFileId } from "@design-sdk/figma-url"; import { PluginSdk } from "@plugin-sdk/app"; import { downloadFile } from "./export-utils"; diff --git a/app/lib/pages/tool-box/exporter/index.tsx b/packages/app-scene-export-json/index.tsx similarity index 100% rename from app/lib/pages/tool-box/exporter/index.tsx rename to packages/app-scene-export-json/index.tsx diff --git a/packages/app-scene-export-json/package.json b/packages/app-scene-export-json/package.json new file mode 100644 index 00000000..c0cb7c31 --- /dev/null +++ b/packages/app-scene-export-json/package.json @@ -0,0 +1,5 @@ +{ + "name": "@app/export-scene-as-json", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/app/lib/pages/tool-box/exporter/vanilla-exporter.tsx b/packages/app-scene-export-json/vanilla-exporter.tsx similarity index 97% rename from app/lib/pages/tool-box/exporter/vanilla-exporter.tsx rename to packages/app-scene-export-json/vanilla-exporter.tsx index a6a5c0ae..45d0e1b2 100644 --- a/app/lib/pages/tool-box/exporter/vanilla-exporter.tsx +++ b/packages/app-scene-export-json/vanilla-exporter.tsx @@ -6,7 +6,7 @@ import { EK_COMPUTE_STARTED, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_VANILLA_TRANSPORT, -} from "../../../constants/ek.constant"; +} from "@core/constant/ek.constant"; import { downloadFile } from "./export-utils"; import copy from "copy-to-clipboard"; diff --git a/app/lib/scene-view/_wrapping-for-hosting.ts b/packages/app-scene-view/_wrapping-for-hosting.ts similarity index 100% rename from app/lib/scene-view/_wrapping-for-hosting.ts rename to packages/app-scene-view/_wrapping-for-hosting.ts diff --git a/app/lib/scene-view/index.ts b/packages/app-scene-view/index.ts similarity index 100% rename from app/lib/scene-view/index.ts rename to packages/app-scene-view/index.ts diff --git a/packages/app-scene-view/package.json b/packages/app-scene-view/package.json new file mode 100644 index 00000000..3202a0b7 --- /dev/null +++ b/packages/app-scene-view/package.json @@ -0,0 +1,8 @@ +{ + "name": "@app/scene-view", + "description": "scene view related package", + "authors": "Grida.co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/scene-view/register-scene.ts b/packages/app-scene-view/register-scene.ts similarity index 97% rename from app/lib/scene-view/register-scene.ts rename to packages/app-scene-view/register-scene.ts index 69f7d6de..75e1d12b 100644 --- a/app/lib/scene-view/register-scene.ts +++ b/packages/app-scene-view/register-scene.ts @@ -3,7 +3,7 @@ import { __S_DesignOrigin, __S_StorableSceneType, } from "@base-sdk/scene-store/__api/server-types"; -import { getAccessToken } from "../auth"; +import { getAccessToken } from "@assistant-fp/auth"; import { upload } from "@base-sdk/hosting"; import { nanoid } from "nanoid/non-secure"; import { wrap_with_hosting__flutter } from "./_wrapping-for-hosting"; diff --git a/app/lib/scene-view/scene-preview.ts b/packages/app-scene-view/scene-preview.ts similarity index 100% rename from app/lib/scene-view/scene-preview.ts rename to packages/app-scene-view/scene-preview.ts diff --git a/app/lib/components/schema-editor/README.md b/packages/app-schema-editor/README.md similarity index 100% rename from app/lib/components/schema-editor/README.md rename to packages/app-schema-editor/README.md diff --git a/app/lib/components/schema-editor/index.ts b/packages/app-schema-editor/index.ts similarity index 100% rename from app/lib/components/schema-editor/index.ts rename to packages/app-schema-editor/index.ts diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json new file mode 100644 index 00000000..5b754f39 --- /dev/null +++ b/packages/app-schema-editor/package.json @@ -0,0 +1,8 @@ +{ + "name": "@app/schema-editor", + "description": "schema editor related package", + "authors": "Grida.co", + "version": "0.0.0", + "private": false, + "dependencies": {} +} \ No newline at end of file diff --git a/app/lib/components/schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx similarity index 97% rename from app/lib/components/schema-editor/schema-editor.tsx rename to packages/app-schema-editor/schema-editor.tsx index a5d64957..761cdda8 100644 --- a/app/lib/components/schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants"; -import { useSingleSelection } from "../../utils/plugin-hooks"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; +import { useSingleSelection } from "plugin-app"; import { PluginSdk } from "@plugin-sdk/app"; import { SingleLayerPropertyDefinition, diff --git a/app/lib/components/schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx similarity index 100% rename from app/lib/components/schema-editor/single-property.tsx rename to packages/app-schema-editor/single-property.tsx diff --git a/app/lib/pages/design/button-maker-screen.tsx b/packages/app-widget-maker-button/button-maker-screen.tsx similarity index 100% rename from app/lib/pages/design/button-maker-screen.tsx rename to packages/app-widget-maker-button/button-maker-screen.tsx diff --git a/packages/app-widget-maker-button/index.ts b/packages/app-widget-maker-button/index.ts new file mode 100644 index 00000000..0aa819f6 --- /dev/null +++ b/packages/app-widget-maker-button/index.ts @@ -0,0 +1 @@ +export { ButtonMakerScreen } from "./button-maker-screen"; diff --git a/packages/app-widget-maker-button/package.json b/packages/app-widget-maker-button/package.json new file mode 100644 index 00000000..1763827e --- /dev/null +++ b/packages/app-widget-maker-button/package.json @@ -0,0 +1,6 @@ +{ + "name": "@app/button-maker", + "version": "0.0.0", + "description": "Button maker", + "private": false +} \ No newline at end of file diff --git a/app/lib/utils/dart-format.ts b/packages/core-code-formatter/dart-format.ts similarity index 100% rename from app/lib/utils/dart-format.ts rename to packages/core-code-formatter/dart-format.ts diff --git a/packages/core-code-formatter/package.json b/packages/core-code-formatter/package.json new file mode 100644 index 00000000..ca9afa53 --- /dev/null +++ b/packages/core-code-formatter/package.json @@ -0,0 +1,9 @@ +{ + "name": "@core/code-formatter", + "description": "description", + "authors": "Grida co", + "version": "0.0.0", + "dependencies": { + "dart-style": "^1.3.2-dev" + } +} \ No newline at end of file diff --git a/app/lib/constants/ek.constant.ts b/packages/core-constant/ek.constant.ts similarity index 100% rename from app/lib/constants/ek.constant.ts rename to packages/core-constant/ek.constant.ts diff --git a/app/lib/constants/index.ts b/packages/core-constant/index.ts similarity index 100% rename from app/lib/constants/index.ts rename to packages/core-constant/index.ts diff --git a/app/lib/constants/ns.constant.ts b/packages/core-constant/ns.constant.ts similarity index 100% rename from app/lib/constants/ns.constant.ts rename to packages/core-constant/ns.constant.ts diff --git a/packages/core-constant/package.json b/packages/core-constant/package.json new file mode 100644 index 00000000..f864771b --- /dev/null +++ b/packages/core-constant/package.json @@ -0,0 +1,5 @@ +{ + "name": "@core/constant", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/packages/pugin-app/README.md b/packages/plugin-app/README.md similarity index 100% rename from packages/pugin-app/README.md rename to packages/plugin-app/README.md diff --git a/packages/pugin-app/client-id/README.md b/packages/plugin-app/client-id/README.md similarity index 100% rename from packages/pugin-app/client-id/README.md rename to packages/plugin-app/client-id/README.md diff --git a/packages/pugin-app/client-id/index.ts b/packages/plugin-app/client-id/index.ts similarity index 100% rename from packages/pugin-app/client-id/index.ts rename to packages/plugin-app/client-id/index.ts diff --git a/packages/pugin-app/client-id/store.ts b/packages/plugin-app/client-id/store.ts similarity index 100% rename from packages/pugin-app/client-id/store.ts rename to packages/plugin-app/client-id/store.ts diff --git a/packages/pugin-app/index.ts b/packages/plugin-app/index.ts similarity index 72% rename from packages/pugin-app/index.ts rename to packages/plugin-app/index.ts index 1fc08d61..751d1883 100644 --- a/packages/pugin-app/index.ts +++ b/packages/plugin-app/index.ts @@ -1,2 +1,3 @@ export { PluginApp } from "./plugin-app"; export { client_id } from "./client-id"; +export * from "./plugin-hooks"; diff --git a/packages/pugin-app/package.json b/packages/plugin-app/package.json similarity index 100% rename from packages/pugin-app/package.json rename to packages/plugin-app/package.json diff --git a/packages/pugin-app/plugin-app.tsx b/packages/plugin-app/plugin-app.tsx similarity index 90% rename from packages/pugin-app/plugin-app.tsx rename to packages/plugin-app/plugin-app.tsx index ceeb65dd..f9b0ed5d 100644 --- a/packages/pugin-app/plugin-app.tsx +++ b/packages/plugin-app/plugin-app.tsx @@ -10,20 +10,19 @@ import { } from "@plugin-sdk/core/events"; import { NetworkRequest } from "@plugin-sdk/core"; import { PluginSdk } from "@plugin-sdk/app"; +import type { TargetPlatform } from "@plugin-sdk/core"; import { currentlySelectedPrimaryNodeId } from "./states/canvas"; -import { - initializeTargetPlatform, - TargetPlatform, -} from "../../app/lib/utils/plugin-init/init-target-platform"; import { initialize as cid_initialize, client_id } from "./client-id"; export function PluginApp(props: { platform: TargetPlatform; children: any; loading?: any; + onWillInitialize?: () => void; onInitialized?: () => void; }) { const [booting, setBooting] = useState(true); + const [hidecontent, setHidecontent] = useState(true); useEffect(() => { console.log("start initializing plugin app..."); @@ -51,7 +50,7 @@ export function PluginApp(props: { }); // init platform - initializeTargetPlatform(props.platform).then(() => { + PluginSdk.initializeTargetPlatform(props.platform).then(() => { const warmup_procs: Promise[] = []; // make client id @@ -60,13 +59,15 @@ export function PluginApp(props: { Promise.all(warmup_procs).finally(() => { console.info("PluginApp initiallized", "cid", client_id); parent.postMessage("plugin-app-initialized", "*"); - props.onInitialized?.(); - setBooting(false); + /* loaded */ props.onInitialized?.(); + /* loaded */ setBooting(false); }); }); + /* preload */ props.onWillInitialize?.(); + /* preload */ setHidecontent(false); }, []); - if (booting) { + if (hidecontent) { return ( <> {props.loading ? ( diff --git a/app/lib/utils/plugin-hooks/README.md b/packages/plugin-app/plugin-hooks/README.md similarity index 100% rename from app/lib/utils/plugin-hooks/README.md rename to packages/plugin-app/plugin-hooks/README.md diff --git a/app/lib/utils/plugin-hooks/index.ts b/packages/plugin-app/plugin-hooks/index.ts similarity index 100% rename from app/lib/utils/plugin-hooks/index.ts rename to packages/plugin-app/plugin-hooks/index.ts diff --git a/app/lib/utils/plugin-hooks/use-meta.ts b/packages/plugin-app/plugin-hooks/use-meta.ts similarity index 90% rename from app/lib/utils/plugin-hooks/use-meta.ts rename to packages/plugin-app/plugin-hooks/use-meta.ts index e3e2da7a..9a2f3547 100644 --- a/app/lib/utils/plugin-hooks/use-meta.ts +++ b/packages/plugin-app/plugin-hooks/use-meta.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { PluginSdk } from "@plugin-sdk/app"; export function useMeta() {} diff --git a/app/lib/utils/plugin-hooks/use-selection.ts b/packages/plugin-app/plugin-hooks/use-selection.ts similarity index 100% rename from app/lib/utils/plugin-hooks/use-selection.ts rename to packages/plugin-app/plugin-hooks/use-selection.ts diff --git a/packages/pugin-app/states/canvas.ts b/packages/plugin-app/states/canvas.ts similarity index 100% rename from packages/pugin-app/states/canvas.ts rename to packages/plugin-app/states/canvas.ts diff --git a/packages/pugin-app/utils/canvas.ts b/packages/plugin-app/utils/canvas.ts similarity index 100% rename from packages/pugin-app/utils/canvas.ts rename to packages/plugin-app/utils/canvas.ts diff --git a/packages/pugin-app/utils/index.ts b/packages/plugin-app/utils/index.ts similarity index 100% rename from packages/pugin-app/utils/index.ts rename to packages/plugin-app/utils/index.ts diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts index b6f9e64b..91294a64 100644 --- a/packages/plugin-sdk-app/index.ts +++ b/packages/plugin-sdk-app/index.ts @@ -35,15 +35,18 @@ import { ImageExportResponse, PLUGIN_SDK_NS_GET_NODE, PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, + target_platform, + TargetPlatform, } from "@plugin-sdk/core"; import type { ReflectSceneNode } from "@design-sdk/core/nodes"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../app/lib/constants"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { _SharedStorageCache } from "./_shared-storage-cache"; const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( "co.grida.assistant" ); + export class PluginSdk { private static _window: Window; static get window(): Window { @@ -53,6 +56,29 @@ export class PluginSdk { this._window = window; } + /** + * this only sets TARGET_PLATFORM on ui thread. + * @param platform + */ + static async initializeTargetPlatform(platform: TargetPlatform) { + if (!!target_platform.get()) { + throw "cannot overwrite target platform on runtime."; + } + + target_platform.set(platform); + if (platform == TargetPlatform.webdev) { + return true; + } + + // sync this to code side. + await PluginSdk.request({ + namespace: "__INTERNAL__", + key: "sync-target-platform", + data: platform, + }); + // console.info(`thread#ui: target platform set as ${platform}`); + } + // region general canvas api static get selectedNodeIds(): readonly string[] { throw "not implemented"; diff --git a/packages/plugin-sdk-core/index.ts b/packages/plugin-sdk-core/index.ts index cbb9d9b7..8dee1e57 100644 --- a/packages/plugin-sdk-core/index.ts +++ b/packages/plugin-sdk-core/index.ts @@ -1,3 +1,4 @@ export * from "./_id"; export * from "./interfaces"; export * from "./events"; +export * from "./target-platform"; diff --git a/packages/plugin-sdk-core/target-platform/index.ts b/packages/plugin-sdk-core/target-platform/index.ts new file mode 100644 index 00000000..8fd3b256 --- /dev/null +++ b/packages/plugin-sdk-core/target-platform/index.ts @@ -0,0 +1,20 @@ +/** + * Target platform this ui runs on. this gloval variable will be set on initial entry on each platform's main ui import + */ +let TARGET_PLATFORM: TargetPlatform; + +export const target_platform = { + get: (): TargetPlatform => TARGET_PLATFORM, + set: (value: TargetPlatform) => { + TARGET_PLATFORM = value; + }, +}; + +export enum TargetPlatform { + bridged = "xyz.bridged.bridged", + figma = "com.figma.Desktop", + sketch = "com.bohemiancoding.sketch3", + xd = "xd", + zeplin = "zeplin", + webdev = "xyz.bridged.assistant-web-dev", +} diff --git a/app/lib/utils/draggable/README.md b/packages/plugin-sdk-draggable/README.md similarity index 100% rename from app/lib/utils/draggable/README.md rename to packages/plugin-sdk-draggable/README.md diff --git a/app/lib/utils/draggable/index.tsx b/packages/plugin-sdk-draggable/index.tsx similarity index 100% rename from app/lib/utils/draggable/index.tsx rename to packages/plugin-sdk-draggable/index.tsx diff --git a/packages/plugin-sdk-draggable/package.json b/packages/plugin-sdk-draggable/package.json new file mode 100644 index 00000000..f3b23b7d --- /dev/null +++ b/packages/plugin-sdk-draggable/package.json @@ -0,0 +1,5 @@ +{ + "name": "@plugin-sdk/draggable", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index bd81553e..d471a901 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -1,4 +1,4 @@ -import { NS_FILE_ROOT_METADATA } from "app/lib/constants/ns.constant"; +import { NS_FILE_ROOT_METADATA } from "@core/constant/ns.constant"; import { PLUGIN_SDK_EK_BATCH_META_UPDATE, @@ -37,6 +37,8 @@ import { ImageExportRequest, PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, PLUGIN_SDK_NS_GET_NODE, + TargetPlatform, + target_platform, } from "@plugin-sdk/core"; import { WebStorage, FigmaStorage, IStorage } from "./storage"; @@ -45,11 +47,6 @@ import { WebStorage, FigmaStorage, IStorage } from "./storage"; import { Figma, figma } from "@design-sdk/figma"; import type { SceneNode } from "@design-sdk/figma"; -import { - __syncTargetPlatformForCodeThread, - TargetPlatform, - TARGET_PLATFORM, -} from "../../app/lib/utils/plugin-init/init-target-platform"; import { StorageGetItemResponse, StorageRequest, @@ -326,7 +323,7 @@ function handleRemoteApiEvent(props: HanderProps) {} function handleNotify(props: HanderProps) { if (props.key == PLUGIN_SDK_EK_SIMPLE_NOTIFY) { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { alert(props.data.message); } @@ -342,7 +339,7 @@ function handleNotify(props: HanderProps) { function handleGetNodeEvent(props: HanderProps<{ id: string }>) { if (props.key == PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID) { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { } case TargetPlatform.figma: { @@ -363,7 +360,7 @@ function handleGetNodeEvent(props: HanderProps<{ id: string }>) { function handleFocus(props: HanderProps) { if (props.key == PLUGIN_SDK_EK_SIMPLE_FOCUS) { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { // none console.log("mock focus event from webdev", props); @@ -382,7 +379,7 @@ function handleFocus(props: HanderProps) { async function handleExportEvent(event: HanderProps) { if (event.key === PLUGIN_SDK_EK_REQUEST_EXPORT_AS_IMAGE) { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { console.log( "webdev cannot perform image export request. ignoring this." @@ -408,7 +405,7 @@ async function handleExportEvent(event: HanderProps) { async function handleStorageEvent(props: HanderProps) { const _get_dedicated_storage = (): IStorage => { - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { return new WebStorage(); } @@ -481,7 +478,7 @@ function response( error: Error | undefined = undefined ): boolean { console.info( - `${TARGET_PLATFORM}>> responding to request ${requestId} with data ${JSON.stringify( + `${target_platform.get()}>> responding to request ${requestId} with data ${JSON.stringify( data )} and ${error ? "" + error : "no error"}` ); @@ -493,7 +490,7 @@ function response( error: error, data: data, }; - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { window.postMessage({ pluginMessage: msg }, undefined); break; @@ -510,7 +507,7 @@ function response( /** this is used to proxy a request from inner iframe to host iframe. */ function requestToHost(req) { console.log("requesting host to handle requests from hosted app.", req); - switch (TARGET_PLATFORM) { + switch (target_platform.get()) { case TargetPlatform.webdev: { window.postMessage( { pluginMessage: { __proxy_request_from_hosted_plugin: true, ...req } }, @@ -528,6 +525,14 @@ function requestToHost(req) { } } +export function __syncTargetPlatformForCodeThread( + platform: TargetPlatform +): boolean { + // console.info(`thread#code: syncing target platform to ${platform}`); + target_platform.set(platform); + return true; +} + /** * this is for syncing data with PluginApp's general data such as currently selected node. * @param withEvent diff --git a/app/lib/pages/tool-box/font-replacer/index.tsx b/packages/toolbox-font-replacer/font-replacer-screen.tsx similarity index 92% rename from app/lib/pages/tool-box/font-replacer/index.tsx rename to packages/toolbox-font-replacer/font-replacer-screen.tsx index 58b24368..99f5c678 100644 --- a/app/lib/pages/tool-box/font-replacer/index.tsx +++ b/packages/toolbox-font-replacer/font-replacer-screen.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Button } from "@material-ui/core"; -import { EK_REPLACE_FONT } from "../../../constants/ek.constant"; +import { EK_REPLACE_FONT } from "@core/constant/ek.constant"; export function FontReplacerScreen() { function onReplaceFontClick() { diff --git a/packages/toolbox-font-replacer/index.ts b/packages/toolbox-font-replacer/index.ts new file mode 100644 index 00000000..8b15fbc2 --- /dev/null +++ b/packages/toolbox-font-replacer/index.ts @@ -0,0 +1 @@ +export { FontReplacerScreen } from "./font-replacer-screen"; diff --git a/packages/toolbox-font-replacer/package.json b/packages/toolbox-font-replacer/package.json new file mode 100644 index 00000000..27a338b1 --- /dev/null +++ b/packages/toolbox-font-replacer/package.json @@ -0,0 +1,6 @@ +{ + "name": "@toolbox/font-replacer", + "version": "0.0.0", + "private": false, + "description": "Mini Font replacer tool" +} \ No newline at end of file diff --git a/app/lib/pages/tool-box/realtime-selection-transport/README.md b/packages/toolbox-realtime-selection-sync/README.md similarity index 100% rename from app/lib/pages/tool-box/realtime-selection-transport/README.md rename to packages/toolbox-realtime-selection-sync/README.md diff --git a/app/lib/components/codebox-edit-dialog.tsx b/packages/ui-code-box/codebox-edit-dialog.tsx similarity index 100% rename from app/lib/components/codebox-edit-dialog.tsx rename to packages/ui-code-box/codebox-edit-dialog.tsx index 340a9728..cfd1f2a1 100644 --- a/app/lib/components/codebox-edit-dialog.tsx +++ b/packages/ui-code-box/codebox-edit-dialog.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Dialog, DialogTitle, @@ -7,7 +8,6 @@ import { DialogActions, Button, } from "@material-ui/core"; -import React from "react"; export function CodeboxEditDialog(props: { title: string; diff --git a/app/lib/components/codebox.tsx b/packages/ui-code-box/codebox.tsx similarity index 97% rename from app/lib/components/codebox.tsx rename to packages/ui-code-box/codebox.tsx index 4cc6961d..fc804a40 100644 --- a/app/lib/components/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -18,7 +18,7 @@ interface Props { codeActions?: Array; } -export default function CodeBox(props: Props) { +export function CodeBox(props: Props) { const raw = typeof props.code == "string" ? props.code : props.code.raw; useEffect(() => { diff --git a/packages/ui-code-box/index.ts b/packages/ui-code-box/index.ts new file mode 100644 index 00000000..4f953e09 --- /dev/null +++ b/packages/ui-code-box/index.ts @@ -0,0 +1,2 @@ +export * from "./codebox"; +export * from "./codebox-edit-dialog"; diff --git a/packages/ui-code-box/package.json b/packages/ui-code-box/package.json new file mode 100644 index 00000000..c05e8733 --- /dev/null +++ b/packages/ui-code-box/package.json @@ -0,0 +1,5 @@ +{ + "name": "@ui/codebox", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/app/lib/components/style/global-style.ts b/packages/ui-core/button-style/index.ts similarity index 76% rename from app/lib/components/style/global-style.ts rename to packages/ui-core/button-style/index.ts index 56dcbb6e..dac1c4f5 100644 --- a/app/lib/components/style/global-style.ts +++ b/packages/ui-core/button-style/index.ts @@ -1,4 +1,3 @@ -import styled from "@emotion/styled"; import { css } from "@emotion/react"; export const ButtonStyle = css` @@ -18,7 +17,7 @@ export const ButtonStyle = css` text-transform: capitalize; `; -export const BlackButton = css` +export const BlackButtonStyle = css` ${ButtonStyle} border: 1px solid #151617; background: #151617; @@ -38,7 +37,7 @@ export const BlackButton = css` } `; -export const WhtieButton = css` +export const WhtieButtonStyle = css` ${ButtonStyle} /* border: 1px solid #151617; */ border: 0; @@ -46,7 +45,7 @@ export const WhtieButton = css` background: #fff; `; -export const TransparencyButton = css` +export const TransparentButtonStyle = css` ${ButtonStyle} color: #c1c1c1; border: 0; @@ -56,12 +55,3 @@ export const TransparencyButton = css` background: rgba(255, 255, 255, 0.3); } `; - -export const Row = styled.div` - display: flex; - flex-direction: row; -`; -export const Column = styled.div` - display: flex; - flex-direction: column; -`; diff --git a/app/lib/pages/tool-box/data-mapper/index.ts b/packages/ui-core/button/index.ts similarity index 100% rename from app/lib/pages/tool-box/data-mapper/index.ts rename to packages/ui-core/button/index.ts diff --git a/packages/ui-core/column/index.ts b/packages/ui-core/column/index.ts new file mode 100644 index 00000000..058bbd44 --- /dev/null +++ b/packages/ui-core/column/index.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const Column = styled.div` + display: flex; + flex-direction: column; +`; diff --git a/packages/ui-core/index.ts b/packages/ui-core/index.ts new file mode 100644 index 00000000..feeabc1e --- /dev/null +++ b/packages/ui-core/index.ts @@ -0,0 +1,2 @@ +export { Row } from "./row"; +export { Column } from "./column"; diff --git a/packages/ui-core/package.json b/packages/ui-core/package.json new file mode 100644 index 00000000..d23ca89f --- /dev/null +++ b/packages/ui-core/package.json @@ -0,0 +1,7 @@ +{ + "name": "@ui/core", + "description": "Assistant ui cores", + "authors": "Grida co", + "version": "0.0.0", + "dependencies": {} +} \ No newline at end of file diff --git a/packages/ui-core/row/index.ts b/packages/ui-core/row/index.ts new file mode 100644 index 00000000..daf7ea09 --- /dev/null +++ b/packages/ui-core/row/index.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const Row = styled.div` + display: flex; + flex-direction: row; +`; diff --git a/packages/assistant-icons/arrow-left.tsx b/packages/ui-icons/arrow-left.tsx similarity index 100% rename from packages/assistant-icons/arrow-left.tsx rename to packages/ui-icons/arrow-left.tsx diff --git a/packages/assistant-icons/back-arrow.tsx b/packages/ui-icons/back-arrow.tsx similarity index 100% rename from packages/assistant-icons/back-arrow.tsx rename to packages/ui-icons/back-arrow.tsx diff --git a/packages/assistant-icons/caret-down.tsx b/packages/ui-icons/caret-down.tsx similarity index 100% rename from packages/assistant-icons/caret-down.tsx rename to packages/ui-icons/caret-down.tsx diff --git a/packages/assistant-icons/caret-left.tsx b/packages/ui-icons/caret-left.tsx similarity index 100% rename from packages/assistant-icons/caret-left.tsx rename to packages/ui-icons/caret-left.tsx diff --git a/packages/assistant-icons/caret-right.tsx b/packages/ui-icons/caret-right.tsx similarity index 100% rename from packages/assistant-icons/caret-right.tsx rename to packages/ui-icons/caret-right.tsx diff --git a/packages/assistant-icons/caret-up.tsx b/packages/ui-icons/caret-up.tsx similarity index 100% rename from packages/assistant-icons/caret-up.tsx rename to packages/ui-icons/caret-up.tsx diff --git a/app/lib/components/Icon/check-icon.tsx b/packages/ui-icons/check.tsx similarity index 92% rename from app/lib/components/Icon/check-icon.tsx rename to packages/ui-icons/check.tsx index 809e0cb4..7cf14b93 100644 --- a/app/lib/components/Icon/check-icon.tsx +++ b/packages/ui-icons/check.tsx @@ -1,6 +1,6 @@ import React from "react"; -export function CheckIcon() { +export default function CheckIcon() { return ( - - + <_Navigation /> + <_Navigation /> - - - - + <_Tab /> + <_Tab /> + <_Tab /> + <_Tab /> - + <_Preview /> - - - + <_Contents /> + <_Contents /> + <_Contents /> @@ -95,7 +95,7 @@ const Column = styled.div` const NavigationWrapper = styled(Row)``; -const Navigation = styled(Skeleton)` +const _Navigation = styled(Skeleton)` width: 54px; height: 21px !important; @@ -106,7 +106,7 @@ const Navigation = styled(Skeleton)` const TabWrapper = styled(Row)``; -const Tab = styled(Skeleton)` +const _Tab = styled(Skeleton)` width: 54px; height: 13px !important; @@ -117,7 +117,7 @@ const Tab = styled(Skeleton)` } `; -const Preview = styled.div` +const _Preview = styled.div` width: 100vw; height: 200px !important; margin: 0 -16px; @@ -125,7 +125,7 @@ const Preview = styled.div` const ContentsWrapper = styled(Column)``; -const Contents = styled(Skeleton)` +const _Contents = styled(Skeleton)` width: 137px; height: 8px !important; margin-bottom: 4px; diff --git a/web/next.config.js b/web/next.config.js index 5adcc21d..21e750e5 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -1,11 +1,41 @@ const withTM = require("next-transpile-modules")([ + // _firstparty + "@assistant-fp/analytics", + "@assistant-fp/auth", + + // UI + "@ui/core", + "@ui/previewer", + "@ui/codebox", "@assistant/icons", "@assistant/lint-icons", + // @app "app", + "@app/auth", + "@app/i18n", + "@app/component-manage", + "@app/button-maker", + "@app/data-mapper", + "@app/design-lint", + "@app/icons-loader", + "@app/meta-editor", + "@app/meta-editor", + "@app/export-scene-as-json", + "@app/scene-view", + "@app/schema-editor", + + // @toolbox + "@toolbox/font-replacer", + + // cores + "@core/code-formatter", + + // Plugin sdk "@plugin-sdk/app", "@plugin-sdk/core", "@plugin-sdk/service", + "@plugin-sdk/draggable", "plugin-app", "@designto/config", diff --git a/web/pages/index.tsx b/web/pages/index.tsx index d498e3f3..6f0097c1 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -1,9 +1,9 @@ import React from "react"; import App from "app/lib/main"; -import { TargetPlatform } from "app/lib/utils/plugin-init/init-target-platform"; import { useEffect } from "react"; import { PluginSdkService } from "@plugin-sdk/service"; +import { TargetPlatform } from "@plugin-sdk/core"; import { useRouter } from "next/router"; import { get_target_platform_from_query } from "../utils/platform-init-query"; diff --git a/web/pages/init-figma.tsx b/web/pages/init-figma.tsx index 2b31c4f4..c70f6540 100644 --- a/web/pages/init-figma.tsx +++ b/web/pages/init-figma.tsx @@ -1,5 +1,5 @@ import App from "app/lib/main"; -import { TargetPlatform } from "app/lib/utils/plugin-init/init-target-platform"; +import { TargetPlatform } from "@plugin-sdk/core"; export default function FigmaInitTriggerPage() { return ; diff --git a/web/pages/init-webdev.tsx b/web/pages/init-webdev.tsx index ce18ce17..b11d12ba 100644 --- a/web/pages/init-webdev.tsx +++ b/web/pages/init-webdev.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; -import { PluginSdkService } from "@plugin-sdk/service"; import App from "app/lib/main"; -import { TargetPlatform } from "app/lib/utils/plugin-init/init-target-platform"; +import { PluginSdkService } from "@plugin-sdk/service"; +import { TargetPlatform } from "@plugin-sdk/core"; export default function InitWebdevTriggerPage() { useEffect(() => { diff --git a/web/utils/platform-init-query.ts b/web/utils/platform-init-query.ts index d7d64619..b1c3a026 100644 --- a/web/utils/platform-init-query.ts +++ b/web/utils/platform-init-query.ts @@ -1,4 +1,4 @@ -import { TargetPlatform } from "app/lib/utils/plugin-init/init-target-platform"; +import { TargetPlatform } from "@plugin-sdk/core"; export function get_target_platform_from_query(platform: string) { switch (platform) { diff --git a/xd/README.md b/xd/README.md index e39d22f1..632388a8 100644 --- a/xd/README.md +++ b/xd/README.md @@ -1,38 +1,38 @@ -# Bridged Assistant on Adobe XD - - +# Grida Assistant on Adobe XD ## references -xd plugin react [example](https://github.com/AdobeXD/plugin-samples/tree/master/quick-start-react) +xd plugin react [example](https://github.com/AdobeXD/plugin-samples/tree/master/quick-start-react) [get UXP developer tools](https://www.adobe.io/photoshop/uxp/devtool/) - [XD plugin api docs](https://adobexdplatform.com/plugin-docs/reference/xd-index.html) - # Development ## Getting started -* One time: Install nodejs (https://nodejs.org/en/download/) and yarn (npm i yarn -g) -* Open terminal and navigate to the /xd-flutter-plugin-src folder -* run `yarn` -* run `yarn build` -* Plugin files will be copied into the /build folder, and also into your XD plugin developer folder -* Refresh plugin in XD with `Ctrl+Shift+R` + +- One time: Install nodejs (https://nodejs.org/en/download/) and yarn (npm i yarn -g) +- Open terminal and navigate to the /xd-flutter-plugin-src folder +- run `yarn` +- run `yarn build` +- Plugin files will be copied into the /build folder, and also into your XD plugin developer folder +- Refresh plugin in XD with `Ctrl+Shift+R` ## Notes -* If you get errors about missing dependencies when building, you probably need to run `yarn` again -* builds are run in watch mode by default, meaning webpack re-bundles on file save + +- If you get errors about missing dependencies when building, you probably need to run `yarn` again +- builds are run in watch mode by default, meaning webpack re-bundles on file save -> add `--no-watch` to disable watch mode -* builds are automatically copied to the XD develop folder, use cmd/ctrl-shft-R in XD to reload plugins +- builds are automatically copied to the XD develop folder, use cmd/ctrl-shft-R in XD to reload plugins ## Production builds + If you are creating production builds for publishing, there are a few other things to consider: -* re-export / test the example thoroughly -* in version.js: update the `version`, `xdVersionRequired`, & set `debug` to false -* update the version in manifest.json, and ensure the README and CHANGELOG are up to date (incl. version) and committed. -* clear the `build` folder and use `yarn build --production` to minifiy and disable sourcemaps -* create the `xdx` file by zipping the _contents_ of the build folder, and renaming with a `.xdx` extension. -* once the plugin is submitted, tag the commit with it's version number (ex. `v1.0.0`) + +- re-export / test the example thoroughly +- in version.js: update the `version`, `xdVersionRequired`, & set `debug` to false +- update the version in manifest.json, and ensure the README and CHANGELOG are up to date (incl. version) and committed. +- clear the `build` folder and use `yarn build --production` to minifiy and disable sourcemaps +- create the `xdx` file by zipping the _contents_ of the build folder, and renaming with a `.xdx` extension. +- once the plugin is submitted, tag the commit with it's version number (ex. `v1.0.0`) diff --git a/yarn.lock b/yarn.lock index 94421cf9..0e5c0d42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1407,6 +1407,11 @@ resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.4.0.tgz#becce788818d3f47f0ac1a74c3c061ac1dcf4f6d" integrity sha512-8cUA/mg0S+BxIZ72TdZRsXKBP5n5uRcE3k29TZhZw6oIiHBt9JA7CTb/4pE1uKtE/q5NeTY2tBDcagoZ+1zjXQ== +"@gar/promisify@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" + integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw== + "@grpc/grpc-js@^1.0.0": version "1.3.7" resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.3.7.tgz#58b687aff93b743aafde237fd2ee9a3259d7f2d8" @@ -1777,6 +1782,14 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@npmcli/fs@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.0.0.tgz#589612cfad3a6ea0feafcb901d29c63fd52db09f" + integrity sha512-8ltnOpRR/oJbOp8vaGUnipOi3bqkcW+sLHFlyXIr08OGHmVJLB1Hn7QtGXbYcpVtH1gAYZTlmDXtE4YV0+AMMQ== + dependencies: + "@gar/promisify" "^1.0.1" + semver "^7.3.5" + "@npmcli/move-file@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674" @@ -2126,7 +2139,12 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.1.tgz#aee62c7b966f55fc66c7b6dfa1d58db2a616da61" integrity sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw== -"@types/node@^14.11.8", "@types/node@^14.14.20": +"@types/node@^14.11.8": + version "14.17.12" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.12.tgz#7a31f720b85a617e54e42d24c4ace136601656c7" + integrity sha512-vhUqgjJR1qxwTWV5Ps5txuy2XMdf7Fw+OrdChRboy8BmWUPkckOhphaohzFG6b8DW7CrxaBMdrdJ47SYFq1okw== + +"@types/node@^14.14.20": version "14.17.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.9.tgz#b97c057e6138adb7b720df2bd0264b03c9f504fd" integrity sha512-CMjgRNsks27IDwI785YMY0KLt3co/c0cQ5foxHYv/shC2w8oOnVwz5Ubq1QG5KzrcW+AXk6gzdnxIkDnTvzu3g== @@ -3122,10 +3140,11 @@ cacache@^12.0.2: y18n "^4.0.0" cacache@^15.0.5: - version "15.2.0" - resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.2.0.tgz#73af75f77c58e72d8c630a7a2858cb18ef523389" - integrity sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw== + version "15.3.0" + resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.3.0.tgz#dc85380fb2f556fe3dda4c719bfa0ec875a7f1eb" + integrity sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ== dependencies: + "@npmcli/fs" "^1.0.0" "@npmcli/move-file" "^1.0.1" chownr "^2.0.0" fs-minipass "^2.0.0" @@ -8509,9 +8528,9 @@ tar-stream@^2.1.0: readable-stream "^3.1.1" tar@^6.0.2: - version "6.1.8" - resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.8.tgz#4fc50cfe56511c538ce15b71e05eebe66530cbd4" - integrity sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A== + version "6.1.11" + resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621" + integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA== dependencies: chownr "^2.0.0" fs-minipass "^2.0.0" @@ -8568,9 +8587,9 @@ terser@^4.1.2: source-map-support "~0.5.12" terser@^5.3.4: - version "5.7.1" - resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784" - integrity sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg== + version "5.7.2" + resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.2.tgz#d4d95ed4f8bf735cb933e802f2a1829abf545e3f" + integrity sha512-0Omye+RD4X7X69O0eql3lC4Heh/5iLj3ggxR/B5ketZLOtLiOqukUgjw3q4PDnNQbsrkKr3UMypqStQG3XKRvw== dependencies: commander "^2.20.0" source-map "~0.7.2"