@developer_tribe/react-builder 1.2.44-test.2 → 1.2.45

package/src/styles/modals/_create-device.scss

@@ -0,0 +1,113 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as typography;
+
+.create-device-modal {
+  width: 100%;
+  max-width: 480px;
+
+  .modal__body {
+    padding: sizes.$spaceComfy;
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceCozy;
+  }
+}
+
+.create-device-form {
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceTight;
+  }
+
+  &__row {
+    display: flex;
+    gap: sizes.$spaceCozy;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  &__label {
+    font-size: sizes.$fontSizeSm;
+    font-weight: 600;
+    color: colors.$mutedTextColor;
+    text-transform: uppercase;
+    letter-spacing: sizes.$letterSpacingTight;
+  }
+
+  &__error {
+    color: colors.$dangerColor;
+    font-size: sizes.$fontSizeXs;
+    margin-top: 2px;
+  }
+
+  &__footer {
+    margin-top: sizes.$spaceCozy;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// Global-ish classes but styled for this context if not already defined
+.editor-input {
+  height: sizes.$controlHeightMd;
+  padding: 0 sizes.$spaceInset;
+  border-radius: sizes.$radiusMid;
+  border: 1px solid colors.$borderColor;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  font-family: inherit;
+  font-size: sizes.$fontSizeBase;
+  width: 100%;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: colors.$accentColor;
+    box-shadow: 0 0 0 3px hsl(var(--rb-primary) / 0.15);
+  }
+
+  &::placeholder {
+    color: colors.$mutedTextColor;
+    opacity: 0.5;
+  }
+}
+
+select.editor-input {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right sizes.$spaceInset center;
+  padding-right: sizes.$spaceRoomy;
+}
+
+.editor-button--primary {
+  background: colors.$textColor;
+  color: colors.$surfaceColor;
+  font-weight: 600;
+  border-color: colors.$textColor;
+
+  &:hover {
+    background: colors.$accentColor;
+    border-color: colors.$accentColor;
+  }
+}
+
+.device-selector-modal__search-container {
+  padding: 0 sizes.$spaceComfy;
+  margin-top: sizes.$spaceComfy;
+  margin-bottom: sizes.$spaceCompact;
+  display: flex;
+  gap: sizes.$spaceCozy;
+  align-items: center;
+
+  .editor-input {
+    flex: 1;
+  }
+}

package/src/utils/__special_exceptions.ts

@@ -79,6 +79,14 @@ export function normalizeNodeForValidation(
     ? normalizeUnknownValue(attributes)
     : attributes;
 
+  if (
+    isPlainObject(attributes) &&
+    Array.isArray(attributes.styles) &&
+    attributes.styles.length === 0
+  ) {
+    attributes.styles = {};
+  }
+
   const children =
     recordData.children !== undefined
       ? (normalizeNodeForValidation(

package/src/utils/analyseNodeByPatterns.ts

@@ -14,6 +14,7 @@ import {
   isNodeNullOrUndefined,
   isNodeString,
 } from './nodeGuards';
+import { logger } from './logger';
 
 export type AnalyseResultWithPath = {
   valid: boolean;
@@ -407,7 +408,13 @@ function validateAttributesByPattern(
   // Validate nested `attributes.styles` (canonical store for AttributesEditor).
   if (maybeStyles != null) {
     if (!isPlainObject(maybeStyles)) {
-      return fail(`styles must be an object`, joinPath(path, 'styles'));
+      const msg = `styles must be an object`;
+      logger.error('analyseNodeByPatterns', msg, {
+        path: joinPath(path, 'styles'),
+        actualValue: maybeStyles,
+        actualType: Array.isArray(maybeStyles) ? 'array' : typeof maybeStyles,
+      });
+      return fail(msg, joinPath(path, 'styles'));
     }
     const stylesRecord = maybeStyles as Record<string, unknown>;
     for (const [styleKey, styleValue] of Object.entries(stylesRecord)) {
@@ -432,15 +439,12 @@ function validateAttributesByPattern(
       if (
         attrName === 'title' ||
         attrName === 'description' ||
-        attrName === 'testID' ||
-        attrName === 'animation'
+        attrName === 'testID'
       ) {
         const res = validateAttributeValue(
           pattern.pattern.type,
           attrValue,
-          attrName === 'testID' || attrName === 'animation'
-            ? 'string'
-            : attrName,
+          attrName === 'testID' ? 'string' : attrName,
           joinPath(path, attrName),
         );
         if (!res.valid) return res;

package/src/utils/nodeTree.ts

@@ -1,5 +1,4 @@
 import type { Node, NodeData } from '../types/Node';
-import eventConstants from '../patterns/event-constants.json';
 
 export function deleteNodeFromTree(root: Node, target: Node): Node {
   if (root === null || root === undefined) return root;
@@ -98,117 +97,3 @@ export function findNodeByKey(root: Node, key?: string): Node | null {
 
   return null;
 }
-
-export type ProjectOptions = {
-  pageKeys: string[];
-  conditionKeys: string[];
-  placementKeys: string[];
-  formFieldNames: string[];
-  eventTypes: string[];
-  validationTypes: string[];
-};
-
-/**
- * Traverses the entire node tree to dynamically discover project-level metadata
- * (page keys, condition keys, form field names, etc.) and merges them with
- * central constants from event-constants.json.
- *
- * This enables the Attributes Editor to provide a complete list of valid options
- * for dropdown fields, combining predefined standards with actually used keys
- * in the current design.
- */
-export function collectProjectMetadata(root: Node): ProjectOptions {
-  const pageKeys = new Set<string>();
-  const conditionKeys = new Set<string>();
-  const placementKeys = new Set<string>();
-  const formFieldNames = new Set<string>();
-  const eventTypes = new Set<string>();
-
-  function traverse(node: Node) {
-    if (!node || typeof node === 'string') return;
-
-    if (Array.isArray(node)) {
-      node.forEach(traverse);
-      return;
-    }
-
-    const data = node as NodeData;
-    const type = data.type;
-    const attrs = (data.attributes ?? {}) as Record<string, any>;
-
-    // Collect Page Keys
-    if (type === 'GlobalProvider' && Array.isArray(data.children)) {
-      data.children.forEach((child) => {
-        if (typeof child === 'object' && child !== null && 'key' in child) {
-          if (typeof child.key === 'string') pageKeys.add(child.key);
-        }
-      });
-    }
-    if (attrs.pageKey && typeof attrs.pageKey === 'string') {
-      pageKeys.add(attrs.pageKey);
-    }
-
-    // Collect Condition Keys
-    if (attrs.conditionKey && typeof attrs.conditionKey === 'string') {
-      conditionKeys.add(attrs.conditionKey);
-    }
-    if (Array.isArray(attrs.skipConditions)) {
-      attrs.skipConditions.forEach((entry: any) => {
-        if (entry?.conditionKey) conditionKeys.add(entry.conditionKey);
-      });
-    }
-
-    // Collect Placement Keys
-    if (attrs.placementKey && typeof attrs.placementKey === 'string') {
-      placementKeys.add(attrs.placementKey);
-    }
-
-    // Collect Form Field Names
-    if (type.startsWith('Form') && type !== 'FormProvider' && attrs.name) {
-      if (typeof attrs.name === 'string') formFieldNames.add(attrs.name);
-    }
-
-    // Collect from events
-    if (Array.isArray(attrs.events)) {
-      attrs.events.forEach((evt: any) => {
-        if (evt.type && typeof evt.type === 'string') eventTypes.add(evt.type);
-        if (evt.navigate_to) pageKeys.add(evt.navigate_to);
-        if (evt.placementKey) placementKeys.add(evt.placementKey);
-        if (evt.conditionKey) conditionKeys.add(evt.conditionKey);
-      });
-    }
-
-    if (data.children) {
-      traverse(data.children as Node);
-    }
-  }
-
-  traverse(root);
-
-  // Merge with central constants for a complete set of options
-  const result: ProjectOptions = {
-    pageKeys: Array.from(
-      new Set([...pageKeys, ...eventConstants.placementKeys]),
-    ).sort(),
-    conditionKeys: Array.from(
-      new Set([...conditionKeys, ...eventConstants.conditionKeys]),
-    ).sort(),
-    placementKeys: Array.from(
-      new Set([...placementKeys, ...eventConstants.placementKeys]),
-    ).sort(),
-    formFieldNames: Array.from(
-      new Set([
-        ...formFieldNames,
-        ...((eventConstants as any).formFieldNames as string[]),
-      ]),
-    ).sort(),
-    eventTypes: Array.from(
-      new Set([...eventTypes, ...eventConstants.eventTypes]),
-    ).sort(),
-    validationTypes: Array.from(
-      new Set((eventConstants as any).validationTypes as string[]),
-    ).sort(),
-  };
-
-  return result;
-}

package/dist/build-components/GlobalProvider/GlobalContext.d.ts

@@ -1,28 +0,0 @@
-import type { NodeData } from '../../types/Node';
-/** Supported transition animations when navigating to this page (platform-style names).
- *  rn stack transition animations
- */
-export declare const GLOBAL_PAGE_ANIMATIONS: readonly ["default", "fade", "fade_from_bottom", "fade_from_right", "reveal_from_bottom", "scale_from_center", "slide_from_right", "slide_from_left", "slide_from_bottom", "none"];
-export type GlobalPageAnimationType = (typeof GLOBAL_PAGE_ANIMATIONS)[number];
-export interface GlobalPage {
-    key: string;
-    node: NodeData;
-    /** Condition key: this page is skipped when conditions[skipIf] === true */
-    skipIf?: string;
-    /** Optional transition animation when this page is shown (push/enter). */
-    animation?: string;
-    index: number;
-}
-export interface GlobalContextValue {
-    currentPageKey: string;
-    pages: GlobalPage[];
-    pageStack: string[];
-    navigate: (key: string) => void;
-    goNext: () => void;
-    goBack: () => boolean;
-    /** Runtime boolean conditions (e.g. termsAccepted) */
-    conditions: Record<string, boolean>;
-    setCondition: (key: string, value: boolean) => void;
-}
-export declare const GlobalContext: import("react").Context<GlobalContextValue | null>;
-export declare function useGlobalContext(): GlobalContextValue | null;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { GlobalProviderComponentProps } from './GlobalProviderProps.generated';
-declare function GlobalProvider({ node }: GlobalProviderComponentProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof GlobalProvider>;
-export default _default;

package/dist/build-components/GlobalProvider/GlobalProviderProps.generated.d.ts

@@ -1,60 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-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 SkipConditionEntryGenerated {
-    pageKey?: string;
-    conditionKey?: string;
-}
-export interface GlobalProviderStyleGenerated {
-    flexDirection?: FlexDirectionOptionType;
-    flexWrap?: FlexWrapOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginHorizontal?: 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 GlobalProviderPropsGenerated {
-    child: string;
-    attributes: {
-        styles?: GlobalProviderStyleGenerated;
-        scrollable?: boolean;
-        testID?: string;
-        initialPage?: string;
-        persistProgress?: boolean;
-        skipConditions?: SkipConditionEntryGenerated[];
-    };
-}
-export interface GlobalProviderComponentProps {
-    node: NodeData<GlobalProviderPropsGenerated['attributes']>;
-}

package/dist/build-components/GlobalProvider/globalProviderUtils.d.ts

@@ -1,28 +0,0 @@
-import type { NodeData } from '../../types/Node';
-import type { GlobalPage } from './GlobalContext';
-/**
- * Derives a stable and unique page key for a child node.
- * Priority: node.key → TYPE_KEY_MAP → "${type}-${index}"
- */
-export declare function derivePageKey(node: NodeData, index: number, existingKeys: Set<string>): string;
-/** Runtime shape of a SkipConditionEntry (mirrors the types block in pattern.json). */
-export interface SkipConditionEntry {
-    pageKey: string;
-    conditionKey: string;
-}
-/**
- * Converts SkipConditionEntry[] (from pattern schema) to a lookup map for fast access.
- */
-export declare function normalizeSkipConditions(raw: unknown): Record<string, string>;
-/**
- * Builds the page list for GlobalProvider.
- */
-export declare function buildPages(children: NodeData[], skipConditions?: Record<string, string>): GlobalPage[];
-/** Returns the first non-skipped page key, starting from the requested key. */
-export declare function resolveEffectivePage(targetKey: string, pages: GlobalPage[], conditions: Record<string, boolean>): string | null;
-export declare function persistProgress(storageKey: string, currentPageKey: string, conditions: Record<string, boolean>): void;
-export declare function loadProgress(storageKey: string): {
-    currentPageKey: string;
-    conditions: Record<string, boolean>;
-} | null;
-export declare function clearProgress(storageKey: string): void;

package/dist/build-components/GlobalProvider/useGlobalNavigation.d.ts

@@ -1,19 +0,0 @@
-/**
- * Maps route/placement aliases to their canonical GlobalProvider page keys.
- *
- * Add entries here when a new alias should resolve to an existing page key.
- * Keys are the incoming target strings (from JSON events / usePlacementButtonEvents).
- * Values are the canonical page key that GlobalContext.navigate() will receive.
- *
- * Exported so other modules (e.g. a navigation-flow visualiser) can inspect
- * which aliases exist without duplicating this logic.
- */
-export declare const GLOBAL_ROUTE_ALIASES: Record<string, string>;
-/**
- * Returns a navigate function that first attempts to route within GlobalContext
- * (when a GlobalProvider is active), then falls back to MockOSContext navigation.
- *
- * Used by SystemButton and OnboardButton so that events defined in JSON work
- * transparently whether rendered inside a GlobalProvider or standalone.
- */
-export declare function useGlobalNavigation(): (target: string) => boolean;

package/dist/build-components/GlobalProvider/useGlobalProviderLogic.d.ts

@@ -1,15 +0,0 @@
-import type { GlobalContextValue } from './GlobalContext';
-import type { NodeData } from '../../types/Node';
-export interface UseGlobalProviderLogicOptions {
-    node: NodeData;
-}
-export declare function useGlobalProviderLogic({ node: rawNode, }: UseGlobalProviderLogicOptions): {
-    node: NodeData<Record<string, unknown>>;
-    attributeName: string;
-    attributeKey: string;
-    attrs: Record<string, unknown> | undefined;
-    pages: import("./GlobalContext").GlobalPage[];
-    currentPageKey: string;
-    activePage: import("./GlobalContext").GlobalPage | undefined;
-    contextValue: GlobalContextValue;
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { TermsProviderComponentProps } from './TermsProviderProps.generated';
-declare function TermsProvider({ node }: TermsProviderComponentProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof TermsProvider>;
-export default _default;

package/dist/build-components/TermsProvider/TermsProviderProps.generated.d.ts

@@ -1,55 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export type AnimationOptionType = 'default' | 'fade' | 'fade_from_bottom' | 'fade_from_right' | 'reveal_from_bottom' | 'scale_from_center' | 'slide_from_right' | 'slide_from_left' | 'slide_from_bottom' | 'none';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-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 TermsProviderStyleGenerated {
-    flexDirection?: FlexDirectionOptionType;
-    flexWrap?: FlexWrapOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginHorizontal?: 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 TermsProviderPropsGenerated {
-    child: string;
-    attributes: {
-        styles?: TermsProviderStyleGenerated;
-        scrollable?: boolean;
-        testID?: string;
-        animation?: AnimationOptionType;
-    };
-}
-export interface TermsProviderComponentProps {
-    node: NodeData<TermsProviderPropsGenerated['attributes']>;
-}