diff --git a/app/lib/components/assets/close.svg b/app/lib/components/assets/close.svg new file mode 100644 index 00000000..95ce701c --- /dev/null +++ b/app/lib/components/assets/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/expand-down.svg b/app/lib/components/assets/expand-down.svg new file mode 100644 index 00000000..5ba1bf46 --- /dev/null +++ b/app/lib/components/assets/expand-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/expand-right.svg b/app/lib/components/assets/expand-right.svg new file mode 100644 index 00000000..098b0f52 --- /dev/null +++ b/app/lib/components/assets/expand-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/expand.svg b/app/lib/components/assets/expand.svg new file mode 100644 index 00000000..b4878cec --- /dev/null +++ b/app/lib/components/assets/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/left-arrow.svg b/app/lib/components/assets/left-arrow.svg new file mode 100644 index 00000000..699c9776 --- /dev/null +++ b/app/lib/components/assets/left-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/right-arrow.svg b/app/lib/components/assets/right-arrow.svg new file mode 100644 index 00000000..35fba15a --- /dev/null +++ b/app/lib/components/assets/right-arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/lib/components/navigation/primary-workmode-select.tsx b/app/lib/components/navigation/primary-workmode-select.tsx index 093cb82c..c7477b72 100644 --- a/app/lib/components/navigation/primary-workmode-select.tsx +++ b/app/lib/components/navigation/primary-workmode-select.tsx @@ -55,6 +55,11 @@ const WorkmodeLabel = styled.h3` font-size: 21px; letter-spacing: 0em; cursor: pointer; + user-select: none; + + // reset for h3 init style + margin: 0; + margin-top: 8px; &:first-child { margin-right: 12px; diff --git a/app/lib/components/navigation/secondary-workmode-choice.tsx b/app/lib/components/navigation/secondary-workmode-choice.tsx index 71debc45..fec9ca3a 100644 --- a/app/lib/components/navigation/secondary-workmode-choice.tsx +++ b/app/lib/components/navigation/secondary-workmode-choice.tsx @@ -25,6 +25,7 @@ const Title = styled.h6` text-transform: capitalize; margin: 0; // for reset h6 inital margin margin-right: 10px; + user-select: none; /* &:nth-child(3n) { margin-right: 0; diff --git a/app/lib/components/navigation/secondary-workmode-menu.tsx b/app/lib/components/navigation/secondary-workmode-menu.tsx index 4c6c8ea7..c1881243 100644 --- a/app/lib/components/navigation/secondary-workmode-menu.tsx +++ b/app/lib/components/navigation/secondary-workmode-menu.tsx @@ -12,7 +12,7 @@ export function SecondaryWorkmodeMenu(props: { }) { return ( - + {props.menus.map((menu, index) => { if (index < 3) { diff --git a/app/lib/components/navigation/workmode-screen-tabs.tsx b/app/lib/components/navigation/workmode-screen-tabs.tsx index a472fe8e..4dd09b4a 100644 --- a/app/lib/components/navigation/workmode-screen-tabs.tsx +++ b/app/lib/components/navigation/workmode-screen-tabs.tsx @@ -34,6 +34,7 @@ export function WorkmodeScreenTabs(props: { TabIndicatorProps={{ style: { display: "none", + userSelect: "none", }, }} > diff --git a/app/lib/components/style/global-style.ts b/app/lib/components/style/global-style.ts index 6b402d04..f02afa11 100644 --- a/app/lib/components/style/global-style.ts +++ b/app/lib/components/style/global-style.ts @@ -11,6 +11,7 @@ export const ButtonStyle = css` box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; + cursor: pointer; // FIXME: CHEKC IS RIGHT capitalize? text-transform: capitalize; @@ -28,6 +29,12 @@ export const BlackButton = css` color: #fff; background: #17181a; } + + &:disabled { + background: #949494; + color: #bbb; + border: 1px solid #949494; + } `; export const WhtieButton = css` @@ -39,10 +46,12 @@ export const WhtieButton = css` export const TransparencyButton = css` ${ButtonStyle} - color: #C1C1C1; + color: #c1c1c1; + border: 0; + background: rgba(255, 255, 255, 0); &:hover { - background: rgba(255, 255, 255, 0); + background: rgba(255, 255, 255, 0.3); } `; diff --git a/app/lib/pages/lint/lint-colors.ts b/app/lib/lint/lint-colors.ts similarity index 82% rename from app/lib/pages/lint/lint-colors.ts rename to app/lib/lint/lint-colors.ts index 93f3bedd..61f03916 100644 --- a/app/lib/pages/lint/lint-colors.ts +++ b/app/lib/lint/lint-colors.ts @@ -1,5 +1,5 @@ export enum Level { - warn = "warn", + warn = "warning", error = "error", none = "none", ignore = "ignore", diff --git a/app/lib/lint/lint-error-icon.tsx b/app/lib/lint/lint-error-icon.tsx new file mode 100644 index 00000000..b968e8d6 --- /dev/null +++ b/app/lib/lint/lint-error-icon.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; + +export enum LintError { + text = "missingTextStyle", + name = "nameError", + mdi = "mdiTexture", + color = "missingColorStyleError", +} + +interface Props { + id?: string; +} + +export function LintErrorIcon(props: Props) { + const MdiTextureIcon = + require("../components/assets/mdi-texture.svg") as string; + const ColorErrorIcon = + require("../components/assets/missing-color-style-error.svg") as string; + const TextErrorIcon = + require("../components/assets/missing-text.svg") as string; + const NameErrorIcon = + require("../components/assets/name-error.svg") as string; + + switch (props.id) { + case LintError.text: + return ; + case LintError.name: + return ; + case LintError.mdi: + return ; + case LintError.color: + return ; + default: + return <>; + } +} diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx index 9bd5dfad..af2afbcb 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/app/lib/lint/lint-item-row/lint-item-row.tsx @@ -1,24 +1,124 @@ -import * as React from "react" - +import * as React from "react"; +import styled from "@emotion/styled"; +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"; interface Props { - onTap: Function - name: string - icon?: any + onTap: Function; + name: string; + icon?: any; + expand: boolean; + level: string; + error: { + id: string; + name: string; + userMessage: string; + }; + children?: any; } -interface State { - +function Options(children: any[]) { + return ( + <> + {children.map((item, i) => { + return ; + })} + + ); } -export class LintItemRow extends React.Component { - constructor(props) { - super(props) - } +export function LintItemRow(props: Props) { + const CloseIcon = require("../../components/assets/close.svg") as string; + const ExpandIcon = require("../../components/assets/expand.svg") as string; + + return ( + + props.onTap()}> + + + + + + {props.error.name} + + + + + {props.expand ? : } + + {props.error.userMessage} + - render() { - return <> -

