@react-native-reusables/cli 0.0.9 → 0.0.11

package/README.md

@@ -1,7 +1,97 @@
 # React Native Reusables CLI
 
-> This project uses code from shadcn.
-<br />
-> The code is licensed under the MIT License.
-<br />
-> https://github.com/shadcn-ui/ui
+> Please follow [the initial setup steps](https://rnr-docs.vercel.app/getting-started/initial-setup/) before using
+
+A CLI to add [react-native-reusables](https://rnr-docs.vercel.app/getting-started/introduction/) components to your project. When components depend on other components and/or primitives, they will also be added to your project.
+
+## How to use
+
+Use the following command _(with optional arugments and flags)_:
+
+```bash
+npx @react-native-reusables/cli@latest add
+```
+
+### Arguments
+
+If you do not add arguments, you will be promted to select the `ui` components you would like to add to your project.
+
+#### UI Components
+
+- `accordion`
+- `alert-dialog`
+- `aspect-ratio`
+- `avatar`
+- `badge`
+- `button`
+- `card`
+- `checkbox`
+- `collapsible`
+- `context-menu`
+- `dialog`
+- `dropdown-menu`
+- `hover-card`
+- `input`
+- `label`
+- `menubar`
+- `navigation-menu`
+- `popover`
+- `radio-group`
+- `select`
+- `separator`
+- `skeleton`
+- `switch`
+- `table`
+- `tabs`
+- `text`
+- `textarea`
+- `toggle`
+- `toggle-group`
+- `tooltip`
+- `typography`
+
+#### Primitive Components
+
+- `accordion-primitive`
+- `alert-dialog-primitive`
+- `aspect-ratio-primitive`
+- `avatar-primitive`
+- `checkbox-primitive`
+- `collapsible-primitive`
+- `context-menu-primitive`
+- `dialog-primitive`
+- `dropdown-menu-primitive`
+- `hover-card-primitive`
+- `label-primitive`
+- `menubar-primitive`
+- `navigation-menu-primitive`
+- `popover-primitive`
+- `progress-primitive`
+- `radio-group-primitive`
+- `select-primitive`
+- `separator-primitive`
+- `slider-primitive`
+- `switch-primitive`
+- `table-primitive`
+- `tabs-primitive`
+- `toast-primitive`
+- `toggle-primitive`
+- `toggle-group-primitive`
+- `toolbar-primitive`
+- `tooltip-primitive`
+- `hooks-primitive`
+- `portal-primitive`
+- `slot-primitive`
+- `types-primitive`
+- `utils-primitive`
+
+### Flags
+
+- `-o` or `--overwrite`: Overwrite existing files. Default to `false`
+- `-c <cmd>` or `--cwd <cwd>`: The working directory. Defaults to the current directory.
+
+```mdx
+This project uses code from shadcn.
+The code is licensed under the MIT License.
+https://github.com/shadcn-ui/ui
+```

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

@@ -0,0 +1,216 @@
+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 {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionRootProps,
+  RootContext,
+} from './types';
+import { useControllableState } from '@rnr/hooks';
+
+const AccordionContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AccordionRootProps>(
+  (
+    {
+      asChild,
+      type,
+      disabled,
+      collapsible = true,
+      value: valueProp,
+      onValueChange: onValueChangeProps,
+      defaultValue,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
+      (string | undefined) | string[]
+    >({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProps as (state: string | string[] | undefined) => void,
+    });
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionContext.Provider
+        value={{
+          type,
+          disabled,
+          collapsible,
+          value,
+          onValueChange,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeAccordion';
+
+function useRootContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      'Accordion compound components cannot be rendered outside the Accordion component'
+    );
+  }
+  return context;
+}
+
+type AccordionItemContext = AccordionItemProps & {
+  nativeID: string;
+  isExpanded: boolean;
+};
+
+const AccordionItemContext = React.createContext<AccordionItemContext | null>(null);
+
+const Item = React.forwardRef<ViewRef, SlottableViewProps & AccordionItemProps>(
+  ({ asChild, value, disabled, ...viewProps }, ref) => {
+    const { value: rootValue } = useRootContext();
+    const nativeID = React.useId();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionItemContext.Provider
+        value={{
+          value,
+          disabled,
+          nativeID,
+          isExpanded: isItemExpanded(rootValue, value),
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemNativeAccordion';
+
+function useItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionItem compound components cannot be rendered outside the AccordionItem component'
+    );
+  }
+  return context;
+}
+
+const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const { disabled: rootDisabled } = useRootContext();
+  const { disabled: itemDisabled, isExpanded } = useItemContext();
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      ref={ref}
+      role='heading'
+      aria-expanded={isExpanded}
+      aria-disabled={rootDisabled ?? itemDisabled}
+      {...props}
+    />
+  );
+});
+
+Header.displayName = 'HeaderNativeAccordion';
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
+    const {
+      disabled: rootDisabled,
+      type,
+      onValueChange,
+      value: rootValue,
+      collapsible,
+    } = useRootContext();
+    const { nativeID, disabled: itemDisabled, value, isExpanded } = useItemContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (rootDisabled || itemDisabled) return;
+      if (type === 'single') {
+        const newValue = collapsible ? (value === rootValue ? undefined : value) : value;
+        onValueChange(newValue);
+      }
+      if (type === 'multiple') {
+        const rootToArray = toStringArray(rootValue);
+        const newValue = collapsible
+          ? rootToArray.includes(value)
+            ? rootToArray.filter((val) => val !== value)
+            : rootToArray.concat(value)
+          : [...new Set(rootToArray.concat(value))];
+        // @ts-ignore - `newValue` is of type `string[]` which is OK
+        onValueChange(newValue);
+      }
+      onPressProp?.(ev);
+    }
+
+    const isDisabled = disabledProp || rootDisabled || itemDisabled;
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        key={`${nativeID}-${JSON.stringify(rootValue)}-${isDisabled}-${collapsible}-${type}`}
+        nativeID={nativeID}
+        aria-disabled={isDisabled}
+        role='button'
+        onPress={onPress}
+        accessibilityState={{
+          expanded: isExpanded,
+          disabled: isDisabled,
+        }}
+        disabled={isDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeAccordion';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & AccordionContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { type } = useRootContext();
+    const { nativeID, isExpanded } = useItemContext();
+
+    if (!forceMount) {
+      if (!isExpanded) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-hidden={!(forceMount || isExpanded)}
+        aria-labelledby={nativeID}
+        role={type === 'single' ? 'region' : 'summary'}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeAccordion';
+
+export { Content, Header, Item, Root, Trigger, useRootContext, useItemContext };
+
+function toStringArray(value?: string | string[]) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
+
+function isItemExpanded(rootValue: string | string[] | undefined, value: string) {
+  return Array.isArray(rootValue) ? rootValue.includes(value) : rootValue === value;
+}

package/dist/generated/components/primitives/accordion/accordion.web.tsx

@@ -0,0 +1,295 @@
+import * as Accordion from '@radix-ui/react-accordion';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import type { AccordionContentProps, AccordionItemProps, AccordionRootProps } from './types';
+
+function useIsomorphicLayoutEffect(
+  effect: React.EffectCallback,
+  dependencies?: React.DependencyList
+) {
+  if (typeof window === 'undefined') {
+    React.useEffect(effect, dependencies);
+  } else {
+    React.useLayoutEffect(effect, dependencies);
+  }
+}
+
+const AccordionContext = React.createContext<AccordionRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AccordionRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      onValueChange: onValueChangeProps,
+      defaultValue,
+      type,
+      disabled,
+      dir,
+      orientation = 'vertical',
+      collapsible,
+      ...props
+    },
+    ref
+  ) => {
+    const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
+      (string | undefined) | string[]
+    >({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProps as (state: string | string[] | undefined) => void,
+    });
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionContext.Provider
+        value={
+          {
+            value,
+            onValueChange,
+            type,
+            disabled,
+            dir,
+            orientation,
+          } as AccordionRootProps
+        }
+      >
+        <Accordion.Root
+          asChild
+          value={value as any}
+          onValueChange={onValueChange as any}
+          type={type as any}
+          disabled={disabled}
+          dir={dir}
+          orientation={orientation}
+          collapsible={collapsible}
+        >
+          <Component ref={ref} {...props} />
+        </Accordion.Root>
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebAccordion';
+
+function useRootContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      'Accordion compound components cannot be rendered outside the Accordion component'
+    );
+  }
+  return context;
+}
+
+const AccordionItemContext = React.createContext<
+  (AccordionItemProps & { isExpanded: boolean }) | null
+>(null);
+
+const Item = React.forwardRef<ViewRef, AccordionItemProps & SlottableViewProps>(
+  ({ asChild, value: itemValue, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { value, orientation, disabled: disabledRoot } = useRootContext();
+
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        const isExpanded = Array.isArray(value) ? value.includes(itemValue) : value === itemValue;
+        augRef.dataset.state = isExpanded ? 'open' : 'closed';
+      }
+    }, [value, itemValue]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        augRef.dataset.orientation = orientation;
+        if (disabled || disabledRoot) {
+          augRef.dataset.disabled = 'true';
+        } else {
+          augRef.dataset.disabled = undefined;
+        }
+      }
+    }, [orientation, disabled, disabledRoot]);
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionItemContext.Provider
+        value={{
+          value: itemValue,
+          disabled,
+          isExpanded: isItemExpanded(value, itemValue),
+        }}
+      >
+        <Accordion.Item value={itemValue} disabled={disabled} asChild>
+          <Component ref={augmentedRef} {...props} />
+        </Accordion.Item>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemWebAccordion';
+
+function useItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionItem compound components cannot be rendered outside the AccordionItem component'
+    );
+  }
+  return context;
+}
+
+const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const augmentedRef = useAugmentedRef({ ref });
+  const { disabled, isExpanded } = useItemContext();
+  const { orientation, disabled: disabledRoot } = useRootContext();
+
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLDivElement;
+      augRef.dataset.state = isExpanded ? 'open' : 'closed';
+    }
+  }, [isExpanded]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLDivElement;
+      augRef.dataset.orientation = orientation;
+      if (disabled || disabledRoot) {
+        augRef.dataset.disabled = 'true';
+      } else {
+        augRef.dataset.disabled = undefined;
+      }
+    }
+  }, [orientation, disabled, disabledRoot]);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Accordion.Header asChild>
+      <Component ref={augmentedRef} {...props} />
+    </Accordion.Header>
+  );
+});
+
+Header.displayName = 'HeaderWebAccordion';
+
+const HIDDEN_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  zIndex: -999999,
+  opacity: 0,
+};
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, disabled: disabledProp, ...props }, ref) => {
+    const { disabled: disabledRoot } = useRootContext();
+    const { disabled, isExpanded } = useItemContext();
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const augmentedRef = useAugmentedRef({ ref });
+
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+
+        augRef.dataset.state = isExpanded ? 'expanded' : 'closed';
+      }
+    }, [isExpanded]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+
+        if (disabled || disabledRoot || disabledProp) {
+          augRef.dataset.disabled = 'true';
+        } else {
+          augRef.dataset.disabled = undefined;
+        }
+      }
+    }, [disabled, disabledRoot, disabledProp]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (triggerRef.current) {
+        triggerRef.current.disabled = true;
+      }
+    }, []);
+
+    const isDisabled = disabledProp ?? disabledRoot ?? disabled;
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <>
+        <Accordion.Trigger ref={triggerRef} aria-hidden tabIndex={-1} style={HIDDEN_STYLE} />
+        <Accordion.Trigger disabled={isDisabled} asChild>
+          <Component
+            ref={augmentedRef}
+            role='button'
+            disabled={isDisabled}
+            {...props}
+            onPress={() => {
+              if (triggerRef.current && !isDisabled) {
+                triggerRef.current.disabled = false;
+                triggerRef.current.click();
+                triggerRef.current.disabled = true;
+              }
+            }}
+          />
+        </Accordion.Trigger>
+      </>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebAccordion';
+
+const Content = React.forwardRef<ViewRef, AccordionContentProps & SlottableViewProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+
+    const { orientation, disabled: disabledRoot } = useRootContext();
+    const { disabled, isExpanded } = useItemContext();
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        augRef.dataset.state = isExpanded ? 'expanded' : 'closed';
+      }
+    }, [isExpanded]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        augRef.dataset.orientation = orientation;
+
+        if (disabled || disabledRoot) {
+          augRef.dataset.disabled = 'true';
+        } else {
+          augRef.dataset.disabled = undefined;
+        }
+      }
+    }, [orientation, disabled, disabledRoot]);
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Accordion.Content forceMount={forceMount} asChild>
+        <Component ref={augmentedRef} {...props} />
+      </Accordion.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebAccordion';
+
+export { Content, Header, Item, Root, Trigger, useItemContext, useRootContext };
+
+function isItemExpanded(rootValue: string | string[] | undefined, value: string) {
+  return Array.isArray(rootValue) ? rootValue.includes(value) : rootValue === value;
+}

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

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

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

@@ -0,0 +1,45 @@
+import { ForceMountable } from '@rnr/types';
+
+type RootContext = {
+  type: 'single' | 'multiple';
+  value: (string | undefined) | string[];
+  onValueChange: (value: string | undefined) => void | ((value: string[]) => void);
+  collapsible: boolean;
+  disabled?: boolean;
+};
+
+type SingleRootProps = {
+  type: 'single';
+  defaultValue?: string | undefined;
+  value?: string | undefined;
+  onValueChange?: (value: string | undefined) => void;
+};
+
+type MultipleRootProps = {
+  type: 'multiple';
+  defaultValue?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+
+type AccordionRootProps = (SingleRootProps | MultipleRootProps) & {
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  collapsible?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  orientation?: 'vertical' | 'horizontal';
+};
+
+type AccordionItemProps = {
+  value: string;
+  disabled?: boolean;
+};
+type AccordionContentProps = ForceMountable;
+
+export type { AccordionContentProps, AccordionItemProps, AccordionRootProps, RootContext };