npm package: @mquraish/component-library
Description: Vue 3 component library with 43+ reusable components
Author: Quraish
Latest version: 1.0.1

# Component Library

**Component library Vue.js modern dengan 43+ komponen siap pakai** - Dari basic hingga advanced components untuk mempercepat development aplikasi Anda.

## 🚀 Fitur

- ✅ **43 Komponen** Vue 3 yang dapat digunakan kembali
- 🎨 **Design Modern** dan konsisten
- 📱 **Responsive** dan mobile-friendly
- ♿ **Accessible** (a11y friendly)
- 🎭 Berbagai **variant** dan customization
- 🔧 **Easy to use** dan well documented
- 📚 **Storybook** documentation untuk semua komponen
- 💪 **TypeScript ready**
- 🎯 **Composition API**
- ⚡ **Vite** untuk development yang super cepat

## 📦 Instalasi

```bash
npm install
# atau
yarn install
```

## 🏃 Development

### Run Development Server

```bash
npm run dev
# atau
yarn dev
```

Buka browser di `http://localhost:5173` untuk melihat semua komponen.

### Run Storybook (Documentation)

```bash
npm run storybook
# atau
yarn storybook
```

Buka browser di `http://localhost:6006` untuk melihat dokumentasi interaktif semua komponen dengan Storybook.

## 🏗️ Build

### Build untuk Production

```bash
npm run build
# atau
yarn build
```

### Build Storybook untuk Deployment

```bash
npm run build-storybook
# atau
yarn build-storybook
```

Output akan ada di folder `storybook-static/` yang siap di-deploy ke Vercel, Netlify, atau hosting lainnya.

## 📚 Daftar Komponen (43 Total)

### 🎯 Basic Components (5)

- **MButton** - Tombol dengan berbagai variant dan state (loading, disabled)
- **MBadge** - Badge untuk menampilkan status atau notifikasi (pill, dot)
- **MAvatar** - Avatar untuk user profile dengan status indicator
- **MDivider** - Pembatas konten horizontal/vertical dengan label
- **MSpinner** - Loading spinner dengan berbagai ukuran dan warna

### 📝 Form Components (10)

- **MInput** - Text input dengan prefix/suffix slot dan validation
- **MTextarea** - Multi-line text input dengan character counter
- **MSelect** - Dropdown select dengan custom options
- **MCheckbox** - Checkbox dengan array/boolean support
- **MRadio** - Radio button groups
- **MSwitch** - Toggle switch dengan smooth animation
- **MDatePicker** - Calendar date picker dengan month navigation
- **MSlider** - Range slider dengan visual feedback
- **MUpload** - File upload dengan drag & drop dan image preview
- **MRating** - Star rating component dengan hover effects

### 📐 Layout Components (7)

- **MContainer** - Container wrapper dengan max-width
- **MGrid** - Responsive grid system dengan berbagai kolom
- **MCard** - Card dengan header/body/footer dan overflow control
- **MModal** - Modal dialog dengan backdrop dan teleport
- **MDrawer** - Side drawer dari 4 arah (top, right, bottom, left)
- **MTabs** - Tab navigation system
- **MTabPanel** - Individual tab content panels

### 💬 Feedback Components (6)

- **MAlert** - Alert messages dengan 4 tipe (success, info, warning, danger)
- **MProgress** - Progress bar dengan striped/animated variants
- **MSkeleton** - Loading skeleton placeholders dengan avatar option
- **MTooltip** - Hover tooltips dengan 4 positioning
- **MToast** - Toast notifications dengan auto-dismiss dan positioning
- **MPopover** - Click/hover triggered content overlay dengan actions slot

### ⚡ Advanced Components (6)

- **MTable** - Data table dengan sortable columns, hover, dan striped
- **MDropdown** + **MDropdownItem** - Dropdown menus dengan divider support
- **MAccordion** + **MAccordionItem** - Collapsible panels dengan smooth transition
- **MPagination** - Page navigation controls dengan prev/next

### 🧭 Navigation Components (8)

