@dcrackel/hematournamentui 1.0.21 → 1.0.22

package/package/src/stories/Base/Button/BaseButton.stories.js

@@ -1,69 +0,0 @@
-import BaseButton from './BaseButton.vue';
-
-export default {
-    title: 'Base/BaseButton',
-    component: BaseButton,
-    tags: ['autodocs'],
-    argTypes: {
-        onClick: {},
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['small', 'medium', 'large']
-        },
-        iconClass: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: ''
-        },
-        type: {
-            control: {
-                type: 'select'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin']
-        }
-    }
-};
-export const Primary = {
-    args: {
-        type: 'primary',
-        label: 'Button'
-    }
-};
-export const PrimaryButtonWithIcon = {
-    args: {
-        type: 'primary',
-        label: 'Button',
-        iconClass: 'fas fa-check'
-    }
-};
-export const Secondary = {
-    args: {
-        label: 'Button'
-    }
-};
-export const HighlightedButton = {
-    args: {
-        type: 'bright',
-        size: 'large',
-        label: 'Button'
-    }
-};
-export const SmallTertiary = {
-    args: {
-        type: 'tertiary',
-        size: 'small',
-        label: 'Button'
-    }
-};
-
-export const AdminMunuButton = {
-    args: {
-        type: 'admin',
-        size: 'small',
-        label: 'Admin Button',
-        hoverColor: 'highlightPrimary'
-    }
-};

package/package/src/stories/Base/Button/BaseButton.test.js

@@ -1,146 +0,0 @@
-import BaseButton from './BaseButton.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
-
-describe('BaseButton.vue', () => {
-
-    it('renders the correct label', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', size: 'lg' }
-        });
-        expect(wrapper.text()).toContain('Test Button');
-    });
-
-    it('renders icon when iconClass is provided', () => {
-        const iconClass = 'some-icon-class'
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', iconClass: iconClass }
-        })
-        const iconElement = wrapper.find('i')
-        expect(iconElement.classes()).toContain(iconClass)
-    })
-
-    it('emits click event when clicked', async () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', size: 'sm' }
-        })
-        await wrapper.trigger('click')
-        expect(wrapper.emitted().click).toHaveLength(1)
-    })
-
-    it('computes correct classes based on type and size', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'primary', size: 'md' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-text"]');
-        expect(baseTextElement.classes()).toContain('text-md');
-        expect(baseTextElement.classes()).toContain('text-primary');
-    });
-
-    it('computes correct classes based on primary and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'primary', size: 'md', selected: 'true' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
-    });
-
-    it('computes correct classes based secondary type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'secondary', size: 'xl' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xl');
-        expect(baseTextElement.classes()).toContain('bg-secondary');
-    });
-
-    it('computes correct classes based secondary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'secondary', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
-    });
-
-    it('computes correct classes based tertiary type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'tertiary', size: 'lg' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-lg');
-        expect(baseTextElement.classes()).toContain('bg-tertiary');
-    });
-
-    it('computes correct classes based tertiary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'tertiary', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based bright type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'bright', size: 'xs' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-bright');
-    });
-
-    it('computes correct classes based bright type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'bright', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'admin', size: 'xs', hoverColor: 'admin'}
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'admin', size: 'xl', selected:true  }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin secondary', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'adminSecondary', size: 'xs', hoverColor: 'adminSecondary'  }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-tertiary');
-    });
-
-    it('computes correct classes based admin secondary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: {label: 'Test Button', type: 'adminSecondary', size: 'xl', selected:true}
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xl');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-})

package/package/src/stories/Base/Button/BaseButton.vue

@@ -1,126 +0,0 @@
-<template>
-  <button data-testid="base-button" :class="classes" type="button" @click="onClick">
-    <i v-if="iconClass" :class="iconClass" class="mr-2 hover:text-highlightedClass"></i>
-    <BaseText data-testid="base-text" :color="textColor" :size="size" :text="label" weight="normal" />
-  </button>
-</template>
-
-<script>
-import { computed, reactive } from 'vue';
-import BaseText from '../Text/BaseText.vue';
-
-export default {
-  name: 'base-button',
-  components: { BaseText },
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    iconClass: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl'].indexOf(value) !== -1;
-      },
-      default: 'sm'
-    },
-    type: {
-      type: String,
-      default: 'primary',
-      validator: function (value) {
-        return ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary'].indexOf(value) !== -1;
-      }
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props);
-    return {
-      textColor: computed(() => {
-        switch (props.type) {
-          case 'primary':
-            return 'primary';
-          case 'secondary':
-            return 'secondary';
-          case 'tertiary':
-            return 'tertiary';
-          case 'bright':
-            return 'bright';
-          case 'admin':
-            return 'neutral';
-          case 'adminSecondary':
-            return 'neutral';
-        }
-      }),
-      classes: computed(() => {
-        let baseClasses = 'px-2.5 mx-1 inline-flex ';
-
-        switch (props.type) {
-          case 'primary':
-            baseClasses +=
-                ' py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary';
-            props.selected ? baseClasses += ' bg-dropdownSelect' : baseClasses += ' bg-neutral';
-            break;
-          case 'secondary':
-            baseClasses +=
-                ' py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral';
-            props.selected ? baseClasses += ' bg-dropdownSelect' : baseClasses += ' bg-secondary';
-            break;
-          case 'tertiary':
-            baseClasses +=
-                ' py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary';
-            props.selected ? baseClasses += ' bg-primary' : baseClasses += ' bg-tertiary';
-            break;
-          case 'bright':
-            baseClasses +=
-                ' py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral';
-            props.selected ? baseClasses += ' bg-primary' : baseClasses += ' bg-bright';
-            break;
-          case 'admin':
-            baseClasses +=
-                ' py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight';
-            props.selected ? baseClasses += ' bg-primary' : baseClasses += ' bg-primary';
-            break;
-          case 'adminSecondary':
-            baseClasses +=
-                ' py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral';
-            props.selected ? baseClasses += ' bg-primary' : baseClasses += ' bg-tertiary';
-            break;
-        }
-
-        switch (props.size) {
-          case 'xs':
-            baseClasses += ' text-xs';
-            break;
-          case 'sm':
-            baseClasses += ' text-sm';
-            break;
-          case 'md':
-            baseClasses += ' text-md';
-            break;
-          case 'lg':
-            baseClasses += ' text-lg';
-            break;
-          case 'xl':
-            baseClasses += ' text-xl';
-            break;
-        }
-
-        return baseClasses;
-      }),
-      onClick() {
-        emit('click');
-      }
-    };
-  }
-};
-</script>

