@htlkg/components 0.0.1

package/src/domain/ProductBadge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiTag } from '@hotelinking/ui';
+
+interface Product {
+  name: string;
+  status?: 'enabled' | 'disabled' | 'pending';
+  version?: string;
+}
+
+interface Props {
+  product: Product;
+  showVersion?: boolean;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showVersion: false,
+  loading: false
+});
+
+const statusColor = computed(() => {
+  switch (props.product.status) {
+    case 'enabled': return 'green' as const;
+    case 'disabled': return 'gray' as const;
+    case 'pending': return 'yellow' as const;
+    default: return 'gray' as const;
+  }
+});
+
+const badgeText = computed(() => {
+  let text = props.product.name;
+  if (props.showVersion && props.product.version) {
+    text += ` v${props.product.version}`;
+  }
+  return text;
+});
+</script>
+
+<template>
+  <uiTag
+    :loading="loading"
+    :color="statusColor"
+    :text="badgeText"
+    size="medium"
+  />
+</template>

package/src/domain/UserAvatar.md

@@ -0,0 +1,84 @@
+# UserAvatar Component
+
+A user avatar component displaying profile pictures or initials.
+
+## Features
+
+- **Image support**: Display user profile pictures
+- **Initials fallback**: Auto-generates initials from name
+- **Three sizes**: Small, medium, and large
+- **Exposed methods**: Access to user data and initials
+
+## Import
+
+```typescript
+import { UserAvatar } from '@htlkg/components';
+// or
+import { UserAvatar } from '@htlkg/components/domain';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User` | required | User information |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Avatar size |
+
+### User Interface
+
+```typescript
+interface User {
+  username?: string;
+  email?: string;
+  avatar?: string;
+  name?: string;
+}
+```
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getInitials()` | Get computed initials |
+| `getUser()` | Get user object |
+
+## Usage Examples
+
+### With Avatar Image
+
+```vue
+<script setup>
+import { UserAvatar } from '@htlkg/components';
+
+const user = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: 'https://example.com/avatar.jpg'
+};
+</script>
+
+<template>
+  <UserAvatar :user="user" size="large" />
+</template>
+```
+
+### With Initials
+
+```vue
+<script setup>
+import { UserAvatar } from '@htlkg/components';
+
+const user = {
+  name: 'Jane Smith',
+  email: 'jane@example.com'
+};
+</script>
+
+<template>
+  <UserAvatar :user="user" />
+</template>
+```
+
+## Demo
+
+See the [UserAvatar demo page](/components/user-avatar) for interactive examples.

package/src/domain/UserAvatar.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface User {
+  username?: string;
+  email?: string;
+  avatar?: string;
+  name?: string;
+}
+
+interface Props {
+  user: User;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+});
+
+const initials = computed(() => {
+  const name = props.user.name || props.user.username || props.user.email || '';
+  const parts = name.split(' ');
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    small: 'w-8 h-8 text-xs',
+    medium: 'w-10 h-10 text-sm',
+    large: 'w-14 h-14 text-lg'
+  };
+  return sizes[props.size];
+});
+
+// Expose methods for parent components
+defineExpose({
+  getInitials: () => initials.value,
+  getUser: () => props.user
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center rounded-full overflow-hidden bg-blue-500 text-white font-medium"
+    :class="sizeClasses"
+  >
+    <img
+      v-if="user.avatar"
+      :src="user.avatar"
+      :alt="user.username || user.email"
+      class="w-full h-full object-cover"
+    />
+    <div v-else class="flex items-center justify-center w-full h-full">
+      {{ initials }}
+    </div>
+  </div>
+</template>

package/src/domain/domain-components.property.test.ts

@@ -0,0 +1,449 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as fc from 'fast-check';
+import { mount } from '@vue/test-utils';
+import BrandCard from './BrandCard.vue';
+import BrandSelector from './BrandSelector.vue';
+import UserAvatar from './UserAvatar.vue';
+import ProductBadge from './ProductBadge.vue';
+
+// Mock @hotelinking/ui components
+vi.mock('@hotelinking/ui', () => ({
+  uiCard: {
+    name: 'uiCard',
+    props: ['id', 'name', 'type', 'logo', 'tags', 'loading'],
+    emits: ['card-selected'],
+    template: `
+      <div 
+        class="ui-card" 
+        :data-id="id"
+        :data-name="name"
+        :data-type="type"
+        :data-logo="logo"
+        :data-loading="loading"
+        @click="$emit('card-selected', { id, name })"
+      >
+        <slot />
+        <div v-for="tag in tags" :key="tag.name" :data-tag-color="tag.color">{{ tag.name }}</div>
+      </div>
+    `
+  },
+  uiTag: {
+    name: 'uiTag',
+    props: ['text', 'color', 'size', 'loading'],
+    template: `
+      <span 
+        class="ui-tag" 
+        :data-color="color"
+        :data-size="size"
+        :data-loading="loading"
+      >{{ text }}</span>
+    `
+  }
+}));
+
+/**
+ * Feature: htlkg-modular-architecture, Property 11: Domain components integrate with data hooks
+ * Validates: Requirements 13.1, 13.5
+ */
+describe('Domain components data hook integration', () => {
+  it('BrandSelector should accept brands from data hooks', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.string({ minLength: 1 }),
+            name: fc.string({ minLength: 1 }),
+            logo: fc.option(fc.webUrl()),
+            type: fc.option(fc.string())
+          }),
+          { minLength: 0, maxLength: 20 }
+        ),
+        fc.boolean(),
+        (brands, loading) => {
+          // Property: BrandSelector should accept brands array from data hooks
+          const wrapper = mount(BrandSelector, {
+            props: {
+              brands,
+              loading
+            }
+          });
+
+          // Property: Loading state should be reflected in UI
+          if (loading) {
+            expect(wrapper.text()).toContain('Loading brands');
+          } else {
+            // Property: All brands should be rendered
+            const cards = wrapper.findAll('.ui-card');
+            expect(cards.length).toBe(brands.length);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('BrandSelector should support v-model for selection', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.string({ minLength: 1 }),
+            name: fc.string({ minLength: 1 }),
+            logo: fc.option(fc.webUrl())
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (brands) => {
+          const wrapper = mount(BrandSelector, {
+            props: {
+              brands,
+              modelValue: null
+            }
+          });
+
+          // Property: Selecting a brand should emit update:modelValue
+          const firstCard = wrapper.find('.ui-card');
+          firstCard.trigger('click');
+
+          const updateEvents = wrapper.emitted('update:modelValue');
+          expect(updateEvents).toBeDefined();
+          
+          if (updateEvents && updateEvents.length > 0) {
+            const selectedBrand = updateEvents[0][0];
+            expect(selectedBrand).toBeDefined();
+            expect(brands).toContainEqual(selectedBrand);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('BrandSelector should expose methods for parent components', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.string({ minLength: 1 }),
+            name: fc.string({ minLength: 1 })
+          }),
+          { minLength: 1, maxLength: 5 }
+        ),
+        (brands) => {
+          const selectedBrand = brands[0];
+          const wrapper = mount(BrandSelector, {
+            props: {
+              brands,
+              modelValue: selectedBrand
+            }
+          });
+
+          // Property: Component should expose getSelected method
+          expect(wrapper.vm.getSelected).toBeDefined();
+          expect(wrapper.vm.getSelected()).toEqual(selectedBrand);
+
+          // Property: Component should expose clearSelection method
+          expect(wrapper.vm.clearSelection).toBeDefined();
+          wrapper.vm.clearSelection();
+          
+          const clearEvents = wrapper.emitted('update:modelValue');
+          expect(clearEvents).toBeDefined();
+          if (clearEvents && clearEvents.length > 0) {
+            expect(clearEvents[clearEvents.length - 1][0]).toBeNull();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});
+
+/**
+ * Feature: htlkg-modular-architecture, Property 12: Domain components display data correctly
+ * Validates: Requirements 13.2, 13.3, 13.4
+ */
+describe('Domain components data display', () => {
+  it('BrandCard should display brand data with appropriate styling', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          id: fc.string({ minLength: 1 }),
+          name: fc.string({ minLength: 1 }),
+          logo: fc.option(fc.webUrl()),
+          status: fc.constantFrom('active', 'inactive', 'maintenance', 'suspended'),
+          timezone: fc.option(fc.string())
+        }),
+        fc.boolean(),
+        (brand, showStatus) => {
+          const wrapper = mount(BrandCard, {
+            props: {
+              brand,
+              showStatus
+            }
+          });
+
+          // Property: Brand name should be displayed
+          const card = wrapper.find('.ui-card');
+          expect(card.attributes('data-name')).toBe(brand.name);
+
+          // Property: Brand ID should be set
+          expect(card.attributes('data-id')).toBe(brand.id);
+
+          // Property: Status should be displayed when showStatus is true
+          if (showStatus && brand.status) {
+            const tags = wrapper.findAll('[data-tag-color]');
+            expect(tags.length).toBeGreaterThan(0);
+            
+            // Property: Status color should match status type
+            const statusColorMap: Record<string, string> = {
+              active: 'green',
+              inactive: 'gray',
+              maintenance: 'yellow',
+              suspended: 'red'
+            };
+            
+            const expectedColor = statusColorMap[brand.status];
+            const statusTag = tags.find(tag => tag.attributes('data-tag-color') === expectedColor);
+            expect(statusTag).toBeDefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('BrandCard should handle missing optional fields gracefully', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          id: fc.string({ minLength: 1 }),
+          name: fc.string({ minLength: 1 })
+        }),
+        (brand) => {
+          // Property: Component should render without optional fields
+          const wrapper = mount(BrandCard, {
+            props: {
+              brand
+            }
+          });
+
+          const card = wrapper.find('.ui-card');
+          expect(card.exists()).toBe(true);
+          expect(card.attributes('data-name')).toBe(brand.name);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('UserAvatar should display user data with fallback to initials', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          username: fc.option(fc.string({ minLength: 1 })),
+          email: fc.option(fc.emailAddress()),
+          avatar: fc.option(fc.webUrl()),
+          name: fc.option(fc.string({ minLength: 2 }))
+        }),
+        fc.constantFrom('small', 'medium', 'large'),
+        (user, size) => {
+          const wrapper = mount(UserAvatar, {
+            props: {
+              user,
+              size
+            }
+          });
+
+          // Property: Component should always render
+          expect(wrapper.find('div').exists()).toBe(true);
+
+          // Property: If avatar exists, image should be rendered
+          if (user.avatar) {
+            const img = wrapper.find('img');
+            expect(img.exists()).toBe(true);
+            expect(img.attributes('src')).toBe(user.avatar);
+          } else {
+            // Property: If no avatar, initials should be displayed
+            const initials = wrapper.vm.getInitials();
+            expect(initials).toBeDefined();
+            expect(initials.length).toBeGreaterThan(0);
+            expect(initials.length).toBeLessThanOrEqual(2);
+            expect(wrapper.text()).toContain(initials);
+          }
+
+          // Property: Size classes should be applied correctly
+          const sizeClasses = {
+            small: 'w-8 h-8',
+            medium: 'w-10 h-10',
+            large: 'w-14 h-14'
+          };
+          
+          const expectedSizeClass = sizeClasses[size];
+          expect(wrapper.find('div').classes()).toContain(expectedSizeClass.split(' ')[0]);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('UserAvatar should generate correct initials from user data', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          name: fc.string({ minLength: 2 })
+        }),
+        (user) => {
+          const wrapper = mount(UserAvatar, {
+            props: { user }
+          });
+
+          const initials = wrapper.vm.getInitials();
+          
+          // Property: Initials should be uppercase
+          expect(initials).toBe(initials.toUpperCase());
+          
+          // Property: Initials should be 1-2 characters
+          expect(initials.length).toBeGreaterThan(0);
+          expect(initials.length).toBeLessThanOrEqual(2);
+          
+          // Property: Initials should come from the name
+          const nameParts = user.name.split(' ');
+          if (nameParts.length >= 2) {
+            // Two-word names should use first letter of each word
+            expect(initials).toBe(`${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase());
+          } else {
+            // Single-word names should use first two characters
+            expect(initials).toBe(user.name.substring(0, 2).toUpperCase());
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('ProductBadge should display product data with appropriate styling', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          name: fc.string({ minLength: 1 }),
+          status: fc.constantFrom('enabled', 'disabled', 'pending'),
+          version: fc.option(fc.string({ minLength: 1 }))
+        }),
+        fc.boolean(),
+        (product, showVersion) => {
+          const wrapper = mount(ProductBadge, {
+            props: {
+              product,
+              showVersion
+            }
+          });
+
+          // Property: Product name should be displayed
+          const badge = wrapper.find('.ui-tag');
+          expect(badge.exists()).toBe(true);
+          expect(badge.text()).toContain(product.name);
+
+          // Property: Version should be displayed when showVersion is true
+          if (showVersion && product.version) {
+            expect(badge.text()).toContain(`v${product.version}`);
+          } else if (!showVersion || !product.version) {
+            // Property: Version should not be displayed when showVersion is false
+            expect(badge.text()).not.toContain('v');
+          }
+
+          // Property: Status color should match status type
+          const statusColorMap: Record<string, string> = {
+            enabled: 'green',
+            disabled: 'gray',
+            pending: 'yellow'
+          };
+          
+          const expectedColor = statusColorMap[product.status || 'gray'];
+          expect(badge.attributes('data-color')).toBe(expectedColor);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('ProductBadge should handle missing status gracefully', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          name: fc.string({ minLength: 1 })
+        }),
+        (product) => {
+          // Property: Component should render without status
+          const wrapper = mount(ProductBadge, {
+            props: {
+              product
+            }
+          });
+
+          const badge = wrapper.find('.ui-tag');
+          expect(badge.exists()).toBe(true);
+          expect(badge.text()).toContain(product.name);
+          
+          // Property: Default color should be gray when status is missing
+          expect(badge.attributes('data-color')).toBe('gray');
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('Domain components should emit events correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          id: fc.string({ minLength: 1 }),
+          name: fc.string({ minLength: 1 }),
+          status: fc.constantFrom('active', 'inactive', 'maintenance', 'suspended')
+        }),
+        (brand) => {
+          const wrapper = mount(BrandCard, {
+            props: {
+              brand
+            }
+          });
+
+          // Property: Clicking card should emit click event with brand data
+          const card = wrapper.find('.ui-card');
+          card.trigger('click');
+
+          const clickEvents = wrapper.emitted('click');
+          expect(clickEvents).toBeDefined();
+          
+          if (clickEvents && clickEvents.length > 0) {
+            const emittedBrand = clickEvents[0][0];
+            expect(emittedBrand).toEqual(brand);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('Domain components should expose data access methods', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          id: fc.string({ minLength: 1 }),
+          name: fc.string({ minLength: 1 })
+        }),
+        (brand) => {
+          const wrapper = mount(BrandCard, {
+            props: {
+              brand
+            }
+          });
+
+          // Property: Component should expose getBrand method
+          expect(wrapper.vm.getBrand).toBeDefined();
+          expect(wrapper.vm.getBrand()).toEqual(brand);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});

package/src/domain/index.ts

@@ -0,0 +1,4 @@
+export { default as BrandSelector } from './BrandSelector.vue';
+export { default as BrandCard } from './BrandCard.vue';
+export { default as UserAvatar } from './UserAvatar.vue';
+export { default as ProductBadge } from './ProductBadge.vue';