- **MBreadcrumb** + **MBreadcrumbItem** - Breadcrumb navigation dengan separator
- **MStepper** + **MStep** - Multi-step form indicator (horizontal/vertical)
- **MTimeline** + **MTimelineItem** - Event/history timeline (left/right/alternate)
- **MMenu** + **MMenuItem** - Navigation menu/navbar dengan responsive mobile

### 🔧 Composables (1)

- **useToast** - Toast notification state management dengan methods (success, error, warning, info)

---

## 💡 Contoh Penggunaan

### 🎯 Basic Usage

#### Button

```vue
<MButton variant="primary">Primary Button</MButton>
<MButton variant="success" loading>Processing...</MButton>
<MButton variant="danger" disabled>Disabled</MButton>
<MButton variant="outline" size="large">Large Outline</MButton>
```

#### Badge

```vue
<MBadge variant="success">Active</MBadge>
<MBadge variant="danger" pill>99+</MBadge>
<MBadge dot></MBadge>
```

### 📝 Form Components

#### Input

```vue
<MInput
  v-model="email"
  type="email"
  label="Email Address"
  placeholder="Enter your email"
  :error="emailError"
  required
>
  <template #prefix>📧</template>
</MInput>
```

#### DatePicker

```vue
<MDatePicker v-model="selectedDate" placeholder="Select date" />
<p v-if="selectedDate">Selected: {{ selectedDate }}</p>
```

#### Slider

```vue
<MSlider v-model="volume" :min="0" :max="100" :step="5" />
<p>Volume: {{ volume }}%</p>
```

#### Upload

```vue
<MUpload
  v-model="files"
  accept="image/*"
  multiple
  :max-size="5 * 1024 * 1024"
/>
```

#### Rating

```vue
<MRating v-model="rating" />
<p>Your rating: {{ rating }}/5</p>
```

### 💬 Toast Notifications

```vue
<script setup>
import { MButton, MToast, useToast } from "./components";

const toast = useToast();

const showSuccess = () => {
  toast.success("Operation successful!");
};

const showError = () => {
  toast.error("Something went wrong!");
};
</script>

<template>
  <MButton @click="showSuccess" variant="success">Success</MButton>
  <MButton @click="showError" variant="danger">Error</MButton>
  <MToast position="top-right" />
</template>
```

### 🧭 Stepper (Multi-step Form)

```vue
<script setup>
import { ref } from "vue";

const currentStep = ref(0);
const steps = [
  { title: "Account", description: "Create your account" },
  { title: "Profile", description: "Fill your profile" },
  { title: "Confirm", description: "Confirm details" },
];
</script>

<template>
  <MStepper v-model="currentStep">
    <MStep
      v-for="(step, index) in steps"
      :key="index"
      :title="step.title"
      :description="step.description"
      :index="index"
      :is-last="index === steps.length - 1"
    />
  </MStepper>

  <MButton @click="currentStep--" :disabled="currentStep === 0">
    Previous
  </MButton>
  <MButton @click="currentStep++" :disabled="currentStep === steps.length - 1">
    Next
  </MButton>
</template>
```

### 📅 Timeline

```vue
<MTimeline variant="left">
  <MTimelineItem
    title="Project Started"
    description="Initial commit and setup"
    timestamp="2025-01-01"
    color="#10b981"
  />
  <MTimelineItem
    title="Feature Development"
    description="Implemented core features"
    timestamp="2025-01-15"
    color="#3b82f6"
  />
  <MTimelineItem
    title="Testing Phase"
    description="QA and bug fixes"
    timestamp="2025-01-30"
    color="#f59e0b"
  />
</MTimeline>
```

### 🧭 Navigation Menu

```vue
<MMenu variant="primary" fixed responsive>
  <template #brand>
    <span style="font-weight: bold;">My App</span>
  </template>

  <MMenuItem href="/" active>Home</MMenuItem>
  <MMenuItem href="/products">Products</MMenuItem>
  <MMenuItem href="/about">About</MMenuItem>
  <MMenuItem href="/contact">Contact</MMenuItem>

  <template #actions>
    <MMenuItem
      href="#"
      style="
        background-color: #3b82f6;
        color: white;
        border-radius: 0.375rem;
      "
    >
      Login
    </MMenuItem>
  </template>
</MMenu>
```

