@dcrackel/hematournamentui 1.0.22 → 1.0.23

package/src/stories/Atoms/Input/BaseInput.vue

@@ -1,73 +1,85 @@
-<template>
-  <input
-      :class="baseClasses"
-      :placeholder="placeholder"
-      v-model="internalValue"
-      @input="onInput"
-  />
-</template>
-
-<script>
-import { ref, watch, computed } from 'vue';
-
-export default {
-  name: 'BaseInput',
-  props: {
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      default: 'borderless',
-      validator: function (value) {
-        return ['formInput', 'borderless'].indexOf(value) !== -1;
-      }
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, { emit }) {
-    const internalValue = ref(props.value);
-    const timeout = ref(null);
-
-    watch(() => props.value, newValue => {
-      internalValue.value = newValue;
-    });
-
-    const baseClasses = computed(() => {
-      let baseClasses = 'appearance-none focus:outline-none';
-
-      switch (props.type) {
-        case 'borderless':
-          baseClasses += ' w-full text-sm';
-          break;
-        case 'formInput':
-          baseClasses += ' border rounded-lg text-secondary placeholder:text-xs text-sm p-2 w-full';
-          props.invalid ? baseClasses += ' border-alarm' : baseClasses += ' border border-dropdownSelect';
-          break;
-      }
-      return baseClasses;
-    });
-
-    const onInput = () => {
-      clearTimeout(timeout.value);
-      timeout.value = setTimeout(() => {
-        emit('update:value', internalValue.value);
-      }, 300);
-    }
-
-    return {
-      internalValue,
-      baseClasses,
-      onInput
-    };
-  }
-};
-</script>
+<template>
+  <div :class="iconName ? '' : ''">
+    <input
+        v-model="internalValue"
+        :class="baseClasses"
+        :placeholder="placeholder"
+        @input="onInput"
+    />
+  </div>
+
+</template>
+
+<script>
+import {computed, ref, watch} from 'vue';
+import BaseIcon from "../Icon/BaseIcon.vue";
+import BaseButton from "../../Molecules/Button/BaseButton.vue";
+
+export default {
+  name: 'BaseInput',
+  components: {BaseButton, BaseIcon},
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    iconStyle: {
+      type: String,
+      default: 'fa-solid',
+      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: value => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    iconColor: {
+      type: String,
+      default: 'primary',
+      validator: value => ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'bright', 'white', 'alarm'].includes(value)
+    },
+    emits: ['click'],
+  },
+  setup(props, {emit}) {
+    const internalValue = ref(props.value);
+    const timeout = ref(null);
+
+    watch(() => props.value, newValue => {
+      internalValue.value = newValue;
+    });
+
+    const baseClasses = computed(() => {
+      let baseClasses = 'appearance-none focus:outline-none w-full text-sm border rounded-lg p-2';
+
+      props.invalid ? baseClasses += ' border border-alarm rounded-lg p-2' : baseClasses += ' border-dropdownSelect';
+      return baseClasses;
+    });
+
+    const onInput = () => {
+      clearTimeout(timeout.value);
+      timeout.value = setTimeout(() => {
+        emit('update:value', internalValue.value);
+      }, 300);
+    }
+
+    return {
+      internalValue,
+      baseClasses,
+      onInput
+    };
+  }
+
+};
+</script>

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.stories.js

@@ -1,31 +1,31 @@
-import BaseRadioGroup from './BaseRadioGroup.vue';
-
-export default {
-    title: 'Atoms/BaseRadioGroup',
-    component: BaseRadioGroup,
-    tags: ['autodocs'],
-    argTypes: {
-        items: {
-            control: {
-                type: 'object',
-            },
-        }
-    },
-};
-
-const Template = (args) => ({
-    components: { BaseRadioGroup },
-    setup() {
-        return { args };
-    },
-    template: '<BaseRadioGroup v-bind="args" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    items: [
-        { label: 'Option 1', value: 'opt1', description: 'Description for Item1' },
-        { label: 'Option 2', value: 'opt2', description: 'Description for Item2' },
-        { label: 'Option 2', value: 'opt2', description: 'Description for Item3' },
-    ]
-};
+import BaseRadioGroup from './BaseRadioGroup.vue';
+
+export default {
+    title: 'Atoms/BaseRadioGroup',
+    component: BaseRadioGroup,
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            control: {
+                type: 'object',
+            },
+        }
+    },
+};
+
+const Template = (args) => ({
+    components: { BaseRadioGroup },
+    setup() {
+        return { args };
+    },
+    template: '<BaseRadioGroup v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    items: [
+        { label: 'Option 1', value: 'opt1', description: 'Description for Item1' },
+        { label: 'Option 2', value: 'opt2', description: 'Description for Item2' },
+        { label: 'Option 2', value: 'opt2', description: 'Description for Item3' },
+    ]
+};

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.test.js

