@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/store.ts

@@ -8,37 +8,243 @@ 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';
+import type { Fonts } from './types/Fonts';
+//TODO: project base store and general store should be separated. We can we use context
 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;
   setAppConfig: (appConfig: AppConfig) => void;
-  renderCount: number;
-  forceRender: () => void;
+  projectColors?: ProjectColors;
+  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;
+  setLogLevel: (level: LogLevel) => void;
+  addLog: (
+    entry: Omit<LogEntry, 'id' | 'timestamp'> & {
+      id?: string;
+      timestamp?: number;
+    },
+  ) => void;
+  clearLogs: () => void;
+
+  // Fonts (provided by host app)
+  fonts: Fonts;
+  setFonts: (fonts: Fonts) => void;
+  // NOTE: appFont is intentionally non-optional as a prop in `ProjectPage`,
+  // but the value itself can be undefined when the host can't determine it.
+  appFont: string | undefined;
+  setAppFont: (appFont: string | undefined) => void;
+  // Validation/runtime errors surfaced to the host UI
+  errors: string[];
+  setErrors: (errors: string[]) => void;
+  addError: (error: string) => void;
+  clearErrors: () => void;
+  // Cache loaded font families to avoid repeated loads
+  loadedFonts: string[];
+  markFontLoaded: (fontFamily: string) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
-  (set) => ({
-    copiedNode: null,
-    setCopiedNode: (node) => set({ copiedNode: node }),
-    renderCount: 0,
-    forceRender: () => set((state) => ({ renderCount: state.renderCount + 1 })),
-    device: getDefaultDevice(),
-    setDevice: (device) => set({ device }),
-    appConfig: defaultAppConfig,
-    setAppConfig: (appConfig) => set({ appConfig }),
-    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: [] }),
+
+      fonts: [],
+      setFonts: (fonts) => set({ fonts: Array.isArray(fonts) ? fonts : [] }),
+      appFont: undefined,
+      setAppFont: (appFont) => set({ appFont }),
+      errors: [],
+      setErrors: (errors) =>
+        set({ errors: Array.isArray(errors) ? errors : [] }),
+      addError: (error) =>
+        set((state) => ({
+          errors: [
+            ...(Array.isArray(state.errors) ? state.errors : []),
+            String(error),
+          ],
+        })),
+      clearErrors: () => set({ errors: [] }),
+      loadedFonts: [],
+      markFontLoaded: (fontFamily) =>
+        set((state) => {
+          const family =
+            typeof fontFamily === 'string' ? fontFamily.trim() : '';
+          if (!family) return state;
+          const prev = Array.isArray(state.loadedFonts)
+            ? state.loadedFonts
+            : [];
+          if (prev.includes(family)) return state;
+          return { loadedFonts: [...prev, family] };
+        }),
+    }),
+    {
       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

@@ -0,0 +1,469 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as type;
+@use '../foundation/mixins' as *;
+
+/* Global utility classes */
+html,
+body,
+#root {
+  font-family: type.$bodyFont;
+}
+
+.editor-container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  overflow: hidden; /* Split panels manage their own scroll */
+}
+
+.app-main {
+  flex: 1 1 auto;
+  background: colors.$canvasColor;
+}
+
+.page-bg {
+  background: colors.$canvasColor;
+}
+
+.grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: sizes.$spaceComfy;
+}
+
+.btn-add {
+  height: 120px;
+  border: 2px dashed colors.$mutedTextColor;
+  border-radius: sizes.$radiusRounded;
+  background: colors.$surfaceColor;
+  cursor: pointer;
+  font-weight: 600;
+  color: colors.$textColor;
+  transition:
+    border-color 0.2s ease,
+    transform 0.1s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 1px 2px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04);
+
+  &:hover {
+    border-color: colors.$mutedTextColor;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
+  }
+}
+
+.split-left {
+  @include thin-scrollbar;
+  flex: 1 1 10%;
+  min-width: 200px;
+  border-right: 1px solid colors.$borderColor;
+  overflow: auto;
+}
+
+.split-right {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 45%;
+  width: 100%;
+  height: auto;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+  padding: sizes.$spaceComfy;
+  background-image: var(--rb-canvas-bg, none);
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 500px auto;
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+/* Hide the canvas grid background in dark theme (Tailwind/shadcn convention). */
+.dark .split-right {
+  --rb-canvas-bg: none !important;
+}
+
+.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);
+}
+
+.stage {
+  @include card;
+  align-self: center;
+  border: 1px solid colors.$borderColor;
+  box-shadow:
+    0 18px 50px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.16),
+    0 6px 16px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
+  overflow: hidden;
+  .scroll-container {
+    /* Mobile-like scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: hsl(
+        var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.25
+      );
+      border-radius: 8px;
+    }
+
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: hsl(
+        var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.25
+      )
+      transparent;
+  }
+}
+
+/* Builder preview selection helpers */
+.rb-node-selected {
+  border: 1px solid colors.$accentColor;
+}
+
+/* Header */
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: colors.$surfaceColor;
+  border-bottom: 1px solid colors.$borderColor;
+  height: 60px;
+  padding: 0 sizes.$spaceComfy;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  a {
+    color: colors.$textColor;
+    text-decoration: none;
+  }
+}
+
+.app-header__brand {
+  font-weight: 700;
+}
+
+.app-header__nav {
+  display: flex;
+  gap: sizes.$spaceComfy;
+}
+.warning {
+  color: colors.$dangerColor;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: sizes.$spaceComfy;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCozy;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
+.breadcrumb__back {
+  display: inline-flex;
+  align-items: center;
+  gap: sizes.$spaceTight;
+  padding: 0;
+  border: none;
+  background: none;
+  color: colors.$textColor;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: colors.$accentColor;
+    outline: none;
+  }
+}
+
+.breadcrumb__back-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.breadcrumb__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCompact;
+}
+
+.breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  &--clickable {
+    cursor: pointer;
+  }
+}
+
+.breadcrumb__separator {
+  color: colors.$borderColor;
+  margin: 0 sizes.$spaceTight;
+}
+
+.breadcrumb__link {
+  color: colors.$textColor;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.breadcrumb__current {
+  color: colors.$mutedTextColor;
+}
+
+.device-status-bar {
+  position: relative;
+  z-index: 100;
+}
+.device-navigation-bar {
+  position: relative;
+  z-index: 100;
+}
+
+.mobile-panel-toggle {
+  display: none;
+  padding: 0 sizes.$spaceComfy sizes.$spaceCozy;
+  gap: sizes.$spaceCompact;
+}
+
+.mobile-panel-toggle__button {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: sizes.$spaceCompact;
+  padding: sizes.$spaceCozy;
+  border-radius: sizes.$radiusRounded;
+  border: 1px solid colors.$borderColor;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus-visible {
+    outline: sizes.$outlineWidthFocus solid colors.$accentColor;
+    outline-offset: 2px;
+  }
+}
+
+.mobile-panel-toggle__button--active {
+  background: colors.$textColor;
+  color: colors.$surfaceColor;
+  border-color: colors.$textColor;
+  box-shadow: 0 6px 16px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.15);
+}
+
+.mobile-panel-toggle__icon {
+  width: 18px;
+  height: 12px;
+  display: inline-flex;
+}
+
+.mobile-panel-toggle__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.mobile-panel-toggle__label {
+  line-height: 1;
+}
+
+.split-panel__close {
+  display: none;
+  position: absolute;
+  top: sizes.$spaceCozy;
+  right: sizes.$spaceCozy;
+  border: none;
+  border-radius: sizes.$radiusRounded;
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.7
+  );
+  color: colors.$surfaceColor;
+  padding: sizes.$spaceSnug sizes.$spaceComfy;
+  font-weight: 600;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.editor-container__overlay {
+  display: none;
+}
+
+@media (max-width: 1000px) {
+  .editor-container {
+    position: relative;
+    min-height: calc(100vh - 60px);
+    flex-direction: column;
+  }
+
+  .split-left,
+  .split-third {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: colors.$canvasColor;
+    box-shadow: 0 25px 60px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.15);
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 4;
+  }
+
+  .split-left {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  .split-third {
+    transform: translate3d(100%, 0, 0);
+  }
+
+  .split-left.is-open,
+  .split-third.is-open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .split-right {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: calc(100vh - 120px);
+    padding: sizes.$spaceComfy;
+    padding-bottom: 120px;
+    position: relative;
+  }
+
+  .mobile-panel-toggle {
+    display: flex;
+  }
+
+  .split-panel__close {
+    display: inline-flex;
+  }
+
+  .editor-container__overlay {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: hsl(
+      var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.35
+    );
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    z-index: 3;
+  }
+}
+
+@media (max-width: 900px) {
+  .split-right__controls {
+    top: sizes.$spaceCozy;
+    z-index: 5;
+    padding-bottom: sizes.$spaceCozy;
+    .side-tool {
+      width: 100%;
+    }
+  }
+}
+.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: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.55);
+  backdrop-filter: blur(1px);
+}
+
+.rb-loading {
+  position: relative;
+  top: -20%;
+  width: min(320px, 70vw);
+  max-width: 360px;
+  opacity: 0.95;
+}
+
+/* RenderPage empty preview overlay */
+.rb-empty-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.rb-empty-preview__card {
+  width: min(320px, calc(100% - 32px));
+  padding: 14px 16px;
+  border-radius: sizes.$radiusRounded;
+  border: 1px dashed colors.$borderColor;
+  background: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.72);
+  backdrop-filter: blur(1px);
+  text-align: center;
+}
+
+.rb-empty-preview__title {
+  font-weight: 700;
+  color: colors.$textColor;
+  margin-bottom: 4px;
+}
+
+.rb-empty-preview__hint {
+  font-size: 13px;
+  color: colors.$mutedTextColor;
+}