@react-native-reusables/cli 0.0.18 → 0.1.0

package/__generated/components/primitives/slot.tsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import {
-  Image as RNImage,
-  Pressable as RNPressable,
-  Text as RNText,
-  View as RNView,
-  StyleSheet,
-  type PressableStateCallbackType,
-  type ImageProps as RNImageProps,
-  type ImageStyle as RNImageStyle,
-  type PressableProps as RNPressableProps,
-  type TextProps as RNTextProps,
-  type ViewProps as RNViewProps,
-  type StyleProp,
-} from 'react-native';
-
-const Pressable = React.forwardRef<React.ElementRef<typeof RNPressable>, RNPressableProps>(
-  (props, forwardedRef) => {
-    const { children, ...pressableSlotProps } = props;
-
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Pressable - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNPressable>,
-      React.ElementRef<typeof RNPressable>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(pressableSlotProps, children.props),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
-  }
-);
-
-Pressable.displayName = 'SlotPressable';
-
-const View = React.forwardRef<React.ElementRef<typeof RNView>, RNViewProps>(
-  (props, forwardedRef) => {
-    const { children, ...viewSlotProps } = props;
-
-    if (!React.isValidElement(children)) {
-      console.log('Slot.View - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNView>,
-      React.ElementRef<typeof RNView>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(viewSlotProps, children.props),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
-  }
-);
-
-View.displayName = 'SlotView';
-
-const Text = React.forwardRef<React.ElementRef<typeof RNText>, RNTextProps>(
-  (props, forwardedRef) => {
-    const { children, ...textSlotProps } = props;
-
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Text - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNText>,
-      React.ElementRef<typeof RNText>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(textSlotProps, children.props),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
-  }
-);
-
-Text.displayName = 'SlotText';
-
-type ImageSlotProps = RNImageProps & {
-  children?: React.ReactNode;
-};
-
-const Image = React.forwardRef<React.ElementRef<typeof RNImage>, ImageSlotProps>(
-  (props, forwardedRef) => {
-    const { children, ...imageSlotProps } = props;
-
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Image - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNImage>,
-      React.ElementRef<typeof RNImage>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(imageSlotProps, children.props),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
-  }
-);
-
-Image.displayName = 'SlotImage';
-
-export { Image, Pressable, Text, View };
-
-// This project uses code from WorkOS/Radix Primitives.
-// The code is licensed under the MIT License.
-// https://github.com/radix-ui/primitives/tree/main
-
-function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
-  return (node: T) =>
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T>).current = node;
-      }
-    });
-}
-
-type AnyProps = Record<string, any>;
-
-function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
-  // all child props should override
-  const overrideProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      // if the handler exists on both, we compose them
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args: unknown[]) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      }
-      // but if it exists only on the slot, we use only this one
-      else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    }
-    // if it's `style`, we merge them
-    else if (propName === 'style') {
-      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
-    } else if (propName === 'className') {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
-    }
-  }
-
-  return { ...slotProps, ...overrideProps };
-}
-
-type PressableStyle = RNPressableProps['style'];
-type ImageStyle = StyleProp<RNImageStyle>;
-type Style = PressableStyle | ImageStyle;
-
-function combineStyles(slotStyle?: Style, childValue?: Style) {
-  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
-    return (state: PressableStateCallbackType) => {
-      return StyleSheet.flatten([slotStyle(state), childValue(state)]);
-    };
-  }
-  if (typeof slotStyle === 'function') {
-    return (state: PressableStateCallbackType) => {
-      return childValue ? StyleSheet.flatten([slotStyle(state), childValue]) : slotStyle(state);
-    };
-  }
-  if (typeof childValue === 'function') {
-    return (state: PressableStateCallbackType) => {
-      return slotStyle ? StyleSheet.flatten([slotStyle, childValue(state)]) : childValue(state);
-    };
-  }
-
-  return StyleSheet.flatten([slotStyle, childValue].filter(Boolean));
-}
-
-export function isTextChildren(
-  children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode)
-) {
-  return Array.isArray(children)
-    ? children.every((child) => typeof child === 'string')
-    : typeof children === 'string';
-}

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

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

