@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.stories.js

@@ -1,42 +1,42 @@
 import ButtonBar from './ButtonBar.vue';
 
 export default {
-    title: 'Molecules/Buttons/ButtonBar',
-    component: ButtonBar,
-    tags: ['autodocs'],
-    args: {
-        buttons: [
-            { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
-            { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
-        ]
+  title: 'Molecules/Buttons/ButtonBar',
+  component: ButtonBar,
+  tags: ['autodocs'],
+  args: {
+    buttons: [
+      { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+      { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
+    ]
+  },
+  argTypes: {
+    buttons: {
+      control: 'object'
     },
-    argTypes: {
-        buttons: {
-            control: 'object'
-        },
-        selected: {
-            control: 'text'
-        },
-        onSelected: {},
-    }
+    selected: {
+      control: 'text'
+    },
+    onSelected: {}
+  }
 };
 
 export const Primary = {
-    args: {
-        buttons: [
-            { id: 'btn1', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
-            { id: 'btn2', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreen' }
-        ],
-        selected: 'btn1'  // Set default selected button
-    }
+  args: {
+    buttons: [
+      { id: 'btn1', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+      { id: 'btn2', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreen' }
+    ],
+    selected: 'btn1' // Set default selected button
+  }
 };
 
 export const ThreeButtons = {
-    args: {
-        buttons: [
-            { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
-            { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
-            { id: 'btn3', label: 'Option 3', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
-        ]
-    }
+  args: {
+    buttons: [
+      { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+      { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+      { id: 'btn3', label: 'Option 3', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
+    ]
+  }
 };

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="flex">
     <section
-        v-for="(button, index) in buttons"
-        :key="button.id"
-        class="flex flex-row text-nowrap"
-        @click="selectButton(button.id)"
+      v-for="(button, index) in buttons"
+      :key="button.id"
+      class="flex flex-row text-nowrap"
+      @click="selectButton(button.id)"
     >
       <div
-          class="min-w-20 px-4 py-2 transition-all duration-400 ease-in-out border border-dropdownSelect shadow-md"
-          :class="{
+        class="min-w-20 px-4 py-2 transition-all duration-400 ease-in-out border border-dropdownSelect shadow-md"
+        :class="{
           'rounded-l-lg': index === 0,
           'rounded-r-lg': index === buttons.length - 1,
           [button.selectedBgColor]: selected === button.id,
           [button.defaultBgColor]: selected !== button.id
         }"
       >
-        <BaseText
-            :text="button.label"
-            size="md"
-            :color="getButtonColor(button.id)"
-            class="text-xs md:text-sm"
-        />
+        <BaseText :text="button.label" size="md" :color="getButtonColor(button.id)" class="text-xs md:text-sm" />
       </div>
     </section>
   </div>
@@ -28,7 +23,7 @@
 
 <script>
 import { watch, ref } from 'vue';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'ButtonBar',
@@ -36,11 +31,11 @@ export default {
   props: {
     buttons: {
       type: Array,
-      required: true,
+      required: true
     },
     selected: {
       type: String,
-      default: null,
+      default: null
     },
     textColor: {
       type: String,
@@ -55,21 +50,24 @@ export default {
   setup(props, { emit }) {
     const selected = ref(props.selected);
 
-    watch(() => props.selected, (newValue) => {
-      selected.value = newValue;
-    });
+    watch(
+      () => props.selected,
+      newValue => {
+        selected.value = newValue;
+      }
+    );
 
-    const selectButton = (id) => {
+    const selectButton = id => {
       selected.value = id;
       emit('update:selected', id);
     };
 
     // Determine the text color based on whether the button is selected
-    const getButtonColor = (buttonId) => {
+    const getButtonColor = buttonId => {
       return selected.value === buttonId ? props.selectedTextColor : props.textColor;
     };
 
     return { selected, selectButton, getButtonColor };
-  },
+  }
 };
 </script>

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.stories.js

@@ -1,75 +1,75 @@
 import TitledInput from './TitledInput.vue';
 
 export default {
-    title: 'Molecules/CombinationInputs/TitledInput',
-    component: TitledInput,
-    tags: ['autodocs'],
-    args: {
-        title: 'Your Title',
-        invalid: false,
-        inputValue: '',
-        placeholder: 'Enter text'
+  title: 'Molecules/CombinationInputs/TitledInput',
+  component: TitledInput,
+  tags: ['autodocs'],
+  args: {
+    title: 'Your Title',
+    invalid: false,
+    inputValue: '',
+    placeholder: 'Enter text'
+  },
+  argTypes: {
+    title: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Your Title'
     },
-    argTypes: {
-        title: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: 'Your Title'
-        },
-        invalid: {
-            control: {
-                type: 'boolean'
-            },
-            defaultValue: false
-        },
-        inputValue: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: ''
-        },
-        placeholder: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: 'Enter text'
-        }
+    invalid: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    inputValue: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    placeholder: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Enter text'
     }
+  }
 };
 
 export const DefaultTitledInput = {
-    args: {
-        title: 'Default Title',
-        invalid: false,
-        inputValue: '',
-        placeholder: 'Enter text'
-    }
+  args: {
+    title: 'Default Title',
+    invalid: false,
+    inputValue: '',
+    placeholder: 'Enter text'
+  }
 };
 
 export const TitledInputWithError = {
-    args: {
-        title: 'Error Title',
-        invalid: true,
-        inputValue: '',
-        placeholder: 'Enter text'
-    }
+  args: {
+    title: 'Error Title',
+    invalid: true,
+    inputValue: '',
+    placeholder: 'Enter text'
+  }
 };
 
 export const TitledInputWithInitialValue = {
-    args: {
-        title: 'Initial Value Title',
-        invalid: false,
-        inputValue: 'Initial Value',
-        placeholder: 'Enter text'
-    }
+  args: {
+    title: 'Initial Value Title',
+    invalid: false,
+    inputValue: 'Initial Value',
+    placeholder: 'Enter text'
+  }
 };
 
 export const TitledInputCustomPlaceholder = {
-    args: {
-        title: 'Custom Placeholder Title',
-        invalid: false,
-        inputValue: '',
-        placeholder: 'Custom Placeholder'
-    }
+  args: {
+    title: 'Custom Placeholder Title',
+    invalid: false,
+    inputValue: '',
+    placeholder: 'Custom Placeholder'
+  }
 };

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.test.js

@@ -1,81 +1,81 @@
-import {mount} from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import TitledInput from './TitledInput.vue';
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import {describe, expect, it} from "vitest";
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import { describe, expect, it } from 'vitest';
 
 describe('TitledInput', () => {
-    it('renders correctly with all props', () => {
-        const wrapper = mount(TitledInput, {
-            props: {
-                title: 'Test Title',
-                invalid: false,
-                inputValue: 'Test Input',
-                placeholder: 'Enter something'
-            }
-        });
-
-        expect(wrapper.text()).toContain('Test Title');
-        const input = wrapper.find('input');
-        expect(input.element.placeholder).toBe('Enter something');
-        expect(input.element.value).toBe('Test Input');
+  it('renders correctly with all props', () => {
+    const wrapper = mount(TitledInput, {
+      props: {
+        title: 'Test Title',
+        invalid: false,
+        inputValue: 'Test Input',
+        placeholder: 'Enter something'
+      }
     });
 
-    it('shows invalid state', async () => {
-        const wrapper = mount(TitledInput, {
-            props: {
-                title: 'Test Title',
-                invalid: true,
-                inputValue: 'Test Input',
-                placeholder: 'Enter something'
-            }
-        });
-
-        // Wait for the next DOM update cycle
-        await wrapper.vm.$nextTick();
+    expect(wrapper.text()).toContain('Test Title');
+    const input = wrapper.find('input');
+    expect(input.element.placeholder).toBe('Enter something');
+    expect(input.element.value).toBe('Test Input');
+  });
 
-        // Find the BaseText component and check if it has the 'text-alarm' class
-        const baseTextComponent = wrapper.findComponent({name: 'BaseText'});
-        expect(baseTextComponent.classes()).toContain('text-alarm');
+  it('shows invalid state', async () => {
+    const wrapper = mount(TitledInput, {
+      props: {
+        title: 'Test Title',
+        invalid: true,
+        inputValue: 'Test Input',
+        placeholder: 'Enter something'
+      }
     });
 
-    it('BaseInput emits update:value correctly', async () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                value: 'Initial Value'
-            }
-        });
+    // Wait for the next DOM update cycle
+    await wrapper.vm.$nextTick();
 
-        // Simulate input
-        const inputElement = wrapper.find('input');
-        await inputElement.setValue('New Value');
+    // Find the BaseText component and check if it has the 'text-alarm' class
+    const baseTextComponent = wrapper.findComponent({ name: 'BaseText' });
+    expect(baseTextComponent.classes()).toContain('text-alarm');
+  });
 
-        // Wait for debounce timeout
-        await new Promise(resolve => setTimeout(resolve, 350)); // Slightly more than 300ms for safety
-        
-        // Assertions
-        expect(wrapper.emitted()).toHaveProperty('update:value');
-        expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+  it('BaseInput emits update:value correctly', async () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        value: 'Initial Value'
+      }
     });
 
-    it('emits update event when input value changes', async () => {
-        const wrapper = mount(TitledInput, {
-            props: {
-                title: 'Test Title',
-                invalid: false,
-                inputValue: 'Test Input',
-                placeholder: 'Enter something'
-            }
-        });
+    // Simulate input
+    const inputElement = wrapper.find('input');
+    await inputElement.setValue('New Value');
 
-        // Find the input element within BaseInput
-        const inputElement = wrapper.find('input');
-        await inputElement.setValue('New Value');
+    // Wait for debounce timeout
+    await new Promise(resolve => setTimeout(resolve, 350)); // Slightly more than 300ms for safety
 
-        // Wait for the debounce timeout (300 ms) in BaseInput
-        await new Promise(resolve => setTimeout(resolve, 300));
+    // Assertions
+    expect(wrapper.emitted()).toHaveProperty('update:value');
+    expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+  });
 
-        // Check if the update:value event was emitted
-        expect(wrapper.emitted()).toHaveProperty('update:value');
-        expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+  it('emits update event when input value changes', async () => {
+    const wrapper = mount(TitledInput, {
+      props: {
+        title: 'Test Title',
+        invalid: false,
+        inputValue: 'Test Input',
+        placeholder: 'Enter something'
+      }
     });
+
+    // Find the input element within BaseInput
+    const inputElement = wrapper.find('input');
+    await inputElement.setValue('New Value');
+
+    // Wait for the debounce timeout (300 ms) in BaseInput
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    // Check if the update:value event was emitted
+    expect(wrapper.emitted()).toHaveProperty('update:value');
+    expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+  });
 });

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.vue

@@ -1,27 +1,28 @@
 <template>
   <div class="flex flex-col">
-    <BaseText :invalid=invalid :text=title class="mb-1 ml-1" color="quaternary"
-              size="sm" weight="normal"/>
-    <BaseInput :addBorder="true"
-               :invalid=invalid
-               :inputType="inputType"
-               :disabled="disabled"
-               :placeholder=placeholder
-               :value=inputValue
-               :allowPercent="allowPercent"
-               @update:value="handleUpdateValue"/>
+    <BaseText :invalid="invalid" :text="title" class="mb-1 ml-1" color="quaternary" size="sm" weight="normal" />
+    <BaseInput
+      :addBorder="true"
+      :invalid="invalid"
+      :inputType="inputType"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :value="inputValue"
+      :allowPercent="allowPercent"
+      @update:value="handleUpdateValue"
+    />
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'TitledInput',
   emits: ['update:value'],
-  components: {BaseIcon, BaseInput, BaseText},
+  components: { BaseIcon, BaseInput, BaseText },
   props: {
     title: {
       type: String,
@@ -57,5 +58,5 @@ export default {
       this.$emit('update:value', value);
     }
   }
-}
-</script>
+};
+</script>

package/src/stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.stories.js

@@ -1,26 +1,26 @@
 import FilterAndSortBar from './FilterAndSortBar.vue';
 
 export default {
-    title: 'Molecules/Filter/FilterAndSortBar',
-    component: FilterAndSortBar,
-    tags: ['autodocs'],
-    argTypes: {
-        label: {
-            type: 'text',
-            defaultValue: 'Default Text'
-        },
-        items: { control: 'object' }
-    }
+  title: 'Molecules/Filter/FilterAndSortBar',
+  component: FilterAndSortBar,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      type: 'text',
+      defaultValue: 'Default Text'
+    },
+    items: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        label: 'Sort by',
-        items: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'}
-    }
+  args: {
+    label: 'Sort by',
+    items: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' }
+  }
 };

package/src/stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue

@@ -2,17 +2,28 @@
   <section class="flex flex-row w-full justify-between">
     <div class="rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4 border bg-neutral border-dropdownSelect">
       <i class="fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" />
-      <BaseInput :placeholder="placeholder" class="text-quaternary w-full" :addBorder=false :value="filterText" @update:value="handleFilter" />
+      <BaseInput
+        :placeholder="placeholder"
+        class="text-quaternary w-full"
+        :addBorder="false"
+        :value="filterText"
+        @update:value="handleFilter"
+      />
     </div>
     <div>
-      <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem" @update:selectedItem="handleSelectedItem" />
+      <DropDownMenu
+        :label="label"
+        :items="items"
+        :selectedItem="localSelectedItem"
+        @update:selectedItem="handleSelectedItem"
+      />
     </div>
   </section>
 </template>
 
 <script>
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
 
 export default {
   name: 'FilterAndSortBar',
@@ -23,7 +34,7 @@ export default {
   },
   props: {
     label: {
-      type: String,
+      type: String
     },
     items: {
       type: Array,
@@ -46,9 +57,9 @@ export default {
       this.$emit('filterbar', filterText);
     },
     handleSelectedItem(item) {
-      this.$emit('sort', item)
+      this.$emit('sort', item);
       this.localSelectedItem = item;
-    },
+    }
   }
 };
 </script>

package/src/stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.stories.js

@@ -1,32 +1,30 @@
 import FilterUpcomingPast from './FilterUpcomingPast.vue';
 
 export default {
-    title: 'Molecules/Filter/FilterUpcomingPast',
-    component: FilterUpcomingPast,
-    tags: ['autodocs'],
-    argTypes: {
-    },
-    methods: {
-        handleTimeFrame: {
-            action: 'handleTimeFrame',
-            description: 'Emitted when a time frame is selected'
-        }
+  title: 'Molecules/Filter/FilterUpcomingPast',
+  component: FilterUpcomingPast,
+  tags: ['autodocs'],
+  argTypes: {},
+  methods: {
+    handleTimeFrame: {
+      action: 'handleTimeFrame',
+      description: 'Emitted when a time frame is selected'
     }
+  }
 };
 
 export const Default = {
-    args: {
-    }
+  args: {}
 };
 
 export const UpcomingSelected = {
-    args: {
-        selected: 'Upcoming'
-    }
+  args: {
+    selected: 'Upcoming'
+  }
 };
 
 export const PastSelected = {
-    args: {
-        selected: 'Past'
-    }
+  args: {
+    selected: 'Past'
+  }
 };