{this.props.name}

- - } + + {Options([choiceItem])} + + + ); } + +const Wrapper = styled.div` + background: #fff; + height: 100px; + margin-bottom: 16px; + + // for reset parent margin + margin-right: -16px; + margin-left: -16px; + padding: 16px; + padding-bottom: 32px; + + &:hover { + background: #fcfcfc; + } +`; + +const Outer = styled.div` + padding-bottom: 32px; + cursor: pointer; +`; + +const Inner = styled.div` + display: flex; + align-items: center; +`; + +const IconWrapper = styled.div` + margin-right: 6px; +`; + +const IndicatorWrapper = styled.div` + margin-right: 10px; +`; + +const Title = styled.h6` + margin: 0; + margin-right: auto; + + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #202020; +`; + +const SubTitle = styled.h6` + margin: 0; + font-size: 12px; + line-height: 14px; + margin-top: 4px; + max-width: 262px; + + color: #666666; +`; + +const ChoiceWrapper = styled.div<{ display: boolean }>` + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + + display: ${(props) => (props.display ? "block" : "none")}; +`; diff --git a/app/lib/pages/lint/lint-level-indicator.tsx b/app/lib/lint/lint-level-indicator.tsx similarity index 80% rename from app/lib/pages/lint/lint-level-indicator.tsx rename to app/lib/lint/lint-level-indicator.tsx index 4c300c2b..bd15f0a4 100644 --- a/app/lib/pages/lint/lint-level-indicator.tsx +++ b/app/lib/lint/lint-level-indicator.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { Level } from "./lint-colors"; interface ILintLevelIndicator { - color: Level; + color: string; } export function LintLevelIndicator(props: ILintLevelIndicator) { @@ -12,7 +12,7 @@ export function LintLevelIndicator(props: ILintLevelIndicator) { } interface IIndicator { - color: Level; + color: string; } const Indicator = styled.div` @@ -21,19 +21,19 @@ const Indicator = styled.div` border-radius: 50%; ${(props) => - props.color === Level.warn + props.color == Level.warn ? css` background: #ffc700; ` - : props.color === Level.error + : props.color == Level.error ? css` background: #ff3a3a; ` - : props.color === Level.ignore + : props.color == Level.ignore ? css` background: #c6c6c6; ` - : props.color === Level.todo + : props.color == Level.todo ? css` background: #000; ` diff --git a/app/lib/lint/lint-list-view/index.ts b/app/lib/lint/lint-list-view/index.ts deleted file mode 100644 index b3bc2a07..00000000 --- a/app/lib/lint/lint-list-view/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// TODO: - -/** @deprecated this is dummy. replace me */ -export const dummy = "dummy"; diff --git a/app/lib/lint/lint-list-view/index.tsx b/app/lib/lint/lint-list-view/index.tsx new file mode 100644 index 00000000..324ff7da --- /dev/null +++ b/app/lib/lint/lint-list-view/index.tsx @@ -0,0 +1,25 @@ +/** @deprecated this is dummy. replace me */ +export const dummy = "dummy"; + +export const choiceItem = { + selected: false, + choice: { + title: "choice 1", + explanation: "I’ll choose this option to resolve this issue.", + }, +}; + +export const rowDummy = { + onTap: function T() { + // FIXME: here is setState + }, + name: "hi", + icon: "missingTextStyle", + expand: false, // FIXME: here is state + level: "warning", + error: { + id: "id", + name: "Error name", + userMessage: "This error is caused by “layer-name” and needs to be fixed.", + }, +}; diff --git a/app/lib/pages/lint/lint-process-paginator.tsx b/app/lib/lint/lint-process-paginator.tsx similarity index 56% rename from app/lib/pages/lint/lint-process-paginator.tsx rename to app/lib/lint/lint-process-paginator.tsx index a38f678f..c1894eb6 100644 --- a/app/lib/pages/lint/lint-process-paginator.tsx +++ b/app/lib/lint/lint-process-paginator.tsx @@ -5,8 +5,8 @@ interface Props { index: number; total: number; } -const LeftArrow = require("../../../lib/components/assets/pre-before-paginator.svg"); -const RightArrow = require("../../../lib/components/assets/pre-next-paginator.svg"); +const LeftArrow = require("../components/assets/prev-before-paginator.svg"); +const RightArrow = require("../components/assets/prev-next-paginator.svg"); export function LintProcessPaginator(props?: Props) { return ( @@ -14,27 +14,28 @@ export function LintProcessPaginator(props?: Props) { {!props ? "--" : `${props.index} of ${props.total}`} - - + + ); } const Wrapper = styled.div` display: flex; + align-items: center; `; -const Paginator = styled.span` +const Paginator = styled.p` font-size: 14px; font-style: normal; font-weight: 400; line-height: 17px; `; -const NextArrow = styled(LeftArrow)<{ disable: boolean }>` +const NextArrow = styled.img<{ disable: boolean }>` fill: ${(props) => (props.disable ? "#808080" : "#000")}; `; -const BeforeArrow = styled(RightArrow)<{ disable: boolean }>` +const BeforeArrow = styled.img<{ disable: boolean }>` fill: ${(props) => (props.disable ? "#808080" : "#000")}; `; diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index e489d80f..c6f7553d 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -1,16 +1,12 @@ -import * as React from "react"; +import React, { useState, useEffect } from "react"; import "../app.css"; import { initialize } from "../analytics"; // UI COMPS -import Button from "@material-ui/core/Button"; -import MenuItem from "@material-ui/core/MenuItem"; -import Menu from "@material-ui/core/Menu"; -import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"; import { EK_SET_APP_MODE } from "../constants/ek.constant"; import { PluginApp } from "plugin-app"; import BatchMetaEditor from "../pages/tool-box/batch-meta-editor"; -import { BrowserRouter } from "react-router-dom"; +import { useHistory, Switch, Route } from "react-router-dom"; // // region screens import @@ -32,12 +28,15 @@ import { AboutScreen } from "../pages/about"; // import { + getDedicatedRouter, getWorkmodeTabLayout, get_page_config, WorkMode, WorkScreen, - worspaceModeToName, + standalone_pages, PrimaryWorkmodeSet, + loadLayout, + NavigationStoreState, } from "../navigation"; import { @@ -48,6 +47,8 @@ import { } from "../components/navigation"; import styled from "@emotion/styled"; import { Column, Row } from "../components/style/global-style"; +import { UploadSteps } from "../components/upload-steps"; +import { FixYourSelf } from "../pages/lint/fix-your-self"; /** The container of tab content */ function TabPanel(props: { @@ -138,62 +139,79 @@ function Screen(props: { screen: WorkScreen }) { return ; case WorkScreen.tool_data_mapper: return ; + case WorkScreen.scene_upload_steps_final: + return ; + case WorkScreen.lint_fix_yourself: + return ; + default: + return
Not found
; } } function TabsLayout(props: { workmode: WorkMode; tabIndex: number; + isTabVisible: boolean; onChange: (index: number, tab: WorkScreen) => void; }) { + const history = useHistory(); const { workmode, tabIndex, onChange } = props; - const tabLayout = getWorkmodeTabLayout(workmode); + const tabs_as_page_configs = getWorkmodeTabLayout(workmode).map( + (screen, index) => { + const _ = get_page_config(screen); + return { + id: _.id, + name: _.title, + path: _.path, + }; + } + ); + const handleTabChange = (index: number) => { - const screen = tabLayout[index]; - onChange(index, screen); + const screen = tabs_as_page_configs[index]; + onChange(index, screen.id); + history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long. }; - const tabs_as_page_configs = tabLayout.map((screen, index) => { - const _ = get_page_config(screen); - return { - id: _.id, - name: _.title, - }; - }); - return (
-
- -
- {tabLayout.map((v, i) => { - return ( - - - - ); - })} + {props.isTabVisible && ( +
+ +
+ )} + + + {tabs_as_page_configs.map((v, i) => { + return ( + } + /> + ); + })} +
); } -function TabNavigationApp() { - const [workmode, setWorkmode] = React.useState(WorkMode.code); - const [workmodeSet, setWorkmodeSet] = React.useState({ - first: WorkMode.code, - second: WorkMode.design, - }); +function TabNavigationApp(props?: { savedLayout: NavigationStoreState }) { + const [workmode, setWorkmode] = useState(WorkMode.code); + const [workmodeSet, setWorkmodeSet] = useState( + props?.savedLayout?.workmodeSet + ); const on_workmode_select = (workmode: WorkMode) => { setWorkmode(workmode); }; - const [tabIndex, setTabIndex] = React.useState(0); - const [expansion, setExpansion] = React.useState(true); + const [tabIndex, setTabIndex] = useState(0); + const [expansion, setExpansion] = useState(true); return ( <> @@ -212,38 +230,55 @@ function TabNavigationApp() { {!expansion && } - - {/* {}} /> */} - {/* LEGACY */} - {/* { - // when workspace mode is updated, by default the first index 0 tab will be selected without select event. - // explicitly triggering the event. - setWorkmode(selected); - const newTabLayout = getWorkmodeTabLayout(selected); - _update_focused_screen_ev(newTabLayout[0]); + {/* {expansion && ( */} + { + _update_focused_screen_ev(screen); + setTabIndex(index); }} - /> */} - {expansion && ( - { - _update_focused_screen_ev(screen); - setTabIndex(index); - }} - /> - )} + /> + {/* )} */} ); // } +function RouterTabNavigationApp(props) { + const [savedLayout, setSavedLayout] = useState(); + useEffect(() => { + loadLayout().then((l) => setSavedLayout(l)); + }, []); + + const params = props.match.params; + const workmode = params.workmode; + const work = params.work; + // TODO: make new layout based on saved one and givven param. + + return <>{savedLayout && }; +} + +function Home() { + const [savedLayout, setSavedLayout] = + useState(undefined); + + useEffect(() => { + loadLayout() + .then((d) => { + setSavedLayout(d); + }) + .finally(() => {}); + }, []); + + return <>{savedLayout && }; +} + export default function App(props: { platform: TargetPlatform }) { - React.useEffect(() => { + useEffect(() => { // FIXME: - dynamicallt change initial focused screen. (currently inital setup is not implemented. - initial setup is done by below line.) _update_focused_screen_ev(WorkScreen.code_flutter); @@ -256,11 +291,30 @@ export default function App(props: { platform: TargetPlatform }) { // endregion init GA }, []); + const Router = getDedicatedRouter(); + return ( - - - + + + {/* # region unique route section */} + {standalone_pages.map((p) => { + return ( + { + return ; + }} + /> + ); + })} + {/* # endregion unique route section */} + {/* dynamic route shall be placed at the last point, since it overwrites other routes */} + + + {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/} + + ); } diff --git a/app/lib/navigation/index.ts b/app/lib/navigation/index.ts index 829d309d..78316c2c 100644 --- a/app/lib/navigation/index.ts +++ b/app/lib/navigation/index.ts @@ -1,117 +1,7 @@ +export * from "./navigation-store"; export * from "./layout-preference"; export * from "./work-mode"; export * from "./work-screen"; export * from "./primary-workmode-selector"; - -import { WorkScreen } from "./work-screen"; - -export interface WorkmodeConfig { - tabs: PageConfig[]; -} - -export interface PageConfig { - id: WorkScreen; - title: string; -} - -/// -/// region page declarations -/// - -const page_code_preview: PageConfig = { - id: WorkScreen.code, - title: "Preview", -}; - -const page_code_layout: PageConfig = { - id: WorkScreen.layout, - title: "Layout", -}; - -const page_code_component: PageConfig = { - id: WorkScreen.component, - title: "Component", -}; - -const page_code_lint: PageConfig = { - id: WorkScreen.lint, - title: "Lint", -}; - -const page_design_icon: PageConfig = { - id: WorkScreen.icon, - title: "Icon", -}; - -const page_design_layout: PageConfig = { - id: WorkScreen.layout, - title: "Layout", -}; - -const page_design_lint: PageConfig = { - id: WorkScreen.lint, - title: "Lint", -}; - -const page_content_g11n: PageConfig = { - id: WorkScreen.g11n, - title: "Globalize", -}; - -const page_about: PageConfig = { - id: WorkScreen.about, - title: "About", -}; - -const page_toolbox_font_replacer: PageConfig = { - id: WorkScreen.tool_font_replacer, - title: "About", -}; - -const page_toolbox_desing_button_maker: PageConfig = { - id: WorkScreen.tool_desing_button_maker, - title: "Button Maker", -}; - -const page_toolbox_meta_editor: PageConfig = { - id: WorkScreen.tool_meta_editor, - title: "Meta", -}; - -const page_toolbox_batch_meta_editor: PageConfig = { - id: WorkScreen.tool_batch_meta_editor, - title: "Batch Meta", -}; - -const page_toolbox_data_mapper: PageConfig = { - id: WorkScreen.tool_data_mapper, - title: "Data mapper", -}; - -const all_pages: PageConfig[] = [ - page_toolbox_data_mapper, - page_toolbox_batch_meta_editor, - page_toolbox_meta_editor, - page_toolbox_desing_button_maker, - page_toolbox_font_replacer, - page_about, - page_content_g11n, - page_design_lint, - page_design_layout, - page_design_icon, - page_code_layout, - page_code_preview, - page_code_component, - page_code_lint, -]; - -export function get_page_config(id: WorkScreen): PageConfig { - const _ = all_pages.find((p) => p.id === id); - if (_) { - return _; - } - throw `${id} is not found from registered page configs`; -} -/// -/// endregion page declarations -/// +export * from "./pages"; +export * from "./router"; diff --git a/app/lib/navigation/navigation-store/index.ts b/app/lib/navigation/navigation-store/index.ts index 459197a9..5a04509b 100644 --- a/app/lib/navigation/navigation-store/index.ts +++ b/app/lib/navigation/navigation-store/index.ts @@ -1,3 +1,4 @@ +import { PluginSdk } from "@plugin-sdk/app"; import { PrimaryWorkmodeSet } from "../primary-workmode-selector"; import { WorkMode } from "../work-mode"; import { WorkScreen } from "../work-screen"; @@ -8,15 +9,25 @@ export interface NavigationStoreState { currentWork: WorkScreen; } +const _default_state: NavigationStoreState = { + workmodeSet: { + first: WorkMode.code, + second: WorkMode.design, + }, + currentWorkmode: WorkMode.code, + currentWork: WorkScreen.code, +}; + const __KEY = "app-navigation-full-layout"; export async function saveLayout(state: NavigationStoreState) { - const payload = JSON.stringify(state); - - // save payload - // + PluginSdk.setItem(__KEY, state); } export async function loadLayout(): Promise { - const payload = await localStorage.getItem(__KEY); - return JSON.parse(payload); + const saved = await PluginSdk.getItem(__KEY); + console.log("saved", saved); + if (saved) { + return saved; + } + return _default_state; } diff --git a/app/lib/navigation/pages.ts b/app/lib/navigation/pages.ts new file mode 100644 index 00000000..2a575027 --- /dev/null +++ b/app/lib/navigation/pages.ts @@ -0,0 +1,147 @@ +import { WorkScreen } from "./work-screen"; + +export interface PageConfig { + id: WorkScreen; + title: string; + path: string; +} + +/// +/// region page declarations +/// + +const page_code_preview: PageConfig = { + id: WorkScreen.code, + title: "Preview", + path: "/code/preview", +}; + +const page_code_layout: PageConfig = { + id: WorkScreen.layout, + title: "Layout", + path: "/code/layout", +}; + +const page_code_component: PageConfig = { + id: WorkScreen.component, + title: "Component", + path: "/code/component", +}; + +const page_code_lint: PageConfig = { + id: WorkScreen.lint, + title: "Lint", + path: "/code/lint", +}; + +const page_design_icon: PageConfig = { + id: WorkScreen.icon, + title: "Icon", + path: "/design/icons", +}; + +const page_design_layout: PageConfig = { + id: WorkScreen.layout, + title: "Layout", + path: "/design/layout", +}; + +const page_design_lint: PageConfig = { + id: WorkScreen.lint, + title: "Lint", + path: "/design/lint", +}; + +const page_content_g11n: PageConfig = { + id: WorkScreen.g11n, + title: "Globalize", + path: "/content/globalize", +}; + +const page_about: PageConfig = { + id: WorkScreen.about, + title: "About", + path: "/about", +}; + +const page_toolbox_font_replacer: PageConfig = { + id: WorkScreen.tool_font_replacer, + title: "Font replacer", + path: "/toolbox/font-replacer", +}; + +const page_toolbox_desing_button_maker: PageConfig = { + id: WorkScreen.tool_desing_button_maker, + title: "Button Maker", + path: "/toolbox/button-maker", +}; + +const page_toolbox_meta_editor: PageConfig = { + id: WorkScreen.tool_meta_editor, + title: "Meta", + path: "/toolbox/meta-editor", +}; + +const page_toolbox_batch_meta_editor: PageConfig = { + id: WorkScreen.tool_batch_meta_editor, + title: "Batch Meta", + path: "/toolbox/batch-meta-editor", +}; + +const page_toolbox_data_mapper: PageConfig = { + id: WorkScreen.tool_data_mapper, + title: "Data mapper", + path: "/toolbox/data-mapper", +}; + +const page_scene_upload_steps_final: PageConfig = { + id: WorkScreen.scene_upload_steps_final, + title: "Review your scene", // not used + path: "/code/uploadsteps/final-upload", +}; + +const page_lint_fix_yourself: PageConfig = { + id: WorkScreen.lint_fix_yourself, + title: "Resovlve design errors", // not used + path: "/lint/by-layer/any-error/fix-yourself", +}; + +/** + * list of all pages + */ +const all_pages: PageConfig[] = [ + page_toolbox_data_mapper, + page_toolbox_batch_meta_editor, + page_toolbox_meta_editor, + page_toolbox_desing_button_maker, + page_toolbox_font_replacer, + page_content_g11n, + page_design_lint, + page_design_layout, + page_design_icon, + page_code_layout, + page_code_preview, + page_code_component, + page_code_lint, + // standalones + page_about, + page_scene_upload_steps_final, + page_lint_fix_yourself, +]; + +export const standalone_pages: PageConfig[] = [ + page_about, + page_scene_upload_steps_final, + page_lint_fix_yourself, +]; + +export function get_page_config(id: WorkScreen): PageConfig { + const _ = all_pages.find((p) => p.id === id); + if (_) { + return _; + } + throw `${id} is not found from registered page configs`; +} +/// +/// endregion page declarations +/// diff --git a/app/lib/navigation/router.ts b/app/lib/navigation/router.ts new file mode 100644 index 00000000..3ad2d29b --- /dev/null +++ b/app/lib/navigation/router.ts @@ -0,0 +1,9 @@ +import { MemoryRouter, BrowserRouter } from "react-router-dom"; + +export const getDedicatedRouter = () => + _is_in_iframe() ? MemoryRouter : BrowserRouter; + +function _is_in_iframe() { + // The page is in an iframe + return window.location !== window.parent.location; +} diff --git a/app/lib/navigation/work-screen.ts b/app/lib/navigation/work-screen.ts index 899ba115..b44fd405 100644 --- a/app/lib/navigation/work-screen.ts +++ b/app/lib/navigation/work-screen.ts @@ -1,5 +1,6 @@ export enum WorkScreen { about = "about", + /** todo: rename to code/preview */ code = "code", /** @deprecated only used for sendig event */ code_flutter = "code/flutter", @@ -9,6 +10,7 @@ export enum WorkScreen { layout = "layout", icon = "icon", lint = "lint", + lint_fix_yourself = "lint_fix_yourself", g11n = "g11n", dev = "dev", slot = "slot", @@ -18,4 +20,5 @@ export enum WorkScreen { tool_meta_editor = "tool_meta_editor", tool_batch_meta_editor = "tool_batch_meta_editor", tool_data_mapper = "tool_data_mapper", + scene_upload_steps_final = "scene_upload_steps_final", } diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/app/lib/pages/lint/error-by-layer-item.tsx new file mode 100644 index 00000000..aac24f80 --- /dev/null +++ b/app/lib/pages/lint/error-by-layer-item.tsx @@ -0,0 +1,65 @@ +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"; + +interface IErrorByLayerItem { + icon: boolean; + level: Level; + expand: boolean; + error: { + id: string; + name: string; + userMessage: string; + }; +} + +const CloseIcon = require("../../../lib/components/assets/close.svg") as string; +const ExpandIcon = + require("../../../lib/components/assets/expand.svg") as string; + +export function ErrorByLayerItem(props: IErrorByLayerItem) { + return ( + + + {props.icon && } + {props.error.name} + + {props.expand ? : } + + {props.error.userMessage} + + ); +} + +const Wrapper = styled.div` + background: #fff; + + &:hover { + background: #fcfcfc; + } +`; + +const Inner = styled.div` + display: flex; +`; +const Title = styled.h6` + margin: 0; + + font-size: 16px; + font-weight: 500; + line-height: 20px; + margin-right: auto; +`; + +const SubTitle = styled.h6` + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 14px; + margin-top: 4px; + max-width: 262px; + + color: #666666; +`; diff --git a/app/lib/pages/lint/fix-your-self.tsx b/app/lib/pages/lint/fix-your-self.tsx new file mode 100644 index 00000000..f07d4283 --- /dev/null +++ b/app/lib/pages/lint/fix-your-self.tsx @@ -0,0 +1,52 @@ +import styled from "@emotion/styled"; +import React from "react"; +import { useHistory } from "react-router"; +import { BlackButton } from "../../components/style/global-style"; +import { LintItemRow } from "../../lint"; +import { rowDummy } from "../../lint/lint-list-view"; +import { LintProcessPaginator } from "../../lint/lint-process-paginator"; + +export function FixYourSelf() { + const history = useHistory(); + const LeftArrow = require("../../components/assets/left-arrow.svg"); + return ( + + { + history.goBack(); + }} + > + + + + + + + + + Next Layer + + ); +} + +const Wrapper = styled.div` + padding: 16px 8px; +`; + +const BackIcon = styled.div` + margin-bottom: 24px; +`; + +const Pagination = styled.div` + position: absolute; + bottom: 83px; + right: 16px; +`; + +const NextLayerBtn = styled.button` + ${BlackButton} + width: calc(100% - 32px); + position: absolute; + bottom: 16px; + left: 16px; +`; diff --git a/app/lib/pages/lint/lint-error-icon.tsx b/app/lib/pages/lint/lint-error-icon.tsx deleted file mode 100644 index 0c5bdfc8..00000000 --- a/app/lib/pages/lint/lint-error-icon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from "react"; - -export enum LintError { - text = "missing-text-style", - name = "name-error", - mdi = "mdi_texture", - color = "missing-color-style-error", -} - -interface Props { - id?: LintError; -} - -export function LintErrorIcon(props: Props) { - const MdiTextureIcon = - require("../../../lib/components/assets/mdi-texture.svg") as string; - const ColorErrorIcon = - require("../../../lib/components/assets/missing-color-style-error.svg") as string; - const TextErrorIcon = - require("../../../lib/components/assets/missing-text.svg") as string; - const NameErrorIcon = - require("../../../lib/components/assets/name-error.svg") as string; - - switch (props.id) { - case LintError.text: - return ; - case LintError.name: - return ; - case LintError.mdi: - return ; - case LintError.color: - return ; - default: - return <>; - } -} diff --git a/app/lib/pages/lint/lint-option-choice-item.tsx b/app/lib/pages/lint/lint-option-choice-item.tsx new file mode 100644 index 00000000..bed71b2d --- /dev/null +++ b/app/lib/pages/lint/lint-option-choice-item.tsx @@ -0,0 +1,88 @@ +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +import * as React from "react"; +import { Column, Row } from "../../components/style/global-style"; + +interface Props { + selected: boolean; + placeholder?: boolean; + choice: { + title: string; + explanation: string; + }; +} + +export function OptionChoiceItem(props: Props) { + const RightArrowIcon = + require("../../../lib/components/assets/right-arrow.svg") as string; + return ( + + + + + + + {props.choice.title} + {props.choice.explanation} + + + + ); +} + +const Wrapper = styled.div` + cursor: pointer; + &:hover { + img { + fill: #8b8b8b; + } + h6 { + color: #8a8a8a; + } + } +`; + +const Icon = styled.img` + margin-right: 15px; +`; + +const StyledArrow = styled.div<{ selected: boolean }>` + cursor: pointer; + + ${(props) => + props.selected + ? css` + fill: "#000"; + ` + : props.placeholder + ? css` + fill: "#DEDEDE"; + ` + : css` + fill: "rgba(255,255,255,0)"; + + &:hover { + fill: "#8B8B8B;"; + } + `} +`; + +const Title = styled.h6` + margin: 0; + + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 17px; + + color: #000000; +`; + +const SubTitle = styled.span` + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + + color: #8a8a8a; +`; diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index 435b0392..2b511b39 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -2,197 +2,50 @@ import { Button, Typography } from "@material-ui/core"; import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks"; import * as React from "react"; import { Preview } from "../../components/preview"; -import { LintTreeView } from "../../lint"; +import { LintItemRow, LintTreeView } from "../../lint"; import { EK_FOCUS_REQUEST } from "../../constants/ek.constant"; import styled from "@emotion/styled"; -import { LintLevelIndicator } from "./lint-level-indicator"; -import { Level } from "./lint-colors"; +import { LintLevelIndicator } from "../../lint/lint-level-indicator"; import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; +import { + BlackButton, + TransparencyButton, +} from "../../components/style/global-style"; +import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; +import { useSingleSelection } from "../../utils/plugin-hooks"; +import { rowDummy } from "../../lint/lint-list-view"; +import { FixYourSelf } from "./fix-your-self"; +import { useHistory } from "react-router"; interface State { feedbacks: Array; + selection: any; } -const TestObj = [ - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3460;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3460;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3460;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3460;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3465;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3465;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3465;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3465;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3470;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3470;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3470;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3470;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3475;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3475;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3475;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3475;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3695;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3695;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3695;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3695;2787:3435;2831:11867", - }, - ], - }, - }, - }, -]; +export const LintScreen = () => { + const histoy = useHistory(); + const [feedbacks, setFeedbacks] = React.useState([]); -export class LintScreen extends React.Component { - constructor(props) { - super(props); + const selection = useSingleSelection(); - this.state = { - feedbacks: [], - }; - } + console.log(feedbacks.length === 0); + // console.log("selection: ", _s); - componentDidMount() { - window.addEventListener("message", (ev: MessageEvent) => { - const msg = ev.data.pluginMessage; - if (msg.type == _APP_EVENT_LINT_RESULT_EK) { - const feedbacks = msg.data as Array; - this.setState((state, props) => { - return { feedbacks: feedbacks }; - }); - } - }); + window.addEventListener("message", (ev: MessageEvent) => { + const msg = ev.data.pluginMessage; + if (msg.type == _APP_EVENT_LINT_RESULT_EK) { + const _feedbacks = msg.data as Array; + setFeedbacks(_feedbacks); + } + }); + + function countSelection() { + // FIXME: just tmp + // return selection.node.children.length; + return 3; } - onFeedbackTap(feedback: ReflectLintFeedback) { + function onFeedbackTap(feedback: ReflectLintFeedback) { const targetNodeId = feedback.node.id; console.log(targetNodeId); // move to target element @@ -209,40 +62,96 @@ export class LintScreen extends React.Component { ); } - render() { - function ErrorLineItem() { - return ( - <> - - {feedbacks.map((item, i) => { - return ( - - - - - ); - })} - - - ); - } + function handleSelectionLayer() { + return ( + <> + {feedbacks.length === 0 ? ( + <> + + Run lint on “{_makeshortname(selection.node.name)}” + + + Run lint under “{_makeshortname(selection.node.name)}” Across{" "} + {countSelection()} + layers. + + + ) : ( + <> + {feedbacks.length} Improvements found + + Across 24 layers, there were 4 must-fix errors +
+ and 8 warnings. + + + )} + + ); + } - // const { feedbacks } = this.state; - const feedbacks = TestObj; + function ErrorLineItem() { return ( <> - - - {feedbacks.length} Improvements found - - Across 24 layers, there were 4 must-fix errors and 8 - warnings. - - {ErrorLineItem()} - + + {feedbacks.map((item, i) => { + return ( + onFeedbackTap(item)}> + + + + ); + })} + ); } + + return ( + <> + + + {!!selection ? ( + <>{handleSelectionLayer()} + ) : ( + <> + {`Select a layer / frame to run lint on :)`} + + )} + + {ErrorLineItem()} + {feedbacks.length === 0 ? ( + + Run lint + + ) : ( + + { + histoy.push("/lint/by-layer/any-error/fix-yourself"); + }} + > + Jump to first error + + { + setFeedbacks([]); + }} + > + Clear + + + )} + + + ); +}; + +function _makeshortname(origin: string): string { + return origin; } const ErrorWrapper = styled.div` @@ -259,6 +168,8 @@ const ErrorTitle = styled.h6` `; const ErrorComent = styled.h6` + margin: 0; + margin-top: 5px; font-size: 12px; font-style: normal; font-weight: 400; @@ -272,21 +183,80 @@ const ErrorComent = styled.h6` } `; +const EmptyMessage = styled.div` + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + text-align: center; + + color: #8d8d8d; +`; + const ErrorList = styled.ul` padding: 0; `; +const UnderBtnWrapper = styled.div` + width: calc(100% - 32px); + display: flex; + position: absolute; + bottom: 16px; +`; + +const RunLintButtton = styled.button` + ${BlackButton} + width: calc(100% - 32px); + position: absolute; + bottom: 16px; +`; + +const FirstErrorButton = styled.button` + ${BlackButton} + width: 66.6666%; + margin-right: 8px; +`; + +const ClearButton = styled.button` + ${TransparencyButton} + width: 33.3333%; +`; + +const RunLintTitle = styled.h2` + // Run lint on “example” + margin: 0; + margin-top: 20px; + font-weight: 500; + font-size: 16px; + line-height: 20px; + + color: #000000; +`; + +const RunLintSubTitle = styled.h5` + margin: 0; + margin-top: 5px; + font-weight: normal; + font-size: 12px; + line-height: 14px; + + color: #959595; +`; + const List = styled.li` display: flex; align-items: center; - + cursor: pointer; margin-bottom: 12px; + &:last-child { margin-bottom: 0; } `; const Label = styled.h6` + margin: 0; + margin-top: 5px; font-style: normal; font-weight: normal; font-size: 13px; diff --git a/app/lib/utils/plugin-init/init-target-platform.ts b/app/lib/utils/plugin-init/init-target-platform.ts index 32d47cb2..7bec58a1 100644 --- a/app/lib/utils/plugin-init/init-target-platform.ts +++ b/app/lib/utils/plugin-init/init-target-platform.ts @@ -11,6 +11,10 @@ export let TARGET_PLATFORM: TargetPlatform; */ 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__", diff --git a/app/package.json b/app/package.json index 1f7f0eb7..a33a4be8 100644 --- a/app/package.json +++ b/app/package.json @@ -45,6 +45,7 @@ "devDependencies": { "@types/lodash": "^4.14.172", "@types/react": "^17.0.3", - "@types/react-dom": "^16.9.8" + "@types/react-dom": "^16.9.8", + "@types/react-router": "^5.1.16" } } diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts index 00986a3f..03dc7887 100644 --- a/packages/plugin-sdk-app/index.ts +++ b/packages/plugin-sdk-app/index.ts @@ -34,9 +34,12 @@ const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( "co.grida.assistant" ); export class PluginSdk { - static window: Window; + private static _window: Window; + static get window(): Window { + return this._window; + } static initializeWindow(window: Window) { - this.window = window; + this._window = window; } // region general canvas api @@ -88,6 +91,7 @@ export class PluginSdk { namespace: PLUGIN_SDK_NS_STORAGE, key: PLUGIN_SDK_EK_STORAGE_ALIAS.set, data: >{ + type: "set-item", key: key, value: value, }, @@ -107,6 +111,7 @@ export class PluginSdk { namespace: PLUGIN_SDK_NS_STORAGE, key: PLUGIN_SDK_EK_STORAGE_ALIAS.get, data: >{ + type: "get-item", key: key, }, }); @@ -235,6 +240,7 @@ export class PluginSdk { // endregion canvas static postMessage(event: TransportPluginEvent) { + // console.log("::plugin-sdk post message", event); PluginSdk.window.postMessage( { pluginMessage: event, diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index f9b4536e..657ae549 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -104,6 +104,10 @@ export class PluginSdkService { } if (event.namespace == "__INTERNAL__") { + // console.log( + // 'handling internal ivent with event ns - "__INTERNAL__"', + // event + // ); return handleInternalEvent(event); } @@ -185,7 +189,7 @@ export class PluginSdkService { function handleInternalEvent(event: HanderProps) { if (event.key == "sync-target-platform") { - return __syncTargetPlatformForCodeThread(event.data); + return response(event.id, __syncTargetPlatformForCodeThread(event.data)); } return response(event.id, true); } @@ -299,7 +303,7 @@ export function handleNotify(props: HanderProps) { response(props.id, true); } -function handleStorageEvent(props: HanderProps) { +async function handleStorageEvent(props: HanderProps) { const _get_dedicated_storage = (): IStorage => { switch (TARGET_PLATFORM) { case TargetPlatform.webdev: { @@ -314,14 +318,12 @@ function handleStorageEvent(props: HanderProps) { const _storage = _get_dedicated_storage(); switch (props.data.type) { case "get-item": - _storage.getItem(props.data.key).then((d) => { - response(props.id, { value: d }); - }); + const d = await _storage.getItem(props.data.key); + response(props.id, { value: d }); break; case "set-item": - _storage.setItem(props.data.key, props.data.value).then(() => { - response(props.id, true); // setting data to storage does not require response data payload (using `true`.). - }); + await _storage.setItem(props.data.key, props.data.value); + response(props.id, true); // setting data to storage does not require response data payload (using `true`.). break; } } @@ -383,10 +385,12 @@ function response( }; switch (TARGET_PLATFORM) { case TargetPlatform.webdev: { - window.postMessage(msg, undefined); + window.postMessage({ pluginMessage: msg }, undefined); + break; } case TargetPlatform.figma: { figma.ui.postMessage(msg); + break; } } diff --git a/packages/plugin-sdk-service/storage/payload-handle.ts b/packages/plugin-sdk-service/storage/payload-handle.ts index eca4c973..7eee8109 100644 --- a/packages/plugin-sdk-service/storage/payload-handle.ts +++ b/packages/plugin-sdk-service/storage/payload-handle.ts @@ -1,6 +1,14 @@ export function encode(payload: T): string { return JSON.stringify(payload); } + export function decode(payload: string): T { - return JSON.parse(payload) as T; + try { + if (payload === null || payload === undefined) { + return JSON.parse(payload) as T; + } + return null; + } catch (_) { + return null; + } } diff --git a/packages/pugin-app/index.tsx b/packages/pugin-app/index.tsx index 97bf9507..c0cddde7 100644 --- a/packages/pugin-app/index.tsx +++ b/packages/pugin-app/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useSetRecoilState } from "recoil"; import Axios from "axios"; import { @@ -17,7 +17,9 @@ import { } from "../../app/lib/utils/plugin-init/init-target-platform"; export function PluginApp(props: { platform: TargetPlatform; children: any }) { + const [booting, setBooting] = useState(true); useEffect(() => { + // console.log("start initializing plugin app..."); PluginSdk.initializeWindow(parent); window.addEventListener("message", (ev: MessageEvent) => { const message: TransportPluginEvent = ev.data.pluginMessage; @@ -42,12 +44,29 @@ export function PluginApp(props: { platform: TargetPlatform; children: any }) { }); // init platform - initializeTargetPlatform(props.platform).then(() => { - console.info("PluginApp initiallized"); - }); + initializeTargetPlatform(props.platform) + .then(() => {}) + .finally(() => { + console.info("PluginApp initiallized"); + setBooting(false); + }); }, []); - return
{props.children}
; + if (booting) { + return ( +
+ Loading.. +
+ ); + } + + return <>{props.children}; } function registerPluginSdkHandler(message: TransportPluginEvent) { diff --git a/yarn.lock b/yarn.lock index 443b6570..ade31086 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2894,6 +2894,11 @@ dependencies: "@types/unist" "*" +"@types/history@*": + version "4.7.9" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" + integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ== + "@types/html-minifier-terser@^5.0.0": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50" @@ -3016,6 +3021,14 @@ dependencies: "@types/react" "^16" +"@types/react-router@^5.1.16": + version "5.1.16" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99" + integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-transition-group@^4.2.0": version "4.4.1" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"