@dcrackel/hematournamentui 1.0.7 → 1.0.20

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

@@ -0,0 +1,77 @@
+import BaseText from './BaseText.vue';
+export default {
+    title: 'Atoms/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'
+    }
+};

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

@@ -0,0 +1,172 @@
+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('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();
+    });
+
+    it('applies text-alarmText class when color is alarm', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Alarm Text',
+                color: 'alarm'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-alarmText');
+    });
+
+    it('applies text-alarm class when invalid is true', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Invalid Text',
+                invalid: true
+            }
+        });
+        expect(wrapper.classes()).toContain('text-alarm');
+    });
+
+});
+

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

@@ -0,0 +1,170 @@
+<template>
+  <div :class="classes">{{ text }}</div>
+</template>
+
+<script>
+import { computed } 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: 'sm',
+      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', 'alarm'].indexOf(value) !== -1;
+      }
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    hoverColor: {
+      type: String,
+      default: 'none',
+      validator: function (value) {
+        return (
+            [
+              'primary',
+              'secondary',
+              'tertiary',
+              'quaternary',
+              'neutral',
+              'bright',
+              'none'
+            ].indexOf(value) !== -1
+        );
+      }
+    }
+  },
+  setup(props) {
+    return {
+      classes: computed(() => {
+        let baseClasses = '';
+
+        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;
+          case 'alarm':
+            baseClasses += ' text-alarmText';
+            break;
+        }
+
+        if (props.invalid) {
+          baseClasses = ' text-alarm';
+        }
+
+        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;
+        }
+        return baseClasses;
+      })
+    };
+  }
+};
+
+</script>

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

@@ -0,0 +1,41 @@
+// Breadcrumb.stories.js
+import Breadcrumb from './Breadcrumb.vue';
+import { vueRouter } from 'storybook-vue3-router';
+import mockRoutes from '../../../../../.storybook/mockRoutes.js';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'Molecules/Admin/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/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue

@@ -0,0 +1,31 @@
+<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 "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'Breadcrumb',
+  components: {BaseText},
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    onLinkClick: {
+      type: Function,
+      default: () => {}
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,76 @@
+import BaseButton from './BaseButton.vue';
+
+export default {
+    title: 'Molecules/Button/BaseButton',
+    component: BaseButton,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: {},
+        size: {
+            control: {
+                type: 'select'
+            },
+            options: ['small', 'medium', 'large']
+        },
+        iconName: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: ''
+        },
+        iconStyle: {
+            control: {
+                type: 'select'
+            },
+            options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
+            defaultValue: 'fa-solid'
+        },
+        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',
+        iconName: 'fa-check'
+    }
+};
+export const Secondary = {
+    args: {
+        label: 'Button'
+    }
+};
+export const HighlightedButtonLarge = {
+    args: {
+        type: 'bright',
+        size: '3xl',
+        label: 'Button'
+    }
+};
+export const SmallTertiary = {
+    args: {
+        type: 'tertiary',
+        size: 'sm',
+        label: 'Button'
+    }
+};
+
+export const AdminMunuButton = {
+    args: {
+        type: 'admin',
+        size: 'md',
+        label: 'Admin Button',
+        hoverColor: 'highlightPrimary'
+    }
+};