@developer_tribe/react-builder 1.0.6 → 1.0.7

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

@@ -106,8 +106,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -522,8 +522,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -912,8 +912,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -1288,8 +1288,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -1640,8 +1640,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -2012,8 +2012,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -2369,8 +2369,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -2719,8 +2719,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -3071,8 +3071,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -3434,8 +3434,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -3802,8 +3802,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -4165,8 +4165,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -4571,8 +4571,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -4974,8 +4974,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -5378,8 +5378,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -5816,8 +5816,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -6191,8 +6191,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -6553,8 +6553,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -6924,8 +6924,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -7325,8 +7325,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -7708,8 +7708,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -8107,8 +8107,8 @@ export const patterns = [
           sort: 4,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -8498,8 +8498,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -8855,8 +8855,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -9222,8 +9222,8 @@ export const patterns = [
           sort: 3,
         },
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -9614,8 +9614,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -10001,8 +10001,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,
@@ -10380,8 +10380,8 @@ export const patterns = [
       },
       attributes: {
         scrollable: {
-          label: 'Scrollable (!!)',
-          description: 'THIS FEATURE MIGHT NOT WORK IN MOBILE!',
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
           category: 'container',
           specialCategory: null,
           sort: -1,

package/src/components/AttributesEditorPanel.tsx

@@ -5,8 +5,8 @@ import { useLogRender } from '../utils/useLogRender';
 import { useRenderStore } from '../store';
 
 interface AttributesEditorPanelProps {
-  attributes?: any;
-  onChange?: (data: Node) => void;
+  attributes: any;
+  onChange: (data: Node) => void;
   projectColors?: ProjectColors;
 }
 
@@ -16,14 +16,10 @@ export function AttributesEditorPanel({
   projectColors,
 }: AttributesEditorPanelProps) {
   useLogRender('AttributesEditorPanel');
-  const { current, setCurrent, editorData, setEditorData } = useRenderStore(
-    (s) => ({
-      current: s.current,
-      setCurrent: s.setCurrent,
-      editorData: s.editorData,
-      setEditorData: s.setEditorData,
-    }),
-  );
+  const { current, setCurrent } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+  }));
   if (!current) return null;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -53,9 +49,9 @@ export function AttributesEditorPanel({
     return root;
   }
   const handleAttributesChange = (next: Node) => {
-    const root = (attributes ?? editorData) as Node;
+    const root = attributes as Node;
     const updated = replaceNode(root, current, next);
-    (onChange ?? setEditorData)(updated);
+    onChange(updated);
     setCurrent(next);
   };
 

package/src/components/BottomBar.tsx

@@ -11,33 +11,27 @@ import { analyseAndProccess } from '../utils/analyseNode';
 
 type BottomBarProps = {
   className?: string;
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
 };
 
 /**
- * Empty placeholder bottom bar (Figma-like). We'll complete later.
+ * Bottom tool bar (Figma-like).
  */
-export function BottomBar({ className }: BottomBarProps) {
+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,
-    editorData,
-    setEditorData,
-  } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
-    previewMode: s.previewMode,
-    setPreviewMode: s.setPreviewMode,
-    editorData: s.editorData,
-    setEditorData: s.setEditorData,
-  }));
+  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);
@@ -46,8 +40,8 @@ export function BottomBar({ className }: BottomBarProps) {
   const languages = useMemo(() => ['en', 'tr', 'ar'], []);
   const activeLanguage = appConfig.defaultLanguage ?? 'en';
 
-  const handleLocalicationChange = (data: Localication) => {
-    setAppConfig({ ...appConfig, localication: data });
+  const handleLocalicationChange = (next: Localication) => {
+    setAppConfig({ ...appConfig, localication: next });
   };
 
   const themeIsActive = appConfig.theme === 'dark';
@@ -59,9 +53,9 @@ export function BottomBar({ className }: BottomBarProps) {
     <>
       <div className={['rb-bottom-bar', className].filter(Boolean).join(' ')}>
         <button
-          type="button"
+          type='button'
           className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
-          aria-label="Theme"
+          aria-label='Theme'
           aria-pressed={themeIsActive}
           onClick={() =>
             setAppConfig({
@@ -70,76 +64,88 @@ export function BottomBar({ className }: BottomBarProps) {
             })
           }
         >
-          <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
+          <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"
+          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>
+          <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"
+          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=""
+            color='currentColor'
+            alt=''
           />
         </button>
 
         <button
-          type="button"
+          type='button'
           className={`rb-bottom-bar__button${isDebugOpen ? ' is-active' : ''}`}
-          aria-label="Debug"
+          aria-label='Debug'
           aria-pressed={isDebugOpen}
           onClick={() => setIsDebugOpen(true)}
         >
-          <Icon iconType={debugIcon} size={20} color="currentColor" alt="" />
+          <Icon iconType={debugIcon} size={20} color='currentColor' alt='' />
         </button>
+
         <button
-          type="button"
-          className={`rb-bottom-bar__button${isLocalizationOpen ? ' is-active' : ''}`}
-          aria-label="Localization"
+          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=""
+            color='currentColor'
+            alt=''
           />
         </button>
+
         <button
-          type="button"
+          type='button'
           className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
-          aria-label="Color"
+          aria-label='Color'
           aria-pressed={isColorsOpen}
           onClick={() => setIsColorsOpen(true)}
         >
-          <Icon iconType={colorIcon} size={20} color="currentColor" alt="" />
+          <Icon iconType={colorIcon} size={20} color='currentColor' alt='' />
         </button>
 
-        <div className="rb-bottom-bar__spacer" />
+        <div className='rb-bottom-bar__spacer' />
 
-        <div className="rb-bottom-bar__langs" aria-label="Language">
-          {languages.map((language) => (
+        <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' : ''}`}
+              type='button'
+              className={`rb-bottom-bar__lang${
+                activeLanguage === language ? ' is-active' : ''
+              }`}
               onClick={() =>
                 setAppConfig({ ...appConfig, defaultLanguage: language })
               }
@@ -169,38 +175,38 @@ export function BottomBar({ className }: BottomBarProps) {
       {isDebugOpen && (
         <Modal
           onClose={() => setIsDebugOpen(false)}
-          ariaLabelledBy="debug-json-editor-title"
-          className="modal--large modal--scrollable"
-          contentClassName="localication-modal__content"
+          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">
+          <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">
+              <p className='localication-modal__description'>
                 Inspect and edit raw node JSON.
               </p>
             </div>
             <button
-              type="button"
-              className="editor-button"
+              type='button'
+              className='editor-button'
               onClick={() => setIsDebugOpen(false)}
             >
               Close
             </button>
           </div>
-          <div className="localication-modal__body">
+          <div className='localication-modal__body'>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
               <Checkbox
-                label="Preview mode"
+                label='Preview mode'
                 checked={previewMode}
                 onChange={setPreviewMode}
               />
               <Checkbox
-                label="Dark Mode"
+                label='Dark Mode'
                 checked={appConfig.theme === 'dark'}
-                onChange={(checked) =>
+                onChange={checked =>
                   setAppConfig({
                     ...appConfig,
                     theme: checked ? 'dark' : 'light',
@@ -208,24 +214,24 @@ export function BottomBar({ className }: BottomBarProps) {
                 }
               />
               <Checkbox
-                label="Is RTL"
+                label='Is RTL'
                 checked={appConfig.isRtl ?? false}
-                onChange={(checked) =>
+                onChange={checked =>
                   setAppConfig({ ...appConfig, isRtl: checked })
                 }
               />
             </div>
             <div
-              className="localication-modal__editor"
+              className='localication-modal__editor'
               style={{ marginTop: 12 }}
             >
               <JsonTextEditor
-                rootName="node"
-                value={editorData ?? {}}
-                onChange={(next) =>
-                  setEditorData(analyseAndProccess(next as Node) as Node)
+                rootName='node'
+                value={data ?? {}}
+                onChange={next =>
+                  setData(analyseAndProccess(next as Node) as Node)
                 }
-                className="localication-modal__json-editor"
+                className='localication-modal__json-editor'
               />
             </div>
           </div>

package/src/components/EditorHeader.tsx

@@ -27,9 +27,6 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const storeCurrent = useRenderStore((s) => s.current);
-  const storeEditorData = useRenderStore((s) => s.editorData);
-  const storeSetEditorData = useRenderStore((s) => s.setEditorData);
   const {
     device: selectedDevice,
     setDevice,
@@ -39,9 +36,6 @@ export function EditorHeader({
     setDevice: s.setDevice,
     setCurrent: s.setCurrent,
   }));
-  const effectiveCurrent = current ?? storeCurrent;
-  const effectiveEditorData = editorData ?? storeEditorData;
-  const effectiveSetEditorData = setEditorData ?? storeSetEditorData;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
@@ -70,18 +64,17 @@ export function EditorHeader({
     return root;
   }
   const handleCopy = () => {
-    if (effectiveCurrent) copyNode(effectiveCurrent);
+    if (current) copyNode(current);
   };
   const handlePaste = () => {
-    if (!effectiveCurrent || !effectiveEditorData || !effectiveSetEditorData)
-      return;
+    if (!current || !editorData || !setEditorData) return;
     if (!copiedNode) return;
     const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
-    const updated = replaceNode(effectiveEditorData, effectiveCurrent, cloned);
+    const updated = replaceNode(editorData, current, cloned);
     useRenderStore.setState({
       copiedNode: null,
     });
-    effectiveSetEditorData(updated);
+    setEditorData(updated);
     //TODO: current and editor must be sync!! and tested more
     // Important: selection is stored by reference. After replacing `current` in the tree,
     // we must point selection to the new (cloned) node reference to keep "current node"

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