Simple Components support with text property auto interfacing (1/2)

docs/component-property-interfacing-auto.md

@@ -14,6 +14,7 @@ This is based on diff checking of master `A` and instance `A'`, supporting below
 
 - text data
 - color on **single fill**
+- image as src uri on **single image fill**
 - item spacing
 - margin / padding
 

editor/pages/figma/to-react.tsx

@@ -17,6 +17,7 @@ import { WidgetTree as WebWidgetTree } from "@web-builder/core";
 import * as core from "@reflect-ui/core";
 import { react as reactconfig } from "@designto/config";
 import { useReflectTargetNode } from "../../query/from-figma";
+import { react_presets } from "@grida/builder-config-preset";
 
 export default function FigmaToReactDemoPage() {
   const [targetSelectionNodeId, setTargetSelectionNodeId] = useState<string>();
@@ -42,9 +43,10 @@ export default function FigmaToReactDemoPage() {
   if (reflect) {
     reflectWidget = tokenize(reflect);
     widgetTree = react.buildReactWidget(reflectWidget);
-    const _stringfiedReactwidget = react.buildReactApp(widgetTree, {
-      template: "cra",
-    });
+    const _stringfiedReactwidget = react.buildReactApp(
+      widgetTree,
+      react_presets.react_default
+    );
 
     reactComponent = _stringfiedReactwidget;
   }

editor/pages/to-code/index.tsx

@@ -174,6 +174,10 @@ function get_framework_config(framework: string) {
     case "react-default":
     case "react.default":
       return react_presets.react_default;
+    case "react-with-styled-components":
+      return react_presets.react_with_styled_components;
+    case "react-with-emotion-styled":
+      return react_presets.react_with_emotion_styled;
     case "flutter":
     case "flutter_default":
     case "flutter-default":

packages/builder-config-preset/index.ts

@@ -1,6 +1,15 @@
 import { config, react } from "@designto/config";
 import { Framework, Language } from "@grida/builder-platform-types";
 
+const _react_component_declaration_style = {
+  exporting_style: {
+    type: "export-named-functional-component",
+    exporting_position: "with-declaration",
+    declaration_syntax_choice: "function",
+    export_declaration_syntax_choice: "export",
+  },
+};
+
 export const react_presets = {
   react_default: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -9,6 +18,7 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_styled_components: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -17,6 +27,7 @@ export const react_presets = {
       type: "styled-components",
       module: "styled-components",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_emotion_styled: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -25,19 +36,22 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_css_in_jsx: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
     styling: {
       type: "css-in-jsx",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_css: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
     styling: { type: "css" },
   },
+  component_declaration_style: _react_component_declaration_style,
 };
 
 export const vanilla_presets = {

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

@@ -19,7 +19,7 @@ interface ScssStylingConfig {
   lang: "scss";
 }
 
-type ReactStyledComponentsConfig =
+export type ReactStyledComponentsConfig =
   | ReactTheStyledComponentsConfig
   | ReactEmotionStyledConfig;
 

packages/builder-web-react/react-component-exporting/index.ts

@@ -7,27 +7,38 @@ import {
   VariableStatement,
 } from "coli";
 
-export function add_export_keyword_modifier_to_declaration(
+type ExportAssignable = VariableStatement | FunctionDeclaration;
+/**
+ * Makes `function Component` to `export function Compinent`
+ */
+export function add_export_keyword_modifier_to_declaration<
+  O extends ExportAssignable = ExportAssignable
+>(
   declaration: FunctionDeclaration | VariableDeclaration | VariableStatement
-): FunctionDeclaration | VariableStatement {
+): O {
   if (declaration instanceof FunctionDeclaration) {
     declaration.modifiers.export = SyntaxKind.ExportKeyword;
-    return declaration;
+    return declaration as O;
   }
   if (declaration instanceof VariableDeclaration) {
     return new VariableStatement({
       kind: declaration.kind,
       modifiers: { export: SyntaxKind.ExportKeyword },
       declarations: [declaration],
-    });
+    }) as O;
   }
 
   if (declaration instanceof VariableStatement) {
     declaration.modifiers.export = SyntaxKind.ExportKeyword;
-    return declaration;
+    return declaration as O;
   }
 }
 
+/**
+ * Makes `Component` to `export Component`
+ * @param id
+ * @returns
+ */
 export function wrap_with_export_assignment_react_component_identifier(
   id: Identifier
 ) {

packages/builder-web-react/react-module-file/index.ts

@@ -0,0 +1,7 @@
+import { SourceFile } from "coli";
+
+export class ReactModuleFile extends SourceFile {
+  constructor({ name, path }: { name: string; path: string }) {
+    super({ name, path });
+  }
+}