@danarakca/keu-ui 0.0.1 → 1.1.0

package/README.md

@@ -1,63 +1,208 @@
-# KeuUi
+# Danarakca Design System
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+> **Keu Design System** - Shared UI components library
 
-## Code scaffolding
+[![npm version](https://img.shields.io/npm/v/danarakca-design-system.svg)](https://www.npmjs.com/package/danarakca-design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## 📦 Instalasi
 
 ```bash
-ng generate component component-name
+npm install danarakca-design-system
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
+## 🚀 Quick Start
+
+### 1. Import Komponen (Standalone Components)
+
+Semua komponen adalah **standalone components**, jadi bisa langsung diimport tanpa perlu NgModule.
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { KeuButtonComponent, KeuInputComponent, KeuAlertComponent } from 'danarakca-design-system';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    KeuButtonComponent,
+    KeuInputComponent,
+    KeuAlertComponent
+  ],
+  template: `
+    <keu-alert variant="success" [dismissible]="true">
+      Welcome to Danarakca Design System!
+    </keu-alert>
+    
+    <keu-input 
+      label="Username" 
+      placeholder="Enter your username"
+      [(ngModel)]="username">
+    </keu-input>
+    
+    <keu-button variant="primary" size="md" (click)="handleClick()">
+      Submit
+    </keu-button>
+  `
+})
+export class AppComponent {
+  username = '';
+  
+  handleClick() {
+    console.log('Button clicked!', this.username);
+  }
+}
 ```
 
-## Building
+### 2. Setup Styles
 
-To build the library, run:
+Import theme di `styles.scss`:
 
-```bash
-ng build keu-ui
+```scss
+@use 'danarakca-design-system/styles/keu-ui.theme';
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/keu-ui
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
+## 📚 Komponen yang Tersedia
+
+### Form Components
+- ✅ `KeuInputComponent` - Text input field
+- ✅ `KeuTextareaComponent` - Multi-line text input
+- ✅ `KeuSelectComponent` - Select dropdown
+- ✅ `KeuCheckboxComponent` - Checkbox input
+- ✅ `KeuRadioComponent` - Radio button
+- ✅ `KeuToggleComponent` - Toggle switch
+- ✅ `KeuSliderComponent` - Range slider
+- ✅ `KeuDatepickerComponent` - Date picker
+- ✅ `KeuRichtextComponent` - Rich text editor (CKEditor)
+- ✅ `KeuAutocompleteComponent` - Autocomplete input
+- ✅ `KeuTreeSelectComponent` - Tree select dropdown
+- ✅ `KeuRatingComponent` - Star rating
+
+### Button & Navigation
+- ✅ `KeuButtonComponent` - Button
+- ✅ `KeuButtonGroupComponent` - Button group
+- ✅ `KeuLinkComponent` - Link/Anchor
+- ✅ `KeuBreadcrumbComponent` - Breadcrumb navigation
+- ✅ `KeuPaginationComponent` - Pagination
+- ✅ `KeuTabsComponent` - Tabs navigation
+- ✅ `KeuDropdownComponent` - Dropdown menu
+
+### Data Display
+- ✅ `KeuTableComponent` - Data table with sorting
+- ✅ `KeuBadgeComponent` - Badge/label
+- ✅ `KeuChipComponent` - Chip/tag
+- ✅ `KeuAvatarComponent` - User avatar
+- ✅ `KeuAvatarGroupComponent` - Avatar group
+- ✅ `KeuProgressBarComponent` - Progress bar
+- ✅ `KeuProgressCircleComponent` - Circular progress
+- ✅ `KeuTooltipComponent` - Tooltip
+
+### Feedback & Overlay
+- ✅ `KeuAlertComponent` - Alert message
+- ✅ `KeuModalComponent` - Modal dialog
+- ✅ `KeuSidebarComponent` - Sidebar panel
+
+### Layout
+- ✅ `KeuContainerDirective` - Container
+- ✅ `KeuRowDirective` - Grid row
+- ✅ `KeuColDirective` - Grid column
+- ✅ `KeuDividerComponent` - Divider line
+- ✅ `KeuIconComponent` - Icon (Tabler Icons)
+
+## 💡 Contoh Penggunaan
+
+### Button dengan Icon
+
+```typescript
+import { KeuButtonComponent } from 'danarakca-design-system';
+
+@Component({
+  template: `
+    <keu-button 
+      variant="primary" 
+      size="md"
+      icon="ti-plus"
+      (click)="addItem()">
+      Add New Item
+    </keu-button>
+  `
+})
 ```
 
-## Running end-to-end tests
+### Form Input dengan Validasi
+
+```typescript
+import { KeuInputComponent } from 'danarakca-design-system';
+
+@Component({
+  template: `
+    <keu-input 
+      label="Email"
+      type="email"
+      placeholder="your@email.com"
+      [state]="emailValid ? 'default' : 'error'"
+      helperText="Please enter a valid email"
+      [(ngModel)]="email">
+    </keu-input>
+  `
+})
+```
 
-For end-to-end (e2e) testing, run:
+### Data Table
+
+```typescript
+import { KeuTableComponent, KeuColumnDef } from 'danarakca-design-system';
+
+@Component({
+  template: `
+    <keu-table 
+      [data]="users" 
+      [columns]="columns"
+      [sortable]="true"
+      (sortChange)="onSort($event)">
+    </keu-table>
+  `
+})
+export class UsersComponent {
+  columns: KeuColumnDef[] = [
+    { key: 'name', header: 'Name' },
+    { key: 'email', header: 'Email' },
+    { key: 'role', header: 'Role' }
+  ];
+  
+  users = [
+    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
+  ];
+}
+```
 
-```bash
-ng e2e
+### Modal Dialog
+
+```typescript
+import { KeuModalComponent } from 'danarakca-design-system';
+
+@Component({
+  template: `
+    <keu-modal
+      [(visible)]="showModal"
+      title="Confirm Delete"
+      variant="danger"
+      okText="Delete"
+      cancelText="Cancel"
+      (ok)="handleDelete()"
+      (cancel)="showModal = false">
+      Are you sure you want to delete this item?
+    </keu-modal>
+  `
+})
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+## 📄 License
+
+MIT License - CORE APBN Team
 
-## 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.
+**Built with ❤️ by CORE APBN Team**