rn-cn-ui 1.0.3 → 1.0.5

package/README.md

@@ -6,7 +6,54 @@ A high-quality, open-source UI library for React Native, inspired by shadcn/ui.
 ## Prerequisites
 
 1.  **React Native** project (Expo or CLI).
-2.  **NativeWind** and **Tailwind CSS** configured.
+2.  **NativeWind v4** configured.
+
+### Important: Install Dependencies
+
+NativeWind v4 requires `react-native-reanimated`. Ensure you have installed it and its peer dependencies:
+
+```bash
+npm install nativewind react-native-reanimated react-native-safe-area-context react-native-svg
+```
+
+### Configure Babel
+
+Add `react-native-reanimated/plugin` to your `babel.config.js`. **It must be listed last.**
+
+```js
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+    plugins: [
+      "react-native-reanimated/plugin",
+    ],
+  };
+};
+```
+
+*Note: If you are using Expo, use `babel-preset-expo` instead of `module:metro-react-native-babel-preset`.*
+
+## Setup
+
+Run the init command to set up the base styles and utilities:
+
+```bash
+npx rn-cn-ui init
+```
+
+This will create:
+- `src/global.css` (Base styles and theme variables)
+- `src/lib/utils.ts` (Utility for class merging)
+
+**Important:** Import `global.css` in your root file (e.g., `App.tsx` or `app/_layout.tsx`):
+
+```tsx
+import "./src/global.css";
+```
 
 ## Usage
 
@@ -42,22 +89,29 @@ export default function App() {
 
 You can add any of the following components:
 
+-   `accordion`
+-   `alert`
+-   `aspect-ratio`
+-   `avatar`
+-   `badge`
 -   `button`
--   `text`
--   `input`
 -   `card`
--   `badge`
--   `avatar`
+-   `checkbox`
+-   `dialog`
+-   `input`
 -   `label`
+-   `progress`
+-   `radio-group`
+-   `select`
 -   `separator`
 -   `skeleton`
 -   `spinner`
 -   `switch`
--   `checkbox`
--   `radio-group`
+-   `tabs`
+-   `text`
 -   `textarea`
--   `alert`
--   `progress`
+-   `toggle`
+-   `toggle-group`
 
 ## Configuration
 

package/bin/cli.js

@@ -3,25 +3,73 @@ const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
 
-const BASE_URL = "https://raw.githubusercontent.com/KaloyanBehov/native-ui/main"; // TODO: Update this with your repo
+// Change this to your actual repo URL
+const BASE_URL = "https://raw.githubusercontent.com/KaloyanBehov/rn-cn-ui/main";
 
-const component = process.argv[2];
 const command = process.argv[2];
-
 let componentName = null;
-if (command === 'add') {
+
+if (command === 'init') {
+    // Handle init command
+} else if (command === 'add') {
     componentName = process.argv[3];
 } else {
+    // Fallback for older usage: npx rn-cn-ui <component>
     componentName = command;
 }
 
-if (!componentName) {
-  console.error('Usage: npx rn-cn-ui add <component-name>');
+if (!componentName && command !== 'init') {
+  console.error('Usage:');
+  console.error('  npx rn-cn-ui init          (Initialize project with global.css and utils)');
+  console.error('  npx rn-cn-ui add <name>    (Add a component)');
   process.exit(1);
 }
 
 async function main() {
   try {
+    if (command === 'init') {
+        console.log('Initializing project...');
+        
+        // 1. Create src/lib/utils.ts
+        const utilsDir = path.join(process.cwd(), 'src', 'lib');
+        const utilsPath = path.join(utilsDir, 'utils.ts');
+        
+        if (!fs.existsSync(utilsDir)) {
+            fs.mkdirSync(utilsDir, { recursive: true });
+        }
+
+        const utilsUrl = `${BASE_URL}/src/lib/utils.ts`;
+        const utilsResponse = await fetch(utilsUrl);
+        if (utilsResponse.ok) {
+            const utilsContent = await utilsResponse.text();
+            fs.writeFileSync(utilsPath, utilsContent);
+            console.log('✓ Created src/lib/utils.ts');
+        } else {
+            console.error('Failed to download utils.ts');
+        }
+
+        // 2. Create src/global.css
+        const srcDir = path.join(process.cwd(), 'src');
+        const cssPath = path.join(srcDir, 'global.css');
+        
+        if (!fs.existsSync(srcDir)) {
+            fs.mkdirSync(srcDir, { recursive: true });
+        }
+
+        const cssUrl = `${BASE_URL}/src/global.css`;
+        const cssResponse = await fetch(cssUrl);
+        if (cssResponse.ok) {
+            const cssContent = await cssResponse.text();
+            fs.writeFileSync(cssPath, cssContent);
+            console.log('✓ Created src/global.css');
+        } else {
+            console.error('Failed to download global.css');
+        }
+
+        console.log('\nProject initialized! Don\'t forget to import global.css in your root layout/index file.');
+        return;
+    }
+
     // 1. Fetch registry
     console.log('Fetching registry...');
     const registryResponse = await fetch(`${BASE_URL}/registry.json`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-cn-ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A high-quality, open-source UI library for React Native, inspired by shadcn/ui.",
   "main": "index.js",
   "bin": {

package/src/components/ui/button.tsx

@@ -4,21 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
-  "flex-row items-center justify-center rounded-md",
+  "flex-row items-center justify-center rounded-md gap-2",
   {
     variants: {
       variant: {
-        default: "bg-primary",
-        destructive: "bg-destructive",
-        outline: "border border-input bg-background",
-        secondary: "bg-secondary",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "bg-primary shadow-sm active:opacity-90",
+        destructive: "bg-destructive shadow-sm active:opacity-90",
+        outline: "border border-input bg-background shadow-sm active:bg-accent active:text-accent-foreground",
+        secondary: "bg-secondary shadow-sm active:opacity-80",
+        ghost: "active:bg-accent active:text-accent-foreground",
+        link: "text-primary underline-offset-4 active:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-11 px-4 py-2",
         sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        lg: "h-12 rounded-md px-8",
         icon: "h-10 w-10",
       },
     },

package/src/components/ui/card.tsx

@@ -10,7 +10,7 @@ const Card = React.forwardRef<
   <View
     ref={ref}
     className={cn(
-      "rounded-lg border border-border bg-card shadow-sm",
+      "rounded-xl border border-border bg-card shadow-sm shadow-black/5",
       className
     )}
     {...props}

package/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
       <TextInput
         ref={ref}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         placeholderTextColor={placeholderTextColor || "hsl(var(--muted-foreground))"}

package/src/global.css

@@ -5,46 +5,46 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 224 71.4% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 224 71.4% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --radius: 0.5rem;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 262.1 83.3% 57.8%;
+    --radius: 0.75rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.6%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.6%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.6%;
-    --accent-foreground: 0 0% 98%;
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.6%;
-    --input: 240 3.7% 15.6%;
-    --ring: 240 4.9% 83.9%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 263.4 70% 50.4%;
   }
 }