@developer_tribe/react-builder 0.1.31 → 1.0.1

package/src/store.ts

@@ -1,56 +1,78 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import type { Localication } from './types/PreviewConfig';
+import {
+  defaultAppConfig,
+  type AppConfig,
+  type Localication,
+} from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
 import { ScreenStyle } from './RenderPage';
+import { createJSONStorage } from 'zustand/middleware';
+import { Node } from './types/Node';
+import type { LogEntry, LogLevel } from './types/Project';
 
 type RenderStore = {
+  copiedNode: Node | null;
+  setCopiedNode: (node: Node | null) => void;
   device: Device;
-  localication: Localication | null;
-  defaultLanguage?: string;
-  baseSize: {
-    width: number;
-    height: number;
-  };
-  theme: 'dark' | 'light';
-  screenStyle: ScreenStyle;
-  setBaseSize: (baseSize: { width: number; height: number }) => void;
   setDevice: (device: Device) => void;
-  setLocalication: (localication: Localication | null) => void;
-  setDefaultLanguage: (defaultLanguage?: string) => void;
-  setTheme: (theme: 'dark' | 'light') => void;
-  setScreenStyle: (screenStyle: ScreenStyle) => void;
+  appConfig: AppConfig;
+  setAppConfig: (appConfig: AppConfig) => void;
+  renderCount: number;
+  forceRender: () => void;
+  // Logging
+  logs: LogEntry[];
+  logLevel: LogLevel;
+  setLogLevel: (level: LogLevel) => void;
+  addLog: (
+    entry: Omit<LogEntry, 'id' | 'timestamp'> & {
+      id?: string;
+      timestamp?: number;
+    },
+  ) => void;
+  clearLogs: () => 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(),
-    localication: null,
-    defaultLanguage: undefined,
-    baseSize: {
-      width: 390,
-      height: 844,
-    },
-    theme: 'light',
-    screenStyle: {
-      light: {
-        backgroundColor: '#FDFDFD',
-        color: '#161827',
-        seperatorColor: '#E5E7EB',
-      },
-      dark: {
-        backgroundColor: '#12131A',
-        color: '#E9EBF9',
-        seperatorColor: '#E5E7EB',
-      },
-    },
-    setBaseSize: (baseSize) => set({ baseSize }),
     setDevice: (device) => set({ device }),
-    setLocalication: (localication) => set({ localication }),
-    setDefaultLanguage: (defaultLanguage) => set({ defaultLanguage }),
-    setTheme: (theme) => set({ theme }),
-    setScreenStyle: (screenStyle) => set({ screenStyle }),
+    appConfig: defaultAppConfig,
+    setAppConfig: (appConfig) => set({ appConfig }),
+    // 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: {
+      name: 'render-store',
+      partialize: (state: RenderStore) => ({
+        copiedNode: state.copiedNode ?? null,
+        logLevel: state.logLevel,
+      }),
+      storage: createJSONStorage(() => localStorage),
+    },
   }),
   shallow,
 );

package/src/styles/_mixins.scss

@@ -0,0 +1,21 @@
+@use './variables' as *;
+@mixin center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card {
+  background: #fff;
+  border: 1px solid $color-border;
+  border-radius: $radius-xs;
+}
+
+@mixin thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 4px;
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,27 @@
+// Color palette
+$color-background: #f3f4f6;
+$color-border: #e5e7eb;
+$color-text: #111827;
+$color-muted: #9ca3af;
+$color-error: #ef4444;
+$color-button: cornflowerblue;
+
+// Spacing
+$space-1: 4px;
+$space-2: 8px;
+$space-3: 12px;
+$space-4: 16px;
+$space-5: 20px;
+$space-6: 24px;
+
+// Radius & shadow
+$radius-xs: 4px;
+$radius-sm: 8px;
+$radius-md: 12px;
+$radius-lg: 24px;
+$shadow-card: 0 10px 30px rgba(0, 0, 0, 0.12);
+
+// Fonts
+$font-sans:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

package/src/styles/builder.scss

@@ -0,0 +1,60 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.builder {
+  display: flex;
+  flex-direction: column;
+  gap: $space-3;
+}
+
+.builder__breadcrumbs {
+  display: flex;
+  flex-direction: row;
+  gap: $space-2;
+}
+
+.builder__breadcrumb {
+  color: $color-muted;
+  font-size: 12px;
+}
+
+.builder__current {
+  font-weight: 600;
+}
+
+.builder__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-2;
+}
+
+.builder__button {
+  @include card;
+  padding: $space-3 $space-3;
+  font-size: 14px;
+  background: $color-button;
+  color: #fff;
+  cursor: pointer;
+}
+
+.builder__node {
+  @include card;
+  padding: $space-3;
+}
+
+.builder__node-type {
+  margin: 0 0 $space-2 0;
+  font-weight: 600;
+}
+
+.builder__children {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+}
+
+.builder__text,
+.builder__placeholder {
+  color: $color-muted;
+  font-size: 12px;
+}

package/src/styles/components.scss

