@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/pages/tabs/DebugTab.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { JsonEditor } from 'json-edit-react';
-import { Modal } from '../../modals';
-import { Node } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-
-type DebugTabProps = {
-  data: Node;
-  setData: (data: Node) => void;
-};
-
-export function DebugTab({ data, setData }: DebugTabProps) {
-  useLogRender('DebugTab');
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <>
-      <button
-        type="button"
-        className="editor-button debug-button"
-        title="Inspect raw JSON data"
-        onClick={() => setIsOpen(true)}
-      >
-        Debug JSON
-      </button>
-      {isOpen ? (
-        <Modal
-          onClose={() => setIsOpen(false)}
-          ariaLabelledBy="debug-json-editor-title"
-          className="modal--large modal--scrollable"
-          contentClassName="localication-modal__content"
-        >
-          <div className="modal__header localication-modal__header">
-            <div className="localication-modal__header-main">
-              <h3 id="debug-json-editor-title" className="modal__title">
-                Debug data
-              </h3>
-              <p className="localication-modal__description">
-                Inspect and edit the current node tree using the JSON editor.
-              </p>
-            </div>
-            <button
-              type="button"
-              className="editor-button"
-              onClick={() => setIsOpen(false)}
-            >
-              Close
-            </button>
-          </div>
-          <div className="localication-modal__body">
-            <div className="localication-modal__editor">
-              <JsonEditor
-                rootName="debug"
-                data={data as any}
-                setData={setData as any}
-                className="localication-modal__json-editor"
-                maxWidth={'100%'}
-              />
-            </div>
-          </div>
-        </Modal>
-      ) : null}
-    </>
-  );
-}

package/src/pages/tabs/PreviewTab.tsx

@@ -1,206 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Localication } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-import { useRenderStore } from '../../store';
-import { LocalicationModal } from '../../modals/LocalicationModal';
-import { Checkbox } from '../../components/Checkbox';
-
-type PreviewTabProps = {};
-
-export function PreviewTab({}: PreviewTabProps) {
-  useLogRender('PreviewTab');
-  const { appConfig, setAppConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
-  }));
-  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-
-  const handleLocalicationChange = useCallback(
-    (data: Localication) => {
-      setAppConfig({
-        ...appConfig,
-        localication: data,
-      });
-    },
-    [appConfig, 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={{ marginTop: 8 }}>
-          <Checkbox
-            label="Dark Mode"
-            checked={appConfig.theme === 'dark'}
-            onChange={(checked) => {
-              const nextTheme = checked ? 'dark' : 'light';
-              setAppConfig({
-                ...appConfig,
-                theme: nextTheme,
-              });
-            }}
-          />
-        </div>
-        <div style={{ marginTop: 8 }}>
-          <Checkbox
-            label="Is RTL"
-            checked={appConfig.isRtl ?? false}
-            onChange={(checked) => {
-              setAppConfig({
-                ...appConfig,
-                isRtl: checked,
-              });
-            }}
-          />
-        </div>
-        <div
-          style={{
-            marginTop: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          <div style={{ fontWeight: 600 }}>Localization</div>
-          <p style={{ margin: 0, fontSize: 13, color: '#4b5563' }}>
-            Manage translations for each language configured in your preview.
-          </p>
-          <button
-            type="button"
-            className="editor-button"
-            onClick={() => setIsLocalicationModalOpen(true)}
-          >
-            Open localization editor
-          </button>
-        </div>
-      </div>
-      {isLocalicationModalOpen ? (
-        <LocalicationModal
-          data={appConfig.localication ?? {}}
-          onChange={handleLocalicationChange}
-          onClose={() => setIsLocalicationModalOpen(false)}
-        />
-      ) : null}
-    </div>
-  );
-}