@@ -1,49 +1,49 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import BaseRadioGroup from './BaseRadioGroup.vue';
-
-const items = [
-    { label: 'Option 1', description: 'Description 1', value: '1' },
-    { label: 'Option 2', description: 'Description 2', value: '2' },
-    { label: 'Option 3', description: 'Description 3', value: '3' },
-    // Add more items as needed
-];
-
-describe('BaseRadioGroup', () => {
-    it('renders correct number of items', () => {
-        const wrapper = mount(BaseRadioGroup, {
-            props: { items }
-        });
-        expect(wrapper.findAll('[role="radio"]').length).toBe(items.length);
-    });
-
-    it('applies correct classes based on selectedIndex and invalid prop', async () => {
-        const wrapper = mount(BaseRadioGroup, {
-            props: { items, invalid: true }
-        });
-        await wrapper.vm.selectItem(0);
-        expect(wrapper.findAll('.bg-tertiary').length).toBe(1);
-        expect(wrapper.find('.border-alarm').exists()).toBeTruthy();
-    });
-
-    it('updates selectedIndex and emits event on item click', async () => {
-        const wrapper = mount(BaseRadioGroup, {
-            props: { items }
-        });
-        await wrapper.findAll('[role="radio"]')[0].trigger('click');
-
-        // console.log(wrapper.emitted())
-
-        expect(wrapper.vm.selectedIndex).toBe(0);
-        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
-    });
-
-    it('handles keyboard interaction correctly', async () => {
-        const wrapper = mount(BaseRadioGroup, {
-            props: { items }
-        });
-        await wrapper.findAll('[role="radio"]')[0].trigger('keydown.enter');
-        expect(wrapper.vm.selectedIndex).toBe(0);
-        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
-    });
-});
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BaseRadioGroup from './BaseRadioGroup.vue';
+
+const items = [
+    { label: 'Option 1', description: 'Description 1', value: '1' },
+    { label: 'Option 2', description: 'Description 2', value: '2' },
+    { label: 'Option 3', description: 'Description 3', value: '3' },
+    // Add more items as needed
+];
+
+describe('BaseRadioGroup', () => {
+    it('renders correct number of items', () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        expect(wrapper.findAll('[role="radio"]').length).toBe(items.length);
+    });
+
+    it('applies correct classes based on selectedIndex and invalid prop', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items, invalid: true }
+        });
+        await wrapper.vm.selectItem(0);
+        expect(wrapper.findAll('.bg-tertiary').length).toBe(1);
+        expect(wrapper.find('.border-alarm').exists()).toBeTruthy();
+    });
+
+    it('updates selectedIndex and emits event on item click', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        await wrapper.findAll('[role="radio"]')[0].trigger('click');
+
+        // console.log(wrapper.emitted())
+
+        expect(wrapper.vm.selectedIndex).toBe(0);
+        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
+    });
+
+    it('handles keyboard interaction correctly', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        await wrapper.findAll('[role="radio"]')[0].trigger('keydown.enter');
+        expect(wrapper.vm.selectedIndex).toBe(0);
+        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
+    });
+});

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.vue

@@ -1,49 +1,49 @@
-<template>
-  <div class="text-xl" role="radiogroup">
-    <div
-        class="flex flex-row p-4 text-quaternary rounded-lg mb-2 shadow border hover:bg-tertiary"
-        v-for="(item, index) in items"
-        :key="index"
-        :class="[selectedIndex === index ? ' bg-tertiary' : ' bg-white', invalid ? ' border-alarm' : ' border-dropdownSelect']"
-        @click="selectItem(index)"
-        role="radio"
-        :aria-checked="selectedIndex === index ? 'true' : 'false'"
-        tabindex="0"
-        @keydown.enter.prevent="selectItem(index)"
-    >
-      <i :class="[selectedIndex === index ? 'fa-circle-dot text-quaternary ' : 'fa-circle ' ]" class="fa-regular pr-4 pt-2" ></i>
-      <div class="flex flex-col">
-        <p :class="[selectedIndex === index ? 'text-quaternary ' : '' ]" class="font-bold text-sm">{{ item.label }}</p>
-        <p :class="[selectedIndex === index ? 'text-quaternary ' : '' ]" class="text-sm">{{ item.description }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BaseRadioGroup',
-  props: {
-    invalid: {
-      type: Boolean,
-      default: false,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedIndex: null,
-    };
-  },
-  methods: {
-    selectItem(index) {
-      this.selectedIndex = index;
-      this.$emit('update:value', this.items[index].value);
-    },
-  },
-};
-</script>
-
+<template>
+  <div class="text-xl" role="radiogroup">
+    <div
+        class="flex flex-row p-4 text-quaternary rounded-lg mb-2 shadow border hover:bg-tertiary"
+        v-for="(item, index) in items"
+        :key="index"
+        :class="[selectedIndex === index ? ' bg-tertiary' : ' bg-white', invalid ? ' border-alarm' : ' border-dropdownSelect']"
+        @click="selectItem(index)"
+        role="radio"
+        :aria-checked="selectedIndex === index ? 'true' : 'false'"
+        tabindex="0"
+        @keydown.enter.prevent="selectItem(index)"
+    >
+      <i :class="[selectedIndex === index ? 'fa-circle-dot text-quaternary ' : 'fa-circle ' ]" class="fa-regular pr-4 pt-2" ></i>
+      <div class="flex flex-col">
+        <p :class="[selectedIndex === index ? 'text-quaternary ' : '' ]" class="font-bold text-sm">{{ item.label }}</p>
+        <p :class="[selectedIndex === index ? 'text-quaternary ' : '' ]" class="text-sm">{{ item.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseRadioGroup',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: null,
+    };
+  },
+  methods: {
+    selectItem(index) {
+      this.selectedIndex = index;
+      this.$emit('update:value', this.items[index].value);
+    },
+  },
+};
+</script>
+

