@developer_tribe/react-builder 1.0.5 → 1.0.7

package/src/build-components/patterns.generated.ts

@@ -9130,405 +9130,6 @@ export const patterns = [
     },
     types: {},
   },
-  {
-    schemaVersion: 1,
-    allowUnknownAttributes: false,
-    pattern: {
-      type: 'PaywallSubscriButton',
-      children: 'string',
-      attributes: {
-        color: 'color',
-        fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
-        scrollable: 'boolean',
-        flexDirection: ['row', 'column'],
-        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
-        justifyContent: [
-          'flex-start',
-          'center',
-          'flex-end',
-          'space-between',
-          'space-around',
-          'space-evenly',
-        ],
-        gap: 'size',
-        padding: 'size',
-        paddingHorizontal: 'size',
-        paddingVertical: 'size',
-        paddingTop: 'size',
-        paddingBottom: 'size',
-        paddingLeft: 'size',
-        paddingRight: 'size',
-        margin: 'size',
-        marginVertical: 'size',
-        marginTop: 'size',
-        marginBottom: 'size',
-        marginLeft: 'size',
-        marginRight: 'size',
-        backgroundColor: 'color',
-        borderRadius: 'size',
-        width: 'size',
-        minWidth: 'size',
-        maxWidth: 'size',
-        height: 'size',
-        minHeight: 'size',
-        maxHeight: 'size',
-        flex: 'number',
-        position: ['relative', 'absolute'],
-        top: 'size',
-        bottom: 'size',
-        left: 'size',
-        right: 'size',
-        zIndex: 'number',
-      },
-      defaults: { flexDirection: 'column', position: 'relative', zIndex: 1 },
-    },
-    meta: {
-      desiredParent: ['>PaywallProvider'],
-      label: 'Paywall Subscribe Button',
-      description: 'Paywall subscribe call-to-action button. Extends Button.',
-      attributes: {
-        color: {
-          label: 'Color',
-          description: 'Text color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 1,
-        },
-        fontSize: {
-          label: 'Font Size',
-          description: 'Text size of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 2,
-        },
-        fontWeight: {
-          label: 'Font Weight',
-          description: 'Text weight of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 3,
-        },
-        scrollable: {
-          label: 'Scrollable',
-          description: 'Turns scroll interaction on.',
-          category: 'container',
-          specialCategory: null,
-          sort: -1,
-        },
-        flexDirection: {
-          label: 'Flex Direction',
-          description: 'Sets row or column layout.',
-          category: 'container',
-          specialCategory: null,
-          sort: 4,
-        },
-        alignItems: {
-          label: 'Align Items',
-          description: 'Controls cross-axis alignment.',
-          category: 'container',
-          specialCategory: null,
-          sort: 3,
-        },
-        justifyContent: {
-          label: 'Justify Content',
-          description: 'Controls main-axis alignment.',
-          category: 'container',
-          specialCategory: null,
-          sort: 5,
-        },
-        gap: {
-          label: 'Gap',
-          description: 'Space between children.',
-          category: 'container',
-          specialCategory: null,
-          sort: 10,
-          preferedScale: 's',
-        },
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 6,
-          preferedScale: 's',
-        },
-        paddingHorizontal: {
-          label: 'Padding Horizontal',
-          description: 'Left and right padding.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 7,
-          preferedScale: 's',
-        },
-        paddingVertical: {
-          label: 'Padding Vertical',
-          description: 'Top and bottom padding.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 8,
-          preferedScale: 'vs',
-        },
-        paddingTop: {
-          label: 'Padding Top',
-          description: 'Top padding only.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 9,
-          preferedScale: 'vs',
-        },
-        paddingBottom: {
-          label: 'Padding Bottom',
-          description: 'Bottom padding only.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 10,
-          preferedScale: 'vs',
-        },
-        paddingLeft: {
-          label: 'Padding Left',
-          description: 'Left padding only.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 11,
-          preferedScale: 's',
-        },
-        paddingRight: {
-          label: 'Padding Right',
-          description: 'Right padding only.',
-          category: 'container',
-          specialCategory: 'padding',
-          sort: 12,
-          preferedScale: 's',
-        },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 13,
-          preferedScale: 's',
-        },
-        marginHorizontal: {
-          label: 'Margin Horizontal',
-          description: 'Left and right margin.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 14,
-          preferedScale: 's',
-        },
-        marginVertical: {
-          label: 'Margin Vertical',
-          description: 'Top and bottom margin.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 15,
-          preferedScale: 'vs',
-        },
-        marginTop: {
-          label: 'Margin Top',
-          description: 'Top margin only.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 16,
-          preferedScale: 'vs',
-        },
-        marginBottom: {
-          label: 'Margin Bottom',
-          description: 'Bottom margin only.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 17,
-          preferedScale: 'vs',
-        },
-        marginLeft: {
-          label: 'Margin Left',
-          description: 'Left margin only.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 18,
-          preferedScale: 's',
-        },
-        marginRight: {
-          label: 'Margin Right',
-          description: 'Right margin only.',
-          category: 'container',
-          specialCategory: 'margin',
-          sort: 19,
-          preferedScale: 's',
-        },
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferedScale: 's',
-        },
-        width: {
-          label: 'Width',
-          description: 'Fixed width value.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 0,
-          preferedScale: 's',
-        },
-        minWidth: {
-          label: 'Min Width',
-          description: 'Minimum width constraint.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 1,
-          preferedScale: 's',
-        },
-        maxWidth: {
-          label: 'Max Width',
-          description: 'Maximum width constraint.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 2,
-          preferedScale: 's',
-        },
-        height: {
-          label: 'Height',
-          description: 'Fixed height value.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 3,
-          preferedScale: 'vs',
-        },
-        minHeight: {
-          label: 'Min Height',
-          description: 'Minimum height constraint.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 4,
-          preferedScale: 'vs',
-        },
-        maxHeight: {
-          label: 'Max Height',
-          description: 'Maximum height constraint.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 5,
-          preferedScale: 'vs',
-        },
-        flex: {
-          label: 'Flex',
-          description: 'Flex grow factor (e.g. 1 fills available space).',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 6,
-        },
-        position: {
-          label: 'Position',
-          description: 'Sets layout positioning mode.',
-          category: 'container',
-          specialCategory: null,
-          sort: 3,
-        },
-        top: {
-          label: 'Top',
-          description: 'Offset from the top edge.',
-          category: 'container',
-          specialCategory: 'offset',
-          sort: 22,
-          preferedScale: 'vs',
-        },
-        bottom: {
-          label: 'Bottom',
-          description: 'Offset from the bottom edge.',
-          category: 'container',
-          specialCategory: 'offset',
-          sort: 23,
-          preferedScale: 'vs',
-        },
-        left: {
-          label: 'Left',
-          description: 'Offset from the left edge.',
-          category: 'container',
-          specialCategory: 'offset',
-          sort: 24,
-          preferedScale: 's',
-        },
-        right: {
-          label: 'Right',
-          description: 'Offset from the right edge.',
-          category: 'container',
-          specialCategory: 'offset',
-          sort: 25,
-          preferedScale: 's',
-        },
-        zIndex: {
-          label: 'Z-Index',
-          description: 'Controls stacking order.',
-          category: 'container',
-          specialCategory: null,
-          sort: 26,
-        },
-      },
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
-          sort: 1,
-        },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
-        },
-      },
-    },
-    defaults: {
-      flexDirection: 'column',
-      position: 'relative',
-      zIndex: 1,
-      backgroundColor: '#1C1C1E',
-      paddingHorizontal: '20@s',
-      paddingVertical: '12@vs',
-      borderRadius: '12@s',
-      color: 'cornflowerblue',
-      fontSize: '16@fs',
-      fontWeight: '700',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    types: {},
-  },
   {
     schemaVersion: 1,
     allowUnknownAttributes: false,

package/src/components/BottomBar.tsx

@@ -0,0 +1,242 @@
+import React, { useMemo, useState } from 'react';
+import { Icon } from './Icon.generated';
+import type { IconsType } from '../types/Icons';
+import { useRenderStore } from '../store';
+import { Checkbox } from './Checkbox';
+import type { Localication } from '../types/PreviewConfig';
+import { LocalicationModal, Modal, ScreenColorsModal } from '../modals';
+import { JsonTextEditor } from './JsonTextEditor';
+import type { Node } from '../types/Node';
+import { analyseAndProccess } from '../utils/analyseNode';
+
+type BottomBarProps = {
+  className?: string;
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+};
+
+/**
+ * Bottom tool bar (Figma-like).
+ */
+export function BottomBar({ className, data, setData }: BottomBarProps) {
+  const rtlIcon: IconsType = 'translate';
+  const magicCursorIcon: IconsType = 'magicpen';
+  const debugIcon: IconsType = 'speedometer-03';
+  const localizationIcon: IconsType = 'globe-01';
+  const colorIcon: IconsType = 'colors';
+
+  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
+    useRenderStore(s => ({
+      appConfig: s.appConfig,
+      setAppConfig: s.setAppConfig,
+      previewMode: s.previewMode,
+      setPreviewMode: s.setPreviewMode,
+    }));
+
+  const [isDebugOpen, setIsDebugOpen] = useState(false);
+  const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
+  const [isColorsOpen, setIsColorsOpen] = useState(false);
+
+  const languages = useMemo(() => ['en', 'tr', 'ar'], []);
+  const activeLanguage = appConfig.defaultLanguage ?? 'en';
+
+  const handleLocalicationChange = (next: Localication) => {
+    setAppConfig({ ...appConfig, localication: next });
+  };
+
+  const themeIsActive = appConfig.theme === 'dark';
+  const rtlIsActive = appConfig.isRtl ?? false;
+  const previewIsActive = previewMode;
+  const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
+
+  return (
+    <>
+      <div className={['rb-bottom-bar', className].filter(Boolean).join(' ')}>
+        <button
+          type='button'
+          className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
+          aria-label='Theme'
+          aria-pressed={themeIsActive}
+          onClick={() =>
+            setAppConfig({
+              ...appConfig,
+              theme: appConfig.theme === 'dark' ? 'light' : 'dark',
+            })
+          }
+        >
+          <Icon iconType={themeIcon} size={20} color='currentColor' alt='' />
+        </button>
+
+        <button
+          type='button'
+          className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
+            rtlIsActive ? ' is-active' : ''
+          }`}
+          aria-label='RTL'
+          aria-pressed={rtlIsActive}
+          onClick={() =>
+            setAppConfig({ ...appConfig, isRtl: !(appConfig.isRtl ?? false) })
+          }
+        >
+          <Icon iconType={rtlIcon} size={18} color='currentColor' alt='' />
+          <span className='rb-bottom-bar__rtl-text'>RTL</span>
+        </button>
+
+        <button
+          type='button'
+          className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
+            previewIsActive ? ' is-active' : ''
+          }`}
+          aria-label='Magic cursor tool'
+          aria-pressed={previewIsActive}
+          onClick={() => setPreviewMode(!previewMode)}
+        >
+          <Icon
+            iconType={magicCursorIcon}
+            size={20}
+            color='currentColor'
+            alt=''
+          />
+        </button>
+
+        <button
+          type='button'
+          className={`rb-bottom-bar__button${isDebugOpen ? ' is-active' : ''}`}
+          aria-label='Debug'
+          aria-pressed={isDebugOpen}
+          onClick={() => setIsDebugOpen(true)}
+        >
+          <Icon iconType={debugIcon} size={20} color='currentColor' alt='' />
+        </button>
+
+        <button
+          type='button'
+          className={`rb-bottom-bar__button${
+            isLocalizationOpen ? ' is-active' : ''
+          }`}
+          aria-label='Localization'
+          aria-pressed={isLocalizationOpen}
+          onClick={() => setIsLocalizationOpen(true)}
+        >
+          <Icon
+            iconType={localizationIcon}
+            size={20}
+            color='currentColor'
+            alt=''
+          />
+        </button>
+
+        <button
+          type='button'
+          className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
+          aria-label='Color'
+          aria-pressed={isColorsOpen}
+          onClick={() => setIsColorsOpen(true)}
+        >
+          <Icon iconType={colorIcon} size={20} color='currentColor' alt='' />
+        </button>
+
+        <div className='rb-bottom-bar__spacer' />
+
+        <div className='rb-bottom-bar__langs' aria-label='Language'>
+          {languages.map(language => (
+            <button
+              key={language}
+              type='button'
+              className={`rb-bottom-bar__lang${
+                activeLanguage === language ? ' is-active' : ''
+              }`}
+              onClick={() =>
+                setAppConfig({ ...appConfig, defaultLanguage: language })
+              }
+            >
+              {language}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {isLocalizationOpen && (
+        <LocalicationModal
+          data={appConfig.localication ?? {}}
+          onChange={handleLocalicationChange}
+          onClose={() => setIsLocalizationOpen(false)}
+        />
+      )}
+
+      {isColorsOpen && (
+        <ScreenColorsModal
+          appConfig={appConfig}
+          onChange={setAppConfig}
+          onClose={() => setIsColorsOpen(false)}
+        />
+      )}
+
+      {isDebugOpen && (
+        <Modal
+          onClose={() => setIsDebugOpen(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 JSON
+              </h3>
+              <p className='localication-modal__description'>
+                Inspect and edit raw node JSON.
+              </p>
+            </div>
+            <button
+              type='button'
+              className='editor-button'
+              onClick={() => setIsDebugOpen(false)}
+            >
+              Close
+            </button>
+          </div>
+          <div className='localication-modal__body'>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              <Checkbox
+                label='Preview mode'
+                checked={previewMode}
+                onChange={setPreviewMode}
+              />
+              <Checkbox
+                label='Dark Mode'
+                checked={appConfig.theme === 'dark'}
+                onChange={checked =>
+                  setAppConfig({
+                    ...appConfig,
+                    theme: checked ? 'dark' : 'light',
+                  })
+                }
+              />
+              <Checkbox
+                label='Is RTL'
+                checked={appConfig.isRtl ?? false}
+                onChange={checked =>
+                  setAppConfig({ ...appConfig, isRtl: checked })
+                }
+              />
+            </div>
+            <div
+              className='localication-modal__editor'
+              style={{ marginTop: 12 }}
+            >
+              <JsonTextEditor
+                rootName='node'
+                value={data ?? {}}
+                onChange={next =>
+                  setData(analyseAndProccess(next as Node) as Node)
+                }
+                className='localication-modal__json-editor'
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}

package/src/components/LoadingComponent.tsx

@@ -0,0 +1,10 @@
+import Lottie from 'lottie-react';
+import loadingAnimation from '../assets/loading_animation.json';
+
+export function LoadingComponent() {
+  return (
+    <div className="rb-loading">
+      <Lottie animationData={loadingAnimation as any} loop autoplay />
+    </div>
+  );
+}

package/src/index.ts

@@ -28,7 +28,8 @@ export { getOnboardSamples } from './assets/samples/getSamples';
 export { RenderPage } from './RenderPage';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
-export type { Localication } from './types/PreviewConfig';
+export type { AppConfig, Localication } from './types/PreviewConfig';
+export { defaultAppConfig } from './types/PreviewConfig';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
 export type { Device } from './types/Device';
 export { AttributesEditor };