Merge pull request #128 from gridaco/staging

March Release #3 - Interactive components support (Input, Button, Slider)
gridaco · Mar 28, 2022 · 9c1ecf0 · 9c1ecf0 · vercel · Mar 28, 2022
2 parents 7c6ea0c + 673e923
commit 9c1ecf0
Show file tree

Hide file tree

Showing 75 changed files with 2,208 additions and 258 deletions.
diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx
@@ -43,7 +43,7 @@ export function VanillaRunner({
     if (ref.current && enableInspector) {
       ref.current.onload = () => {
         const matches = ref.current.contentDocument.querySelectorAll(
-          "div, span, button, img, image, svg"
+          "div, span, img, image, svg" // button, input - disabled due to interaction testing (for users)
         );
         matches.forEach((el) => {
           const tint = "rgba(20, 0, 255, 0.2)";

diff --git a/editor/components/editor/editor-browser-meta-head/index.tsx b/editor/components/editor/editor-browser-meta-head/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Head from "next/head";
+import { useEditorState } from "core/states";
+
+export function EditorBrowserMetaHead({
+  children,
+}: {
+  children: React.ReactChild;
+}) {
+  const [state] = useEditorState();
+
+  return (
+    <>
+      <Head>
+        <title>
+          {state?.design?.name ? `Grida | ${state?.design?.name}` : "Loading.."}
+        </title>
+      </Head>
+      {children}
+    </>
+  );
+}
diff --git a/editor/components/editor/index.ts b/editor/components/editor/index.ts
@@ -1,3 +1,4 @@
 export * from "./editor-appbar";
+export * from "./editor-browser-meta-head";
 export * from "./editor-layer-hierarchy";
 export * from "./editor-sidebar";
diff --git a/editor/core/reducers/editor-reducer.ts b/editor/core/reducers/editor-reducer.ts
@@ -16,8 +16,14 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       console.info("cleard console by editorReducer#select-node");
 
       // update router
-      router.query.node = node ?? state.selectedPage;
-      router.push(router);
+      router.push(
+        {
+          pathname: router.pathname,
+          query: { ...router.query, node: node ?? state.selectedPage },
+        },
+        undefined,
+        {}
+      );
 
       return produce(state, (draft) => {
         const _canvas_state_store = new CanvasStateStore(
@@ -42,8 +48,14 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       console.info("cleard console by editorReducer#select-page");
 
       // update router
-      router.query.node = page;
-      router.push(router);
+      router.push(
+        {
+          pathname: router.pathname,
+          query: { ...router.query, node: page },
+        },
+        undefined,
+        {}
+      );
 
       return produce(state, (draft) => {
         const _canvas_state_store = new CanvasStateStore(filekey, page);

diff --git a/editor/core/states/editor-state.ts b/editor/core/states/editor-state.ts
@@ -24,6 +24,11 @@ export interface EditorSnapshot {
 }
 
 export interface FigmaReflectRepository {
+  /**
+   * name of the file
+   */
+  name: string;
+
   /**
    * fileid; filekey
    */

diff --git a/editor/pages/files/[key]/index.tsx b/editor/pages/files/[key]/index.tsx
@@ -8,6 +8,7 @@ import { useDesignFile } from "hooks";
 
 import { warmup } from "scaffolds/editor";
 import { FileResponse } from "@design-sdk/figma-remote-types";
+import { EditorBrowserMetaHead } from "components/editor";
 
 export default function FileEntryEditor() {
   const router = useRouter();
@@ -64,6 +65,7 @@ export default function FileEntryEditor() {
         selectedPage: warmup.selectedPage(prevstate, pages, nodeid && [nodeid]),
         selectedLayersOnPreview: [],
         design: {
+          name: file.name,
           input: null,
           components: components,
           // styles: null,
@@ -131,7 +133,9 @@ export default function FileEntryEditor() {
     <SigninToContinueBannerPrmoptProvider>
       <StateProvider state={safe_value} dispatch={handleDispatch}>
         <EditorDefaultProviders>
-          <Editor loading={loading} />
+          <EditorBrowserMetaHead>
+            <Editor loading={loading} />
+          </EditorBrowserMetaHead>
         </EditorDefaultProviders>
       </StateProvider>
     </SigninToContinueBannerPrmoptProvider>

diff --git a/editor/pages/files/index.tsx b/editor/pages/files/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import Head from "next/head";
 import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
 import {
   Cards,
@@ -19,6 +20,9 @@ export default function FilesPage() {
 
   return (
     <>
+      <Head>
+        <title>Grida | files</title>
+      </Head>
       <DefaultEditorWorkspaceLayout
         backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<HomeSidebar />}

diff --git a/editor/pages/index.tsx b/editor/pages/index.tsx
@@ -1,13 +1,22 @@
+import React from "react";
+import Head from "next/head";
+
 import { HomeInput } from "scaffolds/home-input";
 import { HomeDashboard } from "scaffolds/home-dashboard";
-import React from "react";
 import { useAuthState } from "hooks/use-auth-state";
 
 export default function Home() {
   const authstate = useAuthState();
 
   // region - dev injected
-  return <HomeDashboard />;
+  return (
+    <>
+      <Head>
+        <title>Grida | Home</title>
+      </Head>
+      <HomeDashboard />
+    </>
+  );
   // endregion
 
   switch (authstate) {

diff --git a/editor/scaffolds/editor/warmup.ts b/editor/scaffolds/editor/warmup.ts
@@ -7,13 +7,11 @@ import {
 import { createInitialWorkspaceState } from "core/states";
 import { workspaceReducer } from "core/reducers";
 import { PendingState } from "core/utility-types";
-import { DesignInput } from "@designto/config/input";
-import { TargetNodeConfig } from "query/target-node";
 import { WorkspaceAction } from "core/actions";
 import { FileResponse } from "@design-sdk/figma-remote-types";
 import { convert } from "@design-sdk/figma-node-conversion";
 import { mapper } from "@design-sdk/figma-remote";
-import { find, visit } from "tree-visit";
+import { visit } from "tree-visit";
 
 const pending_workspace_state = createPendingWorkspaceState();
 //
@@ -98,24 +96,6 @@ export function componentsFrom(
     .reduce(tomap, {});
 }
 
-export function initializeDesign(design: TargetNodeConfig): EditorSnapshot {
-  return {
-    selectedNodes: [design.node],
-    selectedLayersOnPreview: [],
-    selectedPage: null,
-    design: {
-      pages: [],
-      components: null,
-      // styles: null,
-      key: design.file,
-      input: DesignInput.fromApiResponse({
-        ...design,
-        entry: design.reflect,
-      }),
-    },
-  };
-}
-
 export function safestate(initialState) {
   return initialState.type === "success"
     ? initialState.value

diff --git a/externals/coli b/externals/coli
diff --git a/externals/design-sdk b/externals/design-sdk
diff --git a/externals/reflect-core b/externals/reflect-core
diff --git a/packages/builder-css-styles/border/index.ts b/packages/builder-css-styles/border/index.ts
@@ -33,6 +33,10 @@ export function border(border: Border): CSSProperties {
 }
 
 export function borderSide(borderSide: BorderSide): CSSProperty.Border {
+  if (borderSide.style === "none") {
+    return "none";
+  }
+
   return `${borderSide.style ?? "solid"} ${px(borderSide.width)} ${color(
     borderSide.color
   )}`;

diff --git a/packages/builder-css-styles/color/index.ts b/packages/builder-css-styles/color/index.ts
@@ -19,8 +19,8 @@ export function color(input: CssColorInputLike | Color): string {
   } else if (input instanceof CssNamedColor) {
     return input.name;
   } else if (typeof input == "object") {
-    // with alpha
-    if ("r" in input && "a" in input) {
+    // with alpha  (if alpha is 1, use rgb format instead)
+    if ("r" in input && "a" in input && input.a !== 1) {
       const a = safe_alpha_fallback(validAlphaValue(input.a));
       const rgba = input as ICssRGBA;
       const _r = validColorValue(rgba.r) ?? 0;
@@ -31,6 +31,11 @@ export function color(input: CssColorInputLike | Color): string {
     // no alpha
     else if ("r" in input && "a"! in input) {
       const rgb = input as RGB;
+      const named = namedcolor(rgb);
+      if (named) {
+        return named;
+      }
+
       return `rgb(${validColorValue(rgb.r) ?? 0}, ${
         validColorValue(rgb.g) ?? 0
       }, ${validColorValue(rgb.b) ?? 0})`;
@@ -42,6 +47,29 @@ export function color(input: CssColorInputLike | Color): string {
   }
 }
 
+/**
+ * rgb value of white, black as named colors
+ * @param rgb
+ */
+const namedcolor = (rgb: RGB) => {
+  // black
+  if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) {
+    return "black";
+  }
+  // white
+  if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) {
+    return "white";
+  }
+  // blue
+  if (rgb.r === 0 && rgb.g === 0 && rgb.b === 1) {
+    return "blue";
+  }
+  // red
+  if (rgb.r === 1 && rgb.g === 0 && rgb.b === 0) {
+    return "red";
+  }
+};
+
 const validColorValue = (f: number) => {
   if (f === undefined) {
     return;

diff --git a/packages/builder-css-styles/index.ts b/packages/builder-css-styles/index.ts
@@ -9,6 +9,7 @@ export * from "./font-weight";
 export * from "./font-family";
 export * from "./text-decoration";
 export * from "./text-shadow";
+export * from "./text-transform";
 export * from "./gradient";
 export * from "./padding";
 export * from "./margin";

diff --git a/packages/builder-css-styles/padding/index.ts b/packages/builder-css-styles/padding/index.ts
@@ -8,8 +8,13 @@ import { px } from "../dimensions";
 
 type PaddingValue = number | "auto";
 
-export function padding(p: EdgeInsets): CSSProperties {
-  switch (edgeInsetsShorthandMode(p)) {
+export function padding(
+  p: EdgeInsets,
+  options?: {
+    explicit?: boolean;
+  }
+): CSSProperties {
+  switch (edgeInsetsShorthandMode(p, options)) {
     case EdgeInsetsShorthandMode.empty: {
       return {};
     }
@@ -31,10 +36,10 @@ export function padding(p: EdgeInsets): CSSProperties {
     case EdgeInsetsShorthandMode.trbl:
     default: {
       return {
-        "padding-bottom": _makeifRequired(p?.bottom),
-        "padding-top": _makeifRequired(p?.top),
-        "padding-left": _makeifRequired(p?.left),
-        "padding-right": _makeifRequired(p?.right),
+        "padding-bottom": _makeifRequired(p?.bottom, options?.explicit),
+        "padding-top": _makeifRequired(p?.top, options?.explicit),
+        "padding-left": _makeifRequired(p?.left, options?.explicit),
+        "padding-right": _makeifRequired(p?.right, options?.explicit),
       };
     }
   }
@@ -55,8 +60,8 @@ function _pv(pv: PaddingValue) {
   return px(pv);
 }
 
-function _makeifRequired(val: number): string | undefined {
-  if (val && val > 0) {
+function _makeifRequired(val: number, explicit?: boolean): string | undefined {
+  if (explicit || (val && val > 0)) {
     return px(val);
   }
 }
diff --git a/packages/builder-css-styles/text-shadow/index.ts b/packages/builder-css-styles/text-shadow/index.ts
@@ -3,7 +3,7 @@ import { color } from "../color";
 import { px } from "../dimensions";
 
 export function textShadow(ts: TextShadowManifest[]): string {
-  if (ts.length === 0) {
+  if (!ts || ts.length === 0) {
     return;
   }
 

diff --git a/packages/builder-css-styles/text-transform/index.ts b/packages/builder-css-styles/text-transform/index.ts
@@ -0,0 +1,20 @@
+import { TextTransform } from "@reflect-ui/core";
+
+export function textTransform(tt: TextTransform) {
+  switch (tt) {
+    case TextTransform.capitalize:
+      return "capitalize";
+    case TextTransform.lowercase:
+      return "lowercase";
+    case TextTransform.uppercase:
+      return "uppercase";
+    case TextTransform.fullwidth:
+      return "full-width";
+    case TextTransform.fullsizekana:
+      return "full-size-kana";
+    case TextTransform.none:
+    default:
+      // for none, we don't explicitly set it - to make it shorter.
+      return;
+  }
+}
diff --git a/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts b/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts
@@ -30,14 +30,16 @@ export function flexsizing({
     case MainAxisSize.max: {
       return {
         "align-self": "stretch",
+        width: width && length(width),
+        height: height && length(height),
       };
     }
     case MainAxisSize.min: {
       switch (direction) {
         case Axis.horizontal:
         case Axis.vertical:
           return {
-            flex: "none",
+            flex: flex > 0 ? flex : "none", // 1+
             width: width && length(width),
             height: height && length(height),
           };

diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
@@ -11,7 +11,7 @@ import {
 } from "@web-builder/react-core";
 import {
   buildJsx,
-  getWidgetStylesConfigMap,
+  StylesConfigMapBuilder,
   JSXWithoutStyleElementConfig,
   JSXWithStyleElementConfig,
   WidgetStyleConfigMap,
@@ -48,7 +48,8 @@ export class ReactNativeInlineStyleBuilder {
   private readonly widgetName: string;
   readonly config: reactnative_config.ReactNativeInlineStyleConfig;
   private readonly namer: ScopedVariableNamer;
-  private readonly stylesConfigWidgetMap: WidgetStyleConfigMap;
+  private readonly stylesMapper: StylesConfigMapBuilder;
+  // private readonly stylesConfigWidgetMap: WidgetStyleConfigMap;
 
   constructor({
     entry,
@@ -64,7 +65,8 @@ export class ReactNativeInlineStyleBuilder {
       entry.key.id,
       ReservedKeywordPlatformPresets.react
     );
-    this.stylesConfigWidgetMap = getWidgetStylesConfigMap(entry, {
+
+    this.stylesMapper = new StylesConfigMapBuilder(entry, {
       namer: this.namer,
       rename_tag: false,
     });
@@ -73,7 +75,7 @@ export class ReactNativeInlineStyleBuilder {
   private stylesConfig(
     id: string
   ): JSXWithStyleElementConfig | JSXWithoutStyleElementConfig {
-    return this.stylesConfigWidgetMap.get(id);
+    return this.stylesMapper.map.get(id);
   }
 
   private jsxBuilder(widget: JsxWidget) {
+2 −2		packages/coli-core-css/__test__/css-build.test.ts
+55 −18		packages/coli-core-css/builder.ts
+7 −328		packages/coli-core-css/css-style-declaration/index.ts
+13 −1		packages/coli-core-css/index.ts
+118 −0		packages/coli-core-css/simple-pseudos.ts
+3 −3		packages/coli-core-jsx/jsx-attribute/index.ts
+5 −1		packages/coli-escape-string/escape-jsx-string.ts
+2 −2		packages/coli-formatter-token/formatters/jsx/jsx-atrribute.ts