@@ -0,0 +1,88 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.editor-controls {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: $space-3;
+  padding: $space-4;
+}
+
+.editor-section {
+  background: #fff;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  padding: $space-4;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  align-items: center;
+  gap: $space-3;
+  margin-bottom: $space-3;
+}
+
+.form-actions {
+  display: flex;
+  gap: $space-3;
+  margin-top: $space-4;
+}
+
+.btn {
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid $color-border;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background: #f9fafb;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  }
+}
+
+/* Inputs */
+.input {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  background: #fff;
+  color: $color-text;
+  font: inherit;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:focus {
+    border-color: darken($color-border, 8%);
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
+  }
+}
+
+.input--color {
+  padding: 0;
+  width: 40px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 4px;
+  }
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: 4px;
+  }
+}

package/src/styles/editor.scss

@@ -0,0 +1,174 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.editor-tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.editor-tab {
+  padding: 8px 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #111827;
+  padding: 8px 12px;
+}
+
+.editor-tab--active {
+  background: #fff;
+  border-color: #e5e7eb #e5e7eb #fff #e5e7eb;
+}
+
+.editor-panels {
+  padding: 12px;
+  &.editor-panels-debug {
+    padding: 0;
+  }
+}
+.jer-editor-container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.editor-panel {
+  display: none;
+}
+
+.editor-panel--active {
+  display: block;
+}
+
+/* Editor utility header */
+.editor-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 $space-4;
+  height: 60px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.editor-header__title {
+  color: #111827;
+  font-weight: 600;
+}
+
+.editor-header__devices {
+  @include thin-scrollbar;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 8px;
+  overflow: auto;
+  height: 60px;
+  padding: $space-1;
+}
+
+.editor-device-button {
+  position: relative;
+  min-width: 160px;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  font-size: 12px;
+  &.editor-device-button--selected {
+    border-color: #000;
+  }
+}
+
+.editor-device-button img {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  width: 16px;
+  height: 16px;
+}
+
+.editor-header__actions {
+  margin-left: auto; /* push actions to the far right */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editor-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  min-width: 120px; /* visible even without content */
+  padding: 0 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+}
+
+.editor-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Specific hooks for save buttons (kept empty for now) */
+.editor-save-button,
+.editor-save-previewconfig-button {
+  color: #000;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+/* Modal */
+.editor-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.editor-modal__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.editor-modal__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  width: min(960px, calc(100vw - 40px));
+  max-height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.editor-device-grid {
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  overflow: auto;
+}
+
+/* Reuse device button style inside modal grid */
+.editor-device-grid .editor-device-button {
+  height: 80px;
+  min-width: unset;
+}

package/src/styles/global.scss

@@ -0,0 +1,200 @@
+@use './variables' as *;
+@use './mixins' as *;
+@use './reset';
+
+/* Global utility classes */
+html,
+body,
+#root {
+  font-family: $font-sans;
+}
+
+.editor-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  overflow: hidden; /* Split panels manage their own scroll */
+}
+.editor-panel-builder {
+  padding: 4px 8px;
+}
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main {
+  flex: 1 1 auto;
+  background: $color-background;
+}
+
+.page-bg {
+  background: $color-background;
+}
+
+.grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: $space-4;
+}
+
+.btn-add {
+  height: 120px;
+  border: 2px dashed $color-muted;
+  border-radius: $radius-md;
+  background: #fff;
+  cursor: pointer;
+  font-weight: 600;
+  color: $color-text;
+  transition:
+    border-color 0.2s ease,
+    transform 0.1s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+  &:hover {
+    border-color: darken($color-muted, 10%);
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.split-left {
+  @include thin-scrollbar;
+  flex: 1 1 30%;
+  min-width: 0;
+  border-right: 1px solid $color-border;
+  overflow: auto;
+}
+
+.split-right {
+  position: relative;
+  flex: 1 1 45%;
+  min-width: 0;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+}
+
+.split-third {
+  flex: 1 1 25%;
+  min-width: 0;
+  border-right: 1px solid $color-border;
+  overflow: auto;
+  max-height: calc(100vh - 120px);
+}
+
+.split-right-background {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 500px auto;
+  opacity: 0.2;
+}
+
+.stage-wrapper {
+  display: flex;
+  justify-content: center;
+  background: $color-background;
+  padding: $space-4;
+}
+
+.stage {
+  @include card;
+  border: 1px solid $color-border;
+
+  .scroll-container {
+    /* Mobile-like scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.25);
+      border-radius: 8px;
+    }
+
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  }
+}
+
+/* Header */
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #fff;
+  border-bottom: 1px solid $color-border;
+  height: 60px;
+  padding: 0 $space-4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  a {
+    color: $color-text;
+    text-decoration: none;
+  }
+}
+
+.app-header__brand {
+  font-weight: 700;
+}
+
+.app-header__nav {
+  display: flex;
+  gap: $space-4;
+}
+.warning {
+  color: $color-error;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: $space-4;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+  display: block;
+  font-size: 12px;
+  color: $color-muted;
+}
+
+.breadcrumb__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+}
+
+.breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb__separator {
+  color: $color-border;
+  margin: 0 $space-1;
+}
+
+.breadcrumb__link {
+  color: $color-text;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.breadcrumb__current {
+  color: $color-muted;
+}

package/src/styles/index.scss

@@ -1,4 +1,11 @@
+@use './variables' as *;
+@use './mixins' as *;
 @use './reset';
+@use './global.scss';
+@use './pages.scss';
+@use './components.scss';
+@use './builder.scss';
+@use './editor.scss';
 
 .embla {
   max-width: 48rem;

package/src/styles/pages.scss

@@ -0,0 +1,2 @@
+@use './variables' as *;
+@use './mixins' as *;