@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/styles/modals/_modal-shell.scss

@@ -0,0 +1,48 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+}
+
+.modal__overlay {
+  position: absolute;
+  inset: 0;
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.4
+  );
+  z-index: 0;
+}
+
+.modal__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: colors.$surfaceColor;
+  border-radius: sizes.$radiusPill;
+  box-shadow: sizes.$cardShadow;
+  width: min(960px, calc(100vw - 40px));
+  max-height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+  gap: 12px;
+}
+
+.modal__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}

package/src/styles/modals/_product-edit-modal.scss

@@ -0,0 +1,23 @@
+@use '../foundation/sizes' as sizes;
+
+.product-edit-modal {
+  width: min(640px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.product-edit-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCozy;
+}
+
+.product-edit-modal__textarea {
+  min-height: 90px;
+  padding: 8px;
+  resize: vertical;
+}

package/src/styles/modals/_product-presets-modal.scss

@@ -0,0 +1,81 @@
+@use '../foundation/sizes' as sizes;
+@use '../foundation/colors' as colors;
+
+.product-presets-modal {
+  width: min(960px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.product-presets-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+}
+
+.product-presets-modal__section-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.product-presets-modal__muted {
+  margin: sizes.$spaceSnug 0 0;
+  opacity: 0.7;
+}
+
+.product-presets-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: sizes.$spaceCozy;
+  margin-top: sizes.$spaceCozy;
+}
+
+.product-presets-modal__card {
+  border: 1px solid colors.$borderColor;
+  border-radius: 12px;
+  padding: sizes.$spaceCozy;
+  background: colors.$surfaceColor;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCompact;
+}
+
+.product-presets-modal__card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: sizes.$spaceCompact;
+}
+
+.product-presets-modal__card-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.product-presets-modal__card-count {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+.product-presets-modal__card-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.product-presets-modal__card-item {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.product-presets-modal__actions {
+  display: flex;
+  gap: sizes.$spaceCompact;
+  margin-top: sizes.$spaceCompact;
+}
+
+

package/src/styles/utilities/_carousel.scss

@@ -0,0 +1,126 @@
+/* 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;
+}
+.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;
+  --embla-dot-color: var(--detail-medium-contrast);
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  /* 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 {
+  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 {
+  --embla-dot-color: 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/Device.ts

@@ -3,6 +3,11 @@ export interface Device {
   platform: string; // ios, android
   width: number;
   height: number;
+  /**
+   * High-level screen shape bucket derived from portrait aspect ratio (height / width).
+   * Useful for quickly filtering "tall" vs "wide-ish" devices without hardcoding sizes.
+   */
+  aspect?: 'tall' | 'regular' | 'wide';
   type: 'phone' | 'tablet';
   /**
    * Optional physical corner radius of the device screen area in CSS pixels.

package/src/types/Fonts.ts

@@ -0,0 +1,16 @@
+/** CSS font-weight key (usually "100".."900"). */
+export type FontWeightKey = string;
+
+/** URL to a font file (ttf/otf/woff/woff2). */
+export type FontFileUrl = string;
+
+/** Map of font-weight -> font file URL. */
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+
+export type FontDefinition = {
+  name: string;
+  family: FontFamilySources;
+  projects?: string[];
+};
+
+export type Fonts = FontDefinition[];

package/src/types/Icons.ts

@@ -0,0 +1,244 @@
+// NOTE: This file is generated. Do not edit it manually.
+//TODO: we might use font-icon or something more optimize
+export const Icons = [
+  'activity',
+  'activity-heart',
+  'alert-circle',
+  'alert-triangle',
+  'anchor',
+  'archive',
+  'arrow-down',
+  'arrow-left',
+  'arrow-narrow-down-left',
+  'arrow-narrow-up-right',
+  'arrow-right',
+  'arrow-right-smooth',
+  'asterisk-01',
+  'asterisk-02',
+  'at-sign',
+  'award',
+  'battery-charging',
+  'bell-01',
+  'bell-02',
+  'bell-ringing-02',
+  'bookmark',
+  'bookmark-add',
+  'bookmark-check',
+  'bookmark-minus',
+  'bookmark-x',
+  'bubble',
+  'building-01',
+  'building-02',
+  'building-03',
+  'building-04',
+  'building-05',
+  'building-06',
+  'building-07',
+  'building-08',
+  'building-09',
+  'camera',
+  'camera-01',
+  'camera-steel',
+  'check',
+  'check-circle',
+  'check-circle-bold',
+  'check-circle-broken',
+  'check-done-01',
+  'check-done-02',
+  'check-heart',
+  'check-square',
+  'check-square-broken',
+  'check-verified-01',
+  'check-verified-02',
+  'check-verified-03',
+  'checkbox',
+  'checkv',
+  'chevron-down',
+  'chevron-down2',
+  'chevron-left',
+  'chevron-left-2',
+  'chevron-right',
+  'chevron-right-empty',
+  'chevron-right-smooth',
+  'chevron-up',
+  'circle',
+  'clock',
+  'clock-fast-forward',
+  'close',
+  'close-circle',
+  'cloud-01',
+  'cloud-blank-01',
+  'cloud-blank-02',
+  'coin',
+  'coins-02',
+  'colors',
+  'copy-01',
+  'copy-02',
+  'copy-03',
+  'copy-04',
+  'copy-05',
+  'copy-06',
+  'copy-07',
+  'corner-down-right',
+  'crypto-bold',
+  'delete-icon',
+  'diamond',
+  'dice-3',
+  'divide-01',
+  'divide-02',
+  'divide-03',
+  'document-check-bold',
+  'dots-circle',
+  'dots-grid',
+  'dots-horizontal',
+  'dots-vertical',
+  'download-01',
+  'download-02',
+  'download-03',
+  'edit-03',
+  'edit-04',
+  'edit-05',
+  'element-3',
+  'ellipse-127',
+  'exclaimation-circle',
+  'eye-off-line',
+  'face-smile',
+  'file-04',
+  'file-05',
+  'file-check-02',
+  'file-plus-01',
+  'file-shield-02',
+  'filter-funnel-01',
+  'flag-03',
+  'flash',
+  'folder',
+  'folder-plus',
+  'gallery',
+  'globe-01',
+  'globe-04',
+  'globe-bold',
+  'guard',
+  'headphones-01',
+  'headphones-02',
+  'headset-bold',
+  'heart',
+  'heart-bold',
+  'help-circle',
+  'home-2',
+  'home-line',
+  'hourglass-02',
+  'image',
+  'image-01',
+  'image-03',
+  'inbox-01',
+  'inbox-arrow-down',
+  'info-circle',
+  'keyboard-line',
+  'lamp-charge',
+  'layer',
+  'light',
+  'like-dislike',
+  'lock-03',
+  'logout',
+  'magicpen',
+  'mail',
+  'mail-01',
+  'marker',
+  'medal-star',
+  'menu',
+  'menu-04',
+  'message-circle-01',
+  'message-plus-circle',
+  'message-question-circle',
+  'message-text-circle-01',
+  'message-text-square-02',
+  'message-x-square',
+  'microphone-02',
+  'microphone-slash',
+  'mirror',
+  'moon-01',
+  'moon-bold',
+  'mouse-circle',
+  'move',
+  'notification',
+  'notification-fill',
+  'notification-text',
+  'pdf-01',
+  'pencil-01',
+  'phone',
+  'phone-01',
+  'phone-arrow-down-left',
+  'phone-arrow-up-right',
+  'phone-hang-up',
+  'phone-hangup2',
+  'phone-incoming-01',
+  'phone-outgoing-01',
+  'phone-plus',
+  'phone-x',
+  'plus',
+  'plus-circle',
+  'printer',
+  'question-mark-circle',
+  'refresh-ccw-01',
+  'refresh-cw-01',
+  'refresh-cw-04',
+  'refresh-right-square-bold',
+  'remove-circle',
+  'repeat-04',
+  'repeat-bold',
+  'ruler-pen',
+  'search',
+  'search-lg',
+  'search-md',
+  'search-refraction',
+  'send-01',
+  'send-02',
+  'send-diagonal',
+  'setting-2',
+  'settings',
+  'settings-02',
+  'settings-04',
+  'settings-2',
+  'settings-cog',
+  'share-01',
+  'share-03',
+  'share-04',
+  'share-05',
+  'share-06',
+  'share-bold',
+  'shield-01',
+  'shield-bold',
+  'solar-check',
+  'speaker',
+  'speaker-wave',
+  'speedometer-03',
+  'star',
+  'star-rounded',
+  'sun',
+  'target-03',
+  'text-input',
+  'translate',
+  'trash',
+  'trash-02',
+  'trash-03',
+  'trash-04',
+  'trush-square-bold',
+  'unlimited',
+  'user-circle',
+  'user-jogging',
+  'user-plus-01',
+  'user-square',
+  'user-x-01',
+  'user-x-02',
+  'user2',
+  'users-02',
+  'users-speaker',
+  'verify',
+  'voice-cricle',
+  'x-circle',
+  'x-close',
+  'x-sm',
+  'zap',
+] as const;
+
+export type IconsType = (typeof Icons)[number];

package/src/types/Project.ts

@@ -1,11 +1,43 @@
 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;
+  /**
+   * Optional classification used by built-in samples.
+   * (Does not conflict with `data.type`, which is the node/component type.)
+   */
+  type?: 'paywall' | 'onboard' | 'other';
   data: T;
   appConfig?: AppConfig;
+  projectColors?: ProjectColors;
 }
 
 export interface Project extends ProjectBase<Node> {}
+
+export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
+
+export type LogSource = string;
+
+export interface LogEntry {
+  id: string;
+  timestamp: number;
+  level: LogLevel;
+  source: LogSource;
+  message: string;
+  payload?: unknown;
+}

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

@@ -0,0 +1,13 @@
+declare module '@jest/globals' {
+  /**
+   * Minimal typings for this repo's Jest tests.
+   *
+   * We keep these local (instead of requiring `@types/jest`) so the library build
+   * `tsconfig.json` can stay focused on `src/**` and test files don't need
+   * per-file `/// <reference ...>` directives.
+   */
+  export const describe: (name: string, fn: () => void) => void;
+  export const it: (name: string, fn: () => void) => void;
+  export const test: (name: string, fn: () => void) => void;
+  export const expect: any;
+}

package/src/utils/__special_exceptions.ts

@@ -0,0 +1,88 @@
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import { isNodeArray, isNodeNullOrUndefined, isNodeString } from './nodeGuards';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function looksLikeSelectOptionObject(
+  value: unknown,
+): value is { value: unknown } {
+  if (!isPlainObject(value)) return false;
+  // Avoid unwrapping actual node-like objects or typed objects that use `type`.
+  if ('type' in value || 'children' in value || 'attributes' in value) {
+    return false;
+  }
+  if (!('value' in value)) return false;
+  const keys = Object.keys(value);
+  // Typical shapes: { value }, { value, label }, { value, label, id }
+  if (keys.length < 1 || keys.length > 3) return false;
+  const allowed = new Set(['value', 'label', 'id']);
+  for (const k of keys) if (!allowed.has(k)) return false;
+  const v = (value as Record<string, unknown>).value;
+  return (
+    v == null ||
+    typeof v === 'string' ||
+    typeof v === 'number' ||
+    typeof v === 'boolean'
+  );
+}
+
+function normalizeUnknownValue(value: unknown): unknown {
+  if (value == null) return value;
+
+  if (Array.isArray(value)) {
+    return value.map(normalizeUnknownValue);
+  }
+
+  if (!isPlainObject(value)) return value;
+
+  if (looksLikeSelectOptionObject(value)) {
+    return normalizeUnknownValue((value as { value: unknown }).value);
+  }
+
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(value)) {
+    out[k] = normalizeUnknownValue(v);
+  }
+  return out;
+}
+
+/**
+ * Special-case normalization for persisted JSON before validation.
+ *
+ * Keep "exceptions" here rather than inside the core validation logic.
+ */
+export function normalizeNodeForValidation(
+  node: Node<NodeDefaultAttribute>,
+): Node<NodeDefaultAttribute> {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return node;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    return nodeArray.map(
+      normalizeNodeForValidation,
+    ) as unknown as Node<NodeDefaultAttribute>;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+
+  const attributes = isPlainObject(recordData.attributes)
+    ? (normalizeUnknownValue(recordData.attributes) as Record<string, unknown>)
+    : recordData.attributes;
+
+  const children =
+    recordData.children !== undefined
+      ? (normalizeNodeForValidation(
+          recordData.children as Node<NodeDefaultAttribute>,
+        ) as Node<NodeDefaultAttribute>)
+      : recordData.children;
+
+  return {
+    ...recordData,
+    attributes: attributes as any,
+    children,
+  };
+}