@react-native-reusables/cli 0.4.0 → 0.5.0-alpha.1

package/package.json

@@ -1,87 +1,14 @@
 {
   "name": "@react-native-reusables/cli",
-  "version": "0.4.0",
-  "description": "Add react-native-reusables to your project.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "mrzachnugent",
-    "url": "https://twitter.com/mrzachnugent"
-  },
+  "version": "0.5.0-alpha.1",
+  "type": "module",
+  "description": "A CLI for React Native Reusables",
+  "main": "bin.cjs",
+  "bin": "bin.cjs",
   "repository": {
     "type": "git",
     "url": "https://github.com/mrzachnugent/react-native-reusables.git",
-    "directory": "packages/cli"
-  },
-  "files": [
-    "dist",
-    "__generated"
-  ],
-  "keywords": [
-    "expo",
-    "react-native",
-    "universal-components",
-    "components",
-    "tailwind",
-    "nativewind",
-    "radix-ui",
-    "shadcn"
-  ],
-  "type": "module",
-  "exports": "./dist/index.js",
-  "bin": "./dist/index.js",
-  "dependencies": {
-    "@antfu/ni": "^24.3.0",
-    "@babel/core": "^7.26.0",
-    "@babel/parser": "^7.22.6",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "chalk": "5.2.0",
-    "commander": "^10.0.0",
-    "cosmiconfig": "^8.1.3",
-    "diff": "^5.1.0",
-    "execa": "^7.0.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.0",
-    "https-proxy-agent": "^6.2.0",
-    "lodash.template": "^4.5.0",
-    "node-fetch": "^3.3.0",
-    "ora": "^6.1.2",
-    "prompts": "^2.4.2",
-    "recast": "^0.23.2",
-    "ts-morph": "^18.0.0",
-    "tsconfig-paths": "^4.2.0",
-    "zod": "^3.20.2"
-  },
-  "devDependencies": {
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.2",
-    "rimraf": "^4.1.3",
-    "tsup": "^6.6.3",
-    "tsx": "^4.7.1",
-    "type-fest": "^3.8.0",
-    "typescript": "^5.8.3",
-    "@rnr/reusables": "0.0.0",
-    "@rnr/starter-base": "1.0.0"
+    "directory": "apps/cli"
   },
-  "scripts": {
-    "gen": "rm -rf __generated && tsx scripts/generate-source-files.ts",
-    "dev": "pnpm gen && tsup --watch",
-    "build": "pnpm gen && tsup",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf node_modules && rm -rf dist && rm -rf __generated",
-    "start:dev": "node dist/index.js",
-    "start": "node dist/index.js",
-    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
-    "release": "changeset version",
-    "pub:beta": "pnpm publish --no-git-checks --access public --tag beta",
-    "pub:next": "pnpm publish --no-git-checks --access public --tag next",
-    "pub:release": "pnpm publish --access public",
-    "test": "vitest run"
-  }
+  "license": "MIT"
 }

package/README.md

@@ -1,63 +0,0 @@
-# React Native Reusables CLI
-
-> 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, 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 prompted to select the `ui` components you would like to add to your project.
-
-#### UI Components
-
-- `accordion`
-- `alert`
-- `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`
-
-### 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/__generated/components/ui/accordion.tsx

