@dcrackel/meyersquaredui 1.0.43 → 1.0.44

package/src/mocks/getTouranmentDetailsMock.js

@@ -0,0 +1,92 @@
+const mockTournamentDetails =
+    {
+        "TournamentId": 9,
+        "Name": "Queen's Court",
+        "StartDate": "2024-07-20",
+        "EndDate": "2024-07-21",
+        "RegistrationCutOff": "2024-07-20",
+        "Description": "Queen City Sword GuildΓÇÖs first tournament, featuring steel longsword.",
+        "HostedOnM2": true,
+        "TotalParticipants": 77,
+        "Events": [
+            {
+                "EventId": 1,
+                "EventName": "Longsword Open",
+                "Date": "2024-05-03",
+                "StartTime": "12:00:16",
+                "ParticipantsCount": 13,
+                "Weapon": {
+                    "Name": "Longsword"
+                }
+            },
+            {
+                "EventId": 8,
+                "EventName": "Longsword B",
+                "Date": "2024-07-20",
+                "StartTime": "09:00:00",
+                "ParticipantsCount": 26,
+                "Weapon": {
+                    "Name": "Longsword"
+                }
+            },
+            {
+                "EventId": 9,
+                "EventName": "Longsword A",
+                "Date": "2024-07-20",
+                "StartTime": "13:00:00",
+                "ParticipantsCount": 15,
+                "Weapon": {
+                    "Name": "Longsword"
+                }
+            },
+            {
+                "EventId": 10,
+                "EventName": "Messer",
+                "Date": "2024-07-21",
+                "StartTime": "09:00:00",
+                "ParticipantsCount": 23,
+                "Weapon": {
+                    "Name": "Messer"
+                }
+            }
+        ],
+        "Club": {
+            "Name": "Queen City Sword Guild",
+            "ClubId": 23,
+            "Images": [
+                {
+                    "ImageId": 34,
+                    "URL": "https://meyersquared.com/images/Club12.png",
+                    "AltText": "Queens City"
+                }
+            ]
+        },
+        "Address": {
+            "Name": "Test Location",
+            "City": "Delaware",
+            "State": "OH",
+            "Address1": "123 Anywhere",
+            "Zip": 43015,
+            "Coordinates": "40.2828592,-83.1118049"
+        },
+        "Images": [
+            {
+                "ImageId": 24,
+                "URL": "https://images.squarespace-cdn.com/content/v1/588e439e1b10e309aeed2280/1549377422004-9SSG2INBP1HGR5OK4DIN/FacebookMockup2.png?format=1000w",
+                "AltText": "Queen's Court"
+            }
+        ],
+        "PrimaryContact": {
+            "DisplayName": "Dwain Crackel",
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/men/22.jpg",
+                    "AltText": null
+                }
+            ]
+        },
+        "TotalEvents": 4
+    }
+
+export default mockTournamentDetails;

package/src/stories/Atoms/BaseButton/BaseButton.vue

@@ -51,8 +51,10 @@ export default {
     },
     hoverColor: {
       type: String,
-      default: '',
-      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+      default: null,
+      validator: (value) => {
+        return value === null || ['primary', 'secondary', 'accent'].includes(value);
+      },
     },
     backgroundColor: {
       type: String,
@@ -85,7 +87,7 @@ export default {
     iconType: {
       type: String,
       default: 'fa-solid',
-      validator: (value) => ['fa-thin', 'fa-sharp'].includes(value),
+      validator: (value) => ['fa-brands','fa-solid','fa-thin', 'fa-sharp'].includes(value),
     },
     align: {
       type: String,

package/src/stories/Atoms/BaseText/BaseText.vue

@@ -23,7 +23,7 @@ export default {
     },
     hoverColor: {
       type: String,
-      default: '',
+      default: null,
     },
     weight: {
       type: String,

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

@@ -18,12 +18,12 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value),
+      validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].includes(value),
     },
     type: {
       type: String,
       default: 'fa-solid',
-      validator: (value) => ['fa-thin', 'fa-sharp'].includes(value),
+      validator: (value) => ['fa-thin', 'fa-sharp', 'fa-kit', 'fa-brands', 'fa-solid','fa-regular'].includes(value),
     }
   },
   computed: {
@@ -44,6 +44,8 @@ export default {
         xl: 'text-xl',
         '2xl': 'text-2xl',
         '3xl': 'text-3xl',
+        '4xl': 'text-5xl',
+        '5xl': 'text-5xl'
       };
       return sizeMap[this.size] || 'text-base';
     },

package/src/stories/Atoms/InputField/InputField.stories.js

