@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/radio-group/radio-group.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  ForceMountable,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type { RadioGroupItemProps, RadioGroupRootProps } from './types';
+
+const RadioGroupContext = React.createContext<RadioGroupRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & RadioGroupRootProps>(
+  ({ asChild, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          value,
+          disabled,
+          onValueChange,
+        }}
+      >
+        <Component ref={ref} role='radiogroup' {...viewProps} />
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootRadioGroup';
+
+function useRadioGroupContext() {
+  const context = React.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error(
+      'RadioGroup compound components cannot be rendered outside the RadioGroup component'
+    );
+  }
+  return context;
+}
+
+interface RadioItemContext {
+  itemValue: string | undefined;
+}
+
+const RadioItemContext = React.createContext<RadioItemContext | null>(null);
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & RadioGroupItemProps>(
+  (
+    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
+    ref
+  ) => {
+    const { disabled, value, onValueChange } = useRadioGroupContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled || disabledProp) return;
+      onValueChange(itemValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <RadioItemContext.Provider
+        value={{
+          itemValue: itemValue,
+        }}
+      >
+        <Component
+          ref={ref}
+          role='radio'
+          onPress={onPress}
+          aria-checked={value === itemValue}
+          disabled={(disabled || disabledProp) ?? false}
+          accessibilityState={{
+            disabled: (disabled || disabledProp) ?? false,
+            checked: value === itemValue,
+          }}
+          {...props}
+        />
+      </RadioItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemRadioGroup';
+
+function useRadioItemContext() {
+  const context = React.useContext(RadioItemContext);
+  if (!context) {
+    throw new Error(
+      'RadioItem compound components cannot be rendered outside the RadioItem component'
+    );
+  }
+  return context;
+}
+
+const Indicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { value } = useRadioGroupContext();
+    const { itemValue } = useRadioItemContext();
+
+    if (!forceMount) {
+      if (value !== itemValue) {
+        return null;
+      }
+    }
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} role='presentation' {...props} />;
+  }
+);
+
+Indicator.displayName = 'IndicatorRadioGroup';
+
+export { Indicator, Item, Root };

package/dist/generated/components/primitives/radio-group/radio-group.web.tsx

@@ -0,0 +1,78 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import * as React from 'react';
+import { GestureResponderEvent, Pressable, View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  ForceMountable,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type { RadioGroupItemProps, RadioGroupRootProps } from './types';
+const RadioGroupContext = React.createContext<RadioGroupRootProps | null>(null);
+const Root = React.forwardRef<ViewRef, SlottableViewProps & RadioGroupRootProps>(
+  ({ asChild, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          value,
+          disabled,
+          onValueChange,
+        }}
+      >
+        <RadioGroup.Root value={value} onValueChange={onValueChange} disabled={disabled} asChild>
+          <Component ref={ref} {...viewProps} />
+        </RadioGroup.Root>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootRadioGroup';
+function useRadioGroupContext() {
+  const context = React.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error(
+      'RadioGroup compound components cannot be rendered outside the RadioGroup component'
+    );
+  }
+  return context;
+}
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & RadioGroupItemProps>(
+  ({ asChild, value, onPress: onPressProps, ...props }, ref) => {
+    const { onValueChange } = useRadioGroupContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (onPressProps) {
+        onPressProps(ev);
+      }
+      onValueChange(value);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <RadioGroup.Item value={value} asChild>
+        <Component ref={ref} onPress={onPress} {...props} />
+      </RadioGroup.Item>
+    );
+  }
+);
+
+Item.displayName = 'ItemRadioGroup';
+
+const Indicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RadioGroup.Indicator asChild>
+        <Component ref={ref} {...props} />
+      </RadioGroup.Indicator>
+    );
+  }
+);
+
+Indicator.displayName = 'IndicatorRadioGroup';
+
+export { Indicator, Item, Root };

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

@@ -0,0 +1,15 @@
+interface RadioGroupRootProps {
+  value: string | undefined;
+  onValueChange: (val: string) => void;
+  disabled?: boolean;
+}
+
+interface RadioGroupItemProps {
+  value: string;
+  /**
+   * nativeID of the label element that describes this radio group item
+   */
+  'aria-labelledby': string;
+}
+
+export type { RadioGroupRootProps, RadioGroupItemProps };

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

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

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