@@ -1,125 +0,0 @@
-import * as AccordionPrimitive from '@rn-primitives/accordion';
-import * as React from 'react';
-import { Platform, Pressable, View } from 'react-native';
-import Animated, {
-  Extrapolation,
-  FadeIn,
-  FadeOutUp,
-  LayoutAnimationConfig,
-  LinearTransition,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const Accordion = React.forwardRef<AccordionPrimitive.RootRef, AccordionPrimitive.RootProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <LayoutAnimationConfig skipEntering>
-        <AccordionPrimitive.Root ref={ref} {...props} asChild={Platform.OS !== 'web'}>
-          <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
-        </AccordionPrimitive.Root>
-      </LayoutAnimationConfig>
-    );
-  }
-);
-
-Accordion.displayName = AccordionPrimitive.Root.displayName;
-
-const AccordionItem = React.forwardRef<AccordionPrimitive.ItemRef, AccordionPrimitive.ItemProps>(
-  ({ className, value, ...props }, ref) => {
-    return (
-      <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
-        <AccordionPrimitive.Item
-          ref={ref}
-          className={cn('border-b border-border', className)}
-          value={value}
-          {...props}
-        />
-      </Animated.View>
-    );
-  }
-);
-AccordionItem.displayName = AccordionPrimitive.Item.displayName;
-
-const Trigger = Platform.OS === 'web' ? View : Pressable;
-
-const AccordionTrigger = React.forwardRef<
-  AccordionPrimitive.TriggerRef,
-  AccordionPrimitive.TriggerProps
->(({ className, children, ...props }, ref) => {
-  const { isExpanded } = AccordionPrimitive.useItemContext();
-
-  const progress = useDerivedValue(() =>
-    isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 })
-  );
-  const chevronStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${progress.value * 180}deg` }],
-    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
-  }));
-
-  return (
-    <TextClassContext.Provider value='native:text-lg font-medium web:group-hover:underline'>
-      <AccordionPrimitive.Header className='flex'>
-        <AccordionPrimitive.Trigger ref={ref} {...props} asChild>
-          <Trigger
-            className={cn(
-              'flex flex-row web:flex-1 items-center justify-between py-4 web:transition-all group web:focus-visible:outline-none web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground',
-              className
-            )}
-          >
-            <>{children}</>
-            <Animated.View style={chevronStyle}>
-              <ChevronDown size={18} className={'text-foreground shrink-0'} />
-            </Animated.View>
-          </Trigger>
-        </AccordionPrimitive.Trigger>
-      </AccordionPrimitive.Header>
-    </TextClassContext.Provider>
-  );
-});
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  AccordionPrimitive.ContentRef,
-  AccordionPrimitive.ContentProps
->(({ className, children, ...props }, ref) => {
-  const { isExpanded } = AccordionPrimitive.useItemContext();
-  return (
-    <TextClassContext.Provider value='native:text-lg'>
-      <AccordionPrimitive.Content
-        className={cn(
-          'overflow-hidden text-sm web:transition-all',
-          isExpanded ? 'web:animate-accordion-down' : 'web:animate-accordion-up'
-        )}
-        ref={ref}
-        {...props}
-      >
-        <InnerContent className={cn('pb-4', className)}>{children}</InnerContent>
-      </AccordionPrimitive.Content>
-    </TextClassContext.Provider>
-  );
-});
-
-function InnerContent({ children, className }: { children: React.ReactNode; className?: string }) {
-  if (Platform.OS === 'web') {
-    return <View className={cn('pb-4', className)}>{children}</View>;
-  }
-  return (
-    <Animated.View
-      entering={FadeIn}
-      exiting={FadeOutUp.duration(200)}
-      className={cn('pb-4', className)}
-    >
-      {children}
-    </Animated.View>
-  );
-}
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/__generated/components/ui/alert-dialog.tsx

@@ -1,160 +0,0 @@
-import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
-import * as React from 'react';
-import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { buttonTextVariants, buttonVariants } from '../../components/ui/button';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlayWeb = React.forwardRef<
-  AlertDialogPrimitive.OverlayRef,
-  AlertDialogPrimitive.OverlayProps
->(({ className, ...props }, ref) => {
-  const { open } = AlertDialogPrimitive.useRootContext();
-  return (
-    <AlertDialogPrimitive.Overlay
-      className={cn(
-        'z-50 bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
-        open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
-
-const AlertDialogOverlayNative = React.forwardRef<
-  AlertDialogPrimitive.OverlayRef,
-  AlertDialogPrimitive.OverlayProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <AlertDialogPrimitive.Overlay
-      style={StyleSheet.absoluteFill}
-      className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
-      {...props}
-      ref={ref}
-      asChild
-    >
-      <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
-        {children}
-      </Animated.View>
-    </AlertDialogPrimitive.Overlay>
-  );
-});
-
-AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
-
-const AlertDialogOverlay = Platform.select({
-  web: AlertDialogOverlayWeb,
-  default: AlertDialogOverlayNative,
-});
-
-const AlertDialogContent = React.forwardRef<
-  AlertDialogPrimitive.ContentRef,
-  AlertDialogPrimitive.ContentProps & { portalHost?: string }
->(({ className, portalHost, ...props }, ref) => {
-  const { open } = AlertDialogPrimitive.useRootContext();
-
-  return (
-    <AlertDialogPortal hostName={portalHost}>
-      <AlertDialogOverlay>
-        <AlertDialogPrimitive.Content
-          ref={ref}
-          className={cn(
-            'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg shadow-foreground/10 web:duration-200 rounded-lg',
-            open
-              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
-            className
-          )}
-          {...props}
-        />
-      </AlertDialogOverlay>
-    </AlertDialogPortal>
-  );
-});
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
-  <View className={cn('flex flex-col gap-2', className)} {...props} />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
-  <View
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  AlertDialogPrimitive.TitleRef,
-  AlertDialogPrimitive.TitleProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  AlertDialogPrimitive.DescriptionRef,
-  AlertDialogPrimitive.DescriptionProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm native:text-base text-muted-foreground', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  AlertDialogPrimitive.ActionRef,
-  AlertDialogPrimitive.ActionProps
->(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value={buttonTextVariants({ className })}>
-    <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-  </TextClassContext.Provider>
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  AlertDialogPrimitive.CancelRef,
-  AlertDialogPrimitive.CancelProps
->(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
-    <AlertDialogPrimitive.Cancel
-      ref={ref}
-      className={cn(buttonVariants({ variant: 'outline', className }))}
-      {...props}
-    />
-  </TextClassContext.Provider>
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/__generated/components/ui/alert.tsx

@@ -1,75 +0,0 @@
-import { useTheme } from '@react-navigation/native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { LucideIcon } from 'lucide-react-native';
-import * as React from 'react';
-import { View, type ViewProps } from 'react-native';
-import { cn } from '../../lib/utils';
-import { Text } from './text';
-
-const alertVariants = cva(
-  'relative bg-background w-full rounded-lg border border-border p-4 shadow shadow-foreground/10',
-  {
-    variants: {
-      variant: {
-        default: '',
-        destructive: 'border-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ViewProps &
-    VariantProps<typeof alertVariants> & {
-      icon: LucideIcon;
-      iconSize?: number;
-      iconClassName?: string;
-    }
->(({ className, variant, children, icon: Icon, iconSize = 16, iconClassName, ...props }, ref) => {
-  const { colors } = useTheme();
-  return (
-    <View ref={ref} role='alert' className={alertVariants({ variant, className })} {...props}>
-      <View className='absolute left-3.5 top-4 -translate-y-0.5'>
-        <Icon
-          size={iconSize}
-          color={variant === 'destructive' ? colors.notification : colors.text}
-        />
-      </View>
-      {children}
-    </View>
-  );
-});
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, ...props }, ref) => (
-  <Text
-    ref={ref}
-    className={cn(
-      'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, ...props }, ref) => (
-  <Text
-    ref={ref}
-    className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertDescription, AlertTitle };

package/__generated/components/ui/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio';
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

package/__generated/components/ui/avatar.tsx

@@ -1,41 +0,0 @@
-import * as AvatarPrimitive from '@rn-primitives/avatar';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-
-const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitive.Root
-      ref={ref}
-      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    />
-  )
-);
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitive.Image
-      ref={ref}
-      className={cn('aspect-square h-full w-full', className)}
-      {...props}
-    />
-  )
-);
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback
-      ref={ref}
-      className={cn(
-        'flex h-full w-full items-center justify-center rounded-full bg-muted',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarFallback, AvatarImage };

package/__generated/components/ui/badge.tsx

@@ -1,51 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import type { SlottableViewProps } from '@rn-primitives/types';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { View } from 'react-native';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const badgeVariants = cva(
-  'web:inline-flex items-center rounded-full border border-border px-2.5 py-0.5 web:transition-colors web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary web:hover:opacity-80 active:opacity-80',
-        secondary: 'border-transparent bg-secondary web:hover:opacity-80 active:opacity-80',
-        destructive: 'border-transparent bg-destructive web:hover:opacity-80 active:opacity-80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-const badgeTextVariants = cva('text-xs font-semibold ', {
-  variants: {
-    variant: {
-      default: 'text-primary-foreground',
-      secondary: 'text-secondary-foreground',
-      destructive: 'text-destructive-foreground',
-      outline: 'text-foreground',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-type BadgeProps = SlottableViewProps & VariantProps<typeof badgeVariants>;
-
-function Badge({ className, variant, asChild, ...props }: BadgeProps) {
-  const Component = asChild ? Slot.View : View;
-  return (
-    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
-      <Component className={cn(badgeVariants({ variant }), className)} {...props} />
-    </TextClassContext.Provider>
-  );
-}
-
-export { Badge, badgeTextVariants, badgeVariants };
-export type { BadgeProps };