Merge branch 'main' of https://github.com/gridaco/designto-code into app

.github/workflows/codetest-report.yml

@@ -0,0 +1,49 @@
+name: "@codetest/report"
+
+on:
+  release:
+    types: [published]
+  pull_request:
+    types: [opened, synchronize, closed]
+
+jobs:
+  report:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: setup
+        run: |
+          yarn --frozen-lockfile
+      - name: build report tools
+        working-directory: testing/report
+        run: |
+          yarn build
+      - name: run report
+        id: report
+        working-directory: ci/report
+        run: |
+          npm ci
+          node report.js
+      - name: upload report to s3
+        id: upload
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: "codetest-reports"
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_S3_CODETEST_REPORTS }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }}
+          AWS_REGION: "us-west-1"
+          SOURCE_DIR: "ci/report/.coverage"
+          # dest dir is commit hash
+          DEST_DIR: "${{ github.sha }}"
+      - name: comment
+        id: comment
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          STATUS: ${{ steps.report.outputs.STATUS }}
+        working-directory: ci/report
+        run: |
+          npm ci
+          node comment.js

.nvmrc

@@ -0,0 +1 @@
+18.16.0

.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"
 }

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Installation & Build
 
 ```
@@ -8,20 +7,18 @@ yarn
 yarn editor
 ```
 
-
-## Setup credentials for development
-
-visit http://localhost:6626/preferences/access-tokens and set pats for api calls
-
-
 ## Structure
 
 - editor - visual editor for development
 - editor-packages - editor related packages
 - packages - core packages contributing to the code-gen logic
 - externals - external foundational packages, like [reflect-core](https://github.com/reflect-ui/reflect-core-ts)
 
+## QnA
+
+- Why 6626? - 6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)
 
-# Why 6626?
+## Utilities
 
-6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)
+- npx npkill to clean all node_modules folders
+- clean: `npx npkill && rm -rf yarn.lock`

README.md

@@ -37,6 +37,10 @@ Integrated usage
 - [grida CLI](https://github.com/gridaco/cli)
 - [@designto/cli](./cli)
 
+## Supported Design Tools
+We support importing designs from Figma with our [figma-sdk](https://github.com/gridaco/figma-sdk). You can also design components with [scenes](https://github.com/gridaco/scenes) DSL, or use our built-in drag & drop editor.
+
+
 ## Platforms / Frameworks
 
 | **Frameworks**     |       | channel  | bundler         | reflect-ui | material-ui  | tailwind | packager               |
@@ -239,6 +243,10 @@ Visit project ([`./editor`](./editor/))
 
 </details>
 
-## Architecture
+## Contributing
+
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
+
+**architecture**
 
-Read [architecture.md](./architecture.md)
+- See [architecture.md](./architecture.md)

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)

api/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./license";

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",
+};

api/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@grida/api",
+  "version": "0.0.0"
+}

api/types.ts

@@ -0,0 +1,89 @@
+import type {
+  FrameworkConfig,
+  VanillaFrameworkConfig,
+} from "@grida/builder-config";
+import { LICENSE_CE } from "./license";
+import type { TPlugin } from "@code-plugin/core";
+
+export type FigmaNodeInput =
+  | string
+  | { url: string; version: string }
+  | { filekey: string; node: string; version: string };
+
+type DebugOptions = {
+  /**
+   * if true, the response will be a vanilla html without other data.
+   * @default false
+   */
+  raw?: boolean;
+};
+
+export type CodeRequest = DebugOptions & {
+  figma: FigmaNodeInput;
+  framework: Partial<FrameworkConfig>;
+  plugins?: TPlugin[];
+};
+
+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;
+}

ci/report/.gitignore

@@ -0,0 +1 @@
+.coverage*

ci/report/README.md

@@ -0,0 +1,3 @@
+# Reports Generating
+
+This modules enables reports generation based on the current engine, enabling developers to visually track the engine features visually, by comparing the generated outputs, compared using vision diff.