@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Atoms/Input/BaseInput.test.js

@@ -1,87 +1,85 @@
 import BaseInput from './BaseInput.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, it } from 'vitest';
 
 describe('BaseInput.vue', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
 
-    it('renders with default props', () => {
-        const wrapper = mount(BaseInput);
-        const inputElement = wrapper.find('input');
+    expect(inputElement.attributes('placeholder')).toBe('');
+    expect(wrapper.vm.internalValue).toBe('');
+  });
 
-        expect(inputElement.attributes('placeholder')).toBe('');
-        expect(wrapper.vm.internalValue).toBe('');
+  it('initializes with the correct value prop', () => {
+    const initialValue = 'Hello, World!';
+    const wrapper = mount(BaseInput, {
+      props: {
+        value: initialValue
+      }
     });
 
-    it('initializes with the correct value prop', () => {
-        const initialValue = 'Hello, World!';
-        const wrapper = mount(BaseInput, {
-            props: {
-                value: initialValue
-            }
-        });
+    expect(wrapper.vm.internalValue).toBe(initialValue);
+  });
 
-        expect(wrapper.vm.internalValue).toBe(initialValue);
-    });
+  it('updates internalValue when value prop changes', async () => {
+    const wrapper = mount(BaseInput);
+    await wrapper.setProps({ value: 'New Value' });
 
-    it('updates internalValue when value prop changes', async () => {
-        const wrapper = mount(BaseInput);
-        await wrapper.setProps({ value: 'New Value' });
+    expect(wrapper.vm.internalValue).toBe('New Value');
+  });
 
-        expect(wrapper.vm.internalValue).toBe('New Value');
-    });
+  it('emits update:value with a delay upon input', async () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
 
-    it('emits update:value with a delay upon input', async () => {
-        const wrapper = mount(BaseInput);
-        const inputElement = wrapper.find('input');
+    await inputElement.setValue('Test Input');
 
-        await inputElement.setValue('Test Input');
+    // TODO: Handle timer-related functionality with vitest
+    await new Promise(resolve => setTimeout(resolve, 350));
 
-        // TODO: Handle timer-related functionality with vitest
-        await new Promise(resolve => setTimeout(resolve, 350));
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
+  });
 
-        expect(wrapper.emitted('update:value')).toBeTruthy();
-        expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
+  it('applies formInput styles when type is formInput', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        type: 'formInput',
+        invalid: false
+      }
     });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border');
+    expect(inputElement.classes()).toContain('rounded-lg');
+    expect(inputElement.classes()).toContain('text-secondary');
+    expect(inputElement.classes()).toContain('placeholder:text-xs');
+    expect(inputElement.classes()).toContain('text-sm');
+    expect(inputElement.classes()).toContain('p-2');
+    expect(inputElement.classes()).toContain('w-full');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
 
-    it('applies formInput styles when type is formInput', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: false
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).toContain('border');
-        expect(inputElement.classes()).toContain('rounded-lg');
-        expect(inputElement.classes()).toContain('text-secondary');
-        expect(inputElement.classes()).toContain('placeholder:text-xs');
-        expect(inputElement.classes()).toContain('text-sm');
-        expect(inputElement.classes()).toContain('p-2');
-        expect(inputElement.classes()).toContain('w-full');
-        expect(inputElement.classes()).toContain('border-dropdownSelect');
+  it('applies border-alarm class when invalid is true', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        type: 'formInput',
+        invalid: true
+      }
     });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border-alarm');
+  });
 
-    it('applies border-alarm class when invalid is true', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: true
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).toContain('border-alarm');
+  it('does not apply border-alarm class when invalid is false', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        type: 'formInput',
+        invalid: false
+      }
     });
-
-    it('does not apply border-alarm class when invalid is false', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: false
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).not.toContain('border-alarm');
-        expect(inputElement.classes()).toContain('border-dropdownSelect');
-    });
-
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).not.toContain('border-alarm');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
 });

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

@@ -1,33 +1,33 @@
 <template>
   <div :class="iconName ? '' : ''">
     <input
-        ref="input"
-        v-model="internalValue"
-        :class="baseClasses"
-        :placeholder="placeholder"
-        :type="inputType"
-        :disabled="disabled"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
+      ref="input"
+      v-model="internalValue"
+      :class="baseClasses"
+      :placeholder="placeholder"
+      :type="inputType"
+      :disabled="disabled"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
     />
   </div>
 </template>
 
