Merge pull request #100 from gridaco/staging

v2022.0.0f1 Release

.github/workflows/docs-deploy.yml

@@ -7,6 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@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
         env:

docs/flags/.gitignore

@@ -0,0 +1,7 @@
+## Learn more at scripts/docs-copy/flags-api-docs.js
+# custom
+----ignore.md
+---custom.md
+
+# flags api docs
+--*.md

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`

editor-packages/editor-canvas/README.md

@@ -0,0 +1 @@
+# A Interactive canvas for runtime frames.

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+export function Canvas() {
+  const scale = 1;
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        willChange: "transform",
+        transform: `scale(${scale}) translateX(0) translateY(0)`,
+        isolation: "isolate",
+      }}
+    >
+      <DisableBackdropFilter>Canvas</DisableBackdropFilter>
+    </div>
+  );
+}
+
+function DisableBackdropFilter({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        backdropFilter: "none!important",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

editor-packages/editor-canvas/frame/frame.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export function Frame() {
+  return <div>Frame</div>;
+}

editor-packages/editor-canvas/index.ts

@@ -0,0 +1 @@
+export const dummy = "canvas";

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 <span>{text.data}</span>;
+}

editor-packages/editor-canvas/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@code-editor/canvas",
+  "version": "0.0.0",
+  "main": "index.ts"
+}

editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx

@@ -1,25 +1,32 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { useRouter } from "next/router";
+import { EditorAppbarIconButton } from "./editor-appbar-icon-button";
+import { GithubIcon, NotificationBellIcon } from "icons";
+import { EditorFrameworkConfigOnAppbar } from "../editor-framework-config-on-appbar";
 
 export function AppbarFragmentForCodeEditor() {
+  const router = useRouter();
+  const hasNotification = false;
+
   return (
     <RootWrapperAppbarFragmentForCodeEditor>
-      <Frame354>
-        <Flutter>Flutter</Flutter>
-        <IconsAntdSettingOutlined
-          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4056/6ff2/8d18f474998d7ea1972ca5fe08258dd7"
-          alt="icon"
-        ></IconsAntdSettingOutlined>
-      </Frame354>
+      {/* disable temporarily */}
+      <div style={{ flex: 1 }} />
+      {/* <EditorFrameworkConfigOnAppbar /> */}
       <AppbarActions>
-        <AppbarIconButton
-          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/acff/b783/96b0feffa7116a485371002a54621c73"
-          alt="icon"
-        ></AppbarIconButton>
-        <AppbarIconButton_0001
-          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/40e6/2dd0/0874244c17bfefb7d2125d3e55860428"
-          alt="icon"
-        ></AppbarIconButton_0001>
+        {hasNotification && (
+          <EditorAppbarIconButton onClick={() => {}}>
+            <NotificationBellIcon size={24} color="#787878" />
+          </EditorAppbarIconButton>
+        )}
+        <EditorAppbarIconButton
+          onClick={() => {
+            window.open("https://github.com/gridaco/designto-code/", "_blank");
+          }}
+        >
+          <GithubIcon size={18} color="#787878" />
+        </EditorAppbarIconButton>
       </AppbarActions>
     </RootWrapperAppbarFragmentForCodeEditor>
   );
@@ -41,52 +48,13 @@ const RootWrapperAppbarFragmentForCodeEditor = styled.div`
   padding-right: 20px;
 `;
 
-const Frame354 = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  align-items: center;
-  flex: 1;
-  gap: 4px;
-  align-self: stretch;
-  box-sizing: border-box;
-`;
-
-const Flutter = styled.span`
-  color: rgba(124, 124, 124, 1);
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-family: "Helvetica Neue", sans-serif;
-  font-weight: 400;
-  text-align: left;
-`;
-
-const IconsAntdSettingOutlined = styled.img`
-  width: 16px;
-  height: 16px;
-  object-fit: cover;
-`;
-
 const AppbarActions = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: row;
   align-items: center;
   flex: none;
   gap: 14px;
