Merge branch 'support-flex' of https://github.com/gridaco/designto-code…

… into support-flex
gridaco · Apr 2, 2023 · 73b0b2b · 73b0b2b
2 parents b17be8d + d260001
commit 73b0b2b
Show file tree

Hide file tree

Showing 25 changed files with 604 additions and 69 deletions.
diff --git a/api/README.md b/api/README.md
@@ -0,0 +1,155 @@
+# Grida Code API (Private Beta)
+
+## Usage (REST)
+
+### `POST /api/v1/code`
+
+Example
+
+```ts
+import Axios from "axios";
+
+const client = Axios.create({
+  baseURL: "https://code.grida.co/api/v1",
+  headers: {
+    "Content-Type": "application/json",
+    "X-Figma-Access-Token": "figd_xxxxxxxxxx",
+  },
+});
+
+client.post("code", {
+  // target node url formatted as https://www.figma.com/file/{fileKey}?node-id={nodeId}
+  // at this moment, the nodeId must be formatted as 00:00, not 00-00
+  // Note: if you copy & paste the link from the fihma editor, you will get in the format of 00-00 (we are updating this)
+  figma: "https://www.figma.com/file/MikewnarPfXXXXX/?node-id=0%3A1",
+  framework: {
+    framework: "vanilla", // react, flutter, ...
+  },
+});
+```
+
+#### Request Body
+
+```ts
+interface CodeRequest {
+  figma: FigmaNodeInput;
+  framework: Partial<FrameworkConfig>;
+}
+```
+
+**`body.figma`**
+
+```ts
+type FigmaNodeInput =
+  | string
+  | { url: string; version: string }
+  | { filekey: string; node: string; version: string };
+```
+
+**Note** currently only `string` is supported.
+
+An URL indicating the target node in Figma design.
+
+target node url formatted as `https://www.figma.com/file/{fileKey}?node-id={nodeId}`
+at this moment, the nodeId must be formatted as `00:00`, not `00-00` url encoded value like `0%3A1` is also acceptable.
+
+Note: if you copy & paste the link from the fihma editor, you will get in the format of 00-00 (we are updating this)
+
+**`body.framework`**
+
+A Framework configuration used for generating code. Learn more at [Framework Configuration](https://grida.co/docs/cli#2-framework-configuration)
+
+#### Response
+
+```ts
+// example of response
+{
+  warnings: [],
+  src: '', // do not use this
+  srcdoc: '<DOCTYPE html><head>...</head><body>...',
+  srcmap: {
+    // the mapping between the generated code and the design
+    // node-id : xpath
+    '123:123': '//div[@data-figma-node-id="123:123"]]'
+  },
+  files:{
+    'index.hml': '<DOCTYPE html><head>...</head><body>...'
+  }
+  framework:{
+    // the framework config used for generating code
+    // ...
+  },
+  // (if the input design source is figma, you will get the brief summary about the used design)
+  figma:{
+    file:{
+      // #region original data ------
+      name: "Exmaples",
+      lastModified: "2023-03-28T17:51:08Z",
+      thumbnailUrl: "https://s3-alpha.figma.com/thumbnails/dc85b86a-2502-4baa-a776-ce0972131a80",
+      version: "3247308401",
+      // #endregion original data ------
+    }
+
+    filekey: 'MikewnarPfXXXXX',
+    entry: '0:1',
+    json: "{}",
+    node: {
+      ...
+    }
+  }
+  engine: {
+    // the info of the engine used for generating code
+    name: 'code.grida.co/api/v1',
+    // the engibe version
+    version: '2023.1.1'
+  },
+  // the preview image of the rendered html
+  thumbnail: 'https://xxx.s3.amazonaws.com/.../xxxxxx.png',
+  license: {
+    // the license info of the generated code and the api
+    // ...
+  }
+}
+```
+
+- `warnings` - An array of warnings. If there is no warning, it will be an empty array. (This is usually a warning caused by poor design, which can be ignored)
+- `src` - The generated code as a uri, a publicly accessible html file endpoint.
+- `srcdoc` - The generated code as a bundled and concatenated string, which can be used to embed the code directly into your website.
+
+### `GET /api/v1/embed`
+
+We also provide an experimental embed API for embedding the generated code directly into your website with an iframe.
+
+Example
+
+```html
+<iframe
+  src="https://code.grida.co/api/v1/embed?figma=<figma-node-url>&fpat=figd_xxxxx"
+  width="100%"
+  height="100%"
+></iframe>
+```
+
+#### URL Parameters
+
+**`figma`**
+Same as `/v1/code` API's `figma` parameter.
+
+**`fpat`** or **`fat`**
+
+- fpat: Figma Personal Access Token (starting with `figd_`)
+- fat: Figma Access Token
+
+Warning: For security reasons, we highly recommend using the Figma Access Token (which expires), instead of the Figma Personal Access Token (which never expires unless revoked). The Figma Personal Access Token is only used for development purpose.
+
+We are planning on providing a more secure way to use embed with the `fpat` in the future.
+
+The framework configuration for embed is `vanilla-preview` by default. We are planning on providing a way to customize the framework configuration in the future.
+
+## Request / Response Types Declarations
+
+See [./types.ts](./types.ts)
+
+## API Clients (Under Development)
+
+At this moment there is no publicly available API wrappers. If you are looking for use on your local machine, you van use [Grida CLI](https://grida.co/cli)
diff --git a/api/__test__/.gitignore b/api/__test__/.gitignore
diff --git a/api/index.ts b/api/index.ts
@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./license";
diff --git a/api/license.ts b/api/license.ts
@@ -0,0 +1,5 @@
+export const LICENSE_CE = {
+  "ce-use-of-generated-code": "Public Domain",
+  "ce-use-of-engine-source": "Apache-2.0",
+  "ce-use-for-commercial": "AGPL-3.0",
+};
diff --git a/api/package.json b/api/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@grida/api",
+  "version": "0.0.0"
+}
diff --git a/api/types.ts b/api/types.ts
@@ -0,0 +1,79 @@
+import type {
+  FrameworkConfig,
+  VanillaFrameworkConfig,
+} from "@grida/builder-config";
+import { LICENSE_CE } from "./license";
+
+export type FigmaNodeInput =
+  | string
+  | { url: string; version: string }
+  | { filekey: string; node: string; version: string };
+
+export interface CodeRequest {
+  figma: FigmaNodeInput;
+  framework: Partial<FrameworkConfig>;
+}
+
+export type CodeResponse = FigmaToVanillaResponse;
+
+export type ApiEngineInfo = {
+  name: "code.grida.co/api/v1";
+  version: "2023.1.1";
+  license: "AGPL-3.0";
+};
+
+export type D2CSourceMap = {};
+
+export type FigmaOriginalFileData = {
+  name: string;
+  lastModified: string;
+  thumbnailUrl: string;
+  version: string;
+};
+
+export type FigmaInputPong = {
+  file?: FigmaOriginalFileData;
+  filekey: string;
+  /**
+   * the id of entry node. usually it is the root node.
+   */
+  entry: string;
+  /**
+   * the full node tree, including only essential information. like size, position, etc.
+   */
+  node: object;
+  json: object;
+};
+
+export interface BaseFigmaInputResponse {
+  figma: FigmaInputPong;
+}
+
+export interface BaseResponse {
+  framework: FrameworkConfig;
+  engine: ApiEngineInfo;
+  version: 0; // for now, there is no versioning
+  license: typeof LICENSE_CE;
+  warnings: string[];
+}
+
+export interface BaseWebFrameworkResponse extends BaseResponse {
+  src: string;
+  srcdoc: string;
+  srcmap: D2CSourceMap;
+  files: {
+    [key: string]: string;
+  };
+
+  thumbnail: string;
+}
+
+export interface VanillaCodeResponse extends BaseWebFrameworkResponse {
+  framework: VanillaFrameworkConfig;
+}
+
+export interface FigmaToVanillaResponse
+  extends VanillaCodeResponse,
+    BaseFigmaInputResponse {
+  figma: FigmaInputPong;
+}
diff --git a/code/README.md b/code/README.md
@@ -0,0 +1 @@
+# Grida API Core - This is not a Client Library
diff --git a/code/index.ts b/code/index.ts
@@ -0,0 +1,103 @@
+import { designToCode, Result } from "@designto/code";
+import { DesignInput } from "@grida/builder-config/input";
+import { parseFileAndNodeId } from "@design-sdk/figma-url";
+import { fetchTargetAsReflect } from "@design-sdk/figma-remote";
+import {
+  ImageRepository,
+  MainImageRepository,
+} from "@design-sdk/asset-repository";
+import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository";
+import type { FrameworkConfig } from "@grida/builder-config";
+import { defaultConfigByFramework } from "@grida/builder-config-preset";
+import { Language } from "@grida/builder-platform-types";
+import { formatCode } from "dart-style";
+
+export async function code({
+  auth,
+  uri,
+  framework,
+}: {
+  auth:
+    | {
+        personalAccessToken: string;
+      }
+    | { accessToken: string };
+  uri: string;
+  framework: FrameworkConfig;
+}) {
+  //
+
+  const res = parseFileAndNodeId(uri as string);
+  if (res) {
+    const { file: filekey, node } = res;
+
+    //
+    const target = await fetchTargetAsReflect({
+      file: filekey,
+      node,
+      auth: auth,
+    });
+
+    MainImageRepository.instance = new RemoteImageRepositories(target.file, {
+      authentication: auth,
+    });
+    MainImageRepository.instance.register(
+      new ImageRepository(
+        "fill-later-assets",
+        "grida://assets-reservation/images/"
+      )
+    );
+
+    const code = await designToCode({
+      input: DesignInput.fromApiResponse({
+        raw: target.raw,
+        entry: target.reflect!,
+      }),
+      framework: {
+        // fill missing configurations.
+        ...defaultConfigByFramework(framework.framework),
+        ...framework,
+      },
+      asset_config: { asset_repository: MainImageRepository.instance },
+    });
+
+    const src = postproc_src(
+      filesrc(code, framework.framework),
+      framework.language
+    );
+
+    return {
+      src,
+      figma: {
+        filekey,
+        node,
+      },
+      target,
+    };
+  }
+}
+
+function filesrc(
+  code: Result,
+  framework: FrameworkConfig["framework"]
+): string {
+  switch (framework) {
+    case "flutter": {
+      return code.code.raw;
+    }
+    default:
+      return code.scaffold.raw;
+  }
+}
+
+function postproc_src(src: string, language: Language) {
+  if (language === Language.dart) {
+    const { code, error } = formatCode(src);
+    if (error) {
+      return src;
+    }
+    return code;
+  }
+
+  return src;
+}
diff --git a/code/package.json b/code/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@grida/code",
+  "version": "0.0.0"
+}
diff --git a/editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx b/editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx
@@ -31,14 +31,15 @@ function SceneCardPreview({
 
   // max allowed zoom = 1
   const scale = Math.min(maxWidth / scene.width, 1);
-  const { height, type } = scene;
+  const { height: h, type } = scene;
+  const height = h * scale; // fixme: this is somethimes NaN
 
   return (
     <div
       ref={visibilityRef}
       className="scale-on-over"
       style={{
-        height: height * scale,
+        height: isNaN(height) ? "auto" : height,
         width: maxWidth,
       }}
     >
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./types";
		export * from "./license";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		# Grida API Core - This is not a Client Library