Merge pull request #211 from gridaco/playground

Visual Testing, QA, Community Beta

Author: softmarshmallow

.vscode/settings.json

@@ -13,5 +13,9 @@
     "**/*.code-search": true,
     "**/yarn.lock": true,
     "**/.next": true
-  }
+  },
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.autopep8"
+  },
+  "python.formatting.provider": "none"
 }

cli/jest.config.js

@@ -1,4 +1,4 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "node",

data/figma-archives/dev/meta.json

@@ -12,6 +12,43 @@ revision: 1
 - one or more gradient fill above solid fill
 - one or more image fill
 
+## Related CSS Properties & Functions
+
+**[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) & [gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)**
+
+- [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+- [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
+- [radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient)
+- [repeating-linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)
+- [repeating-radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient)
+- [conic-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient)
+- [repeating-conic-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient)
+- [url](https://developer.mozilla.org/en-US/docs/Web/CSS/url)
+- element() (not supported yet)
+- [image](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image)
+
+**[image](https://developer.mozilla.org/en-US/docs/Web/CSS/image)**
+
+- [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
+- [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+- [background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
+- [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
+- [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
+- [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
+- [background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)
+- [background-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin)
+
+## Design considerations
+
+What we've considered while building multiple background support for css
+
+- Multiple mixed types - `<color>`, `<gradient>`, and `<image>` - How should we handle them?
+- Multiple types with inconsistent transforms - `object-fit`, `object-position`, `background-size`, `background-clip`, `background-origin`
+- When to use baked image and when not to.
+  - If there are multiple background values with mixed types and inconsistent transforms, it is often better to use baked image for cleaner code, and it's very probable that the box itself works as a artwork
+  - When to use baked image as `src` attribute (`<img src="">`) or `background` property
+
 ## Possible combinations
 
 single solid fill
@@ -58,3 +95,45 @@ no solid fill with multiple gradient fill
   background: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #fff, #fff);
 }
 ```
+
+multiple images with different transforms
+
+Using array syntax
+
+```css
+._1 {
+  background-image: url("image1.jpg"), url("image2.jpg");
+  background-position: right bottom, left top;
+  background-size: 50% 50%, auto;
+}
+```
+
+Using pseudo elements - This is useful when there are less than 3 images - main, overlay, background
+
+```css
+._1::before,
+div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+._1::before {
+  background: url("image1.jpg") no-repeat;
+  background-size: cover;
+  transform: rotate(45deg);
+  clip-path: circle(50% at 50% 50%);
+}
+
+._1::after {
+  background: url("image2.jpg") no-repeat;
+  background-size: cover;
+  transform: scale(0.5);
+}
+```
+
+## Image resources management on SSG frameworks
+
+- Next.js (Docs not ready)

data/figma-archives/prod/meta.json

@@ -1,3 +1,4 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: "ts-jest",
 };

docs/css-multiple-background.md

@@ -1,3 +1,4 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: "ts-jest",
 };

editor-packages/editor-canvas/jest.config.js

@@ -26,6 +26,8 @@ import {
   SceneItem,
 } from "../core";
 import Selecto from "react-selecto";
+import { openInFigma } from "@code-editor/external-links";
+import toast from "react-hot-toast";
 
 export function Dashboard() {
   const {
@@ -329,6 +331,16 @@ function DashboardItemCard(
   }
 }
 
+const scene_card_context_menu_items = [
+  { title: "View on Canvas", value: "focus" },
+  { title: "View Details", value: "isolate" },
+  // { title: "Open in Diff View", value: "diff" },
+  { title: "Open in Figma", value: "open-in-figma" },
+] as const;
+
+type TSceneCardContextMenuKey =
+  typeof scene_card_context_menu_items[number]["value"];
+
 function SceneCard(
   props: SceneItem & Omit<DashboardItemCardProps, "label" | "preview" | "icon">
 ) {
@@ -368,29 +380,41 @@ function SceneCard(
     style: { opacity },
   };
 
-  const items: MenuItem<string>[] = [
-    { title: "View on Canvas", value: "focus" },
-    { title: "View Details", value: "isolate" },
-    { title: "Open in Figma", value: "open-in-figma" },
-  ];
-
   const onContextSelect = useCallback(
-    (value: string) => {
+    (value: TSceneCardContextMenuKey) => {
       switch (value) {
         case "focus": {
           focusNodeOnCanvas(props.scene.id);
           break;
         }
         case "isolate": {
           isolateNode(props.scene.id);
+          break;
+        }
+        case "open-in-figma": {
+          if (typeof props.scene.filekey === "string") {
+            openInFigma(props.scene.filekey, props.scene.id);
+          } else {
+            toast("This file can't be opened in Figma.");
+          }
+          break;
+        }
+        // case "diff": {
+        //   // todo
+        // }
+        default: {
+          throw new Error(`Unknown context menu item ${value}`);
         }
       }
     },
     [focusNodeOnCanvas, isolateNode, props.scene.id]
   );
 
   return (
-    <ContextMenu items={items} onSelect={onContextSelect}>
+    <ContextMenu
+      items={scene_card_context_menu_items}
+      onSelect={onContextSelect}
+    >
       <div>
         <_SceneCard
           // @ts-ignore

editor-packages/editor-dashboard/jest.config.js

@@ -0,0 +1 @@
+export * from "./open-in-figma";

editor-packages/editor-dashboard/scaffold/editor-dashboard.tsx

@@ -0,0 +1,5 @@
+export function openInFigma(filekey: string, node?: string) {
+  open(
+    `https://www.figma.com/file/${filekey}${node ? `?node-id=${node}` : ""}`
+  );
+}