@@ -3,15 +3,24 @@ import InputField from './InputField.vue';
 export default {
     title: 'Atoms/InputField',
     component: InputField,
-    args: {
-        type: 'text',
-        placeholder: 'Search',
-        modelValue: '',
-    },
     argTypes: {
-        type: { control: 'text' },
-        placeholder: { control: 'text' },
-        modelValue: { control: 'text' },
+        type: {
+            control: { type: 'text' },
+            defaultValue: 'text',
+        },
+        placeholder: {
+            control: { type: 'text' },
+            defaultValue: 'Search',
+        },
+        modelValue: {
+            control: { type: 'text' },
+            defaultValue: '',
+        },
+        color: {
+            control: { type: 'radio' },
+            options: ['primary', 'secondary'],
+            defaultValue: 'primary',
+        },
     },
 };
 
@@ -23,4 +32,14 @@ const Template = (args) => ({
     template: '<InputField v-bind="args" />',
 });
 
-export const Default = Template.bind({});
+export const Primary = Template.bind({});
+Primary.args = {
+    color: 'primary',
+    placeholder: 'Search in Primary Mode',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    color: 'secondary',
+    placeholder: 'Search in Secondary Mode',
+};

package/src/stories/Atoms/InputField/InputField.vue

@@ -2,8 +2,13 @@
   <input
       :type="type"
       :placeholder="placeholder"
-      v-bind="$attrs"
-      class="bg-black text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out"
+      :value="modelValue"
+      :class="[
+        color === 'primary'
+        ? 'bg-primary text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out'
+        : 'text-primary bg-white border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-primary px-2 hover:border-accent duration-300 ease-in-out'
+,
+      ]"
       @input="$emit('update:modelValue', $event.target.value)"
   />
 </template>
@@ -24,6 +29,19 @@ export default {
       type: String,
       default: '',
     },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary'].includes(value),
+    }
   },
+  computed: {
+    bgClass() {
+      return this.mode === 'primary' ? 'bg-primary text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out' : 'bg-secondary';
+    },
+    textClass() {
+      return this.mode === 'primary' ? 'text-primary' : 'text-primary';
+    }
+  }
 };
 </script>

package/src/stories/Molecules/Calendar/Calendar.stories.js

@@ -0,0 +1,39 @@
+import Calendar from './Calendar.vue';
+
+export default {
+    title: 'Molecules/Calendar/Calendar',
+    component: Calendar,
+    argTypes: {
+        'date-select': { action: 'date-select' },
+        tournaments: { control: 'array', description: 'List of tournaments with dates to highlight on the calendar' },
+    },
+};
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Calendar },
+    template: '<Calendar v-bind="$props" @date-select="date-select" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    tournaments: [
+        { id: 1, name: 'Tournament 1', date: '2024-09-15' },
+        { id: 2, name: 'Tournament 2', date: '2024-09-20' },
+        { id: 3, name: 'Tournament 3', date: '2024-09-25' },
+    ],
+};
+
+export const NoTournaments = Template.bind({});
+NoTournaments.args = {
+    tournaments: [],
+};
+
+export const DifferentMonth = Template.bind({});
+DifferentMonth.args = {
+    tournaments: [
+        { id: 1, name: 'Tournament A', date: '2024-10-05' },
+        { id: 2, name: 'Tournament B', date: '2024-10-12' },
+        { id: 3, name: 'Tournament C', date: '2024-10-20' },
+    ],
+};

