manifest project infos & dirs

Author: softmarshmallow

README.md

@@ -1,16 +1,13 @@
 # design-to-code
+
 Design to code engine. A design ✌️ code standard.
 
 > Bridged's Design to code core library.
 
-
-
 ## Demo
 
 for the demo, please visit [assistant](https://github.com/bridgedxyz/assistant)
 
-
-
 ## What does it mean?
 
 ### By "design". What does it mean?
@@ -27,3 +24,6 @@ The term `code` here stands for some language or syntax tree that is adoptable f
 
 Taking more deeper look, Reflect Core DSL represents the layout, component, data, styling as a single tree.
 
+### How does it work?
+
+Read [how-it-all-works.md](./how-it-all-works.md)

editor/next.config.js

@@ -2,6 +2,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/code",
   "@designto/token",
   "@designto/flutter",
+  "@designto/web",
   "@designto/react",
   "@bridged.xyz/flutter-builder",
   "@bridged.xyz/design-sdk",

how-it-all-works.md

@@ -0,0 +1,20 @@
+# How it all works
+
+## Input: Design, Output: Code
+
+[Figma, Sketch, Bridged, XD] to [Flutter, React, Svelte, Android, iOS, ReactNative, Vue]
+
+## The process
+
+- convert design to universal design representative (a.k.a Reflect CGR Nodes)
+- do some linting
+- do some detection
+- convert ReflectNode to ReflectWidget
+- ReflectWidget to each platform's interpreter
+- platform interpreter to each platform builder (e.g. flutter-builder, react-builder)
+  - this is done by universal computer language builder developed by Bridged - [CoLI](https://coli.codes) - A Computer language interface
+- each platform builder generates the final executable code, wrapped with app scaffold.
+- this code uploads and compiled by [BASE](https://github.com/bridgedxyz/base) - Bridged App SErvices
+- you're design is now a running application.
+
+> Some small steps are missing, this document will be updated continuously.

packages/designto-code/package.json

@@ -4,9 +4,10 @@
     "main": "lib/index.js",
     "homepage": "https://designto.codes",
     "dependencies": {
+        "@designto/token": "0.0.0",
         "@designto/flutter": "0.0.1",
         "@designto/react": "0.0.0",
-        "@designto/token": "0.0.0",
+        "@designto/web": "0.0.0",
         "@bridged.xyz/design-sdk": "^0.1.0",
         "@reflect-ui/detection": "0.1.1",
         "@bridged.xyz/flutter-builder": "^1.23.0-7.0.pre.42"

packages/designto-flutter/index.ts

@@ -1,12 +1,6 @@
 import { nodes } from "@bridged.xyz/design-sdk";
 import { TextBuilder, WidgetBuilder } from "./builders";
-import {
-  SizedBox,
-  Widget,
-  Stack,
-  Size,
-  MediaQuery,
-} from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { makeSafelyAsStackList } from "./utils/make-as-safe-list";
 import { makeDivider } from "./make/divider.make";
 import { detectIf } from "@reflect-ui/detection";
@@ -23,7 +17,7 @@ let parentId = "";
 export let currentBuildingNodeId: string;
 
 interface AppBuildResult {
-  widget: Widget;
+  widget: flutter.Widget;
   scrollable: boolean;
 }
 
@@ -46,15 +40,13 @@ export function buildApp(sceneNode: nodes.ReflectSceneNode): AppBuildResult {
 function generateWidget(
   sceneNode: nodes.ReflectSceneNode,
   parentIdSrc: string = ""
-): Widget {
-  console.log(`parentId = parentIdSrc;`);
+): flutter.Widget {
   parentId = parentIdSrc;
-  console.log(`setCurrentNode(sceneNode);`);
   setCurrentNode(sceneNode);
-  console.log(`let result = flutterWidgetGenerator(sceneNode);`);
   let result = flutterWidgetGenerator(sceneNode);
 
   if (Array.isArray(result)) {
+    // this won't happen
     throw "result cannot be in array form.";
   }
 
@@ -63,7 +55,7 @@ function generateWidget(
 
 function flutterWidgetGenerator(
   sceneNode: ReadonlyArray<nodes.ReflectSceneNode> | nodes.ReflectSceneNode
-): Array<Widget> | Widget {
+): Array<flutter.Widget> | flutter.Widget {
   console.log(`flutterWidgetGenerator handling scene node -`, sceneNode);
   if (Array.isArray(sceneNode) && sceneNode.length > 0) {
     // explicit type casting
@@ -73,7 +65,7 @@ function flutterWidgetGenerator(
     const sceneLen = sceneNode.length;
 
     // initialize output widgets array
-    let widgets: Array<Widget> = [];
+    let widgets: Array<flutter.Widget> = [];
 
     console.log(
       `widget generator::
@@ -109,7 +101,7 @@ function flutterWidgetGenerator(
     return handleNode(sceneNode);
   }
 
-  function handleNode(node: nodes.ReflectSceneNode): Widget {
+  function handleNode(node: nodes.ReflectSceneNode): flutter.Widget {
     setCurrentNode(node);
     console.log(
       `starting handling node ${node.toString()} type of ${node.type}`
@@ -177,7 +169,7 @@ function setCurrentNode(node: { id: string }) {
   currentBuildingNodeId = node.id;
 }
 
-function flutterGroupHandler(node: nodes.ReflectGroupNode): Widget {
+function flutterGroupHandler(node: nodes.ReflectGroupNode): flutter.Widget {
   console.log(
     `group handler :: making ${node} as a stack with its children count of ${node.childrenCount}`
   );
@@ -193,14 +185,17 @@ function flutterContainer(
     | nodes.ReflectGroupNode
     | nodes.ReflectRectangleNode
     | nodes.ReflectEllipseNode,
-  child?: Widget
-): Widget {
+  child?: flutter.Widget
+): flutter.Widget {
   const builder = new WidgetBuilder({ child: child, node: node });
 
   const isBuildRoot = targetId === node.id;
   const sizeOptions = isBuildRoot
     ? {
-        size: new Size(MediaQuery.of().size.width, undefined).addComment(
+        size: new flutter.Size(
+          flutter.MediaQuery.of().size.width,
+          undefined
+        ).addComment(
           'container building for target root node. making the width with "MediaQuery.of().size.width"'
         ),
       }
@@ -213,7 +208,7 @@ function flutterContainer(
   return builder.child;
 }
 
-function flutterText(node: nodes.ReflectTextNode): Widget {
+function flutterText(node: nodes.ReflectTextNode): flutter.Widget {
   const builder = new TextBuilder({
     child: undefined,
     node: node,
@@ -224,15 +219,15 @@ function flutterText(node: nodes.ReflectTextNode): Widget {
   return builder.child;
 }
 
-function flutterFrame(node: nodes.ReflectFrameNode): Widget {
+function flutterFrame(node: nodes.ReflectFrameNode): flutter.Widget {
   console.log(`start handling frame node ${node.toString()} and its children`);
   const children = flutterWidgetGenerator(node.children);
 
   if (node.children.length === 1) {
     // if there is only one child, there is no need for Container or Row. Padding works indepdently of them.
-    return flutterContainer(node, children as Widget);
+    return flutterContainer(node, children as flutter.Widget);
   } else if (node.layoutMode !== undefined) {
-    const rowColumn = makeRowColumn(node, children as Array<Widget>);
+    const rowColumn = makeRowColumn(node, children as Array<flutter.Widget>);
     return flutterContainer(node, rowColumn);
   } else {
     // node.layoutMode === "NONE" && node.children.length > 1
@@ -247,7 +242,7 @@ function flutterFrame(node: nodes.ReflectFrameNode): Widget {
 
     return flutterContainer(
       node,
-      new Stack({
+      new flutter.Stack({
         children: makeSafelyAsStackList(children),
       })
     );
@@ -258,7 +253,7 @@ function addSpacingIfNeeded(
   node: nodes.ReflectSceneNode,
   index: number,
   length: number
-): Widget | undefined {
+): flutter.Widget | undefined {
   if (
     node.parent instanceof nodes.ReflectFrameNode &&
     node.parent.layoutMode !== undefined
@@ -267,12 +262,12 @@ function addSpacingIfNeeded(
     // Don't add the SizedBox at last value. In Figma, itemSpacing CAN be negative; here it can't.
     if (node.parent.itemSpacing > 0 && index < length - 1) {
       if (node.parent.layoutMode === ReflectAxis.horizontal) {
-        return new SizedBox({
+        return new flutter.SizedBox({
           width: roundNumber(node.parent.itemSpacing),
         });
       } else {
         // node.parent.layoutMode === "VERTICAL"
-        return new SizedBox({
+        return new flutter.SizedBox({
           height: roundNumber(node.parent.itemSpacing),
         });
       }

packages/designto-token/container/index.ts

@@ -1 +1,3 @@
-# Layout engine
+# Layout engine
+
+The layout is to present multichild widget. Input node can be either Grup or Frame, and can be converted to one of [Stack, Column, Row, Wrap, Grid] Widget

packages/designto-token/layout/README.md

@@ -0,0 +1,10 @@
+import { nodes } from "@bridged.xyz/design-sdk";
+import * as core from "@reflect-ui/core";
+
+function fromFrame(frame: nodes.ReflectFrameNode): core.LayoutRepresntatives {
+  return undefined;
+}
+
+function fromGroup(group: nodes.ReflectGroupNode): core.LayoutRepresntatives {
+  return undefined;
+}

packages/designto-token/layout/index.ts

@@ -0,0 +1 @@
+# Convert to container if child is single.

packages/designto-token/logics/convert-to-container-if-single-child/README.md

@@ -0,0 +1,4 @@
+export function shouldBeContainer(): boolean {
+  console.error('"shouldBeContainer" not implemented');
+  return false;
+}