-<script>
-const sizeClasses = {
-  xs: ' text-xs',
-  sm: ' text-sm',
-  md: ' text-md',
-  lg: ' text-lg',
-  xl: ' text-xl',
-  '2xl': ' text-2xl',
-  '3xl': ' text-3xl',
-  '4xl': ' text-4xl',
-  '5xl': ' text-5xl'
-};
-
-export default {
+<script>
+const sizeClasses = {
+  xs: ' text-xs',
+  sm: ' text-sm',
+  md: ' text-md',
+  lg: ' text-lg',
+  xl: ' text-xl',
+  '2xl': ' text-2xl',
+  '3xl': ' text-3xl',
+  '4xl': ' text-4xl',
+  '5xl': ' text-5xl'
+};
+
+export default {
   name: 'BaseInput',
   emits: ['update:value'],
   props: {
@@ -76,7 +76,10 @@ export default {
     iconColor: {
       type: String,
       default: 'primary',
-      validator: value => ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(value)
+      validator: value =>
+        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
+          value
+        )
     },
     allowPercent: {
       type: Boolean,
@@ -97,12 +100,12 @@ export default {
         classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
       }
 
-      if (this.centerInput) classes += ' text-center';
-
-      classes += sizeClasses[this.size] || '';
-
-      return classes;
-    }
+      if (this.centerInput) classes += ' text-center';
+
+      classes += sizeClasses[this.size] || '';
+
+      return classes;
+    }
   },
   watch: {
     value(newValue) {
@@ -117,7 +120,9 @@ export default {
         sanitizedValue = sanitizedValue.replace(/\D/g, '');
       }
       if (this.inputType === 'text') {
-        this.allowPercent ? sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, '') : sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, '');
+        this.allowPercent
+          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
+          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
       }
 
       this.internalValue = sanitizedValue;

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',
-            },
-        }
-    },
+  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" />',
+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' },
-    ]
+  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

@@ -3,45 +3,45 @@ 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
+  { 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('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('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');
-
-        expect(wrapper.vm.selectedIndex).toBe(0);
-        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
+  it('updates selectedIndex and emits event on item click', async () => {
+    const wrapper = mount(BaseRadioGroup, {
+      props: { items }
     });
+    await wrapper.findAll('[role="radio"]')[0].trigger('click');
+
+    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]);
+  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,20 +1,26 @@
 <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)"
+      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>
+      <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>
+        <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>
@@ -27,15 +33,15 @@ export default {
   props: {
     invalid: {
       type: Boolean,
-      default: false,
+      default: false
     },
     items: {
       type: Array,
-      required: true,
+      required: true
     },
     value: {
       type: String,
-      required: false,
+      required: false
     }
   },
   data() {
@@ -52,8 +58,7 @@ export default {
     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'
-        }
+  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'
-    }
+  args: {
+    label: 'default tag',
+    backgroundColor: 'primary'
+  }
 };

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

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

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

@@ -3,17 +3,17 @@
 </template>
 
 <script>
-import { computed, reactive } from 'vue';
-
-const backgroundColorClasses = {
-  primary: ' bg-primary',
-  secondary: ' bg-secondary',
-  tertiary: ' bg-tertiary',
-  neutral: ' bg-neutral',
-  bright: ' bg-bright'
-};
-
-export default {
+import { computed } from 'vue';
+
+const backgroundColorClasses = {
+  primary: ' bg-primary',
+  secondary: ' bg-secondary',
+  tertiary: ' bg-tertiary',
+  neutral: ' bg-neutral',
+  bright: ' bg-bright'
+};
+
+export default {
   name: 'base-tag',
 
   props: {
@@ -30,14 +30,13 @@ export default {
   },
 
   setup(props) {
-    props = reactive(props);
-
     return {
-      classes: computed(() => {
-        const baseClasses = 'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
-        return `${baseClasses}${backgroundColorClasses[props.backgroundColor] || backgroundColorClasses.primary}`;
-      })
-    };
-  }
+      classes: computed(() => {
+        const baseClasses =
+          'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
+        return `${baseClasses}${backgroundColorClasses[props.backgroundColor] || backgroundColorClasses.primary}`;
+      })
+    };
+  }
 };
 </script>