March Release #3 - Interactive components support (Input, Button, Slider) #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

softmarshmallow merged 53 commits into main from staging

Mar 28, 2022

editor/components/app-runner/vanilla-app-runner.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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)";
@@ Expand Down @@

editor/components/editor/editor-browser-meta-head/index.tsx

-Original file line number
+Diff line change
@@ -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}
+        </>
+      );
+    }

editor/components/editor/index.ts

-Original file line number
+Diff line change
@@ -1,3 +1,4 @@
     export * from "./editor-appbar";
+    export * from "./editor-browser-meta-head";
     export * from "./editor-layer-hierarchy";
     export * from "./editor-sidebar";

editor/core/reducers/editor-reducer.ts

-Original file line number
+Diff line change
@@ Expand Up @@
           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(
@@ Expand All @@
           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);
@@ Expand Down @@

editor/core/states/editor-state.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,11 @@ export interface EditorSnapshot { @@
     }
     export interface FigmaReflectRepository {
+      /**
+       * name of the file
+       */
+      name: string;
       /**
        * fileid; filekey
        */
@@ Expand Down @@

editor/pages/files/[key]/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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();
@@ Expand Down Expand Up / @@ -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,
@@ Expand Down Expand Up / @@ -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>
@@ Expand Down @@

editor/pages/files/index.tsx

-Original file line number
+Diff line change
@@ -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,
@@ Expand All / @@ -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 />}
@@ Expand Down @@

editor/pages/index.tsx

-Original file line number
+Diff line change
@@ -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) {
@@ Expand Down @@

editor/scaffolds/editor/warmup.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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();
     //
@@ Expand Down Expand Up / @@ -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
@@ Expand Down @@

externals/coli

Submodule coli updated 8 files

+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

externals/design-sdk

Submodule design-sdk updated from 6c54a5 to 6265f6

externals/reflect-core

Submodule reflect-core updated from 7e792b to 2b4fd6

packages/builder-css-styles/border/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
       )}`;
@@ Expand Down @@

packages/builder-css-styles/color/index.ts

-Original file line number
+Diff line change
@@ Expand Up @@
       } 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;
@@ Expand All @@
         // 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})`;
@@ Expand All @@
       }
     }
+    /**
+     * 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;
@@ Expand Down @@

packages/builder-css-styles/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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";
@@ Expand Down @@

packages/builder-css-styles/padding/index.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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);

      }

    }

packages/builder-css-styles/text-shadow/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
       }
@@ Expand Down @@

packages/builder-css-styles/text-transform/index.ts

-Original file line number
+Diff line change
@@ -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;
+      }
+    }

packages/builder-css-styles/tricks/trick-flex-sizing/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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),
               };
@@ Expand Down @@

packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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) {

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

March Release #3 - Interactive components support (Input, Button, Slider) #128

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!