@developer_tribe/react-builder 0.1.31 → 1.1.0

package/src/index.ts

@@ -1,9 +1,9 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
 
-export { TargetedScreenSize } from './types/TargetedScreenSize';
-export { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export { Project } from './types/Project';
+export type { TargetedScreenSize } from './types/TargetedScreenSize';
+export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export type { Project } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -14,7 +14,6 @@ export {
 export { getSamples } from './assets/samples/getSamples';
 export { getBasicSamples } from './assets/samples/getSamples';
 export { getOnboardSamples } from './assets/samples/getSamples';
-export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
@@ -28,3 +27,5 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export { ProjectPage } from './pages/ProjectPage';
+export { copyNode } from './utils/copyNode';

package/src/pages/ProjectPage.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { Node, RenderPage, Project } from '..';
+import { EditorHeader } from '../components/EditorHeader';
+import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
+import { BuilderTab } from './tabs/BuilderTab';
+import { PreviewTab } from './tabs/PreviewTab';
+import { DebugTab } from './tabs/DebugTab';
+import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
+import { useRenderStore } from '../store';
+
+type Tab = 'builder' | 'preview' | 'debug';
+
+type ProjectPageProps = {
+  project: Project;
+  onSaveProject: (project: Project) => void;
+  appConfig?: AppConfig;
+};
+
+export function ProjectPage({
+  project,
+  appConfig = defaultAppConfig,
+  onSaveProject,
+}: ProjectPageProps) {
+  const [current, setCurrent] = useState<Node>(project.data);
+  const [editorData, setEditorData] = useState<Node>(project.data);
+  const [tab, setTab] = useState<Tab>('builder');
+
+  useEffect(() => {
+    useRenderStore.getState().setAppConfig(appConfig);
+  }, [appConfig]);
+
+  return (
+    <div className="container-full">
+      <EditorHeader
+        onSaveProject={() => {
+          onSaveProject({
+            ...project,
+            data: editorData,
+          });
+        }}
+        current={current}
+        editorData={editorData}
+        setEditorData={setEditorData}
+      />
+      <div className="editor-container">
+        <div className="split-left">
+          <div>
+            <div
+              className="editor-tabs"
+              role="tablist"
+              aria-label="Editor tabs"
+            >
+              <button
+                className={`editor-tab ${tab === 'builder' ? 'editor-tab--active' : ''}`}
+                role="tab"
+                aria-selected={tab === 'builder'}
+                onClick={() => setTab('builder')}
+              >
+                Builder
+              </button>
+              <button
+                className={`editor-tab ${tab === 'preview' ? 'editor-tab--active' : ''}`}
+                role="tab"
+                aria-selected={tab === 'preview'}
+                onClick={() => setTab('preview')}
+              >
+                Preview Config
+              </button>
+              <button
+                className={`editor-tab ${tab === 'debug' ? 'editor-tab--active' : ''}`}
+                role="tab"
+                aria-selected={tab === 'debug'}
+                onClick={() => setTab('debug')}
+              >
+                Debug
+              </button>
+            </div>
+
+            {tab === 'builder' && (
+              <BuilderTab
+                data={editorData}
+                setData={setEditorData}
+                current={current}
+                setCurrent={setCurrent}
+              />
+            )}
+
+            {tab === 'preview' && <PreviewTab />}
+
+            {tab === 'debug' && (
+              <DebugTab data={editorData} setData={setEditorData} />
+            )}
+          </div>
+        </div>
+        <div className="split-right">
+          <div className="split-right-background" />
+          <RenderPage data={editorData} />
+        </div>
+        <div className="split-third">
+          <AttributesEditorPanel
+            current={current}
+            attributes={editorData}
+            onChange={(data) => {
+              setEditorData(data);
+            }}
+            setCurrent={setCurrent}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/tabs/BuilderTab.tsx

@@ -0,0 +1,31 @@
+import { Node } from '../..';
+import { Builder } from '../../components/Builder';
+
+type BuilderTabProps = {
+  data: Node;
+  setData: (data: Node) => void;
+  current: Node;
+  setCurrent: (current: Node) => void;
+};
+
+export function BuilderTab({
+  data,
+  setData,
+  current,
+  setCurrent,
+}: BuilderTabProps) {
+  return (
+    <div
+      role="tabpanel"
+      className="editor-panel-builder editor-panel editor-panel--active"
+      aria-hidden={false}
+    >
+      <Builder
+        data={data}
+        setData={setData}
+        current={current}
+        setCurrent={setCurrent}
+      />
+    </div>
+  );
+}

package/src/pages/tabs/DebugTab.tsx

@@ -0,0 +1,21 @@
+import { JsonEditor } from 'json-edit-react';
+import { Node } from '../..';
+
+type DebugTabProps = {
+  data: Node;
+  setData: (data: Node) => void;
+};
+
+export function DebugTab({ data, setData }: DebugTabProps) {
+  return (
+    <div
+      role="tabpanel"
+      className="editor-panel editor-panel--active editor-panels-debug"
+      aria-hidden={false}
+    >
+      <div style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}>
+        <JsonEditor data={data as any} setData={setData as any} />
+      </div>
+    </div>
+  );
+}

package/src/pages/tabs/PreviewTab.tsx

@@ -0,0 +1,192 @@
+import { JsonEditor } from 'json-edit-react';
+import { Localication, TargetedScreenSize } from '../..';
+import { useRenderStore } from '../../store';
+
+type PreviewTabProps = {};
+
+export function PreviewTab({}: PreviewTabProps) {
+  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/size-matters/index.ts

@@ -8,7 +8,11 @@ function getBaseDimensions() {
       ? [device.width, device.height]
       : [device.height, device.width];
 
-  return { baseSize: currentState.baseSize, shortDimension, longDimension };
+  return {
+    baseSize: currentState.appConfig.baseSize,
+    shortDimension,
+    longDimension,
+  };
 }
 export function scale(size: number) {
   const { baseSize, shortDimension } = getBaseDimensions();

package/src/store.ts

@@ -1,56 +1,44 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import type { Localication } from './types/PreviewConfig';
+import {
+  defaultAppConfig,
+  type AppConfig,
+  type Localication,
+} from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
 import { ScreenStyle } from './RenderPage';
+import { createJSONStorage } from 'zustand/middleware';
+import { Node } from './types/Node';
 
 type RenderStore = {
+  copiedNode: Node | null;
+  setCopiedNode: (node: Node | null) => void;
   device: Device;
-  localication: Localication | null;
-  defaultLanguage?: string;
-  baseSize: {
-    width: number;
-    height: number;
-  };
-  theme: 'dark' | 'light';
-  screenStyle: ScreenStyle;
-  setBaseSize: (baseSize: { width: number; height: number }) => void;
   setDevice: (device: Device) => void;
-  setLocalication: (localication: Localication | null) => void;
-  setDefaultLanguage: (defaultLanguage?: string) => void;
-  setTheme: (theme: 'dark' | 'light') => void;
-  setScreenStyle: (screenStyle: ScreenStyle) => void;
+  appConfig: AppConfig;
+  setAppConfig: (appConfig: AppConfig) => void;
+  renderCount: number;
+  forceRender: () => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
   (set) => ({
+    copiedNode: null,
+    setCopiedNode: (node) => set({ copiedNode: node }),
+    renderCount: 0,
+    forceRender: () => set((state) => ({ renderCount: state.renderCount + 1 })),
     device: getDefaultDevice(),
-    localication: null,
-    defaultLanguage: undefined,
-    baseSize: {
-      width: 390,
-      height: 844,
-    },
-    theme: 'light',
-    screenStyle: {
-      light: {
-        backgroundColor: '#FDFDFD',
-        color: '#161827',
-        seperatorColor: '#E5E7EB',
-      },
-      dark: {
-        backgroundColor: '#12131A',
-        color: '#E9EBF9',
-        seperatorColor: '#E5E7EB',
-      },
-    },
-    setBaseSize: (baseSize) => set({ baseSize }),
     setDevice: (device) => set({ device }),
-    setLocalication: (localication) => set({ localication }),
-    setDefaultLanguage: (defaultLanguage) => set({ defaultLanguage }),
-    setTheme: (theme) => set({ theme }),
-    setScreenStyle: (screenStyle) => set({ screenStyle }),
+    appConfig: defaultAppConfig,
+    setAppConfig: (appConfig) => set({ appConfig }),
+    persist: {
+      name: 'render-store',
+      partialize: (state: RenderStore) => ({
+        copiedNode: state.copiedNode ?? null,
+      }),
+      storage: createJSONStorage(() => localStorage),
+    },
   }),
   shallow,
 );

package/src/styles/_mixins.scss

@@ -0,0 +1,21 @@
+@use './variables' as *;
+@mixin center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card {
+  background: #fff;
+  border: 1px solid $color-border;
+  border-radius: $radius-xs;
+}
+
+@mixin thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 4px;
+  }
+}

package/src/styles/_variables.scss

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

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

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