@dcrackel/hematournamentui 1.0.21 → 1.0.22

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

@@ -1,153 +0,0 @@
-import {mount} from "@vue/test-utils";
-import {describe, expect, test, it} from "vitest";
-import BaseText from './BaseText.vue';
-
-describe('BaseText.vue', () => {
-    it('renders correctly with default props', () => {
-        const wrapper = mount(BaseText, {
-            props: {text: 'Test Text'}
-        });
-        expect(wrapper.text()).toBe('Test Text');
-        expect(wrapper.classes()).toContain('font-sans');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('text-primary');
-    });
-
-    it('renders text, size, weight, and color based on props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Styled Text',
-                size: 'xl',
-                weight: 'bold',
-                color: 'secondary'
-            }
-        });
-        expect(wrapper.text()).toBe('Styled Text');
-        expect(wrapper.classes()).toContain('text-xl');
-        expect(wrapper.classes()).toContain('font-bold');
-        expect(wrapper.classes()).toContain('text-secondary');
-    });
-
-    it('computes classes based on multiple props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: '2xl',
-                weight: 'extra-bold',
-                color: 'bright',
-                hoverColor: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-2xl');
-        expect(wrapper.classes()).toContain('font-extrabold');
-        expect(wrapper.classes()).toContain('text-bright');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
-    });
-
-    it('computes classes for hover primary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'xs',
-                hoverColor: 'primary',
-                weight: 'light',
-                color: 'neutral'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('text-neutral');
-        expect(wrapper.classes()).toContain('hover:text-primary');
-    });
-
-    it('computes classes for hover secondary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'md',
-                hoverColor: 'secondary',
-                weight: 'medium',
-                color: 'tertiary'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-md');
-        expect(wrapper.classes()).toContain('font-medium');
-        expect(wrapper.classes()).toContain('hover:text-secondary');
-    });
-
-    it('computes classes for hover tertiary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'lg',
-                hoverColor: 'tertiary',
-                weight: 'light',
-                color: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-lg');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
-    });
-
-    it('computes classes for hover quaternary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                weight: 'semi-bold',
-                size: '3xl',
-                hoverColor: 'quaternary',
-                color: 'quaternary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-quaternary');
-        expect(wrapper.classes()).toContain('text-3xl');
-        expect(wrapper.classes()).toContain('font-semibold');
-        expect(wrapper.classes()).toContain('hover:text-quaternary');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'neutral',
-                size: 'xs',
-                color: 'primary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-primary');
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('hover:text-neutral');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'bright',
-                color: 'primaryHighlight'
-            }
-        });
-        expect(wrapper.classes()).toContain('hover:text-bright');
-        expect(wrapper.classes()).toContain('text-primaryHighlight');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'none'
-            }
-        });
-        const hasHoverClass = wrapper.classes().some(className => className.startsWith('hover:'));
-        expect(hasHoverClass).toBeFalsy();
-    });
-
-});
-

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

@@ -1,163 +0,0 @@
-<template>
-  <div :class="classes">{{ text }}</div>
-</template>
-
-<script>
-import { computed, reactive } from 'vue';
-
-export default {
-  name: 'BaseText',
-
-  props: {
-    text: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    weight: {
-      type: String,
-      default: 'normal',
-      validator: function (value) {
-        return ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'].indexOf(value) !== -1;
-      }
-    },
-    size: {
-      type: String,
-      default: 'small',
-      validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].indexOf(value) !== -1;
-      }
-    },
-    color: {
-      type: String,
-      default: 'primary',
-      validator: function (value) {
-        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright', 'primaryHighlight'].indexOf(value) !== -1;
-      }
-    },
-    hoverColor: {
-      type: String,
-      default: 'none',
-      validator: function (value) {
-        return (
-            [
-              'primary',
-              'secondary',
-              'tertiary',
-              'quaternary',
-              'neutral',
-              'bright',
-              'none'
-            ].indexOf(value) !== -1
-        );
-      }
-    }
-  },
-  setup(props) {
-    props = reactive(props);
-    return {
-      classes: computed(() => {
-        let baseClasses = 'inline-block font-sans';
-
-        switch (props.color) {
-          case 'neutral':
-            baseClasses += ' text-neutral';
-            break;
-          case `tertiary`:
-            baseClasses += ' text-tertiary';
-            break;
-          case 'secondary':
-            baseClasses += ' text-secondary';
-            break;
-          case 'quaternary':
-            baseClasses += ' text-quaternary';
-            break;
-          case 'primary':
-            baseClasses += ' text-primary';
-            break;
-          case 'primaryHighlight':
-            baseClasses += ' text-primaryHighlight';
-            break;
-          case 'bright':
-            baseClasses += ' text-bright';
-            break;
-        }
-
-        switch (props.hoverColor) {
-          case 'neutral':
-            baseClasses += ' hover:text-neutral';
-            break;
-          case `tertiary`:
-            baseClasses += ' hover:text-tertiary';
-            break;
-          case 'secondary':
-            baseClasses += ' hover:text-secondary';
-            break;
-          case 'quaternary':
-            baseClasses += ' hover:text-quaternary';
-            break;
-          case 'primary':
-            baseClasses += ' hover:text-primary';
-            break;
-          case 'bright':
-            baseClasses += ' hover:text-bright';
-            break;
-          case 'none':
-            baseClasses += '';
-            break;
-        }
-
-        switch (props.weight) {
-          case 'light':
-            baseClasses += ' font-light';
-            break;
-          case 'normal':
-            baseClasses += ' font-normal';
-            break;
-          case 'medium':
-            baseClasses += ' font-medium';
-            break;
-          case 'semi-bold':
-            baseClasses += ' font-semibold';
-            break;
-          case 'bold':
-            baseClasses += ' font-bold';
-            break;
-          case 'extra-bold':
-            baseClasses += ' font-extrabold';
-            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;
-          case '2xl':
-            baseClasses += ' text-2xl';
-            break;
-          case '3xl':
-            baseClasses += ' text-3xl';
-            break;
-          default:
-            baseClasses += ' text-sm';
-            break;
-        }
-        return baseClasses;
-      })
-    };
-  }
-};
-
-</script>

