@dcrackel/hematournamentui 1.0.7 → 1.0.20

package/package/tailwind/tailwind.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700&display=swap');

package/package/tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont']
+      },
+      colors: {
+        primary: '#141B33',
+        primaryHighlight: '#52586C',
+        secondary: '#2B324B',
+        tertiary: '#F6FAFD',
+        quaternary: '#8991AC',
+        dropdownSelect: '#D5E4EE',
+        neutral: '#FFFFFF',
+        bright: '#A0B1EC'
+      }
+    },
+  },
+  plugins: [],
+}

package/package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+      environment: "happy-dom",
+  },
+  build: {
+    lib: {
+      entry: 'src/index.js',  // this will be your entry point file where you export components
+      name: 'HemaTournamentUI',     // this is the name of your library
+      fileName: (format) => `HemaTouranmentUI-lib.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],     // add external dependencies here
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.20",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",
@@ -20,10 +20,17 @@
   },
   "dependencies": {
     "@storybook/addon-actions": "^7.4.5",
+    "@tiptap/extension-bold": "^2.1.11",
+    "@tiptap/starter-kit": "^2.1.11",
+    "@tiptap/vue-3": "^2.1.11",
+    "@vuepic/vue-datepicker": "^7.1.0",
     "concurrently": "^8.2.1",
+    "cropperjs": "^1.6.1",
     "font-awesome": "^4.7.0",
     "happy-dom": "^12.8.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-avatar-cropper": "^6.0.9",
+    "vue-google-autocomplete": "^1.1.4"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^7.4.5",

package/src/index.js

@@ -1,15 +1,24 @@
-export { default as BaseInput } from './stories/Base/Input/BaseInput.vue';
-export { default as BaseButton } from './stories/Base/Button/BaseButton.vue';
-export { default as BaseTag } from './stories/Base/Tag/BaseTag.vue';
-export { default as BaseText } from './stories/Base/Text/BaseText.vue';
+export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
+export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
+export { default as BaseRaioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
+export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
+export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
 
-export { default as TournamentCard } from './stories/Cards/TournamentCard/TournamentCard.vue';
-export { default as TournamentCardDetails } from './stories/Cards/TournamentCard/Detail/TournamentCardDetail.vue';
-export { default as TournamentCardHeader } from './stories/Cards/TournamentCard/Header/TournamentCardHeader.vue';
+export { default as Breadcrumb } from './stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue';
+export { default as BaseButton } from './stories/Molecules/Button/BaseButton.vue';
+export { default as TournamentCardDetails } from './stories/Molecules/Cards/Detail/TournamentCardDetail.vue';
+export { default as TournamentCardHeader } from './stories/Molecules/Cards/Header/TournamentCardHeader.vue';
+export { default as FilterAndSortBar } from './stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
+export { default as FilterUpcomingPast } from './stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
 
-export { default as GridContainer } from './stories/Containers/Grid/GridContainer.vue';
+export { default as AddressAutocomplete } from './stories/Organisms/AddressAutocomplete/AddressAutocomplete.vue';
+export { default as DatePicker } from './stories/Organisms/DatePicker/DatePicker.vue';
+export { default as DropDown } from './stories/Organisms/DropDown/DropDownMenu.vue';
+export { default as ImageCropper } from './stories/Organisms/ImageCropper/ImageCropper.vue';
+export { default as TextBoxEditor } from './stories/Organisms/TextBoxEditor/TextBoxEditor.vue';
+export { default as TournamentCard } from './stories/Organisms/TournamentCard/TournamentCard.vue';
 
-export { default as FilterAndSortBar } from './stories/Filters/FilterAndSortBar/FilterAndSortBar.vue';
-export { default as AdminLeftMenu } from './stories/Menu/Admin/AdminLeftMenu.vue';
-export { default as DropDownMenu } from './stories/Menu/DropDown/DropDownMenu.vue';
+export { default as AddTournamentPageOne } from './stories/Templates/Forms/AddTournamentPageOne/AddTournamentPageOne.vue';
+// export { default as AddTournamentPageTwo } from './stories/Templates/Forms/AddTournamentPageTwo/AddTournamentPageTwo.vue';
+export { default as AdminLeftMenu } from './stories/Templates/Menu/Admin/AdminLeftMenu.vue';
 

package/src/stories/Atoms/Icon/BaseIcon.stories.js

@@ -0,0 +1,54 @@
+import BaseIcon from './BaseIcon.vue';
+
+export default {
+    title: 'Atoms/BaseIcon',
+    component: BaseIcon,
+    tags: ['autodocs'],
+    argTypes: {
+        iconName: {
+            control: {
+                type: 'text',
+                defaultValue: 'fa-check'
+            }
+        },
+        style: {
+          control: {
+                type: 'select'
+          },
+          options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
+          defaultValue: 'solid'
+        },
+        size: {
+            control: {
+                type: 'select'
+            },
+            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+            defaultValue: 'sm'
+        },
+        color: {
+            control: {
+                type: 'text'
+            },
+            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright'],
+            defaultValue: 'primary'
+        }
+    }
+};
+
+export const BasicPrimary = {
+    args: {
+        iconName: 'fa-face-smile',
+        size: 'sm',
+        color: 'primary',
+        style: 'fa-solid'
+    }
+};
+
+export const RegularAndBright = {
+    args: {
+        iconName: 'fa-face-smile',
+        size: 'lg',
+        color: 'bright',
+        style: 'fa-regular'
+    }
+};

package/src/stories/Atoms/Icon/BaseIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <i :class="computedIconClass"></i>
+</template>
+
+<script>
+
+export default {
+  name: 'BaseIcon',
+  props: {
+    iconName: {
+      type: String,
+      required: true
+    },
+    style: {
+      type: String,
+      default: 'fa-solid',
+      validator: function (value) {
+        return ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'].indexOf(value) !== -1;
+      },
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].indexOf(value) !== -1;
+      },
+      default: 'sm'
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  computed: {
+    computedIconClass() {
+      return [
+        this.style,
+        this.iconName,
+        `text-${this.size}`,
+        this.colorClass
+      ];
+    },
+    colorClass() {
+      return `text-${this.color}`;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,28 @@
+import BaseInput from './BaseInput.vue';
+
+export default {
+    title: 'Atoms/BaseInput',
+    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/src/stories/Atoms/Input/BaseInput.test.js

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

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

@@ -0,0 +1,73 @@
+<template>
+  <input
+      :class="baseClasses"
+      :placeholder="placeholder"
+      v-model="internalValue"
+      @input="onInput"
+  />
+</template>
+
+<script>
+import { ref, watch, computed } from 'vue';
+
+export default {
+  name: 'BaseInput',
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'borderless',
+      validator: function (value) {
+        return ['formInput', 'borderless'].indexOf(value) !== -1;
+      }
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { emit }) {
+    const internalValue = ref(props.value);
+    const timeout = ref(null);
+
+    watch(() => props.value, newValue => {
+      internalValue.value = newValue;
+    });
+
+    const baseClasses = computed(() => {
+      let baseClasses = 'appearance-none focus:outline-none';
+
+      switch (props.type) {
+        case 'borderless':
+          baseClasses += ' w-full text-sm';
+          break;
+        case 'formInput':
+          baseClasses += ' border rounded-lg text-secondary placeholder:text-xs text-sm p-2 w-full';
+          props.invalid ? baseClasses += ' border-alarm' : baseClasses += ' border border-dropdownSelect';
+          break;
+      }
+      return baseClasses;
+    });
+
+    const onInput = () => {
+      clearTimeout(timeout.value);
+      timeout.value = setTimeout(() => {
+        emit('update:value', internalValue.value);
+      }, 300);
+    }
+
+    return {
+      internalValue,
+      baseClasses,
+      onInput
+    };
+  }
+};
+</script>

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.stories.js

@@ -0,0 +1,31 @@
+import BaseRadioGroup from './BaseRadioGroup.vue';
+
+export default {
+    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" />',
+});
+
+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' },
+    ]
+};

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.vue

@@ -0,0 +1,49 @@
+<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)"
+    >
+      <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseRadioGroup',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: null,
+    };
+  },
+  methods: {
+    selectItem(index) {
+      this.selectedIndex = index;
+      this.$emit('update:value', this.items[index].value);
+    },
+  },
+};
+</script>
+

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

@@ -0,0 +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'
+        }
+    }
+};
+
+export const Basic = {
+    args: {
+        label: 'default tag',
+        backgroundColor: 'primary'
+    }
+};

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

@@ -0,0 +1,42 @@
+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/src/stories/Atoms/Tag/BaseTag.vue

@@ -0,0 +1,57 @@
+<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>