@react-native-reusables/cli 0.0.17 → 0.1.0

package/__generated/components/primitives/hooks/useRelativePosition.tsx

@@ -1,227 +0,0 @@
-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/__generated/components/primitives/hover-card/hover-card.tsx

@@ -1,271 +0,0 @@
-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/__generated/components/primitives/hover-card/hover-card.web.tsx

@@ -1,145 +0,0 @@
-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/__generated/components/primitives/hover-card/index.ts

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

package/__generated/components/primitives/hover-card/types.ts

@@ -1,42 +0,0 @@
-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/__generated/components/primitives/label/index.ts

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

package/__generated/components/primitives/label/label.tsx

@@ -1,31 +0,0 @@
-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 };