@react-native-reusables/cli 0.0.9 → 0.0.11

package/dist/generated/components/primitives/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,237 @@
+import { useControllableState } from '@rnr/hooks';
+import { Portal as RNPPortal } from '@rnr/portal';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { BackHandler, Pressable, Text, View, type GestureResponderEvent } from 'react-native';
+import type {
+  AlertDialogContentProps,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogRootProps,
+  RootContext,
+} from './types';
+
+const AlertDialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogRootProps>(
+  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AlertDialogContext.Provider
+        value={{
+          open,
+          onOpenChange,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AlertDialogContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeAlertDialog';
+
+function useRootContext() {
+  const context = React.useContext(AlertDialogContext);
+  if (!context) {
+    throw new Error(
+      'AlertDialog compound components cannot be rendered outside the AlertDialog component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { open: value, onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      onOpenChange(!value);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role='button'
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeAlertDialog';
+
+/**
+ * @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 }: AlertDialogPortalProps) {
+  const value = useRootContext();
+
+  if (!forceMount) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
+      <AlertDialogContext.Provider value={value}>{children}</AlertDialogContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Overlay = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogOverlayProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { open: value } = useRootContext();
+
+    if (!forceMount) {
+      if (!value) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayNativeAlertDialog';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { open: value, nativeID, onOpenChange } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        backHandler.remove();
+      };
+    }, []);
+
+    if (!forceMount) {
+      if (!value) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        role='alertdialog'
+        nativeID={nativeID}
+        aria-labelledby={`${nativeID}_label`}
+        aria-describedby={`${nativeID}_desc`}
+        aria-modal={true}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeAlertDialog';
+
+const Cancel = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      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}
+      />
+    );
+  }
+);
+
+Cancel.displayName = 'CloseNativeAlertDialog';
+
+const Action = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      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}
+      />
+    );
+  }
+);
+
+Action.displayName = 'ActionNativeAlertDialog';
+
+const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const { nativeID } = useRootContext();
+  const Component = asChild ? Slot.Text : Text;
+  return <Component ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
+});
+
+Title.displayName = 'TitleNativeAlertDialog';
+
+const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const { nativeID } = useRootContext();
+  const Component = asChild ? Slot.Text : Text;
+  return <Component ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
+});
+
+Description.displayName = 'DescriptionNativeAlertDialog';
+
+export {
+  Action,
+  Cancel,
+  Content,
+  Description,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
+  useRootContext,
+};

package/dist/generated/components/primitives/alert-dialog/alert-dialog.web.tsx

@@ -0,0 +1,256 @@
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { Pressable, Text, View, type GestureResponderEvent } from 'react-native';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import type {
+  AlertDialogContentProps,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogRootProps,
+  RootContext,
+} from './types';
+
+const AlertDialogContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogRootProps>(
+  ({ 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 (
+      <AlertDialogContext.Provider value={{ open, onOpenChange }}>
+        <AlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+          <Component ref={ref} {...viewProps} />
+        </AlertDialog.Root>
+      </AlertDialogContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootAlertWebDialog';
+
+function useRootContext() {
+  const context = React.useContext(AlertDialogContext);
+  if (!context) {
+    throw new Error(
+      'AlertDialog compound components cannot be rendered outside the AlertDialog component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { onOpenChange, open } = useRootContext();
+    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 (
+      <AlertDialog.Trigger disabled={disabled ?? undefined} asChild>
+        <Component
+          ref={augmentedRef}
+          onPress={onPress}
+          role='button'
+          disabled={disabled}
+          {...props}
+        />
+      </AlertDialog.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerAlertWebDialog';
+
+function Portal({ forceMount, container, children }: AlertDialogPortalProps) {
+  return <AlertDialog.Portal forceMount={forceMount} children={children} container={container} />;
+}
+
+const Overlay = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogOverlayProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AlertDialog.Overlay forceMount={forceMount}>
+        <Component ref={ref} {...props} />
+      </AlertDialog.Overlay>
+    );
+  }
+);
+
+Overlay.displayName = 'OverlayAlertWebDialog';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogContentProps>(
+  (
+    {
+      asChild,
+      forceMount,
+
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      ...props
+    },
+    ref
+  ) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { open } = useRootContext();
+
+    React.useLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        augRef.dataset.state = open ? 'open' : 'closed';
+      }
+    }, [open]);
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AlertDialog.Content
+        onOpenAutoFocus={onOpenAutoFocus}
+        onCloseAutoFocus={onCloseAutoFocus}
+        onEscapeKeyDown={onEscapeKeyDown}
+        forceMount={forceMount}
+        asChild
+      >
+        <Component ref={augmentedRef} {...props} />
+      </AlertDialog.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentAlertWebDialog';
+
+const Cancel = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { onOpenChange, open } = useRootContext();
+
+    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 (
+      <>
+        <AlertDialog.Cancel disabled={disabled ?? undefined} asChild>
+          <Component
+            ref={augmentedRef}
+            onPress={onPress}
+            role='button'
+            disabled={disabled}
+            {...props}
+          />
+        </AlertDialog.Cancel>
+      </>
+    );
+  }
+);
+
+Cancel.displayName = 'CancelAlertWebDialog';
+
+const Action = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { onOpenChange, open } = useRootContext();
+
+    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 (
+      <>
+        <AlertDialog.Action disabled={disabled ?? undefined} asChild>
+          <Component
+            ref={augmentedRef}
+            onPress={onPress}
+            role='button'
+            disabled={disabled}
+            {...props}
+          />
+        </AlertDialog.Action>
+      </>
+    );
+  }
+);
+
+Action.displayName = 'ActionAlertWebDialog';
+
+const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <AlertDialog.Title asChild>
+      <Component ref={ref} {...props} />
+    </AlertDialog.Title>
+  );
+});
+
+Title.displayName = 'TitleAlertWebDialog';
+
+const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <AlertDialog.Description asChild>
+      <Component ref={ref} {...props} />
+    </AlertDialog.Description>
+  );
+});
+
+Description.displayName = 'DescriptionAlertWebDialog';
+
+export {
+  Action,
+  Cancel,
+  Content,
+  Description,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
+  useRootContext,
+};

package/dist/generated/components/primitives/alert-dialog/index.ts

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

package/dist/generated/components/primitives/alert-dialog/types.ts

@@ -0,0 +1,48 @@
+import type { ForceMountable } from '@rnr/types';
+
+type AlertDialogRootProps = {
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
+  defaultOpen?: boolean;
+};
+
+interface RootContext {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+}
+
+interface AlertDialogPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+type AlertDialogOverlayProps = ForceMountable;
+
+type AlertDialogContentProps = ForceMountable & {
+  /**
+   * Platform: WEB ONLY
+   */
+  onOpenAutoFocus?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onCloseAutoFocus?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onEscapeKeyDown?: (ev: Event) => void;
+};
+
+export type {
+  AlertDialogRootProps,
+  AlertDialogPortalProps,
+  AlertDialogOverlayProps,
+  AlertDialogContentProps,
+  RootContext,
+};

package/dist/generated/components/primitives/aspect-ratio.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { SlottableViewProps } from '@rnr/types';
+
+interface AspectRatioRootProps {
+  ratio?: number;
+  style?: ViewStyle;
+}
+
+export type { AspectRatioRootProps };
+
+const Root = React.forwardRef<
+  React.ElementRef<typeof View>,
+  Omit<SlottableViewProps, 'style'> & AspectRatioRootProps
+>(({ asChild, ratio = 1, style, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} style={[style, { aspectRatio: ratio }]} {...props} />;
+});
+
+Root.displayName = 'RootAspectRatio';
+
+export { Root };

package/dist/generated/components/primitives/avatar/ types.ts

@@ -0,0 +1,10 @@
+interface AvatarRootProps {
+  alt: string;
+}
+
+interface AvatarImageProps {
+  children?: React.ReactNode;
+  onLoadingStatusChange?: (status: 'error' | 'loaded') => void;
+}
+
+export type { AvatarRootProps, AvatarImageProps };

package/dist/generated/components/primitives/avatar/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+  ImageErrorEventData,
+  ImageLoadEventData,
+  NativeSyntheticEvent,
+  Image as RNImage,
+  View,
+} from 'react-native';
+import * as Slot from '@rnr/slot';
+import { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
+import { AvatarImageProps, AvatarRootProps } from './types';
+
+type AvatarState = 'loading' | 'error' | 'loaded';
+
+interface IRootContext extends AvatarRootProps {
+  status: AvatarState;
+  setStatus: (status: AvatarState) => void;
+}
+
+const RootContext = React.createContext<IRootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AvatarRootProps>(
+  ({ asChild, alt, ...viewProps }, ref) => {
+    const [status, setStatus] = React.useState<AvatarState>('loading');
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RootContext.Provider value={{ alt, status, setStatus }}>
+        <Component ref={ref} {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootAvatar';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error('Avatar compound components cannot be rendered outside the Avatar component');
+  }
+  return context;
+}
+
+const Image = React.forwardRef<
+  React.ElementRef<typeof RNImage>,
+  Omit<ComponentPropsWithAsChild<typeof RNImage>, 'alt'> & AvatarImageProps
+>(
+  (
+    { asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props },
+    ref
+  ) => {
+    const { alt, setStatus, status } = useRootContext();
+
+    const onLoad = React.useCallback(
+      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+        setStatus('loaded');
+        onLoadingStatusChange?.('loaded');
+        onLoadProps?.(e);
+      },
+      [onLoadProps]
+    );
+
+    const onError = React.useCallback(
+      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+        setStatus('error');
+        onLoadingStatusChange?.('error');
+        onErrorProps?.(e);
+      },
+      [onErrorProps]
+    );
+
+    if (status === 'error') {
+      return null;
+    }
+
+    const Component = asChild ? Slot.Image : RNImage;
+    return <Component ref={ref} alt={alt} onLoad={onLoad} onError={onError} {...props} />;
+  }
+);
+
+Image.displayName = 'ImageAvatar';
+
+const Fallback = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const { alt, status } = useRootContext();
+
+  if (status !== 'error') {
+    return null;
+  }
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role={'img'} aria-label={alt} {...props} />;
+});
+
+Fallback.displayName = 'FallbackAvatar';
+
+export { Fallback, Image, Root };