@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/styles/components/_editor-shell.scss

@@ -187,28 +187,3 @@
   background: #eef2ff;
   color: #111827;
 }
-
-.side-tool {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-width: 220px;
-  gap: sizes.$spaceTight;
-  padding: sizes.$spaceTight;
-  border-radius: 4px;
-  border: 1px solid colors.$borderColor;
-  font-size: 11xpx;
-  background: #fff;
-}
-
-.side-tool select {
-  width: 100%;
-  font-size: 11px;
-  padding: 4px 6px;
-}
-
-.side-tool .debug-button {
-  border-radius: 0;
-  width: 100%;
-  justify-content: center;
-}

package/src/styles/components/_ui-components.scss

@@ -1,6 +1,7 @@
 @use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 @use '../foundation/mixins' as *;
+@use 'sass:color';
 
 .editor-controls {
   display: grid;
@@ -63,7 +64,7 @@
     box-shadow 0.15s ease;
 
   &:focus {
-    border-color: darken(colors.$borderColor, 8%);
+    border-color: color.adjust(colors.$borderColor, $lightness: -8%);
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
   }
 }

package/src/styles/index.scss

@@ -13,11 +13,17 @@
 @use './components/editor-shell';
 @use './components/attributes-editor';
 @use './components/mockos-router';
+@use './components/bottom-bar';
 
 @use './modals/modal-shell';
 @use './modals/add-component';
 @use './modals/device-selector';
 @use './modals/color-modal';
 @use './modals/localication-modal';
+@use './modals/mockable-feature-modal';
+@use './modals/product-edit-modal';
+@use './modals/product-presets-modal';
+@use './modals/benefit-edit-modal';
+@use './modals/benefit-presets-modal';
 
 @use './utilities/carousel';

package/src/styles/modals/_benefit-edit-modal.scss

