@developer_tribe/react-builder 1.0.5 → 1.0.6

package/src/styles/components/_editor-shell.scss

@@ -187,22 +187,3 @@
   background: #eef2ff;
   color: #111827;
 }
-
-.side-tool-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 5;
-}
-
-.side-tool select {
-  width: 100%;
-  font-size: 11px;
-  padding: 4px 6px;
-}
-
-.side-tool .debug-button {
-  border-radius: 0;
-  width: 100%;
-  justify-content: center;
-}

package/src/styles/index.scss

@@ -13,6 +13,7 @@
 @use './components/editor-shell';
 @use './components/attributes-editor';
 @use './components/mockos-router';
+@use './components/bottom-bar';
 
 @use './modals/modal-shell';
 @use './modals/add-component';

package/src/utils/analyseNodeByPatterns.ts

@@ -334,11 +334,26 @@ function validateAttributesByPattern(
   if (attrs == null) return ok();
   if (!isPlainObject(attrs)) return fail(`attributes must be an object`, path);
 
+  const componentType = normalizeTypeOrFallback(pattern.pattern.type);
+
   const schema: AttributeSchema = (getAttributeSchema(pattern.pattern.type) ??
     pattern.pattern.attributes ??
     {}) as AttributeSchema;
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
+    // Legacy compatibility: older onboard samples/projects stored theme on the provider.
+    // Modern projects store theme under `appConfig.theme`, but we still accept this
+    // attribute to avoid breaking existing JSON.
+    if (componentType === 'OnboardProvider' && attrName === 'theme') {
+      if (typeof attrValue !== 'string') {
+        return fail(`Expected one of: light, dark`, joinPath(path, attrName));
+      }
+      if (attrValue !== 'light' && attrValue !== 'dark') {
+        return fail(`Expected one of: light, dark`, joinPath(path, attrName));
+      }
+      continue;
+    }
+
     const attrSpec = schema?.[attrName];
     if (!attrSpec) {
       if (pattern.allowUnknownAttributes) continue;

package/src/utils/nodeTree.ts

@@ -0,0 +1,99 @@
+import type { Node, NodeData } from '../types/Node';
+
+export function deleteNodeFromTree(root: Node, target: Node): Node {
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+
+  if (Array.isArray(root)) {
+    let changed = false;
+    const nextChildren: Node[] = [];
+    for (const child of root) {
+      if (child === target) {
+        changed = true;
+        continue;
+      }
+      const nextChild = deleteNodeFromTree(child, target);
+      if (nextChild !== child) changed = true;
+      nextChildren.push(nextChild);
+    }
+    return changed ? nextChildren : root;
+  }
+
+  const data = root as any;
+  if ('children' in data) {
+    const prev = data.children as Node;
+    if (!prev) return root;
+
+    if (Array.isArray(prev)) {
+      let changed = false;
+      const nextChildren: Node[] = [];
+      for (const child of prev) {
+        if (child === target) {
+          changed = true;
+          continue;
+        }
+        const nextChild = deleteNodeFromTree(child, target);
+        if (nextChild !== child) changed = true;
+        nextChildren.push(nextChild);
+      }
+      if (changed) {
+        return { ...data, children: nextChildren } as Node;
+      }
+      return root;
+    }
+
+    if (prev === target) {
+      return { ...data, children: '' } as Node;
+    }
+
+    const nextChild = deleteNodeFromTree(prev, target);
+    if (nextChild !== prev) {
+      return { ...data, children: nextChild } as Node;
+    }
+  }
+
+  return root;
+}
+
+export function isNodeRecord(node: Node): node is NodeData {
+  return (
+    node !== null &&
+    node !== undefined &&
+    typeof node === 'object' &&
+    !Array.isArray(node)
+  );
+}
+
+export function nodeHasChild(parent: NodeData, potentialChild: Node): boolean {
+  const { children } = parent;
+  if (!children) return false;
+  if (Array.isArray(children)) {
+    return children.some((child) => child === potentialChild);
+  }
+  return children === potentialChild;
+}
+
+export function findNodeByKey(root: Node, key?: string): Node | null {
+  if (!key) return null;
+  if (root === null || root === undefined) return null;
+  if (typeof root === 'string') return null;
+
+  if (Array.isArray(root)) {
+    for (const child of root) {
+      const found = findNodeByKey(child, key);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const nodeData = root as NodeData;
+  if (nodeData.key === key) {
+    return nodeData;
+  }
+
+  if (nodeData.children) {
+    return findNodeByKey(nodeData.children as Node, key);
+  }
+
+  return null;
+}

package/dist/build-components/PaywallSubscriButton/PaywallSubscriButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { PaywallSubscriButtonComponentProps } from './PaywallSubscriButtonProps.generated';
-declare function PaywallSubscriButton({ node }: PaywallSubscriButtonComponentProps): null;
-declare const _default: React.MemoExoticComponent<typeof PaywallSubscriButton>;
-export default _default;

package/dist/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.d.ts

@@ -1,50 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export type FontWeightOptionType = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-export interface PaywallSubscriButtonPropsGenerated {
-    child: string;
-    attributes: {
-        color?: string;
-        fontSize?: string;
-        fontWeight?: FontWeightOptionType;
-        scrollable?: boolean;
-        flexDirection?: FlexDirectionOptionType;
-        alignItems?: AlignItemsOptionType;
-        justifyContent?: JustifyContentOptionType;
-        gap?: string;
-        padding?: string;
-        paddingHorizontal?: string;
-        paddingVertical?: string;
-        paddingTop?: string;
-        paddingBottom?: string;
-        paddingLeft?: string;
-        paddingRight?: string;
-        margin?: string;
-        marginVertical?: string;
-        marginTop?: string;
-        marginBottom?: string;
-        marginLeft?: string;
-        marginRight?: string;
-        backgroundColor?: string;
-        borderRadius?: string;
-        width?: string;
-        minWidth?: string;
-        maxWidth?: string;
-        height?: string;
-        minHeight?: string;
-        maxHeight?: string;
-        flex?: number;
-        position?: PositionOptionType;
-        top?: string;
-        bottom?: string;
-        left?: string;
-        right?: string;
-        zIndex?: number;
-    };
-}
-export interface PaywallSubscriButtonComponentProps {
-    node: NodeData<PaywallSubscriButtonPropsGenerated['attributes']>;
-}

package/dist/pages/tabs/SideTool.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { Node } from '../../types/Node';
-type SideToolProps = {
-    data: Node;
-    setData: React.Dispatch<React.SetStateAction<Node>>;
-};
-export declare function SideTool({ data, setData }: SideToolProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/build-components/PaywallSubscriButton/PaywallSubscriButton.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { PaywallSubscriButtonComponentProps } from './PaywallSubscriButtonProps.generated';
-import useNode from '../useNode';
-
-function PaywallSubscriButton({ node }: PaywallSubscriButtonComponentProps) {
-  node = useNode(node);
-  return null;
-}
-
-export default React.memo(PaywallSubscriButton);

package/src/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.ts

@@ -1,77 +0,0 @@
-/* AUTO-GENERATED FILE - DO NOT EDIT */
-
-import type { NodeData } from '../../types/Node';
-
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type AlignItemsOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'stretch'
-  | 'baseline';
-export type JustifyContentOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-
-export interface PaywallSubscriButtonPropsGenerated {
-  child: string;
-  attributes: {
-    color?: string;
-    fontSize?: string;
-    fontWeight?: FontWeightOptionType;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-  };
-}
-
-export interface PaywallSubscriButtonComponentProps {
-  node: NodeData<PaywallSubscriButtonPropsGenerated['attributes']>;
-}

package/src/build-components/PaywallSubscriButton/pattern.json

@@ -1,27 +0,0 @@
-{
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
-  "pattern": {
-    "type": "PaywallSubscriButton",
-    "children": "string",
-    "extends": "Button",
-    "attributes": {}
-  },
-  "defaults": {
-    "paddingHorizontal": "20@s",
-    "paddingVertical": "12@vs",
-    "borderRadius": "12@s",
-    "backgroundColor": "#1C1C1E",
-    "color": "cornflowerblue",
-    "fontSize": "16@fs",
-    "fontWeight": "700",
-    "justifyContent": "center",
-    "alignItems": "center"
-  },
-  "meta": {
-    "desiredParent": [">PaywallProvider"],
-    "label": "Paywall Subscribe Button",
-    "description": "Paywall subscribe call-to-action button. Extends Button.",
-    "attributes": {}
-  }
-}

package/src/pages/tabs/SideTool.tsx

@@ -1,253 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { JsonTextEditor } from '../../components/JsonTextEditor';
-import { Modal } from '../../modals';
-import type { Node } from '../../types/Node';
-import type { Localication } from '../../types/PreviewConfig';
-import { useLogRender } from '../../utils/useLogRender';
-import { useRenderStore } from '../../store';
-import { Checkbox } from '../../components/Checkbox';
-import { LocalicationModal } from '../../modals/LocalicationModal';
-import { analyseAndProccess } from '../../utils/analyseNode';
-
-const screenStyleDefaults = {
-  light: { backgroundColor: '#FDFDFD', color: '#161827' },
-  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
-} as const;
-
-type ScreenMode = keyof typeof screenStyleDefaults;
-type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
-
-type SideToolProps = {
-  data: Node;
-  setData: React.Dispatch<React.SetStateAction<Node>>;
-};
-
-const colorFields = [
-  {
-    id: 'light-bg',
-    label: 'Light Background Color',
-    mode: 'light' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'light-color',
-    label: 'Light Color',
-    mode: 'light' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-  {
-    id: 'dark-bg',
-    label: 'Dark Background Color',
-    mode: 'dark' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'dark-color',
-    label: 'Dark Color',
-    mode: 'dark' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-];
-
-export function SideTool({ data, setData }: SideToolProps) {
-  useLogRender('SideTool');
-  const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
-  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-  const [isCompactMode, setIsCompactMode] = useState(() => {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-    return window.innerWidth < 1000;
-  });
-  const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
-  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
-    useRenderStore((s) => ({
-      appConfig: s.appConfig,
-      setAppConfig: s.setAppConfig,
-      previewMode: s.previewMode,
-      setPreviewMode: s.setPreviewMode,
-    }));
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const handleResize = () => {
-      const compact = window.innerWidth < 1000;
-      setIsCompactMode(compact);
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
-    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
-
-  const handleScreenStyleChange = (
-    mode: ScreenMode,
-    key: ScreenColorKey,
-    value: string,
-  ) => {
-    setAppConfig({
-      ...appConfig,
-      screenStyle: {
-        ...screenStyleDefaults,
-        ...appConfig.screenStyle,
-        [mode]: {
-          ...screenStyleDefaults[mode],
-          ...appConfig.screenStyle?.[mode],
-          [key]: value,
-        },
-      },
-    });
-  };
-
-  const handleLocalicationChange = (data: Localication) => {
-    setAppConfig({ ...appConfig, localication: data });
-  };
-
-  return (
-    <div className="side-tool-container">
-      <button
-        type="button"
-        className="editor-button"
-        onClick={() => setIsCompactPanelVisible((prev) => !prev)}
-        aria-pressed={isCompactPanelVisible}
-      >
-        {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
-      </button>
-
-      {isCompactPanelVisible && (
-        <div className="side-tool">
-          <select
-            value={appConfig.defaultLanguage ?? 'en'}
-            onChange={(e) =>
-              setAppConfig({ ...appConfig, defaultLanguage: e.target.value })
-            }
-          >
-            {Object.keys(appConfig.localication ?? {}).map((language) => (
-              <option key={language} value={language}>
-                {language}
-              </option>
-            ))}
-          </select>
-
-          <Checkbox
-            label="Dark Mode"
-            checked={appConfig.theme === 'dark'}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, theme: checked ? 'dark' : 'light' })
-            }
-          />
-
-          <Checkbox
-            label="Is RTL"
-            checked={appConfig.isRtl ?? false}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, isRtl: checked })
-            }
-          />
-
-          <Checkbox
-            label="Preview mode"
-            checked={previewMode}
-            onChange={setPreviewMode}
-          />
-
-          <div>
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-                gap: 12,
-              }}
-            >
-              {colorFields.map(({ id, label, mode, key }) => (
-                <React.Fragment key={id}>
-                  <div>{label}</div>
-                  <input
-                    id={id}
-                    type="color"
-                    className="input input--color"
-                    value={getScreenColorValue(mode, key)}
-                    onChange={(e) =>
-                      handleScreenStyleChange(mode, key, e.target.value)
-                    }
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          <div
-            style={{
-              marginTop: 'auto',
-              paddingTop: 16,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 8,
-            }}
-          >
-            <button
-              type="button"
-              className="editor-button"
-              onClick={() => setIsLocalicationModalOpen(true)}
-            >
-              Open localization editor
-            </button>
-            <button
-              type="button"
-              className="editor-button debug-button"
-              title="Inspect raw JSON data"
-              onClick={() => setIsDebugModalOpen(true)}
-            >
-              Debug JSON
-            </button>
-          </div>
-
-          {isDebugModalOpen && (
-            <Modal
-              onClose={() => setIsDebugModalOpen(false)}
-              ariaLabelledBy="debug-json-editor-title"
-              className="modal--large modal--scrollable"
-              contentClassName="localication-modal__content"
-            >
-              <div className="modal__header localication-modal__header">
-                <button
-                  type="button"
-                  className="editor-button"
-                  onClick={() => setIsDebugModalOpen(false)}
-                >
-                  Close
-                </button>
-              </div>
-              <div className="localication-modal__body">
-                <div className="localication-modal__editor">
-                  <JsonTextEditor
-                    rootName="node"
-                    value={data ?? {}}
-                    onChange={(next) =>
-                      setData(analyseAndProccess(next as Node) as Node)
-                    }
-                    className="localication-modal__json-editor"
-                  />
-                </div>
-              </div>
-            </Modal>
-          )}
-
-          {isLocalicationModalOpen && (
-            <LocalicationModal
-              data={appConfig.localication ?? {}}
-              onChange={handleLocalicationChange}
-              onClose={() => setIsLocalicationModalOpen(false)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}