Standard IO - Add configuration related package (types + interface)

editor/next.config.js

@@ -1,5 +1,7 @@
 const withTM = require("next-transpile-modules")([
   "@designto/config",
+  "@grida/builder-config-preset",
+  "@grida/builder-platform-types",
   "@designto/code",
   "@designto/token",
   "@designto/flutter",
@@ -11,7 +13,11 @@ const withTM = require("next-transpile-modules")([
   "@design-sdk/core-types",
   "@design-sdk/universal",
   "@design-sdk/figma",
+  "@design-sdk/figma-types",
   "@design-sdk/figma-url",
+  "@design-sdk/figma-remote",
+  "@design-sdk/figma-remote-api",
+  // "@design-sdk/figma-remote-types",
   "@design-sdk/url-analysis",
   "@design-sdk/sketch",
   // reflect-ui

editor/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.0",
     "@base-sdk/base": "^0.1.0-5",
-    "@design-sdk/figma-auth-store": "^0.0.1",
+    "@design-sdk/figma-auth-store": "^0.0.2",
     "@designto/code": "0.0.1",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.1.5",
@@ -52,4 +52,4 @@
     "next-transpile-modules": "^7.0.0",
     "typescript": "^4.2.3"
   }
-}
+}

editor/pages/to-code/index.tsx

@@ -10,10 +10,10 @@ import {
 } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
 import { MonacoEditor } from "../../components/code-editor";
-
+import { react_presets } from "@grida/builder-config-preset";
 export default function DesignToCodeUniversalPage() {
   const design = useDesign();
-  console.log("design", design);
+
   if (!design) {
     return <>Loading..</>;
   }
@@ -27,7 +27,7 @@ export default function DesignToCodeUniversalPage() {
       name: name,
       design: reflect,
     },
-    { framework: "react" }
+    react_presets.react_default
   ); // fixme
 
   //@ts-ignore // FIXME: no ignore

editor/query/from-figma/index.ts

@@ -2,11 +2,11 @@ import {
   FigmaTargetNodeConfig,
   parseFileAndNodeId,
 } from "@design-sdk/figma-url";
-import { Figma, nodes, remote } from "@design-sdk/figma";
+import { Figma, nodes, api } from "@design-sdk/figma";
 import { NextRouter, useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { fetch } from "@design-sdk/figma-remote";
-import { personal } from "@design-sdk/figma-auth-store"
+import { personal } from "@design-sdk/figma-auth-store";
 import { TargetNodeConfig as _TargetNodeConfig } from "../target-node";
 
 const P_FIGMA_TARGET_URL = "figma_target_url";
@@ -56,8 +56,8 @@ export function useFigmaTargetNode() {
 }
 
 export interface TargetNodeConfig
-  extends _TargetNodeConfig<remote.api.Node, Figma.SceneNode> {
-  remote: remote.api.Node;
+  extends _TargetNodeConfig<api.Node, Figma.SceneNode> {
+  remote: api.Node;
   figma: Figma.SceneNode;
   reflect: nodes.ReflectSceneNode;
   url: string;

packages/builder-config-preset/index.ts

@@ -0,0 +1,60 @@
+import { config, react } from "@designto/config";
+import { Framework, Language } from "@grida/builder-platform-types";
+
+export const react_presets = {
+  react_default: <config.ReactFrameworkConfig>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  react_with_styled_components: <config.ReactFrameworkConfig>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  react_with_css_in_jsx: <config.ReactFrameworkConfig>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: "css-in-jsx",
+  },
+  react_with_css: <config.ReactFrameworkConfig>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: "css",
+  },
+};
+
+export const flutter_presets = {
+  flutter_default: <config.FlutterFrameworkConfig>{
+    framework: Framework.flutter,
+    language: Language.dart,
+  },
+};
+
+export const presets = {
+  react: react_presets,
+  flutter: flutter_presets,
+};
+
+export const all_preset_options__prod = [
+  flutter_presets.flutter_default,
+  react_presets.react_default,
+  react_presets.react_with_styled_components,
+  // react_with_css_in_jsx // NOT ON PRODUCTION
+  // react_with_css // NOT ON PRODUCTION
+];
+
+export const all_preset_options_map__prod = {
+  none: null,
+  flutter_default: flutter_presets.flutter_default,
+  react_default: react_presets.react_default,
+  react_with_styled_components: react_presets.react_with_styled_components,
+  // react_with_css_in_jsx // NOT ON PRODUCTION
+  // react_with_css // NOT ON PRODUCTION
+};
+
+export const react_styles: react.ReactStylingStrategy[] = [
+  "styled-components",
+  "css-in-jsx",
+  "css",
+];

packages/builder-config-preset/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@grida/builder-config-preset",
+    "authors": "Grida.co",
+    "version": "1.0.0",
+    "dependencies": {}
+}

packages/builder-config/configure/framework-config.ts

@@ -1,9 +1,15 @@
+import { Language } from "@grida/builder-platform-types";
+import { ReactStylingStrategy } from "../framework-react";
+
 export type FrameworkConfig = ReactFrameworkConfig | FlutterFrameworkConfig;
 
 export interface ReactFrameworkConfig {
   framework: "react";
+  language: Language.jsx | Language.tsx;
+  styling: ReactStylingStrategy;
 }
 
 export interface FlutterFrameworkConfig {
   framework: "flutter";
+  language: Language.dart;
 }

packages/builder-config/framework-react/index.ts

@@ -0,0 +1,5 @@
+import { ComponentOutput } from "../output";
+
+export interface ReactComponentOutput extends ComponentOutput {}
+
+export type ReactStylingStrategy = "css" | "styled-components" | "css-in-jsx";

packages/builder-config/framework/index.ts

@@ -0,0 +1,8 @@
+export * as android from "../framework-android";
+export * as flutter from "../framework-flutter";
+export * as ios from "../framework-ios";
+export * as react from "../framework-react";
+export * as vue from "../framework-vue";
+
+// universal
+// export * as universal from "./universal";

packages/builder-config/index.ts

@@ -1,4 +1,5 @@
 export * as input from "./input";
 export * as output from "./output";
-export * as config from "./configure";
-export * from "./platforms";
+export * as config from "./configure"; // configure
+export * from "./configure"; // configure
+export * from "./framework";

packages/builder-platform-types/index.ts

@@ -0,0 +1,2 @@
+export * from "./languages";
+export * from "./ui-frameworks";

packages/builder-platform-types/languages/index.ts

@@ -0,0 +1,5 @@
+export enum Language {
+  jsx = "jsx",
+  tsx = "tsx",
+  dart = "dart",
+}

packages/builder-platform-types/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@grida/builder-platform-types",
+    "authors": "Grida.co",
+    "version": "1.0.0",
+    "dependencies": {}
+}

packages/builder-platform-types/ui-frameworks/index.ts

@@ -0,0 +1,4 @@
+export enum Framework {
+  react = "react",
+  flutter = "flutter",
+}