package/__generated/components/primitives/switch/switch.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import type { SwitchRootProps } from './types';
-
-const Root = React.forwardRef<
-  PressableRef,
-  SlottablePressableProps & SwitchRootProps
->(
-  (
-    {
-      asChild,
-      checked,
-      onCheckedChange,
-      disabled,
-      onPress: onPressProp,
-      'aria-valuetext': ariaValueText,
-      ...props
-    },
-    ref
-  ) => {
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      onCheckedChange(!checked);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled}
-        role='switch'
-        aria-checked={checked}
-        aria-valuetext={ariaValueText ?? checked ? 'on' : 'off'}
-        onPress={onPress}
-        accessibilityState={{
-          checked,
-          disabled,
-        }}
-        disabled={disabled}
-        {...props}
-      />
-    );
-  }
-);
-
-Root.displayName = 'RootNativeSwitch';
-
-const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return <Component ref={ref} role='presentation' {...props} />;
-  }
-);
-
-Thumb.displayName = 'ThumbNativeSwitch';
-
-export { Root, Thumb };

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

@@ -1,67 +0,0 @@
-import * as Switch from '@radix-ui/react-switch';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import type { SwitchRootProps } from './types';
-
-const Root = React.forwardRef<PressableRef, SlottablePressableProps & SwitchRootProps>(
-  (
-    {
-      asChild,
-      checked,
-      onCheckedChange,
-      disabled,
-      onPress: onPressProp,
-      onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
-    function onPress(ev: GestureResponderEvent) {
-      onCheckedChange(!checked);
-      onPressProp?.(ev);
-    }
-
-    function onKeyDown(ev: React.KeyboardEvent) {
-      onKeyDownProp?.(ev);
-      if (ev.key === ' ') {
-        onCheckedChange(!checked);
-      }
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Switch.Root checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} asChild>
-        <Component
-          ref={ref}
-          disabled={disabled}
-          onPress={onPress}
-          // @ts-expect-error Web only
-          onKeyDown={onKeyDown}
-          {...props}
-        />
-      </Switch.Root>
-    );
-  }
-);
-
-Root.displayName = 'RootWebSwitch';
-
-const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return (
-    <Switch.Thumb asChild>
-      <Component ref={ref} {...props} />
-    </Switch.Thumb>
-  );
-});
-
-Thumb.displayName = 'ThumbWebSwitch';
-
-export { Root, Thumb };

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

@@ -1,11 +0,0 @@
-interface SwitchRootProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  disabled?: boolean;
-  /**
-   * Platform: WEB ONLY
-   */
-  onKeyDown?: (ev: React.KeyboardEvent) => void;
-}
-
-export type { SwitchRootProps };

package/__generated/components/primitives/table.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Pressable, View } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component role='table' ref={ref} {...props} />;
-});
-Root.displayName = 'RootTable';
-
-const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component role='rowheader' ref={ref} {...props} />;
-});
-Header.displayName = 'HeaderTable';
-
-const Row = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return <Component ref={ref} role='row' {...props} />;
-  }
-);
-Row.displayName = 'RowTable';
-
-const Head = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='columnheader' {...props} />;
-});
-Head.displayName = 'HeadTable';
-
-const Body = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='rowgroup' {...props} />;
-});
-Body.displayName = 'BodyTable';
-
-const Cell = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='cell' {...props} />;
-});
-Cell.displayName = 'CellTable';
-
-const Footer = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='rowgroup' {...props} />;
-});
-Footer.displayName = 'FooterTable';
-
-export { Body, Cell, Footer, Head, Header, Root, Row };

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

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

