@developer_tribe/react-builder 0.1.32 → 1.0.2

package/src/styles/modals/_add-component.scss

@@ -0,0 +1,122 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.add-component-modal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.add-component-modal__body {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: sizes.$spaceRoomy;
+}
+
+.add-component-modal__section {
+  padding: 0 sizes.$spaceRoomy;
+  margin-bottom: sizes.$spaceRoomy;
+
+  &:first-of-type {
+    margin-top: sizes.$spaceRoomy;
+  }
+}
+
+.add-component-modal__section-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: sizes.$spaceCozy;
+}
+
+.add-component-modal__toggle {
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCozy;
+  margin: 0 sizes.$spaceRoomy sizes.$spaceRoomy;
+  padding: sizes.$spaceCozy 0;
+  font-weight: 500;
+  user-select: none;
+
+  input {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.add-component-modal__group {
+  background: colors.$surfaceColor;
+  border: 1px solid colors.$borderColor;
+  border-radius: 12px;
+  padding: sizes.$spaceComfy;
+  margin-bottom: sizes.$spaceCozy;
+  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
+}
+
+.add-component-modal__group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: colors.$mutedTextColor;
+  margin-bottom: sizes.$spaceCozy;
+}
+
+.add-component-modal__grid {
+  padding: sizes.$spaceComfy;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: sizes.$spaceCozy;
+  overflow: auto;
+}
+
+.add-component-modal__card {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCozy;
+  padding: sizes.$spaceCozy;
+  border: 1px solid colors.$borderColor;
+  border-radius: 10px;
+  background: colors.$canvasColor;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+  color: inherit;
+}
+
+.add-component-modal__card:hover {
+  border-color: colors.$accentColor;
+  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
+  transform: translateY(-2px);
+}
+
+.add-component-modal__thumbnail {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 8px;
+  background: colors.$canvasColor;
+  border: 1px dashed colors.$borderColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: colors.$accentColor;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.add-component-modal__title {
+  font-weight: 600;
+  color: colors.$textColor;
+}
+
+.add-component-modal__empty {
+  margin: sizes.$spaceCozy 0;
+  padding: sizes.$spaceComfy;
+  border: 1px dashed colors.$borderColor;
+  border-radius: 10px;
+  color: colors.$mutedTextColor;
+  font-size: 14px;
+  text-align: center;
+}

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

@@ -0,0 +1,130 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.color-modal {
+  width: min(520px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.color-modal__selected {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: colors.$canvasColor;
+  border-radius: 8px;
+  padding: sizes.$spaceCozy sizes.$spaceComfy;
+}
+
+.color-modal__selected-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-modal__selected-preview {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.color-modal__selected-label {
+  margin: 0;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
+.color-modal__selected-value {
+  margin: 0;
+  font-weight: 600;
+}
+
+.color-modal__link-button {
+  border: none;
+  background: none;
+  color: colors.$accentColor;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.color-section {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCompact;
+}
+
+.color-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.color-section__title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.color-section__swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: sizes.$spaceCompact;
+}
+
+.color-section__empty {
+  margin: 0;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
+.color-modal__swatch {
+  border: 1px solid colors.$borderColor;
+  border-radius: 8px;
+  padding: 8px;
+  background: colors.$surfaceColor;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.color-modal__swatch--active {
+  border-color: colors.$textColor;
+  box-shadow: 0 0 0 1px colors.$textColor inset;
+}
+
+.color-modal__swatch-preview {
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+}
+
+.color-modal__swatch-preview--light {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.color-modal__swatch-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: colors.$textColor;
+}
+
+.color-modal__swatch-value {
+  font-size: 11px;
+  color: colors.$mutedTextColor;
+}
+
+.color-modal__input {
+  display: none;
+}

package/src/styles/modals/_device-selector.scss

@@ -0,0 +1,18 @@
+@use '../foundation/sizes' as sizes;
+
+.device-selector-modal {
+  padding-bottom: sizes.$spaceRoomy;
+}
+
+.device-selector-modal__grid {
+  padding: sizes.$spaceRoomy;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: sizes.$spaceCozy;
+  overflow: auto;
+}
+
+.device-selector-modal__grid .editor-device-button {
+  height: 80px;
+  min-width: unset;
+}

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

@@ -0,0 +1,68 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.localication-modal__content {
+  width: calc(100vw - 32px);
+  height: calc(100vh - 32px);
+  max-width: 1600px;
+  max-height: calc(100vh - 32px);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.localication-modal__header {
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.localication-modal__header-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.localication-modal__description {
+  margin: 0;
+  font-size: 13px;
+  color: colors.$mutedTextColor;
+}
+
+.localication-modal__body {
+  flex: 1;
+  min-height: 0;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow: auto;
+}
+
+.localication-modal__editor {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid colors.$borderColor;
+  border-radius: sizes.$radiusRounded;
+  background: colors.$canvasColor;
+}
+
+.localication-modal__json-editor {
+  height: 100%;
+  width: 100%;
+  display: block;
+  padding: sizes.$spaceCozy;
+  overflow: auto;
+}
+
+.modal--scrollable .localication-modal__content {
+  overflow: hidden;
+}
+
+.modal--scrollable .localication-modal__body {
+  overflow: auto;
+}

package/src/styles/modals/_modal-shell.scss

@@ -0,0 +1,46 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+}
+
+.modal__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 0;
+}
+
+.modal__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: colors.$surfaceColor;
+  border-radius: sizes.$radiusPill;
+  box-shadow: sizes.$cardShadow;
+  width: min(960px, calc(100vw - 40px));
+  max-height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+  gap: 12px;
+}
+
+.modal__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}

package/src/styles/utilities/_carousel.scss

@@ -0,0 +1,125 @@
+/* Embla carousel utilities stay isolated from builder core styles. */
+.embla {
+  max-width: 48rem;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 1rem;
+  --slide-size: 70%;
+}
+.embla__viewport {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
+}
+.embla__slide {
+  transform: translate3d(0, 0, 0);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
+  flex: 0 0 100%;
+}
+.embla__slide__number {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  border-radius: 1.8rem;
+  font-size: 4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--slide-height);
+  user-select: none;
+}
+.embla__controls {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  justify-content: space-between;
+  gap: 1.2rem;
+  margin-top: 1.8rem;
+}
+.embla__buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  align-items: center;
+}
+.embla__button {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 3.6rem;
+  height: 3.6rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--text-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.embla__button:disabled {
+  color: var(--detail-high-contrast);
+}
+.embla__button__svg {
+  width: 35%;
+  height: 35%;
+}
+.embla__dots {
+  flex-wrap: wrap;
+  margin-right: 0;
+  height: 50px;
+  margin: 0 auto;
+}
+.embla__dot {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 2.6rem;
+  height: 2.6rem;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+}
+.embla__dot:after {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: '';
+}
+.embla__dot--selected:after {
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}
+.carousel-provider {
+  height: 100%;
+}
+.embla {
+  height: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.embla__container {
+  flex: 1;
+}

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/types/images.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}

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;
 
@@ -48,8 +50,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     style.paddingTop = v as React.CSSProperties['paddingTop'];
     style.paddingBottom = v as React.CSSProperties['paddingBottom'];
   }
-  if (attributes.marginHorizontal !== undefined) {
-    const v = parseSize(attributes.marginHorizontal);
+  const marginHorizontalRaw = (attributes as Record<string, unknown>)
+    .marginHorizontal as string | number | undefined;
+  if (marginHorizontalRaw !== undefined) {
+    const v = parseSize(marginHorizontalRaw);
     style.marginLeft = v as React.CSSProperties['marginLeft'];
     style.marginRight = v as React.CSSProperties['marginRight'];
   }

package/src/utils/extractViewStyle.ts

@@ -1,5 +1,6 @@
 import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { NodeData } from '../types/Node';
+import { parseSize } from '../size-matters';
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
@@ -31,14 +32,57 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   if (attributes.justifyContent)
     style.justifyContent =
       attributes.justifyContent as React.CSSProperties['justifyContent'];
-  if (attributes.gap !== undefined) style.gap = attributes.gap;
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (rawValue === undefined) return;
+    const parsed = parseSize(rawValue);
+    style[property] = parsed as React.CSSProperties[K];
+  };
+
+  setParsedSize('gap', attributes.gap);
+  setParsedSize('padding', attributes.padding);
+  setParsedSize('margin', attributes.margin);
+
+  if (attributes.paddingHorizontal !== undefined) {
+    const parsed = parseSize(attributes.paddingHorizontal);
+    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
+    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
+  }
+  if (attributes.paddingVertical !== undefined) {
+    const parsed = parseSize(attributes.paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  const marginHorizontalRaw = (attributes as Record<string, unknown>)
+    .marginHorizontal as string | number | undefined;
+  if (marginHorizontalRaw !== undefined) {
+    const parsed = parseSize(marginHorizontalRaw);
+    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
+    style.marginRight = parsed as React.CSSProperties['marginRight'];
+  }
+
+  if (attributes.marginVertical !== undefined) {
+    const parsed = parseSize(attributes.marginVertical);
+    style.marginTop = parsed as React.CSSProperties['marginTop'];
+    style.marginBottom = parsed as React.CSSProperties['marginBottom'];
+  }
+
+  setParsedSize('paddingTop', attributes.paddingTop);
+  setParsedSize('paddingBottom', attributes.paddingBottom);
+  setParsedSize('paddingLeft', attributes.paddingLeft);
+  setParsedSize('paddingRight', attributes.paddingRight);
+  setParsedSize('marginTop', attributes.marginTop);
+  setParsedSize('marginBottom', attributes.marginBottom);
+  setParsedSize('marginLeft', attributes.marginLeft);
+  setParsedSize('marginRight', attributes.marginRight);
+
   if (attributes.backgroundColor)
     style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
+  setParsedSize('borderRadius', attributes.borderRadius);
+  setParsedSize('width', attributes.width);
+  setParsedSize('height', attributes.height);
   return style;
 }

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