@dcrackel/hematournamentui 1.0.7 → 1.0.8

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

@@ -0,0 +1,125 @@
+<template>
+  <button data-testid="base-button" :class="classes" type="button" @click="onClick">
+    <BaseIcon v-if="iconName" data-testid="base-icon" :icon-name="iconName" :style="iconStyle" :color="textColor" :size="size" />
+    <BaseText data-testid="base-text" :color="textColor" :size="size" :text="label" weight="normal" />
+  </button>
+</template>
+
+<script>
+import { computed } from 'vue';
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../Atoms/Icon/BaseIcon.vue';
+
+export default {
+  name: 'base-button',
+  components: { BaseText, BaseIcon },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    iconStyle: {
+      type: String,
+      default: 'fa-solid',
+      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: value => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary','continue', 'iconOnly', 'editor'].includes(value)
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    const typeClasses = {
+      primary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
+          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+
+      secondary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral ' +
+          (props.selected ? 'bg-dropdownSelect' : 'bg-secondary'),
+
+      tertiary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ' +
+          (props.selected ? 'bg-primary' : 'bg-tertiary'),
+
+      bright: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
+          (props.selected ? 'bg-primary' : 'bg-bright'),
+
+      admin: 'px-2.5 mx-1 py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight ' +
+          (props.selected ? 'bg-primary' : 'bg-primary'),
+
+      adminSecondary: 'px-2.5 mx-1 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 ? 'bg-primary' : 'bg-primary'),
+
+      continue: 'px-2.5 mx-1 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
+          (props.selected ? 'bg-secondary' : 'bg-primary'),
+
+      iconOnly: 'py-0.5 items-center rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary',
+
+      editor: 'px-1 items-center rounded-md text-center justify-center hover:bg-tertiary'
+    };
+
+    const sizeClasses = {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+    };
+
+    return {
+      textColor: computed(() => {
+        const colorMap = {
+          primary: 'primary',
+          secondary: 'secondary',
+          tertiary: 'tertiary',
+          bright: 'bright',
+          admin: 'neutral',
+          adminSecondary: 'neutral',
+          continue: 'neutral',
+          editor: props.selected ? 'bright' : 'quaternary'
+        };
+        return colorMap[props.type];
+      }),
+      classes: computed(() => {
+        let baseClasses = 'inline-flex';
+
+        let typeClass = typeClasses[props.type];
+
+        if (props.selected) {
+          switch (props.type) {
+            case 'primary':
+              typeClass = typeClass.replace('bg-neutral', 'bg-dropdownSelect');
+              break;
+            case 'secondary':
+              typeClass = typeClass.replace('bg-secondary', 'bg-dropdownSelect');
+              break;
+          }
+        }
+
+        let sizeClass = sizeClasses[props.size];
+        return `${baseClasses} ${typeClass} ${sizeClass}`;
+      }),
+      onClick() {
+        emit('click');
+      }
+    };
+  }
+};
+</script>

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

@@ -0,0 +1,33 @@
+import TournamentCardDetail from './TournamentCardDetail.vue';
+
+export default {
+    title: 'Molecules/Cards/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/src/stories/Molecules/Cards/Detail/TournamentCardDetail.vue

@@ -0,0 +1,38 @@
+<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 '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/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/src/stories/Molecules/Cards/Header/TournamentCardHeader.stories.js

@@ -0,0 +1,48 @@
+import TournamentCardHeader from './TournamentCardHeader.vue';
+
+export default {
+    title: 'Molecules/Cards/TournamentCardHeader',
+    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/src/stories/Molecules/Cards/Header/TournamentCardHeader.vue

@@ -0,0 +1,40 @@
+<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 '../../../Atoms/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/src/stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.stories.js

@@ -0,0 +1,36 @@
+import FilterAndSortBar from './FilterAndSortBar.vue';
+
+export default {
+    title: 'Molecules/Filter/FilterAndSortBar',
+    component: FilterAndSortBar,
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            type: 'text',
+            defaultValue: 'Default Text'
+        },
+        items: { control: 'object' }
+    }
+};
+
+// const Template = args => ({
+//     components: { FilterAndSortBar },
+//     props: Object.keys(args),
+//     methods: {
+//         onButtonClick(button) {
+//             console.log('Button clicked:', button);
+//         }
+//     }
+// });
+
+export const Default = {
+    args: {
+        label: 'Sort by',
+        items: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Name', link: '/sort/name'}
+    }
+};

