@developer_tribe/react-builder 0.1.0 → 0.1.2

package/src/RenderMainNode.tsx

@@ -0,0 +1,37 @@
+import { createContext, useState } from 'react';
+import { Node } from './index';
+
+import { Localication } from './types/PreviewConfig';
+import RenderNode from './build-components/RenderNode.generated';
+export const mainNodeContext = createContext<{
+  localication?: Localication;
+  defaultLanguage?: string;
+  theme?: 'light' | 'dark';
+  warning?: string;
+  setWarning?: (message: string) => void;
+} | null>(null);
+
+export function RenderMainNode({
+  node,
+  localication,
+  defaultLanguage,
+  theme,
+}: {
+  node: Node;
+  localication?: Localication;
+  defaultLanguage?: string;
+  theme?: 'light' | 'dark';
+  warning?: string;
+  setWarning?: (message: string) => void;
+}) {
+  const [warning, setWarning] = useState<string>('');
+
+  return (
+    <mainNodeContext.Provider
+      value={{ localication, defaultLanguage, theme, warning, setWarning }}
+    >
+      {warning && <div className="warning">{warning}</div>}
+      <RenderNode node={node} />
+    </mainNodeContext.Provider>
+  );
+}

package/src/RenderPage.tsx

@@ -0,0 +1,61 @@
+import { Localication } from './types/PreviewConfig';
+import { TargetedScreenSize } from './types/TargetedScreenSize';
+import { RenderMainNode } from './RenderMainNode';
+import { Node } from './types/Node';
+type RenderPageProps = {
+  data: Node;
+  screenSize: TargetedScreenSize;
+  isRtl: boolean;
+  screenStyle: {
+    light: { backgroundColor: string; color: string };
+    dark: { backgroundColor: string; color: string };
+  };
+  theme: 'dark' | 'light';
+  localication: Localication;
+  defaultLanguage?: string;
+};
+
+export function RenderPage({
+  data,
+  screenSize,
+  theme,
+  isRtl,
+  screenStyle,
+  localication,
+  defaultLanguage,
+}: RenderPageProps) {
+  return (
+    <div className="stage-wrapper" style={{ overflow: 'auto' }}>
+      <div
+        className="stage"
+        style={{
+          width: screenSize.width,
+          height: screenSize.height,
+          minWidth: screenSize.width,
+          maxWidth: screenSize.width,
+          minHeight: screenSize.height,
+          maxHeight: screenSize.height,
+          overflow: 'hidden',
+          position: 'relative',
+          padding: 4,
+          direction: isRtl ? 'rtl' : 'ltr',
+          backgroundColor:
+            theme === 'dark'
+              ? screenStyle.dark.backgroundColor
+              : screenStyle.light.backgroundColor,
+          color:
+            theme === 'dark' ? screenStyle.dark.color : screenStyle.light.color,
+        }}
+      >
+        {
+          <RenderMainNode
+            localication={localication}
+            node={data}
+            defaultLanguage={defaultLanguage}
+            theme={theme}
+          />
+        }
+      </div>
+    </div>
+  );
+}