@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/pages/tabs/SideTool.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+import { JsonTextEditor } from '../../components/JsonTextEditor';
+import { Modal } from '../../modals';
+import type { Node } from '../../types/Node';
+import type { Localication } from '../../types/PreviewConfig';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+import { Checkbox } from '../../components/Checkbox';
+import { LocalicationModal } from '../../modals/LocalicationModal';
+import { analyseAndProccess } from '../../utils/analyseNode';
+
+const screenStyleDefaults = {
+  light: { backgroundColor: '#FDFDFD', color: '#161827' },
+  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
+} as const;
+
+type ScreenMode = keyof typeof screenStyleDefaults;
+type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
+
+type SideToolProps = {
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+};
+
+const colorFields = [
+  {
+    id: 'light-bg',
+    label: 'Light Background Color',
+    mode: 'light' as ScreenMode,
+    key: 'backgroundColor' as ScreenColorKey,
+  },
+  {
+    id: 'light-color',
+    label: 'Light Color',
+    mode: 'light' as ScreenMode,
+    key: 'color' as ScreenColorKey,
+  },
+  {
+    id: 'dark-bg',
+    label: 'Dark Background Color',
+    mode: 'dark' as ScreenMode,
+    key: 'backgroundColor' as ScreenColorKey,
+  },
+  {
+    id: 'dark-color',
+    label: 'Dark Color',
+    mode: 'dark' as ScreenMode,
+    key: 'color' as ScreenColorKey,
+  },
+];
+
+export function SideTool({ data, setData }: SideToolProps) {
+  useLogRender('SideTool');
+  const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
+  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
+  const [isCompactMode, setIsCompactMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return window.innerWidth < 1000;
+  });
+  const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
+  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
+    useRenderStore((s) => ({
+      appConfig: s.appConfig,
+      setAppConfig: s.setAppConfig,
+      previewMode: s.previewMode,
+      setPreviewMode: s.setPreviewMode,
+    }));
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const handleResize = () => {
+      const compact = window.innerWidth < 1000;
+      setIsCompactMode(compact);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
+
+  const handleScreenStyleChange = (
+    mode: ScreenMode,
+    key: ScreenColorKey,
+    value: string,
+  ) => {
+    setAppConfig({
+      ...appConfig,
+      screenStyle: {
+        ...screenStyleDefaults,
+        ...appConfig.screenStyle,
+        [mode]: {
+          ...screenStyleDefaults[mode],
+          ...appConfig.screenStyle?.[mode],
+          [key]: value,
+        },
+      },
+    });
+  };
+
+  const handleLocalicationChange = (data: Localication) => {
+    setAppConfig({ ...appConfig, localication: data });
+  };
+
+  return (
+    <div className="side-tool-container">
+      <button
+        type="button"
+        className="editor-button"
+        onClick={() => setIsCompactPanelVisible((prev) => !prev)}
+        aria-pressed={isCompactPanelVisible}
+      >
+        {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
+      </button>
+
+      {isCompactPanelVisible && (
+        <div className="side-tool">
+          <select
+            value={appConfig.defaultLanguage ?? 'en'}
+            onChange={(e) =>
+              setAppConfig({ ...appConfig, defaultLanguage: e.target.value })
+            }
+          >
+            {Object.keys(appConfig.localication ?? {}).map((language) => (
+              <option key={language} value={language}>
+                {language}
+              </option>
+            ))}
+          </select>
+
+          <Checkbox
+            label="Dark Mode"
+            checked={appConfig.theme === 'dark'}
+            onChange={(checked) =>
+              setAppConfig({ ...appConfig, theme: checked ? 'dark' : 'light' })
+            }
+          />
+
+          <Checkbox
+            label="Is RTL"
+            checked={appConfig.isRtl ?? false}
+            onChange={(checked) =>
+              setAppConfig({ ...appConfig, isRtl: checked })
+            }
+          />
+
+          <Checkbox
+            label="Preview mode"
+            checked={previewMode}
+            onChange={setPreviewMode}
+          />
+
+          <div>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                gap: 12,
+              }}
+            >
+              {colorFields.map(({ id, label, mode, key }) => (
+                <React.Fragment key={id}>
+                  <div>{label}</div>
+                  <input
+                    id={id}
+                    type="color"
+                    className="input input--color"
+                    value={getScreenColorValue(mode, key)}
+                    onChange={(e) =>
+                      handleScreenStyleChange(mode, key, e.target.value)
+                    }
+                  />
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              marginTop: 'auto',
+              paddingTop: 16,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => setIsLocalicationModalOpen(true)}
+            >
+              Open localization editor
+            </button>
+            <button
+              type="button"
+              className="editor-button debug-button"
+              title="Inspect raw JSON data"
+              onClick={() => setIsDebugModalOpen(true)}
+            >
+              Debug JSON
+            </button>
+          </div>
+
+          {isDebugModalOpen && (
+            <Modal
+              onClose={() => setIsDebugModalOpen(false)}
+              ariaLabelledBy="debug-json-editor-title"
+              className="modal--large modal--scrollable"
+              contentClassName="localication-modal__content"
+            >
+              <div className="modal__header localication-modal__header">
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={() => setIsDebugModalOpen(false)}
+                >
+                  Close
+                </button>
+              </div>
+              <div className="localication-modal__body">
+                <div className="localication-modal__editor">
+                  <JsonTextEditor
+                    rootName="node"
+                    value={data ?? {}}
+                    onChange={(next) =>
+                      setData(analyseAndProccess(next as Node) as Node)
+                    }
+                    className="localication-modal__json-editor"
+                  />
+                </div>
+              </div>
+            </Modal>
+          )}
+
+          {isLocalicationModalOpen && (
+            <LocalicationModal
+              data={appConfig.localication ?? {}}
+              onChange={handleLocalicationChange}
+              onClose={() => setIsLocalicationModalOpen(false)}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/paywall/hooks/index.ts

@@ -0,0 +1,5 @@
+export { usePaywallCounter } from './usePaywallCounter';
+export { useCloseStatusPaywall } from './useCloseStatusPaywall';
+export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
+export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
+export { useDiscountRate } from './useDiscountRate';

package/src/paywall/hooks/useCalculateLocalizedPrice.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCalculateLocalizedPrice(): string {
+  return '';
+}

package/src/paywall/hooks/useCarouselOptionsSeperator.ts

@@ -0,0 +1,8 @@
+/**
+ * Placeholder hook — will be implemented later.
+ *
+ * NOTE: name kept as `Seperator` to match existing external API usage.
+ */
+export function useCarouselOptionsSeperator(): string {
+  return '';
+}

package/src/paywall/hooks/useCloseStatusPaywall.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCloseStatusPaywall(): boolean {
+  return false;
+}

package/src/paywall/hooks/useDiscountRate.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useDiscountRate(): number {
+  return 0;
+}

package/src/paywall/hooks/usePaywallCounter.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function usePaywallCounter(): number {
+  return 0;
+}

package/src/paywall/types/benefits.ts

@@ -0,0 +1,44 @@
+/**
+ * Benefits are a simple key/value map used by paywall UIs to show feature bullets,
+ * trial metadata, headlines, etc.
+ *
+ * We keep the value type primitive so it serializes cleanly and is easy to mock.
+ */
+export type PaywallBenefitValue = string | number | boolean;
+
+export type PaywallBenefits = Record<string, PaywallBenefitValue>;
+
+export type PaywallBenefitEntry = {
+  key: string;
+  value: PaywallBenefitValue;
+};
+
+export function benefitMapToEntries(
+  map: PaywallBenefits | undefined,
+): PaywallBenefitEntry[] {
+  if (!map || typeof map !== 'object') return [];
+  return Object.entries(map)
+    .filter(([key]) => typeof key === 'string' && key.trim().length > 0)
+    .map(([key, value]) => ({ key, value: value as PaywallBenefitValue }));
+}
+
+export function benefitEntriesToMap(
+  entries: Array<PaywallBenefitEntry | null | undefined> | undefined,
+): PaywallBenefits {
+  const out: PaywallBenefits = {};
+  if (!Array.isArray(entries)) return out;
+  entries.forEach((entry) => {
+    const key = entry?.key?.toString?.().trim?.() ?? '';
+    if (!key) return;
+    const value = entry?.value as PaywallBenefitValue;
+    if (
+      typeof value !== 'string' &&
+      typeof value !== 'number' &&
+      typeof value !== 'boolean'
+    ) {
+      return;
+    }
+    out[key] = value;
+  });
+  return out;
+}

package/src/paywall/types/paywall-types.ts

@@ -0,0 +1,51 @@
+/**
+ * Simple paywall-related types.
+ *
+ * We keep this intentionally small and runtime-agnostic.
+ *
+ * Product fields are based on the common shape returned by `react-native-iap`
+ * calls like `getProducts()` / `getSubscriptions()`.
+ * See: `https://www.npmjs.com/package/react-native-iap`
+ */
+
+export type { PaywallBenefits, PaywallBenefitValue } from './benefits';
+
+/**
+ * Minimal "product" representation (compatible with `react-native-iap` product-ish objects).
+ *
+ * Note: `react-native-iap` has slightly different fields per platform/product type.
+ * This is the common subset most paywalls need.
+ */
+export interface Product {
+  /** iOS: `productId`, Android: `productId` */
+  productId: string;
+
+  /** Display name / title from the store (when available). */
+  title?: string;
+
+  /** Description from the store (when available). */
+  description?: string;
+
+  /**
+   * Localized formatted price (e.g. "$4.99", "€9,99").
+   * In `react-native-iap` this is typically `localizedPrice`.
+   */
+  localizedPrice?: string;
+
+  /**
+   * Raw price string from the store (often numeric string).
+   * In `react-native-iap` this is typically `price`.
+   */
+  price?: string;
+
+  /** Currency code (e.g. "USD", "EUR"). */
+  currency?: string;
+}
+
+/**
+ * A simple paywall model you can store/serialize.
+ */
+export interface PaywallModel {
+  product: Product[];
+  benefits: import('./benefits').PaywallBenefits;
+}

package/src/size-matters/index.ts

@@ -1,15 +1,31 @@
 import { useRenderStore } from '../store';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { getDefaultDevice } from '../utils/getDevices';
+
+const fallbackDevice = getDefaultDevice();
+const fallbackBaseSize = defaultAppConfig.baseSize;
+
+function ensureNumber(value: number | undefined, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
 
 function getBaseDimensions() {
   const currentState = useRenderStore.getState();
-  let device = currentState.device;
+  const device = currentState.device ?? fallbackDevice;
+  const baseSize = currentState.appConfig?.baseSize ?? fallbackBaseSize;
+
+  const deviceWidth = ensureNumber(device?.width, fallbackDevice.width);
+  const deviceHeight = ensureNumber(device?.height, fallbackDevice.height);
+  const baseWidth = ensureNumber(baseSize?.width, fallbackBaseSize.width);
+  const baseHeight = ensureNumber(baseSize?.height, fallbackBaseSize.height);
+
   const [shortDimension, longDimension] =
-    device.width < device.height
-      ? [device.width, device.height]
-      : [device.height, device.width];
+    deviceWidth < deviceHeight
+      ? [deviceWidth, deviceHeight]
+      : [deviceHeight, deviceWidth];
 
   return {
-    baseSize: currentState.appConfig.baseSize,
+    baseSize: { width: baseWidth, height: baseHeight },
     shortDimension,
     longDimension,
   };
@@ -51,6 +67,12 @@ export function parseSize(value?: string | number) {
     return Number.isFinite(n) ? fs(n) : raw;
   }
 
+  // Preserve percentage values as-is
+  if (lower.endsWith('%')) {
+    const numericPortion = parseFloat(lower.slice(0, -1));
+    return Number.isFinite(numericPortion) ? `${numericPortion}%` : raw;
+  }
+
   // Handle px explicitly (treat as absolute, not scaled)
   if (lower.endsWith('px')) {
     const n = parseFloat(lower.replace('px', ''));