@react-native-reusables/cli 0.0.17 → 0.1.0

package/__generated/components/primitives/popover/popover.tsx

@@ -1,286 +0,0 @@
-import { useControllableState, useRelativePosition, type LayoutPosition } 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 * as React from 'react';
-import {
-  BackHandler,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import type {
-  PopoverOverlayProps,
-  PopoverPortalProps,
-  PopoverRootProps,
-  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 & PopoverRootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const nativeID = React.useId();
-    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 = 'RootNativePopover';
-
-function usePopoverContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Popover compound components cannot be rendered outside the Popover 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 } = usePopoverContext();
-
-    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 = 'TriggerNativePopover';
-
-/**
- * @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 }: PopoverPortalProps) {
-  const value = usePopoverContext();
-
-  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 & PopoverOverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
-    const { open, onOpenChange, setTriggerPosition, setContentLayout } = usePopoverContext();
-
-    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 = 'OverlayNativePopover';
-
-/**
- * @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,
-    } = usePopoverContext();
-
-    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 = 'ContentNativePopover';
-
-const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { onOpenChange, setContentLayout, setTriggerPosition } = usePopoverContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      setTriggerPosition(null);
-      setContentLayout(null);
-      onOpenChange(false);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled ?? undefined}
-        role='button'
-        onPress={onPress}
-        disabled={disabled ?? undefined}
-        {...props}
-      />
-    );
-  }
-);
-
-Close.displayName = 'CloseNativePopover';
-
-export { Close, Content, Overlay, Portal, Root, Trigger, usePopoverContext };
-
-function onStartShouldSetResponder() {
-  return true;
-}

package/__generated/components/primitives/popover/popover.web.tsx

@@ -1,179 +0,0 @@
-import * as Popover from '@radix-ui/react-popover';
-import { useAugmentedRef, useControllableState } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type {
-  PositionedContentProps,
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import type {
-  PopoverOverlayProps,
-  PopoverPortalProps,
-  PopoverRootProps,
-  RootContext,
-} from './types';
-
-const RootContext = React.createContext<RootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & PopoverRootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider value={{ open, onOpenChange }}>
-        <Popover.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-          <Component ref={ref} {...viewProps} />
-        </Popover.Root>
-      </RootContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootWebPopover';
-
-function usePopoverContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Popover compound components cannot be rendered outside the Popover component');
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { onOpenChange, open } = usePopoverContext();
-    function onPress(ev: GestureResponderEvent) {
-      if (onPressProp) {
-        onPressProp(ev);
-      }
-      onOpenChange(!open);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.dataset.state = open ? 'open' : 'closed';
-        augRef.type = 'button';
-      }
-    }, [open]);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Popover.Trigger disabled={disabled ?? undefined} asChild>
-        <Component
-          ref={augmentedRef}
-          onPress={onPress}
-          role='button'
-          disabled={disabled}
-          {...props}
-        />
-      </Popover.Trigger>
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerWebPopover';
-
-function Portal({ forceMount, container, children }: PopoverPortalProps) {
-  return <Popover.Portal forceMount={forceMount} children={children} container={container} />;
-}
-
-const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & PopoverOverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return <Component ref={ref} {...props} />;
-  }
-);
-
-Overlay.displayName = 'OverlayWebPopover';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
-  (
-    {
-      asChild = false,
-      forceMount,
-      align = 'start',
-      side = 'bottom',
-      sideOffset = 0,
-      alignOffset = 0,
-      avoidCollisions = true,
-      insets: _insets,
-      disablePositioningStyle: _disablePositioningStyle,
-      onCloseAutoFocus,
-      onEscapeKeyDown,
-      onInteractOutside,
-      onPointerDownOutside,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Popover.Content
-        onCloseAutoFocus={onCloseAutoFocus}
-        onEscapeKeyDown={onEscapeKeyDown}
-        onInteractOutside={onInteractOutside}
-        onPointerDownOutside={onPointerDownOutside}
-        forceMount={forceMount}
-        align={align}
-        side={side}
-        sideOffset={sideOffset}
-        alignOffset={alignOffset}
-        avoidCollisions={avoidCollisions}
-      >
-        <Component ref={ref} {...props} />
-      </Popover.Content>
-    );
-  }
-);
-
-Content.displayName = 'ContentWebPopover';
-
-const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { onOpenChange, open } = usePopoverContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (onPressProp) {
-        onPressProp(ev);
-      }
-      onOpenChange(!open);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-      }
-    }, []);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <>
-        <Popover.Close disabled={disabled ?? undefined} asChild>
-          <Component
-            ref={augmentedRef}
-            onPress={onPress}
-            role='button'
-            disabled={disabled}
-            {...props}
-          />
-        </Popover.Close>
-      </>
-    );
-  }
-);
-
-Close.displayName = 'CloseWebPopover';
-
-export { Close, Content, Overlay, Portal, Root, Trigger, usePopoverContext };

package/__generated/components/primitives/popover/types.ts

@@ -1,30 +0,0 @@
-import type { ForceMountable } from '@rnr/types';
-
-interface RootContext {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-}
-
-interface PopoverRootProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (value: boolean) => void;
-}
-
-interface PopoverPortalProps extends ForceMountable {
-  children: React.ReactNode;
-  /**
-   * Platform: NATIVE ONLY
-   */
-  hostName?: string;
-  /**
-   * Platform: WEB ONLY
-   */
-  container?: HTMLElement | null | undefined;
-}
-
-interface PopoverOverlayProps extends ForceMountable {
-  closeOnPress?: boolean;
-}
-
-export type { PopoverRootProps, PopoverPortalProps, PopoverOverlayProps, RootContext };

