@developer_tribe/react-builder 0.1.32 → 1.0.1

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 *;

package/src/types/PreviewConfig.ts

@@ -1,17 +1,26 @@
-import { TargetedScreenSize } from './TargetedScreenSize';
-
-export interface PreviewConfig {
+export interface AppConfig {
   theme: 'light' | 'dark';
-  screenSize: TargetedScreenSize;
-  isRtl: boolean;
+  isRtl: boolean; //This could be device in future
   screenStyle: {
     light: { backgroundColor: string; color: string; seperatorColor?: string };
     dark: { backgroundColor: string; color: string; seperatorColor?: string };
   };
   localication: Localication;
   defaultLanguage?: string;
+  baseSize: { width: number; height: number };
 }
 
+export const defaultAppConfig: AppConfig = {
+  theme: 'light',
+  isRtl: false,
+  screenStyle: {
+    light: { backgroundColor: '#FDFDFD', color: '#161827' },
+    dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
+  },
+  localication: {},
+  baseSize: { width: 375, height: 812 },
+};
+
 export type Localication = {
   [key: string]: {
     [key: string]: string;

package/src/types/Project.ts

@@ -1,11 +1,24 @@
 import { Node } from '../types/Node';
-import { PreviewConfig } from './PreviewConfig';
+import { AppConfig } from './PreviewConfig';
 
 export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
-  previewConfig?: PreviewConfig;
+  appConfig?: AppConfig;
 }
 
 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/utils/copyNode.ts

@@ -0,0 +1,7 @@
+import { useRenderStore } from '../store';
+import { Node } from '../types/Node';
+
+export function copyNode(node: Node) {
+  const { setCopiedNode } = useRenderStore.getState();
+  setCopiedNode(node);
+}

package/src/utils/extractTextStyle.ts

@@ -7,8 +7,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
 ) {
   const attributes = node.attributes;
-
-  const { screenStyle, theme } = useRenderStore.getState();
+  //TODO: it should be passed as a prop to the function (need a state)
+  const {
+    appConfig: { screenStyle, theme },
+  } = useRenderStore.getState();
   const fallbackColor =
     theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
 

package/src/utils/getDevices.ts

@@ -11,6 +11,7 @@ export function getDevices(): Device[] {
   return deviceList;
 }
 
+//TODO: object instead of function
 export function getDefaultDevice(): Device {
   return getDevices()[0];
 }

package/src/utils/logger.ts

@@ -0,0 +1,76 @@
+import { useRenderStore } from '../store';
+import type { LogLevel, LogSource } from '../types/Project';
+
+const levelPriority: Record<Exclude<LogLevel, 'NONE'>, number> = {
+  ERROR: 0,
+  WARN: 1,
+  INFO: 2,
+  VERBOSE: 3,
+};
+
+function shouldLog(currentLevel: LogLevel, level: LogLevel): boolean {
+  if (currentLevel === 'NONE' || level === 'NONE') return false;
+  const curr = levelPriority[currentLevel as Exclude<LogLevel, 'NONE'>];
+  const incoming = levelPriority[level as Exclude<LogLevel, 'NONE'>];
+  return incoming <= curr;
+}
+
+function consoleLog(
+  level: LogLevel,
+  source: LogSource,
+  message: string,
+  payload?: unknown,
+) {
+  const prefix = `[${source}] ${message}`;
+  switch (level) {
+    case 'ERROR':
+      // eslint-disable-next-line no-console
+      console.error(prefix, payload);
+      break;
+    case 'WARN':
+      // eslint-disable-next-line no-console
+      console.warn(prefix, payload);
+      break;
+    case 'INFO':
+      // eslint-disable-next-line no-console
+      console.info(prefix, payload);
+      break;
+    case 'VERBOSE':
+      // eslint-disable-next-line no-console
+      console.debug(prefix, payload);
+      break;
+    default:
+      break;
+  }
+}
+
+export const logger = {
+  setLevel(level: LogLevel) {
+    useRenderStore.getState().setLogLevel(level);
+    // eslint-disable-next-line no-console
+    console.info(`[Logger] level set to ${level}`);
+  },
+  log(level: LogLevel, source: LogSource, message: string, payload?: unknown) {
+    const { logLevel, addLog } = useRenderStore.getState();
+    if (!shouldLog(logLevel, level)) return;
+    addLog({ level, source, message, payload });
+    consoleLog(level, source, message, payload);
+  },
+  verbose(source: LogSource, message: string, payload?: unknown) {
+    this.log('VERBOSE', source, message, payload);
+  },
+  info(source: LogSource, message: string, payload?: unknown) {
+    this.log('INFO', source, message, payload);
+  },
+  warn(source: LogSource, message: string, payload?: unknown) {
+    this.log('WARN', source, message, payload);
+  },
+  error(source: LogSource, message: string, payload?: unknown) {
+    this.log('ERROR', source, message, payload);
+  },
+  clear() {
+    useRenderStore.getState().clearLogs();
+  },
+};
+
+export type { LogLevel };

package/src/utils/useLogRender.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { logger } from './logger';
+
+export function useLogRender(sourceName: string, payload?: unknown) {
+  useEffect(() => {
+    logger.verbose(sourceName, 'rendered', payload);
+    return () => {
+      logger.verbose(sourceName, 'unmount');
+    };
+    // We intentionally log once per mount/update cycle only for rendered
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}