package/package/src/stories/Breadcrumb/Admin/Breadcrumb.stories.js

@@ -1,41 +0,0 @@
-// Breadcrumb.stories.js
-import Breadcrumb from './Breadcrumb.vue';
-import { vueRouter } from 'storybook-vue3-router';
-import mockRoutes from '../../../../.storybook/mockRoutes';
-import { action } from '@storybook/addon-actions';
-export default {
-    title: 'Navigation/Breadcrumb',
-    component: Breadcrumb,
-    tags: ['autodocs'],
-    argTypes: {
-        items: {
-            control: 'object',
-            description: 'Array of breadcrumb items'
-        },
-    },
-};
-
-export const Default = {
-    args: {
-        label: 'Sort By',
-        items: [
-            { text: 'Tournament', link: '/' },
-            { text: 'Event', link: '/event' },
-            { text: 'Pool', link: '' }
-        ],
-        selectedItem: {text: 'Text1', link: '/link1'},
-        props: {
-            onLinkClick: {
-                default: () => action('link-clicked')
-            }
-        },
-    }
-};
-
-Default.decorators = [vueRouter(mockRoutes)];
-
-Default.parameters = {
-    actions: {
-        handles: ['click .breadcrumb-item router-link'],
-    },
-};

package/package/src/stories/Breadcrumb/Admin/Breadcrumb.vue

@@ -1,31 +0,0 @@
-<template>
-  <nav class="flex flex-row">
-    <div v-for="(item, index) in items" :key="index">
-      <BaseText v-if="index > 0" :text="' > '" size="lg" color="quaternary" class="mr-2" />
-      <BaseText v-if="!item.link" class="mr-2" :text="item.text" size="lg" color="quaternary" />
-      <router-link v-if="item.link" :to="item.link" @click.native="onLinkClick" class="mr-2">
-        <BaseText :text="item.text" size="lg" color="quaternary" hover-color="bright" class="underline" />
-      </router-link>
-    </div>
-  </nav>
-</template>
-
-<script>
-import BaseText from "../../Base/Text/BaseText.vue";
-
-export default {
-  name: 'Breadcrumb',
-  components: {BaseText},
-  props: {
-    items: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    onLinkClick: {
-      type: Function,
-      default: () => {}
-    }
-  }
-};
-</script>

package/package/src/stories/Cards/TournamentCard/Detail/TournamentCardDetail.stories.js