package/src/stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <section class="flex flex-row w-full justify-between">
+    <div class="rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4">
+      <i class="fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" />
+      <BaseInput placeholder="Search on Name, Location, or Date" class="text-quaternary" :value="filterText" @update:value="handleFilter" />
+    </div>
+    <div>
+      <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem" @update:selectedItem="handleSelectedItem" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import DropDownMenu from "../../../Organisms/DropDown/DropDownMenu.vue";
+
+export default {
+  name: 'FilterAndSortBar',
+  components: {
+    DropDownMenu,
+    BaseInput
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    selectedItem: null
+  },
+  data() {
+    return {
+      filterText: '',
+      localSelectedItem: this.selectedItem
+    };
+  },
+  methods: {
+    handleFilter(filterText) {
+      this.$emit('filterbar', filterText);
+    },
+    handleSelectedItem(item) {
+      this.$emit('sort', item)
+      this.localSelectedItem = item;
+    },
+  }
+};
+</script>

package/src/stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.stories.js

@@ -0,0 +1,32 @@
+import FilterUpcomingPast from './FilterUpcomingPast.vue';
+
+export default {
+    title: 'Molecules/Filter/FilterUpcomingPast',
+    component: FilterUpcomingPast,
+    tags: ['autodocs'],
+    argTypes: {
+    },
+    methods: {
+        handleTimeFrame: {
+            action: 'handleTimeFrame',
+            description: 'Emitted when a time frame is selected'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+    }
+};
+
+export const UpcomingSelected = {
+    args: {
+        selected: 'Upcoming'
+    }
+};
+
+export const PastSelected = {
+    args: {
+        selected: 'Past'
+    }
+};

package/src/stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="flex flex-row w-full justify-between">
+    <div class="rounded-lg w-3/4">
+      <BaseText text="Tournament" color="primary" size="2xl" weight="normal" />
+    </div>
+    <div class="flex flex-row h-8 w-1/4 justify-end">
+      <BaseButton label="All" color="primary" size="sm" :selected="localSelected === 'All'" @click="handleTimeFrame('ALL')" />
+      <BaseButton label="Upcoming" color="primary" size="sm" :selected="localSelected === 'Upcoming'" @click="handleTimeFrame('Upcoming')" />
+      <BaseButton label="Past" color="primary" size="sm" :selected="localSelected === 'Past'" @click="handleTimeFrame('Past')" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import DropDownMenu from "../../../Organisms/DropDown/DropDownMenu.vue";
+import BaseButton from "../../../Molecules/Button/BaseButton.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'FilterUpcomingPast',
+  components: {
+    BaseText,
+    BaseButton,
+    DropDownMenu,
+    BaseInput
+  },
+  props: {
+    selected : {
+      type: String,
+      default: 'All'
+    }
+  },
+  data() {
+    return {
+      localSelected: this.selected
+    };
+  },
+  methods: {
+    handleTimeFrame(timeFrame) {
+      this.$emit('timeFrame', timeFrame)
+      this.localSelected = timeFrame
+    }
+  }
+};
+</script>

package/src/stories/Organisms/AddressAutocomplete/AddressAutocomplete.stories.js

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

package/src/stories/Organisms/AddressAutocomplete/AddressAutocomplete.vue

@@ -0,0 +1,51 @@
+<template>
+
+    <vue-google-autocomplete
+        class="border rounded-lg text-secondary text-xs p-2 w-full appearance-none focus:outline-none"
+        :class="invalid ? 'border-alarm' : 'border-dropdownSelect'"
+        id="map"
+        ref="address"
+        v-model="address"
+        placeholder="Venue Address"
+        @placechanged="getAddressData"
+    />
+
+</template>
+
+<script>
+import VueGoogleAutocomplete from "vue-google-autocomplete";
+
+export default {
+  components: { VueGoogleAutocomplete },
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      address: "",
+      coordinates: ""
+    };
+  },
+  methods: {
+    getAddressData(addressData) {
+      const street = `${addressData.street_number} ${addressData.route}`;
+      const city = addressData.locality;
+      const state = addressData.administrative_area_level_1;
+
+      this.address = `${street}, ${city}, ${state}`;
+      this.coordinates = `${addressData.latitude},${addressData.longitude}`
+
+      const updatedAddress = {
+        address: this.address,
+        coordinates: this.coordinates
+      }
+
+      this.$emit("update:address", updatedAddress);
+
+    }
+  }
+};
+</script>

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'}
+    }
+};