ng-magary 0.0.2 → 0.0.3

package/README.md

@@ -1,63 +1,197 @@
-# NgMagary
+# NgMagary 🎨
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
+[![npm version](https://badge.fury.io/js/ng-magary.svg)](https://badge.fury.io/js/ng-magary)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## Code scaffolding
+> ⚠️ **Alpha Release** - This library is under active development. APIs may change in future versions.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+NgMagary is a modern and elegant Angular component library, designed to provide reusable and easy-to-use UI components for your Angular projects.
+
+## 🎯 Angular Compatibility
+
+NgMagary is **optimized for Angular 20+**, but it's also **compatible with previous versions**:
+
+- ✅ **Angular 20+** (Recommended - Full support)
+- ✅ **Angular 15+** (Compatible - Using traditional modules)
+- ✅ **Angular 14+** (Compatible - Using traditional modules)
+
+> **Note**: For versions prior to Angular 15, all components are available as traditional modules, ensuring seamless compatibility.
+
+## 🚀 Installation
 
 ```bash
-ng generate component component-name
+npm install ng-magary
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+### Dependencies by Angular Version
 
+#### For Angular 20+ (Recommended)
 ```bash
-ng generate --help
+npm install @angular/common@^20.1.0 @angular/core@^20.1.0 @fortawesome/fontawesome-free@^7.0.0
 ```
 
-## Building
-
-To build the library, run:
+#### For Angular 15-19
+```bash
+npm install @angular/common@^15.0.0 @angular/core@^15.0.0 @fortawesome/fontawesome-free@^6.0.0
+```
 
+#### For Angular 14
 ```bash
-ng build ng-magary
+npm install @angular/common@^14.0.0 @angular/core@^14.0.0 @fortawesome/fontawesome-free@^6.0.0
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+> **💡 Tip**: NgMagary automatically adjusts its features based on the Angular version you're using, maintaining backward compatibility.
 
-### Publishing the Library
+## 📦 Available Components
 
-Once the project is built, you can publish your library by following these steps:
+### 🔘 Button
+- **Button**: Customizable button component
+- **Speed Dial**: Floating action button with expandable actions
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/ng-magary
-   ```
+### 📝 Form
+- **Input**: Enhanced text input field
+- **Cascade Select**: Cascading selector for hierarchical data
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+### 📋 Menu
+- **Panel Menu**: Expandable panel menu
+- **Sidebar**: Navigable sidebar
 
-## Running unit tests
+### 👤 Misc
+- **Avatar**: User avatar component
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+### 📦 Panel
+- **Card**: Content card
+- **Tabs**: Navigable tab system
 
-```bash
-ng test
+## 🛠️ Basic Usage
+
+### Import according to your Angular version
+
+#### Angular 20+ (Standalone Components)
+```typescript
+import { Component } from '@angular/core';
+import { ButtonComponent, InputComponent, CardComponent } from 'ng-magary';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [ButtonComponent, InputComponent, CardComponent],
+  template: `
+    <mg-button label="Click me!" severity="primary"></mg-button>
+    <mg-input placeholder="Type something..."></mg-input>
+    <mg-card header="My Card">
+      <p>Card content</p>
+    </mg-card>
+  `
+})
+export class ExampleComponent { }
+```
+
+#### Angular 14-19 (Traditional Modules)
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// Import the NgMagary modules you need
+import { ButtonModule, InputModule, CardModule } from 'ng-magary';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    ButtonModule,
+    InputModule,
+    CardModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
 ```
 
-## Running end-to-end tests
+### Using components in your template
+
+```html
+<!-- Button -->
+<mg-button label="Click me!" severity="primary"></mg-button>
+
+<!-- Input -->
+<mg-input placeholder="Type something..."></mg-input>
+
+<!-- Card -->
+<mg-card header="My Card">
+  <p>Card content</p>
+</mg-card>
+```
 
-For end-to-end (e2e) testing, run:
+## 📚 Documentation
+
+Complete documentation will be available soon. For now, you can explore the components in the source code or check the examples in the demo application.
+
+## 🔧 Development
+
+To contribute to development:
 
 ```bash
-ng e2e
+# Clone the repository
+git clone https://github.com/JhoanGon/magary.git
+
+# Install dependencies
+npm install
+
+# Run in development mode
+npm start
+
+# Run tests
+npm test
+
+# Build the library
+ng build ng-magary
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+## 🗺️ Roadmap
+
+### Upcoming components (future versions):
+- **Data**: Table, List, Tree
+- **File**: Upload, Download
+- **Media**: Image, Carousel
+- **Messages**: Toast, Dialog, Confirm
+- **Overlay**: Modal, Tooltip, Popup
+
+## 📝 Changelog
+
+### v0.0.2 (Alpha)
+- ✅ **Optimized for Angular 20+** with standalone components support
+- ✅ **Backward compatibility** with Angular 14, 15, 16, 17, 18, 19
+- ✅ Button and Speed Dial components
+- ✅ Form components (Input, Cascade Select)
+- ✅ Menu components (Panel Menu, Sidebar)
+- ✅ Avatar component
+- ✅ Panel components (Card, Tabs)
+- ✅ Traditional modules available for previous Angular versions
+
+## 🤝 Contributing
+
+Contributions are welcome. Please:
+
+1. Fork the project
+2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+## 👨‍💻 Author
+
+**JhoanGon** - [GitHub](https://github.com/JhoanGon)
 
-## Additional Resources
+---
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+⭐ If you find this project useful, give it a star on GitHub!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-magary",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "peerDependencies": {
     "@fortawesome/fontawesome-free": "^7.0.0",