@htlkg/components 0.0.1

package/src/overlays/Alert.md

@@ -0,0 +1,248 @@
+# Alert Component
+
+A stateful Vue wrapper around `@hotelinking/ui`'s `uiAlert` component. Provides visual alerts for information, success, warnings, and errors with optional actions.
+
+## Features
+
+- **Four alert types**: info, success, warning, danger
+- **v-model support**: Two-way binding for show/hide state
+- **Action buttons**: Optional clickable actions with custom events
+- **Loading state**: Skeleton loading indicator
+- **Rich content**: Slot support for custom HTML content
+- **Exposed methods**: Programmatic show/hide/toggle control
+
+## Import
+
+```typescript
+import { Alert } from '@htlkg/components';
+// or
+import { Alert } from '@htlkg/components/overlays';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | required | Alert title |
+| `type` | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | Alert type (affects colors and icon) |
+| `actions` | `Array<{name: string, event: string}>` | `[]` | Action buttons to display |
+| `loading` | `boolean` | `false` | Show loading skeleton |
+| `show` | `boolean` | `true` | Control visibility (v-model) |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:show` | `boolean` | Emitted when visibility changes (v-model) |
+| `alertEvent` | `string` | Emitted when action button is clicked (event value) |
+| `close` | - | Emitted when alert is hidden |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Alert content (supports HTML) |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `show()` | Show the alert |
+| `hide()` | Hide the alert |
+| `toggle()` | Toggle alert visibility |
+
+## Usage Examples
+
+### Basic Info Alert
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Alert } from '@htlkg/components';
+
+const showAlert = ref(true);
+</script>
+
+<template>
+  <Alert
+    v-model:show="showAlert"
+    title="System Update"
+    type="info"
+  >
+    We've updated our Design System to version 1.0.
+  </Alert>
+</template>
+```
+
+### Success Alert
+
+```vue
+<template>
+  <Alert
+    title="Operation Completed"
+    type="success"
+  >
+    The reservation has been created successfully.
+  </Alert>
+</template>
+```
+
+### Warning Alert with Actions
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Alert } from '@htlkg/components';
+
+const showWarning = ref(true);
+
+const actions = [
+  { name: 'Confirm', event: 'confirm' },
+  { name: 'Cancel', event: 'cancel' }
+];
+
+const handleAction = (event) => {
+  if (event === 'confirm') {
+    // Proceed with action
+    showWarning.value = false;
+  } else if (event === 'cancel') {
+    showWarning.value = false;
+  }
+};
+</script>
+
+<template>
+  <Alert
+    v-model:show="showWarning"
+    title="Confirm Deletion"
+    type="warning"
+    :actions="actions"
+    @alertEvent="handleAction"
+  >
+    This action cannot be undone. Are you sure?
+  </Alert>
+</template>
+```
+
+### Danger Alert
+
+```vue
+<template>
+  <Alert
+    title="Error Processing Request"
+    type="danger"
+  >
+    Could not connect to the server. Please try again later.
+  </Alert>
+</template>
+```
+
+### Loading State
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue';
+import { Alert } from '@htlkg/components';
+
+const isLoading = ref(true);
+
+onMounted(async () => {
+  await fetchData();
+  isLoading.value = false;
+});
+</script>
+
+<template>
+  <Alert
+    title="Loading Information..."
+    type="info"
+    :loading="isLoading"
+  >
+    Preparing system update
+  </Alert>
+</template>
+```
+
+### Rich Content with HTML
+
+```vue
+<template>
+  <Alert
+    title="New Features Available"
+    type="success"
+    :actions="[
+      { name: 'Explore', event: 'explore' },
+      { name: 'Later', event: 'later' }
+    ]"
+  >
+    <p class="mb-2">
+      <strong>Update 1.0:</strong> We've added new features:
+    </p>
+    <ul class="list-disc list-inside space-y-1">
+      <li>Improved pricing calendar</li>
+      <li>New notification system</li>
+      <li>Performance optimization</li>
+    </ul>
+  </Alert>
+</template>
+```
+
+### Programmatic Control
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Alert } from '@htlkg/components';
+
+const alertRef = ref();
+
+const showAlert = () => alertRef.value?.show();
+const hideAlert = () => alertRef.value?.hide();
+const toggleAlert = () => alertRef.value?.toggle();
+</script>
+
+<template>
+  <div>
+    <button @click="showAlert">Show</button>
+    <button @click="hideAlert">Hide</button>
+    <button @click="toggleAlert">Toggle</button>
+    
+    <Alert
+      ref="alertRef"
+      title="Controlled Alert"
+      type="info"
+    >
+      This alert is controlled programmatically.
+    </Alert>
+  </div>
+</template>
+```
+
+## Alert Types
+
+| Type | Color Scheme | Icon | Use Case |
+|------|--------------|------|----------|
+| `info` | Lime | ℹ️ Information | General information, updates |
+| `success` | Green | ✅ Check | Successful operations, confirmations |
+| `warning` | Yellow | ⚠️ Warning | Important warnings, confirmations needed |
+| `danger` | Red | ❌ Error | Errors, critical issues |
+
+## Design System Integration
+
+This component wraps `@hotelinking/ui`'s `uiAlert` component, providing:
+
+- Reactive state management with Vue 3 Composition API
+- v-model support for show/hide state
+- Exposed methods for programmatic control
+- Event handling for action buttons
+- Consistent API with other overlay components (Modal, Notification, Drawer)
+
+## Related Components
+
+- **Notification**: For toast-style notifications
+- **Modal**: For dialog overlays
+- **Drawer**: For side panel overlays
+
+## Demo
+
+See the [Alert demo page](/components/alert) for interactive examples.

