@dcrackel/hematournamentui 1.0.21 → 1.0.23

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

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

@@ -1,48 +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: []
-    }
-};
+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

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

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

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

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

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

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