package/__generated/components/primitives/tabs/tabs.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
-import type { TabsContentProps, TabsRootProps } from './types';
-
-interface RootContext extends TabsRootProps {
-  nativeID: string;
-}
-
-const TabsContext = React.createContext<RootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & TabsRootProps>(
-  (
-    {
-      asChild,
-      value,
-      onValueChange,
-      orientation: _orientation,
-      dir: _dir,
-      activationMode: _activationMode,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const nativeID = React.useId();
-    const Component = asChild ? Slot.View : View;
-    return (
-      <TabsContext.Provider
-        value={{
-          value,
-          onValueChange,
-          nativeID,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </TabsContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootNativeTabs';
-
-function useRootContext() {
-  const context = React.useContext(TabsContext);
-  if (!context) {
-    throw new Error('Tabs compound components cannot be rendered outside the Tabs component');
-  }
-  return context;
-}
-
-const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role='tablist' {...props} />;
-});
-
-List.displayName = 'ListNativeTabs';
-
-const TriggerContext = React.createContext<{ value: string } | null>(null);
-
-const Trigger = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ComponentPropsWithAsChild<typeof Pressable> & {
-    value: string;
-  }
->(({ asChild, onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
-  const { onValueChange, value: rootValue, nativeID } = useRootContext();
-
-  function onPress(ev: GestureResponderEvent) {
-    if (disabled) return;
-    onValueChange(tabValue);
-    onPressProp?.(ev);
-  }
-
-  const Component = asChild ? Slot.Pressable : Pressable;
-  return (
-    <TriggerContext.Provider value={{ value: tabValue }}>
-      <Component
-        ref={ref}
-        nativeID={`${nativeID}-tab-${tabValue}`}
-        aria-disabled={!!disabled}
-        aria-selected={rootValue === tabValue}
-        role='tab'
-        onPress={onPress}
-        accessibilityState={{
-          selected: rootValue === tabValue,
-          disabled: !!disabled,
-        }}
-        disabled={!!disabled}
-        {...props}
-      />
-    </TriggerContext.Provider>
-  );
-});
-
-Trigger.displayName = 'TriggerNativeTabs';
-
-function useTriggerContext() {
-  const context = React.useContext(TriggerContext);
-  if (!context) {
-    throw new Error(
-      'Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component'
-    );
-  }
-  return context;
-}
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & TabsContentProps>(
-  ({ asChild, forceMount, value: tabValue, ...props }, ref) => {
-    const { value: rootValue, nativeID } = useRootContext();
-
-    if (!forceMount) {
-      if (rootValue !== tabValue) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        ref={ref}
-        aria-hidden={!(forceMount || rootValue === tabValue)}
-        aria-labelledby={`${nativeID}-tab-${tabValue}`}
-        role='tabpanel'
-        {...props}
-      />
-    );
-  }
-);
-
-Content.displayName = 'ContentNativeTabs';
-
-export { Content, List, Root, Trigger, useRootContext, useTriggerContext };

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

@@ -1,97 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs';
-import * as React from 'react';
-import { Pressable, View } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
-import type { TabsContentProps, TabsRootProps } from './types';
-
-const TabsContext = React.createContext<TabsRootProps | null>(null);
-const Root = React.forwardRef<ViewRef, SlottableViewProps & TabsRootProps>(
-  ({ asChild, value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <TabsContext.Provider
-        value={{
-          value,
-          onValueChange,
-        }}
-      >
-        <Tabs.Root
-          value={value}
-          onValueChange={onValueChange}
-          orientation={orientation}
-          dir={dir}
-          activationMode={activationMode}
-          asChild
-        >
-          <Component ref={ref} {...viewProps} />
-        </Tabs.Root>
-      </TabsContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootWebTabs';
-
-function useRootContext() {
-  const context = React.useContext(TabsContext);
-  if (!context) {
-    throw new Error('Tabs compound components cannot be rendered outside the Tabs component');
-  }
-  return context;
-}
-
-const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return (
-    <Tabs.List asChild>
-      <Component ref={ref} {...props} />
-    </Tabs.List>
-  );
-});
-
-List.displayName = 'ListWebTabs';
-
-const TriggerContext = React.createContext<{ value: string } | null>(null);
-const Trigger = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ComponentPropsWithAsChild<typeof Pressable> & {
-    value: string;
-  }
->(({ asChild, value: tabValue, ...props }, ref) => {
-  const Component = asChild ? Slot.Pressable : Pressable;
-  return (
-    <TriggerContext.Provider value={{ value: tabValue }}>
-      <Tabs.Trigger value={tabValue} asChild>
-        <Component ref={ref} {...props} />
-      </Tabs.Trigger>
-    </TriggerContext.Provider>
-  );
-});
-
-Trigger.displayName = 'TriggerWebTabs';
-
-function useTriggerContext() {
-  const context = React.useContext(TriggerContext);
-  if (!context) {
-    throw new Error(
-      'Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component'
-    );
-  }
-  return context;
-}
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & TabsContentProps>(
-  ({ asChild, forceMount, value, ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Tabs.Content value={value} asChild>
-        <Component ref={ref} {...props} />
-      </Tabs.Content>
-    );
-  }
-);
-
-Content.displayName = 'ContentWebTabs';
-
-export { Content, List, Root, Trigger, useRootContext, useTriggerContext };

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

@@ -1,24 +0,0 @@
-import type { ForceMountable } from '@rnr/types';
-
-interface TabsRootProps {
-  value: string;
-  onValueChange: (value: string) => void;
-  /**
-   * Platform: WEB ONLY
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * Platform: WEB ONLY
-   */
-  dir?: 'ltr' | 'rtl';
-  /**
-   * Platform: WEB ONLY
-   */
-  activationMode?: 'automatic' | 'manual';
-}
-
-interface TabsContentProps extends ForceMountable {
-  value: string;
-}
-
-export type { TabsContentProps, TabsRootProps };