Add Initial React native CodeGen Support

README.md

@@ -25,6 +25,65 @@ yarn editor
 
 update pulling - `git submodule update --init --recursive`
 
+## Platforms / Frameworks
+
+| **Frameworks**     |       |
+| ------------------ | :---: |
+| ReactJS            |  ✅   |
+| Flutter            |  ✅   |
+| React Native       |  ✅   |
+| Vanilla (html/css) |  ✅   |
+| Vue                | (wip) |
+
+| **ReactJS**         |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@emotion/styled`   |  ✅   |
+| css-modules         |  ✅   |
+| inline-css          |  ✅   |
+| `@mui/material`     | (wip) |
+| breakpoints         | (wip) |
+| components          | (wip) |
+
+| **ReactNative**                |       |
+| ------------------------------ | :---: |
+| `StyleSheet`                   |  ✅   |
+| `styled-components/native`     |  ✅   |
+| `@emotion/native`              |  ✅   |
+| `react-native-linear-gradient` | (wip) |
+| `react-native-svg`             | (wip) |
+| `expo`                         | (wip) |
+
+| **Vanilla** |               |
+| ----------- | :-----------: |
+| reflect-ui  | right-aligned |
+| css         |      ✅       |
+| scss        |   are neat    |
+
+| **Flutter** |       |
+| ----------- | :---: |
+| material    |  ✅   |
+| cupertino   | (wip) |
+| reflect-ui  | (wip) |
+
+| **Svelte**          |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **Vue**             |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **iOS** |       |
+| ------- | :---: |
+| SwiftUI | (wip) |
+
+| **Android**     |       |
+| --------------- | :---: |
+| Jetpack Compose | (wip) |
+
 ## What does it mean?
 
 ### By "design". What does it mean?

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -13,6 +13,7 @@ import {
   react_styles,
 } from "./framework-options";
 import styled from "@emotion/styled";
+import assert from "assert";
 
 type DesigntoCodeUserOptions = FrameworkOption;
 
@@ -31,6 +32,8 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
     all_preset_options_map__prod[__presetname]
   );
 
+  assert(useroption, "option must be specified");
+
   useEffect(() => {
     // trigger initial value
     props.onUseroptionChange(useroption);
@@ -54,6 +57,26 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "react_with_inline_css",
         description: "with inline-css",
       },
+      {
+        name: "React",
+        value: "react_with_css_module",
+        description: "with css-module",
+      },
+      {
+        name: "React Native",
+        value: "reactnative_default",
+        description: "react-native",
+      },
+      {
+        name: "React Native",
+        value: "reactnative_with_styled_components",
+        description: "with styled-components",
+      },
+      {
+        name: "React Native",
+        value: "reactnative_with_inline_style",
+        description: "with inline-style",
+      },
       {
         name: "Flutter",
         value: "flutter_default",
@@ -89,12 +112,12 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
   const getreactstyle = (frameworkPreset: string) => {
     const preset = getpreset(frameworkPreset) as ReactOption;
     const selected_styling = preset.styling;
-    const sorted_langs = [
+    const sorted_styles = [
       selected_styling,
       /* remove target item // - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice */
       ...react_styles.splice(1, 0, selected_styling),
     ];
-    return sorted_langs;
+    return sorted_styles;
   };
 
   const react_style_field_config: IField = {
@@ -138,6 +161,7 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
 
   const fields_config = {
     react: [platform_field_config, lang_field_config, react_style_field_config],
+    "react-native": [platform_field_config, lang_field_config],
     flutter: [platform_field_config, lang_field_config],
     vanilla: [platform_field_config, lang_field_config],
   };

editor/components/codeui-code-options-control/framework-options.ts

@@ -7,7 +7,16 @@ export enum Language {
   html = "html",
 }
 
-export type ReactStylingStrategy = "css" | "styled-components" | "inline-css";
+export type ReactStylingStrategy =
+  | "css"
+  | "styled-components"
+  | "inline-css"
+  | "css-module";
+
+export type ReactNativeStylingStrategy =
+  | "style-sheet"
+  | "styled-components"
+  | "inline-style";
 
 export interface FlutterOption {
   framework: Framework.flutter;
@@ -20,12 +29,22 @@ export interface ReactOption {
   styling: ReactStylingStrategy;
 }
 
+export interface ReactNativeOption {
+  framework: Framework.reactnative;
+  language: Language.jsx | Language.tsx;
+  styling: ReactNativeStylingStrategy;
+}
+
 export interface VanillaOption {
   framework: Framework.vanilla;
   language: Language.html;
 }
 
-export type FrameworkOption = ReactOption | FlutterOption | VanillaOption;
+export type FrameworkOption =
+  | ReactOption
+  | ReactNativeOption
+  | FlutterOption
+  | VanillaOption;
 
 export const react_presets = {
   react_default: <ReactOption>{
@@ -43,13 +62,36 @@ export const react_presets = {
     language: Language.tsx,
     styling: "inline-css",
   },
+  react_with_css_module: <ReactOption>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: "css-module",
+  },
   react_with_css: <ReactOption>{
     framework: Framework.react,
     language: Language.tsx,
     styling: "css",
   },
 };
 
+export const reactnative_presets = {
+  reactnative_default: <ReactNativeOption>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    styling: "style-sheet",
+  },
+  reactnative_with_styled_components: <ReactNativeOption>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  reactnative_with_inline_style: <ReactNativeOption>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    styling: "inline-style",
+  },
+};
+
 export const flutter_presets = {
   flutter_default: <FlutterOption>{
     framework: Framework.flutter,
@@ -66,6 +108,7 @@ export const vanilla_presets = {
 
 export const presets = {
   react: react_presets,
+  reactnative: reactnative_presets,
   flutter: flutter_presets,
   vanilla: vanilla_presets,
 };
@@ -75,6 +118,8 @@ export const all_preset_options__prod = [
   react_presets.react_default,
   react_presets.react_with_styled_components,
   react_presets.react_with_inline_css,
+  react_presets.react_with_css_module,
+  reactnative_presets.reactnative_default,
   vanilla_presets.vanilla_default,
   // react_with_css // NOT ON PRODUCTION
 ];
@@ -85,19 +130,27 @@ export const all_preset_options_map__prod = {
   react_default: react_presets.react_default,
   react_with_styled_components: react_presets.react_with_styled_components,
   react_with_inline_css: react_presets.react_with_inline_css,
+  react_with_css_module: react_presets.react_with_css_module,
+  reactnative_default: reactnative_presets.reactnative_default,
+  reactnative_with_styled_components:
+    reactnative_presets.reactnative_with_styled_components,
+  reactnative_with_inline_style:
+    reactnative_presets.reactnative_with_inline_style,
   vanilla_default: vanilla_presets.vanilla_default,
   // react_with_css // NOT ON PRODUCTION
 };
 
 export const lang_by_framework = {
   flutter: [Language.dart],
   react: [Language.jsx, Language.tsx],
+  "react-native": [Language.jsx, Language.tsx],
   vanilla: [Language.html],
 };
 
 export const react_styles: ReactStylingStrategy[] = [
   "styled-components",
   "inline-css",
+  "css-module",
   "css",
 ];
 
@@ -115,6 +168,8 @@ export const getDefaultPresetNameByFramework = (frameowrk: Framework) => {
       return "flutter_default";
     case Framework.react:
       return "react_default";
+    case Framework.reactnative:
+      return "reactnative_default";
     case Framework.vanilla:
       return "vanilla_default";
   }

editor/next.config.js

@@ -22,6 +22,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/web",
   "@designto/vanilla",
   "@designto/react",
+  "@designto/react-native",
 
   "@code-features/assets",
   "@code-features/component",
@@ -82,10 +83,12 @@ const withTM = require("next-transpile-modules")([
   // region builders - part of designto-code / coli
 
   // region web builders
-  "@coli.codes/nodejs-builder",
+  "@web-builder/nodejs",
   "@web-builder/core",
   "@web-builder/vanilla",
+  "@web-builder/react-core",
   "@web-builder/react",
+  "@web-builder/react-native",
   "@web-builder/reflect-ui",
   "@web-builder/styled",
   "@web-builder/styles",

editor/query/to-code-options-from-query.ts

@@ -1,5 +1,6 @@
 import {
   react_presets,
+  reactnative_presets,
   flutter_presets,
   vanilla_presets,
 } from "@grida/builder-config-preset";
@@ -37,6 +38,17 @@ export function get_framework_config(framework: string) {
     case "react_with_inline_css":
     case "react-with-inline-css":
       return react_presets.react_with_inline_css;
+    case "react_with_css_module":
+    case "react-with-css-module":
+      return react_presets.react_with_css_module;
+    case "react-native":
+      return reactnative_presets.reactnative_default;
+    case "react-native-with-style-sheet":
+      return reactnative_presets.reactnative_with_style_sheet;
+    case "react-native-with-styled-components":
+      return reactnative_presets.reactnative_with_styled_components;
+    case "react-native-with-inline-style":
+      return reactnative_presets.reactnative_with_inline_style;
     case "flutter":
     case "flutter_default":
     case "flutter-default":

editor/scaffolds/code/index.tsx

@@ -14,6 +14,7 @@ import { utils_dart } from "utils";
 import type { ReflectSceneNode } from "@design-sdk/core";
 
 import { utils as _design_utils } from "@design-sdk/core";
+import assert from "assert";
 const designq = _design_utils.query;
 
 export function CodeSegment() {
@@ -120,25 +121,46 @@ export function CodeSegment() {
           switch (o.framework) {
             case "react": {
               switch (o.styling) {
+                case "styled-components":
+                  c = get_framework_config("react-with-styled-components");
+                  break;
                 case "inline-css":
                   c = get_framework_config("react-with-inline-css");
                   break;
-                case "styled-components":
-                  c = get_framework_config("react-with-styled-components");
+                case "css-module":
+                  c = get_framework_config("react-with-css-module");
                   break;
                 case "css":
                   // TODO:
                   break;
               }
               break;
             }
+            case "react-native": {
+              switch (o.styling) {
+                case "style-sheet":
+                  c = get_framework_config("react-native-with-style-sheet");
+                  break;
+                case "styled-components":
+                  c = get_framework_config(
+                    "react-native-with-styled-components"
+                  );
+                  break;
+                case "inline-style":
+                  c = get_framework_config("react-native-with-inline-style");
+                  break;
+              }
+              break;
+            }
             case "flutter":
               c = get_framework_config(o.framework);
               break;
             case "vanilla":
               c = get_framework_config(o.framework);
               break;
           }
+
+          assert(c);
           set_framework_config(c);
         }}
       />