From 19d02ce28bf5ac7bf4f9fd67eb43cf0d92f03158 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 11 Oct 2021 07:52:14 +0900 Subject: [PATCH 1/6] temporarillly disable button detection --- packages/designto-token/main.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts index 0e14e33bd..36146a94b 100644 --- a/packages/designto-token/main.ts +++ b/packages/designto-token/main.ts @@ -169,10 +169,10 @@ function handleNode( } // - button - - const _detect_if_button = detectIf.button(node); - if (_detect_if_button.result) { - return tokenizeButton.fromManifest(node, _detect_if_button.data); - } + // const _detect_if_button = detectIf.button(node); + // if (_detect_if_button.result) { + // return tokenizeButton.fromManifest(node, _detect_if_button.data); + // } // ------------------------------------------------------------------------- // --------------------------- Detected tokens ----------------------------- From baa2f63a9e2d841188f2d81c5e058b63b9abb621 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 11 Oct 2021 09:21:54 +0900 Subject: [PATCH 2/6] fallbacks `scale` to `min` --- packages/designto-token/token-layout/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/designto-token/token-layout/index.ts b/packages/designto-token/token-layout/index.ts index e8a99d085..2132dc04b 100644 --- a/packages/designto-token/token-layout/index.ts +++ b/packages/designto-token/token-layout/index.ts @@ -285,13 +285,13 @@ function stackChild({ // throw `${ogchild.toString()} has no constraints. this can happen when node under group item tokenization is incomplete. this is engine's error.`; } else { switch (ogchild.constraints.horizontal) { + case "SCALE": /** scale fallbacks to min */ case "MIN": constraint.left = _l; break; case "MAX": constraint.right = _r; break; - case "SCALE": /** scale fallbacks to stretch */ case "STRETCH": constraint.left = _l; constraint.right = _r; @@ -331,13 +331,13 @@ function stackChild({ break; } switch (ogchild.constraints.vertical) { + case "SCALE": /** scale fallbacks to min */ case "MIN": constraint.top = _t; break; case "MAX": constraint.bottom = _b; break; - case "SCALE": /** scale fallbacks to stretch */ case "STRETCH": constraint.top = _t; constraint.bottom = _b; From 259402833582ca19722665e8ba1c0b60b9d5a791 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Dec 2021 21:49:12 +0900 Subject: [PATCH 3/6] bump coli --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index 83d3cb546..308d16dfc 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit 83d3cb546b753859cb23ef2a79346ac438aae563 +Subproject commit 308d16dfcd4b0f41b6b8d6efe142a7839484a033 From 5219db1e987df97ca7fa6bc68e6b627e1eb2ef1c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 6 Jan 2022 14:06:23 +0900 Subject: [PATCH 4/6] merge --- .github/workflows/docs-deploy.yml | 8 +- .gitignore | 9 +- CONTRIBUTING.md | 24 +- README.md | 2 + docs/component-property-interfacing-auto.md | 2 +- docs/figma-autolayout.md | 2 +- docs/figma-text-shadow.md | 2 +- docs/flags/.gitignore | 4 + docs/flags/README.md | 5 + docs/item-order.md | 2 +- editor-packages/base-sdk | 2 +- editor-packages/editor-canvas/README.md | 1 + .../editor-canvas/canvas/canvas.tsx | 32 + .../editor-canvas/canvas/index.ts | 0 editor-packages/editor-canvas/frame/frame.tsx | 5 + editor-packages/editor-canvas/frame/index.ts | 0 editor-packages/editor-canvas/index.ts | 1 + editor-packages/editor-canvas/nodes/text.tsx | 6 + editor-packages/editor-canvas/package.json | 5 + editor/babel.config.js | 5 + editor/components/app-runner/app-runner.tsx | 20 +- ...code-sandbox-runner.tsx => csb-runner.tsx} | 0 editor/components/app-runner/index.ts | 2 +- .../app-runner/react-app-runner.tsx | 2 +- .../app-runner/vanilla-app-runner.tsx | 87 +- .../canvas/controller-zoom-control.tsx | 155 + editor/components/canvas/default-canvas.tsx | 5 - editor/components/canvas/index.ts | 3 +- .../components/canvas/interactive-canvas.tsx | 217 + .../index.tsx | 13 +- .../code-editor/monaco-mock-empty.tsx | 31 + editor/components/code-editor/monaco.tsx | 8 +- .../code-options-control.tsx | 223 + .../framework-options.ts | 129 + .../codeui-code-options-control/index.ts | 2 + .../README.md | 0 .../asis-preview-figma-embed.tsx} | 2 +- .../components/design-preview-as-is/index.ts | 1 + .../design-preview.tsx} | 10 +- editor/components/design-preview/index.ts | 1 + editor/components/editor/README.md | 1 + .../editor-appbar-fragment-for-canvas.tsx | 35 + ...editor-appbar-fragment-for-code-editor.tsx | 60 + .../editor-appbar-fragment-for-sidebar.tsx | 48 + .../editor-appbar-icon-button.tsx | 13 + .../editor/editor-appbar/editor-appbar.tsx | 26 + .../components/editor/editor-appbar/index.ts | 11 + .../index.tsx | 32 + .../editor-layer-heriarchy-controller.ts | 82 + .../editor-layer-hierarchy-item.tsx | 152 + .../editor-layer-hierarchy-tree.tsx | 93 + .../editor/editor-layer-hierarchy/index.ts | 1 + .../editor-pages-list/editor-page-item.tsx | 36 + .../editor-pages-list/editor-pages-list.tsx | 55 + .../editor/editor-pages-list/index.ts | 1 + .../editor/editor-sidebar/editor-sidebar.tsx | 25 + .../components/editor/editor-sidebar/index.ts | 1 + editor/components/editor/index.ts | 3 + editor/components/home-input/README.md | 0 .../home-input/home-input-appbar.tsx | 131 + .../home-primary-input-next-button.tsx | 23 + editor/components/home-input/index.ts | 2 + editor/components/home/README.md | 0 .../home/cards/base-home-scene-card.tsx | 153 + .../cards/builtin-demo-file-card.tsx} | 18 +- .../cards/builtin-import-new-design-card.tsx | 26 + .../home/cards/card-variant-component.tsx | 46 + .../home/cards/card-variant-file.tsx | 34 + .../home/cards/card-variant-scene.tsx | 33 + editor/components/home/cards/index.ts | 11 + .../home-card-group-header.tsx | 54 + .../home/home-card-group/home-card-group.tsx | 43 + .../components/home/home-card-group/index.ts | 2 + .../home/home-side-bar-tree-item.tsx | 110 + editor/components/home/home-side-bar-tree.tsx | 144 + editor/components/home/home-side-bar.tsx | 12 + editor/components/home/index.ts | 9 + editor/components/home/texts/home-heading.tsx | 10 + editor/components/home/texts/index.ts | 1 + editor/components/index.ts | 2 +- .../preview-and-run/preview-and-run-panel.tsx | 28 +- .../index.tsx | 120 + .../import-new-design-card.tsx | 30 - editor/components/recent-design-card/index.ts | 2 - .../recent-design-card-list.tsx | 42 - .../recent-design-card/recent-design-card.tsx | 77 - editor/components/scene-preview/index.ts | 1 - .../side-navigation/side-navigation.tsx | 5 +- editor/core/README.md | 0 editor/core/actions/index.ts | 31 + editor/core/dispatch/index.ts | 20 + editor/core/reducers/editor-reducer.ts | 27 + .../core/reducers/history/history-reducer.ts | 99 + editor/core/reducers/history/index.ts | 1 + editor/core/reducers/index.ts | 1 + editor/core/reducers/workspace-reducer.ts | 18 + editor/core/states/editor-context.ts | 6 + editor/core/states/editor-initial-state.ts | 19 + editor/core/states/editor-state.ts | 30 + editor/core/states/history-initial-state.ts | 25 + editor/core/states/history-state.ts | 14 + editor/core/states/index.tsx | 14 + editor/core/states/state-provider.tsx | 24 + editor/core/states/use-editor-state.ts | 13 + editor/core/states/use-workspace-state.ts | 13 + editor/core/states/workspace-initial-state.ts | 46 + editor/core/states/workspace-state.ts | 12 + editor/core/utility-types/index.ts | 1 + editor/core/utility-types/pending-state.ts | 12 + editor/hooks/index.ts | 1 + editor/hooks/use-auth-state.ts | 7 +- editor/hooks/use-design.ts | 100 +- editor/hooks/use-figma-access-token.ts | 26 + editor/icons/home-logo.tsx | 38 + editor/icons/icon-github.tsx | 19 + editor/icons/icon-notification-bell.tsx | 22 + editor/icons/icon-props.tsx | 20 + editor/icons/icon-setting-gear-outlined.tsx | 22 + editor/icons/index.ts | 3 + .../default-editor-workspace-layout.tsx | 12 +- .../workspace-bottom-panel-dock-layout.tsx | 2 - .../workspace-content-panel-grid-layout.tsx | 11 +- .../layouts/panel/workspace-content-panel.tsx | 25 +- editor/next.config.js | 18 +- editor/package.json | 17 +- editor/pages/_app.tsx | 114 +- editor/pages/components/index.tsx | 46 + .../vscode/grida-explorer-preview/index.tsx | 3 +- editor/pages/embed/vscode/index.tsx | 34 +- editor/pages/figma/inspect-component.tsx | 14 +- editor/pages/figma/to-reflect.tsx | 2 +- editor/pages/figma/to-token.tsx | 2 +- editor/pages/files/[key]/[id].tsx | 122 + editor/pages/files/[key]/index.tsx | 84 + editor/pages/files/index.tsx | 37 + editor/pages/import/index.tsx | 6 + editor/pages/index.tsx | 42 +- editor/pages/integrations/index.tsx | 26 + editor/pages/preferences/access-tokens.tsx | 478 +- editor/pages/preferences/index.tsx | 1 + editor/pages/to-code/index.tsx | 358 +- editor/public/favicon.ico | Bin 15086 -> 0 bytes editor/public/favicon.png | Bin 0 -> 751 bytes editor/public/vercel.svg | 4 - editor/query/to-code-options-from-query.ts | 70 + .../current-scene-build-repository/index.ts | 5 - .../figma-design-repository/index.ts | 39 + editor/repository/index.ts | 2 +- editor/repository/local-scene/index.ts | 9 - .../scene-build-repository/index.ts | 4 - .../repository/workspace-repository/index.ts | 61 + editor/scaffolds/README.md | 1 + editor/scaffolds/canvas/canvas.tsx | 77 + editor/scaffolds/canvas/index.ts | 1 + editor/scaffolds/editor/_providers.tsx | 40 + editor/scaffolds/editor/editor.tsx | 334 + editor/scaffolds/editor/index.ts | 3 + editor/scaffolds/editor/skeleton.tsx | 115 + editor/scaffolds/editor/warmup.ts | 156 + .../home-dashboard/home-dashboard.tsx | 113 + editor/scaffolds/home-dashboard/index.ts | 1 + .../recent-design-card-list.tsx | 42 + editor/scaffolds/home-input/index.tsx | 159 + .../fimga-file-store/figma-file-store.ts | 129 + editor/store/fimga-file-store/index.ts | 1 + editor/store/index.ts | 1 - editor/store/recent-designs-store/index.ts | 23 - .../index.ts | 8 +- editor/theme/colors.ts | 1 + editor/theme/index.ts | 1 + editor/tsconfig.json | 5 + editor/utils/design-query/index.ts | 29 + editor/utils/firebase/index.ts | 21 + externals/coli | 2 +- externals/design-sdk | 2 +- externals/reflect-core | 2 +- package.json | 2 +- packages/builder-config/input/design-input.ts | 62 +- packages/builder-css-styles/index.ts | 1 + packages/builder-css-styles/margin/index.ts | 56 + .../widget-core/widget-with-style.ts | 14 +- .../widget-instanciation/index.ts | 39 +- .../widgets-native/container/index.ts | 35 +- .../widgets-native/flex/index.ts | 33 +- .../widgets-native/html-svg/index.ts | 15 +- .../index.ts | 35 +- .../builder-web-core/widgets-native/index.ts | 2 +- .../widgets-native/stack/index.ts | 31 +- .../from-reusable-widget-tree.ts | 4 +- .../react-styled-components-module-builder.ts | 23 +- .../designto-code/universal/design-to-code.ts | 72 +- .../painting/painting-text-style.ts | 2 +- packages/designto-react/app/index.ts | 2 +- packages/designto-token/config/config.ts | 2 +- packages/designto-token/main.ts | 1 + .../designto-token/support-flags/index.ts | 61 +- .../support-flags/token-heading/index.ts | 75 + .../support-flags/token-p/index.ts | 16 + .../support-flags/token-span/index.ts | 16 + .../support-flags/token-wh-fix/index.ts | 57 + .../support-flags/token-wh/index.ts | 98 + .../support-flags/token-wrap/index.ts | 8 +- .../designto-token/token-graphics/vector.ts | 10 +- .../designto-token/token-masking/index.ts | 19 +- .../compose-instanciation.ts | 16 +- .../compose-wrapped-with-positioned.ts | 4 +- .../tokens-to-web-widget/index.ts | 13 +- .../support-assets/fetch-all-assets/index.ts | 18 +- .../index.ts | 41 +- packages/support-components/define.ts | 208 +- packages/support-components/main.ts | 61 +- .../tokens/token-master-component.ts | 10 +- packages/support-flags/----disable/README.md | 5 +- packages/support-flags/--action/README.md | 5 +- packages/support-flags/--artwork/README.md | 4 + packages/support-flags/--as-avatar/README.md | 8 +- packages/support-flags/--as-br/README.md | 5 +- packages/support-flags/--as-button/README.md | 8 +- packages/support-flags/--as-char/README.md | 4 + .../support-flags/--as-checkbox/README.md | 9 +- packages/support-flags/--as-divider/README.md | 9 +- packages/support-flags/--as-h1/README.md | 4 + packages/support-flags/--as-h1/index.ts | 30 + packages/support-flags/--as-h2/README.md | 4 + packages/support-flags/--as-h2/index.ts | 30 + packages/support-flags/--as-h3/README.md | 4 + packages/support-flags/--as-h3/index.ts | 30 + packages/support-flags/--as-h4/README.md | 4 + packages/support-flags/--as-h4/index.ts | 30 + packages/support-flags/--as-h5/README.md | 4 + packages/support-flags/--as-h5/index.ts | 30 + packages/support-flags/--as-h6/README.md | 4 + packages/support-flags/--as-h6/index.ts | 30 + packages/support-flags/--as-input/README.md | 9 +- packages/support-flags/--as-list/README.md | 9 +- packages/support-flags/--as-mdi/README.md | 13 +- packages/support-flags/--as-modal/README.md | 9 +- packages/support-flags/--as-nbsp/README.md | 4 + packages/support-flags/--as-p/README.md | 4 + packages/support-flags/--as-p/index.ts | 21 + .../support-flags/--as-resizable/README.md | 5 +- packages/support-flags/--as-size/README.md | 10 +- packages/support-flags/--as-slider/README.md | 9 +- packages/support-flags/--as-span/README.md | 4 + packages/support-flags/--as-span/index.ts | 27 + .../support-flags/--as-text-group/README.md | 4 + packages/support-flags/--as-toggle/README.md | 9 +- packages/support-flags/--as-wrap/README.md | 17 +- .../support-flags/--break-color/README.md | 10 +- .../support-flags/--break-component/README.md | 10 +- .../support-flags/--camera-display/README.md | 12 +- packages/support-flags/--class/README.md | 9 +- packages/support-flags/--content-id/README.md | 5 +- packages/support-flags/--cursor/README.md | 14 +- .../--dynamic-container/README.md | 4 + .../support-flags/--dynamic-item/README.md | 4 + .../support-flags/--empty-content/README.md | 10 +- packages/support-flags/--export-as/README.md | 4 + packages/support-flags/--export-gif/README.md | 7 +- packages/support-flags/--export-jpg/README.md | 4 + packages/support-flags/--export-pdf/README.md | 4 + packages/support-flags/--export-png/README.md | 4 + packages/support-flags/--export-svg/README.md | 4 + packages/support-flags/--fix-bottom/README.md | 4 + packages/support-flags/--fix-height/README.md | 4 + packages/support-flags/--fix-height/index.ts | 10 + packages/support-flags/--fix-width/README.md | 4 + packages/support-flags/--fix-width/index.ts | 9 + packages/support-flags/--hash/README.md | 27 +- packages/support-flags/--height/README.md | 4 + packages/support-flags/--height/index.ts | 18 + packages/support-flags/--href/README.md | 12 +- packages/support-flags/--id/README.md | 16 +- packages/support-flags/--ignore/README.md | 13 +- .../support-flags/--is-input-caret/README.md | 9 +- .../--is-native-android-ui/README.md | 5 +- .../--is-native-ios-ui/README.md | 5 +- packages/support-flags/--max-height/README.md | 4 + packages/support-flags/--max-height/index.ts | 18 + packages/support-flags/--max-width/README.md | 4 + packages/support-flags/--max-width/index.ts | 18 + packages/support-flags/--media/README.md | 4 + packages/support-flags/--min-height/README.md | 4 + packages/support-flags/--min-height/index.ts | 18 + packages/support-flags/--min-width/README.md | 4 + packages/support-flags/--min-width/index.ts | 18 + packages/support-flags/--module/README.md | 5 +- .../support-flags/--motion-on-hover/README.md | 11 +- packages/support-flags/--motion/README.md | 11 +- packages/support-flags/--onclick/README.md | 9 +- packages/support-flags/--overflow/README.md | 5 +- .../support-flags/--position-fixed/README.md | 5 +- .../support-flags/--position-sticky/README.md | 4 + .../support-flags/--proc-ignore/README.md | 5 +- packages/support-flags/--proc-skip/README.md | 5 +- .../support-flags/--responsive-id/README.md | 31 +- packages/support-flags/--root/README.md | 20 +- packages/support-flags/--scope/README.md | 25 +- packages/support-flags/--scroll/README.md | 5 +- .../support-flags/--text-template/README.md | 9 +- packages/support-flags/--use-flag/README.md | 5 +- packages/support-flags/--video/README.md | 4 + .../support-flags/--webview-src/README.md | 5 +- packages/support-flags/--width/README.md | 4 + packages/support-flags/--width/index.ts | 18 + .../--x-code-component/README.md | 7 +- .../support-flags/--x-code-static/README.md | 5 +- .../support-flags/--x-lottie-view/README.md | 5 +- packages/support-flags/README.md | 2 +- packages/support-flags/docs/----disable.md | 12 + packages/support-flags/docs/--action.md | 12 + packages/support-flags/docs/--artwork.md | 50 + packages/support-flags/docs/--as-avatar.md | 17 + packages/support-flags/docs/--as-br.md | 22 + packages/support-flags/docs/--as-button.md | 17 + packages/support-flags/docs/--as-char.md | 29 + packages/support-flags/docs/--as-checkbox.md | 18 + packages/support-flags/docs/--as-divider.md | 18 + packages/support-flags/docs/--as-h1.md | 70 + packages/support-flags/docs/--as-h2.md | 70 + packages/support-flags/docs/--as-h3.md | 70 + packages/support-flags/docs/--as-h4.md | 70 + packages/support-flags/docs/--as-h5.md | 70 + packages/support-flags/docs/--as-h6.md | 70 + packages/support-flags/docs/--as-input.md | 18 + packages/support-flags/docs/--as-list.md | 18 + packages/support-flags/docs/--as-mdi.md | 22 + packages/support-flags/docs/--as-modal.md | 18 + packages/support-flags/docs/--as-nbsp.md | 47 + packages/support-flags/docs/--as-p.md | 59 + packages/support-flags/docs/--as-resizable.md | 14 + packages/support-flags/docs/--as-size.md | 19 + packages/support-flags/docs/--as-slider.md | 18 + packages/support-flags/docs/--as-span.md | 70 + .../support-flags/docs/--as-text-group.md | 14 + packages/support-flags/docs/--as-toggle.md | 18 + packages/support-flags/docs/--as-wrap.md | 84 + packages/support-flags/docs/--break-color.md | 19 + .../support-flags/docs/--break-component.md | 19 + .../support-flags/docs/--camera-display.md | 21 + packages/support-flags/docs/--class.md | 18 + packages/support-flags/docs/--content-id.md | 14 + packages/support-flags/docs/--cursor.md | 23 + .../support-flags/docs/--dynamic-container.md | 14 + packages/support-flags/docs/--dynamic-item.md | 14 + .../support-flags/docs/--empty-content.md | 19 + .../README.md => docs/--exact-height.md} | 11 + .../README.md => docs/--exact-width.md} | 11 + packages/support-flags/docs/--export-as.md | 17 + packages/support-flags/docs/--export-gif.md | 16 + packages/support-flags/docs/--export-jpg.md | 0 packages/support-flags/docs/--export-pdf.md | 0 packages/support-flags/docs/--export-png.md | 0 packages/support-flags/docs/--export-svg.md | 0 packages/support-flags/docs/--export.md | 0 packages/support-flags/docs/--fix-bottom.md | 18 + packages/support-flags/docs/--fix-height.md | 53 + packages/support-flags/docs/--fix-width.md | 39 + packages/support-flags/docs/--hash.md | 36 + packages/support-flags/docs/--height.md | 127 + packages/support-flags/docs/--href.md | 21 + packages/support-flags/docs/--id.md | 25 + packages/support-flags/docs/--ignore.md | 22 + .../support-flags/docs/--is-input-caret.md | 18 + .../docs/--is-native-android-ui.md | 14 + .../support-flags/docs/--is-native-ios-ui.md | 14 + packages/support-flags/docs/--max-height.md | 50 + packages/support-flags/docs/--max-width.md | 50 + packages/support-flags/docs/--media.md | 0 packages/support-flags/docs/--min-height.md | 50 + packages/support-flags/docs/--min-width.md | 50 + packages/support-flags/docs/--module.md | 14 + .../support-flags/docs/--motion-on-hover.md | 20 + packages/support-flags/docs/--motion.md | 20 + packages/support-flags/docs/--onclick.md | 18 + packages/support-flags/docs/--overflow.md | 18 + .../support-flags/docs/--position-fixed.md | 3 + .../support-flags/docs/--position-sticky.md | 1 + packages/support-flags/docs/--proc-ignore.md | 1 + packages/support-flags/docs/--proc-skip.md | 1 + .../support-flags/docs/--responsive-id.md | 29 + packages/support-flags/docs/--root.md | 18 + packages/support-flags/docs/--scope.md | 23 + packages/support-flags/docs/--scroll.md | 5 + .../support-flags/docs/--text-template.md | 7 + packages/support-flags/docs/--use-flag.md | 3 + packages/support-flags/docs/--video.md | 1 + packages/support-flags/docs/--webview-src.md | 5 + packages/support-flags/docs/--width.md | 127 + .../support-flags/docs/--x-code-component.md | 5 + .../support-flags/docs/--x-code-static.md | 3 + .../support-flags/docs/--x-lottie-view.md | 1 + packages/support-flags/docs/README.md | 5 + .../support-flags/docs/__readme_template__.md | 4 + .../support-flags/docs/index.md | 5 +- .../docs/translations/ko/--artwork.md | 52 + .../docs/translations/ko/--as-h1.md | 67 + .../docs/translations/ko/--as-h2.md | 67 + .../docs/translations/ko/--as-h3.md | 67 + .../docs/translations/ko/--as-h4.md | 67 + .../docs/translations/ko/--as-h5.md | 67 + .../docs/translations/ko/--as-h6.md | 67 + .../docs/translations/ko/--as-wrap.md | 99 + .../docs/translations/ko/--fix-height.md | 53 + .../support-flags/docs/translations/meta.json | 5 + packages/support-flags/index.ts | 31 +- packages/support-flags/keys.ts | 61 + packages/support-flags/parse.ts | 301 + .../support-flags/scripts/sanitize-readme.js | 66 + packages/support-flags/types.ts | 101 +- packages/support-flags/v/README.md | 41 + scripts/docs-copy/flags-api-docs.js | 13 + scripts/docs-deploy/pre-deploy.sh | 5 + scripts/package-lock.json | 80 + scripts/package.json | 7 + ui/editor-ui | 2 +- yarn.lock | 10127 +++++++--------- 417 files changed, 14905 insertions(+), 7305 deletions(-) create mode 100644 docs/flags/.gitignore create mode 100644 docs/flags/README.md create mode 100644 editor-packages/editor-canvas/README.md create mode 100644 editor-packages/editor-canvas/canvas/canvas.tsx rename packages/support-flags/--export/README.md => editor-packages/editor-canvas/canvas/index.ts (100%) create mode 100644 editor-packages/editor-canvas/frame/frame.tsx create mode 100644 editor-packages/editor-canvas/frame/index.ts create mode 100644 editor-packages/editor-canvas/index.ts create mode 100644 editor-packages/editor-canvas/nodes/text.tsx create mode 100644 editor-packages/editor-canvas/package.json rename editor/components/app-runner/{code-sandbox-runner.tsx => csb-runner.tsx} (100%) create mode 100644 editor/components/canvas/controller-zoom-control.tsx delete mode 100644 editor/components/canvas/default-canvas.tsx create mode 100644 editor/components/canvas/interactive-canvas.tsx create mode 100644 editor/components/code-editor/monaco-mock-empty.tsx create mode 100644 editor/components/codeui-code-options-control/code-options-control.tsx create mode 100644 editor/components/codeui-code-options-control/framework-options.ts create mode 100644 editor/components/codeui-code-options-control/index.ts rename editor/components/{canvas => design-preview-as-is}/README.md (100%) rename editor/components/{canvas/figma-embed-canvas.tsx => design-preview-as-is/asis-preview-figma-embed.tsx} (83%) create mode 100644 editor/components/design-preview-as-is/index.ts rename editor/components/{scene-preview/scene-preview.tsx => design-preview/design-preview.tsx} (81%) create mode 100644 editor/components/design-preview/index.ts create mode 100644 editor/components/editor/README.md create mode 100644 editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx create mode 100644 editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx create mode 100644 editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx create mode 100644 editor/components/editor/editor-appbar/editor-appbar-icon-button.tsx create mode 100644 editor/components/editor/editor-appbar/editor-appbar.tsx create mode 100644 editor/components/editor/editor-appbar/index.ts create mode 100644 editor/components/editor/editor-framework-config-on-appbar/index.tsx create mode 100644 editor/components/editor/editor-layer-hierarchy/editor-layer-heriarchy-controller.ts create mode 100644 editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-item.tsx create mode 100644 editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx create mode 100644 editor/components/editor/editor-layer-hierarchy/index.ts create mode 100644 editor/components/editor/editor-pages-list/editor-page-item.tsx create mode 100644 editor/components/editor/editor-pages-list/editor-pages-list.tsx create mode 100644 editor/components/editor/editor-pages-list/index.ts create mode 100644 editor/components/editor/editor-sidebar/editor-sidebar.tsx create mode 100644 editor/components/editor/editor-sidebar/index.ts create mode 100644 editor/components/editor/index.ts create mode 100644 editor/components/home-input/README.md create mode 100644 editor/components/home-input/home-input-appbar.tsx create mode 100644 editor/components/home-input/home-primary-input-next-button.tsx create mode 100644 editor/components/home-input/index.ts create mode 100644 editor/components/home/README.md create mode 100644 editor/components/home/cards/base-home-scene-card.tsx rename editor/components/{recent-design-card/builtin-demo-design-card.tsx => home/cards/builtin-demo-file-card.tsx} (58%) create mode 100644 editor/components/home/cards/builtin-import-new-design-card.tsx create mode 100644 editor/components/home/cards/card-variant-component.tsx create mode 100644 editor/components/home/cards/card-variant-file.tsx create mode 100644 editor/components/home/cards/card-variant-scene.tsx create mode 100644 editor/components/home/cards/index.ts create mode 100644 editor/components/home/home-card-group/home-card-group-header.tsx create mode 100644 editor/components/home/home-card-group/home-card-group.tsx create mode 100644 editor/components/home/home-card-group/index.ts create mode 100644 editor/components/home/home-side-bar-tree-item.tsx create mode 100644 editor/components/home/home-side-bar-tree.tsx create mode 100644 editor/components/home/home-side-bar.tsx create mode 100644 editor/components/home/index.ts create mode 100644 editor/components/home/texts/home-heading.tsx create mode 100644 editor/components/home/texts/index.ts create mode 100644 editor/components/prompt-banner-signin-to-continue/index.tsx delete mode 100644 editor/components/recent-design-card/import-new-design-card.tsx delete mode 100644 editor/components/recent-design-card/index.ts delete mode 100644 editor/components/recent-design-card/recent-design-card-list.tsx delete mode 100644 editor/components/recent-design-card/recent-design-card.tsx delete mode 100644 editor/components/scene-preview/index.ts create mode 100644 editor/core/README.md create mode 100644 editor/core/actions/index.ts create mode 100644 editor/core/dispatch/index.ts create mode 100644 editor/core/reducers/editor-reducer.ts create mode 100644 editor/core/reducers/history/history-reducer.ts create mode 100644 editor/core/reducers/history/index.ts create mode 100644 editor/core/reducers/index.ts create mode 100644 editor/core/reducers/workspace-reducer.ts create mode 100644 editor/core/states/editor-context.ts create mode 100644 editor/core/states/editor-initial-state.ts create mode 100644 editor/core/states/editor-state.ts create mode 100644 editor/core/states/history-initial-state.ts create mode 100644 editor/core/states/history-state.ts create mode 100644 editor/core/states/index.tsx create mode 100644 editor/core/states/state-provider.tsx create mode 100644 editor/core/states/use-editor-state.ts create mode 100644 editor/core/states/use-workspace-state.ts create mode 100644 editor/core/states/workspace-initial-state.ts create mode 100644 editor/core/states/workspace-state.ts create mode 100644 editor/core/utility-types/index.ts create mode 100644 editor/core/utility-types/pending-state.ts create mode 100644 editor/hooks/use-figma-access-token.ts create mode 100644 editor/icons/home-logo.tsx create mode 100644 editor/icons/icon-github.tsx create mode 100644 editor/icons/icon-notification-bell.tsx create mode 100644 editor/icons/icon-props.tsx create mode 100644 editor/icons/icon-setting-gear-outlined.tsx create mode 100644 editor/icons/index.ts create mode 100644 editor/pages/components/index.tsx create mode 100644 editor/pages/files/[key]/[id].tsx create mode 100644 editor/pages/files/[key]/index.tsx create mode 100644 editor/pages/files/index.tsx create mode 100644 editor/pages/import/index.tsx create mode 100644 editor/pages/integrations/index.tsx delete mode 100644 editor/public/favicon.ico create mode 100644 editor/public/favicon.png delete mode 100644 editor/public/vercel.svg create mode 100644 editor/query/to-code-options-from-query.ts delete mode 100644 editor/repository/current-scene-build-repository/index.ts create mode 100644 editor/repository/figma-design-repository/index.ts delete mode 100644 editor/repository/local-scene/index.ts delete mode 100644 editor/repository/scene-build-repository/index.ts create mode 100644 editor/repository/workspace-repository/index.ts create mode 100644 editor/scaffolds/README.md create mode 100644 editor/scaffolds/canvas/canvas.tsx create mode 100644 editor/scaffolds/canvas/index.ts create mode 100644 editor/scaffolds/editor/_providers.tsx create mode 100644 editor/scaffolds/editor/editor.tsx create mode 100644 editor/scaffolds/editor/index.ts create mode 100644 editor/scaffolds/editor/skeleton.tsx create mode 100644 editor/scaffolds/editor/warmup.ts create mode 100644 editor/scaffolds/home-dashboard/home-dashboard.tsx create mode 100644 editor/scaffolds/home-dashboard/index.ts create mode 100644 editor/scaffolds/home-dashboard/recent-design-card-list.tsx create mode 100644 editor/scaffolds/home-input/index.tsx create mode 100644 editor/store/fimga-file-store/figma-file-store.ts create mode 100644 editor/store/fimga-file-store/index.ts delete mode 100644 editor/store/recent-designs-store/index.ts create mode 100644 editor/theme/colors.ts create mode 100644 editor/theme/index.ts create mode 100644 editor/utils/design-query/index.ts create mode 100644 editor/utils/firebase/index.ts create mode 100644 packages/builder-css-styles/margin/index.ts rename packages/builder-web-core/widgets-native/{html-text-span => html-text-element}/index.ts (72%) create mode 100644 packages/designto-token/support-flags/token-heading/index.ts create mode 100644 packages/designto-token/support-flags/token-p/index.ts create mode 100644 packages/designto-token/support-flags/token-span/index.ts create mode 100644 packages/designto-token/support-flags/token-wh-fix/index.ts create mode 100644 packages/designto-token/support-flags/token-wh/index.ts create mode 100644 packages/support-flags/--artwork/README.md create mode 100644 packages/support-flags/--as-char/README.md create mode 100644 packages/support-flags/--as-h1/index.ts create mode 100644 packages/support-flags/--as-h2/index.ts create mode 100644 packages/support-flags/--as-h3/index.ts create mode 100644 packages/support-flags/--as-h4/index.ts create mode 100644 packages/support-flags/--as-h5/index.ts create mode 100644 packages/support-flags/--as-h6/index.ts create mode 100644 packages/support-flags/--as-nbsp/README.md create mode 100644 packages/support-flags/--as-p/index.ts create mode 100644 packages/support-flags/--as-span/README.md create mode 100644 packages/support-flags/--as-span/index.ts create mode 100644 packages/support-flags/--as-text-group/README.md create mode 100644 packages/support-flags/--export-as/README.md create mode 100644 packages/support-flags/--fix-bottom/README.md create mode 100644 packages/support-flags/--fix-height/README.md create mode 100644 packages/support-flags/--fix-height/index.ts create mode 100644 packages/support-flags/--fix-width/README.md create mode 100644 packages/support-flags/--fix-width/index.ts create mode 100644 packages/support-flags/--height/README.md create mode 100644 packages/support-flags/--height/index.ts create mode 100644 packages/support-flags/--max-height/README.md create mode 100644 packages/support-flags/--max-height/index.ts create mode 100644 packages/support-flags/--max-width/README.md create mode 100644 packages/support-flags/--max-width/index.ts create mode 100644 packages/support-flags/--min-height/README.md create mode 100644 packages/support-flags/--min-height/index.ts create mode 100644 packages/support-flags/--min-width/README.md create mode 100644 packages/support-flags/--min-width/index.ts create mode 100644 packages/support-flags/--position-sticky/README.md create mode 100644 packages/support-flags/--width/README.md create mode 100644 packages/support-flags/--width/index.ts create mode 100644 packages/support-flags/docs/----disable.md create mode 100644 packages/support-flags/docs/--action.md create mode 100644 packages/support-flags/docs/--artwork.md create mode 100644 packages/support-flags/docs/--as-avatar.md create mode 100644 packages/support-flags/docs/--as-br.md create mode 100644 packages/support-flags/docs/--as-button.md create mode 100644 packages/support-flags/docs/--as-char.md create mode 100644 packages/support-flags/docs/--as-checkbox.md create mode 100644 packages/support-flags/docs/--as-divider.md create mode 100644 packages/support-flags/docs/--as-h1.md create mode 100644 packages/support-flags/docs/--as-h2.md create mode 100644 packages/support-flags/docs/--as-h3.md create mode 100644 packages/support-flags/docs/--as-h4.md create mode 100644 packages/support-flags/docs/--as-h5.md create mode 100644 packages/support-flags/docs/--as-h6.md create mode 100644 packages/support-flags/docs/--as-input.md create mode 100644 packages/support-flags/docs/--as-list.md create mode 100644 packages/support-flags/docs/--as-mdi.md create mode 100644 packages/support-flags/docs/--as-modal.md create mode 100644 packages/support-flags/docs/--as-nbsp.md create mode 100644 packages/support-flags/docs/--as-p.md create mode 100644 packages/support-flags/docs/--as-resizable.md create mode 100644 packages/support-flags/docs/--as-size.md create mode 100644 packages/support-flags/docs/--as-slider.md create mode 100644 packages/support-flags/docs/--as-span.md create mode 100644 packages/support-flags/docs/--as-text-group.md create mode 100644 packages/support-flags/docs/--as-toggle.md create mode 100644 packages/support-flags/docs/--as-wrap.md create mode 100644 packages/support-flags/docs/--break-color.md create mode 100644 packages/support-flags/docs/--break-component.md create mode 100644 packages/support-flags/docs/--camera-display.md create mode 100644 packages/support-flags/docs/--class.md create mode 100644 packages/support-flags/docs/--content-id.md create mode 100644 packages/support-flags/docs/--cursor.md create mode 100644 packages/support-flags/docs/--dynamic-container.md create mode 100644 packages/support-flags/docs/--dynamic-item.md create mode 100644 packages/support-flags/docs/--empty-content.md rename packages/support-flags/{--exact-height/README.md => docs/--exact-height.md} (75%) rename packages/support-flags/{--exact-width/README.md => docs/--exact-width.md} (74%) create mode 100644 packages/support-flags/docs/--export-as.md create mode 100644 packages/support-flags/docs/--export-gif.md create mode 100644 packages/support-flags/docs/--export-jpg.md create mode 100644 packages/support-flags/docs/--export-pdf.md create mode 100644 packages/support-flags/docs/--export-png.md create mode 100644 packages/support-flags/docs/--export-svg.md create mode 100644 packages/support-flags/docs/--export.md create mode 100644 packages/support-flags/docs/--fix-bottom.md create mode 100644 packages/support-flags/docs/--fix-height.md create mode 100644 packages/support-flags/docs/--fix-width.md create mode 100644 packages/support-flags/docs/--hash.md create mode 100644 packages/support-flags/docs/--height.md create mode 100644 packages/support-flags/docs/--href.md create mode 100644 packages/support-flags/docs/--id.md create mode 100644 packages/support-flags/docs/--ignore.md create mode 100644 packages/support-flags/docs/--is-input-caret.md create mode 100644 packages/support-flags/docs/--is-native-android-ui.md create mode 100644 packages/support-flags/docs/--is-native-ios-ui.md create mode 100644 packages/support-flags/docs/--max-height.md create mode 100644 packages/support-flags/docs/--max-width.md create mode 100644 packages/support-flags/docs/--media.md create mode 100644 packages/support-flags/docs/--min-height.md create mode 100644 packages/support-flags/docs/--min-width.md create mode 100644 packages/support-flags/docs/--module.md create mode 100644 packages/support-flags/docs/--motion-on-hover.md create mode 100644 packages/support-flags/docs/--motion.md create mode 100644 packages/support-flags/docs/--onclick.md create mode 100644 packages/support-flags/docs/--overflow.md create mode 100644 packages/support-flags/docs/--position-fixed.md create mode 100644 packages/support-flags/docs/--position-sticky.md create mode 100644 packages/support-flags/docs/--proc-ignore.md create mode 100644 packages/support-flags/docs/--proc-skip.md create mode 100644 packages/support-flags/docs/--responsive-id.md create mode 100644 packages/support-flags/docs/--root.md create mode 100644 packages/support-flags/docs/--scope.md create mode 100644 packages/support-flags/docs/--scroll.md create mode 100644 packages/support-flags/docs/--text-template.md create mode 100644 packages/support-flags/docs/--use-flag.md create mode 100644 packages/support-flags/docs/--video.md create mode 100644 packages/support-flags/docs/--webview-src.md create mode 100644 packages/support-flags/docs/--width.md create mode 100644 packages/support-flags/docs/--x-code-component.md create mode 100644 packages/support-flags/docs/--x-code-static.md create mode 100644 packages/support-flags/docs/--x-lottie-view.md create mode 100644 packages/support-flags/docs/README.md create mode 100644 packages/support-flags/docs/__readme_template__.md rename docs/flags.md => packages/support-flags/docs/index.md (98%) create mode 100644 packages/support-flags/docs/translations/ko/--artwork.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h1.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h2.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h3.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h4.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h5.md create mode 100644 packages/support-flags/docs/translations/ko/--as-h6.md create mode 100644 packages/support-flags/docs/translations/ko/--as-wrap.md create mode 100644 packages/support-flags/docs/translations/ko/--fix-height.md create mode 100644 packages/support-flags/docs/translations/meta.json create mode 100644 packages/support-flags/keys.ts create mode 100644 packages/support-flags/parse.ts create mode 100644 packages/support-flags/scripts/sanitize-readme.js create mode 100644 packages/support-flags/v/README.md create mode 100644 scripts/docs-copy/flags-api-docs.js create mode 100644 scripts/docs-deploy/pre-deploy.sh create mode 100644 scripts/package-lock.json create mode 100644 scripts/package.json diff --git a/.github/workflows/docs-deploy.yml b/.github/workflows/docs-deploy.yml index 5cfcf1df1..6f77bbd4f 100644 --- a/.github/workflows/docs-deploy.yml +++ b/.github/workflows/docs-deploy.yml @@ -7,8 +7,14 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + - name: run pre-deploy (build docs and more) + run: | + chmod +x ./scripts/docs-deploy/pre-deploy.sh + ./scripts/docs-deploy/pre-deploy.sh + shell: bash - name: copy docs to gridaco/grida.co - uses: DevOpenWRT-Router/github-action-push-to-another-repository@main + uses: cpina/github-action-push-to-another-repository@main env: API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }} with: diff --git a/.gitignore b/.gitignore index f4cdfb38f..e28de6740 100644 --- a/.gitignore +++ b/.gitignore @@ -103,5 +103,12 @@ dist # TernJS port file .tern-port -# Mist +# Misc .DS_Store + + +# ------- docs related ------- +## Learn more at scripts/docs-copy/flags-api-docs.js +# flags api docs +docs/flags/**/* +# ---------------------------- \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8c7c62aed..729e558a5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,26 @@ -Read https://github.com/bridgedxyz/contributing-and-license + +# Installation & Build + +``` +git clone --recurse-submodules https://github.com/gridaco/designto-code +cd designto-code +yarn +yarn editor +``` + + +## Setup credentials for development + +visit http://localhost:6626/preferences/access-tokens and set pats for api calls + + +## Structure + +- editor - visual editor for development +- editor-packages - editor related packages +- packages - core packages contributing to the code-gen logic +- externals - external foundational packages, like [reflect-core](https://github.com/reflect-ui/reflect-core-ts) + # Why 6626? diff --git a/README.md b/README.md index 2ff5a8f30..c3ccaa8aa 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Design to code +https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov + Design to code engine. A design ✌️ code standard. > Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more. diff --git a/docs/component-property-interfacing-auto.md b/docs/component-property-interfacing-auto.md index e7779a4ea..c17473071 100644 --- a/docs/component-property-interfacing-auto.md +++ b/docs/component-property-interfacing-auto.md @@ -6,7 +6,7 @@ revision: 1 # Automatic property interfacing strategy for Components -> Learn more at [support-components](../packages/support-components/README.md) +> Learn more at [support-components](https://github.com/gridaco/designto-code/blob/main/packages/support-components/README.md) We support automatic property interfacing for Components, which means that we automatically extracts a dynamic property so that you can expect the output component code to be ready to be extended. diff --git a/docs/figma-autolayout.md b/docs/figma-autolayout.md index 8e8e1a280..3b4131316 100644 --- a/docs/figma-autolayout.md +++ b/docs/figma-autolayout.md @@ -139,7 +139,7 @@ _References_ ### Universal token - Stretched -We use Stretched Token for specifing specific widget to be stretched. Learn more at [@designto/token/tokens](../packages/designto-token/tokens/stretched/README.md) +We use Stretched Token for specifing specific widget to be stretched. Learn more at [@designto/token/tokens](https://github.com/gridaco/designto-code/blob/main/packages/designto-token/tokens/stretched/README.md) ## Hug contents item (Not having any intrinsic size) diff --git a/docs/figma-text-shadow.md b/docs/figma-text-shadow.md index eb78b1751..28a86c4be 100644 --- a/docs/figma-text-shadow.md +++ b/docs/figma-text-shadow.md @@ -48,7 +48,7 @@ Shadow( It is not currently supported, and it appears to be replaced with drop-shadow. -## Why text shadow isn't support `spread radius`? +## Why is there no `spread radius` support for text shadow? W3 describes why there is not current spread property support for text-shadow, thous we can expect this to be supported in the future. Yet other platform such as Flutter also has no spread support diff --git a/docs/flags/.gitignore b/docs/flags/.gitignore new file mode 100644 index 000000000..59cc255ad --- /dev/null +++ b/docs/flags/.gitignore @@ -0,0 +1,4 @@ +# This .gitignore file will be included in copy ci execution. +# Only add targets that shouuld not be included in final docs deployment. +__**__.md +README.md \ No newline at end of file diff --git a/docs/flags/README.md b/docs/flags/README.md new file mode 100644 index 000000000..607c26609 --- /dev/null +++ b/docs/flags/README.md @@ -0,0 +1,5 @@ +# Flags Documentation directory. + +Go to [Index](./index.md) + +## Flags Api references are copied from support-flags package via script - `/scripts/docs-copy/flags-api-docs.sh` diff --git a/docs/item-order.md b/docs/item-order.md index 67fb8ebe3..77bc44967 100644 --- a/docs/item-order.md +++ b/docs/item-order.md @@ -68,7 +68,7 @@ As shown above, the lastly created item places on the last of the array index, a **Sorting strategy** When sorting strategy not applied and code gen with raw input, below result may come. -![](./worng-sorting-example-when-not-sanitized.png) +![](./assets/worng-sorting-example-when-not-sanitized.png) **Exceptional cases** diff --git a/editor-packages/base-sdk b/editor-packages/base-sdk index 05fb24501..784f2b524 160000 --- a/editor-packages/base-sdk +++ b/editor-packages/base-sdk @@ -1 +1 @@ -Subproject commit 05fb245018f1bcf57fe429e7dbb4544e8ef87e05 +Subproject commit 784f2b52435bef9d13a483f67871c8da83bf7b7c diff --git a/editor-packages/editor-canvas/README.md b/editor-packages/editor-canvas/README.md new file mode 100644 index 000000000..aa198bad6 --- /dev/null +++ b/editor-packages/editor-canvas/README.md @@ -0,0 +1 @@ +# A Interactive canvas for runtime frames. diff --git a/editor-packages/editor-canvas/canvas/canvas.tsx b/editor-packages/editor-canvas/canvas/canvas.tsx new file mode 100644 index 000000000..1fb294db4 --- /dev/null +++ b/editor-packages/editor-canvas/canvas/canvas.tsx @@ -0,0 +1,32 @@ +import React from "react"; +export function Canvas() { + const scale = 1; + return ( +
+ Canvas +
+ ); +} + +function DisableBackdropFilter({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} diff --git a/packages/support-flags/--export/README.md b/editor-packages/editor-canvas/canvas/index.ts similarity index 100% rename from packages/support-flags/--export/README.md rename to editor-packages/editor-canvas/canvas/index.ts diff --git a/editor-packages/editor-canvas/frame/frame.tsx b/editor-packages/editor-canvas/frame/frame.tsx new file mode 100644 index 000000000..33a44cbd9 --- /dev/null +++ b/editor-packages/editor-canvas/frame/frame.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export function Frame() { + return
Frame
; +} diff --git a/editor-packages/editor-canvas/frame/index.ts b/editor-packages/editor-canvas/frame/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/editor-packages/editor-canvas/index.ts b/editor-packages/editor-canvas/index.ts new file mode 100644 index 000000000..3df338f1b --- /dev/null +++ b/editor-packages/editor-canvas/index.ts @@ -0,0 +1 @@ +export const dummy = "canvas"; diff --git a/editor-packages/editor-canvas/nodes/text.tsx b/editor-packages/editor-canvas/nodes/text.tsx new file mode 100644 index 000000000..00175ca10 --- /dev/null +++ b/editor-packages/editor-canvas/nodes/text.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { ReflectTextNode } from "@design-sdk/figma-node"; + +export function TextNode(text: ReflectTextNode) { + return {text.data}; +} diff --git a/editor-packages/editor-canvas/package.json b/editor-packages/editor-canvas/package.json new file mode 100644 index 000000000..dcaaf5e04 --- /dev/null +++ b/editor-packages/editor-canvas/package.json @@ -0,0 +1,5 @@ +{ + "name": "@code-editor/canvas", + "version": "0.0.0", + "main": "index.ts" +} \ No newline at end of file diff --git a/editor/babel.config.js b/editor/babel.config.js index 73212053e..1bc4404bb 100644 --- a/editor/babel.config.js +++ b/editor/babel.config.js @@ -8,8 +8,13 @@ module.exports = { root: ["."], alias: { components: "./components", + icons: "./icons", layouts: "./layouts", + scaffolds: "./scaffolds", utils: "./utils", + core: "./core", + store: "./store", + repository: "./repository", public: "./public", hooks: "./hooks", }, diff --git a/editor/components/app-runner/app-runner.tsx b/editor/components/app-runner/app-runner.tsx index 5611a557a..121e88d7f 100644 --- a/editor/components/app-runner/app-runner.tsx +++ b/editor/components/app-runner/app-runner.tsx @@ -49,9 +49,11 @@ export function AppRunner(props: { >
+ {children} ); @@ -180,7 +175,7 @@ const ResizeKnob = (props?: any) => ( style={{ background: "#fff", borderRadius: "2px", - border: "1px solid #ddd", + border: "1px solid #dddddd", height: "100%", width: "100%", padding: 0, @@ -195,7 +190,10 @@ const ResizeKnob = (props?: any) => ( viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > - +
); diff --git a/editor/components/app-runner/code-sandbox-runner.tsx b/editor/components/app-runner/csb-runner.tsx similarity index 100% rename from editor/components/app-runner/code-sandbox-runner.tsx rename to editor/components/app-runner/csb-runner.tsx diff --git a/editor/components/app-runner/index.ts b/editor/components/app-runner/index.ts index 264178074..856d919b1 100644 --- a/editor/components/app-runner/index.ts +++ b/editor/components/app-runner/index.ts @@ -1,4 +1,4 @@ export * from "./app-runner"; -export * from "./code-sandbox-runner"; +export * from "./csb-runner"; export * from "./flutter-app-runner"; export * from "./react-app-runner"; diff --git a/editor/components/app-runner/react-app-runner.tsx b/editor/components/app-runner/react-app-runner.tsx index c0d310200..e7d29d67f 100644 --- a/editor/components/app-runner/react-app-runner.tsx +++ b/editor/components/app-runner/react-app-runner.tsx @@ -1,6 +1,6 @@ import { k } from "@designto/react"; import React from "react"; -import { CodeSandBoxView } from "./code-sandbox-runner"; +import { CodeSandBoxView } from "./csb-runner"; export function ReactAppRunner(props: { source: string; diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx index 0b274670f..1ec30c962 100644 --- a/editor/components/app-runner/vanilla-app-runner.tsx +++ b/editor/components/app-runner/vanilla-app-runner.tsx @@ -1,24 +1,91 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; export function VanillaRunner({ width, height, source, + enableInspector = true, + style, }: { width: string; height: string; source: string; componentName: string; + enableInspector?: boolean; + style?: React.CSSProperties; }) { - const inlinesource = source || `

Hello world

`; + const ref = useRef(); + + useEffect(() => { + if (ref.current) { + function disablezoom() { + ref.current.contentWindow.addEventListener( + "wheel", + (event) => { + const { ctrlKey } = event; + if (ctrlKey) { + event.preventDefault(); + return; + } + }, + { passive: false } + ); + } + ref.current.contentWindow.addEventListener( + "DOMContentLoaded", + disablezoom, + false + ); + } + }, [ref.current]); + + useEffect(() => { + if (ref.current && enableInspector) { + ref.current.onload = () => { + const matches = ref.current.contentDocument.querySelectorAll( + "div, span, button, img, image, svg" + ); + matches.forEach((el) => { + const tint = "rgba(20, 0, 255, 0.2)"; + const tintl = "rgba(20, 0, 255, 0.5)"; + const originstyle = { + //@ts-ignore + ...el.style, + }; + + if (el.id.includes("RootWrapper")) { + } else { + el.addEventListener("mouseenter", (e) => { + //@ts-ignore + e.target.style.background = tint; + //@ts-ignore + e.target.style.outline = `${tintl} solid 1px`; + }); + el.addEventListener("mouseleave", (e) => { + //@ts-ignore + e.target.style.background = originstyle.background; + //@ts-ignore + e.target.style.outline = originstyle.outline; + }); + } + }); + + ref.current.contentWindow.addEventListener("click", (e) => { + console.log("click", e); + }); + }; + } + }, [ref.current, enableInspector]); + + const inlinesource = source || `
`; return ( - <> -