@goat-bravos/intern-hub-layout 3.0.4 → 3.0.7

package/README.md

@@ -4,8 +4,9 @@
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat&logo=typescript&logoColor=white)
 ![License](https://img.shields.io/badge/License-MIT-green?style=flat)
 ![npm](https://img.shields.io/badge/npm-@goat--bravos/intern--hub--layout-CB3837?style=flat&logo=npm)
+![Version](https://img.shields.io/badge/version-3.0.15-blue?style=flat)
 
-A comprehensive Angular library providing reusable layout components and shared UI elements for Intern Hub applications. Built with Angular 21 and designed for seamless integration.
+A comprehensive Angular library providing reusable layout components and shared UI elements for Intern Hub applications. Built with Angular 21, TypeScript 5.9, and designed for seamless integration with modern Angular projects.
 
 ---
 
@@ -14,29 +15,38 @@ A comprehensive Angular library providing reusable layout components and shared
 - [Features](#-features)
 - [Installation](#-installation)
 - [Quick Start](#-quick-start)
+- [Project Structure](#-project-structure)
 - [Components](#-components)
   - [Layout Components](#layout-components)
   - [Button Components](#button-components)
   - [Input Components](#input-components)
   - [Table Components](#table-components)
   - [Approval Components](#approval-components)
+  - [Modal Components](#modal-components)
   - [Pop-up Components](#pop-up-components)
+  - [Upload Components](#upload-components)
   - [Icon Components](#icon-components)
-- [Development](#-development)
+- [Best Practices](#-best-practices)
+- [Troubleshooting](#-troubleshooting)
+- [Development](#️-development)
 - [Contributing](#-contributing)
+- [Changelog](#-changelog)
 - [License](#-license)
 
 ---
 
 ## ✨ Features
 
-- 🎨 **Pre-built Layouts** - Header and sidebar components with hover effects
-- 🧩 **Reusable UI Components** - Buttons, inputs, tables, approval lists, and more
-- 🔧 **Highly Configurable** - Extensive customization via inputs
-- 📦 **Standalone Components** - Modern Angular standalone component architecture
-- 🎯 **TypeScript Support** - Full type definitions included
-- ♿ **Accessible** - Built with accessibility best practices
-- 🚀 **Angular 21 Ready** - Built for the latest Angular version
+- 🎨 **Pre-built Layouts** - Header and sidebar components with smooth hover effects and animations
+- 🧩 **Reusable UI Components** - Buttons, inputs, tables, modals, file uploads, approval lists, and more
+- 🔧 **Highly Configurable** - Extensive customization via input properties and CSS custom properties
+- 📦 **Standalone Components** - Modern Angular standalone component architecture (no NgModules required)
+- 🎯 **TypeScript Support** - Full type definitions and interfaces included
+- ♿ **Accessible** - Built with accessibility best practices (ARIA attributes, keyboard navigation)
+- 🚀 **Angular 21 Ready** - Built for the latest Angular version with Signal support
+- 🎭 **Theme Support** - Customizable color schemes using CSS variables
+- 📱 **Responsive** - Mobile-first design with responsive breakpoints
+- 🔄 **Two-way Binding** - Support for Angular's two-way data binding with `[(value)]`
 
 ---
 
@@ -52,13 +62,13 @@ npm install @goat-bravos/intern-hub-layout
 
 This library requires the following peer dependencies:
 
-| Package           | Version | Required    |
-| ----------------- | ------- | ----------- |
-| `@angular/common` | ^21.0.0 | ✅ Yes      |
-| `@angular/core`   | ^21.0.0 | ✅ Yes      |
-| `@angular/forms`  | ^21.0.0 | ✅ Yes      |
-| `@angular/router` | ^21.0.0 | ✅ Yes      |
-| `dynamic-ds`      | ^1.0.2  | ⚠️ Optional |
+| Package           | Version | Required    | Description                       |
+| ----------------- | ------- | ----------- | --------------------------------- |
+| `@angular/common` | ^21.0.0 | ✅ Yes      | Angular common utilities          |
+| `@angular/core`   | ^21.0.0 | ✅ Yes      | Angular core framework            |
+| `@angular/forms`  | ^21.0.0 | ✅ Yes      | Angular reactive & template forms |
+| `@angular/router` | ^21.0.0 | ✅ Yes      | Angular routing                   |
+| `dynamic-ds`      | ^1.0.3  | ⚠️ Optional | Icon library (if using icons)     |
 
 Install peer dependencies if not already present:
 
@@ -66,6 +76,12 @@ Install peer dependencies if not already present:
 npm install @angular/common @angular/core @angular/forms @angular/router
 ```
 
+For icon support, install the optional dependency:
+
+```bash
+npm install dynamic-ds
+```
+
 ---
 
 ## 🚀 Quick Start
@@ -83,8 +99,15 @@ import { HeaderComponent, SidebarComponent, ButtonContainerComponent, InputTextC
   standalone: true,
   imports: [HeaderComponent, SidebarComponent, ButtonContainerComponent, InputTextComponent],
   templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
 })
-export class AppComponent {}
+export class AppComponent {
+  username = "";
+
+  onButtonClick() {
+    console.log("Button clicked!");
+  }
+}
 ```
 
 ### Step 2: Use in Template
@@ -96,11 +119,76 @@ export class AppComponent {}
 <!-- Sidebar -->
 <app-sidebar [data]="sidebarData"></app-sidebar>
 
-<!-- Button -->
-<app-button-container content="Click Me" size="md" backgroundColor="var(--brand-500)" (buttonClick)="onButtonClick()"></app-button-container>
+<!-- Main Content Area -->
+<div class="content">
+  <!-- Button -->
+  <app-button-container content="Click Me" size="md" backgroundColor="var(--brand-500)" (buttonClick)="onButtonClick()"> </app-button-container>
+
+  <!-- Input -->
+  <app-input-text headerInput="Username" placeholder="Enter your username" [required]="true" [(value)]="username"> </app-input-text>
+</div>
+```
+
+### Step 3: Configure Data Objects (Optional)
+
+```typescript
+import { HeaderData, SidebarData } from "@goat-bravos/intern-hub-layout";
+
+export class AppComponent {
+  headerData: HeaderData = {
+    headerItems: [
+      {
+        icon: "dsi-bell-line",
+        content: "Notifications",
+        badge: "5",
+        method: () => console.log("Notifications clicked"),
+      },
+    ],
+    userName: "John Doe",
+    logo: "assets/logo.png",
+  };
+
+  sidebarData: SidebarData = {
+    backgroundColor: "var(--brand-500)",
+    menuItems: [
+      {
+        iconLeft: "dsi-home-01-line",
+        content: "Dashboard",
+        url: "/dashboard",
+      },
+    ],
+  };
+}
+```
+
+---
+
+## 📁 Project Structure
 
-<!-- Input -->
-<app-input-text headerInput="Username" placeholder="Enter your username" [required]="true" [(value)]="username"></app-input-text>
+```
+intern-hub-layout/
+├── src/
+│   ├── libs/
+│   │   ├── layouts/              # Layout components
+│   │   │   ├── header/           # Header component
+│   │   │   └── sidebar/          # Sidebar component
+│   │   └── shared/
+│   │       └── components/       # Shared UI components
+│   │           ├── approval/     # Approval list components
+│   │           ├── button/       # Button components
+│   │           ├── file-upload-dropzone/  # Drag & drop file upload
+│   │           ├── functional-label/      # Label with icons
+│   │           ├── icon/         # Icon component
+│   │           ├── input/        # Input components
+│   │           ├── modal/        # Modal dialog
+│   │           ├── pop-up/       # Confirmation dialogs
+│   │           ├── table/        # Table components
+│   │           └── upload-button/         # File upload button
+│   └── public-api.ts             # Public API exports
+├── demo/                         # Demo application
+├── dist/                         # Build output
+├── README.md                     # This file
+└── package.json                  # Package configuration
 ```
 
 ---
@@ -749,11 +837,87 @@ interface ApprovalListItemInterface {
 
 ---
 
+### Modal Components
+
+#### ModalComponent
+
+A flexible modal dialog with customizable themes and responsive design.
+
+**Selector:** `app-modal`
+
+```typescript
+import { ModalComponent } from "@goat-bravos/intern-hub-layout";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  imports: [CommonModule, ModalComponent],
+  template: `
+    <!-- Trigger button -->
+    <button (click)="isModalOpen = true">Open Modal</button>
+
+    <!-- Modal component -->
+    @if (isModalOpen) {
+      <app-modal [title]="'User Details'" [isOpen]="isModalOpen" [width]="'600px'" [minHeight]="'400px'" [theme]="'default'" (close)="onModalClose()">
+        <!-- Modal content goes here -->
+        <div class="modal-content">
+          <p>This is the modal content area.</p>
+          <p>Add any custom content here.</p>
+        </div>
+      </app-modal>
+    }
+  `,
+})
+export class MyComponent {
+  isModalOpen = false;
+
+  onModalClose() {
+    console.log("Modal closed");
+    this.isModalOpen = false;
+  }
+}
+```
+
+**Inputs:**
+
+| Input       | Type                   | Default     | Description               |
+| ----------- | ---------------------- | ----------- | ------------------------- |
+| `title`     | `string`               | `''`        | Modal title text          |
+| `width`     | `string`               | `'800px'`   | Modal width               |
+| `minHeight` | `string`               | `'300px'`   | Minimum modal height      |
+| `isOpen`    | `boolean`              | `false`     | Controls modal visibility |
+| `theme`     | `'default' \| 'white'` | `'default'` | Color theme               |
+
+**Outputs:**
+
+| Output  | Type                 | Description                       |
+| ------- | -------------------- | --------------------------------- |
+| `close` | `EventEmitter<void>` | Emits when modal should be closed |
+
+**Content Projection:**
+
+The modal supports content projection. Place any HTML content between the opening and closing tags:
+
+```html
+<app-modal [title]="'Custom Modal'" [isOpen]="true" (close)="closeModal()">
+  <form>
+    <input type="text" placeholder="Name" />
+    <button type="submit">Submit</button>
+  </form>
+</app-modal>
+```
+
+**Themes:**
+
+- `default` - Dark themed modal with contrasting colors
+- `white` - Light themed modal with white background
+
+---
+
 ### Pop-up Components
 
 #### PopUpConfirmComponent
 
-An accessible confirmation modal dialog.
+An accessible confirmation modal dialog for user confirmations.
 
 **Selector:** `app-pop-up-confirm`
 
@@ -805,6 +969,124 @@ export class MyComponent {
 
 ---
 
+### Upload Components
+
+#### UploadButtonComponent
+
+A file upload button with label, tooltip support, and helper text.
+
+**Selector:** `app-upload-button`
+
+```typescript
+import { UploadButtonComponent } from "@goat-bravos/intern-hub-layout";
+
+@Component({
+  imports: [UploadButtonComponent],
+  template: `
+    <!-- Basic upload button -->
+    <app-upload-button [label]="'Profile Picture'" [required]="true" [buttonText]="'Upload Image'" [acceptFormats]="'.png,.jpg,.jpeg'" [helperText]="'Max size: 5MB (PNG, JPG, JPEG)'" (fileSelected)="onFileSelected($event)"></app-upload-button>
+
+    <!-- With tooltip -->
+    <app-upload-button [label]="'Document Upload'" [showTooltip]="true" [tooltipText]="'Upload your resume or portfolio'" [acceptFormats]="'.pdf,.doc,.docx'" (fileSelected)="onFileSelected($event)"></app-upload-button>
+  `,
+})
+export class MyComponent {
+  onFileSelected(file: File) {
+    console.log("File selected:", file.name, file.size, file.type);
+    // Handle file upload logic here
+  }
+}
+```
+
+**Inputs:**
+
+| Input           | Type      | Default                         | Description                   |
+| --------------- | --------- | ------------------------------- | ----------------------------- |
+| `label`         | `string`  | `''`                            | Label text above button       |
+| `required`      | `boolean` | `false`                         | Shows required indicator (\*) |
+| `showTooltip`   | `boolean` | `false`                         | Shows info tooltip            |
+| `tooltipText`   | `string`  | `''`                            | Tooltip content               |
+| `buttonText`    | `string`  | `'Tải ảnh lên'`                 | Button text                   |
+| `acceptFormats` | `string`  | `'.png,.jpeg,.jpg'`             | Accepted file formats         |
+| `helperText`    | `string`  | `'Định dạng .png, .jpeg, .jpg'` | Helper text below button      |
+
+**Outputs:**
+
+| Output         | Type                 | Description                 |
+| -------------- | -------------------- | --------------------------- |
+| `fileSelected` | `EventEmitter<File>` | Emits when file is selected |
+
+---
+
+#### FileUploadDropzoneComponent
+
+A drag-and-drop file upload zone with multiple file support.
+
+**Selector:** `app-file-upload-dropzone`
+
+```typescript
+import { FileUploadDropzoneComponent } from "@goat-bravos/intern-hub-layout";
+
+@Component({
+  imports: [FileUploadDropzoneComponent],
+  template: `
+    <!-- Single file upload -->
+    <app-file-upload-dropzone [label]="'Upload Assignment'" [buttonText]="'Browse Files'" [maxSize]="'5MB'" [acceptFormats]="'.pdf,.doc,.docx'" (fileSelected)="onSingleFileSelected($event)"></app-file-upload-dropzone>
+
+    <!-- Multiple files upload -->
+    <app-file-upload-dropzone [label]="'Upload Documents'" [buttonText]="'Select Multiple Files'" [maxSize]="'10MB'" [acceptFormats]="'.docx,.xlsx,.png,.jpg,.jpeg,.pdf'" [helperText]="'You can drag and drop multiple files here'" (filesSelected)="onMultipleFilesSelected($event)"></app-file-upload-dropzone>
+  `,
+})
+export class MyComponent {
+  onSingleFileSelected(file: File) {
+    console.log("Single file selected:", file.name);
+    // Handle single file upload
+  }
+
+  onMultipleFilesSelected(files: File[]) {
+    console.log(`${files.length} files selected`);
+    files.forEach((file) => {
+      console.log("File:", file.name, file.size);
+    });
+    // Handle multiple files upload
+  }
+}
+```
+
+**Inputs:**
+
+| Input           | Type     | Default                                 | Description                  |
+| --------------- | -------- | --------------------------------------- | ---------------------------- |
+| `label`         | `string` | `'Thêm file bài học'`                   | Label text above dropzone    |
+| `buttonText`    | `string` | `'Tải lên'`                             | Button text                  |
+| `maxSize`       | `string` | `'10MB'`                                | Maximum file size            |
+| `acceptFormats` | `string` | `'.docx,.xlsx,.png,.jpg,.jpeg,.pdf'`    | Accepted file formats        |
+| `helperText`    | `string` | Auto-generated from maxSize and formats | Helper text (auto or custom) |
+
+**Outputs:**
+
+| Output          | Type                   | Description                            |
+| --------------- | ---------------------- | -------------------------------------- |
+| `fileSelected`  | `EventEmitter<File>`   | Emits when single file is selected     |
+| `filesSelected` | `EventEmitter<File[]>` | Emits when multiple files are selected |
+
+**Features:**
+
+- ✅ **Drag & Drop Support** - Users can drag files directly onto the dropzone
+- ✅ **Visual Feedback** - Highlighted border when dragging files over the zone
+- ✅ **Multiple Files** - Supports both single and multiple file selection
+- ✅ **Format Validation** - Restricts file types based on `acceptFormats`
+- ✅ **Size Display** - Shows maximum allowed file size
+- ✅ **Accessible** - Keyboard-accessible file input
+
+**Usage Tips:**
+
+- The component will emit `fileSelected` for single file uploads
+- The component will emit `filesSelected` for multiple file uploads
+- Helper text is automatically generated from `maxSize` and `acceptFormats`, but can be overridden
+
+---
+
 ### Icon Components
 
 #### IconComponent
@@ -903,34 +1185,566 @@ export class MyComponent {
 
 ---
 
+## 💡 Best Practices
+
+### Component Usage
+
+#### 1. **Use Two-Way Binding for Forms**
+
+```typescript
+// ✅ Good - Two-way binding
+<app-input-text
+  headerInput="Email"
+  [(value)]="userEmail"
+></app-input-text>
+
+// ❌ Avoid - One-way binding without handling value changes
+<app-input-text
+  headerInput="Email"
+  [value]="userEmail"
+></app-input-text>
+```
+
+#### 2. **Leverage CSS Custom Properties for Theming**
+
+```typescript
+// Define your theme colors in global CSS
+:root {
+  --brand-500: #3b82f6;
+  --brand-600: #2563eb;
+  --neutral-100: #f5f5f5;
+}
+
+// Use them in components
+<app-button-container
+  content="Submit"
+  backgroundColor="var(--brand-500)"
+  color="var(--neutral-100)"
+></app-button-container>
+```
+
+#### 3. **Import Only What You Need**
+
+```typescript
+// ✅ Good - Import only required components
+import { ButtonContainerComponent, InputTextComponent } from "@goat-bravos/intern-hub-layout";
+
+// ❌ Avoid - Wildcard imports
+import * from "@goat-bravos/intern-hub-layout";
+```
+
+#### 4. **Use Interfaces for Type Safety**
+
+```typescript
+import { HeaderData, SidebarData } from "@goat-bravos/intern-hub-layout";
+
+export class MyComponent {
+  // ✅ Good - Typed data objects
+  headerData: HeaderData = {
+    headerItems: [],
+    userName: "John Doe",
+  };
+
+  // ❌ Avoid - Untyped objects
+  headerData: any = {
+    headerItems: [],
+    userName: "John Doe",
+  };
+}
+```
+
+#### 5. **Handle Events Properly**
+
+```typescript
+// ✅ Good - Proper event handling
+<app-button-container
+  content="Delete"
+  (buttonClick)="confirmDelete()"
+></app-button-container>
+
+confirmDelete() {
+  if (confirm("Are you sure?")) {
+    this.deleteItem();
+  }
+}
+
+// ❌ Avoid - Inline complex logic
+<app-button-container
+  content="Delete"
+  (buttonClick)="confirm('Are you sure?') && deleteItem()"
+></app-button-container>
+```
+
+### Performance
+
+- **Use `OnPush` Change Detection**: All library components use `OnPush` for optimal performance
+- **Avoid Frequent Re-renders**: Pass stable object references to avoid unnecessary re-renders
+- **Lazy Load Large Components**: Use dynamic imports for modals and heavy components
+
+### Accessibility
+
+- **Always Provide Labels**: Use `headerInput` or `label` properties for form elements
+- **Use Semantic Buttons**: The library components handle semantic HTML automatically
+- **Test Keyboard Navigation**: Ensure all interactive components are keyboard accessible
+- **Provide Alt Text**: When using images in headers or icons, provide descriptive text
+
+---
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+#### Issue: Components not displaying correctly
+
+**Possible Causes:**
+
+- Missing peer dependencies
+- CSS conflicts with existing styles
+- Incorrect selector usage
+
+**Solutions:**
+
+```bash
+# Verify all peer dependencies are installed
+npm list @angular/core @angular/common @angular/forms @angular/router
+
+# Check package.json for correct versions
+npm install @angular/common@^21.0.0 @angular/core@^21.0.0
+```
+
+#### Issue: Icons not showing
+
+**Possible Causes:**
+
+- `dynamic-ds` library not installed
+- Icon class names incorrect
+
+**Solutions:**
+
+```bash
+# Install the optional icon library
+npm install dynamic-ds
+
+# Verify icon names (they should start with 'dsi-')
+<app-icon icon="dsi-home-01-line"></app-icon>
+```
+
+#### Issue: Two-way binding not working
+
+**Possible Causes:**
+
+- Missing `FormsModule` import
+- Incorrect syntax (`[(value)]` vs `[value]`)
+
+**Solutions:**
+
+```typescript
+// Ensure FormsModule is imported
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  imports: [FormsModule, InputTextComponent],
+  // ...
+})
+
+// Use correct two-way binding syntax
+<app-input-text [(value)]="myValue"></app-input-text>
+```
+
+#### Issue: TypeScript errors about missing interfaces
+
+**Solutions:**
+
+```typescript
+// Import the required interfaces
+import { HeaderData, SidebarData, ButtonContainerData, IconData } from "@goat-bravos/intern-hub-layout";
+```
+
+#### Issue: Sidebar not collapsing/expanding
+
+**Possible Causes:**
+
+- Missing router outlet
+- Incorrect configuration
+
+**Solutions:**
+
+```typescript
+// Ensure Angular Router is properly configured
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  imports: [RouterOutlet, SidebarComponent],
+  template: `
+    <app-sidebar [data]="sidebarData"></app-sidebar>
+    <router-outlet></router-outlet>
+  `
+})
+```
+
+### Getting Help
+
+If you encounter issues not covered here:
+
+1. **Check the Demo App**: Review the `/demo` directory for working examples
+2. **GitHub Issues**: Search for [existing issues](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
+3. **Create an Issue**: Provide a minimal reproduction example
+4. **Stack Overflow**: Tag with `angular` and `intern-hub-layout`
+
+---
+
+## 📝 Changelog
+
+### Version 3.0.15 (Current)
+
+**Added:**
+
+- ✨ Modal component with theme support
+- ✨ File upload components (button and dropzone)
+- ✨ Drag-and-drop file upload functionality
+- ✨ Enhanced accessibility features
+
+**Improved:**
+
+- 🔧 Better TypeScript type definitions
+- 🔧 Optimized component performance with OnPush
+- 📚 Comprehensive README documentation
+
+**Fixed:**
+
+- 🐛 Icon color inheritance issues
+- 🐛 Sidebar collapse/expand animations
+- 🐛 Input validation edge cases
+
+### Version 3.0.x
+
+**Added:**
+
+- Support for Angular 21
+- Standalone component architecture
+- Input components (text, stepper, calendar)
+- Table components with custom templates
+- Approval list components
+
+**Changed:**
+
+- Migrated from NgModules to standalone components
+- Updated to TypeScript 5.9
+- Improved CSS architecture
+
+### Version 2.0.x
+
+**Added:**
+
+- Header and sidebar layout components
+- Button components
+- Icon support with dynamic-ds
+
+---
+
 ## 🛠️ Development
 
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm (v9 or higher)
+- Angular CLI (v21 or higher)
+
 ### Building the library
 
+Build the library for production:
+
 ```bash
 npm run build
 ```
 
+This will compile the library to the `dist/intern-hub-layout` directory.
+
 ### Running the demo app
 
+Start the demo application to see all components in action:
+
 ```bash
 npm run demo
 ```
 
+Navigate to `http://localhost:4200/` to view the demo.
+
+### Development Workflow
+
+1. **Make changes** to components in `src/libs/`
+2. **Build the library** with `npm run build`
+3. **Test in demo** app with `npm run demo`
+4. **Verify build** with `npm run build` after changes
+
+### Publishing to npm
+
+#### Dry Run (Test Before Publishing)
+
+```bash
+npm run publish:lib:dry
+```
+
+This will show what will be published without actually publishing.
+
+#### Publish to npm Registry
+
+```bash
+npm run publish:lib
+```
+
+This will:
+
+1. Build the library
+2. Navigate to the dist directory
+3. Publish to npm
+
+#### Create a Package Tarball
+
+```bash
+npm run pack:lib
+```
+
+This will:
+
+1. Increment the patch version
+2. Build the library
+3. Create a `.tgz` file for local testing
+
+### Testing Locally
+
+To test the library in another Angular project before publishing:
+
+```bash
+# In the library project
+npm run pack:lib
+
+# In your test project
+npm install /path/to/intern-hub-layout/dist/intern-hub-layout/goat-bravos-intern-hub-layout-3.0.15.tgz
+```
+
+### Project Scripts
+
+| Script                    | Description                      |
+| ------------------------- | -------------------------------- |
+| `npm run build`           | Build the library for production |
+| `npm run demo`            | Start the demo application       |
+| `npm run publish:lib`     | Build and publish to npm         |
+| `npm run publish:lib:dry` | Test publish without uploading   |
+| `npm run pack:lib`        | Create a local package tarball   |
+
 ---
 
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+We welcome contributions from the community! Here's how you can help:
+
+### Getting Started
+
+1. **Fork the repository**
+
+   ```bash
+   git clone https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout.git
+   ```
+
+2. **Create a feature branch**
+
+   ```bash
+   git checkout -b feature/AmazingFeature
+   ```
+
+3. **Make your changes**
+   - Follow the existing code style
+   - Add tests if applicable
+   - Update documentation
+
+4. **Commit your changes**
+
+   ```bash
+   git commit -m 'feat: Add some AmazingFeature'
+   ```
+
+   We follow [Conventional Commits](https://www.conventionalcommits.org/):
+   - `feat:` - New feature
+   - `fix:` - Bug fix
+   - `docs:` - Documentation changes
+   - `style:` - Code style changes (formatting, etc.)
+   - `refactor:` - Code refactoring
+   - `test:` - Adding tests
+   - `chore:` - Maintenance tasks
+
+5. **Push to your fork**
+
+   ```bash
+   git push origin feature/AmazingFeature
+   ```
+
+6. **Open a Pull Request**
+
+   Go to the [repository](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout) and create a pull request.
+
+### Contribution Guidelines
+
+#### Code Style
+
+- Use TypeScript strict mode
+- Follow Angular style guide
+- Use meaningful variable and function names
+- Add comments for complex logic
+- Keep components focused and single-purpose
+
+#### Component Guidelines
+
+When creating a new component:
+
+1. **Create in appropriate directory**
+
+   ```
+   src/libs/shared/components/your-component/
+   ├── your-component.component.ts
+   ├── your-component.component.html
+   ├── your-component.component.scss
+   └── your-component.model.ts (if needed)
+   ```
+
+2. **Use standalone components**
+
+   ```typescript
+   @Component({
+     selector: 'app-your-component',
+     standalone: true,
+     imports: [CommonModule],
+     // ...
+   })
+   ```
+
+3. **Export in public-api.ts**
 
-1. Fork the project
-2. Create your 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
+   ```typescript
+   export * from "./libs/shared/components/your-component/your-component.component";
+   ```
+
+4. **Document in README.md**
+   - Add usage examples
+   - Document all inputs and outputs
+   - Include practical examples
+
+#### Testing
+
+Before submitting a PR:
+
+- [ ] Build the library successfully (`npm run build`)
+- [ ] Test in demo app (`npm run demo`)
+- [ ] Verify no console errors or warnings
+- [ ] Test in different browsers (Chrome, Firefox, Safari)
+- [ ] Check accessibility (keyboard navigation, screen readers)
+
+#### Pull Request Process
+
+1. Update the README.md with details of changes
+2. Update version numbers following [SemVer](https://semver.org/)
+3. Ensure the PR description clearly describes the problem and solution
+4. Link any related issues
+
+### Questions or Issues?
+
+- Open an [issue](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
+- Reach out to the maintainers
+- Check existing issues and PRs first
 
 ---
 
 ## 📄 License
 
-This project is licensed under the MIT License - see the LICENSE file for details.
+This project is licensed under the **MIT License**.
+
+### MIT License
+
+```
+Copyright (c) 2024 FPT IS Intern Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+---
+
+## 🔗 Links & Resources
+
+### Official Links
+
+- **📦 npm Package**: [@goat-bravos/intern-hub-layout](https://www.npmjs.com/package/@goat-bravos/intern-hub-layout)
+- **💻 GitHub Repository**: [FPT-IS-Intern/Intern-Hub-FE-Layout](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout)
+- **📝 Changelog**: [GitHub Releases](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/releases)
+- **🐛 Bug Reports**: [GitHub Issues](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
+
+### Related Projects
+
+- **Angular**: [https://angular.dev](https://angular.dev)
+- **TypeScript**: [https://www.typescriptlang.org](https://www.typescriptlang.org)
+- **Dynamic DS**: Icon library used by this project
+
+### External Resources
+
+- [Angular Style Guide](https://angular.dev/style-guide)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+- [Web Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)
+- [Conventional Commits](https://www.conventionalcommits.org/)
+- [Semantic Versioning](https://semver.org/)
+
+---
+
+## 💬 Support
+
+### Need Help?
+
+- 💡 **General Questions**: Check the [Troubleshooting](#-troubleshooting) section
+- 📖 **Documentation**: Read through component examples above
+- 🐛 **Bug Reports**: [Create an issue](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues/new)
+- ✨ **Feature Requests**: [Suggest a feature](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues/new)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/discussions)
+
+### Stay Updated
+
+- ⭐ Star the repository to stay updated
+- 👁️ Watch for new releases
+- 🍴 Fork to contribute
+
+---
+
+## 🙏 Acknowledgments
+
+Built with ❤️ by the **FPT IS Intern Team**
+
+Special thanks to:
+
+- The Angular team for an amazing framework
+- All contributors who help improve this library
+- The open-source community
+
+---
+
+<div align="center">
+
+**[⬆ Back to Top](#-intern-hub-layout)**
+
+Made with 💙 by [FPT IS Intern Team](https://github.com/FPT-IS-Intern)
+
+**📦 @goat-bravos/intern-hub-layout** | **v3.0.15** | **MIT License**
+
+</div>