@developer_tribe/react-builder 1.2.39 → 1.2.41

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

@@ -4507,364 +4507,14 @@ export const patterns = [
       description: 'description',
       children: 'never',
       attributes: {
-        scrollable: 'boolean',
-        styles: {
-          flexDirection: ['row', 'column'],
-          flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
-          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',
-          marginHorizontal: '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',
-        },
-        testID: 'string',
+        styles: { backgroundColor: 'color' },
+        translucent: 'boolean',
       },
     },
     meta: {
       desiredParent: ['all'],
       label: 'Navigation Bar Color',
       description: 'Sets the OS navigation bar background color.',
-      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,
-        },
-      },
-      attributes: {
-        scrollable: {
-          label: 'Scrollable',
-          description: 'Turns scroll interaction on.',
-          category: 'container',
-          specialCategory: null,
-          sort: -1,
-        },
-        styles: {
-          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,
-            preferredScale: 's',
-          },
-          flexDirection: {
-            label: 'Flex Direction',
-            description: 'Sets row or column layout.',
-            category: 'container',
-            specialCategory: null,
-            sort: 4,
-          },
-          flexWrap: {
-            label: 'Flex Wrap',
-            description: 'Controls whether flex items wrap to multiple lines.',
-            category: 'container',
-            specialCategory: null,
-            sort: 4.5,
-          },
-          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,
-            preferredScale: 's',
-          },
-          padding: {
-            label: 'Padding',
-            description: 'Uniform padding on all sides.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 6,
-            preferredScale: 's',
-          },
-          paddingHorizontal: {
-            label: 'Padding Horizontal',
-            description: 'Left and right padding.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 7,
-            preferredScale: 's',
-          },
-          paddingVertical: {
-            label: 'Padding Vertical',
-            description: 'Top and bottom padding.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 8,
-            preferredScale: 'vs',
-          },
-          paddingTop: {
-            label: 'Padding Top',
-            description: 'Top padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 9,
-            preferredScale: 'vs',
-          },
-          paddingBottom: {
-            label: 'Padding Bottom',
-            description: 'Bottom padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 10,
-            preferredScale: 'vs',
-          },
-          paddingLeft: {
-            label: 'Padding Left',
-            description: 'Left padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 11,
-            preferredScale: 's',
-          },
-          paddingRight: {
-            label: 'Padding Right',
-            description: 'Right padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 12,
-            preferredScale: 's',
-          },
-          margin: {
-            label: 'Margin',
-            description: 'Uniform margin on all sides.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 13,
-            preferredScale: 's',
-          },
-          marginHorizontal: {
-            label: 'Margin Horizontal',
-            description: 'Left and right margin.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 14,
-            preferredScale: 's',
-          },
-          marginVertical: {
-            label: 'Margin Vertical',
-            description: 'Top and bottom margin.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 15,
-            preferredScale: 'vs',
-          },
-          marginTop: {
-            label: 'Margin Top',
-            description: 'Top margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 16,
-            preferredScale: 'vs',
-          },
-          marginBottom: {
-            label: 'Margin Bottom',
-            description: 'Bottom margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 17,
-            preferredScale: 'vs',
-          },
-          marginLeft: {
-            label: 'Margin Left',
-            description: 'Left margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 18,
-            preferredScale: 's',
-          },
-          marginRight: {
-            label: 'Margin Right',
-            description: 'Right margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 19,
-            preferredScale: 's',
-          },
-          width: {
-            label: 'Width',
-            description: 'Fixed width value.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 0,
-            preferredScale: 's',
-          },
-          minWidth: {
-            label: 'Min Width',
-            description: 'Minimum width constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 1,
-            preferredScale: 's',
-          },
-          maxWidth: {
-            label: 'Max Width',
-            description: 'Maximum width constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 2,
-            preferredScale: 's',
-          },
-          height: {
-            label: 'Height',
-            description: 'Fixed height value.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 3,
-            preferredScale: 'vs',
-          },
-          minHeight: {
-            label: 'Min Height',
-            description: 'Minimum height constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 4,
-            preferredScale: 'vs',
-          },
-          maxHeight: {
-            label: 'Max Height',
-            description: 'Maximum height constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 5,
-            preferredScale: '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,
-            preferredScale: 'vs',
-          },
-          bottom: {
-            label: 'Bottom',
-            description: 'Offset from the bottom edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 23,
-            preferredScale: 'vs',
-          },
-          left: {
-            label: 'Left',
-            description: 'Offset from the left edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 24,
-            preferredScale: 's',
-          },
-          right: {
-            label: 'Right',
-            description: 'Offset from the right edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 25,
-            preferredScale: 's',
-          },
-          zIndex: {
-            label: 'Z-Index',
-            description: 'Controls stacking order.',
-            category: 'container',
-            specialCategory: null,
-            sort: 26,
-          },
-        },
-      },
       styles: {
         backgroundColor: {
           label: 'Background Color',
@@ -4874,19 +4524,17 @@ export const patterns = [
           sort: 1,
         },
       },
-    },
-    defaults: {
-      styles: {
-        flexDirection: 'column',
-        position: 'relative',
-        zIndex: 1,
-        alignSelf: 'flex-start',
-        flexGrow: 0,
-        flexShrink: 0,
-        backgroundColor: 'THEME_COLORS.BACKGROUND',
+      attributes: {
+        translucent: {
+          label: 'Translucent',
+          description: 'Sets the navigation bar to translucent.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
       },
     },
-    types: {},
+    defaults: { styles: { backgroundColor: 'THEME_COLORS.BACKGROUND' } },
   },
   {
     schemaVersion: 2,
@@ -10058,6 +9706,7 @@ export const patterns = [
         alignItems: 'center',
       },
       translateCounter: 1,
+      testID: 'paywall-close-button',
       size: 24,
     },
     types: {},
@@ -13096,7 +12745,10 @@ export const patterns = [
       title: 'title',
       description: 'description',
       children: 'never',
-      attributes: { styles: { backgroundColor: 'color' }, testID: 'string' },
+      attributes: {
+        styles: { backgroundColor: 'color' },
+        translucent: 'boolean',
+      },
     },
     meta: {
       desiredParent: ['all'],
@@ -13111,6 +12763,15 @@ export const patterns = [
           sort: 1,
         },
       },
+      attributes: {
+        translucent: {
+          label: 'Translucent',
+          description: 'Sets the status bar to translucent.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
+      },
     },
     defaults: { styles: { backgroundColor: 'THEME_COLORS.BACKGROUND' } },
   },

