@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/paywall/types/benefits.ts

@@ -0,0 +1,44 @@
+/**
+ * Benefits are a simple key/value map used by paywall UIs to show feature bullets,
+ * trial metadata, headlines, etc.
+ *
+ * We keep the value type primitive so it serializes cleanly and is easy to mock.
+ */
+export type PaywallBenefitValue = string | number | boolean;
+
+export type PaywallBenefits = Record<string, PaywallBenefitValue>;
+
+export type PaywallBenefitEntry = {
+  key: string;
+  value: PaywallBenefitValue;
+};
+
+export function benefitMapToEntries(
+  map: PaywallBenefits | undefined,
+): PaywallBenefitEntry[] {
+  if (!map || typeof map !== 'object') return [];
+  return Object.entries(map)
+    .filter(([key]) => typeof key === 'string' && key.trim().length > 0)
+    .map(([key, value]) => ({ key, value: value as PaywallBenefitValue }));
+}
+
+export function benefitEntriesToMap(
+  entries: Array<PaywallBenefitEntry | null | undefined> | undefined,
+): PaywallBenefits {
+  const out: PaywallBenefits = {};
+  if (!Array.isArray(entries)) return out;
+  entries.forEach((entry) => {
+    const key = entry?.key?.toString?.().trim?.() ?? '';
+    if (!key) return;
+    const value = entry?.value as PaywallBenefitValue;
+    if (
+      typeof value !== 'string' &&
+      typeof value !== 'number' &&
+      typeof value !== 'boolean'
+    ) {
+      return;
+    }
+    out[key] = value;
+  });
+  return out;
+}

package/src/paywall/types/paywall-types.ts

@@ -0,0 +1,51 @@
+/**
+ * Simple paywall-related types.
+ *
+ * We keep this intentionally small and runtime-agnostic.
+ *
+ * Product fields are based on the common shape returned by `react-native-iap`
+ * calls like `getProducts()` / `getSubscriptions()`.
+ * See: `https://www.npmjs.com/package/react-native-iap`
+ */
+
+export type { PaywallBenefits, PaywallBenefitValue } from './benefits';
+
+/**
+ * Minimal "product" representation (compatible with `react-native-iap` product-ish objects).
+ *
+ * Note: `react-native-iap` has slightly different fields per platform/product type.
+ * This is the common subset most paywalls need.
+ */
+export interface Product {
+  /** iOS: `productId`, Android: `productId` */
+  productId: string;
+
+  /** Display name / title from the store (when available). */
+  title?: string;
+
+  /** Description from the store (when available). */
+  description?: string;
+
+  /**
+   * Localized formatted price (e.g. "$4.99", "€9,99").
+   * In `react-native-iap` this is typically `localizedPrice`.
+   */
+  localizedPrice?: string;
+
+  /**
+   * Raw price string from the store (often numeric string).
+   * In `react-native-iap` this is typically `price`.
+   */
+  price?: string;
+
+  /** Currency code (e.g. "USD", "EUR"). */
+  currency?: string;
+}
+
+/**
+ * A simple paywall model you can store/serialize.
+ */
+export interface PaywallModel {
+  product: Product[];
+  benefits: import('./benefits').PaywallBenefits;
+}

package/src/store.ts

