@react-native-reusables/cli 0.0.8 → 0.0.10

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

@@ -0,0 +1,286 @@
+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/dist/generated/components/primitives/popover/popover.web.tsx

@@ -0,0 +1,179 @@
+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/dist/generated/components/primitives/popover/types.ts

@@ -0,0 +1,30 @@
+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/dist/generated/components/primitives/portal.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+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;
+}

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

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

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

@@ -0,0 +1,59 @@
+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/dist/generated/components/primitives/progress/progress.web.tsx

@@ -0,0 +1,36 @@
+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/dist/generated/components/primitives/progress/types.ts

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

package/dist/generated/components/primitives/radio-group/index.ts

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