@dcrackel/meyersquaredui 1.0.43 → 1.0.45

package/src/stories/Organisms/Cards/ClubListCard/CLubListCard.stories.js

@@ -0,0 +1,31 @@
+import ClubDisplay from './ClubListCard.vue';
+import mockAllClubs from "../../../../mocks/getAllClubs.js";
+export default {
+    title: 'Organisms/Cards/ClubListCard',
+    component: ClubDisplay,
+    argTypes: {
+        club: {
+            control: 'object',
+            defaultValue: {
+                ClubName: 'Fencing Academy',
+                City: 'New York',
+                State: 'NY',
+                Description: 'A club with a rich history of training Olympic fencers. We provide lessons in saber, foil, and épée.',
+                membercount: 30,
+            },
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { ClubDisplay },
+    setup() {
+        return { args };
+    },
+    template: '<ClubDisplay v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data: mockAllClubs,
+};

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="w-full flex flex-row p-4 bg-white md:bg-cloud cursor-pointer border-b pb-6 mb-2 last:border-b-0" @click="onCardClick">
+    <div class="flex flex-col md:flex-row w-full">
+      <!-- Club Logo -->
+      <section class="flex flex-grow-0 flex-shrink-0 md:w-auto">
+        <img
+            :src="clubImage"
+            class="w-16 h-16 md:w-24 md:h-24 object-cover rounded-full mr-2 md:mr-4"
+            alt=""
+        />
+        <div class="flex flex-col ml-2 md:hidden">
+          <BaseText color="primary" tag="h2" size="lg" weight="bold">{{ data.Name }}</BaseText>
+          <BaseText color="primary" tag="h3" size="xs" weight="bold" class="mb-2">{{ data.Address.City }} | {{ data.Address.State }}</BaseText>
+        </div>
+      </section>
+
+      <!-- Club Info (Name, Location, Description) -->
+      <section class="flex-grow md:ml-4">
+          <BaseText color="primary" tag="h2" size="lg" weight="bold" class="hidden md:flex">{{ data.Name }}</BaseText>
+          <BaseText color="primary" tag="h3" size="xs" weight="bold" class="hidden md:flex justify-start">{{ data.Address.City }} | {{ data.Address.State }}</BaseText>
+          <BaseText color="primary" tag="p" size="xs" weight="normal" class="flex justify-start mt-2 md:text-sm" v-html="clubDescription"></BaseText>
+      </section>
+
+      <!-- Stats Section -->
+      <section class="flex flex-col mt-4 md:mt-0 md:w-48 md:flex-shrink-0">
+        <div class="flex md:justify-end">
+          <Icon icon="fa-users" size="xs" color="accent" class="mr-3" />
+          <BaseText color="primary" tag="h2" size="xs" weight="normal" class="md:text-sm w-40">
+            M2 Active Members: {{ data.MemberCount }}
+          </BaseText>
+        </div>
+        <div class="flex md:justify-end mt-2">
+          <Icon icon="fa-house-blank" type="fa-regular" size="xs" color="accent" class="mr-3" />
+          <BaseText color="primary" tag="h3" size="xs" weight="normal" class="md:text-sm w-40">
+            Hosted: {{ data.HostedTournamentsCount }} Tournaments
+          </BaseText>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import Icon from "../../../Atoms/Icon/Icon.vue";
+
+export default {
+  name: 'ClubListCard',
+  components: {Icon, BaseText},
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    clubDescription() {
+      return this.data.Description ? this.data.Description.slice(0, 120) : '';
+    },
+    clubImage() {
+      return this.data.Images.length > 0 && this.data.Images[0].URL
+          ? this.data.Images[0].URL
+          : 'https://via.placeholder.com/150';
+    },
+  },
+  methods: {
+    onCardClick() {
+      this.$emit('card-click', this.data);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,40 @@
+// ClubMember.stories.js
+import ClubMember from './ClubMember.vue';
+
+export default {
+    title: 'Organisms/Cards/ClubMember',
+    component: ClubMember,
+    argTypes: {
+        data: { control: 'object' },
+    },
+};
+
+const Template = (args) => ({
+    components: { ClubMember },
+    setup() {
+        return { args };
+    },
+    template: '<ClubMember v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data: {
+        DisplayName: 'John Doe',
+        M2Ratings: [{ WeaponId: 1, FormattedRating: 'A+' }],
+        ProfileImage: {
+            URL: 'https://via.placeholder.com/100',
+        },
+    },
+};
+
+export const NoRating = Template.bind({});
+NoRating.args = {
+    data: {
+        DisplayName: 'Jane Doe',
+        M2Ratings: [],
+        ProfileImage: {
+            URL: 'https://via.placeholder.com/100',
+        },
+    },
+};

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

@@ -0,0 +1,56 @@
+<template>
+  <section class="mx-auto pt-4 items-center hover:cursor-pointer text-center" @click="onCardClick">
+    <div class="flex justify-center mb-4">
+      <img :src="portrait" alt="User Portrait" class="w-[150px] h-[150px] rounded-full object-cover" />
+    </div>
+    <BaseText tag="h2" size="md" weight="bold" class="mb-2">{{ displayName }}</BaseText>
+    <BaseText tag="p" size="xs" weight="semibold" class="text-accent">M2: {{ m2Rating }}</BaseText>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import defaultPortrait from '../../../../assets/images/portrait1.png';
+
+export default {
+  name: 'ClubMember',
+  components: {
+    BaseText,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    portrait() {
+      return this.data.ProfileImage && this.data.ProfileImage.URL
+          ? this.data.ProfileImage.URL
+          : defaultPortrait;
+    },
+    displayName() {
+      return this.data.DisplayName || 'Unknown Member';
+    },
+    m2Rating() {
+      const m2RatingForWeapon = this.data.M2Ratings.find(rating => rating.WeaponId === 1);
+      return m2RatingForWeapon ? m2RatingForWeapon.FormattedRating : 'U';
+    },
+  },
+  methods: {
+    onCardClick() {
+      this.$emit('card-click', this.data);
+    }
+  }
+};
+</script>
+
+<style scoped>
+section {
+  max-width: 150px;
+}
+</style>

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

@@ -0,0 +1,38 @@
+import EventListCard from './EventListCard.vue';
+
+export default {
+    title: 'Organisms/Cards/EventListCard',
+    component: EventListCard,
+    argTypes: {
+        weaponIcon: {
+            control: 'object',
+        },
+        eventRating: {
+            control: 'text',
+        },
+        eventName: {
+            control: 'text',
+        },
+        fencerCount: {
+            control: 'number',
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { EventListCard },
+    setup() {
+        return { args };
+    },
+    template: '<EventListCard v-bind="args" />',
+});
+
+const data = { weaponIcon: "fa-saber",
+    eventRating: 'A',
+    eventName: 'Saber Tournament',
+    fencerCount: 32 }
+
+export const Default = Template.bind({});
+Default.args = {
+    data: data
+};

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="p-2 w-full border-b md:py-6 last:border-b-0">
+    <div class="flex space-x-4 w-full">
+      <section class="w-10 pt-1 md:pt-0">
+      <div class="h-10 w-10 rounded-full flex justify-center items-center border border-accent z-1">
+        <Icon :icon="weaponIcon" color="primary" type="fa-kit" size="3xl" class="-rotate-90 z-1"/>
+      </div>
+      <div v-if="data.Rating" class="h-6 w-6 bg-accent rounded-full -mt-4 ml-7 pt-1 z-10 absolute items-center">
+        <BaseText color="secondary" size="xs" weight="normal" class="text-center">{{ data.Rating }}</BaseText>
+      </div>
+      </section>
+      <div class="flex w-full flex-col md:flex-row">
+      <section class="flex flex-col pl-2 items-start flex-grow">
+        <BaseText color="primary" size="lg" weight="bold">{{ data.EventName }}</BaseText>
+        <div class="flex flex-col md:flex-row">
+          <div class="flex row mt-1 md:mt-0">
+          <icon icon="fa-calendar-day" color="accent" type="fa-regular" size="xs" class="mr-2"/>
+          <BaseText color="primary" size="xs" weight="normal">{{ data.Date }} | {{data.StartTime}}</BaseText>
+          </div>
+          <div class="flex row mt-1 md:mt-0">
+          <icon icon="fa-person" color="accent" type="fa-solid" size="xs" class="md:ml-6 mr-2"/>
+          <BaseText color="primary" size="xs" weight="normal">{{ data.ParticipantsCount }} Fencers Registered</BaseText>
+          </div>
+        </div>
+      </section>
+      <section class="w-full md:w-20 flex justify-end md:pt-3" >
+        <div class="flex border-b border-white hover:border-accent md:h-8">
+          <div class="hidden md:flex">
+            <BaseText color="primary" size="md" weight="normal" class="mr-3 pt-0.5">More</BaseText>
+            <Icon icon="fa-arrow-right" color="primary" type="fa-thin" size="xl"/>
+          </div>
+          <div class="flex md:hidden">
+            <BaseText color="primary" size="xs" weight="normal" class="mr-3">More</BaseText>
+            <Icon icon="fa-arrow-right" color="primary" type="fa-thin" size="xs" class="" />
+          </div>
+        </div>
+      </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from "../../../Atoms/Icon/Icon.vue";
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'EventListCard',
+  components: {BaseText, Icon},
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+    weaponIcon() {
+      const weapon = this.data.Weapon.Name;
+      return `fa-${weapon.toLowerCase()}`;
+    }
+  }
+};
+</script>
+

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

@@ -2,7 +2,7 @@
   <div v-if="isLoading" class="max-w-72 p-2 bg-secondary rounded-lg flex flex-col items-start">
     <FencerCardSkeleton />
   </div>
-  <section v-if="!isLoading" class="max-w-72 mr-4 md:mr-2 pt-4 items-center border border-secondary hover:border-accent rounded-lg" @click="onCardClick">
+  <section v-if="!isLoading" class="max-w-72 mr-4 md:mr-2 pt-4 items-center border border-secondary hover:border-accent hover:cursor-pointer rounded-lg" @click="onCardClick">
     <div class="flex flex-col m-auto justify-center mb-4 items-center w-[130px]">
       <img :src="portrait" alt="Fencer Portrait" class="w-[120px] h-[120px] md:w-32 md:h-32 rounded-full object-cover z-1 flex-shrink-0"  />
     </div>
@@ -48,6 +48,7 @@ export default {
     return {
     };
   },
+  emits: ['grid-card-click'],
   computed: {
     portrait() {
       return this.data.ProfileImage && this.data.ProfileImage.URL
@@ -64,13 +65,10 @@ export default {
       const m2RatingForWeapon = this.data.M2Ratings.find(rating => rating.WeaponId === 1);
       return m2RatingForWeapon ? m2RatingForWeapon.FormattedRating : 'U';
     },
-    hrRating() {
-      return this.data.HEMARatings && this.data.HEMARatings[0] ? this.data.HEMARatings[0].Rating : 0;
-    },
   },
   methods: {
     onCardClick() {
-      this.$emit('card-click', this.data);
+      this.$emit('grid-card-click', this.data);
     }
   }
 };

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

@@ -0,0 +1,30 @@
+import FencerListCard from './FencerListCard.vue';
+
+export default {
+    title: 'Organisms/Cards/FencerListCard',
+    component: FencerListCard,
+};
+
+const Template = (args) => ({
+    components: { FencerListCard },
+    setup() {
+        return { args };
+    },
+    template: '<FencerListCard v-bind="args" @card-click="onCardClick" />',
+    methods: {
+        onCardClick(fencer) {
+            alert(`Fencer selected: ${fencer.DisplayName}`);
+        },
+    },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data: {
+        DisplayName: 'John Doe',
+        Club: { Name: 'Awesome Fencing Club' },
+        M2Ratings: [{ WeaponId: 1, FormattedRating: 'A23' }],
+        ProfileImage: { URL: 'https://via.placeholder.com/150' },
+    },
+    isLoading: false,
+};

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

@@ -0,0 +1,86 @@
+<template>
+  <section v-if="!isLoading" class="flex items-center p-4 hover:cursor-pointer" @click="handleCardClicked">
+    <img :src="portrait" alt="Fencer Portrait" class="w-[50px] h-[50px] md:w-[70px] md:h-[70px] rounded-full object-cover z-1 flex-shrink-0 mr-4" />
+
+    <div class="flex flex-col justify-center flex-grow">
+      <section class="hidden md:flex flex-col">
+      <BaseText tag="h3" size="2xl" weight="bold">{{ displayName }}</BaseText>
+      <BaseText tag="p" size="md" weight="normal">{{ clubName }}</BaseText>
+      </section>
+      <section class="flex md:hidden flex-col">
+        <BaseText tag="h3" size="md" weight="bold">{{ displayName }}</BaseText>
+        <BaseText tag="p" size="xs" weight="normal">{{ clubName }}</BaseText>
+      </section>
+    </div>
+
+    <div class="flex items-center">
+      <section class="hidden md:flex">
+        <BaseText tag="p" size="sm" weight="normal" class="text-accent">Rating:</BaseText>
+        <BaseText tag="p" size="sm" weight="bold" class="text-accent ml-2"> {{ m2Rating }}</BaseText>
+      </section>
+      <section class="flex md:hidden">
+        <BaseText tag="p" size="xs" weight="normal" class="text-accent">Rating:</BaseText>
+        <BaseText tag="p" size="xs" weight="bold" class="text-accent ml-2"> {{ m2Rating}}</BaseText>
+      </section>
+    </div>
+  </section>
+
+  <!-- Loading State -->
+  <div v-if="isLoading" class="p-4 bg-secondary rounded-lg flex items-center">
+    <FencerCardSkeleton />
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import defaultPortrait from '../../../../assets/images/portrait1.png'
+import FencerCardSkeleton from "../Skeletons/FencingCardSkeleton.vue";
+
+export default {
+  name: 'FencerListCard',
+  components: {
+    FencerCardSkeleton,
+    BaseText,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: false,
+    },
+    isLast: {
+      type: Boolean,
+      required: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['grid-card-click'],
+  computed: {
+    portrait() {
+      return this.data.ProfileImage && this.data.ProfileImage.URL
+          ? this.data.ProfileImage.URL
+          : defaultPortrait;
+    },
+    displayName() {
+      return this.data.DisplayName;
+    },
+    clubName() {
+      return this.data.Club.Name;
+    },
+    m2Rating() {
+      return this.data.M2Ratings[0] ? this.data.M2Ratings[0].FormattedRating : 'U';
+    },
+  },
+  methods: {
+    handleCardClicked() {
+      this.$emit('grid-card-click', this.data);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,28 @@
+import PhotoCard from './PhotoCard.vue';
+import mockAllClubs from "../../../../mocks/getAllClubs.js";
+
+export default {
+    title: 'Organisms/Cards/PhotoCard',
+    component: PhotoCard,
+    argTypes: {
+        data: { control: 'object' },
+    },
+};
+
+const Template = (args) => ({
+    components: { PhotoCard },
+    setup() {
+        return { args };
+    },
+    template: '<PhotoCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data: mockAllClubs[0].Images[1]
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+    data: mockAllClubs[0].Images[2]
+};

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="w-[250px] h-[150px]">
+    <img :src="data.URL" :alt="data.AltText" class="object-cover w-full h-full" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PhotoCard',
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+

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

@@ -0,0 +1,40 @@
+import SocialMediaLinkCard from './SocialMediaLinkCard.vue';
+
+export default {
+    title: 'Organisms/Cards/SocialMediaLinkCard',
+    component: SocialMediaLinkCard,
+};
+
+const Template = (args) => ({
+    components: { SocialMediaLinkCard },
+    setup() {
+        return { args };
+    },
+    template: '<SocialMediaLinkCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    socialMedia: [
+        {
+            Type: 'Discord',
+            Link: 'https://discord.com',
+            Label: 'Join us on Discord',
+        },
+        {
+            Type: 'Instagram',
+            Link: 'https://instagram.com',
+            Label: 'Follow us on Instagram',
+        },
+        {
+            Type: 'Facebook',
+            Link: 'https://facebook.com',
+            Label: 'Like us on Facebook',
+        },
+        {
+            Type: 'Web',
+            Link: 'https://www.hemaalliance.com/event-calendar',
+            Label: 'Visit our Website',
+        },
+    ],
+};

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

@@ -0,0 +1,54 @@
+<template>
+  <aside class="md:w-64 m-2 flex flex-col mb-20">
+    <div v-for="(social, index) in socialMedia" :key="index" class="mb-4">
+      <BaseButton
+          :label="social.Label || social.Type"
+          size="md"
+          color="secondary"
+          border="gradient1"
+          weight="normal"
+          class="w-full h-16 pl-8"
+          :iconName="getIconName(social.Type)"
+          iconColor="secondary"
+          iconSize="xl"
+          :iconType="social.Type === 'Web' ? 'fa-solid' : 'fa-brands'"
+          align="between"
+          @click="openLink(social.Link)"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import BaseButton from '../../../Atoms/BaseButton/BaseButton.vue';
+
+export default {
+  name: 'SocialMediaLinkCard',
+  components: { BaseButton },
+  props: {
+    socialMedia: {
+      type: Array,
+      default: () => ([
+        { "Type": "Discord", "Link": "https://discord.com", "Label": null },
+        { "Type": "Instagram", "Link": "https://instagram.com", "Label": null },
+        { "Type": "Facebook", "Link": "https://facebook.com", "Label": null },
+        { "Type": "Web", "Link": "https://www.hemaalliance.com/event-calendar", "Label": null },
+      ]),
+    },
+  },
+  methods: {
+    getIconName(type) {
+      const iconMap = {
+        Discord: 'fa-discord',
+        Instagram: 'fa-instagram',
+        Facebook: 'fa-facebook',
+        Web: 'fa-globe',
+      };
+      return iconMap[type] || 'fa-globe'; // Default to globe icon if no match
+    },
+    openLink(link) {
+      window.open(link, '_blank');
+    },
+  },
+};
+</script>

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

@@ -1,7 +1,7 @@
 import TournamentCard from './TournamentCard.vue';
 import mockTournaments from "../../../../mocks/getTournamentsMock.js";
 export default {
-    title: 'Organisms/Cards/TournamentCard',
+    title: 'Organisms/Cards/Tournament/TournamentCard',
     component: TournamentCard,
 };
 

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

@@ -2,7 +2,7 @@
   <div v-if="isLoading" class="max-w-80 md:w-full mb-8">
     <TournamentCardSkeleton />
   </div>
-  <div v-if="!isLoading" class="max-w-80 md:w-full mb-8 border border-secondary hover:border-accent p-2 rounded-lg" @click="onCardClick">
+  <div v-if="!isLoading" class="max-w-80 md:w-full mb-8 border border-secondary hover:border-accent hover:cursor-pointer p-2 rounded-lg" @click="onCardClick">
     <!-- Desktop Version -->
     <section class="hidden md:block">
       <img
@@ -74,6 +74,10 @@ export default {
       type: Object,
       required: true,
     },
+    index: {
+      type: Number,
+      required: false,
+    },
     isLoading: {
       type: Boolean,
       default: false,
@@ -84,6 +88,7 @@ export default {
       isImageError: false
     };
   },
+  emits: ['grid-card-click'],
   computed: {
     image() {
       return !this.isImageError && this.data.ImagesURLs && this.data.ImagesURLs.length > 0
@@ -123,7 +128,7 @@ export default {
       this.isImageError = true;
     },
     onCardClick() {
-      this.$emit('card-click', this.data);
+      this.$emit('grid-card-click', this.data);
     }
   }
 };