@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/styles/utilities/_carousel.scss

@@ -0,0 +1,125 @@
+/* Embla carousel utilities stay isolated from builder core styles. */
+.embla {
+  max-width: 48rem;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 1rem;
+  --slide-size: 70%;
+}
+.embla__viewport {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
+}
+.embla__slide {
+  transform: translate3d(0, 0, 0);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
+  flex: 0 0 100%;
+}
+.embla__slide__number {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  border-radius: 1.8rem;
+  font-size: 4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--slide-height);
+  user-select: none;
+}
+.embla__controls {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  justify-content: space-between;
+  gap: 1.2rem;
+  margin-top: 1.8rem;
+}
+.embla__buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  align-items: center;
+}
+.embla__button {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 3.6rem;
+  height: 3.6rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--text-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.embla__button:disabled {
+  color: var(--detail-high-contrast);
+}
+.embla__button__svg {
+  width: 35%;
+  height: 35%;
+}
+.embla__dots {
+  flex-wrap: wrap;
+  margin-right: 0;
+  height: 50px;
+  margin: 0 auto;
+}
+.embla__dot {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 2.6rem;
+  height: 2.6rem;
+  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;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: '';
+}
+.embla__dot--selected:after {
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}
+.carousel-provider {
+  height: 100%;
+}
+.embla {
+  height: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.embla__container {
+  flex: 1;
+}

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/types/images.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}

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/extractTextStyle.ts

@@ -1,16 +1,23 @@
 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';
+
+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,7 +37,11 @@ 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'];
 
@@ -50,8 +61,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     style.paddingTop = v as React.CSSProperties['paddingTop'];
     style.paddingBottom = v as React.CSSProperties['paddingBottom'];
   }
-  if (attributes.marginHorizontal !== undefined) {
-    const v = parseSize(attributes.marginHorizontal);
+  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'];
   }
@@ -97,8 +110,13 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     ) as React.CSSProperties['marginRight'];
 
   // Decor
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
+  if (attributes.backgroundColor) {
+    style.backgroundColor =
+      parseColor(attributes.backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: resolvedAppConfig,
+      }) ?? attributes.backgroundColor;
+  }
   if (attributes.borderRadius !== undefined)
     style.borderRadius =
       attributes.borderRadius as React.CSSProperties['borderRadius'];

package/src/utils/extractViewStyle.ts

@@ -1,8 +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';
+
+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;
@@ -31,14 +41,72 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   if (attributes.justifyContent)
     style.justifyContent =
       attributes.justifyContent as React.CSSProperties['justifyContent'];
-  if (attributes.gap !== undefined) style.gap = attributes.gap;
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (rawValue === undefined) return;
+    const parsed = parseSize(rawValue);
+    style[property] = parsed as React.CSSProperties[K];
+  };
+
+  setParsedSize('gap', attributes.gap);
+  setParsedSize('padding', attributes.padding);
+  setParsedSize('margin', attributes.margin);
+
+  if (attributes.paddingHorizontal !== undefined) {
+    const parsed = parseSize(attributes.paddingHorizontal);
+    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
+    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
+  }
+  if (attributes.paddingVertical !== undefined) {
+    const parsed = parseSize(attributes.paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  const marginHorizontalRaw = (attributes as Record<string, unknown>)
+    .marginHorizontal as string | number | undefined;
+  if (marginHorizontalRaw !== undefined) {
+    const parsed = parseSize(marginHorizontalRaw);
+    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
+    style.marginRight = parsed as React.CSSProperties['marginRight'];
+  }
+
+  if (attributes.marginVertical !== undefined) {
+    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);
+  console.log('attributes.backgroundColor', attributes.backgroundColor);
+  console.log(
+    'parseColor(attributes.backgroundColor)',
+    parseColor(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.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);
   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/patterns.ts

@@ -1,6 +1,31 @@
 import { patterns as generatedPatterns } from '../build-components';
 import type { NodeDefaultAttribute } from '../types/Node';
 
+export type AttributeMeta = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
+  sort?: number;
+  preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+};
+
+export type SpecialCategoryMeta = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  sort?: number;
+};
+
+type PatternMeta = {
+  label?: string;
+  description?: string;
+  attributes?: Record<string, AttributeMeta>;
+  specialCategories?: Record<string, SpecialCategoryMeta>;
+  desiredParent?: string[];
+  desiredChildren?: string[];
+};
+
 type Pattern = {
   schemaVersion: number;
   allowUnknownAttributes: boolean;
@@ -17,6 +42,7 @@ type Pattern = {
   // where the inner record maps fieldName -> primitive type or enum options
   types?: Record<string, Record<string, string | string[]>>;
   // Optional defaults to be applied to node.attributes if not provided
+  meta?: PatternMeta;
 };
 
 const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
@@ -38,6 +64,13 @@ export function getAttributeSchema(
   return p?.pattern.attributes;
 }
 
+export function getAttributeMeta(
+  type?: string | null,
+): Record<string, AttributeMeta> | undefined {
+  const p = getPatternByType(type);
+  return p?.meta?.attributes;
+}
+
 /** Returns defaults block (if any) for a given component type */
 export function getDefaultsForType(
   type?: string | null,

package/dist/build-components/OnboardDot/OnboardExpandingDotProps.generated.d.ts

@@ -1,10 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export interface OnboardDotPropsGenerated {
-    child: string;
-    attributes: {
-        dotType?: 'expanding_dot' | 'normal_dot' | 'scaling_dot' | 'sliding_border' | 'sliding_dot' | 'liquid_like';
-    };
-}
-export interface OnboardDotComponentProps {
-    node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

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/PreviewTab.d.ts

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

package/src/build-components/OnboardDot/OnboardExpandingDotProps.generated.ts

@@ -1,20 +0,0 @@
-/* AUTO-GENERATED FILE - DO NOT EDIT */
-
-import type { NodeData } from '../../types/Node';
-
-export interface OnboardDotPropsGenerated {
-  child: string;
-  attributes: {
-    dotType?:
-      | 'expanding_dot'
-      | 'normal_dot'
-      | 'scaling_dot'
-      | 'sliding_border'
-      | 'sliding_dot'
-      | 'liquid_like';
-  };
-}
-
-export interface OnboardDotComponentProps {
-  node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

package/src/pages/tabs/DebugTab.tsx

@@ -1,23 +0,0 @@
-import { JsonEditor } from 'json-edit-react';
-import { Node } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-
-type DebugTabProps = {
-  data: Node;
-  setData: (data: Node) => void;
-};
-
-export function DebugTab({ data, setData }: DebugTabProps) {
-  useLogRender('DebugTab');
-  return (
-    <div
-      role="tabpanel"
-      className="editor-panel editor-panel--active editor-panels-debug"
-      aria-hidden={false}
-    >
-      <div style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}>
-        <JsonEditor data={data as any} setData={setData as any} />
-      </div>
-    </div>
-  );
-}