@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/store.ts

@@ -8,15 +8,24 @@ import {
 } 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;
   copiedNode: Node | null;
   setCopiedNode: (node: Node | null) => void;
   current: Node | null;
   setCurrent: (node: Node | null) => void;
+  forceRender: number;
+  incForceRender: () => void;
   device: Device;
   setDevice: (device: Device) => void;
   appConfig: AppConfig;
@@ -25,6 +34,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;
@@ -39,48 +62,144 @@ type RenderStore = {
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
-  (set) => ({
-    copiedNode: null,
-    setCopiedNode: (node) => set({ copiedNode: node }),
-    current: null,
-    setCurrent: (node) => set({ current: node }),
-    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 }),
+      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)
         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 {
@@ -139,6 +121,11 @@ body,
   }
 }
 
+/* Builder preview selection helpers */
+.rb-node-selected {
+  border: 1px solid #2684ff;
+}
+
 /* Header */
 .app-header {
   position: sticky;
@@ -402,3 +389,29 @@ body,
     }
   }
 }
+.screen-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* 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 {

package/src/styles/components/_editor-shell.scss

@@ -188,15 +188,11 @@
   color: #111827;
 }
 
-.side-tool {
-  display: flex;
-  flex-direction: column;
-  gap: sizes.$spaceTight;
-  padding: sizes.$spaceTight;
-  border-radius: 4px;
-  border: 1px solid colors.$borderColor;
-  font-size: 11px;
-  max-width: 220px;
+.side-tool-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
 }
 
 .side-tool select {

package/src/styles/components/_ui-components.scss

@@ -1,6 +1,7 @@
 @use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 @use '../foundation/mixins' as *;
+@use 'sass:color';
 
 .editor-controls {
   display: grid;
@@ -63,7 +64,7 @@
     box-shadow 0.15s ease;
 
   &:focus {
-    border-color: darken(colors.$borderColor, 8%);
+    border-color: color.adjust(colors.$borderColor, $lightness: -8%);
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
   }
 }

package/src/styles/index.scss

@@ -19,5 +19,10 @@
 @use './modals/device-selector';
 @use './modals/color-modal';
 @use './modals/localication-modal';
+@use './modals/mockable-feature-modal';
+@use './modals/product-edit-modal';
+@use './modals/product-presets-modal';
+@use './modals/benefit-edit-modal';
+@use './modals/benefit-presets-modal';
 
 @use './utilities/carousel';

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

@@ -0,0 +1,17 @@
+@use '../foundation/sizes' as sizes;
+
+.benefit-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;
+}
+
+.benefit-edit-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCozy;
+}

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

@@ -0,0 +1,79 @@
+@use '../foundation/sizes' as sizes;
+@use '../foundation/colors' as colors;
+
+.benefit-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;
+}
+
+.benefit-presets-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+}
+
+.benefit-presets-modal__section-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.benefit-presets-modal__muted {
+  margin: sizes.$spaceSnug 0 0;
+  opacity: 0.7;
+}
+
+.benefit-presets-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: sizes.$spaceCozy;
+  margin-top: sizes.$spaceCozy;
+}
+
+.benefit-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;
+}
+
+.benefit-presets-modal__card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: sizes.$spaceCompact;
+}
+
+.benefit-presets-modal__card-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.benefit-presets-modal__card-count {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+.benefit-presets-modal__card-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.benefit-presets-modal__card-item {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.benefit-presets-modal__actions {
+  display: flex;
+  gap: sizes.$spaceCompact;
+  margin-top: sizes.$spaceCompact;
+}

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

@@ -83,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;
@@ -155,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/modals/_mockable-feature-modal.scss

@@ -0,0 +1,15 @@
+@use '../foundation/sizes' as sizes;
+
+.mockable-feature-modal {
+  width: min(520px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.mockable-feature-modal__body {
+  min-height: 120px;
+}

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;
+}