@developer_tribe/react-builder 0.1.0 → 0.1.4

package/scripts/public/scripts/build/utils/createMissingFoldersAndFiles.js

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import Path from 'path';
+
+function toPropsName(name) {
+  return `${name}Props`;
+}
+
+// Create folders and base component files if missing
+export function createMissingFoldersAndFiles(targetRootPath, components) {
+  const buildComponentsTarget = Path.join(
+    targetRootPath,
+    'src',
+    'build-components'
+  );
+  if (!fs.existsSync(buildComponentsTarget)) {
+    fs.mkdirSync(buildComponentsTarget, { recursive: true });
+  }
+
+  // Ensure fallback helper exists
+  const otherPath = Path.join(buildComponentsTarget, 'other.ts');
+  if (!fs.existsSync(otherPath)) {
+    const otherContent = `import React from 'react';
+import type { Node } from '@developer_tribe/react-builder';
+
+export function other(type: string, node: Node): React.ReactNode {
+  return null;
+}
+`;
+    fs.writeFileSync(otherPath, otherContent, 'utf8');
+  }
+
+  for (const component of components) {
+    const dir = Path.join(buildComponentsTarget, component);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    // component tsx
+    const tsxPath = Path.join(dir, `${component}.tsx`);
+    if (!fs.existsSync(tsxPath)) {
+      const propsName = toPropsName(component);
+      const content = `import React from 'react';
+import type { ${propsName} } from '@developer_tribe/react-builder';
+
+function ${component}(props: { node: any }) {
+  return "hello world";
+}
+
+export default React.memo(${component});
+`;
+      fs.writeFileSync(tsxPath, content, 'utf8');
+    }
+  }
+}

package/scripts/public/scripts/build/utils/createRenderNodeGenerated.js

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import Path from 'path';
+
+function readPatternType(builderComponentsPath, componentName) {
+  try {
+    const p = Path.join(builderComponentsPath, componentName, 'pattern.json');
+    const raw = fs.readFileSync(p, 'utf8');
+    const json = JSON.parse(raw.toString('utf8'));
+    const type = json?.pattern?.type;
+    if (typeof type === 'string' && type.length > 0) return type;
+  } catch {}
+  return componentName.toLowerCase();
+}
+
+export function createRenderNodeGenerated(
+  builderComponentsPath,
+  targetRootPath,
+  components
+) {
+  const buildComponentsTarget = Path.join(
+    targetRootPath,
+    'src',
+    'build-components'
+  );
+  if (!fs.existsSync(buildComponentsTarget)) {
+    fs.mkdirSync(buildComponentsTarget, { recursive: true });
+  }
+
+  const targetPath = Path.join(
+    buildComponentsTarget,
+    'RenderNode.generated.tsx'
+  );
+
+  const imports = components
+    .map(name => `import ${name} from './${name}/${name}';`)
+    .join('\n');
+
+  const cases = components
+    .map(name => {
+      const type = readPatternType(builderComponentsPath, name);
+      return `    case ${JSON.stringify(type)}:\n      return <${name} node={simpleNode} />;`;
+    })
+    .join('\n');
+
+  const content = `/* AUTO-GENERATED FILE - DO NOT EDIT */
+import React from 'react';
+import { Node, NodeData, isNodeArray, isNodeNullOrUndefined, isNodeString } from '@developer_tribe/react-builder';
+import { other } from './other';
+${imports}
+
+function RenderNode({ node }: { node: Node }) {
+  if (isNodeNullOrUndefined(node)) {
+    return null;
+  }
+  if (isNodeString(node)) {
+    return <Text node={{ children: node as string, type: 'text' }} />;
+  }
+  if (isNodeArray(node)) {
+    return (
+      <>
+        {(node as Node[]).map((item: Node, index) => (
+          <RenderNode key={index} node={item} />
+        ))}
+      </>
+    );
+  }
+
+  const simpleNode = node as NodeData;
+  switch (simpleNode?.type) {
+${cases}
+    default:
+      return other(simpleNode?.type, node);
+  }
+}
+
+export default React.memo(RenderNode);
+`;
+
+  fs.writeFileSync(targetPath, content, 'utf8');
+}
+
+// no default export

package/scripts/public/scripts/build/utils/getAllComponents.js

@@ -0,0 +1,11 @@
+import fs from 'fs';
+import Path from 'path';
+
+// Get immediate subfolder names within the given build-components path
+export function getAllComponents(buildComponentsPath) {
+  const items = fs.readdirSync(buildComponentsPath, { withFileTypes: true });
+  return items
+    .filter(item => item.isDirectory())
+    .map(dir => dir.name)
+    .sort();
+}

package/src/AttributesEditor.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+import { isNodeString } from './utils/analyseNode';
+import { getAttributeSchema } from './utils/patterns';
+
+type AttributesEditorProps = {
+  node: Node;
+  onChange: (next: Node) => void;
+};
+
+function Field({
+  name,
+  type,
+  value,
+  onChange,
+}: {
+  name: string;
+  type: string | string[];
+  value: any;
+  onChange: (v: any) => void;
+}) {
+  if (Array.isArray(type)) {
+    return (
+      <select
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="input"
+      >
+        <option value="">(none)</option>
+        {type.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    );
+  }
+  if (type === 'number') {
+    return (
+      <input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) =>
+          onChange(e.target.value === '' ? undefined : Number(e.target.value))
+        }
+        className="input"
+      />
+    );
+  }
+  if (type === 'boolean') {
+    return (
+      <input
+        type="checkbox"
+        checked={Boolean(value)}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+    );
+  }
+  return (
+    <input
+      type="text"
+      value={value ?? ''}
+      onChange={(e) =>
+        onChange(e.target.value === '' ? undefined : e.target.value)
+      }
+      className="input"
+    />
+  );
+}
+
+export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
+  if (!node || isNodeString(node)) return null;
+  const data = node as NodeData<NodeDefaultAttribute>;
+  const schema = getAttributeSchema(data?.type) ?? {};
+  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+
+  const entries = Object.entries(schema);
+  if (entries.length === 0) {
+    return (
+      <div style={{ padding: 8, opacity: 0.7 }}>No editable attributes</div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+      {entries.map(([name, type]) => (
+        <React.Fragment key={name}>
+          <div style={{ alignSelf: 'center' }}>{name}</div>
+          <Field
+            name={name}
+            type={type}
+            value={attributes?.[name]}
+            onChange={(val) => {
+              const next: NodeData<NodeDefaultAttribute> = {
+                ...data,
+                attributes: { ...(attributes ?? {}), [name]: val },
+              };
+              onChange(next);
+            }}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default React.memo(AttributesEditor);

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>
+  );
+}