package/src/overlays/Alert.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Alert from './Alert.vue';
+
+describe('Alert Component', () => {
+  it('renders with basic props', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info'
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders different alert types', () => {
+    const types = ['info', 'success', 'warning', 'danger'] as const;
+    
+    types.forEach(type => {
+      const wrapper = mount(Alert, {
+        props: {
+          title: 'Test Alert',
+          type
+        }
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  it('renders with actions', () => {
+    const actions = [
+      { name: 'Confirm', event: 'confirm' },
+      { name: 'Cancel', event: 'cancel' }
+    ];
+
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'warning',
+        actions
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.props('actions')).toEqual(actions);
+  });
+
+  it('emits alertEvent when action is triggered', async () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info',
+        actions: [{ name: 'OK', event: 'ok' }]
+      }
+    });
+
+    const component = wrapper.vm as any;
+    if (component.handleAlertEvent) {
+      component.handleAlertEvent('ok');
+      expect(wrapper.emitted('alertEvent')).toBeTruthy();
+      expect(wrapper.emitted('alertEvent')?.[0]).toEqual(['ok']);
+    }
+  });
+
+  it('renders with show prop', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info',
+        show: true
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.props('show')).toBe(true);
+  });
+
+  it('hides when show is false', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info',
+        show: false
+      }
+    });
+
+    expect(wrapper.find('div').exists()).toBe(false);
+  });
+
+  it('supports v-model for show state', async () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info',
+        show: false,
+        'onUpdate:show': (value: boolean) => wrapper.setProps({ show: value })
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.show();
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:show')).toBeTruthy();
+  });
+
+  it('exposes show, hide, and toggle methods', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    expect(component.show).toBeDefined();
+    expect(component.hide).toBeDefined();
+    expect(component.toggle).toBeDefined();
+  });
+
+  it('renders with loading state', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Loading Alert',
+        type: 'info',
+        loading: true
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.props('loading')).toBe(true);
+  });
+
+  it('renders slot content', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info'
+      },
+      slots: {
+        default: '<p>Custom alert content</p>'
+      }
+    });
+
+    expect(wrapper.html()).toContain('Custom alert content');
+  });
+
+  it('emits close event when hidden', async () => {
+    const wrapper = mount(Alert, {
+      props: {
+        title: 'Test Alert',
+        type: 'info',
+        show: true
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.hide();
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(wrapper.emitted('update:show')).toBeTruthy();
+  });
+});

package/src/overlays/Alert.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiAlert, type UiAlertInterface } from '@hotelinking/ui';
+
+interface Props {
+  title: string;
+  type?: UiAlertInterface['type'];
+  actions?: UiAlertInterface['actions'];
+  loading?: boolean;
+  show?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  actions: () => [],
+  loading: false,
+  show: true
+});
+
+const emit = defineEmits<{
+  'update:show': [value: boolean];
+  'alertEvent': [event: string];
+  'close': [];
+}>();
+
+// Internal state synced with v-model
+const isVisible = computed({
+  get: () => props.show,
+  set: (value: boolean) => {
+    emit('update:show', value);
+    if (!value) {
+      emit('close');
+    }
+  }
+});
+
+// Convert to uiAlert format
+const alertConfig = computed<UiAlertInterface>(() => ({
+  title: props.title,
+  type: props.type,
+  actions: props.actions,
+  loading: props.loading
+}));
+
+// Handle alert action events from uiAlert
+function handleAlertEvent(event: string) {
+  emit('alertEvent', event);
+}
+
+// Expose methods for parent components
+defineExpose({
+  show: () => { isVisible.value = true; },
+  hide: () => { isVisible.value = false; },
+  toggle: () => { isVisible.value = !isVisible.value; }
+});
+</script>
+
+<template>
+  <div v-if="isVisible">
+    <uiAlert
+      :title="alertConfig.title"
+      :type="alertConfig.type"
+      :actions="alertConfig.actions"
+      :loading="alertConfig.loading"
+      @alert-event="handleAlertEvent"
+    >
+      <slot />
+    </uiAlert>
+  </div>
+</template>