@@ -0,0 +1,455 @@
+import { useControllableState, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
+import { Portal as RNPPortal } from '@rnr/portal';
+import * as Slot from '@rnr/slot';
+import type {
+  ForceMountable,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import {
+  BackHandler,
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
+import type {
+  RootContext,
+  SelectContentProps,
+  SelectItemProps,
+  SelectOverlayProps,
+  SelectPortalProps,
+  SelectRootProps,
+  SelectSeparatorProps,
+  SelectValueProps,
+} 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 & SelectRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange: onValueChangeProp,
+      open: openProp,
+      defaultOpen,
+      onOpenChange: onOpenChangeProp,
+      disabled,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const [value, onValueChange] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProp,
+    });
+    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={{
+          value,
+          onValueChange,
+          open,
+          onOpenChange,
+          disabled,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeSelect';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error('Select compound components cannot be rendered outside the Select 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, disabled: disabledRoot, 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 });
+      });
+      onOpenChange(!open);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={triggerRef}
+        aria-disabled={disabled ?? undefined}
+        role='combobox'
+        onPress={onPress}
+        disabled={disabled ?? disabledRoot}
+        aria-expanded={open}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeSelect';
+
+const Value = React.forwardRef<TextRef, SlottableTextProps & SelectValueProps>(
+  ({ asChild, placeholder, ...props }, ref) => {
+    const { value } = useRootContext();
+    const Component = asChild ? Slot.Text : Text;
+    return (
+      <Component ref={ref} {...props}>
+        {value?.label ?? placeholder}
+      </Component>
+    );
+  }
+);
+
+Value.displayName = 'ValueNativeSelect';
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset.
+ */
+function Portal({ forceMount, hostName, children }: SelectPortalProps) {
+  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 & SelectOverlayProps>(
+  ({ 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 = 'OverlayNativeSelect';
+
+/**
+ * @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 & SelectContentProps
+>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align = 'start',
+      side = 'bottom',
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      position: _position,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      open,
+      onOpenChange,
+      contentLayout,
+      nativeID,
+      triggerPosition,
+      setContentLayout,
+      setTriggerPosition,
+    } = 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='list'
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeSelect';
+
+const ItemContext = React.createContext<{
+  itemValue: string;
+  label: string;
+} | null>(null);
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & SelectItemProps>(
+  (
+    {
+      asChild,
+      value: itemValue,
+      label,
+      onPress: onPressProp,
+      disabled = false,
+      closeOnPress = true,
+      ...props
+    },
+    ref
+  ) => {
+    const { onOpenChange, value, onValueChange, setTriggerPosition, setContentLayout } =
+      useRootContext();
+    function onPress(ev: GestureResponderEvent) {
+      if (closeOnPress) {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      }
+
+      onValueChange({ value: itemValue, label });
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <ItemContext.Provider value={{ itemValue, label }}>
+        <Component
+          ref={ref}
+          role='option'
+          onPress={onPress}
+          disabled={disabled}
+          aria-checked={value?.value === itemValue}
+          aria-valuetext={label}
+          aria-disabled={!!disabled}
+          accessibilityState={{
+            disabled: !!disabled,
+            checked: value?.value === itemValue,
+          }}
+          {...props}
+        />
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemNativeSelect';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error('Item compound components cannot be rendered outside of an Item component');
+  }
+  return context;
+}
+
+const ItemText = React.forwardRef<TextRef, Omit<SlottableTextProps, 'children'>>(
+  ({ asChild, ...props }, ref) => {
+    const { label } = useItemContext();
+
+    const Component = asChild ? Slot.Text : Text;
+    return (
+      <Component ref={ref} {...props}>
+        {label}
+      </Component>
+    );
+  }
+);
+
+ItemText.displayName = 'ItemTextNativeSelect';
+
+const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { itemValue } = useItemContext();
+    const { value } = useRootContext();
+
+    if (!forceMount) {
+      if (value?.value !== itemValue) {
+        return null;
+      }
+    }
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} role='presentation' {...props} />;
+  }
+);
+
+ItemIndicator.displayName = 'ItemIndicatorNativeSelect';
+
+const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='group' {...props} />;
+});
+
+Group.displayName = 'GroupNativeSelect';
+
+const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return <Component ref={ref} {...props} />;
+});
+
+Label.displayName = 'LabelNativeSelect';
+
+const Separator = React.forwardRef<ViewRef, SlottableViewProps & SelectSeparatorProps>(
+  ({ asChild, decorative, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />;
+  }
+);
+
+Separator.displayName = 'SeparatorNativeSelect';
+
+const ScrollUpButton = ({ children }: { children?: React.ReactNode; className?: string }) => {
+  return children;
+};
+
+const ScrollDownButton = ({ children }: { children?: React.ReactNode; className?: string }) => {
+  return children;
+};
+
+const Viewport = ({ children }: { children?: React.ReactNode; className?: string }) => {
+  return children;
+};
+
+export {
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Overlay,
+  Portal,
+  Root,
+  ScrollDownButton,
+  ScrollUpButton,
+  Separator,
+  Trigger,
+  Value,
+  Viewport,
+  useItemContext,
+  useRootContext,
+};
+
+export type { Option } from './types';
+
+function onStartShouldSetResponder() {
+  return true;
+}