@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/styles/modals/_color-modal.scss

@@ -44,6 +44,35 @@
   font-weight: 600;
 }
 
+.color-modal__toggle {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceSnug;
+  padding: 0 sizes.$spaceCompact;
+}
+
+.color-modal__toggle-label {
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCompact;
+  font-size: 13px;
+  font-weight: 600;
+  color: colors.$textColor;
+  cursor: pointer;
+}
+
+.color-modal__toggle-input {
+  width: 16px;
+  height: 16px;
+  accent-color: colors.$accentColor;
+}
+
+.color-modal__toggle-description {
+  margin: 0;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
 .color-modal__link-button {
   border: none;
   background: none;
@@ -54,6 +83,24 @@
   padding: 4px 8px;
 }
 
+.color-modal__add-color {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.color-modal__add-color-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .color-section {
   display: flex;
   flex-direction: column;
@@ -126,5 +173,16 @@
 }
 
 .color-modal__input {
-  display: none;
+  // Keep the input in the DOM so browsers allow opening the native color picker
+  // via user gesture (programmatic click/showPicker), but visually hide it.
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
 }

package/src/styles/utilities/_carousel.scss

@@ -12,7 +12,6 @@
 .embla__container {
   display: flex;
   touch-action: pan-y pinch-zoom;
-  margin-left: calc(var(--slide-spacing) * -1);
 }
 .embla__slide {
   transform: translate3d(0, 0, 0);
@@ -84,6 +83,7 @@
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
+  --embla-dot-color: var(--detail-medium-contrast);
   touch-action: manipulation;
   display: inline-flex;
   text-decoration: none;
@@ -91,23 +91,24 @@
   border: 0;
   padding: 0;
   margin: 0;
-  width: 2.6rem;
-  height: 2.6rem;
+  /* Keep a reasonable hit-area, but allow bigger dots to grow it. */
+  width: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
+  height: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
   display: flex;
   align-items: center;
   border-radius: 50%;
 }
 .embla__dot:after {
-  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-  width: 1.4rem;
-  height: 1.4rem;
+  background-color: var(--embla-dot-color);
+  width: var(--embla-dot-size, 1.4rem);
+  height: var(--embla-dot-size, 1.4rem);
   border-radius: 50%;
   display: flex;
   align-items: center;
   content: '';
 }
-.embla__dot--selected:after {
-  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+.embla__dot--selected {
+  --embla-dot-color: var(--text-body);
 }
 .carousel-provider {
   height: 100%;

package/src/types/Project.ts

@@ -1,11 +1,25 @@
 import { Node } from '../types/Node';
 import { AppConfig } from './PreviewConfig';
 
+export type ProjectColorTokenMap = Record<string, string>;
+
+export type ProjectThemeColors = {
+  light?: ProjectColorTokenMap;
+  dark?: ProjectColorTokenMap;
+  [themeName: string]: ProjectColorTokenMap | undefined;
+};
+
+export interface ProjectColors {
+  STATIC_COLORS?: ProjectColorTokenMap;
+  THEME_COLORS?: ProjectThemeColors;
+}
+
 export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
   appConfig?: AppConfig;
+  projectColors?: ProjectColors;
 }
 
 export interface Project extends ProjectBase<Node> {}

package/src/utils/analyseNode.ts

@@ -1,4 +1,5 @@
 import { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import { generateRandomKeyForNode } from './generateRandomKeyForNode';
 
 export function isNodeNullOrUndefined<T = NodeDefaultAttribute>(
   node: Node<T>,
@@ -17,6 +18,82 @@ export function isEmptyObject<T = NodeDefaultAttribute>(
   return Object.keys(node as Object).length === 0;
 }
 
+function collectDuplicateKey(
+  node: Node<NodeDefaultAttribute>,
+  usedKeys: Set<string>,
+): string | null {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return null;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    for (const value of nodeArray) {
+      const duplicate = collectDuplicateKey(value, usedKeys);
+      if (duplicate) {
+        return duplicate;
+      }
+    }
+    return null;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+  if (recordData.key) {
+    if (usedKeys.has(recordData.key)) {
+      return recordData.key;
+    }
+    usedKeys.add(recordData.key);
+  }
+
+  if (recordData.children) {
+    return collectDuplicateKey(
+      recordData.children as Node<NodeDefaultAttribute>,
+      usedKeys,
+    );
+  }
+
+  return null;
+}
+
+function assignMissingKeys(
+  node: Node<NodeDefaultAttribute>,
+  usedKeys: Set<string>,
+): Node<NodeDefaultAttribute> {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return node;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    return nodeArray.map((child) =>
+      assignMissingKeys(child, usedKeys),
+    ) as unknown as Node<NodeDefaultAttribute>;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+
+  let key = recordData.key;
+  if (!key) {
+    do {
+      key = generateRandomKeyForNode(recordData.type);
+    } while (usedKeys.has(key));
+    usedKeys.add(key);
+  }
+
+  const children = recordData.children
+    ? (assignMissingKeys(
+        recordData.children as Node<NodeDefaultAttribute>,
+        usedKeys,
+      ) as Node<NodeDefaultAttribute>)
+    : recordData.children;
+
+  return {
+    ...recordData,
+    key,
+    children,
+  };
+}
+
 export function analyseNode(node: Node<NodeDefaultAttribute>): {
   valid: boolean;
   message?: string;
@@ -75,3 +152,24 @@ export function analyseNode(node: Node<NodeDefaultAttribute>): {
     };
   }
 }
+
+export function analyseAndProccess(
+  node: Node<NodeDefaultAttribute>,
+): Node<NodeDefaultAttribute> | null {
+  if (isNodeNullOrUndefined(node)) {
+    return null;
+  }
+
+  const { valid, message } = analyseNode(node);
+  if (!valid) {
+    throw new Error(message ?? 'Node is not valid');
+  }
+
+  const usedKeys = new Set<string>();
+  const duplicateKey = collectDuplicateKey(node, usedKeys);
+  if (duplicateKey) {
+    throw new Error(`Duplicate node key detected: ${duplicateKey}`);
+  }
+
+  return assignMissingKeys(node, usedKeys);
+}

package/src/utils/extractImageStyle.ts

@@ -1,24 +1,21 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
+import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-
   // Map resizeMode to CSS object-fit
   if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
   else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
   else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
   else if (attributes.resizeMode === 'center') style.objectFit = 'none';
 
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractTextStyle.ts

@@ -1,16 +1,24 @@
 import type { NodeData } from '../types/Node';
 import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
-import { useRenderStore } from '../store';
+import { parseColor } from './parseColor';
+import { extractViewStyle } from './extractViewStyle';
+
+type ExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  //TODO: it should be passed as a prop to the function (need a state)
-  const {
-    appConfig: { screenStyle, theme },
-  } = useRenderStore.getState();
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
   const fallbackColor =
     theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
 
@@ -30,84 +38,13 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     style.fontSize = fs(14);
   }
   if (attributes.fontWeight) style.fontWeight = attributes.fontWeight;
-  style.color = attributes.color ?? fallbackColor;
+  const resolvedTextColor = parseColor(attributes.color, {
+    projectColors: options.projectColors,
+    appConfig: resolvedAppConfig,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
   if (attributes.textAlign)
     style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
 
-  // Spacing
-  // Shorthand
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-
-  // Axis shorthands
-  if (attributes.paddingHorizontal !== undefined) {
-    const v = parseSize(attributes.paddingHorizontal);
-    style.paddingLeft = v as React.CSSProperties['paddingLeft'];
-    style.paddingRight = v as React.CSSProperties['paddingRight'];
-  }
-  if (attributes.paddingVertical !== undefined) {
-    const v = parseSize(attributes.paddingVertical);
-    style.paddingTop = v as React.CSSProperties['paddingTop'];
-    style.paddingBottom = v as React.CSSProperties['paddingBottom'];
-  }
-  const marginHorizontalRaw = (attributes as Record<string, unknown>)
-    .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
-    const v = parseSize(marginHorizontalRaw);
-    style.marginLeft = v as React.CSSProperties['marginLeft'];
-    style.marginRight = v as React.CSSProperties['marginRight'];
-  }
-  if (attributes.marginVertical !== undefined) {
-    const v = parseSize(attributes.marginVertical);
-    style.marginTop = v as React.CSSProperties['marginTop'];
-    style.marginBottom = v as React.CSSProperties['marginBottom'];
-  }
-
-  // Edges
-  if (attributes.paddingTop !== undefined)
-    style.paddingTop = parseSize(
-      attributes.paddingTop,
-    ) as React.CSSProperties['paddingTop'];
-  if (attributes.paddingBottom !== undefined)
-    style.paddingBottom = parseSize(
-      attributes.paddingBottom,
-    ) as React.CSSProperties['paddingBottom'];
-  if (attributes.paddingLeft !== undefined)
-    style.paddingLeft = parseSize(
-      attributes.paddingLeft,
-    ) as React.CSSProperties['paddingLeft'];
-  if (attributes.paddingRight !== undefined)
-    style.paddingRight = parseSize(
-      attributes.paddingRight,
-    ) as React.CSSProperties['paddingRight'];
-
-  if (attributes.marginTop !== undefined)
-    style.marginTop = parseSize(
-      attributes.marginTop,
-    ) as React.CSSProperties['marginTop'];
-  if (attributes.marginBottom !== undefined)
-    style.marginBottom = parseSize(
-      attributes.marginBottom,
-    ) as React.CSSProperties['marginBottom'];
-  if (attributes.marginLeft !== undefined)
-    style.marginLeft = parseSize(
-      attributes.marginLeft,
-    ) as React.CSSProperties['marginLeft'];
-  if (attributes.marginRight !== undefined)
-    style.marginRight = parseSize(
-      attributes.marginRight,
-    ) as React.CSSProperties['marginRight'];
-
-  // Decor
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius =
-      attributes.borderRadius as React.CSSProperties['borderRadius'];
-
-  // Dimensions (rare for text but supported by schema)
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractViewStyle.ts

@@ -1,9 +1,18 @@
 import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { NodeData } from '../types/Node';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
 import { parseSize } from '../size-matters';
+import { parseColor } from './parseColor';
+
+export type ExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const scrollable = attributes?.scrollable ?? false;
@@ -12,6 +21,10 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     flexDirection: 'column',
   };
   if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
   if (scrollable) {
     if (attributes.flexDirection === 'row') {
       style.overflowX = 'auto';
@@ -36,7 +49,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     property: K,
     rawValue: string | number | undefined,
   ) => {
-    if (rawValue === undefined) return;
+    if (isEmptySizeValue(rawValue)) return;
     const parsed = parseSize(rawValue);
     style[property] = parsed as React.CSSProperties[K];
   };
@@ -45,44 +58,60 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   setParsedSize('padding', attributes.padding);
   setParsedSize('margin', attributes.margin);
 
-  if (attributes.paddingHorizontal !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingHorizontal)) {
     const parsed = parseSize(attributes.paddingHorizontal);
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
-  if (attributes.paddingVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingVertical)) {
     const parsed = parseSize(attributes.paddingVertical);
     style.paddingTop = parsed as React.CSSProperties['paddingTop'];
     style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
   }
 
+  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
+  setParsedSize('paddingTop', attributes.paddingTop);
+  setParsedSize('paddingBottom', attributes.paddingBottom);
+  setParsedSize('paddingLeft', attributes.paddingLeft);
+  setParsedSize('paddingRight', attributes.paddingRight);
+
   const marginHorizontalRaw = (attributes as Record<string, unknown>)
     .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
     const parsed = parseSize(marginHorizontalRaw);
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
-  if (attributes.marginVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.marginVertical)) {
     const parsed = parseSize(attributes.marginVertical);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }
 
-  setParsedSize('paddingTop', attributes.paddingTop);
-  setParsedSize('paddingBottom', attributes.paddingBottom);
-  setParsedSize('paddingLeft', attributes.paddingLeft);
-  setParsedSize('paddingRight', attributes.paddingRight);
   setParsedSize('marginTop', attributes.marginTop);
   setParsedSize('marginBottom', attributes.marginBottom);
   setParsedSize('marginLeft', attributes.marginLeft);
   setParsedSize('marginRight', attributes.marginRight);
-
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
+  if (attributes.backgroundColor) {
+    style.backgroundColor =
+      parseColor(attributes.backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: options.appConfig,
+      }) ?? attributes.backgroundColor;
+  }
   setParsedSize('borderRadius', attributes.borderRadius);
   setParsedSize('width', attributes.width);
   setParsedSize('height', attributes.height);
+  if (attributes.flex !== undefined)
+    style.flex = attributes.flex as React.CSSProperties['flex'];
+  if (attributes.position)
+    style.position = attributes.position as React.CSSProperties['position'];
+  setParsedSize('top', attributes.top);
+  setParsedSize('bottom', attributes.bottom);
+  setParsedSize('left', attributes.left);
+  setParsedSize('right', attributes.right);
+  if (attributes.zIndex !== undefined)
+    style.zIndex = attributes.zIndex as React.CSSProperties['zIndex'];
   return style;
 }

