@dcrackel/hematournamentui 1.0.22 → 1.0.23

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

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

@@ -1,25 +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: {
-    }
-};
+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

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

@@ -1,34 +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'}
-    }
-};
+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

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

@@ -1,47 +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'}
-    }
-};
+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'}
+    }
+};