package/__generated/components/primitives/portal.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Platform, type View, type ViewStyle } from 'react-native';
-import { create } from 'zustand';
-
-const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
-
-type PortalMap = Map<string, React.ReactNode>;
-type PortalHostMap = Map<string, PortalMap>;
-
-const usePortal = create<{ map: PortalHostMap }>(() => ({
-  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
-}));
-
-const updatePortal = (hostName: string, name: string, children: React.ReactNode) => {
-  usePortal.setState((prev) => {
-    const next = new Map(prev.map);
-    const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
-    portal.set(name, children);
-    next.set(hostName, portal);
-    return { map: next };
-  });
-};
-const removePortal = (hostName: string, name: string) => {
-  usePortal.setState((prev) => {
-    const next = new Map(prev.map);
-    const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
-    portal.delete(name);
-    next.set(hostName, portal);
-    return { map: next };
-  });
-};
-
-export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
-  const portalMap = usePortal((state) => state.map).get(name) ?? new Map<string, React.ReactNode>();
-  if (portalMap.size === 0) return null;
-  return <>{Array.from(portalMap.values())}</>;
-}
-
-export function Portal({
-  name,
-  hostName = DEFAULT_PORTAL_HOST,
-  children,
-}: {
-  name: string;
-  hostName?: string;
-  children: React.ReactNode;
-}) {
-  React.useEffect(() => {
-    updatePortal(hostName, name, children);
-  }, [hostName, name, children]);
-
-  React.useEffect(() => {
-    return () => {
-      removePortal(hostName, name);
-    };
-  }, [hostName, name]);
-
-  return null;
-}
-
-const ROOT: ViewStyle = {
-  flex: 1,
-};
-
-export function useModalPortalRoot() {
-  const ref = React.useRef<View>(null);
-  const [sideOffset, setSideOffSet] = React.useState(0);
-
-  const onLayout = React.useCallback(() => {
-    if (Platform.OS === 'web') return;
-    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
-      setSideOffSet(-pageY);
-    });
-  }, []);
-
-  return {
-    ref,
-    sideOffset,
-    onLayout,
-    style: ROOT,
-  };
-}

package/__generated/components/primitives/progress/index.ts

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

package/__generated/components/primitives/progress/progress.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { SlottableViewProps, ViewRef } from '@rnr/types';
-import type { ProgressRootProps } from './types';
-
-// This project uses code from WorkOS/Radix Primitives.
-// The code is licensed under the MIT License.
-// https://github.com/radix-ui/primitives/tree/main
-
-const DEFAULT_MAX = 100;
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & ProgressRootProps>(
-  (
-    { asChild, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props },
-    ref
-  ) => {
-    const max = maxProp ?? DEFAULT_MAX;
-    const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        role='progressbar'
-        ref={ref}
-        aria-valuemax={max}
-        aria-valuemin={0}
-        aria-valuenow={value}
-        aria-valuetext={getValueLabel(value, max)}
-        accessibilityValue={{
-          min: 0,
-          max,
-          now: value,
-          text: getValueLabel(value, max),
-        }}
-        {...props}
-      />
-    );
-  }
-);
-
-Root.displayName = 'RootProgress';
-
-const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='presentation' {...props} />;
-});
-
-Indicator.displayName = 'IndicatorProgress';
-
-export { Indicator, Root };
-
-function defaultGetValueLabel(value: number, max: number) {
-  return `${Math.round((value / max) * 100)}%`;
-}
-
-function isValidValueNumber(value: any, max: number): value is number {
-  return typeof value === 'number' && !isNaN(value) && value <= max && value >= 0;
-}

package/__generated/components/primitives/progress/progress.web.tsx

@@ -1,36 +0,0 @@
-import * as Progress from '@radix-ui/react-progress';
-import * as React from 'react';
-import { View } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { SlottableViewProps, ViewRef } from '@rnr/types';
-import type { ProgressRootProps } from './types';
-
-const ProgressContext = React.createContext<ProgressRootProps | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & ProgressRootProps>(
-  ({ asChild, value, max, getValueLabel, ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <ProgressContext.Provider value={{ value, max }}>
-        <Progress.Root value={value} max={max} getValueLabel={getValueLabel} asChild>
-          <Component ref={ref} {...props} />
-        </Progress.Root>
-      </ProgressContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootProgress';
-
-const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return (
-    <Progress.Indicator asChild>
-      <Component ref={ref} {...props} />
-    </Progress.Indicator>
-  );
-});
-
-Indicator.displayName = 'IndicatorProgress';
-
-export { Indicator, Root };

package/__generated/components/primitives/progress/types.ts

@@ -1,7 +0,0 @@
-interface ProgressRootProps {
-  value?: number | null | undefined;
-  max?: number;
-  getValueLabel?(value: number, max: number): string;
-}
-
-export type { ProgressRootProps };

package/__generated/components/primitives/radio-group/index.ts

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