@@ -1,18 +1,26 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import {
-  defaultAppConfig,
-  type AppConfig,
-  type Localication,
-} from './types/PreviewConfig';
+import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
-import { ScreenStyle } from './RenderPage';
-import { createJSONStorage } from 'zustand/middleware';
+import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
+import type { Product } from './paywall/types/paywall-types';
+import type {
+  PaywallBenefits,
+  PaywallBenefitValue,
+} from './paywall/types/benefits';
 
 type RenderStore = {
+  projectName: string;
+  setProjectName: (name: string) => void;
+  /**
+   * Root node tree being edited (a.k.a. "editor data").
+   * Not persisted: it comes from the currently opened project.
+   */
+  editorData: Node | null;
+  setEditorData: (data: Node | null) => void;
   copiedNode: Node | null;
   setCopiedNode: (node: Node | null) => void;
   current: Node | null;
@@ -27,6 +35,20 @@ type RenderStore = {
   setProjectColors: (projectColors?: ProjectColors) => void;
   previewMode: boolean;
   setPreviewMode: (previewMode: boolean) => void;
+  // Mockable: products (persisted)
+  products: Product[];
+  addProduct: () => void;
+  removeProduct: (index: number) => void;
+  updateProduct: (index: number, patch: Partial<Product>) => void;
+  setProducts: (products: Product[]) => void;
+  clearProducts: () => void;
+  // Mockable: benefits (persisted)
+  benefits: PaywallBenefits;
+  setBenefits: (benefits: PaywallBenefits) => void;
+  clearBenefits: () => void;
+  upsertBenefit: (key: string, value: PaywallBenefitValue) => void;
+  removeBenefit: (key: string) => void;
+  renameBenefit: (fromKey: string, toKey: string) => void;
   // Logging
   logs: LogEntry[];
   logLevel: LogLevel;
@@ -41,51 +63,147 @@ type RenderStore = {
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
-  (set) => ({
-    copiedNode: null,
-    setCopiedNode: (node) => set({ copiedNode: node }),
-    current: null,
-    setCurrent: (node) => set({ current: node }),
-    forceRender: 0,
-    incForceRender: () =>
-      set((state) => ({ forceRender: state.forceRender + 1 })),
-    device: getDefaultDevice(),
-    setDevice: (device) => set({ device }),
-    appConfig: defaultAppConfig,
-    setAppConfig: (appConfig) => set({ appConfig }),
-    projectColors: undefined,
-    setProjectColors: (projectColors) => set({ projectColors }),
-    previewMode: false,
-    setPreviewMode: (previewMode) => set({ previewMode }),
-    // Logging defaults
-    logs: [],
-    logLevel: 'INFO',
-    setLogLevel: (level) => set({ logLevel: level }),
-    addLog: (entry) =>
-      set((state) => {
-        const now = Date.now();
-        const id =
-          entry.id ?? `${now}-${Math.random().toString(36).slice(2, 8)}`;
-        const timestamp = entry.timestamp ?? now;
-        const newEntry: LogEntry = {
-          id,
-          timestamp,
-          level: entry.level,
-          source: entry.source,
-          message: entry.message,
-          payload: entry.payload,
-        };
-        return { logs: [...state.logs, newEntry] };
-      }),
-    clearLogs: () => set({ logs: [] }),
-    persist: {
+  persist(
+    (set) => ({
+      projectName: '',
+      setProjectName: (name) => set({ projectName: name }),
+      editorData: null,
+      setEditorData: (data) => set({ editorData: data, current: data }),
+      copiedNode: null,
+      setCopiedNode: (node) => set({ copiedNode: node }),
+      current: null,
+      setCurrent: (node) => set({ current: node }),
+      forceRender: 0,
+      incForceRender: () =>
+        set((state) => ({ forceRender: state.forceRender + 1 })),
+      device: getDefaultDevice(),
+      setDevice: (device) => set({ device }),
+      appConfig: defaultAppConfig,
+      setAppConfig: (appConfig) => set({ appConfig }),
+      projectColors: undefined,
+      setProjectColors: (projectColors) => set({ projectColors }),
+      previewMode: false,
+      setPreviewMode: (previewMode) => set({ previewMode }),
+      products: [],
+      addProduct: () =>
+        set((state) => ({
+          products: [
+            ...(Array.isArray(state.products) ? state.products : []),
+            {
+              productId: '',
+              title: '',
+              description: '',
+              localizedPrice: '',
+              price: '',
+              currency: '',
+            },
+          ],
+        })),
+      removeProduct: (index) =>
+        set((state) => ({
+          products: state.products.filter((_, idx) => idx !== index),
+        })),
+      updateProduct: (index, patch) =>
+        set((state) => {
+          const prev = state.products;
+          if (!Array.isArray(prev)) return state;
+          if (index < 0 || index >= prev.length) return state;
+          const next = prev.map((p, idx) =>
+            idx === index ? { ...p, ...(patch ?? {}) } : p,
+          );
+          return { products: next };
+        }),
+      setProducts: (products) =>
+        set({
+          products: Array.isArray(products) ? products : [],
+        }),
+      clearProducts: () => set({ products: [] }),
+
+      benefits: {},
+      setBenefits: (benefits) =>
+        set({
+          benefits:
+            benefits && typeof benefits === 'object' && !Array.isArray(benefits)
+              ? (benefits as PaywallBenefits)
+              : {},
+        }),
+      clearBenefits: () => set({ benefits: {} }),
+      upsertBenefit: (key, value) =>
+        set((state) => {
+          const normalizedKey = typeof key === 'string' ? key.trim() : '';
+          if (!normalizedKey) return state;
+          if (
+            typeof value !== 'string' &&
+            typeof value !== 'number' &&
+            typeof value !== 'boolean'
+          ) {
+            return state;
+          }
+          const prev = state.benefits;
+          const next: PaywallBenefits = { ...(prev ?? {}) };
+          next[normalizedKey] = value;
+          return { benefits: next };
+        }),
+      removeBenefit: (key) =>
+        set((state) => {
+          const normalizedKey = typeof key === 'string' ? key.trim() : '';
+          if (!normalizedKey) return state;
+          const prev = state.benefits;
+          if (!prev || typeof prev !== 'object') return state;
+          if (!(normalizedKey in prev)) return state;
+          const next: PaywallBenefits = { ...(prev ?? {}) };
+          delete next[normalizedKey];
+          return { benefits: next };
+        }),
+      renameBenefit: (fromKey, toKey) =>
+        set((state) => {
+          const from = typeof fromKey === 'string' ? fromKey.trim() : '';
+          const to = typeof toKey === 'string' ? toKey.trim() : '';
+          if (!from || !to) return state;
+          if (from === to) return state;
+          const prev = state.benefits;
+          if (!prev || typeof prev !== 'object') return state;
+          if (!(from in prev)) return state;
+          const next: PaywallBenefits = { ...(prev ?? {}) };
+          const value = next[from] as PaywallBenefitValue;
+          delete next[from];
+          next[to] = value;
+          return { benefits: next };
+        }),
+      // Logging defaults
+      logs: [],
+      logLevel: 'INFO',
+      setLogLevel: (level) => set({ logLevel: level }),
+      addLog: (entry) =>
+        set((state) => {
+          const now = Date.now();
+          const id =
+            entry.id ?? `${now}-${Math.random().toString(36).slice(2, 8)}`;
+          const timestamp = entry.timestamp ?? now;
+          const newEntry: LogEntry = {
+            id,
+            timestamp,
+            level: entry.level,
+            source: entry.source,
+            message: entry.message,
+            payload: entry.payload,
+          };
+          return { logs: [...state.logs, newEntry] };
+        }),
+      clearLogs: () => set({ logs: [] }),
+    }),
+    {
       name: 'render-store',
-      partialize: (state: RenderStore) => ({
+      partialize: (state) => ({
+        // Explicitly DO NOT persist projectName (it comes from ProjectPage props)
+        // Explicitly DO NOT persist editorData/current (they come from the opened project)
         copiedNode: state.copiedNode ?? null,
         logLevel: state.logLevel,
+        products: state.products,
+        benefits: state.benefits,
       }),
       storage: createJSONStorage(() => localStorage),
     },
-  }),
+  ),
   shallow,
 );

package/src/styles/base/_global.scss

@@ -2,6 +2,7 @@
 @use '../foundation/sizes' as sizes;
 @use '../foundation/typography' as type;
 @use '../foundation/mixins' as *;
+@use 'sass:color';
 
 /* Global utility classes */
 html,
@@ -47,7 +48,7 @@ body,
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 
   &:hover {
-    border-color: darken(colors.$mutedTextColor, 10%);
+    border-color: color.adjust(colors.$mutedTextColor, $lightness: -10%);
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
   }
@@ -63,60 +64,41 @@ body,
 
 .split-right {
   position: relative;
+  display: flex;
+  flex-direction: column;
   flex: 1 1 45%;
-  min-width: 450px;
-  max-height: calc(100vh + 60px);
-  //NOTE: Found by trial and error. We want it to make it full height of the screen with padding
-  padding: sizes.$spaceComfy;
-  padding-bottom: 120px;
+  width: 100%;
+  height: auto;
+  max-height: calc(100vh - 120px);
   overflow: auto;
-}
-
-.split-right__controls {
-  position: absolute;
-  top: sizes.$spaceCozy;
-  z-index: 2;
-  display: flex;
-  margin-bottom: sizes.$spaceCozy;
+  padding: sizes.$spaceComfy;
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 500px auto;
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 }
 
 .split-third {
   flex: 1 1 25%;
   border-right: 1px solid colors.$borderColor;
   overflow: auto;
+  //TODO: depth bir sebepten sağa kayıyor (ama componentler kaymadan) çözülse iyi olabilir
+  overflow-x: hidden;
   max-height: calc(100vh - 120px);
 }
 
-.split-right-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: calc(100vh + 60px);
-  background-size: cover;
-  background-position: center;
-  background-repeat: repeat;
-  background-size: 500px auto;
-  opacity: 0.2;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.stage-wrapper {
-  display: flex;
-  justify-content: center;
-  background: transparent;
-  padding: sizes.$spaceComfy;
-  position: relative;
-  z-index: 1;
-}
-
 .stage {
   @include card;
-  border: 1px solid colors.$borderColor;
+  align-self: center;
+  border: 1px solid color.adjust(colors.$borderColor, $lightness: -10%);
+  box-shadow:
+    0 18px 50px rgba(0, 0, 0, 0.16),
+    0 6px 16px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-
   .scroll-container {
     /* Mobile-like scrollbar styling */
     &::-webkit-scrollbar {
@@ -183,6 +165,7 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCozy;
+  flex-wrap: wrap;
   font-size: 12px;
   color: colors.$mutedTextColor;
 }
@@ -218,11 +201,15 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCompact;
+  flex-wrap: wrap;
+  row-gap: sizes.$spaceTight;
 }
 
 .breadcrumb__item {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   &--clickable {
     cursor: pointer;
   }
@@ -230,7 +217,7 @@ body,
 
 .breadcrumb__separator {
   color: colors.$borderColor;
-  margin: 0 sizes.$spaceTight;
+  margin: 0;
 }
 
 .breadcrumb__link {
@@ -402,8 +389,37 @@ body,
     top: sizes.$spaceCozy;
     z-index: 5;
     padding-bottom: sizes.$spaceCozy;
-    .side-tool {
-      width: 100%;
-    }
   }
 }
+.screen-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+// Custom blue/glow cursor while preview mode is enabled
+.screen-preview--preview {
+  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='0'%20stdDeviation='1.6'%20flood-color='%2360a5fa'%20flood-opacity='0.95'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20filter='url(%23g)'%20d='M6%202%20L6%2022%20L11%2017%20L15%2027%20L18%2026%20L14%2016%20L21%2016%20Z'%20fill='%2360a5fa'%20stroke='%231d4ed8'%20stroke-width='1'/%3E%3C/svg%3E") 6 2,
+    pointer;
+}
+
+/* ProjectPage loading overlay */
+.rb-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(1px);
+}
+
+.rb-loading {
+  position: relative;
+  top: -20%;
+  width: min(320px, 70vw);
+  max-width: 360px;
+  opacity: 0.95;
+}

package/src/styles/components/_attributes-editor.scss

@@ -81,15 +81,17 @@
   }
 
   &__size-grid {
-    display: flex;
+    display: grid;
     gap: sizes.$spaceCozy;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    @media (max-width: 1400px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
   }
 
   &__size-grid-item {
-    flex: 1;
-    min-width: sizes.$dimensionSizeGridMin;
-    max-width: sizes.$dimensionSizeGridMax;
+    min-width: 0;
   }
 
   &__size-field {
@@ -113,6 +115,39 @@
     line-height: sizes.$controlHeightMd;
     padding-inline: sizes.$spaceSnug;
   }
+
+  &__mockable {
+    margin-bottom: sizes.$spaceComfy;
+    padding: sizes.$spaceCozy sizes.$spaceComfy;
+    border-radius: sizes.$radiusRounded;
+    border: sizes.$borderWidthHairline solid #eee;
+    background: #fff;
+  }
+
+  &__mockable-title {
+    margin: 0 0 sizes.$spaceCompact 0;
+    font-weight: 700;
+  }
+
+  &__mockable-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &__mockable-row + &__mockable-row {
+    border-top: sizes.$borderWidthHairline solid #eee;
+  }
+
+  &__mockable-name {
+    padding: sizes.$spaceCompact 0;
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+
+  &__mockable-action {
+    padding: sizes.$spaceCompact 0;
+    text-align: right;
+  }
 }
 
 .field-info-tooltip {
@@ -155,8 +190,16 @@
     border-radius: sizes.$radiusSoft;
     font-size: sizes.$fontSizeSm;
     line-height: 1.4;
-    width: sizes.$dimensionSizeGridMax;
+    // Prevent long descriptions (e.g. URLs or long tokens) from overflowing the tooltip bubble.
+    width: min(
+      sizes.$dimensionSizeGridMax,
+      calc(100vw - (2 * sizes.$spaceComfy))
+    );
     text-align: left;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    hyphens: auto;
     box-shadow: sizes.$shadowTooltip;
     z-index: sizes.$zIndexRaised;
     opacity: 0;

package/src/styles/components/_bottom-bar.scss

@@ -0,0 +1,113 @@
+@use '../foundation/colors';
+
+.rb-bottom-bar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-66%);
+  bottom: 10px;
+
+  height: 50px;
+  border-radius: 24px;
+
+  background-color: #fff;
+  color: colors.$textColor;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding: 0 10px;
+  gap: 10px;
+
+  border: 1px solid rgba(colors.$textColor, 0.06);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.rb-bottom-bar__button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 8px;
+  /* lighter icon color */
+  color: colors.$mutedTextColor;
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rb-bottom-bar__button.is-active {
+  color: colors.$accentColor;
+  background: rgba(colors.$accentColor, 0.08);
+  box-shadow: 0 0 18px rgba(colors.$accentColor, 0.28);
+}
+
+.rb-bottom-bar__button--preview.is-active {
+  // make preview cursor extra obvious
+  box-shadow:
+    0 0 0 3px rgba(colors.$accentColor, 0.18),
+    0 0 26px rgba(colors.$accentColor, 0.35);
+}
+
+.rb-bottom-bar__button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(colors.$accentColor, 0.18),
+    0 0 18px rgba(colors.$accentColor, 0.22);
+}
+
+/* border between each tool button */
+.rb-bottom-bar__button + .rb-bottom-bar__button {
+  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  padding-left: 14px;
+  margin-left: 4px;
+}
+
+.rb-bottom-bar__button--rtl {
+  gap: 6px;
+  padding-right: 10px;
+}
+
+.rb-bottom-bar__rtl-text {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__spacer {
+  flex: 1 1 auto;
+}
+
+.rb-bottom-bar__langs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__lang {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 6px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: lowercase;
+  color: inherit;
+}
+
+.rb-bottom-bar__lang.is-active {
+  color: colors.$accentColor;
+  text-shadow: 0 0 12px rgba(colors.$accentColor, 0.25);
+}
+
+/* border between each language button */
+.rb-bottom-bar__lang + .rb-bottom-bar__lang {
+  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  margin-left: 8px;
+  padding-left: 14px;
+}