2022.9 Jun-Aug release

.gitignore

@@ -107,6 +107,9 @@ dist
 .DS_Store
 
 
+# turbo
+.turbo
+
 # ------- docs related -------
 ## Learn more at scripts/docs-copy/flags-api-docs.js
 # flags api docs

.gitmodules

@@ -1,18 +1,3 @@
-[submodule "packages/reflect-detection"]
-	path = packages/reflect-detection
-	url = https://github.com/bridgedxyz/reflect-detection
 [submodule "ui/editor-ui"]
 	path = ui/editor-ui
-	url = https://github.com/bridgedxyz/reflect-editor-ui
-[submodule "editor-packages/base-sdk"]
-	path = editor-packages/base-sdk
-	url = https://github.com/gridaco/base-sdk
-[submodule "externals/coli"]
-	path = externals/coli
-	url = https://github.com/gridaco/coli
-[submodule "externals/design-sdk"]
-	path = externals/design-sdk
-	url = https://github.com/gridaco/design-sdk
-[submodule "externals/reflect-core"]
-	path = externals/reflect-core
-	url = https://github.com/reflect-ui/reflect-core-ts
+	url = https://github.com/reflect-ui/reflect-editor-ui

README.md

@@ -1,39 +1,58 @@
-# Design to code
+<center>
 
-https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov
+</center>
+
+<p align="center">
+  <a href="https://code.grida.co">
+  <image src="./branding/gh-artwork.png" />
+    <h3 align="center">Design to Code</h3>
+  </a>
+</p>
 
-Design to code engine. A design ✌️ code standard.
+<p align="center">
+  Design to code engine. A design ✌️ code standard.
+</p>
 
 > Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.
 
-## Demo
+```
+npx designto react https://www.figma.com/files/XXX
+```
 