-  width: 62px;
   height: 24px;
   box-sizing: border-box;
 `;
-
-const AppbarIconButton = styled.img`
-  width: 24px;
-  height: 24px;
-  object-fit: cover;
-`;
-
-const AppbarIconButton_0001 = styled.img`
-  width: 24px;
-  height: 24px;
-  object-fit: cover;
-`;

editor/components/editor/editor-appbar/editor-appbar-icon-button.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const _resting_color = "#787878";
+
+export function EditorAppbarIconButton({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  return <div onClick={onClick}>{children}</div>;
+}

editor/components/editor/editor-framework-config-on-appbar/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { SettingGearOutlinedIcon } from "icons";
+
+export function EditorFrameworkConfigOnAppbar() {
+  return (
+    <Wrapper>
+      <FrameworkName>Flutter</FrameworkName>
+      <SettingGearOutlinedIcon color={"#787878"} size={16} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  gap: 4px;
+  align-self: stretch;
+  box-sizing: border-box;
+`;
+
+const FrameworkName = styled.span`
+  color: rgba(124, 124, 124, 1);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  text-align: left;
+`;

editor/core/reducers/editor-reducer.ts

@@ -7,6 +7,8 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
   switch (action.type) {
     case "select-node": {
       const { node } = <SelectNodeAction>action;
+      console.clear();
+      console.info("cleard console by editorReducer#select-node");
       return produce(state, (draft) => {
         draft.selectedNodes = [node];
       });

editor/core/states/editor-state.ts

@@ -1,4 +1,5 @@
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import { ComponentNode } from "@design-sdk/figma-types";
 import { DesignInput } from "@designto/config/input";
 
 export interface EditorState {
@@ -15,13 +16,15 @@ export interface EditorSnapshot {
   design: FigmaReflectRepository;
 }
 
-interface FigmaReflectRepository {
+export interface FigmaReflectRepository {
   /**
    * fileid; filekey
    */
   key: string;
 
   // TODO:
   pages: { id: string; name: string; children: ReflectSceneNode[] }[];
+  components: { [key: string]: ComponentNode };
+  // styles: { [key: string]: {} };
   input: DesignInput;
 }

editor/core/states/workspace-initial-state.ts

@@ -6,14 +6,27 @@ import {
 } from "./history-initial-state";
 import { react_presets, vanilla_presets } from "@grida/builder-config-preset";
 
+const _IS_DEV = process.env.NODE_ENV === "development";
+
+/**
+ * you can enable this by default on your .env.local file
+ *
+ * ```.env.local
+ * NEXT_PUBLIC_ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT=true
+ * ```
+ */
+const _ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT =
+  process.env.NEXT_PUBLIC_ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT === "true";
+
 export function createInitialWorkspaceState(
   editor: EditorSnapshot
 ): WorkspaceState {
   return {
     history: createInitialHistoryState(editor),
     preferences: {
-      debug_mode: false,
-      enable_preview_feature_components_support: false,
+      debug_mode: _IS_DEV,
+      enable_preview_feature_components_support:
+        _ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT,
       preview_runner_framework_config: vanilla_presets.vanilla_default,
       framework_config: react_presets.react_default,
     },
@@ -24,8 +37,8 @@ export function createPendingWorkspaceState(): WorkspaceState {
   return {
     history: createPendingHistoryState(),
     preferences: {
-      debug_mode: false,
-      enable_preview_feature_components_support: false,
+      debug_mode: null,
+      enable_preview_feature_components_support: null,
       preview_runner_framework_config: null,
       framework_config: null,
     },

editor/icons/icon-github.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { IconProps, width, height } from "./icon-props";
+
+export function GithubIcon({ size = 24, color = "black" }: IconProps) {
+  return (
+    <svg
+      width={width(size)}
+      height={height(size)}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.99297 1.34131C4.6459 1.33955 1.125 4.85869 1.125 9.20225C1.125 12.637 3.32754 15.5567 6.39492 16.629C6.80801 16.7327 6.74473 16.4392 6.74473 16.2388V14.8765C4.35938 15.156 4.2627 13.5774 4.10273 13.3138C3.7793 12.7618 3.01465 12.6212 3.24316 12.3575C3.78633 12.078 4.34004 12.4278 4.98164 13.3753C5.4457 14.0626 6.35098 13.9466 6.80977 13.8323C6.90996 13.4192 7.12441 13.0501 7.41973 12.7636C4.94824 12.3206 3.91816 10.8124 3.91816 9.01944C3.91816 8.14932 4.20469 7.34951 4.76719 6.7044C4.40859 5.64092 4.80059 4.73037 4.85332 4.59502C5.87461 4.50361 6.93633 5.32627 7.01895 5.39131C7.59902 5.23487 8.26172 5.15225 9.00352 5.15225C9.74883 5.15225 10.4133 5.23838 10.9986 5.39658C11.1973 5.24541 12.1816 4.53877 13.1309 4.6249C13.1818 4.76026 13.565 5.64971 13.2275 6.69912C13.7971 7.346 14.0871 8.15284 14.0871 9.02471C14.0871 10.8212 13.05 12.3312 10.5715 12.7671C10.7838 12.9759 10.9523 13.2249 11.0673 13.4995C11.1823 13.7741 11.2414 14.069 11.2412 14.3667V16.3442C11.2553 16.5024 11.2412 16.6589 11.5049 16.6589C14.618 15.6095 16.8592 12.6687 16.8592 9.20401C16.8592 4.85869 13.3365 1.34131 8.99297 1.34131Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor/icons/icon-notification-bell.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { IconProps, width, height } from "./icon-props";
+
+export function NotificationBellIcon({
+  size = 24,
+  color = "black",
+}: IconProps) {
+  return (
+    <svg
+      width={width(size)}
+      height={height(size)}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 20.3335C12.9166 20.3335 13.6666 19.5835 13.6666 18.6668H10.3333C10.3333 19.5835 11.0833 20.3335 12 20.3335ZM17 15.3335V11.1668C17 8.6085 15.6416 6.46683 13.25 5.90016V5.3335C13.25 4.64183 12.6916 4.0835 12 4.0835C11.3083 4.0835 10.75 4.64183 10.75 5.3335V5.90016C8.36665 6.46683 6.99998 8.60016 6.99998 11.1668V15.3335L5.33331 17.0002V17.8335H18.6666V17.0002L17 15.3335ZM15.3333 16.1668H8.66665V11.1668C8.66665 9.10016 9.92498 7.41683 12 7.41683C14.075 7.41683 15.3333 9.10016 15.3333 11.1668V16.1668Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor/icons/icon-props.tsx

@@ -0,0 +1,20 @@
+type Size =
+  | number
+  | {
+      width: number;
+      height: number;
+    };
+export interface IconProps {
+  size?: Size;
+  color?: string;
+}
+
+export const width = (size: Size) => flatsize(size, "width");
+export const height = (size: Size) => flatsize(size, "height");
+
+const flatsize = (size: Size, porperty: "width" | "height") => {
+  if (typeof size === "number") {
+    return size;
+  }
+  return size[porperty];
+};

editor/icons/icon-setting-gear-outlined.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { IconProps, width, height } from "./icon-props";
+
+export function SettingGearOutlinedIcon({
+  size = 24,
+  color = "black",
+}: IconProps) {
+  return (
+    <svg
+      width={width(size)}
+      height={height(size)}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.45 9.77647L13.4265 8.90147C13.475 8.60459 13.5 8.30147 13.5 7.99834C13.5 7.69522 13.475 7.39209 13.4265 7.09522L14.45 6.22022C14.5271 6.15413 14.5824 6.06612 14.6084 5.96787C14.6343 5.86962 14.6297 5.7658 14.5953 5.67022L14.5812 5.62959C14.2995 4.84213 13.8776 4.11215 13.3359 3.4749L13.3078 3.44209C13.2421 3.36483 13.1545 3.30929 13.0566 3.28279C12.9587 3.25629 12.855 3.26008 12.7593 3.29365L11.489 3.74521C11.0203 3.36084 10.4968 3.05772 9.9312 2.84522L9.68589 1.51709C9.66738 1.41716 9.61891 1.32522 9.5469 1.25349C9.4749 1.18177 9.38277 1.13365 9.28277 1.11553L9.24058 1.10771C8.42652 0.96084 7.57027 0.96084 6.7562 1.10771L6.71402 1.11553C6.61401 1.13365 6.52189 1.18177 6.44988 1.25349C6.37788 1.32522 6.3294 1.41716 6.31089 1.51709L6.06402 2.85147C5.5029 3.06401 4.98037 3.36697 4.51714 3.74834L3.23745 3.29365C3.14178 3.25981 3.03806 3.25589 2.9401 3.2824C2.84214 3.30892 2.75457 3.36461 2.68902 3.44209L2.66089 3.4749C2.11987 4.1126 1.69804 4.84246 1.41558 5.62959L1.40152 5.67022C1.3312 5.86553 1.38902 6.08428 1.54683 6.22022L2.58277 7.10459C2.53433 7.39834 2.51089 7.69834 2.51089 7.99678C2.51089 8.29678 2.53433 8.59678 2.58277 8.88897L1.54683 9.77334C1.46964 9.83943 1.41439 9.92744 1.38843 10.0257C1.36247 10.1239 1.36704 10.2278 1.40152 10.3233L1.41558 10.364C1.69839 11.1515 2.11714 11.878 2.66089 12.5187L2.68902 12.5515C2.75473 12.6287 2.8423 12.6843 2.94021 12.7108C3.03811 12.7373 3.14175 12.7335 3.23745 12.6999L4.51714 12.2452C4.98277 12.628 5.50308 12.9312 6.06402 13.1421L6.31089 14.4765C6.3294 14.5764 6.37788 14.6683 6.44988 14.7401C6.52189 14.8118 6.61401 14.8599 6.71402 14.878L6.7562 14.8858C7.57775 15.0335 8.41904 15.0335 9.24058 14.8858L9.28277 14.878C9.38277 14.8599 9.4749 14.8118 9.5469 14.7401C9.61891 14.6683 9.66738 14.5764 9.68589 14.4765L9.9312 13.1483C10.4966 12.9364 11.023 12.6323 11.489 12.2483L12.7593 12.6999C12.855 12.7337 12.9587 12.7377 13.0567 12.7112C13.1546 12.6846 13.2422 12.6289 13.3078 12.5515L13.3359 12.5187C13.8796 11.8765 14.2984 11.1515 14.5812 10.364L14.5953 10.3233C14.6656 10.1312 14.6078 9.9124 14.45 9.77647ZM12.3171 7.27959C12.3562 7.51553 12.3765 7.75772 12.3765 7.9999C12.3765 8.24209 12.3562 8.48428 12.3171 8.72022L12.214 9.34678L13.3812 10.3452C13.2043 10.7529 12.9809 11.1387 12.7156 11.4952L11.2656 10.9812L10.775 11.3843C10.4015 11.6905 9.98589 11.9312 9.53589 12.0999L8.94058 12.3233L8.66089 13.839C8.21959 13.889 7.77406 13.889 7.33277 13.839L7.05308 12.3202L6.46245 12.0937C6.01714 11.9249 5.60308 11.6843 5.23277 11.3796L4.74214 10.9749L3.28277 11.4937C3.01714 11.1358 2.79527 10.7499 2.61714 10.3437L3.79683 9.33584L3.69527 8.71084C3.65777 8.47803 3.63745 8.2374 3.63745 7.9999C3.63745 7.76084 3.6562 7.52178 3.69527 7.28897L3.79683 6.66397L2.61714 5.65615C2.7937 5.24834 3.01714 4.86397 3.28277 4.50615L4.74214 5.0249L5.23277 4.62022C5.60308 4.31553 6.01714 4.0749 6.46245 3.90615L7.05464 3.68271L7.33433 2.16396C7.77339 2.11397 8.22183 2.11397 8.66245 2.16396L8.94214 3.67959L9.53745 3.90303C9.98589 4.07178 10.4031 4.3124 10.7765 4.61865L11.2671 5.02178L12.7171 4.50772C12.9828 4.86553 13.2046 5.25147 13.3828 5.65772L12.2156 6.65615L12.3171 7.27959ZM7.99995 5.09365C6.4812 5.09365 5.24995 6.3249 5.24995 7.84365C5.24995 9.3624 6.4812 10.5937 7.99995 10.5937C9.5187 10.5937 10.75 9.3624 10.75 7.84365C10.75 6.3249 9.5187 5.09365 7.99995 5.09365ZM9.23745 9.08115C9.07514 9.24393 8.88225 9.37301 8.66987 9.46096C8.4575 9.54892 8.22982 9.59401 7.99995 9.59365C7.53277 9.59365 7.0937 9.41084 6.76245 9.08115C6.59968 8.91884 6.4706 8.72595 6.38265 8.51357C6.29469 8.3012 6.2496 8.07352 6.24995 7.84365C6.24995 7.37647 6.43277 6.9374 6.76245 6.60615C7.0937 6.2749 7.53277 6.09365 7.99995 6.09365C8.46714 6.09365 8.9062 6.2749 9.23745 6.60615C9.40023 6.76846 9.52931 6.96135 9.61726 7.17373C9.70522 7.38611 9.75031 7.61378 9.74995 7.84365C9.74995 8.31084 9.56714 8.7499 9.23745 9.08115Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor/icons/index.ts

@@ -0,0 +1,3 @@
+export * from "./icon-github";
+export * from "./icon-notification-bell";
+export * from "./icon-setting-gear-outlined";