@dcrackel/hematournamentui 1.0.7 → 1.0.20

package/src/stories/Organisms/DatePicker/DatePicker.stories.js

@@ -0,0 +1,25 @@
+import DatePicker from './DatePicker.vue';
+
+export default {
+    title: 'Organisms/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { DatePicker },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};

package/src/stories/Organisms/DatePicker/DatePicker.vue

@@ -0,0 +1,62 @@
+<template>
+  <div >
+  <VueDatePicker
+      v-model="selectedDate"
+      placeholder="Select Start Date"
+      mode="date"
+      :format="'MM/dd/yyyy'"
+      :enable-time-picker="false"
+      :min-date="minDate"
+      :state="invalid"
+  />
+  </div>
+</template>
+
+<script>
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+export default {
+  components: { VueDatePicker },
+  props: {
+    setDate: {
+      type: [Date, String],
+      default: () => new Date(),
+      required: true
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedDate: this.setDate ? new Date(this.setDate) : null,
+      minDate: new Date()
+    };
+  },
+  watch: {
+    selectedDate(newDate) {
+      this.$emit("update:selectedDate", newDate);
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .dp__pointer.dp__input_readonly.dp__input.dp__input_icon_pad.dp__input_reg {
+  color: rgb(43,50,75);
+  font-size: 14px;
+  border-radius: 8px;
+}
+
+::v-deep .dp__input_invalid {
+  box-shadow: 0 0;
+  border: 1px solid rgb(213,228,238);
+}
+
+::v-deep .dp__input_valid {
+  box-shadow: 0 0;
+  border: 1px solid rgb(255,0,0);
+}
+</style>

package/src/stories/Organisms/DropDown/DropDownMenu.stories.js

@@ -0,0 +1,34 @@
+import DropDownMenu from './DropDownMenu.vue';
+export default {
+    title: 'Organisms/DropDownMenu',
+    component: DropDownMenu,
+    tags: ['autodocs']
+};
+const Template = args => ({
+    components: { DropDownMenu },
+    setup() {
+        return {
+            args: {
+                label: 'default',
+                items: []
+            }
+        };
+    },
+    methods: {
+        onMenuClick(index) {
+            alert(`Button ${index + 1} clicked!`);
+        }
+    }
+});
+
+export const Default = {
+    args: {
+        label: 'Sort By',
+        items: [
+            {text: 'Text1', link: '/link1'},
+            {text: 'Text2', link: '/link2'},
+            {text: 'Text3', link: '/link3'}
+        ],
+        selectedItem: {text: 'Text1', link: '/link1'}
+    }
+};

package/src/stories/Organisms/DropDown/DropDownMenu.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-row">
+    <span>
+      <div class="z-10 rounded-lg shadow px-2 py-2 w-40 flex flex-row justify-between" @click="handleDropDown()">
+        <BaseText :text="label" color="quaternary" size="sm" weight="normal" />
+        <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
+        <i class="fa-solid fa-chevron-down text-xs" />
+      </div>
+      <div v-if="isDropDownOpen" class="flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral">
+        <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0">
+          <BaseText :text="item.text" color="primary" size="xs" weight="normal" />
+        </a>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'DropDownMenu',
+  components: {BaseText},
+  props: {
+    label: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      validator: (itemsArray) => itemsArray.every(item => typeof item.text === 'string')
+    },
+    selectedItem: {
+      type: Object,
+      default: () => ({ text: '' }),
+      validator: (obj) => typeof obj.text === 'string'
+    }
+  },
+  data: () => ({
+    isDropDownOpen: false
+  }),
+  methods: {
+    handleClick(item) {
+      this.isDropDownOpen = false;
+      this.$emit('update:selectedItem', item);
+    },
+    handleDropDown() {
+      this.isDropDownOpen = !this.isDropDownOpen;
+    }
+  }
+}
+</script>

package/src/stories/Organisms/Grid/GridContainer.stories.js

@@ -0,0 +1,47 @@
+import GridContainer from './GridContainer.vue';
+import MockTournaments from '../../../mocks/tournamentMock.js';
+export default {
+    title: 'Organisms/GridContainer',
+    component: GridContainer,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export const Default = {
+    args: {
+        items: MockTournaments,
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Date', link: '/sort/name'}
+    }
+};
+export const EmptyBoard = {
+    args: {
+        tournaments: [],
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Name', link: '/sort/name'}
+    }
+};
+export const WithTournaments = {
+    args: {
+        items: MockTournaments,
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Name', link: '/sort/name'}
+    }
+};

package/src/stories/Organisms/Grid/GridContainer.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
+    <div class="my-4">
+      <FilterUpcomingPast :selected="selectedTimeFrame" @timeFrame="handleTimeFrameChange"/>
+    </div>
+    <div class="my-4">
+      <FilterAndSortBar :items="dropdownItems" :label="label" :selectedItem="selectedItem" @filterbar="handleFilter" @sort="handleSort"/>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full">
+      <div v-for="item in filteredItems" :key="item.id">
+        <component :is="component" :detail="item" />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+import BaseText from "../../Atoms/Text/BaseText.vue";
+import TournamentCard from "../../Organisms/TournamentCard/TournamentCard.vue";
+import FilterAndSortBar from "../../Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue";
+import FilterUpcomingPast from "../../Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue";
+
+export default {
+  name: 'GridContainer',
+  components: {
+    FilterAndSortBar,
+    BaseText,
+    TournamentCard,
+    FilterUpcomingPast
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    component: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+    },
+    dropdownItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedItem: null
+  },
+  data() {
+    return {
+      filterOn: '',
+      sortCriteria: 'Date',
+      selectedTimeFrame: 'All'
+    };
+  },
+  computed: {
+    filteredItems() {
+      let result = this.items;
+
+      if (this.filterOn.trim()) {
+        const lowerCaseSearchText = this.filterOn.toLowerCase();
+        result = result.filter(item =>
+            Object.values(item).some(value =>
+                typeof value === 'string' && value.toLowerCase().includes(lowerCaseSearchText)
+            )
+        );
+      }
+
+      const currentDate = new Date();
+      currentDate.setHours(0, 0, 0, 0);
+      switch (this.selectedTimeFrame) {
+        case 'Upcoming':
+          result = result.filter(item => new Date(item.date) >= currentDate);
+          break;
+        case 'Past':
+          result = result.filter(item => new Date(item.date) < currentDate);
+          break;
+      }
+
+      switch(this.sortCriteria) {
+        case 'Date':
+          result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
+          break;
+        case 'Name':
+          result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+          break;
+        case 'Location':
+          result = [...result].sort((a, b) => a.location.localeCompare(b.location));
+          break;
+      }
+      return result;
+    }
+  },
+  methods: {
+    handleFilter(filterText) {
+      this.filterOn = filterText;
+    },
+    handleSort(criteria) {
+      this.sortCriteria = criteria.text;
+    },
+    handleTimeFrameChange(timeFrame) {
+      this.selectedTimeFrame = timeFrame;
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ImageCropper/ImageCropper.stories.js

@@ -0,0 +1,28 @@
+import AvatarUploader from './ImageCropper.vue';
+
+export default {
+    title: 'Organisms/ImageCropper',
+    tags: ['autodocs'],
+    component: AvatarUploader,
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { AddTournamentPageOne },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};
+
+
+

package/src/stories/Organisms/ImageCropper/ImageCropper.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="">
+    <img
+        class="h-40 w-96 border-2 border-dashed rounded-lg"
+        :src="userPicUrl"
+        @error=""
+        v-bind:alt="personID"
+        @click="setShowCropper()"
+    />
+    <avatar-cropper
+        @uploading="handleUploading"
+        @uploaded="handleUploaded"
+        @completed="handleCompleted"
+        @error="handlerError"
+        v-model="showCropper"
+        :upload-url="`./uploads/${personID}`"
+        :cropper-options="{
+          aspectRatio: 8/3,
+          autoCropArea: 1,
+          viewMode: 1,
+          movable: true,
+          zoomable: true }"
+    />
+
+  </section>
+</template>
+
+<script>
+import AvatarCropper from 'vue-avatar-cropper'
+
+export default {
+  name: 'GenericImageCropper',
+  props: {
+    personID: {
+      type: Number,
+      default: 1
+    }
+  },
+  components: {
+    AvatarCropper
+  },
+  data() {
+    return {
+      showCropper: false,
+      userPicUrl: ''
+    }
+  },
+  mounted() {
+    this.getImgUrl(this.personID)
+  },
+  watch: {
+    personID: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        this.getImgUrl(newVal)
+      }
+    }
+  },
+  methods: {
+    getImgUrl(id) {
+      //this.userPicUrl = `${ferrotasNodeServer}/uploads/${id}.png?${Date.now()}`
+      this.userPicUrl = '../../../../src/assets/select-tournament.png'
+    },
+    setShowCropper() {
+      this.showCropper = true
+    },
+    handleUploading() {
+      this.userPicUrl = `./uploads/default.jpeg`
+      this.message = 'uploading...'
+    },
+    handleUploaded(response) {
+      if (response.response.status === 200) {
+        this.getImgUrl(this.personID)
+      }
+    },
+    handleCompleted() {
+      this.message = 'upload completed.'
+    },
+    handlerError(message, type, xhr) {
+      console.error(`${message} ${type} ${xhr}`)
+      this.message = 'Oops! Something went wrong...'
+    }
+  }
+}
+</script>
+

package/src/stories/Organisms/TextBoxEditor/TextBoxEditor.stories.js

@@ -0,0 +1,28 @@
+import TextBoxEditor from './TextBoxEditor.vue';
+
+export default {
+    title: 'Organisms/TextBoxEditor',
+    tags: ['autodocs'],
+    component: TextBoxEditor,
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { TextBoxEditor },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};
+
+
+

package/src/stories/Organisms/TextBoxEditor/TextBoxEditor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="border rounded-lg text-secondary text-sm p-4 w-full" :class="invalid ? 'border-alarm' : 'border-dropdownSelect'">
+    <div data-testid="editor-buttons" class="w-full flex flex-row pl-2">
+      <div class="w-1/3 border-r border-dropdownSelect flex flex-row justify-between pr-2">
+        <BaseButton iconName="fa-h1" label="" type="editor"
+                    :selected="editor && editor.isActive('heading', { level: 1 })"
+                    @click="editor.chain().toggleHeading({ level: 1 }).run()" />
+        <BaseButton iconName="fa-h2" label="" type="editor"
+                    :selected="editor && editor.isActive('heading', { level: 2 })"
+                    @click="editor.chain().toggleHeading({ level: 2 }).run()"/>
+        <BaseButton iconName="fa-h3" label="" type="editor"
+                    :selected="editor && editor.isActive('heading', { level: 3 })"
+                    @click="editor.chain().toggleHeading({ level: 3 }).run()"/>
+        <BaseButton iconName="fa-paragraph" label="" type="editor"
+                    :selected="editor && editor.isActive('paragraph')"
+                    @click="editor.chain().setParagraph().run()"/>
+      </div>
+      <div class="w-1/3 border-r border-dropdownSelect flex flex-row justify-around">
+        <BaseButton :selected="editor && editor.isActive('bold')" iconName="fa-bold" label="" type="editor"
+                    @click="editor && editor.chain().toggleBold().run()"/>
+        <BaseButton :selected="editor && editor.isActive('italic')" iconName="fa-italic" label="" type="editor"
+                    @click="editor && editor.chain().toggleItalic().run()"/>
+        <BaseButton :selected="editor && editor.isActive('strike')" iconName="fa-strikethrough" label="" type="editor"
+                    @click="editor && editor.chain().toggleStrike().run()"/>
+      </div>
+      <div class="w-1/3 flex flex-row justify-between pl-2">
+        <BaseButton :selected="editor && editor.isActive({ textAlign: 'left' })" iconName="fa-align-left" label="" type="editor"
+                    @click="editor.chain().setTextAlign('left').run()"/>
+        <BaseButton :selected="editor && editor.isActive({ textAlign: 'center' })" iconName="fa-align-center" label="" type="editor"
+                    @click="editor && editor.chain().setTextAlign('center').run()"/>
+        <BaseButton :selected="editor && editor.isActive({ textAlign: 'right' })" iconName="fa-align-right" label="" type="editor"
+                    @click="editor && editor.chain().setTextAlign('right').run()"/>
+        <BaseButton :selected="editor && editor.isActive({ textAlign: 'justify' })" iconName="fa-align-justify" label="" type="editor"
+                    @click="editor && editor.chain().setTextAlign('justify').run()"/>
+      </div>
+    </div>
+
+    <p class="my-4 my-2 p-4 rounded-xl h-40 bg-tertiary overflow-auto">
+      <editor-content :editor="editor" class="focus:shadow-none focus:outline-none"/>
+    </p>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import {EditorContent, useEditor} from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Highlight from '@tiptap/extension-highlight'
+import TextAlign from '@tiptap/extension-text-align'
+import BaseButton from "../../Molecules/Button/BaseButton.vue";
+
+export default {
+  components: {
+    EditorContent,
+    BaseButton
+  },
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  setup(props, {emit}) {
+    const editorContent = ref("");
+
+    const editor = useEditor({
+      content: "",
+      extensions: [
+        StarterKit,
+        Highlight,
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+        }),
+      ],
+      editorProps: {
+        attributes: {
+          class: 'focus:outline-none',
+        },
+      },
+      onUpdate({ editor }) {
+        editorContent.value = editor.getHTML();
+        emit('update:editorContent', editorContent.value);
+      }
+    })
+
+    return {editor, editorContent}
+  },
+  methods: {
+  }
+}
+</script>
+
+

package/src/stories/Organisms/TournamentCard/TournamentCard.stories.js

@@ -0,0 +1,37 @@
+import TournamentCard from './TournamentCard.vue';
+
+export default {
+    title: 'Organisms/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/src/stories/Organisms/TournamentCard/TournamentCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="rounded-xl w-72 shadow">
+    <TournamentHeader :artwork="detail.artwork" :tags="detail.tags" />
+    <TournamentDetail :detail="detail" />
+  </div>
+</template>
+
+<script>
+import TournamentHeader from '../../Molecules/Cards/Header/TournamentCardHeader.vue';
+import TournamentDetail from '../../Molecules/Cards/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>

package/src/stories/Templates/Forms/AddTournamentPageOne/AddTournamentPageOne.stories.js

@@ -0,0 +1,25 @@
+import AddTournamentPageOne from './AddTournamentPageOne.vue';
+
+export default {
+    title: 'Templates/Forms/AddTournamentForm/PageOne',
+    component: AddTournamentPageOne,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { AddTournamentPageOne },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};