@htlkg/components 0.0.1 → 0.0.2

package/src/stores/user.ts

@@ -0,0 +1,33 @@
+/**
+ * User Store
+ * 
+ * Nanostore for sharing user data across components
+ * without props (lower hydration cost)
+ */
+
+import { atom } from 'nanostores';
+
+export interface User {
+	username?: string;
+	email?: string;
+	avatar?: string;
+	isAdmin?: boolean;
+	attributes?: {
+		email?: string;
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
+
+// User store
+export const $user = atom<User | null>(null);
+
+// Helper function to set user
+export function setUser(user: User | null) {
+	$user.set(user);
+}
+
+// Helper function to clear user
+export function clearUser() {
+	$user.set(null);
+}

package/src/test-setup.ts

@@ -0,0 +1,235 @@
+import { config } from '@vue/test-utils';
+import { h, defineComponent } from 'vue';
+
+// Stub for uiInput from @hotelinking/ui
+const uiInputStub = defineComponent({
+  name: 'uiInput',
+  props: ['name', 'label', 'type', 'value', 'placeholder', 'error', 'color', 'loading', 'requiredText', 'min', 'max', 'autocomplete'],
+  emits: ['input-changed'],
+  setup(props, { emit }) {
+    return () => h('div', { class: 'ui-input' }, [
+      props.label && h('label', props.label),
+      h('input', {
+        name: props.name,
+        value: props.value,
+        type: props.type || 'text',
+        placeholder: props.placeholder,
+        disabled: props.loading,
+        onInput: (e: Event) => emit('input-changed', { value: (e.target as HTMLInputElement).value })
+      }),
+      props.error && h('span', { class: 'error' }, props.error)
+    ]);
+  }
+});
+
+// Stub for uiSelect from @hotelinking/ui
+const uiSelectStub = defineComponent({
+  name: 'uiSelect',
+  props: ['label', 'items', 'select', 'placeholder', 'error', 'color', 'loading', 'requiredText'],
+  emits: ['select-changed'],
+  setup(props, { emit }) {
+    return () => h('div', { class: 'ui-select' }, [
+      props.label && h('label', props.label),
+      h('select', {
+        value: props.select?.id,
+        disabled: props.loading,
+        onChange: (e: Event) => {
+          const value = (e.target as HTMLSelectElement).value;
+          const item = props.items?.find((i: any) => i.id === value);
+          emit('select-changed', item);
+        }
+      }, props.items?.map((opt: any) => 
+        h('option', { value: opt.id }, opt.label || opt.name)
+      )),
+      props.error && h('span', { class: 'error' }, props.error)
+    ]);
+  }
+});
+
+// Stub for uiToggle from @hotelinking/ui
+const uiToggleStub = defineComponent({
+  name: 'uiToggle',
+  props: ['item', 'checked', 'loading'],
+  emits: ['toggle-changed'],
+  setup(props, { emit }) {
+    return () => h('div', { class: 'ui-toggle' }, [
+      h('input', {
+        type: 'checkbox',
+        checked: props.checked,
+        disabled: props.loading,
+        onChange: (e: Event) => emit('toggle-changed', { active: (e.target as HTMLInputElement).checked })
+      }),
+      props.item?.title && h('label', props.item.title)
+    ]);
+  }
+});
+
+// Stub for uiTextArea from @hotelinking/ui
+const uiTextAreaStub = defineComponent({
+  name: 'uiTextArea',
+  props: ['name', 'label', 'value', 'placeholder', 'error', 'color', 'loading', 'requiredText', 'rows'],
+  emits: ['input-changed'],
+  setup(props, { emit }) {
+    return () => h('div', { class: 'ui-textarea' }, [
+      props.label && h('label', props.label),
+      h('textarea', {
+        name: props.name,
+        value: props.value,
+        placeholder: props.placeholder,
+        disabled: props.loading,
+        rows: props.rows,
+        onInput: (e: Event) => emit('input-changed', { value: (e.target as HTMLTextAreaElement).value })
+      }),
+      props.error && h('span', { class: 'error' }, props.error)
+    ]);
+  }
+});
+
+// Stub for uiRangeSlider from @hotelinking/ui
+const uiRangeSliderStub = defineComponent({
+  name: 'uiRangeSlider',
+  props: ['label', 'min', 'max', 'sliderValue', 'loading', 'requiredText'],
+  emits: ['sliderUpdated'],
+  setup(props, { emit }) {
+    return () => h('div', { class: 'ui-slider' }, [
+      props.label && h('label', props.label),
+      h('input', {
+        type: 'range',
+        value: props.sliderValue,
+        min: props.min,
+        max: props.max,
+        disabled: props.loading,
+        onInput: (e: Event) => emit('sliderUpdated', Number((e.target as HTMLInputElement).value))
+      })
+    ]);
+  }
+});
+
+// Stub for uiButton from @hotelinking/ui
+const uiButtonStub = defineComponent({
+  name: 'uiButton',
+  props: ['type', 'color', 'loading', 'disabled'],
+  setup(props, { slots }) {
+    return () => h('button', { 
+      class: 'ui-button',
+      type: props.type || 'button',
+      disabled: props.disabled || props.loading
+    }, slots.default?.());
+  }
+});
+
+// Stub for uiAlert from @hotelinking/ui
+const uiAlertStub = defineComponent({
+  name: 'uiAlert',
+  props: ['title', 'type', 'actions', 'loading'],
+  emits: ['alert-event'],
+  setup(props, { slots, emit }) {
+    return () => h('div', { class: 'ui-alert', 'data-type': props.type }, [
+      h('div', { class: 'alert-title' }, props.title),
+      slots.default?.(),
+      props.actions?.map((action: any) => 
+        h('button', { 
+          class: 'alert-action',
+          onClick: () => emit('alert-event', action.event)
+        }, action.name)
+      )
+    ]);
+  }
+});
+
+// Stub for uiModal from @hotelinking/ui
+const uiModalStub = defineComponent({
+  name: 'UiModal',
+  props: ['title', 'content', 'modalName', 'open', 'actions'],
+  emits: ['modalAction'],
+  setup(props, { slots, emit }) {
+    return () => props.open ? h('div', { class: 'ui-modal' }, [
+      h('div', { class: 'modal-title' }, props.title),
+      h('div', { class: 'modal-content' }, props.content),
+      slots.default?.(),
+      slots.header?.(),
+      slots.footer?.(),
+      props.actions?.map((action: any) => 
+        h('button', { 
+          class: 'modal-action',
+          onClick: () => emit('modalAction', { modal: props.modalName, action: action.value })
+        }, action.text)
+      )
+    ]) : null;
+  }
+});
+
+// Stub for uiTag from @hotelinking/ui
+const uiTagStub = defineComponent({
+  name: 'uiTag',
+  props: ['color', 'size'],
+  setup(props, { slots }) {
+    return () => h('span', { 
+      class: `ui-tag ui-tag-${props.color || 'gray'}` 
+    }, slots.default?.());
+  }
+});
+
+// Stub for uiAvatar from @hotelinking/ui
+const uiAvatarStub = defineComponent({
+  name: 'uiAvatar',
+  props: ['src', 'alt', 'size', 'initials'],
+  setup(props) {
+    return () => h('div', { class: 'ui-avatar' }, [
+      props.src 
+        ? h('img', { src: props.src, alt: props.alt })
+        : h('span', { class: 'initials' }, props.initials)
+    ]);
+  }
+});
+
+// Register global stubs
+config.global.stubs = {
+  uiAlert: uiAlertStub,
+  uiModal: uiModalStub,
+  UiModal: uiModalStub,
+  uiButton: uiButtonStub,
+  uiInput: uiInputStub,
+  uiToggle: uiToggleStub,
+  uiSelect: uiSelectStub,
+  uiRangeSlider: uiRangeSliderStub,
+  uiTextArea: uiTextAreaStub,
+  uiTag: uiTagStub,
+  uiAvatar: uiAvatarStub,
+};
+
+// Mock ResizeObserver
+if (typeof global.ResizeObserver === 'undefined') {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+
+// Mock IntersectionObserver
+if (typeof global.IntersectionObserver === 'undefined') {
+  global.IntersectionObserver = class IntersectionObserver {
+    constructor() {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    root = null;
+    rootMargin = '';
+    thresholds = [];
+    takeRecords() { return []; }
+  };
+}
+
+export { 
+  uiAlertStub, 
+  uiModalStub, 
+  uiButtonStub, 
+  uiInputStub, 
+  uiToggleStub, 
+  uiSelectStub,
+  uiRangeSliderStub,
+  uiTextAreaStub,
+  uiTagStub,
+  uiAvatarStub
+};