@developer_tribe/react-builder 1.2.44 → 1.2.45

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

@@ -32,5 +32,6 @@
 @use './modals/benefit-presets-modal';
 @use './modals/inspect-modal';
 @use './modals/prompt-manager-modal';
+@use './modals/create-device';
 
 @use './utilities/carousel';

package/src/styles/modals/_create-device.scss

@@ -0,0 +1,113 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as typography;
+
+.create-device-modal {
+  width: 100%;
+  max-width: 480px;
+
+  .modal__body {
+    padding: sizes.$spaceComfy;
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceCozy;
+  }
+}
+
+.create-device-form {
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceTight;
+  }
+
+  &__row {
+    display: flex;
+    gap: sizes.$spaceCozy;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  &__label {
+    font-size: sizes.$fontSizeSm;
+    font-weight: 600;
+    color: colors.$mutedTextColor;
+    text-transform: uppercase;
+    letter-spacing: sizes.$letterSpacingTight;
+  }
+
+  &__error {
+    color: colors.$dangerColor;
+    font-size: sizes.$fontSizeXs;
+    margin-top: 2px;
+  }
+
+  &__footer {
+    margin-top: sizes.$spaceCozy;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// Global-ish classes but styled for this context if not already defined
+.editor-input {
+  height: sizes.$controlHeightMd;
+  padding: 0 sizes.$spaceInset;
+  border-radius: sizes.$radiusMid;
+  border: 1px solid colors.$borderColor;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  font-family: inherit;
+  font-size: sizes.$fontSizeBase;
+  width: 100%;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: colors.$accentColor;
+    box-shadow: 0 0 0 3px hsl(var(--rb-primary) / 0.15);
+  }
+
+  &::placeholder {
+    color: colors.$mutedTextColor;
+    opacity: 0.5;
+  }
+}
+
+select.editor-input {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right sizes.$spaceInset center;
+  padding-right: sizes.$spaceRoomy;
+}
+
+.editor-button--primary {
+  background: colors.$textColor;
+  color: colors.$surfaceColor;
+  font-weight: 600;
+  border-color: colors.$textColor;
+
+  &:hover {
+    background: colors.$accentColor;
+    border-color: colors.$accentColor;
+  }
+}
+
+.device-selector-modal__search-container {
+  padding: 0 sizes.$spaceComfy;
+  margin-top: sizes.$spaceComfy;
+  margin-bottom: sizes.$spaceCompact;
+  display: flex;
+  gap: sizes.$spaceCozy;
+  align-items: center;
+
+  .editor-input {
+    flex: 1;
+  }
+}

package/src/utils/__special_exceptions.ts

@@ -79,6 +79,14 @@ export function normalizeNodeForValidation(
     ? normalizeUnknownValue(attributes)
     : attributes;
 
+  if (
+    isPlainObject(attributes) &&
+    Array.isArray(attributes.styles) &&
+    attributes.styles.length === 0
+  ) {
+    attributes.styles = {};
+  }
+
   const children =
     recordData.children !== undefined
       ? (normalizeNodeForValidation(

package/src/utils/analyseNodeByPatterns.ts

@@ -14,6 +14,7 @@ import {
   isNodeNullOrUndefined,
   isNodeString,
 } from './nodeGuards';
+import { logger } from './logger';
 
 export type AnalyseResultWithPath = {
   valid: boolean;
@@ -407,7 +408,13 @@ function validateAttributesByPattern(
   // Validate nested `attributes.styles` (canonical store for AttributesEditor).
   if (maybeStyles != null) {
     if (!isPlainObject(maybeStyles)) {
-      return fail(`styles must be an object`, joinPath(path, 'styles'));
+      const msg = `styles must be an object`;
+      logger.error('analyseNodeByPatterns', msg, {
+        path: joinPath(path, 'styles'),
+        actualValue: maybeStyles,
+        actualType: Array.isArray(maybeStyles) ? 'array' : typeof maybeStyles,
+      });
+      return fail(msg, joinPath(path, 'styles'));
     }
     const stylesRecord = maybeStyles as Record<string, unknown>;
     for (const [styleKey, styleValue] of Object.entries(stylesRecord)) {