@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/hooks/useRelativePosition.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import {
+  useWindowDimensions,
+  type LayoutRectangle,
+  type ScaledSize,
+  type ViewStyle,
+} from 'react-native';
+import type { Insets } from '@rnr/types';
+
+const POSITION_ABSOLUTE: ViewStyle = {
+  position: 'absolute',
+};
+
+const HIDDEN_CONTENT: ViewStyle = {
+  position: 'absolute',
+  opacity: 0,
+  zIndex: -9999999,
+};
+
+type UseRelativePositionArgs = Omit<
+  GetContentStyleArgs,
+  'triggerPosition' | 'contentLayout' | 'dimensions'
+> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+  disablePositioningStyle?: boolean;
+};
+
+export function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side,
+  disablePositioningStyle,
+}: UseRelativePositionArgs) {
+  const dimensions = useWindowDimensions();
+  return React.useMemo(() => {
+    if (disablePositioningStyle) {
+      return {};
+    }
+    if (!triggerPosition || !contentLayout) {
+      return HIDDEN_CONTENT;
+    }
+    return getContentStyle({
+      align,
+      avoidCollisions,
+      contentLayout,
+      side,
+      triggerPosition,
+      alignOffset,
+      insets,
+      sideOffset,
+      dimensions,
+    });
+  }, [triggerPosition, contentLayout, dimensions.width, dimensions.height]);
+}
+
+export interface LayoutPosition {
+  pageY: number;
+  pageX: number;
+  width: number;
+  height: number;
+}
+
+interface GetPositionArgs {
+  dimensions: ScaledSize;
+  avoidCollisions: boolean;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  insets?: Insets;
+}
+
+interface GetSidePositionArgs extends GetPositionArgs {
+  side: 'top' | 'bottom';
+  sideOffset: number;
+}
+
+function getSidePosition({
+  side,
+  triggerPosition,
+  contentLayout,
+  sideOffset,
+  insets,
+  avoidCollisions,
+  dimensions,
+}: GetSidePositionArgs) {
+  const insetTop = insets?.top ?? 0;
+  const insetBottom = insets?.bottom ?? 0;
+  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+
+  if (!avoidCollisions) {
+    return {
+      top: side === 'top' ? positionTop : positionBottom,
+    };
+  }
+
+  if (side === 'top') {
+    return {
+      top: Math.max(insetTop, positionTop),
+    };
+  }
+
+  return {
+    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+  };
+}
+
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: 'start' | 'center' | 'end';
+  alignOffset: number;
+}
+
+function getAlignPosition({
+  align,
+  avoidCollisions,
+  contentLayout,
+  triggerPosition,
+  alignOffset,
+  insets,
+  dimensions,
+}: GetAlignPositionArgs) {
+  const insetLeft = insets?.left ?? 0;
+  const insetRight = insets?.right ?? 0;
+  const maxContentWidth = dimensions.width - insetLeft - insetRight;
+
+  const contentWidth = Math.min(contentLayout.width, maxContentWidth);
+
+  let left = getLeftPosition(
+    align,
+    triggerPosition.pageX,
+    triggerPosition.width,
+    contentWidth,
+    alignOffset,
+    insetLeft,
+    insetRight,
+    dimensions
+  );
+
+  if (avoidCollisions) {
+    const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+    if (doesCollide) {
+      const spaceLeft = left - insetLeft;
+      const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+
+      if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
+        left = insetLeft;
+      } else if (spaceRight >= contentWidth) {
+        left = dimensions.width - insetRight - contentWidth;
+      } else {
+        const centeredPosition = Math.max(
+          insetLeft,
+          (dimensions.width - contentWidth - insetRight) / 2
+        );
+        left = centeredPosition;
+      }
+    }
+  }
+
+  return { left, maxWidth: maxContentWidth };
+}
+
+function getLeftPosition(
+  align: 'start' | 'center' | 'end',
+  triggerPageX: number,
+  triggerWidth: number,
+  contentWidth: number,
+  alignOffset: number,
+  insetLeft: number,
+  insetRight: number,
+  dimensions: ScaledSize
+) {
+  let left = 0;
+  if (align === 'start') {
+    left = triggerPageX;
+  }
+  if (align === 'center') {
+    left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+  }
+  if (align === 'end') {
+    left = triggerPageX + triggerWidth - contentWidth;
+  }
+  return Math.max(
+    insetLeft,
+    Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight)
+  );
+}
+
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+
+function getContentStyle({
+  align,
+  avoidCollisions,
+  contentLayout,
+  side,
+  triggerPosition,
+  alignOffset,
+  insets,
+  sideOffset,
+  dimensions,
+}: GetContentStyleArgs) {
+  return Object.assign(
+    POSITION_ABSOLUTE,
+    getSidePosition({
+      side,
+      triggerPosition,
+      contentLayout,
+      sideOffset,
+      insets,
+      avoidCollisions,
+      dimensions,
+    }),
+    getAlignPosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      dimensions,
+    })
+  );
+}