package/src/components/BottomBar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useRef } from 'react';
 import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons.generated';
 import { useRenderStore } from '../store';
@@ -29,7 +29,6 @@ export function BottomBar({
   setData,
   project,
 }: BottomBarProps) {
-  const rtlIcon: IconsType = 'translate';
   const magicCursorIcon: IconsType = 'magicpen';
   const debugIcon: IconsType = 'speedometer-03';
   const localizationIcon: IconsType = 'globe-01';
@@ -45,8 +44,8 @@ export function BottomBar({
     setDefaultLanguage,
     previewMode,
     setPreviewMode,
-    isRtl,
     setIsRtl,
+    languageColumns,
   } = useRenderStore((s) => ({
     localization: s.localization,
     setLocalization: s.setLocalization,
@@ -56,24 +55,55 @@ export function BottomBar({
     setDefaultLanguage: s.setDefaultLanguage,
     previewMode: s.previewMode,
     setPreviewMode: s.setPreviewMode,
-    isRtl: s.isRtl,
     setIsRtl: s.setIsRtl,
+    languageColumns: s.languageColumns,
   }));
 
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
   const [isInspectOpen, setIsInspectOpen] = useState(false);
   const [isPromptManagerOpen, setIsPromptManagerOpen] = useState(false);
+  const [langDropdownOpen, setLangDropdownOpen] = useState(false);
+  const langTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Use languageColumns from API, fallback to localization object keys
+  const availableLanguages = useMemo(() => {
+    if (languageColumns.length > 0) return languageColumns;
+    const locKeys = Object.keys(localization ?? {});
+    return locKeys.map((code) => ({
+      id: 0,
+      code: code.toUpperCase(),
+      title: code,
+      iso_code: code.toUpperCase(),
+      is_right_alignment: false,
+    }));
+  }, [languageColumns, localization]);
 
-  const languages = useMemo(() => ['en', 'tr', 'ar'], []);
   const activeLanguage = defaultLanguage;
 
+  const handleSelectLanguage = useCallback(
+    (lang: { code: string; is_right_alignment: boolean }) => {
+      const code = lang.code.toLowerCase();
+      setDefaultLanguage(code);
+      setIsRtl(lang.is_right_alignment);
+      setLangDropdownOpen(false);
+    },
+    [setDefaultLanguage, setIsRtl],
+  );
+
+  const handleLangMouseEnter = () => {
+    if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
+    setLangDropdownOpen(true);
+  };
+  const handleLangMouseLeave = () => {
+    langTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 200);
+  };
+
   const handleLocalicationChange = (next: Localication) => {
     setLocalization(next);
   };
 
   const themeIsActive = theme === 'dark';
-  const rtlIsActive = isRtl;
   const previewIsActive = previewMode;
   const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
 
@@ -90,19 +120,6 @@ export function BottomBar({
           <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={() => setIsRtl(!isRtl)}
-        >
-          <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${
@@ -171,19 +188,106 @@ export function BottomBar({
 
         <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={() => setDefaultLanguage(language)}
+        {/* Language selector with hover-up dropdown */}
+        <div
+          className="rb-bottom-bar__lang-selector"
+          onMouseEnter={handleLangMouseEnter}
+          onMouseLeave={handleLangMouseLeave}
+          style={{ position: 'relative' }}
+        >
+          <button
+            type="button"
+            className="rb-bottom-bar__lang is-active"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+            }}
+          >
+            {activeLanguage.toUpperCase()}
+            <span style={{ fontSize: 8, opacity: 0.6 }}>▲</span>
+          </button>
+
+          {langDropdownOpen && availableLanguages.length > 0 && (
+            <div
+              className="rb-bottom-bar__lang-dropdown"
+              style={{
+                position: 'absolute',
+                bottom: '100%',
+                right: 0,
+                marginBottom: 4,
+                background: 'var(--rb-bg-secondary, #2a2a2a)',
+                border: '1px solid var(--rb-border, #444)',
+                borderRadius: 6,
+                padding: '4px 0',
+                minWidth: 150,
+                maxHeight: 260,
+                overflowY: 'auto',
+                boxShadow: '0 -4px 16px rgba(0,0,0,0.3)',
+                zIndex: 100,
+              }}
             >
-              {language}
-            </button>
-          ))}
+              {availableLanguages.map((lang) => {
+                const isActive =
+                  lang.code.toLowerCase() === activeLanguage.toLowerCase();
+                return (
+                  <button
+                    key={lang.code}
+                    type="button"
+                    onClick={() => handleSelectLanguage(lang)}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 6,
+                      width: '100%',
+                      padding: '5px 10px',
+                      border: 'none',
+                      background: isActive
+                        ? 'var(--rb-accent, #6366f1)'
+                        : 'transparent',
+                      color: isActive
+                        ? '#fff'
+                        : 'var(--rb-text-primary, #e0e0e0)',
+                      cursor: 'pointer',
+                      fontSize: 12,
+                      textAlign: 'left',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background =
+                          'var(--rb-bg-hover, #333)';
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontWeight: 600,
+                        width: 24,
+                        flexShrink: 0,
+                      }}
+                    >
+                      {lang.code}
+                    </span>
+                    <span style={{ opacity: 0.7, flex: 1 }}>{lang.title}</span>
+                    {lang.is_right_alignment && (
+                      <span
+                        style={{
+                          fontSize: 9,
+                          opacity: 0.5,
+                          flexShrink: 0,
+                        }}
+                      >
+                        RTL
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
 

package/src/components/BuilderProvider.tsx

@@ -44,6 +44,7 @@ export type BuilderProviderParams = {
   fonts?: Fonts;
   previewMode?: boolean;
   selectedKey?: string;
+  device?: import('../types/Device').Device;
 };
 
 type BuilderProviderProps = {