package/src/stories/Molecules/Calendar/Calendar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="w-80 h-80 p-6 bg-primary rounded-lg shadow-md">
+    <!-- Header with Month and Navigation -->
+    <div class="flex justify-between items-center mb-4">
+      <BaseText tag="h2" size="sm" weight="normal" color="secondary">{{ monthYear }}</BaseText>
+
+      <div>
+        <button @click="prevMonth" class="text-secondary hover:text-accent mr-4">
+          &lt; <!-- Previous Month Button -->
+        </button>
+        <button @click="nextMonth" class="text-secondary hover:text-accent">
+          &gt; <!-- Next Month Button -->
+        </button>
+      </div>
+    </div>
+
+    <!-- Weekday Headers -->
+    <div class="grid grid-cols-7 gap-1 text-center font-bold text-sm text-gray-600 mb-2">
+      <div v-for="day in weekdays" :key="day">
+        <BaseText tag="p" size="xs" weight="bold" color="secondary">{{ day }}</BaseText>
+      </div>
+    </div>
+
+    <!-- Days Grid -->
+    <div class="grid grid-cols-7 gap-1 text-center">
+      <!-- Empty Cells for Days of the Previous Month -->
+      <div v-for="n in startDay" :key="'empty-' + n"></div>
+
+      <!-- Calendar Days -->
+      <div
+          v-for="(day, index) in daysInMonth"
+          :key="'day-' + day"
+          @click="dayClicked(day)"
+          class="flex justify-center items-center cursor-pointer p-2 rounded-full"
+          :class="{
+          'bg-accent text-white': hasTournament(day),
+          'hover:bg-gray-200': hasTournament(day),
+          'text-gray-400': !hasTournament(day)
+        }"
+      >
+        <BaseText tag="p" size="xs" weight="thin" color="secondary">{{ day }}</BaseText>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'Calendar',
+  components: {BaseText},
+  props: {
+    tournaments: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      currentMonth: new Date().getMonth(),
+      currentYear: new Date().getFullYear(),
+      weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    };
+  },
+  computed: {
+    daysInMonth() {
+      const days = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+      return Array.from({ length: days }, (_, i) => i + 1);
+    },
+    startDay() {
+      // Calculate the day of the week the month starts on (0=Sunday, 6=Saturday)
+      const start = new Date(this.currentYear, this.currentMonth, 1).getDay();
+      return start === 0 ? 6 : start - 1; // Adjust for Monday start
+    },
+    monthYear() {
+      return new Date(this.currentYear, this.currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' });
+    }
+  },
+  methods: {
+    hasTournament(day) {
+      // Check if the day has any tournaments
+      const date = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+      return this.tournaments.some(tournament => tournament.date === date);
+    },
+    dayClicked(day) {
+      if (this.hasTournament(day)) {
+        const selectedDate = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        this.$emit('date-select', selectedDate);
+      }
+    },
+    prevMonth() {
+      if (this.currentMonth === 0) {
+        this.currentMonth = 11;
+        this.currentYear--;
+      } else {
+        this.currentMonth--;
+      }
+    },
+    nextMonth() {
+      if (this.currentMonth === 11) {
+        this.currentMonth = 0;
+        this.currentYear++;
+      } else {
+        this.currentMonth++;
+      }
+    }
+  }
+};
+</script>

package/src/stories/Molecules/DropDowns/BasicDropDown.stories.js

@@ -0,0 +1,31 @@
+import BasicDropDown from './BasicDropDown.vue';
+
+export default {
+    title: 'Molecules/DropDowns/BasicDropDown',
+    component: BasicDropDown,
+    argTypes: {
+        items: {
+            control: { type: 'array' },
+            defaultValue: ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler']
+        },
+        selectedItem: {
+            control: { type: 'text' },
+            defaultValue: 'Longsword'
+        },
+        'item-select': { action: 'item-select' },
+    },
+};
+
+const Template = (args) => ({
+    components: { BasicDropDown },
+    setup() {
+        return { args };
+    },
+    template: '<BasicDropDown v-bind="args" @item-select="args[\'item-select\']" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    items: ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler'],
+    defaultSelectedItem: 'Longsword',
+};

package/src/stories/Molecules/DropDowns/BasicDropDown.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="relative w-48" ref="dropdownContainer">
+    <div @click="toggleDropdown" class="flex items-center cursor-pointer">
+      <BaseText
+          class="border-b-2 border-transparent hover:border-accent pb-1 duration-300 ease-in-out"
+          color="primary"
+          size="xs md"
+          tag="p"
+          weight="normal"
+      >
+        {{ selectedItem }}
+      </BaseText>
+      <Icon icon="fa-chevron-down" size="sm" color="primary" class="ml-4" />
+    </div>
+
+    <!-- Dropdown Menu -->
+    <div v-if="dropdownOpen" class="absolute top-full mt-1 w-48 bg-secondary border rounded-lg border-lineGrey shadow-xl z-20">
+      <ul>
+        <li v-for="item in items"
+            :key="item"
+            @click="selectWeapon(item)"
+            class="px-4 py-2 cursor-pointer hover:bg-hoverColor">
+          <BaseText color="primary" size="xs sm" tag="p" weight="bold">{{ item }}</BaseText>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from '../../Atoms/BaseText/BaseText.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
+
+export default {
+  name: 'BasicDropDown',
+  components: {
+    BaseText,
+    Icon
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler']
+    },
+    defaultSelectedItem: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      selectedItem: this.defaultSelectedItem,
+      dropdownOpen: false
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  methods: {
+    toggleDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+    selectWeapon(weapon) {
+      this.$emit('item-select', weapon);
+      this.selectedItem = weapon;
+      this.dropdownOpen = false;
+    },
+    handleClickOutside(event) {
+      if (this.dropdownOpen && !this.$refs.dropdownContainer.contains(event.target)) {
+        this.dropdownOpen = false;
+      }
+    }
+  }
+};
+</script>

package/src/stories/Molecules/MapBox/MapBox.stories.js