-for the demo, please visit [assistant](https://github.com/gridaco/assistant)
+**Or.. [👩‍💻 Try designto-code from browser IDE](https://code.grida.co)**
 
-For the fully integrated working demo, visit [grida.co](https://grida.co)
+## Usage
 
-### Run it your own
+```bash
+npm i -g @designto/cli
 
+# react + figma example
+designto react https://www.figma.com/files/XXX -o mypage.tsx
 ```
-git clone https://github.com/gridaco/designto-code.git
 
-cd designto-code
-yarn
-yarn editor
-# visit http://localhost:6626
-```
+Integrated usage
 
-update pulling - `git submodule update --init --recursive`
+- Assistant (Figma plugin) - visit [assistant](https://github.com/gridaco/assistant)
+- [code.grida.co](https://code.grida.co) (Web IDE for frontend development)
+- [grida CLI](https://github.com/gridaco/cli)
+- [@designto/cli](./cli)
 
 ## Platforms / Frameworks
 
-| **Frameworks**     |       |
-| ------------------ | :---: |
-| ReactJS            |  ✅   |
-| Flutter            |  ✅   |
-| React Native       |  ✅   |
-| Vanilla (html/css) |  ✅   |
-| Vue                | (wip) |
+| **Frameworks**     |       | channel  | bundler         | reflect-ui | material-ui  | tailwind | packager               |
+| ------------------ | :---: | -------- | --------------- | ---------- | ------------ | -------- | ---------------------- |
+| ReactJS            |  ✅   | `stable` | `esbuild`       | (wip)      | (wip)        | (wip)    | `npm`, `local`, `git`  |
+| Flutter            |  ✅   | `beta`   | `dart-services` | (wip)      | Yes (native) | No       | `pub`, `local`, `git`  |
+| React Native       |  ✅   | `beta`   | `expo`          | (wip)      | No           | No       | `expo`, `local`, `git` |
+| SolidJS            |  ✅   | `beta`   | `esbuild`       | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |
+| Vanilla (html/css) |  ✅   | `stable` | `vanilla`       | (wip)      | No           | (wip)    | `local`, `cdn`         |
+| Svelte             |  ✅   | `beta`   | `svelte`        | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |
+| Vue                | (wip) | `dev`    | `vue`           | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |
+| Android (Jetpack)  | (wip) | `dev`    | Not supported   | (wip)      | Yes (native) | No       | `local`, `git`         |
+| iOS (SwiftUI)      | (wip) | `dev`    | Not supported   | (wip)      | No           | No       | `local`, `git`         |
+
+<details>
+<summary>React</summary>
 
 | **ReactJS**         |       |
 | ------------------- | :---: |
@@ -45,6 +64,11 @@ update pulling - `git submodule update --init --recursive`
 | breakpoints         | (wip) |
 | components          | (wip) |
 
+</details>
+
+<details>
+<summary>ReactNative</summary>
+
 | **ReactNative**                |       |
 | ------------------------------ | :---: |
 | `StyleSheet`                   |  ✅   |
@@ -54,57 +78,150 @@ update pulling - `git submodule update --init --recursive`
 | `react-native-svg`             | (wip) |
 | `expo`                         | (wip) |
 
+</details>
+
+<details>
+<summary>Vanilla (html/css)</summary>
+
 | **Vanilla** |               |
 | ----------- | :-----------: |
 | reflect-ui  | right-aligned |
 | css         |      ✅       |
 | scss        |   are neat    |
 
+</details>
+
+<details>
+<summary>Flutter</summary>
+
 | **Flutter** |       |
 | ----------- | :---: |
 | material    |  ✅   |
 | cupertino   | (wip) |
 | reflect-ui  | (wip) |
 
+</details>
+
+<details>
+<summary>Svelte</summary>
+
 | **Svelte**          |       |
 | ------------------- | :---: |
 | `styled-components` |  ✅   |
 | `@mui/material`     | (wip) |
 
+</details>
+
+<details>
+<summary>Vue3</summary>
+
 | **Vue**             |       |
 | ------------------- | :---: |
 | `styled-components` |  ✅   |
 | `@mui/material`     | (wip) |
 
+</details>
+
+<details>
+<summary>SolidJS</summary>
+
+| **Solid**                 |     |
+| ------------------------- | :-: |
+| `solid-styled-components` | ✅  |
+| `inline-css`              | ✅  |
+
+</details>
+
+<details>
+<summary>iOS Native</summary>
+
 | **iOS** |       |
 | ------- | :---: |
 | SwiftUI | (wip) |
 
+</details>
+
+<details>
+<summary>Android Native</summary>
+
 | **Android**     |       |
 | --------------- | :---: |
 | Jetpack Compose | (wip) |
 
-## What does it mean?
+</details>
+
+## Usage
+
+Linting
+Custom Tokenizer
+Custom Assets Repository
+Custom Cache
+Custom Cursor
+Plugins
 
-### By "design". What does it mean?
+### Local development
+
+```
+git clone https://github.com/gridaco/designto-code.git
+cd designto-code
+
+yarn
+yarn editor
+# visit http://localhost:6626
+```
 
-The term `design` here stands for the UI/UX design source file made by human designers. There are various tools currently available such like Figma, Sketch, XD, and Upcomming [Grida Studio](https://github.com/gridaco/grida)
+<details>
+<summary>Trouble shooting</summary>
 
-Taking more deeper look, the design data tree is represented with Reflect -- A design standard that grida developed / adopted. (Yes, this is that Reflect that also provided as a UI Library)
+- update pulling - `git submodule update --init --recursive`
 
-TL;DR -- You can convert your design to code from Figma, Sketch, and XD.
+</details>
 
-### By "code". What does it mean?
+## Features
 
-The term `code` here stands for some language or syntax tree that is adoptable for standard development environment. We supprort Flutter, React, HTML/CSS, Vuew, Svelte.
+- preprocessing
+  - lint
+    - layout lint
+    - naming lint
+- design
+  - layouts
+  - animations
+  - constraints
+  - breakpoints
+- code
+  - documentation
+    - tsdoc
+  - single-file module
+  - multi-file module
 
-Taking more deeper look, Reflect Core DSL represents the layout, component, data, styling as a single tree.
+<details>
+<summary>Layouts</summary>
 
-### How does it work?
+</details>
 
-Read [how-it-all-works.md](./how-it-all-works.md)
+<details>
+<summary>Animations (motions)</summary>
 
-### Visualization
+</details>
+
+<details>
+<summary>Constraints</summary>
+
+</details>
+
+<details>
+<summary>Breakpoints</summary>
+
+</details>
+
+### Editor (web IDE)
+
+https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov
+
+Visit project ([`./editor`](./editor/))
+
+<details>
+<summary>Visualization</summary>
 
 ![](./branding/shot-1.png)
 
@@ -119,3 +236,9 @@ Read [how-it-all-works.md](./how-it-all-works.md)
 ![](./branding/shot-5.png)
 
 ![Grida's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)
+
+</details>
+
+## Architecture
+
+Read [architecture.md](./architecture.md)

cli/README.md

@@ -1,3 +1,38 @@
-# Using Design-to-code via cli
+# A `grida code` CLI member of [`grida cli`](https://github.com/gridaco/cli)
 
-Under development.
+## Installation
+
+```
+npm install -g @designto/cli
+```
+
+## Commands
+
+| Commands             |                                         |
+| -------------------- | --------------------------------------- | ---------------------------------------------------- |
+| `grida code react`   | convert input uri (file or url) to code | `designto react https://www.figma.com/files/XXX`     |
+| `grida code rn`      | convert input uri (file or url) to code | `designto rn https://www.figma.com/files/XXX`        |
+| `grida code vue`     | convert input uri (file or url) to code | `grida code vue https://www.figma.com/files/XXX`     |
+| `grida code svelte`  | convert input uri (file or url) to code | `grida code svelte https://www.figma.com/files/XXX`  |
+| `grida code solid`   | convert input uri (file or url) to code | `grida code flutter https://www.figma.com/files/XXX` |
+| `grida code flutter` | help                                    | `designto flutter https://www.figma.com/files/XXX`   |
+| `grida code auth`    | signin to design services               | `auto` \| `figma` \| `sketch` \| `xd`                |
+| `grida code init`    | configure the preferences               |
+
+## Args
+
+| Flags                     |                                                  |                                                                          |     |
+| ------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | --- |
+| `--framework`             | specify the target framework                     | `flutter` \| `react` \| `react-native` \| `svelte` \| `vue` \| `vanilla` | \*  |
+| `--config`                | specify the framework config json file           | framework.config.json                                                    |     |
+| `--design-origin`         | specify the input design origin                  | `auto` \| `figma` \| `sketch` \| `xd`                                    |     |
+| `--personal-access-token` | access token                                     |                                                                          |     |
+| `--user`                  | account name if signed-in with multiple accounts |
+
+## Output
+
+`--output, -o <path>`
+
+- `<path>`: the output file path
+- `<dir>`: the output files dir
+- dry : do not write files. log the output

cli/_utils/bin-exists/index.ts

@@ -0,0 +1,5 @@
+import which from "which";
+
+export function binexists(name: string): boolean {
+  return which.sync(name, { nothrow: true }) !== null;
+}