@dcrackel/meyersquaredui 1.0.42 → 1.0.44

package/src/stories/Organisms/Cards/TournamentDetails/TournamentDetails.stories.js

@@ -0,0 +1,35 @@
+import TournamentDetails from './TournamentDetails.vue';
+
+export default {
+    title: 'Organisms/Cards/Tournament/TournamentDetails',
+    component: TournamentDetails,
+    argTypes: {
+        imageSrc: { control: 'text', description: 'URL of the tournament image' },
+        description: { control: 'text', description: 'HTML description of the tournament' },
+    },
+};
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { TournamentDetails },
+    template: `<TournamentDetails v-bind="$props" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    imageSrc: 'https://via.placeholder.com/800x500',
+    description: `
+    <h2>Welcome to the Tournament!</h2>
+    <p>This is a sample description of the tournament. It can contain HTML elements like <strong>bold</strong>, <em>italic</em>, and even <a href="#">links</a>.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subheac is the text that can go up to 500 characters or more.</p>
+  `,
+};
+
+export const WithCustomImage = Template.bind({});
+WithCustomImage.args = {
+    imageSrc: 'https://example.com/custom-image.jpg',
+    description: `
+    <h2>Special Event Details</h2>
+    <p>This tournament has a custom image and a unique description. Feel free to add more information here.</p>
+  `,
+};

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

@@ -0,0 +1,59 @@
+<template>
+  <section class="w-full max-w-4xl mx-auto md:p-4">
+    <div class="w-full h-96 md:mb-4">
+      <img :src="imageSrc" alt="Tournament Image" class="w-full h-full object-cover md:rounded-lg" />
+    </div>
+
+    <div class="flex justify-end items-center w-full md:h-10 rounded-md p-2">
+      <BaseText color="primary" size="md" weight="normal" class="mr-2">Share</BaseText>
+      <a
+          v-for="link in shareLinks"
+          :key="link.name"
+          :href="link.url"
+          target="_blank"
+          class="mx-2 hover:text-accent transition duration-200"
+      >
+        <Icon type="fa-brands" color="primary" :icon="link.icon" size="md" />
+      </a>
+    </div>
+
+    <div class="w-full flex md:py-4 pb-4 md:pb-10">
+      <BaseText :color="'primary'" size="xl" tag="h3" weight="bold" class="pl-2">Details</BaseText>
+    </div>
+    <div class="bg-white p-4 m-2 rounded-lg" >
+      <div v-html="description" class="text-base text-gray-800"></div>
+    </div>
+  </section>
+</template>
+
+<script>
+import Icon from '../../../Atoms/Icon/Icon.vue';
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'TournamentDetails',
+  components: {
+    BaseText,
+    Icon
+  },
+  props: {
+    imageSrc: {
+      type: String,
+      default: 'https://via.placeholder.com/800x500', // Placeholder image if no image is provided
+    },
+    description: {
+      type: String,
+      default: '<p>This is a sample tournament description. It can be long and may contain HTML.</p>',
+    },
+  },
+  data() {
+    return {
+      shareLinks: [
+        { name: 'Facebook', url: 'https://facebook.com', icon: 'fa-facebook' },
+        { name: 'Instagram', url: 'https://twitter.com', icon: 'fa-instagram' },
+        { name: 'Discord', url: 'https://linkedin.com', icon: 'fa-discord' },
+      ],
+    };
+  },
+};
+</script>

package/src/stories/Organisms/Cards/TournamentListCard/TournamentListCard.stories.js

@@ -0,0 +1,26 @@
+import TournamentListCard from './TournamentListCard.vue';
+import mockTournaments from "../../../../mocks/getTournamentsMock.js";
+export default {
+    title: 'Organisms/Cards/Tournament/TournamentListCard',
+    component: TournamentListCard,
+};
+
+const Template = (args) => ({
+    components: { TournamentListCard },
+    setup() {
+        return { args };
+    },
+    template: '<TournamentListCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data: mockTournaments[1],
+    isLoading: false
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+    data: mockTournaments[3],
+    isLoading: true
+};

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

@@ -0,0 +1,103 @@
+<template>
+  <section class="flex flex-col md:bg-white w-full border-b pb-2 mb-2 pt-1 cursor-pointer last:border-b-0">
+    <div class="flex">
+      <img :src="tournamentImage" :alt="imageAltText" class="w-24 h-16 md:w-32 md:h-20 object-cover rounded mr-2 md:mr-4 flex-shrink-0" />
+      <div class="flex flex-col">
+        <div class="flex items-center mb-2"><BaseText color="primary" tag="h2" size="2xl" weight="bold">{{ tournamentName }}</BaseText></div>
+        <div class="hidden md:flex items-center text-sm text-gray-600 mb-2"><BaseText color="primary" tag="p" size="lg" weight="bold">{{ addressName }}</BaseText></div>
+      </div>
+    </div>
+
+    <!-- Participants and Date Section -->
+    <div class="hidden md:flex mt-3">
+      <div class="flex flex-row w-full">
+        <div class="flex items-center mr-10">
+          <Icon icon="fa-users" size="sm" color="accent" class="mr-4" />
+          <BaseText color="primary" tag="p" size="sm" weight="normal">{{ participants }} signed up</BaseText>
+        </div>
+        <div class="flex items-center">
+          <Icon icon="fa-calendar" size="sm" color="accent" class="mr-4" />
+          <BaseText color="primary" tag="p" size="sm" weight="normal">{{ startDate }} | {{ startTime }}</BaseText>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Participants and Date Section -->
+    <div class="flex flex-col md:hidden mt-2">
+      <div class="flex items-center pb-2">
+        <BaseText color="primary" tag="p" size="sm" weight="bold">{{ addressName }}</BaseText>
+      </div>
+      <div class="flex flex-row">
+        <div class="flex items-center mr-4">
+          <Icon icon="fa-users" size="sm" color="accent" class="mr-2" />
+          <BaseText color="primary" tag="p" size="xs" weight="normal">{{ participants }} signed up</BaseText>
+        </div>
+        <div class="flex items-center">
+          <Icon icon="fa-calendar" size="sm" color="accent" class="mr-2" />
+          <BaseText color="primary" tag="p" size="xs" weight="normal">{{ startDate }} | {{ startTime }}</BaseText>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import Icon from '../../../Atoms/Icon/Icon.vue';
+
+export default {
+  name: 'TournamentListCard',
+  components: {
+    BaseText,
+    Icon,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    tournamentName() {
+      return this.data.Name || 'Tournament Name';
+    },
+    addressName() {
+      return this.data.Address ? `${this.data.Address.Name}, ${this.data.Address.City}, ${this.data.Address.State}` : 'Address Name';
+    },
+    startDate() {
+      return this.formatDate(this.data.StartDate);
+    },
+    startTime() {
+      return '00:00 AM'; // Replace with actual time if available in the data object
+    },
+    tournamentImage() {
+      return this.data.ImagesURLs || 'https://via.placeholder.com/150';
+    },
+    imageAltText() {
+      return this.data.ImagesAltTexts || 'Tournament Image';
+    },
+    isBookmarked() {
+      return false;
+    },
+    participants() {
+      return this.data.Participants || 0;
+    },
+  },
+  methods: {
+    toggleBookmark() {
+      this.$emit('toggle-bookmark', !this.isBookmarked);
+    },
+    formatDate(dateString) {
+      // Convert the date from the format in your data object to a more readable format (e.g., MM/DD/YYYY)
+      const options = { year: 'numeric', month: 'short', day: 'numeric' };
+      const date = new Date(dateString);
+      return date.toLocaleDateString(undefined, options);
+    },
+  },
+};
+</script>

package/src/stories/Organisms/Column/HostColumn.stories.js

@@ -0,0 +1,39 @@
+import HostColumn from './HostColumn.vue';
+
+export default {
+    title: 'Organisms/Columns/HostColumn',
+    component: HostColumn,
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { HostColumn },
+    props: Object.keys(argTypes),
+    template: '<HostColumn v-bind="$props" @rules-click="onRulesClick" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    organizerName: 'Bob Smith',
+    organizerPortrait: 'https://via.placeholder.com/150',
+    fencersGoing: 10,
+    bookmarksCount: 25,
+    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
+};
+
+export const WithFewFencers = Template.bind({});
+WithFewFencers.args = {
+    organizerName: 'Jane Doe',
+    organizerPortrait: 'https://via.placeholder.com/150',
+    fencersGoing: 2,
+    bookmarksCount: 5,
+    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
+};
+
+export const NoFencersOrBookmarks = Template.bind({});
+NoFencersOrBookmarks.args = {
+    organizerName: 'Mark Johnson',
+    organizerPortrait: 'https://via.placeholder.com/150',
+    fencersGoing: 0,
+    bookmarksCount: 0,
+    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
+};

package/src/stories/Organisms/Column/HostColumn.vue

@@ -0,0 +1,105 @@
+<template>
+  <aside class="md:w-80 m-2 flex flex-col mb-20">
+    <section class="bg-white p-4 rounded-lg">
+    <div class="flex flex-col space-y-4">
+      <div class="flex items-center">
+        <img
+            :src="organizerPortrait"
+            alt="Event Organizer"
+            class="w-16 h-16 rounded-full object-cover"
+        />
+        <div class="pl-2">
+          <BaseText color="primary" size="xs" weight="normal">Event Organizer:</BaseText>
+          <BaseText color="primary" size="md" weight="bold" class="mt-1">{{ organizerName }}</BaseText>
+        </div>
+      </div>
+
+      <!-- Icons for Fencers and Bookmarks -->
+      <div class="flex justify-between space-x-8 w-full px-4">
+        <div class="flex items-center space-x-2">
+          <Icon icon="fa-users" color="primary" size="sm" />
+          <BaseText color="primary" size="sm">{{ fencersGoing }} Going</BaseText>
+        </div>
+        <div class="flex items-center space-x-2">
+          <Icon icon="fa-bookmark" color="primary" size="sm" />
+          <BaseText color="primary" size="sm">{{ bookmarksCount }} Bookmarked</BaseText>
+        </div>
+      </div>
+
+      <div class="flex justify-center">
+      <BaseButton
+          backgroundColor="secondary"
+          color="primary"
+          border="primary"
+          size="sm"
+          label="Rules and Documents"
+          class="w-full"
+          @click="onRulesClick"
+      />
+      </div>
+    </div>
+    </section>
+
+    <section class="mt-10 bg-white p-4 rounded-lg">
+      <div class="flex mb-4">
+        <div class="mr-3">
+          <Icon icon="fa-map-marker-alt" color="accent" size="3xl" />
+        </div>
+        <div>
+          <BaseText color="primary" size="sm" weight="normal" class="">{{ address.Name }}</BaseText>
+          <BaseText color="primary" size="sm" weight="bold" class="">{{ address.Address1 }}, {{ address.City }}  {{ address.State }}</BaseText>
+        </div>
+      </div>
+      <Mapbox :apiKey="apiKey" :coordinates="getCordinates" />
+    </section>
+  </aside>
+</template>
+
+<script>
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
+import Icon from "../../Atoms/Icon/Icon.vue";
+import Mapbox from "../../Molecules/MapBox/MapBox.vue";
+
+export default {
+  name: 'HostColumn',
+  components: {Mapbox, BaseText, BaseButton, Icon },
+  props: {
+    organizerName: {
+      type: String,
+      default: 'Bob Smith',
+    },
+    address: {
+      type: [String,Object],
+      default: {"Name": "Test Location", "City": "Delaware", "State": "OH", "Address1": "123 Anywhere", "Zip": 43015, "Coordinates": "40.2828592,-83.1118049"},
+    },
+    organizerPortrait: {
+      type: String,
+      default: 'https://via.placeholder.com/150',
+    },
+    fencersGoing: {
+      type: Number,
+      default: 0,
+    },
+    bookmarksCount: {
+      type: Number,
+      default: 0,
+    },
+    apiKey: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    getCordinates() {
+      const [lat, lng] = this.address.Coordinates.split(',').map(Number);
+      return { lat, lng };
+    }
+  },
+  methods: {
+    onRulesClick() {
+      this.$emit('rules-click');
+    }
+  },
+};
+</script>

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="max-w-[1200px] mx-auto ">
-    <div class="w-full flex justify-center py-4 md:pb-10 md:pt-14">
-      <BaseText color="primary" size="2xl" tag="h3" weight="bold">{{title}}</BaseText>
+  <section :class="topClasses">
+    <div :class="headerClasses">
+      <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ title }}</BaseText>
     </div>
     <div :class="gridClasses">
       <component
@@ -11,10 +11,11 @@
           :data="item"
           :index="index"
           :isLoading="isLoading"
+          @grid-card-click="handleCardClick"
       />
     </div>
   </section>
-  <div class="w-full flex justify-center pb-28 pt-10 md:pt-14">
+  <div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
     <BaseButton
         backgroundColor="secondary"
         border="primary"
@@ -22,13 +23,15 @@
         color="primary"
         hoverColor="secondary"
         :label="moreButtonLabel"
+        @click="onClick"
     />
   </div>
 </template>
 
 <script>
-import BaseText from "../../Atoms/BaseText/BaseText.vue";
 import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import {markRaw} from "vue";
 
 export default {
   name: 'GridLayout',
@@ -48,6 +51,7 @@ export default {
     cardComponent: {
       type: [Object, String],
       required: true,
+      default: () => markRaw({}),
     },
     items: {
       type: Array,
@@ -62,16 +66,34 @@ export default {
       type: Boolean,
       default: false,
     },
+    whiteStyle: {
+      type: Boolean,
+      default: false,
+    },
     isLoading: {
       type: Boolean,
       default: false,
     },
   },
+  emits: ['grid-click', 'grid-card-click'],
   computed: {
+    topClasses() {
+      let retClass = "max-w-[1200px] mx-auto overflow-x-auto";
+      if (this.whiteStyle) retClass = `w-full md:mr-10 mt-10`;
+      return retClass;
+    },
+    headerClasses() {
+      let retClasses = "w-full flex py-4 md:pb-10 ml-2 md:ml-0";
+      if (!this.whiteStyle) retClasses = `${retClasses} justify-center`;
+      return retClasses;
+    },
     gridClasses() {
       let baseClasses = "md:grid md:gap-x-6 md:gap-y-4";
       if (this.mobileHorizontal) {
-        baseClasses = `${baseClasses} flex overflow-x-auto`;
+        baseClasses = `flex space-x-4 md:grid md:gap-x-6 md:gap-y-4`;
+      }
+      if (this.whiteStyle) {
+        baseClasses = `bg-white p-2 mx-2 md:mx-0 rounded-lg`;
       }
 
       let columnClasses;
@@ -99,5 +121,13 @@ export default {
       return `${baseClasses} ${columnClasses}`;
     },
   },
+  methods: {
+    onClick() {
+      this.$emit('grid-click');
+    },
+    handleCardClick(itemData) {
+      this.$emit('grid-card-click', itemData);
+    },
+  },
 };
 </script>

package/src/stories/Organisms/Headers/ClubHeader/ClubHeader.stories.js

@@ -0,0 +1,21 @@
+import ClubHeader from './ClubHeader.vue';
+
+export default {
+    title: 'Organisms/Headers/ClubHeader',
+    component: ClubHeader
+};
+
+const Template = (args) => ({
+    components: { ClubHeader },
+    setup() {
+        return { args };
+    },
+    template: '<ClubHeader v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    searchQuery: '',
+    selectedDistance: 'Any Distance',
+    selectedWeapon: 'Longsword',
+};

package/src/stories/Organisms/Headers/ClubHeader/ClubHeader.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex items-center justify-center space-x-4 bg-white py-6">
+    <!-- Search Bar -->
+    <div class="flex items-center pb-1.5 mr-10">
+      <BaseText class="mr-2" color="primary" size="xs md" tag="p" weight="bold">
+        Search:
+      </BaseText>
+      <InputField type="text" placeholder="By Name" color="secondary" v-model="searchQuery" class="px-2 py-1 focus:outline-none" />
+    </div>
+
+    <!-- Distance Dropdown -->
+    <div class="flex items-center mr-10">
+      <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">
+        Within:
+      </BaseText>
+      <Dropdown :items="distances" :defaultSelectedItem="selectedDistance" @distance-select="selectDistance" />
+    </div>
+
+    <!-- Weapon Dropdown -->
+    <div class="flex items-center">
+      <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">
+        By Weapon:
+      </BaseText>
+      <Dropdown :items="weapons" :defaultSelectedItem="selectedWeapon" @weapon-select="selectWeapon" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import Dropdown from '../../../Molecules/DropDowns/BasicDropDown.vue';
+import InputField from "../../../Atoms/InputField/InputField.vue";
+export default {
+  name: 'ClubHeader',
+  components: {
+    InputField,
+    BaseText,
+    Dropdown
+  },
+  data() {
+    return {
+      searchQuery: '',
+      distances: ['Any Distance', '25 miles', '50 miles', '75 miles', '100 miles'],
+      selectedDistance: 'Any Distance',
+      weapons: ['Longsword', 'Saber', 'Rapier', 'Smallsword'],
+      selectedWeapon: 'Longsword'
+    };
+  },
+  methods: {
+    selectDistance(distance) {
+      this.selectedDistance = distance;
+    },
+    selectWeapon(weapon) {
+      this.selectedWeapon = weapon;
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Headers/LeaderboardHeader/LeaderboardHeader.stories.js

@@ -0,0 +1,29 @@
+import LeaderboardHeader from './LeaderboardHeader.vue';
+
+export default {
+    title: 'Organisms/Headers/LeaderboardHeader',
+    component: LeaderboardHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { LeaderboardHeader },
+    setup() {
+        return { args };
+    },
+    template: `
+    <LeaderboardHeader 
+      v-bind="args" 
+      @weapon-selected="onWeaponSelected" 
+    />
+  `,
+    methods: {
+        onWeaponSelected(weapon) {
+            alert(`Weapon selected: ${weapon}`);
+        },
+    },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    weapons: ['Longsword', 'Rapier', 'Saber', 'Sword & Buckler', 'Dagger'], // Sample weapons list
+};

package/src/stories/Organisms/Headers/LeaderboardHeader/LeaderboardHeader.vue

@@ -0,0 +1,59 @@
+<template>
+  <header class="w-full bg-white py-4 flex justify-center h-24">
+    <section class="container flex justify-between items-center w-full md:w-3/4 overflow-x-auto md:overflow-x-visible">
+      <nav class="flex space-x-4 w-full justify-start md:justify-around whitespace-nowrap mx-4 md:mx-0">
+        <div v-for="weapon in weapons" :key="weapon" @click="onWeaponClick(weapon)" class="cursor-pointer">
+          <BaseText
+              color="primary"
+              size="md"
+              tag="p"
+              weight="normal"
+              @click="onWeaponClick(weapon)"
+              class="cursor-pointer border-b-2 pb-1 duration-300 ease-in-out px-4 md:p-0"
+              :class="{
+            'border-accent': selectedWeapon === weapon,
+            'hover:border-accent': selectedWeapon !== weapon,
+            'border-transparent px-4 md:p-0': selectedWeapon !== weapon
+          }"
+          >
+            {{ weapon }}
+          </BaseText>
+        </div>
+      </nav>
+
+    </section>
+  </header>
+</template>
+
+<script>
+import logo from '../../../../assets/images/m2.png';
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import BaseButton from '../../../Atoms/BaseButton/BaseButton.vue';
+
+export default {
+  name: 'LeaderboardHeader',
+  components: {
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    weapons: {
+      type: Array,
+      required: true,
+      default: () => ['Longsword', 'Rapier', 'Saber'],
+    },
+  },
+  data() {
+    return {
+      logo: logo,
+      selectedWeapon: 'Longsword',
+    };
+  },
+  methods: {
+    onWeaponClick(weapon) {
+      this.selectedWeapon = weapon;
+      this.$emit('weapon-selected', weapon);
+    }
+  },
+};
+</script>

package/src/stories/Organisms/Headers/{Header.stories.js → PageHeader/PageHeader.stories.js}

@@ -1,7 +1,7 @@
-import Header from './Header.vue';
+import Header from './PageHeader.vue';
 
 export default {
-    title: 'Organisms/Headers/Header',
+    title: 'Organisms/Headers/PageHeader',
     component: Header,
 };