@@ -0,0 +1,30 @@
+import Mapbox from './Mapbox.vue';
+
+export default {
+    title: 'Molecules/Mapbox',
+    component: Mapbox,
+};
+
+const Template = (args) => ({
+    components: { Mapbox },
+    setup() {
+        return { args };
+    },
+    template: '<Mapbox v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
+    coordinates: { lat: 40.7128, lng: -74.006 },
+    zoom: 10,
+    isFullWidth: false,
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
+    coordinates: { lat: 40.7128, lng: -74.006 },
+    zoom: 10,
+    isFullWidth: true,
+};

package/src/stories/Molecules/MapBox/MapBox.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <GoogleMap
+        :api-key="apiKey"
+        :class="mapClasses"
+        mapId="M2-Map1"
+        :center="center"
+        :zoom="zoom"
+        :clickable-icons="false"
+        :streetViewControl="false"
+        :fullscreenControl="false"
+        :mapTypeControl="false"
+        :disable-default-ui="false"
+        @click="openMap()"
+    >
+      <AdvancedMarker :options="{ position: center }" />
+    </GoogleMap>
+  </div>
+</template>
+
+<script>
+import { GoogleMap, AdvancedMarker } from 'vue3-google-map';
+
+export default {
+  name: "Mapbox",
+  components: {
+    GoogleMap,
+    AdvancedMarker,
+  },
+  props: {
+    apiKey: {
+      type: String,
+      required: true,
+    },
+    coordinates: {
+      type: Object,
+      default: () => ({ lat: 39.9533483, lng: -82.8270003 }),
+    },
+    zoom: {
+      type: Number,
+      default: 13,
+    },
+    isFullWidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      center: this.coordinates,
+    };
+  },
+  computed: {
+    mapClasses() {
+      return this.isFullWidth ? 'w-full h-80 mx-auto' : 'w-72 h-80 mx-auto';
+    },
+  },
+  methods: {
+    openMap() {
+      window.open(
+          `https://www.google.com/maps/search/?api=1&query=${this.center.lat},${this.center.lng}`,
+          '_blank'
+      );
+    },
+  },
+};
+</script>

package/src/stories/Molecules/SearchBox/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative flex items-center w-full max-w-md">
-    <InputField v-model="searchQuery" placeholder="Search" />
+    <InputField v-model="searchQuery" placeholder="Search" color="primary"/>
     <Icon icon="fa-search" color="secondary" size="sm" class="absolute right-2" @click="onSearch" />
   </div>
 </template>
@@ -23,6 +23,7 @@ export default {
   methods: {
     onSearch() {
       console.log('Search Query:', this.searchQuery);
+      this.$emit('search', this.searchQuery);
     },
   },
 };

package/src/stories/Molecules/SearchBox/Searchbox.stories.js

@@ -1,7 +1,7 @@
 import SearchBox from './SearchBox.vue';
 
 export default {
-    title: 'Molecules/SearchBox',
+    title: 'Molecules/SearchBox/SearchBox',
     component: SearchBox,
     tags: ['autodocs'],
     argTypes: {

package/src/stories/Organisms/Cards/ArticleCard/ArticleCard.vue

@@ -5,11 +5,11 @@
   <div v-if="!isLoading" class="min-w-72 p-4 bg-secondary rounded-lg flex flex-col items-start">
     <img :src="image" alt="Article Image" class="w-full h-40 object-cover rounded-t-md mb-4" />
 
-    <BaseText tag="h3" size="xl" weight="semibold" class="mb-2">{{ articleTitle }}</BaseText>
+    <BaseText tag="h3" size="xl" weight="bold" class="mb-2">{{ articleTitle }}</BaseText>
     <BaseText tag="p" size="sm" weight="normal" class="mb-4 h-20">{{ truncatedDescription }}</BaseText>
 
     <a href="#" @click.prevent="onReadMore" class="w-full flex justify-end pr-2">
-      <BaseText tag="p" size="sm" weight="simibold" class="mb-4 border-b border-secondary hover:border-accent">Read More &rarr;</BaseText>
+      <BaseText tag="p" size="sm" weight="bold" class="mb-4 border-b border-secondary hover:border-accent">Read More &rarr;</BaseText>
     </a>
   </div>
 </template>
@@ -29,11 +29,16 @@ export default {
       type: Object,
       required: true,
     },
+    index: {
+      type: Number,
+      required: true,
+    },
     isLoading: {
       type: Boolean,
       default: false,
     }
   },
+  emits: ['grid-card-click'],
   computed: {
     image() {
       return this.data.image;
@@ -50,7 +55,7 @@ export default {
   },
   methods: {
     onReadMore() {
-      this.$emit('card-click', this.data);
+      this.$emit('grid-card-click', this.data);
     }
   }
 };