package/dist/generated/components/primitives/hover-card/hover-card.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
+import { useRelativePosition, type LayoutPosition, useControllableState } from '@rnr/hooks';
+import { Portal as RNPPortal } from '@rnr/portal';
+import * as Slot from '@rnr/slot';
+import type {
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type {
+  HoverCardOverlayProps,
+  HoverCardPortalProps,
+  HoverCardRootProps,
+  RootContext,
+} from './types';
+
+interface IRootContext extends RootContext {
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<IRootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & HoverCardRootProps>(
+  (
+    {
+      asChild,
+      open: openProp,
+      defaultOpen,
+      onOpenChange: onOpenChangeProp,
+      openDelay: _openDelay,
+      closeDelay: _closeDelay,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
+    const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RootContext.Provider
+        value={{
+          open,
+          onOpenChange,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeHoverCard';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error(
+      'HoverCard compound components cannot be rendered outside the HoverCard component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const triggerRef = React.useRef<View>(null);
+    const { open, onOpenChange, setTriggerPosition } = useRootContext();
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        if (!triggerRef.current) {
+          return new View({});
+        }
+        return triggerRef.current;
+      },
+      [triggerRef.current]
+    );
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+        setTriggerPosition({ width, pageX, pageY: pageY, height });
+      });
+      const newValue = !open;
+      onOpenChange(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={triggerRef}
+        aria-disabled={disabled ?? undefined}
+        role='button'
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeHoverCard';
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ forceMount, hostName, children }: HoverCardPortalProps) {
+  const value = useRootContext();
+
+  if (!value.triggerPosition) {
+    return null;
+  }
+
+  if (!forceMount) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & HoverCardOverlayProps>(
+  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+    const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (closeOnPress) {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      }
+      OnPressProp?.(ev);
+    }
+
+    if (!forceMount) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} onPress={onPress} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayNativeHoverCard';
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
+ */
+const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align = 'start',
+      side = 'bottom',
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      open,
+      onOpenChange,
+      contentLayout,
+      nativeID,
+      setContentLayout,
+      setTriggerPosition,
+      triggerPosition,
+    } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side,
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!forceMount) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        role='dialog'
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeHoverCard';
+
+export { Content, Overlay, Portal, Root, Trigger, useRootContext };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/dist/generated/components/primitives/hover-card/hover-card.web.tsx

@@ -0,0 +1,145 @@
+import * as HoverCard from '@radix-ui/react-hover-card';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type {
+  HoverCardOverlayProps,
+  HoverCardPortalProps,
+  HoverCardRootProps,
+  RootContext,
+} from './types';
+import { useControllableState } from '@rnr/hooks';
+
+const HoverCardContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & HoverCardRootProps>(
+  (
+    {
+      asChild,
+      open: openProp,
+      defaultOpen,
+      onOpenChange: onOpenChangeProp,
+      openDelay,
+      closeDelay,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const Component = asChild ? Slot.View : View;
+    return (
+      <HoverCardContext.Provider value={{ open, onOpenChange }}>
+        <HoverCard.Root
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={onOpenChange}
+          openDelay={openDelay}
+          closeDelay={closeDelay}
+        >
+          <Component ref={ref} {...viewProps} />
+        </HoverCard.Root>
+      </HoverCardContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebHoverCard';
+
+function useRootContext() {
+  const context = React.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error(
+      'HoverCard compound components cannot be rendered outside the HoverCard component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <HoverCard.Trigger asChild>
+        <Component ref={ref} {...props} />
+      </HoverCard.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebHoverCard';
+
+function Portal({ forceMount, container, children }: HoverCardPortalProps) {
+  return <HoverCard.Portal forceMount={forceMount} container={container} children={children} />;
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & HoverCardOverlayProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayWebHoverCard';
+
+const Content = React.forwardRef<PressableRef, SlottablePressableProps & PositionedContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align,
+      side,
+      sideOffset,
+      alignOffset = 0,
+      avoidCollisions = true,
+      insets,
+      loop: _loop,
+      onCloseAutoFocus: _onCloseAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      collisionBoundary,
+      sticky,
+      hideWhenDetached,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <HoverCard.Content
+        forceMount={forceMount}
+        alignOffset={alignOffset}
+        avoidCollisions={avoidCollisions}
+        collisionPadding={insets}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onPointerDownOutside={onPointerDownOutside}
+        onFocusOutside={onFocusOutside}
+        onInteractOutside={onInteractOutside}
+        collisionBoundary={collisionBoundary}
+        sticky={sticky}
+        hideWhenDetached={hideWhenDetached}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <Component ref={ref} {...props} />
+      </HoverCard.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebHoverCard';
+
+export { Content, Overlay, Portal, Root, Trigger, useRootContext };

package/dist/generated/components/primitives/hover-card/index.ts

@@ -0,0 +1 @@
+export * from './hover-card';

package/dist/generated/components/primitives/hover-card/types.ts

@@ -0,0 +1,42 @@
+import type { ForceMountable } from '@rnr/types';
+
+interface RootContext {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  openDelay?: number;
+  closeDelay?: number;
+}
+
+interface HoverCardRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (value: boolean) => void;
+  /**
+   * Platform: WEB ONLY
+   * @default 700
+   */
+  openDelay?: number;
+  /**
+   * Platform: WEB ONLY
+   * @default 300
+   */
+  closeDelay?: number;
+}
+
+interface HoverCardPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+interface HoverCardOverlayProps extends ForceMountable {
+  closeOnPress?: boolean;
+}
+
+export type { HoverCardRootProps, HoverCardOverlayProps, HoverCardPortalProps, RootContext };

package/dist/generated/components/primitives/label/index.ts

@@ -0,0 +1 @@
+export * from './label';

package/dist/generated/components/primitives/label/label.tsx

@@ -0,0 +1,31 @@
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  TextRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { Pressable, Text as RNText } from 'react-native';
+import type { LabelRootProps, LabelTextProps } from './types';
+
+const Root = React.forwardRef<
+  PressableRef,
+  Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & LabelRootProps
+>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return <Component ref={ref} {...props} />;
+});
+
+Root.displayName = 'RootNativeLabel';
+
+const Text = React.forwardRef<TextRef, SlottableTextProps & LabelTextProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+Text.displayName = 'TextNativeLabel';
+
+export { Root, Text };