luna-components-library 1.0.0 → 1.0.1

package/README.md

@@ -1,38 +1,75 @@
-# Luna Components Library
+# 🌙 Luna Components Library
 
-A modern React component library built with TypeScript and designed for reusability.
+A modern React component library built with TypeScript and Vite, designed for reusability and optimal performance.
 
-## Installation
+## ✨ Features
+
+- 🚀 **Built with Vite** - Fast development and optimized builds
+- 📝 **TypeScript Support** - Full type safety and IntelliSense
+- 🎨 **Modern Components** - Clean, accessible, and customizable UI components
+- 📦 **Tree-shakable** - Only bundle what you use
+- 🔧 **Multiple Formats** - ES modules and UMD bundles
+- 📚 **Type Declarations** - Complete TypeScript definitions included
+
+## 📦 Installation
 
 ```bash
 npm install luna-components-library
+# or
+yarn add luna-components-library
+# or
+pnpm add luna-components-library
 ```
 
-## Usage
+## 🚀 Quick Start
 
 ```jsx
 import { Button, Card } from 'luna-components-library';
 
 function App() {
   return (
-    <div>
-      <Button variant="primary" onClick={() => console.log('Clicked!')}>
+    <div className="p-4 space-y-4">
+      <Button 
+        variant="primary" 
+        size="lg"
+        onClick={() => console.log('Clicked!')}
+      >
         Click me
       </Button>
       
-      <Card title="Example Card" padding="md" shadow="lg">
+      <Card 
+        title="Example Card" 
+        padding="md" 
+        shadow="lg"
+        className="max-w-md"
+      >
         <p>This is a card component from Luna Components Library.</p>
+        <Button variant="outline" size="sm">
+          Learn More
+        </Button>
       </Card>
     </div>
   );
 }
 ```
 
-## Components
+## 🧩 Components
 
 ### Button
 A versatile button component with multiple variants and sizes.
 
+```jsx
+<Button 
+  variant="primary" 
+  size="md"
+  onClick={handleClick}
+  disabled={false}
+  className="custom-class"
+>
+  Button Text
+</Button>
+```
+
 **Props:**
 - `children`: React.ReactNode - Button content
 - `variant?: 'primary' | 'secondary' | 'outline'` - Button style (default: 'primary')
@@ -41,29 +78,151 @@ A versatile button component with multiple variants and sizes.
 - `disabled?: boolean` - Disable button (default: false)
 - `className?: string` - Additional CSS classes
 
+**Variants:**
+- `primary` - Blue background button
+- `secondary` - Gray background button  
+- `outline` - Transparent with border
+
 ### Card
-A flexible card component for displaying content.
+A flexible card component for displaying content with various padding and shadow options.
+
+```jsx
+<Card 
+  title="Card Title"
+  padding="md"
+  shadow="lg"
+  className="custom-card"
+>
+  <p>Card content goes here</p>
+</Card>
+```
 
 **Props:**
 - `children`: React.ReactNode - Card content
-- `title?: string` - Card title
+- `title?: string` - Card title (optional)
 - `className?: string` - Additional CSS classes
 - `padding?: 'none' | 'sm' | 'md' | 'lg'` - Internal padding (default: 'md')
 - `shadow?: 'none' | 'sm' | 'md' | 'lg'` - Shadow depth (default: 'md')
 
-## Development
+## 🛠️ Development
+
+### Prerequisites
+- Node.js 16+ 
+- npm, yarn, or pnpm
+
+### Setup
 
 ```bash
+# Clone the repository
+git clone <repository-url>
+cd luna-library
+
 # Install dependencies
 npm install
 
+# Start development with watch mode
+npm run dev
+
 # Build the library
 npm run build
 
-# Watch for changes during development
-npm run dev
+# Clean build directory
+npm run clean
+```
+
+### Project Structure
+
 ```
+luna-library/
+├── src/
+│   ├── components/
+│   │   ├── Button.tsx
+│   │   ├── Card.tsx
+│   │   └── index.ts
+│   └── index.ts
+├── dist/                 # Build output
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── README.md
+```
+
+## 📦 Build & Publishing
+
+### Build Process
+
+The library uses Vite for building with the following outputs:
+
+```bash
+npm run build
+```
+
+**Generated Files:**
+- `dist/luna-components-library.es.js` - ES Module bundle
+- `dist/luna-components-library.umd.js` - UMD bundle
+- `dist/index.d.ts` - TypeScript declarations
+- Source maps for debugging
+
+### Publishing to NPM
+
+```bash
+# Login to NPM
+npm login
+
+# Build and publish
+npm publish
+```
+
+The `prepublishOnly` script automatically builds the library before publishing.
+
+## 🔧 Configuration
+
+### TypeScript Configuration
+
+The library is configured with:
+- Strict type checking enabled
+- React JSX support
+- Declaration file generation
+- Modern ES2020 target
+
+### Vite Configuration
+
+- Library mode with ES and UMD outputs
+- External React dependencies (peer dependencies)
+- TypeScript declaration generation with `vite-plugin-dts`
+- Source maps for debugging
+
+## 📋 Dependencies
+
+### Peer Dependencies
+- `react: >=16.8.0`
+- `react-dom: >=16.8.0`
+
+### Dev Dependencies
+- `vite` - Build tool and dev server
+- `@vitejs/plugin-react` - React plugin for Vite
+- `typescript` - TypeScript compiler
+- `vite-plugin-dts` - TypeScript declaration generation
+- `rimraf` - Cross-platform file removal
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Author
+
+Created and maintained by [Pablo Andre Chacon](https://andreychaconresumereact.netlify.app)
 
-## License
+## 🔗 Links
 
-MIT
+- [NPM Package](https://www.npmjs.com/package/luna-components-library)
+- [GitHub Repository](https://github.com/your-username/luna-components-library)
+- [Author's Portfolio](https://andreychaconresumereact.netlify.app)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/src/components/Button.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface ButtonProps {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/src/components/Card.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface CardProps {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { default as Card } from './Card';

package/dist/src/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-components-library",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React component library with TypeScript support",
   "main": "dist/luna-components-library.umd.js",
   "module": "dist/luna-components-library.es.js",
@@ -37,6 +37,7 @@
     "rimraf": "^6.1.3",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.11"
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.0.0"
   }
 }