package/package/src/stories/Base/Input/BaseInput.stories.js

@@ -1,28 +0,0 @@
-import BaseInput from './BaseInput.vue';
-
-export default {
-    title: 'Base/Input',
-    component: BaseInput,
-    tags: ['autodocs'],
-    argTypes: {
-        placeholder: { control: 'text' },
-        value: { control: 'text' }
-    }
-};
-
-const Template = args => ({
-    components: { BaseInput },
-    props: Object.keys(args),
-    methods: {
-        onValueUpdate(newValue) {
-            console.log('Value updated:', newValue);
-        }
-    }
-});
-
-export const Default = {
-    args: {
-        placeholder: 'Enter text...',
-        value: ''
-    }
-};

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

@@ -1,46 +0,0 @@
-import BaseInput from './BaseInput.vue';
-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');
-
-        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
-            }
-        });
-
-        expect(wrapper.vm.internalValue).toBe(initialValue);
-    });
-
-    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');
-    });
-
-    it('emits update:value with a delay upon input', async () => {
-        const wrapper = mount(BaseInput);
-        const inputElement = wrapper.find('input');
-
-        await inputElement.setValue('Test Input');
-
-        // 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']);
-    });
-
-});

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

@@ -1,45 +0,0 @@
-<template>
-  <input
-      class="appearance-none focus:outline-none w-full text-sm"
-      :placeholder="placeholder"
-      v-model="internalValue"
-      @input="onInput"
-  />
-</template>
-
-<script>
-export default {
-  name: 'BaseInput',
-  props: {
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      internalValue: this.value,
-      timeout: null
-    };
-  },
-
-  watch: {
-    value(newValue) {
-      this.internalValue = newValue;
-    }
-  },
-  methods: {
-    onInput() {
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        console.log('this.internalValue', this.internalValue)
-        this.$emit('update:value', this.internalValue);
-      }, 300);
-    }
-  }
-};
-</script>

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

@@ -1,29 +0,0 @@
-import BaseTag from './BaseTag.vue';
-
-export default {
-    title: 'Base/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/package/src/stories/Base/Tag/BaseTag.test.js

@@ -1,42 +0,0 @@
-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');
-    });
-
-
-
-});

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

@@ -1,57 +0,0 @@
-<template>
-  <div :class="classes">{{ label }}</div>
-</template>
-
-<script>
-import { computed, reactive } from 'vue';
-
-export default {
-  name: 'base-tag',
-
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    backgroundColor: {
-      type: String,
-      validator: function (value) {
-        return ['primary', 'secondary', 'tertiary', 'neutral', 'bright'].indexOf(value) !== -1;
-      }
-    }
-  },
-
-  setup(props) {
-    props = reactive(props);
-
-    return {
-      classes: computed(() => {
-        let baseClasses = 'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
-
-        switch (props.backgroundColor) {
-          case 'primary':
-            baseClasses += ' bg-primary';
-            break;
-          case 'secondary':
-            baseClasses += ' bg-secondary';
-            break;
-          case 'tertiary':
-            baseClasses += ' bg-tertiary';
-            break;
-          case 'neutral':
-            baseClasses += ' bg-neutral';
-            break;
-          case 'bright':
-            baseClasses += ' bg-bright';
-            break;
-          default:
-            baseClasses += ' bg-primary';
-            break;
-        }
-
-        return baseClasses;
-      })
-    };
-  }
-};
-</script>

package/package/src/stories/Base/Text/BaseText.stories.js

@@ -1,77 +0,0 @@
-import BaseText from './BaseText.vue';
-export default {
-    title: 'Base/BaseText',
-    component: BaseText,
-    tags: ['autodocs'],
-    argTypes: {
-        text: {
-            control: {
-                type: 'text',
-                defaultValue: 'Default Text'
-            }
-        },
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['xs', 'small', 'medium', 'large', 'xl', '2xl', '3xl'],
-            defaultValue: 'medium'
-        },
-        weight: {
-            control: {
-                type: 'select'
-            },
-            options: ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'],
-            defaultValue: 'normal'
-        },
-        color: {
-            control: {
-                type: 'select'
-            },
-            options: ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'],
-            defaultValue: 'primary'
-        },
-        hoverColor: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'primary',
-                'quaternary',
-                'secondary',
-                'tertiary',
-                'neutral',
-                'bright',
-                'none'
-            ],
-            defaultValue: 'none'
-        }
-    }
-};
-
-export const Large = {
-    args: {
-        size: 'large',
-        text: 'Large Text'
-    }
-};
-
-export const Medium = {
-    args: {
-        size: 'medium',
-        text: 'Medium Text'
-    }
-};
-export const Small = {
-    args: {
-        size: 'small',
-        text: 'Small Text'
-    }
-};
-
-export const TextWithHover = {
-    args: {
-        ...Large.args,
-        hoverColor: 'bright'
-    }
-};