@idealyst/components 1.0.83 → 1.0.84

package/src/internal/PositionedPortal.tsx

@@ -0,0 +1,254 @@
+import React, { useRef, useState, useEffect, useLayoutEffect, useCallback, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+export type Placement =
+  | 'top' | 'top-start' | 'top-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end'
+  | 'right' | 'right-start' | 'right-end';
+
+interface PositionedPortalProps {
+  open: boolean;
+  anchor: React.RefObject<HTMLElement>;
+  children: ReactNode;
+  placement?: Placement;
+  offset?: number;
+  onClickOutside?: () => void;
+  onEscapeKey?: () => void;
+  matchWidth?: boolean;
+  zIndex?: number;
+}
+
+interface Position {
+  top: number;
+  left: number;
+  width?: number;
+}
+
+const calculatePosition = (
+  anchorRect: DOMRect,
+  contentSize: { width: number; height: number },
+  placement: Placement,
+  offset: number,
+  matchWidth: boolean
+): Position => {
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+  };
+
+  let position: Position = { top: 0, left: 0 };
+
+  // Calculate initial position based on placement
+  switch (placement) {
+    case 'top':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - contentSize.width / 2,
+      };
+      break;
+    case 'top-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.left + viewport.scrollX,
+      };
+      break;
+    case 'top-end':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.right + viewport.scrollX - contentSize.width,
+      };
+      break;
+    case 'bottom':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - contentSize.width / 2,
+      };
+      break;
+    case 'bottom-start':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.left + viewport.scrollX,
+      };
+      break;
+    case 'bottom-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.right + viewport.scrollX - contentSize.width,
+      };
+      break;
+    case 'left':
+      position = {
+        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - contentSize.height / 2,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'left-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'left-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY - contentSize.height,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'right':
+      position = {
+        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - contentSize.height / 2,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+    case 'right-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+    case 'right-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY - contentSize.height,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+  }
+
+  // Match anchor width if requested
+  if (matchWidth) {
+    position.width = anchorRect.width;
+  }
+
+  // Constrain to viewport
+  const padding = 8;
+  position.left = Math.max(padding, Math.min(position.left, viewport.width - contentSize.width - padding));
+  position.top = Math.max(padding, Math.min(position.top, viewport.height + viewport.scrollY - contentSize.height - padding));
+
+  return position;
+};
+
+export const PositionedPortal: React.FC<PositionedPortalProps> = ({
+  open,
+  anchor,
+  children,
+  placement = 'bottom-start',
+  offset = 4,
+  onClickOutside,
+  onEscapeKey,
+  matchWidth = false,
+  zIndex = 1000,
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<Position>({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+
+  // Calculate position
+  const updatePosition = useCallback(() => {
+    if (!contentRef.current || !anchor.current) {
+      return;
+    }
+
+    const anchorRect = anchor.current.getBoundingClientRect();
+    const contentRect = contentRef.current.getBoundingClientRect();
+
+    // Use actual measured size from the DOM
+    const newPosition = calculatePosition(
+      anchorRect,
+      { width: contentRect.width, height: contentRect.height },
+      placement,
+      offset,
+      matchWidth
+    );
+
+    setPosition(newPosition);
+    setIsPositioned(true);
+  }, [anchor, placement, offset, matchWidth]);
+
+  // Position after DOM is ready
+  useLayoutEffect(() => {
+    if (open) {
+      // Use requestAnimationFrame to ensure ref is attached and layout is complete
+      const rafId = requestAnimationFrame(() => {
+        if (contentRef.current && anchor.current) {
+          updatePosition();
+        }
+      });
+      return () => cancelAnimationFrame(rafId);
+    } else {
+      setIsPositioned(false);
+    }
+  }, [open, updatePosition]);
+
+  // Update position on scroll/resize
+  useEffect(() => {
+    if (!open) return;
+
+    updatePosition();
+
+    const handleUpdate = () => updatePosition();
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [open, updatePosition]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!open || !onEscapeKey) return;
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onEscapeKey();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [open, onEscapeKey]);
+
+  // Handle click outside
+  useEffect(() => {
+    if (!open || !onClickOutside) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+
+      if (
+        contentRef.current && !contentRef.current.contains(target) &&
+        anchor.current && !anchor.current.contains(target)
+      ) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, [open, onClickOutside, anchor]);
+
+  if (!open) return null;
+
+  const content = (
+    <div
+      ref={contentRef}
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        width: position.width,
+        zIndex,
+        opacity: isPositioned ? 1 : 0,
+        pointerEvents: isPositioned ? 'auto' : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  return createPortal(content, document.body);
+};

package/src/internal/SafeAreaDebugOverlay.native.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, Text, Dimensions, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface SafeAreaDebugOverlayProps {
+  visible?: boolean;
+}
+
+export const SafeAreaDebugOverlay: React.FC<SafeAreaDebugOverlayProps> = ({ visible = true }) => {
+  const insets = useSafeAreaInsets();
+  const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
+  const padding = 12;
+
+  if (!visible) return null;
+
+  // Calculate safe area bounds (system-defined safe zones)
+  // Allow overlap with header at top (lenient), but respect system UI at bottom
+  const topSafeEdge = 0; // Allow header overlap
+  const leftSafeEdge = insets.left;
+  const rightSafeEdge = windowWidth - insets.right;
+  const bottomSafeEdge = windowHeight - insets.bottom;
+
+  // Calculate content bounds (safe area with padding for visual comfort)
+  const topBound = padding; // Start from top with just padding
+  const leftBound = leftSafeEdge + padding;
+  const rightBound = rightSafeEdge - padding;
+  const bottomBound = bottomSafeEdge - padding;
+
+  const safeWidth = rightBound - leftBound;
+  const safeHeight = windowHeight - insets.bottom - insets.top - padding * 2;
+
+  return (
+    <View style={styles.container} pointerEvents="none">
+      {/* Top unsafe area (status bar, notch) */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: 0,
+            left: 0,
+            width: windowWidth,
+            height: topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={styles.label}>System UI: {topSafeEdge.toFixed(0)}px</Text>
+      </View>
+
+      {/* Bottom unsafe area (gesture bar, home indicator) */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: bottomSafeEdge,
+            left: 0,
+            width: windowWidth,
+            height: windowHeight - bottomSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={styles.label}>Gesture Bar: {(windowHeight - bottomSafeEdge).toFixed(0)}px</Text>
+      </View>
+
+      {/* Left unsafe area */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: topSafeEdge,
+            left: 0,
+            width: leftSafeEdge,
+            height: bottomSafeEdge - topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={[styles.label, styles.rotatedLabel]}>L: {leftSafeEdge.toFixed(0)}px</Text>
+      </View>
+
+      {/* Right unsafe area */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: topSafeEdge,
+            left: rightSafeEdge,
+            width: windowWidth - rightSafeEdge,
+            height: bottomSafeEdge - topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={[styles.label, styles.rotatedLabel]}>R: {(windowWidth - rightSafeEdge).toFixed(0)}px</Text>
+      </View>
+
+      {/* Safe area border outline */}
+      <View
+        style={[
+          styles.safeAreaBorder,
+          {
+            top: topBound,
+            left: leftBound,
+            width: safeWidth,
+            height: safeHeight,
+          },
+        ]}
+      />
+
+      {/* Info panel */}
+      <View style={styles.infoPanel}>
+        <Text style={styles.infoText}>Window: {windowWidth.toFixed(0)}x{windowHeight.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Safe Area: {(rightSafeEdge - leftSafeEdge).toFixed(0)}x{(bottomSafeEdge - topSafeEdge).toFixed(0)}</Text>
+        <Text style={styles.infoText}>Content: {safeWidth.toFixed(0)}x{safeHeight.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Insets: T:{insets.top} R:{insets.right} B:{insets.bottom} L:{insets.left}</Text>
+        <Text style={styles.infoText}>Safe: T:{topSafeEdge} B:{bottomSafeEdge.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Bounds: T:{topBound.toFixed(0)} B:{bottomBound.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Padding: {padding}px</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+  },
+  safeAreaIndicator: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  safeAreaBorder: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: 'rgba(0, 255, 0, 0.8)',
+    borderStyle: 'dashed',
+  },
+  label: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  rotatedLabel: {
+    transform: [{ rotate: '90deg' }],
+  },
+  infoPanel: {
+    position: 'absolute',
+    top: 50,
+    right: 10,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 255, 0, 0.8)',
+  },
+  infoText: {
+    color: '#fff',
+    fontSize: 11,
+    fontFamily: 'monospace',
+    marginBottom: 2,
+  },
+});

package/src/unistyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file ensures that the Unistyles module augmentation from @idealyst/theme
+ * is properly loaded for all component files.
+ */
+
+import '@idealyst/theme/unistyles';

package/src/utils/buildSizeVariants.ts

@@ -0,0 +1,16 @@
+import { AllComponentSizes, Size, Theme, Styles } from '@idealyst/theme';
+
+/**
+ * Builds a generic size variant. Not really useful on its own tbh, just good to show how it can be used.
+ * Context really matters for sizes
+ * @param theme 
+ * @param builder 
+ * @returns 
+ */
+export function buildSizeVariants<T extends keyof AllComponentSizes>(theme: Theme, component: T, builder: (value: AllComponentSizes[T][Size]) => Styles): Record<Size, Styles> {
+    const variants = {} as Record<Size, Styles>;
+    for (const size in theme.sizes[component]) {
+        variants[size as Size] = builder(theme.sizes[component][size as Size]);
+    }
+    return variants;
+}

package/src/utils/deepMerge.ts

@@ -0,0 +1,43 @@
+/**
+ * Check if a value is a plain object (not an array, null, or other special object)
+ */
+function isPlainObject(value: unknown): value is Record<string, any> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    Object.prototype.toString.call(value) === '[object Object]'
+  )
+}
+
+/**
+ * Deep merge two objects together, with the second object taking priority.
+ * Arrays and non-plain objects are replaced rather than merged.
+ *
+ * @param target - The base object
+ * @param source - The object to merge in (takes priority)
+ * @returns A new merged object
+ */
+export function deepMerge<T extends Record<string, any>, S extends Record<string, any>>(
+  target: T,
+  source: S
+): T & S {
+  const result: Record<string, any> = { ...target }
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key]
+      const targetValue = result[key]
+
+      // If both values are plain objects, merge them recursively
+      if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+        result[key] = deepMerge(targetValue, sourceValue)
+      } else {
+        // Otherwise, source value takes priority (including arrays, primitives, null, undefined)
+        result[key] = sourceValue
+      }
+    }
+  }
+
+  return result as T & S
+}