@developer_tribe/react-builder 1.0.1 → 1.0.2

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/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/extractTextStyle.ts

@@ -50,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/patterns.ts

@@ -1,6 +1,31 @@
 import { patterns as generatedPatterns } from '../build-components';
 import type { NodeDefaultAttribute } from '../types/Node';
 
+export type AttributeMeta = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
+  sort?: number;
+  preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+};
+
+export type SpecialCategoryMeta = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  sort?: number;
+};
+
+type PatternMeta = {
+  label?: string;
+  description?: string;
+  attributes?: Record<string, AttributeMeta>;
+  specialCategories?: Record<string, SpecialCategoryMeta>;
+  desiredParent?: string[];
+  desiredChildren?: string[];
+};
+
 type Pattern = {
   schemaVersion: number;
   allowUnknownAttributes: boolean;
@@ -17,6 +42,7 @@ type Pattern = {
   // where the inner record maps fieldName -> primitive type or enum options
   types?: Record<string, Record<string, string | string[]>>;
   // Optional defaults to be applied to node.attributes if not provided
+  meta?: PatternMeta;
 };
 
 const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
@@ -38,6 +64,13 @@ export function getAttributeSchema(
   return p?.pattern.attributes;
 }
 
+export function getAttributeMeta(
+  type?: string | null,
+): Record<string, AttributeMeta> | undefined {
+  const p = getPatternByType(type);
+  return p?.meta?.attributes;
+}
+
 /** Returns defaults block (if any) for a given component type */
 export function getDefaultsForType(
   type?: string | null,

package/dist/build-components/OnboardDot/OnboardExpandingDotProps.generated.d.ts

@@ -1,10 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export interface OnboardDotPropsGenerated {
-    child: string;
-    attributes: {
-        dotType?: 'expanding_dot' | 'normal_dot' | 'scaling_dot' | 'sliding_border' | 'sliding_dot' | 'liquid_like';
-    };
-}
-export interface OnboardDotComponentProps {
-    node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

package/src/build-components/OnboardDot/OnboardExpandingDotProps.generated.ts

@@ -1,20 +0,0 @@
-/* AUTO-GENERATED FILE - DO NOT EDIT */
-
-import type { NodeData } from '../../types/Node';
-
-export interface OnboardDotPropsGenerated {
-  child: string;
-  attributes: {
-    dotType?:
-      | 'expanding_dot'
-      | 'normal_dot'
-      | 'scaling_dot'
-      | 'sliding_border'
-      | 'sliding_dot'
-      | 'liquid_like';
-  };
-}
-
-export interface OnboardDotComponentProps {
-  node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

package/src/styles/_variables.scss

@@ -1,27 +0,0 @@
-// 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

@@ -1,60 +0,0 @@
-@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;
-}