@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/components/BuilderButton.tsx

@@ -0,0 +1,127 @@
+import { useRef } from 'react';
+import {
+  isNodeNullOrUndefined,
+  isNodeString,
+  Node,
+  NodeData,
+  NodeDefaultAttribute,
+} from '..';
+import { getPatternByType } from '../utils/patterns';
+
+export type BuilderButtonProps = {
+  node: Node;
+  onClick: () => void;
+  onDelete?: (node: Node) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+};
+
+export function BuilderButton({
+  node,
+  onClick,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: BuilderButtonProps) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+
+  const longPressTimeoutRef = useRef<number | null>(null);
+  const longPressTriggeredRef = useRef(false);
+
+  const handleDelete = () => {
+    if (onDelete) {
+      onDelete(node);
+    }
+  };
+
+  const clearLongPress = () => {
+    if (longPressTimeoutRef.current !== null) {
+      window.clearTimeout(longPressTimeoutRef.current);
+      longPressTimeoutRef.current = null;
+    }
+  };
+
+  const handlePressStart = () => {
+    longPressTriggeredRef.current = false;
+    longPressTimeoutRef.current = window.setTimeout(() => {
+      longPressTriggeredRef.current = true;
+      const shouldDelete = window.confirm('Do you want to delete');
+      if (shouldDelete) {
+        handleDelete();
+      }
+    }, 600);
+  };
+
+  const handlePressEnd = () => {
+    if (!longPressTriggeredRef.current) {
+      onClick();
+    }
+    clearLongPress();
+  };
+
+  const handlePressCancel = () => {
+    clearLongPress();
+  };
+
+  let extra = '';
+  if (nodeData.attributes?.condition) {
+    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+  }
+  const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
+  const baseLabel =
+    patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
+  const conditionLabel = extra.trim() ? extra : '';
+
+  return (
+    <div className="builder__button">
+      {(onMoveUp || onMoveDown) && (
+        <div className="builder__sort-controls">
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveUp?.();
+            }}
+            disabled={!onMoveUp}
+            aria-label="Move up"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveDown?.();
+            }}
+            disabled={!onMoveDown}
+            aria-label="Move down"
+          >
+            ↓
+          </button>
+        </div>
+      )}
+      <a
+        className="builder__button-link"
+        onMouseDown={handlePressStart}
+        onMouseUp={handlePressEnd}
+        onMouseLeave={handlePressCancel}
+        onTouchStart={handlePressStart}
+        onTouchEnd={handlePressEnd}
+        onTouchCancel={handlePressCancel}
+      >
+        {baseLabel}
+      </a>
+      {conditionLabel && (
+        <span className="builder__button-condition">{conditionLabel}</span>
+      )}
+    </div>
+  );
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,81 @@
+import React, { useId } from 'react';
+
+type CheckboxChangeHandler = (
+  checked: boolean,
+  event: React.ChangeEvent<HTMLInputElement>,
+) => void;
+
+export type CheckboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onChange' | 'className'
+> & {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  className?: string;
+  inputClassName?: string;
+  onChange?: CheckboxChangeHandler;
+};
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      label,
+      helperText,
+      className,
+      inputClassName,
+      onChange,
+      id,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const helperId = helperText ? `${inputId}-helper` : undefined;
+
+    const wrapperClassName = [
+      'builder-checkbox',
+      disabled ? 'builder-checkbox--disabled' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const nativeClassName = ['builder-checkbox__native', inputClassName]
+      .filter(Boolean)
+      .join(' ');
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.checked, event);
+    };
+
+    return (
+      <div className={wrapperClassName}>
+        <label htmlFor={inputId} className="builder-checkbox__label">
+          <input
+            {...rest}
+            ref={ref}
+            id={inputId}
+            type="checkbox"
+            className={nativeClassName}
+            onChange={handleChange}
+            disabled={disabled}
+            aria-describedby={helperId}
+          />
+          <span className="builder-checkbox__control" aria-hidden="true" />
+          {label ? (
+            <span className="builder-checkbox__text">{label}</span>
+          ) : null}
+        </label>
+        {helperText ? (
+          <span id={helperId} className="builder-checkbox__helper">
+            {helperText}
+          </span>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/DeviceButton.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import androidIcon from '../assets/images/android.svg';
+import iosIcon from '../assets/images/apple.svg';
+
+const platformIcons: Record<string, string> = {
+  android: androidIcon,
+  ios: iosIcon,
+};
+
+type DeviceButtonProps = {
+  device: Device;
+  selectedDevice: Device | null;
+  onSelect: (device: Device) => void;
+};
+
+export function DeviceButton({
+  device,
+  selectedDevice,
+  onSelect,
+}: DeviceButtonProps) {
+  const platformIcon = platformIcons[device.platform];
+
+  return (
+    <button
+      type="button"
+      className={`editor-device-button${
+        selectedDevice === device ? ' editor-device-button--selected' : ''
+      }`}
+      onClick={() => onSelect(device)}
+    >
+      {device.name} <br />
+      {device.width}x{device.height}
+      {platformIcon && <img src={platformIcon} alt="" aria-hidden="true" />}
+    </button>
+  );
+}
+
+export default DeviceButton;

package/src/components/DeviceNavigationBar.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import { useMockOSContext } from '../mockOS';
+
+type DeviceNavigationBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  navigationBarType?: Device['navigationBarType'];
+  isDark: boolean;
+};
+
+const basePillStyle: React.CSSProperties = {
+  height: 5,
+  borderRadius: 999,
+  width: 120,
+};
+
+const tabItems = ['Today', 'Search', 'Profile'];
+
+export function DeviceNavigationBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  navigationBarType = 'gesture',
+  isDark,
+}: DeviceNavigationBarProps) {
+  const context = useMockOSContext();
+
+  if (!height) {
+    return null;
+  }
+
+  const barColor = isDark ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.7)';
+  const mutedColor = isDark
+    ? 'rgba(255, 255, 255, 0.55)'
+    : 'rgba(0, 0, 0, 0.4)';
+
+  function handleBackButton() {
+    console.log('handleBackButton', context);
+    if (context) {
+      const canGoBack = context.goBack();
+      // If can't go back, go to launchscreen
+      if (!canGoBack) {
+        context.navigation('launchscreen');
+      }
+    } else {
+      alert('Navigation: Back\n(Mock OS context not available)');
+    }
+  }
+
+  function handleHomeButton() {
+    if (context) {
+      context.navigation('launchscreen');
+    } else {
+      alert('Navigation: Home\n(Mock OS context not available)');
+    }
+  }
+
+  const containerStyle: React.CSSProperties = {
+    height,
+    backgroundColor,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 16px',
+  };
+
+  if (platform === 'ios') {
+    switch (navigationBarType) {
+      case 'homeIndicator':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                ...basePillStyle,
+                backgroundColor: barColor,
+              }}
+            />
+          </div>
+        );
+      case 'tabBar':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                display: 'flex',
+                width: '100%',
+                maxWidth: 280,
+                justifyContent: 'space-between',
+                fontSize: 11,
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+                gap: 20,
+              }}
+            >
+              {tabItems.map((item) => (
+                <div
+                  key={item}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 4,
+                    color: item === 'Today' ? barColor : mutedColor,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 6,
+                      backgroundColor: item === 'Today' ? barColor : mutedColor,
+                      opacity: 0.9,
+                    }}
+                  />
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
+  // Android styles
+  if (navigationBarType === 'threeButtons') {
+    const buttonStyle: React.CSSProperties = {
+      position: 'relative',
+      width: 40,
+      height: 40,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 18,
+      color: barColor,
+      cursor: 'pointer',
+      userSelect: 'none',
+    };
+
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            display: 'flex',
+            gap: 64,
+          }}
+        >
+          <div
+            style={{ ...buttonStyle, fontSize: 24 }}
+            onClick={handleBackButton}
+            role="button"
+            aria-label="Back"
+          >
+            ◁
+          </div>
+          <div
+            style={{ ...buttonStyle, fontSize: 32, top: -3 }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Home"
+          >
+            ⌂
+          </div>
+          <div
+            style={{
+              ...buttonStyle,
+              fontSize: 20,
+              fontWeight: 1000,
+            }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Recent Apps"
+          >
+            ▢
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (navigationBarType === 'gesture') {
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            ...basePillStyle,
+            width: 90,
+            backgroundColor: barColor,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default DeviceNavigationBar;

package/src/components/DeviceStatusBar.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Device } from '../types/Device';
+
+type DeviceStatusBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  isDark: boolean;
+};
+
+const formatTime = () =>
+  new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+const iosIndicators = ['5G', 'Wi-Fi', '92%'];
+const androidIndicators = ['Alarm', 'Wi-Fi', '84%'];
+
+export function DeviceStatusBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  isDark,
+}: DeviceStatusBarProps) {
+  const [time, setTime] = useState(() => formatTime());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setTime(formatTime()), 60_000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const textColor = isDark ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)';
+  const iconStyle: React.CSSProperties = {
+    fontSize: 10,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  };
+
+  const containerStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height,
+    backgroundColor,
+    color: textColor,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    fontWeight: 500,
+    padding: '0 12px',
+  };
+
+  if (platform === 'ios') {
+    return (
+      <div className="device-status-bar" style={containerStyle}>
+        <span style={{ fontWeight: 600 }}>{time}</span>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {iosIndicators.map((indicator) => (
+            <span key={indicator} style={iconStyle}>
+              {indicator}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="device-status-bar" style={containerStyle}>
+      <span style={{ flex: 1 }}>{time}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {androidIndicators.map((indicator) => (
+          <span key={indicator} style={iconStyle}>
+            {indicator}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DeviceStatusBar;

package/src/components/EditorHeader.tsx

@@ -1,41 +1,22 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Device, getDevices, Node, copyNode } from '..';
 import { useRenderStore } from '../store';
-import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
 import { useLogRender } from '../utils/useLogRender';
+import { DeviceButton } from './DeviceButton';
+import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
 
 const devices = getDevices();
-
 interface EditorHeaderProps {
   onSaveProject?: () => void;
+  onRestoreProject?: () => void;
   current?: Node;
   editorData?: Node;
   setEditorData?: (data: Node) => void;
 }
 
-interface DeviceButtonProps {
-  device: Device;
-  selectedDevice: Device | null;
-  setSelectedDevice: (device: Device) => void;
-}
-export function DeviceButton({
-  device,
-  selectedDevice,
-  setSelectedDevice,
-}: DeviceButtonProps) {
-  return (
-    <button
-      className={`editor-device-button ${selectedDevice === device ? 'editor-device-button--selected' : ''}`}
-      onClick={() => setSelectedDevice(device)}
-    >
-      {device.name} <br />
-      {device.width}x{device.height}
-    </button>
-  );
-}
-
 export function EditorHeader({
   onSaveProject,
+  onRestoreProject,
   current,
   editorData,
   setEditorData,
@@ -43,7 +24,7 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device, setDevice } = useRenderStore((s) => ({
+  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
   }));
@@ -85,7 +66,6 @@ export function EditorHeader({
     useRenderStore.setState({
       copiedNode: null,
     });
-    useRenderStore.getState().forceRender();
     setEditorData(updated);
   };
   return (
@@ -95,12 +75,12 @@ export function EditorHeader({
       aria-label="Editor utility header"
     >
       <div className="editor-header__devices">
-        {devices.slice(0, 5).map((device: Device) => (
+        {devices.slice(0, 5).map((deviceOption: Device) => (
           <DeviceButton
-            key={device.name}
-            selectedDevice={device}
-            setSelectedDevice={setDevice}
-            device={device}
+            key={deviceOption.name}
+            selectedDevice={selectedDevice}
+            onSelect={setDevice}
+            device={deviceOption}
           />
         ))}
         <button
@@ -119,13 +99,15 @@ export function EditorHeader({
         >
           Save
         </button>
-        <button
-          className="editor-button editor-save-previewconfig-button"
-          aria-label="Save previewConfig"
-          onClick={() => useRenderStore.getState().forceRender()}
-        >
-          Force Render
-        </button>
+        {onRestoreProject && (
+          <button
+            className="editor-button editor-save-previewconfig-button"
+            aria-label="Restore project data"
+            onClick={() => onRestoreProject()}
+          >
+            Restore
+          </button>
+        )}
         <button
           className="editor-button"
           aria-label="Copy node"
@@ -144,42 +126,12 @@ export function EditorHeader({
         )}
       </div>
       {isDevicesModalOpen && (
-        <div
-          className="editor-modal"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="device-selector-title"
-        >
-          <div
-            className="editor-modal__overlay"
-            onClick={() => setIsDevicesModalOpen(false)}
-          />
-          <div className="editor-modal__content">
-            <div className="editor-modal__header">
-              <h3 id="device-selector-title">Select a device</h3>
-              <button
-                className="editor-button"
-                aria-label="Close device selector"
-                onClick={() => setIsDevicesModalOpen(false)}
-              >
-                Close
-              </button>
-            </div>
-            <div className="editor-device-grid" role="list">
-              {devices.map((device: Device) => (
-                <DeviceButton
-                  key={device.name}
-                  selectedDevice={device}
-                  setSelectedDevice={(d: Device) => {
-                    setDevice(d);
-                    setIsDevicesModalOpen(false);
-                  }}
-                  device={device}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
+        <DeviceSelectorModal
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelect={setDevice}
+          onClose={() => setIsDevicesModalOpen(false)}
+        />
       )}
     </div>
   );

package/src/index.ts

@@ -3,7 +3,7 @@ import AttributesEditor from './AttributesEditor';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project } from './types/Project';
+export type { Project, ProjectColors } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -28,7 +28,7 @@ export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
 export { ProjectPage } from './pages/ProjectPage';
-export type { ProjectPageProps, Tab } from './pages/ProjectPage';
+export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';
 export { logger } from './utils/logger';
 export type { LogLevel } from './types/Project';