package/src/overlays/Drawer.md

@@ -0,0 +1,140 @@
+# Drawer Component
+
+A side panel overlay component for displaying additional content without leaving the current page.
+
+## Features
+
+- **Four positions**: Left, right, top, bottom
+- **v-model support**: Two-way binding for open/close state
+- **Overlay backdrop**: Darkens background when open
+- **Exposed methods**: Programmatic open/close/toggle control
+- **Responsive**: Adapts to mobile screens
+
+## Import
+
+```typescript
+import { Drawer } from '@htlkg/components';
+// or
+import { Drawer } from '@htlkg/components/overlays';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Control visibility (v-model) |
+| `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Drawer position |
+| `title` | `string` | `''` | Drawer title |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:open` | `boolean` | Emitted when visibility changes |
+| `close` | - | Emitted when drawer is closed |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Drawer content |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `open()` | Open the drawer |
+| `close()` | Close the drawer |
+| `toggle()` | Toggle drawer visibility |
+
+## Usage Examples
+
+### Basic Drawer
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Drawer } from '@htlkg/components';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <button @click="isOpen = true">Open Drawer</button>
+  
+  <Drawer
+    v-model:open="isOpen"
+    title="Settings"
+  >
+    <div class="space-y-4">
+      <h3>User Settings</h3>
+      <p>Configure your preferences here.</p>
+    </div>
+  </Drawer>
+</template>
+```
+
+### Left Drawer
+
+```vue
+<template>
+  <Drawer
+    v-model:open="isOpen"
+    position="left"
+    title="Navigation"
+  >
+    <nav>
+      <ul>
+        <li><a href="/dashboard">Dashboard</a></li>
+        <li><a href="/users">Users</a></li>
+        <li><a href="/settings">Settings</a></li>
+      </ul>
+    </nav>
+  </Drawer>
+</template>
+```
+
+### Filter Drawer
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Drawer } from '@htlkg/components';
+
+const showFilters = ref(false);
+const filters = ref({
+  status: '',
+  dateRange: ''
+});
+</script>
+
+<template>
+  <button @click="showFilters = true">Filters</button>
+  
+  <Drawer
+    v-model:open="showFilters"
+    title="Filter Options"
+    position="right"
+  >
+    <form class="space-y-4">
+      <div>
+        <label>Status</label>
+        <select v-model="filters.status">
+          <option value="">All</option>
+          <option value="active">Active</option>
+          <option value="inactive">Inactive</option>
+        </select>
+      </div>
+      <div>
+        <label>Date Range</label>
+        <input v-model="filters.dateRange" type="date" />
+      </div>
+      <button type="submit">Apply Filters</button>
+    </form>
+  </Drawer>
+</template>
+```
+
+## Demo
+
+See the [Drawer demo page](/components/drawer) for interactive examples.

package/src/overlays/Drawer.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Drawer from './Drawer.vue';
+
+describe('Drawer Component', () => {
+  it('renders with basic props', () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true,
+        title: 'Test Drawer'
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('supports v-model for open state', async () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: false,
+        'onUpdate:open': (value: boolean) => wrapper.setProps({ open: value })
+      }
+    });
+
+    expect(wrapper.props('open')).toBe(false);
+
+    const component = wrapper.vm as any;
+    if (component.open) {
+      component.open();
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+    }
+  });
+
+  it('emits close event when drawer is closed', async () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true
+      }
+    });
+
+    const component = wrapper.vm as any;
+    if (component.close) {
+      component.close();
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+      expect(wrapper.emitted('close')).toBeTruthy();
+    }
+  });
+
+  it('exposes open and close methods', () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: false
+      }
+    });
+
+    const component = wrapper.vm as any;
+    if (component.open && component.close) {
+      expect(typeof component.open).toBe('function');
+      expect(typeof component.close).toBe('function');
+    }
+  });
+
+  it('renders with different positions', () => {
+    const positions = ['left', 'right', 'top', 'bottom'];
+    
+    positions.forEach(position => {
+      const wrapper = mount(Drawer, {
+        props: {
+          open: true,
+          position: position as any
+        }
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  it('renders slot content', () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true
+      },
+      slots: {
+        default: '<div class="drawer-content">Custom Content</div>'
+      }
+    });
+
+    expect(wrapper.html()).toContain('drawer-content');
+  });
+});