@@ -1,33 +0,0 @@
-import TournamentCardDetail from './TournamentCardDetail.vue';
-
-export default {
-    title: 'Cards/TournamentCard/TournamentCardDetail',
-    component: TournamentCardDetail,
-    tags: ['autodocs'],
-    argTypes: {
-        tournament: {
-            control: {
-                type: 'object'
-            },
-            defaultValue: {
-                name: 'Tournament Name',
-                description: 'Tournament Description',
-                date: '07 October, 2023',
-                closes: 'Registration closes 06 October, 2023',
-                location: 'Tournament Location - City, State'
-            }
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        tournament: {
-            name: 'Tournament Name',
-            description: 'Tournament Description',
-            date: '07 October, 2023',
-            closes: 'Registration closes 06 October, 2023',
-            location: 'Tournament Location - City, State'
-        }
-    }
-};

package/package/src/stories/Cards/TournamentCard/Detail/TournamentCardDetail.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="flex flex-col w-full pt-4 pb-3 px-3">
-    <BaseText :text="detail.name" color="primary" size="xl" weight="semi-bold" />
-    <BaseText :text="detail.location" color="primary" size="sm" weight="normal" />
-    <div class="mt-4 flex flex-col">
-      <BaseText :text="`${detail.date}`" color="primaryHighlight" size="sm" weight="light" />
-      <BaseText :text="`${detail.closes}`" color="primaryHighlight" size="sm" weight="light" />
-    </div>
-    <div class="flex flex-row w-full justify-end">
-      <BaseButton :label="`Edit`" class="mt-2" primary />
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseText from '../../../Base/Text/BaseText.vue';
-import BaseButton from '../../../Base/Button/BaseButton.vue';
-
-export default {
-  name: 'tournament-card-details',
-  components: {
-    BaseButton,
-    BaseText
-  },
-  props: {
-    detail: {
-      type: Object,
-      required: true,
-      default: () => ({
-        name: '',
-        date: '',
-        closes: '',
-        location: ''
-      })
-    }
-  }
-};
-</script>

package/package/src/stories/Cards/TournamentCard/Header/TournamentCardHeader.stories.js

@@ -1,48 +0,0 @@
-import TournamentCardHeader from './TournamentCardHeader.vue';
-
-export default {
-    title: 'Cards/TournamentCard/TournamentHeader',
-    component: TournamentCardHeader,
-    tags: ['autodocs'],
-    argTypes: {
-        artwork: {
-            control: {
-                type: 'text',
-                defaultValue: 'Default Artwork URL'
-            }
-        },
-        tags: {
-            control: {
-                type: 'array',
-                defaultValue: ['1 Fencer', '2 Events']
-            }
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        tags: ['1 Fencer', '2 Events']
-    }
-};
-
-export const WithCustomArtwork = {
-    args: {
-        artwork: 'Custom Artwork URL',
-        tags: ['1 Fencer', '2 Events']
-    }
-};
-
-export const WithCustomTags = {
-    args: {
-        artwork: 'Default Artwork URL',
-        tags: ['CustomTag1', 'CustomTag2']
-    }
-};
-
-export const NoTags = {
-    args: {
-        artwork: 'Default Artwork URL',
-        tags: []
-    }
-};

package/package/src/stories/Cards/TournamentCard/Header/TournamentCardHeader.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="rounded-t-xl w-full">
-    <div
-        :style="backgroundStyle"
-        class="h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center">
-      <div class="flex flex-row">
-        <BaseTag v-for="tag in tags" :key="tag" :label="tag" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseTag from '../../../Base/Tag/BaseTag.vue';
-import defaultArtwork from '../../../../assets/default-tournament.png';
-
-export default {
-  name: 'tournament-card-header',
-  components: {
-    BaseTag
-  },
-  props: {
-    artwork: {
-      type: String,
-      required: true,
-      default: defaultArtwork
-    },
-    tags: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    backgroundStyle() {
-      const artworkToUse = this.artwork || defaultArtwork;
-      return `background-image: url('${artworkToUse}');`;
-    }
-  }
-};
-</script>

package/package/src/stories/Cards/TournamentCard/TournamentCard.stories.js

@@ -1,37 +0,0 @@
-import TournamentCard from './TournamentCard.vue';
-
-export default {
-    title: 'Cards/TournamentCard',
-    component: TournamentCard,
-    tags: ['autodocs'],
-    argTypes: {
-        detail: {
-            control: {
-                type: 'object',
-                defaultValue: {
-                    artwork: '',
-                    tags: ['tag1', 'tag2'],
-                    name: 'Tournament Name',
-                    description: 'Tournament Description',
-                    date: '2023-09-20',
-                    closes: '2023-09-21',
-                    location: 'Tournament Location - City, State'
-                }
-            }
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        detail: {
-            artwork: '',
-            tags: ['tag1', 'tag2'],
-            name: 'Tournament Name',
-            description: 'Tournament Description',
-            date: '2023-09-20',
-            closes: '2023-09-21',
-            location: 'Tournament Location - City, State'
-        }
-    }
-};

package/package/src/stories/Cards/TournamentCard/TournamentCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="rounded-xl w-72 shadow">
-    <TournamentHeader :artwork="detail.artwork" :tags="detail.tags" />
-    <TournamentDetail :detail="detail" />
-  </div>
-</template>
-
-<script>
-import TournamentHeader from './Header/TournamentCardHeader.vue';
-import TournamentDetail from './Detail/TournamentCardDetail.vue';
-
-export default {
-  name: 'TournamentCard',
-  components: {
-    TournamentHeader,
-    TournamentDetail
-  },
-  props: {
-    detail: {
-      type: Object,
-      required: true,
-      default: () => ({
-        artwork: '',
-        tags: [],
-        name: '',
-        description: '',
-        date: '',
-        closes: '',
-        location: ''
-      })
-    }
-  },
-};
-
-</script>