@developer_tribe/react-builder 1.2.44-test.2 → 1.2.45

package/src/components/AttributesEditorPanel.tsx

@@ -88,7 +88,6 @@ export function AttributesEditorPanel({
         node={nodeForEditor}
         onChange={handleAttributesChange}
         projectColors={projectColors}
-        projectRoot={attributes}
       />
     </div>
   );

package/src/components/DeviceButton.tsx

@@ -13,6 +13,7 @@ type DeviceButtonProps = {
   onSelect: (device: Device) => void;
   isFavorite?: boolean;
   onToggleFavorite?: (device: Device, e: React.MouseEvent) => void;
+  onEdit?: (device: Device, e: React.MouseEvent) => void;
 };
 
 export function DeviceButton({
@@ -21,6 +22,7 @@ export function DeviceButton({
   onSelect,
   isFavorite,
   onToggleFavorite,
+  onEdit,
 }: DeviceButtonProps) {
   const platformIcon = platformIcons[device.platform];
   const aspect =
@@ -74,10 +76,41 @@ export function DeviceButton({
       {device.name} <br />
       {device.width}×{device.height} ({aspect})
       {platformIcon && (
-        <span>
+        <span className="editor-device-button__platform">
           <img src={platformIcon} alt="" aria-hidden="true" />
         </span>
       )}
+      {onEdit && (
+        <span
+          className="editor-device-button__edit"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit(device, e);
+          }}
+          title="Edit device"
+          style={{
+            position: 'absolute',
+            bottom: 4,
+            left: 4,
+            cursor: 'pointer',
+            opacity: 0.5,
+          }}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+          </svg>
+        </span>
+      )}
     </button>
   );
 }

package/src/components/EditorHeader.tsx

@@ -11,6 +11,7 @@ import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
 import { toast } from 'react-toastify';
 import { getSamples } from '../assets/samples/getSamples';
 import type { Project } from '../types/Project';
+import { useCustomDeviceStore } from '../store/customDeviceStore';
 
 const devices = getDevices();
 interface EditorHeaderProps {
@@ -53,14 +54,31 @@ export function EditorHeader({
     toggleFavoriteDevice: s.toggleFavoriteDevice,
   }));
 
+  const { customDevices } = useCustomDeviceStore();
   const headerDevices = useMemo(() => {
+    // 1. Get all potential devices
+    const allAvailable = [...customDevices, ...devices];
+
+    // 2. Filter favorites
     const favs = favoriteDevices
-      .map((name) => devices.find((d) => d.name === name))
+      .map((name) => allAvailable.find((d) => d.name === name))
       .filter((d): d is Device => d !== undefined);
 
-    const others = devices.filter((d) => !favoriteDevices.includes(d.name));
-    return [...favs, ...others].slice(0, 5);
-  }, [favoriteDevices]);
+    // 3. Get others (custom first, then default)
+    const others = allAvailable.filter(
+      (d) => !favoriteDevices.includes(d.name),
+    );
+
+    // Combine and limit to 5
+    const top5 = [...favs, ...others].slice(0, 5);
+
+    // If selected device is not in the top 5, append it at the end
+    if (selectedDevice && !top5.some((d) => d.name === selectedDevice.name)) {
+      return [...top5, selectedDevice];
+    }
+
+    return top5;
+  }, [favoriteDevices, customDevices, selectedDevice]);
 
   const sortedSamples = useMemo(() => {
     const weight = (t?: Project['type']) => {

package/src/modals/CreateDeviceModal.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import Modal from './Modal';
+import { Device } from '../types/Device';
+import { useCustomDeviceStore } from '../store/customDeviceStore';
+
+type CreateDeviceModalProps = {
+  onClose: () => void;
+  onSuccess: (device: Device) => void;
+  deviceToEdit?: Device;
+};
+
+type FormData = {
+  name: string;
+  platform: 'ios' | 'android';
+  width: number;
+  height: number;
+  type: 'phone' | 'tablet';
+  radius: number;
+  insetTop: number;
+  insetRight: number;
+  insetBottom: number;
+  insetLeft: number;
+  navigationBarType: Device['navigationBarType'];
+  importance: number;
+  multiplier: number;
+};
+
+export function CreateDeviceModal({
+  onClose,
+  onSuccess,
+  deviceToEdit,
+}: CreateDeviceModalProps) {
+  const { addCustomDevice, updateCustomDevice } = useCustomDeviceStore();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: deviceToEdit
+      ? {
+          name: deviceToEdit.name,
+          platform: deviceToEdit.platform as 'ios' | 'android',
+          type: deviceToEdit.type,
+          width: deviceToEdit.width,
+          height: deviceToEdit.height,
+          insetTop: deviceToEdit.insets?.[0] ?? 0,
+          insetRight: deviceToEdit.insets?.[1] ?? 0,
+          insetBottom: deviceToEdit.insets?.[2] ?? 0,
+          insetLeft: deviceToEdit.insets?.[3] ?? 0,
+          navigationBarType: deviceToEdit.navigationBarType,
+          radius: deviceToEdit.radius,
+          importance: deviceToEdit.importance,
+          multiplier: deviceToEdit.multiplier,
+        }
+      : {
+          platform: 'ios',
+          type: 'phone',
+          navigationBarType: 'homeIndicator',
+          width: 375,
+          height: 812,
+          insetTop: 44,
+          insetBottom: 34,
+          insetLeft: 0,
+          insetRight: 0,
+          radius: 40,
+          importance: 10,
+          multiplier: 1,
+        },
+  });
+
+  const platform = watch('platform');
+
+  const onSubmit = (data: FormData) => {
+    const newDevice: Device = {
+      name: data.name,
+      platform: data.platform,
+      width: Number(data.width),
+      height: Number(data.height),
+      type: data.type,
+      radius: Number(data.radius),
+      insets: [
+        Number(data.insetTop),
+        Number(data.insetRight),
+        Number(data.insetBottom),
+        Number(data.insetLeft),
+      ],
+      navigationBarType: data.navigationBarType,
+      aspect: (() => {
+        const r = Number(data.height) / Number(data.width);
+        if (r >= 2.05) return 'tall';
+        if (r <= 1.75) return 'wide';
+        return 'regular';
+      })(),
+      importance: Number(data.importance),
+      multiplier: Number(data.multiplier),
+    };
+
+    if (deviceToEdit) {
+      updateCustomDevice(deviceToEdit.name, newDevice);
+    } else {
+      addCustomDevice(newDevice);
+    }
+    onSuccess(newDevice);
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="create-device-title"
+      contentClassName="create-device-modal"
+    >
+      <div className="modal__header">
+        <h3 id="create-device-title" className="modal__title">
+          {deviceToEdit ? 'Edit Custom Device' : 'Create Custom Device'}
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Cancel
+        </button>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="modal__body create-device-form"
+      >
+        <div className="create-device-form__group">
+          <label className="create-device-form__label">Device Name</label>
+          <input
+            {...register('name', { required: 'Name is required' })}
+            className="editor-input"
+            placeholder="e.g. My Custom iPhone"
+          />
+          {errors.name && (
+            <span className="create-device-form__error">
+              {errors.name.message}
+            </span>
+          )}
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Platform</label>
+            <select {...register('platform')} className="editor-input">
+              <option value="ios">iOS</option>
+              <option value="android">Android</option>
+            </select>
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Type</label>
+            <select {...register('type')} className="editor-input">
+              <option value="phone">Phone</option>
+              <option value="tablet">Tablet</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Width (px)</label>
+            <input
+              type="number"
+              {...register('width', { required: true, min: 1 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Height (px)</label>
+            <input
+              type="number"
+              {...register('height', { required: true, min: 1 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Safe Area Top</label>
+            <input
+              type="number"
+              {...register('insetTop', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Safe Area Bottom
+            </label>
+            <input
+              type="number"
+              {...register('insetBottom', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Navigation Bar</label>
+            <select {...register('navigationBarType')} className="editor-input">
+              <option value="none">None</option>
+              {platform === 'ios' ? (
+                <>
+                  <option value="homeIndicator">Home Indicator</option>
+                  <option value="tabBar">Tab Bar</option>
+                </>
+              ) : (
+                <>
+                  <option value="threeButtons">Three Buttons</option>
+                  <option value="gesture">Gesture</option>
+                </>
+              )}
+            </select>
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Corner Radius</label>
+            <input
+              type="number"
+              {...register('radius', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Scale Multiplier
+            </label>
+            <input
+              type="number"
+              step="0.01"
+              {...register('multiplier', { min: 0.1, max: 2 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Importance (1-100)
+            </label>
+            <input
+              type="number"
+              {...register('importance', { min: 1, max: 100 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-modal__footer">
+          <button
+            type="submit"
+            className="editor-button editor-button--primary"
+            style={{ width: '100%' }}
+          >
+            {deviceToEdit ? 'Update Device' : 'Save Device'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+export default CreateDeviceModal;

package/src/modals/DeviceSelectorModal.tsx

@@ -3,6 +3,8 @@ import { Device } from '../types/Device';
 import Modal from './Modal';
 import { DeviceButton } from '../components/DeviceButton';
 import { useRenderStore } from '../store';
+import { useCustomDeviceStore } from '../store/customDeviceStore';
+import { CreateDeviceModal } from './CreateDeviceModal';
 
 type DeviceSelectorModalProps = {
   devices: Device[];
@@ -18,10 +20,17 @@ export function DeviceSelectorModal({
   onClose,
 }: DeviceSelectorModalProps) {
   const [searchTerm, setSearchTerm] = useState('');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [editingDevice, setEditingDevice] = useState<Device | null>(null);
   const { favoriteDevices, toggleFavoriteDevice } = useRenderStore((state) => ({
     favoriteDevices: state.favoriteDevices || [],
     toggleFavoriteDevice: state.toggleFavoriteDevice,
   }));
+  const { customDevices, removeCustomDevice } = useCustomDeviceStore();
+
+  const allDevices = useMemo(() => {
+    return [...customDevices, ...devices];
+  }, [customDevices, devices]);
 
   const handleDeviceSelect = (device: Device) => {
     onSelect(device);
@@ -29,10 +38,10 @@ export function DeviceSelectorModal({
   };
 
   const filteredDevices = useMemo(() => {
-    return devices.filter((device) =>
+    return allDevices.filter((device) =>
       device.name.toLowerCase().includes(searchTerm.toLowerCase()),
     );
-  }, [devices, searchTerm]);
+  }, [allDevices, searchTerm]);
 
   const { favorites, others } = useMemo(() => {
     const favs: Device[] = [];
@@ -66,18 +75,21 @@ export function DeviceSelectorModal({
           Close
         </button>
       </div>
-      <div
-        className="device-selector-modal__search"
-        style={{ padding: '0 16px', marginBottom: '8px' }}
-      >
+      <div className="device-selector-modal__search-container">
         <input
           type="text"
           placeholder="Search devices..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           className="editor-input"
-          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
         />
+        <button
+          type="button"
+          className="editor-button editor-button--primary"
+          onClick={() => setIsCreateModalOpen(true)}
+        >
+          Add New
+        </button>
       </div>
       <div
         className="device-selector-modal__body"
@@ -103,6 +115,7 @@ export function DeviceSelectorModal({
                   onSelect={handleDeviceSelect}
                   isFavorite={true}
                   onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+                  onEdit={(d) => setEditingDevice(d)}
                 />
               ))}
             </div>
@@ -129,11 +142,35 @@ export function DeviceSelectorModal({
                 onSelect={handleDeviceSelect}
                 isFavorite={false}
                 onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+                onEdit={
+                  customDevices.some((cd) => cd.name === device.name)
+                    ? (d) => setEditingDevice(d)
+                    : undefined
+                }
               />
             ))}
           </div>
         </section>
       </div>
+      {isCreateModalOpen && (
+        <CreateDeviceModal
+          onClose={() => setIsCreateModalOpen(false)}
+          onSuccess={(newDevice) => {
+            onSelect(newDevice);
+            onClose();
+          }}
+        />
+      )}
+      {editingDevice && (
+        <CreateDeviceModal
+          deviceToEdit={editingDevice}
+          onClose={() => setEditingDevice(null)}
+          onSuccess={(updatedDevice) => {
+            onSelect(updatedDevice);
+            onClose();
+          }}
+        />
+      )}
     </Modal>
   );
 }

package/src/product-base/extractIOSParams.ts

@@ -1,4 +1,7 @@
-import { convertIOSPeriodUnit } from './periodLocalizationKeys';
+import {
+  convertIOSPeriodUnit,
+  normalizeIOSPeriod,
+} from './periodLocalizationKeys';
 import { iapLogger } from '../logger';
 import {
   calculateDiscount,
@@ -60,10 +63,13 @@ export function extractIOSParams(
     const currency = product.currency || product.currencyCode || '';
     const localizedPrice = product.localizedPrice || '';
 
-    const periodUnit = convertIOSPeriodUnit(
-      product.subscriptionPeriodUnitIOS || 'MONTH',
+    // iOS bazen WEEK yerine DAY+7 döndürür — normalize et
+    const normalizedPeriod = normalizeIOSPeriod(
+      product.subscriptionPeriodUnitIOS,
+      product.subscriptionPeriodNumberIOS,
     );
-    const periodValue = String(product.subscriptionPeriodNumberIOS || 1);
+    const periodUnit = normalizedPeriod.unit;
+    const periodValue = String(normalizedPeriod.value);
     const periodType = `${periodValue} ${periodUnit}${parseInt(periodValue, 10) > 1 ? 's' : ''}`;
 
     const introPrice =

package/src/product-base/periodLocalizationKeys.ts

@@ -112,3 +112,49 @@ export function convertIOSPeriodUnit(
   const normalized = unitMap[iosUnit.toUpperCase()];
   return normalized || 'month';
 }
+
+/**
+ * iOS'un döndüğü ham period değerlerini semantik olarak normalize eder.
+ *
+ * iOS bazen "WEEK" yerine "DAY" + 7, "MONTH" yerine "DAY" + 30 döndürür.
+ * Bu fonksiyon bu ham değerleri doğru semantic period'a çevirir.
+ *
+ * @example normalizeIOSPeriod('DAY', 7)   → { unit: 'week',  value: 1 }
+ * @example normalizeIOSPeriod('DAY', 14)  → { unit: 'week',  value: 2 }
+ * @example normalizeIOSPeriod('DAY', 30)  → { unit: 'month', value: 1 }
+ * @example normalizeIOSPeriod('DAY', 365) → { unit: 'year',  value: 1 }
+ * @example normalizeIOSPeriod('MONTH', 1) → { unit: 'month', value: 1 }
+ */
+export function normalizeIOSPeriod(
+  iosUnit: string | undefined,
+  iosValue: number | undefined,
+): { unit: 'day' | 'week' | 'month' | 'year'; value: number } {
+  const rawUnit = convertIOSPeriodUnit(iosUnit);
+  const rawValue = iosValue || 1;
+
+  // DAY cinsinden gelen değerleri daha büyük birime çevir
+  if (rawUnit === 'day') {
+    if (rawValue % 365 === 0) {
+      return { unit: 'year', value: rawValue / 365 };
+    }
+    if (rawValue === 366) {
+      return { unit: 'year', value: 1 };
+    }
+    if (rawValue % 30 === 0) {
+      return { unit: 'month', value: rawValue / 30 };
+    }
+    if (rawValue === 31) {
+      return { unit: 'month', value: 1 };
+    }
+    if (rawValue % 7 === 0) {
+      return { unit: 'week', value: rawValue / 7 };
+    }
+  }
+
+  // MONTH cinsinden gelen değerleri yıla çevir
+  if (rawUnit === 'month' && rawValue % 12 === 0) {
+    return { unit: 'year', value: rawValue / 12 };
+  }
+
+  return { unit: rawUnit, value: rawValue };
+}

package/src/store/customDeviceStore.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { Device } from '../types/Device';
+
+interface CustomDeviceState {
+  customDevices: Device[];
+  addCustomDevice: (device: Device) => void;
+  removeCustomDevice: (name: string) => void;
+  updateCustomDevice: (name: string, updatedDevice: Device) => void;
+}
+
+export const useCustomDeviceStore = create<CustomDeviceState>()(
+  persist(
+    (set) => ({
+      customDevices: [],
+      addCustomDevice: (device) =>
+        set((state) => ({
+          customDevices: [
+            device,
+            ...state.customDevices.filter((d) => d.name !== device.name),
+          ],
+        })),
+      removeCustomDevice: (name) =>
+        set((state) => ({
+          customDevices: state.customDevices.filter((d) => d.name !== name),
+        })),
+      updateCustomDevice: (name, updatedDevice) =>
+        set((state) => ({
+          customDevices: state.customDevices.map((d) =>
+            d.name === name ? updatedDevice : d,
+          ),
+        })),
+    }),
+    {
+      name: 'custom-devices-storage',
+    },
+  ),
+);

package/src/styles/components/_editor-shell.scss

@@ -94,7 +94,7 @@
   }
 }
 
-.editor-device-button span {
+.editor-device-button__platform {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -106,7 +106,7 @@
   overflow: hidden;
 }
 
-.editor-device-button img {
+.editor-device-button__platform img {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -117,6 +117,16 @@
   height: auto;
 }
 
+.editor-device-button__edit {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  &:hover {
+    opacity: 1 !important;
+    transform: scale(1.1);
+  }
+}
+
 .editor-header__actions {
   margin-left: auto; /* push actions to the far right */
   display: flex;

package/src/styles/index.scss

@@ -16,7 +16,6 @@
 @use './components/mockos-router';
 @use './components/bottom-bar';
 @use './components/onboard';
-@use './components/global-provider';
 
 @use './components/webview';
 @use './components/checkbox';
@@ -33,5 +32,6 @@
 @use './modals/benefit-presets-modal';
 @use './modals/inspect-modal';
 @use './modals/prompt-manager-modal';
+@use './modals/create-device';
 
 @use './utilities/carousel';