@react-native-reusables/cli 0.4.1 → 0.5.0-beta.2

package/package.json

@@ -1,87 +1,14 @@
 {
   "name": "@react-native-reusables/cli",
-  "version": "0.4.1",
-  "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-beta.2",
+  "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/starter-base": "1.0.0",
-    "@rnr/reusables": "0.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,134 +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';
-
-function Accordion({
-  children,
-  ...props
-}: Omit<AccordionPrimitive.RootProps, 'asChild'> & {
-  ref?: React.RefObject<AccordionPrimitive.RootRef>;
-}) {
-  return (
-    <LayoutAnimationConfig skipEntering>
-      <AccordionPrimitive.Root
-        {...(props as AccordionPrimitive.RootProps)}
-        asChild={Platform.OS !== 'web'}
-      >
-        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
-      </AccordionPrimitive.Root>
-    </LayoutAnimationConfig>
-  );
-}
-
-function AccordionItem({
-  className,
-  value,
-  ...props
-}: AccordionPrimitive.ItemProps & {
-  ref?: React.RefObject<AccordionPrimitive.ItemRef>;
-}) {
-  return (
-    <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
-      <AccordionPrimitive.Item
-        className={cn('border-b border-border', className)}
-        value={value}
-        {...props}
-      />
-    </Animated.View>
-  );
-}
-
-const Trigger = Platform.OS === 'web' ? View : Pressable;
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.TriggerProps & {
-  children?: React.ReactNode;
-  ref?: React.RefObject<AccordionPrimitive.TriggerRef>;
-}) {
-  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 {...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>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.ContentProps & {
-  ref?: React.RefObject<AccordionPrimitive.ContentRef>;
-}) {
-  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'
-        )}
-        {...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>
-  );
-}
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -1,172 +0,0 @@
-import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
-import * as React from 'react';
-import { Platform, 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;
-
-function AlertDialogOverlayWeb({
-  className,
-  ...props
-}: AlertDialogPrimitive.OverlayProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.OverlayRef>;
-}) {
-  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}
-    />
-  );
-}
-
-function AlertDialogOverlayNative({
-  className,
-  children,
-  ...props
-}: AlertDialogPrimitive.OverlayProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.OverlayRef>;
-}) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      className={cn(
-        'z-50 absolute top-0 right-0 bottom-0 left-0 bg-black/80 flex justify-center items-center p-2',
-        className
-      )}
-      {...props}
-      asChild
-    >
-      <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
-        {children}
-      </Animated.View>
-    </AlertDialogPrimitive.Overlay>
-  );
-}
-
-const AlertDialogOverlay = Platform.select({
-  web: AlertDialogOverlayWeb,
-  default: AlertDialogOverlayNative,
-});
-
-function AlertDialogContent({
-  className,
-  portalHost,
-  ...props
-}: AlertDialogPrimitive.ContentProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.ContentRef>;
-  portalHost?: string;
-}) {
-  const { open } = AlertDialogPrimitive.useRootContext();
-
-  return (
-    <AlertDialogPortal hostName={portalHost}>
-      <AlertDialogOverlay>
-        <AlertDialogPrimitive.Content
-          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>
-  );
-}
-
-function AlertDialogHeader({ className, ...props }: ViewProps) {
-  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
-}
-
-function AlertDialogFooter({ className, ...props }: ViewProps) {
-  return (
-    <View
-      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: AlertDialogPrimitive.TitleProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.TitleRef>;
-}) {
-  return (
-    <AlertDialogPrimitive.Title
-      className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: AlertDialogPrimitive.DescriptionProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.DescriptionRef>;
-}) {
-  return (
-    <AlertDialogPrimitive.Description
-      className={cn('text-sm native:text-base text-muted-foreground', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: AlertDialogPrimitive.ActionProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.ActionRef>;
-}) {
-  return (
-    <TextClassContext.Provider value={buttonTextVariants({ className })}>
-      <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
-    </TextClassContext.Provider>
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: AlertDialogPrimitive.CancelProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.CancelRef>;
-}) {
-  return (
-    <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
-      <AlertDialogPrimitive.Cancel
-        className={cn(buttonVariants({ variant: 'outline', className }))}
-        {...props}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/__generated/components/ui/alert.tsx

@@ -1,71 +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',
-    },
-  }
-);
-
-function Alert({
-  className,
-  variant,
-  children,
-  icon: Icon,
-  iconSize = 16,
-  iconClassName,
-  ...props
-}: ViewProps &
-  VariantProps<typeof alertVariants> & {
-    ref?: React.RefObject<View>;
-    icon: LucideIcon;
-    iconSize?: number;
-    iconClassName?: string;
-  }) {
-  const { colors } = useTheme();
-  return (
-    <View 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>
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<typeof Text>) {
-  return (
-    <Text
-      className={cn(
-        'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<typeof Text>) {
-  return (
-    <Text className={cn('pl-7 text-sm leading-relaxed text-foreground', className)} {...props} />
-  );
-}
-
-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,47 +0,0 @@
-import * as AvatarPrimitive from '@rn-primitives/avatar';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-
-function Avatar({
-  className,
-  ...props
-}: AvatarPrimitive.RootProps & {
-  ref?: React.RefObject<AvatarPrimitive.RootRef>;
-}) {
-  return (
-    <AvatarPrimitive.Root
-      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: AvatarPrimitive.ImageProps & {
-  ref?: React.RefObject<AvatarPrimitive.ImageRef>;
-}) {
-  return (
-    <AvatarPrimitive.Image className={cn('aspect-square h-full w-full', className)} {...props} />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: AvatarPrimitive.FallbackProps & {
-  ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
-}) {
-  return (
-    <AvatarPrimitive.Fallback
-      className={cn(
-        'flex h-full w-full items-center justify-center rounded-full bg-muted',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarImage };

package/__generated/components/ui/badge.tsx

@@ -1,52 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { View, ViewProps } 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 = ViewProps & {
-  asChild?: boolean;
-} & 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 };