@developer_tribe/react-builder 1.0.6 → 1.0.8

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';
@@ -72,9 +66,12 @@ export function BottomBar({ className }: BottomBarProps) {
         >
           <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' : ''}`}
+          className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
+            rtlIsActive ? ' is-active' : ''
+          }`}
           aria-label="RTL"
           aria-pressed={rtlIsActive}
           onClick={() =>
@@ -84,9 +81,12 @@ export function BottomBar({ className }: BottomBarProps) {
           <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' : ''}`}
+          className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
+            previewIsActive ? ' is-active' : ''
+          }`}
           aria-label="Magic cursor tool"
           aria-pressed={previewIsActive}
           onClick={() => setPreviewMode(!previewMode)}
@@ -108,9 +108,12 @@ export function BottomBar({ className }: BottomBarProps) {
         >
           <Icon iconType={debugIcon} size={20} color="currentColor" alt="" />
         </button>
+
         <button
           type="button"
-          className={`rb-bottom-bar__button${isLocalizationOpen ? ' is-active' : ''}`}
+          className={`rb-bottom-bar__button${
+            isLocalizationOpen ? ' is-active' : ''
+          }`}
           aria-label="Localization"
           aria-pressed={isLocalizationOpen}
           onClick={() => setIsLocalizationOpen(true)}
@@ -122,6 +125,7 @@ export function BottomBar({ className }: BottomBarProps) {
             alt=""
           />
         </button>
+
         <button
           type="button"
           className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
@@ -139,7 +143,9 @@ export function BottomBar({ className }: BottomBarProps) {
             <button
               key={language}
               type="button"
-              className={`rb-bottom-bar__lang${activeLanguage === language ? ' is-active' : ''}`}
+              className={`rb-bottom-bar__lang${
+                activeLanguage === language ? ' is-active' : ''
+              }`}
               onClick={() =>
                 setAppConfig({ ...appConfig, defaultLanguage: language })
               }
@@ -221,9 +227,9 @@ export function BottomBar({ className }: BottomBarProps) {
             >
               <JsonTextEditor
                 rootName="node"
-                value={editorData ?? {}}
+                value={data ?? {}}
                 onChange={(next) =>
-                  setEditorData(analyseAndProccess(next as Node) as Node)
+                  setData(analyseAndProccess(next as Node) as Node)
                 }
                 className="localication-modal__json-editor"
               />

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