@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/pages/tabs/PreviewTab.tsx

@@ -1,194 +0,0 @@
-import { JsonEditor } from 'json-edit-react';
-import { Localication, TargetedScreenSize } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-import { useRenderStore } from '../../store';
-
-type PreviewTabProps = {};
-
-export function PreviewTab({}: PreviewTabProps) {
-  useLogRender('PreviewTab');
-  const { appConfig, setAppConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
-  }));
-  return (
-    <div
-      role="tabpanel"
-      className="editor-panel editor-panel--active"
-      aria-hidden={false}
-    >
-      <div style={{ padding: 12 }}>
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}
-        >
-          <div>Default Language</div>
-          <select
-            value={appConfig.defaultLanguage ?? 'en'}
-            onChange={(e) => {
-              setAppConfig({
-                ...appConfig,
-                defaultLanguage: e.target.value,
-              });
-            }}
-          >
-            {Object.keys(appConfig.localication ?? {}).map((language) => (
-              <option key={language} value={language}>
-                {language}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-            gap: 12,
-            marginTop: 8,
-          }}
-        >
-          <div>Light Background Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.light.backgroundColor ?? '#FDFDFD'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                light: {
-                  ...(appConfig.screenStyle?.light ?? {
-                    color: '#161827',
-                  }),
-                  backgroundColor: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Light Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.light.color ?? '#161827'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                light: {
-                  ...(appConfig.screenStyle?.light ?? {
-                    backgroundColor: '#FDFDFD',
-                  }),
-                  color: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Dark Background Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.dark.backgroundColor ?? '#12131A'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                dark: {
-                  ...(appConfig.screenStyle?.dark ?? {
-                    color: '#E9EBF9',
-                  }),
-                  backgroundColor: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Dark Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.dark.color ?? '#E9EBF9'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                dark: {
-                  ...(appConfig.screenStyle?.dark ?? {
-                    backgroundColor: '#12131A',
-                  }),
-                  color: e.target.value,
-                },
-              };
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Dark Mode</div>
-          <input
-            type="checkbox"
-            checked={appConfig.theme === 'dark'}
-            onChange={(e) => {
-              const nextTheme = e.target.checked ? 'dark' : 'light';
-
-              setAppConfig({
-                ...appConfig,
-                theme: nextTheme,
-              });
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Is RTL</div>
-          <input
-            type="checkbox"
-            checked={appConfig.isRtl ?? false}
-            onChange={(e) => {
-              setAppConfig({
-                ...appConfig,
-                isRtl: e.target.checked,
-              });
-            }}
-          />
-        </div>
-        <div style={{ marginTop: 8 }}>
-          <JsonEditor
-            rootName="localication"
-            data={appConfig.localication ?? {}}
-            setData={(data) => {
-              setAppConfig({
-                ...appConfig,
-                localication: data as Localication,
-              });
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

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

package/src/styles/components.scss

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

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