@@ -0,0 +1,17 @@
+@use '../foundation/sizes' as sizes;
+
+.benefit-edit-modal {
+  width: min(640px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.benefit-edit-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCozy;
+}

package/src/styles/modals/_benefit-presets-modal.scss

@@ -0,0 +1,79 @@
+@use '../foundation/sizes' as sizes;
+@use '../foundation/colors' as colors;
+
+.benefit-presets-modal {
+  width: min(960px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.benefit-presets-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+}
+
+.benefit-presets-modal__section-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.benefit-presets-modal__muted {
+  margin: sizes.$spaceSnug 0 0;
+  opacity: 0.7;
+}
+
+.benefit-presets-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: sizes.$spaceCozy;
+  margin-top: sizes.$spaceCozy;
+}
+
+.benefit-presets-modal__card {
+  border: 1px solid colors.$borderColor;
+  border-radius: 12px;
+  padding: sizes.$spaceCozy;
+  background: colors.$surfaceColor;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCompact;
+}
+
+.benefit-presets-modal__card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: sizes.$spaceCompact;
+}
+
+.benefit-presets-modal__card-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.benefit-presets-modal__card-count {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+.benefit-presets-modal__card-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.benefit-presets-modal__card-item {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.benefit-presets-modal__actions {
+  display: flex;
+  gap: sizes.$spaceCompact;
+  margin-top: sizes.$spaceCompact;
+}

package/src/styles/modals/_mockable-feature-modal.scss

@@ -0,0 +1,15 @@
+@use '../foundation/sizes' as sizes;
+
+.mockable-feature-modal {
+  width: min(520px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.mockable-feature-modal__body {
+  min-height: 120px;
+}

package/src/styles/modals/_product-edit-modal.scss

@@ -0,0 +1,23 @@
+@use '../foundation/sizes' as sizes;
+
+.product-edit-modal {
+  width: min(640px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.product-edit-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCozy;
+}
+
+.product-edit-modal__textarea {
+  min-height: 90px;
+  padding: 8px;
+  resize: vertical;
+}

package/src/styles/modals/_product-presets-modal.scss

@@ -0,0 +1,81 @@
+@use '../foundation/sizes' as sizes;
+@use '../foundation/colors' as colors;
+
+.product-presets-modal {
+  width: min(960px, calc(100vw - 32px));
+  max-height: 90vh;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  overflow-y: auto;
+}
+
+.product-presets-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+}
+
+.product-presets-modal__section-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.product-presets-modal__muted {
+  margin: sizes.$spaceSnug 0 0;
+  opacity: 0.7;
+}
+
+.product-presets-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: sizes.$spaceCozy;
+  margin-top: sizes.$spaceCozy;
+}
+
+.product-presets-modal__card {
+  border: 1px solid colors.$borderColor;
+  border-radius: 12px;
+  padding: sizes.$spaceCozy;
+  background: colors.$surfaceColor;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceCompact;
+}
+
+.product-presets-modal__card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: sizes.$spaceCompact;
+}
+
+.product-presets-modal__card-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.product-presets-modal__card-count {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+.product-presets-modal__card-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.product-presets-modal__card-item {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.product-presets-modal__actions {
+  display: flex;
+  gap: sizes.$spaceCompact;
+  margin-top: sizes.$spaceCompact;
+}
+
+

package/src/types/Icons.ts

@@ -0,0 +1,244 @@
+// NOTE: This file is generated. Do not edit it manually.
+//TODO: we might use font-icon or something more optimize
+export const Icons = [
+  'activity',
+  'activity-heart',
+  'alert-circle',
+  'alert-triangle',
+  'anchor',
+  'archive',
+  'arrow-down',
+  'arrow-left',
+  'arrow-narrow-down-left',
+  'arrow-narrow-up-right',
+  'arrow-right',
+  'arrow-right-smooth',
+  'asterisk-01',
+  'asterisk-02',
+  'at-sign',
+  'award',
+  'battery-charging',
+  'bell-01',
+  'bell-02',
+  'bell-ringing-02',
+  'bookmark',
+  'bookmark-add',
+  'bookmark-check',
+  'bookmark-minus',
+  'bookmark-x',
+  'bubble',
+  'building-01',
+  'building-02',
+  'building-03',
+  'building-04',
+  'building-05',
+  'building-06',
+  'building-07',
+  'building-08',
+  'building-09',
+  'camera',
+  'camera-01',
+  'camera-steel',
+  'check',
+  'check-circle',
+  'check-circle-bold',
+  'check-circle-broken',
+  'check-done-01',
+  'check-done-02',
+  'check-heart',
+  'check-square',
+  'check-square-broken',
+  'check-verified-01',
+  'check-verified-02',
+  'check-verified-03',
+  'checkbox',
+  'checkv',
+  'chevron-down',
+  'chevron-down2',
+  'chevron-left',
+  'chevron-left-2',
+  'chevron-right',
+  'chevron-right-empty',
+  'chevron-right-smooth',
+  'chevron-up',
+  'circle',
+  'clock',
+  'clock-fast-forward',
+  'close',
+  'close-circle',
+  'cloud-01',
+  'cloud-blank-01',
+  'cloud-blank-02',
+  'coin',
+  'coins-02',
+  'colors',
+  'copy-01',
+  'copy-02',
+  'copy-03',
+  'copy-04',
+  'copy-05',
+  'copy-06',
+  'copy-07',
+  'corner-down-right',
+  'crypto-bold',
+  'delete-icon',
+  'diamond',
+  'dice-3',
+  'divide-01',
+  'divide-02',
+  'divide-03',
+  'document-check-bold',
+  'dots-circle',
+  'dots-grid',
+  'dots-horizontal',
+  'dots-vertical',
+  'download-01',
+  'download-02',
+  'download-03',
+  'edit-03',
+  'edit-04',
+  'edit-05',
+  'element-3',
+  'ellipse-127',
+  'exclaimation-circle',
+  'eye-off-line',
+  'face-smile',
+  'file-04',
+  'file-05',
+  'file-check-02',
+  'file-plus-01',
+  'file-shield-02',
+  'filter-funnel-01',
+  'flag-03',
+  'flash',
+  'folder',
+  'folder-plus',
+  'gallery',
+  'globe-01',
+  'globe-04',
+  'globe-bold',
+  'guard',
+  'headphones-01',
+  'headphones-02',
+  'headset-bold',
+  'heart',
+  'heart-bold',
+  'help-circle',
+  'home-2',
+  'home-line',
+  'hourglass-02',
+  'image',
+  'image-01',
+  'image-03',
+  'inbox-01',
+  'inbox-arrow-down',
+  'info-circle',
+  'keyboard-line',
+  'lamp-charge',
+  'layer',
+  'light',
+  'like-dislike',
+  'lock-03',
+  'logout',
+  'magicpen',
+  'mail',
+  'mail-01',
+  'marker',
+  'medal-star',
+  'menu',
+  'menu-04',
+  'message-circle-01',
+  'message-plus-circle',
+  'message-question-circle',
+  'message-text-circle-01',
+  'message-text-square-02',
+  'message-x-square',
+  'microphone-02',
+  'microphone-slash',
+  'mirror',
+  'moon-01',
+  'moon-bold',
+  'mouse-circle',
+  'move',
+  'notification',
+  'notification-fill',
+  'notification-text',
+  'pdf-01',
+  'pencil-01',
+  'phone',
+  'phone-01',
+  'phone-arrow-down-left',
+  'phone-arrow-up-right',
+  'phone-hang-up',
+  'phone-hangup2',
+  'phone-incoming-01',
+  'phone-outgoing-01',
+  'phone-plus',
+  'phone-x',
+  'plus',
+  'plus-circle',
+  'printer',
+  'question-mark-circle',
+  'refresh-ccw-01',
+  'refresh-cw-01',
+  'refresh-cw-04',
+  'refresh-right-square-bold',
+  'remove-circle',
+  'repeat-04',
+  'repeat-bold',
+  'ruler-pen',
+  'search',
+  'search-lg',
+  'search-md',
+  'search-refraction',
+  'send-01',
+  'send-02',
+  'send-diagonal',
+  'setting-2',
+  'settings',
+  'settings-02',
+  'settings-04',
+  'settings-2',
+  'settings-cog',
+  'share-01',
+  'share-03',
+  'share-04',
+  'share-05',
+  'share-06',
+  'share-bold',
+  'shield-01',
+  'shield-bold',
+  'solar-check',
+  'speaker',
+  'speaker-wave',
+  'speedometer-03',
+  'star',
+  'star-rounded',
+  'sun',
+  'target-03',
+  'text-input',
+  'translate',
+  'trash',
+  'trash-02',
+  'trash-03',
+  'trash-04',
+  'trush-square-bold',
+  'unlimited',
+  'user-circle',
+  'user-jogging',
+  'user-plus-01',
+  'user-square',
+  'user-x-01',
+  'user-x-02',
+  'user2',
+  'users-02',
+  'users-speaker',
+  'verify',
+  'voice-cricle',
+  'x-circle',
+  'x-close',
+  'x-sm',
+  'zap',
+] as const;
+
+export type IconsType = (typeof Icons)[number];

package/src/types/Project.ts

@@ -17,6 +17,11 @@ export interface ProjectColors {
 export interface ProjectBase<T> {
   name: string;
   version: string;
+  /**
+   * Optional classification used by built-in samples.
+   * (Does not conflict with `data.type`, which is the node/component type.)
+   */
+  type?: 'paywall' | 'onboard' | 'other';
   data: T;
   appConfig?: AppConfig;
   projectColors?: ProjectColors;

package/src/types/jest-globals.d.ts

@@ -0,0 +1,13 @@
+declare module '@jest/globals' {
+  /**
+   * Minimal typings for this repo's Jest tests.
+   *
+   * We keep these local (instead of requiring `@types/jest`) so the library build
+   * `tsconfig.json` can stay focused on `src/**` and test files don't need
+   * per-file `/// <reference ...>` directives.
+   */
+  export const describe: (name: string, fn: () => void) => void;
+  export const it: (name: string, fn: () => void) => void;
+  export const test: (name: string, fn: () => void) => void;
+  export const expect: any;
+}