package/src/utils/parseColor.ts

@@ -0,0 +1,43 @@
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+
+const STATIC_PREFIX = 'STATIC_COLORS.';
+const THEME_PREFIX = 'THEME_COLORS.';
+
+export type ParseColorOptions = {
+  projectColors?: ProjectColors;
+  appConfig?: AppConfig;
+};
+
+export function parseColor(value?: string, options: ParseColorOptions = {}) {
+  if (typeof value !== 'string') return value;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+
+  const { projectColors, appConfig } = options;
+  if (!projectColors) return trimmed;
+
+  if (trimmed.startsWith(STATIC_PREFIX)) {
+    const token = trimmed.slice(STATIC_PREFIX.length);
+    const resolved = projectColors.STATIC_COLORS?.[token];
+    return typeof resolved === 'string' && resolved.trim()
+      ? resolved.trim()
+      : trimmed;
+  }
+
+  if (trimmed.startsWith(THEME_PREFIX)) {
+    const token = trimmed.slice(THEME_PREFIX.length);
+    if (!token) return trimmed;
+
+    const theme = appConfig?.theme ?? 'light';
+    const themeTokens = projectColors.THEME_COLORS?.[theme];
+    const resolved = themeTokens?.[token];
+    if (typeof resolved === 'string' && resolved.trim()) {
+      return resolved.trim();
+    }
+
+    return trimmed;
+  }
+
+  return trimmed;
+}