package/src/stories/Atoms/Tag/BaseTag.stories.js

@@ -1,29 +1,29 @@
-import BaseTag from './BaseTag.vue';
-
-export default {
-    title: 'Atoms/BaseTag',
-    component: BaseTag,
-    tags: ['autodocs'],
-    argTypes: {
-        label: {
-            control: {
-                type: 'text',
-                defaultValue: 'Default Label'
-            }
-        },
-        backgroundColor: {
-            control: {
-                type: 'select'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright'],
-            defaultValue: 'primary'
-        }
-    }
-};
-
-export const Basic = {
-    args: {
-        label: 'default tag',
-        backgroundColor: 'primary'
-    }
-};
+import BaseTag from './BaseTag.vue';
+
+export default {
+    title: 'Atoms/BaseTag',
+    component: BaseTag,
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: {
+                type: 'text',
+                defaultValue: 'Default Label'
+            }
+        },
+        backgroundColor: {
+            control: {
+                type: 'select'
+            },
+            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright'],
+            defaultValue: 'primary'
+        }
+    }
+};
+
+export const Basic = {
+    args: {
+        label: 'default tag',
+        backgroundColor: 'primary'
+    }
+};

package/src/stories/Atoms/Tag/BaseTag.test.js

@@ -1,42 +1,42 @@
-import BaseTag from './BaseTag.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
-
-describe('base-tag.vue', () => {
-
-    it('renders with default classes and primary background color', () => {
-        const wrapper = mount(BaseTag, {
-            props: { label: 'Test Tag' }
-        });
-        const tagElement = wrapper.find('div');
-
-        expect(tagElement.classes()).toContain('cursor-pointer');
-        expect(tagElement.classes()).toContain('bg-primary');
-        expect(tagElement.text()).toBe('Test Tag');
-    });
-
-    it('renders with specified background color classes', () => {
-        const backgrounds = ['primary', 'secondary', 'tertiary', 'neutral', 'bright'];
-
-        backgrounds.forEach(async (bg) => {
-            const wrapper = mount(BaseTag, {
-                props: { label: 'Test Tag', backgroundColor: bg }
-            });
-            const tagElement = wrapper.find('div');
-
-            expect(tagElement.classes()).toContain(`bg-${bg}`);
-        });
-    });
-
-    it('renders with primary background color for unknown values', () => {
-        const wrapper = mount(BaseTag, {
-            props: { label: 'Test Tag', backgroundColor: 'unknown' }
-        });
-        const tagElement = wrapper.find('div');
-
-        expect(tagElement.classes()).toContain('bg-primary');
-    });
-
-
-
-});
+import BaseTag from './BaseTag.vue';
+import { mount } from "@vue/test-utils";
+import { describe, expect, test, it } from "vitest";
+
+describe('base-tag.vue', () => {
+
+    it('renders with default classes and primary background color', () => {
+        const wrapper = mount(BaseTag, {
+            props: { label: 'Test Tag' }
+        });
+        const tagElement = wrapper.find('div');
+
+        expect(tagElement.classes()).toContain('cursor-pointer');
+        expect(tagElement.classes()).toContain('bg-primary');
+        expect(tagElement.text()).toBe('Test Tag');
+    });
+
+    it('renders with specified background color classes', () => {
+        const backgrounds = ['primary', 'secondary', 'tertiary', 'neutral', 'bright'];
+
+        backgrounds.forEach(async (bg) => {
+            const wrapper = mount(BaseTag, {
+                props: { label: 'Test Tag', backgroundColor: bg }
+            });
+            const tagElement = wrapper.find('div');
+
+            expect(tagElement.classes()).toContain(`bg-${bg}`);
+        });
+    });
+
+    it('renders with primary background color for unknown values', () => {
+        const wrapper = mount(BaseTag, {
+            props: { label: 'Test Tag', backgroundColor: 'unknown' }
+        });
+        const tagElement = wrapper.find('div');
+
+        expect(tagElement.classes()).toContain('bg-primary');
+    });
+
+
+
+});