### 💬 Popover

```vue
<MPopover title="Delete Confirmation" placement="top" closable>
  <template #trigger>
    <MButton variant="danger">Delete</MButton>
  </template>

  Are you sure you want to delete this item?

  <template #actions>
    <MButton variant="secondary" size="sm">Cancel</MButton>
    <MButton variant="danger" size="sm">Confirm</MButton>
  </template>
</MPopover>
```

### 📊 Table dengan Sorting

```vue
<script setup>
const columns = [
  { key: "name", label: "Name", sortable: true },
  { key: "email", label: "Email", sortable: true },
  { key: "role", label: "Role" },
];

const data = [
  { name: "John Doe", email: "john@example.com", role: "Admin" },
  { name: "Jane Smith", email: "jane@example.com", role: "User" },
  { name: "Bob Wilson", email: "bob@example.com", role: "Manager" },
];
</script>

<template>
  <MTable :columns="columns" :data="data" hoverable striped />
</template>
```

### 🎴 Modal

```vue
<script setup>
import { ref } from "vue";
const showModal = ref(false);
</script>

<template>
  <MButton @click="showModal = true">Open Modal</MButton>

  <MModal v-model="showModal" title="Confirmation">
    <p>Are you sure you want to continue?</p>

    <template #footer>
      <MButton variant="secondary" @click="showModal = false"> Cancel </MButton>
      <MButton @click="confirm">Confirm</MButton>
    </template>
  </MModal>
</template>
```

---

## 🎨 Customization

Semua komponen menggunakan **CSS variables** yang dapat di-override untuk menyesuaikan tema:

Edit file `src/styles/global.css`:

```css
:root {
  /* Colors */
  --m-primary: #3b82f6;
  --m-secondary: #6b7280;
  --m-success: #10b981;
  --m-danger: #ef4444;
  --m-warning: #f59e0b;
  --m-info: #06b6d4;

  /* Borders */
  --m-border-color: #e5e7eb;
  --m-border-radius: 0.375rem;

  /* Transitions */
  --m-transition: all 0.3s ease;

  /* Typography */
  --m-font-family: system-ui, -apple-system, sans-serif;
}
```

## 📖 Import & Setup

### Import Semua Komponen

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import ComponentLibrary from "./components";

const app = createApp(App);
app.use(ComponentLibrary);
app.mount("#app");
```

### Import Individual Components

```vue
<script setup>
import { MButton, MInput, MCard, MToast, useToast } from "./components";
</script>
```

## 🛠️ Tech Stack

- **Vue 3.5.22** - Progressive JavaScript Framework
- **Vite 7.1.11** - Next Generation Frontend Tooling
- **Storybook 10.0.7** - Component documentation and development
- **Composition API** - Modern Vue development pattern
- **CSS Variables** - Dynamic theming support
- **Teleport API** - For modals, toasts, tooltips
- **Transitions** - Smooth animations

## 🤝 Kontribusi

Kontribusi sangat diterima! Silakan:

1. Fork repository ini
2. Buat feature branch (`git checkout -b feature/AmazingComponent`)
3. Commit perubahan (`git commit -m 'Add some AmazingComponent'`)
4. Push ke branch (`git push origin feature/AmazingComponent`)
5. Buat Pull Request

## 📝 License

MIT License - feel free to use in your projects!

## 👨‍💻 Author

- Modern Component Library for Vue.js

---

## 📖 Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/)
- [Vue - Official Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## 📚 Documentation

Dokumentasi lengkap untuk semua komponen tersedia di **Storybook**:

- **Local**: Jalankan `yarn storybook` dan buka `http://localhost:6006`
- **Online**: [Link to deployed Storybook] (coming soon)

Setiap komponen memiliki:

- ✅ Interactive examples dengan berbagai use cases
- ✅ Props documentation dan controls
- ✅ Code snippets yang bisa langsung di-copy
- ✅ Accessibility (a11y) testing

## 🌐 Browser DevTools

**Chromium-based (Chrome, Edge, Brave):**

- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

**Firefox:**

- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)

---

⭐ **Jika component library ini membantu project Anda, jangan lupa beri star!**

Made with ❤️ using Vue.js + Vite