package/src/utils/selection.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+
+export const SELECTED_OUTLINE_STYLE: CSSProperties = {
+  outline: '2px solid #2684FF',
+};
+
+function getNodeKey(value: unknown): string | undefined {
+  if (!value || typeof value !== 'object') return undefined;
+  if (!('key' in value)) return undefined;
+  const key = (value as { key?: unknown }).key;
+  return typeof key === 'string' ? key : undefined;
+}
+
+export function isNodeSelected(args: {
+  previewMode: boolean;
+  current?: unknown;
+  node?: unknown;
+}): boolean {
+  const currentKey = getNodeKey(args.current);
+  const nodeKey = getNodeKey(args.node);
+  return (
+    !!args.previewMode && !!currentKey && !!nodeKey && currentKey === nodeKey
+  );
+}

package/src/utils/useMergedStyle.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+
+const EMPTY_STYLE: CSSProperties = {};
+
+export function useMergedStyle(
+  base?: CSSProperties,
+  override?: CSSProperties,
+): CSSProperties {
+  return useMemo(() => {
+    if (!base && !override) return EMPTY_STYLE;
+    if (!override) return base ?? EMPTY_STYLE;
+    if (!base) return override;
+    return { ...base, ...override };
+  }, [base, override]);
+}

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

@@ -1,9 +0,0 @@
-import { Node } from '../..';
-type BuilderTabProps = {
-    data: Node;
-    setData: (data: Node) => void;
-    current: Node;
-    setCurrent: (current: Node) => void;
-};
-export declare function BuilderTab({ data, setData, current, setCurrent, }: BuilderTabProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,7 +0,0 @@
-import { Node } from '../..';
-type DebugTabProps = {
-    data: Node;
-    setData: (data: Node) => void;
-};
-export declare function DebugTab({ data, setData }: DebugTabProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,3 +0,0 @@
-type PreviewTabProps = {};
-export declare function PreviewTab({}: PreviewTabProps): import("react/jsx-runtime").JSX.Element;
-export {};