@dcrackel/meyersquaredui 1.0.42 → 1.0.44

package/src/stories/Templates/ClubDetailPage/ClubDetailPage.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="m-0 w-full bg-secondary">
+    <Header />
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+
+    <div class="w-full flex justify-center">
+      <div class="flex flex-col md:flex-row w-full max-w-7xl mt-16 mb-20">
+
+        <section class="w-full md:w-2/3 pr-8">
+          <div class="mb-16">
+            <BaseText size="xl" color="primary" weight="bold" class="mb-10">{{ club.Name }}</BaseText>
+            <BaseText size="md" color="primary" weight="normal" v-html="club.Description"></BaseText>
+          </div>
+
+          <div class="w-full mb-16">
+            <BaseText size="xl" color="primary" weight="bold" class="mb-10">Location</BaseText>
+            <Mapbox
+                :apiKey="apiKey"
+                :center="club.Location"
+                :zoom="12"
+                :isFullWidth="true"
+            />
+          </div>
+
+          <div class="w-full mb-16 hidden md:block">
+            <GridLayout
+                :cardComponent="PhotoCard"
+                :items="club.Images"
+                :maxColumns="6"
+                :isLoading="clubsIsLoading"
+                :mobile-horizontal="true"
+                :whiteStyle="false"
+                title="Images"
+                moreButtonLabel=""
+            />
+          </div>
+
+          <div class="w-full mb-20 hidden md:block">
+            <GridLayout
+                :cardComponent="ClubMember"
+                :items="club.People"
+                :maxColumns="6"
+                :isLoading="clubsIsLoading"
+                :whiteStyle="false"
+                title="Club Members"
+                moreButtonLabel=""
+            />
+          </div>
+        </section>
+
+        <section class="w-full md:w-1/3 mt-8 md:mt-0 flex flex-col justify-start">
+          <SocialMediaLinkCard :socialMedia="club.SocialMedia"/>
+        </section>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+
+<script>
+import Header from "../../Organisms/Headers/PageHeader/PageHeader.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
+import TournamentBanner from "../../Organisms/HeroBanners/Tournaments/TournamentBanner.vue";
+import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import ClubMember from "../../Organisms/Cards/ClubMember/ClubMember.vue";
+import PhotoCard from "../../Organisms/Cards/PhotoCard/PhotoCard.vue";
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import Mapbox from "../../Molecules/MapBox/MapBox.vue";
+import SocialMediaLinkCard from "../../Organisms/Cards/SocialMediaLinkCard/SocialMediaLinkCard.vue";
+
+export default {
+  name: 'ClubDetailPage',
+  components: {
+    SocialMediaLinkCard,
+    Mapbox,
+    BaseText,
+    PhotoCard,
+    ClubMember,
+    GridLayout,
+    Header,
+    Footer,
+    TournamentBanner
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    },
+    club: {
+      type: Object,
+      default: () => ({})
+    },
+    clubsIsLoading: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    PhotoCard() {
+      return PhotoCard
+    },
+    ClubMember() {
+      return ClubMember
+    },
+    ClubListCard() {
+      return ClubListCard
+    }
+
+  },
+  data() {
+    return {
+      apiKey: "AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q"
+    }
+  }
+}
+
+</script>

package/src/stories/Templates/ClubListPage/ClubListPage.stories.js

@@ -0,0 +1,43 @@
+import ClubListPage from './ClubListPage.vue';
+import mockAllClubs from "../../../mocks/getAllClubs.js";
+
+export default {
+    title: 'Templates/ClubListPage',
+    component: ClubListPage,
+    argTypes: {
+        title: { control: 'text' },
+        description: { control: 'text' },
+        imageSrc: { control: 'text' },
+        tournaments: { control: 'array' },
+        tournamentsIsLoading: { control: 'boolean' },
+    },
+};
+
+const Template = (args) => ({
+    components: { ClubListPage },
+    setup() {
+        return { args };
+    },
+    template: '<ClubListPage v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Local Clubs',
+    description: 'Explore clubs near you<br> and join the community!',
+    imageSrc: 'https://meyersquared.com/images/banners/largebanner03.jpg',
+    clubs: mockAllClubs,
+    clubsIsLoading: false,
+};
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+    ...Default.args,
+    tournamentsIsLoading: true,
+};
+
+export const NoTournaments = Template.bind({});
+NoTournaments.args = {
+    ...Default.args,
+    tournaments: [],
+};

package/src/stories/Templates/ClubListPage/ClubListPage.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="m-0 w-full bg-secondary">
+    <Header />
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <ClubHeader />
+
+    <div class="w-full flex justify-center">
+      <section class="w-full md:w-2/3 mb-20 flex">
+    <GridLayout
+        :cardComponent="ClubListCard"
+        :items="clubs"
+        :maxColumns="1"
+        :isLoading="clubsIsLoading"
+        :whiteStyle="true"
+        moreButtonLabel="See All Tournaments"
+        title=""
+    />
+      </section>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+
+<script>
+import TournamentBanner from "../../Organisms/HeroBanners/Tournaments/TournamentBanner.vue";
+import Header from "../../Organisms/Headers/PageHeader/PageHeader.vue";
+import FencerCard from "../../Organisms/Cards/FencerCard/FencerCard.vue";
+import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
+import TournamentHeader from "../../Organisms/Headers/TournamentHeader/TournamentHeader.vue";
+import ClubHeader from "../../Organisms/Headers/ClubHeader/ClubHeader.vue";
+import ClubListCard from "../../Organisms/Cards/ClubListCard/ClubListCard.vue";
+
+
+export default {
+  name: 'ClubListPage',
+  components: {
+    ClubHeader,
+    ClubListCard,
+    TournamentHeader,
+    Footer,
+    GridLayout,
+    FencerCard,
+    Header,
+    TournamentBanner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    },
+    clubs: {
+      type: Array,
+      default: () => []
+    },
+    clubsIsLoading: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    ClubListCard() {
+      return ClubListCard
+    }
+
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+
+</script>

package/src/stories/Templates/HomePage/HomePage.stories.js

@@ -3,7 +3,7 @@ import mockTournaments from "../../../mocks/getTournamentsMock.js";
 import mockTopFencers from "../../../mocks/getTopFencers.js";
 import mockArticles from "../../../mocks/getArticles.js";
 export default {
-    title: 'Templates/TestLayoutPage',
+    title: 'Templates/HomePageLayout',
     component: HomePage,
     argTypes: {
         'button-click': { action: 'button-click' },
@@ -16,10 +16,10 @@ export default {
 
 export const Default = {
     args: {
-        title: 'Discover, Compete, Connect',
-        description: 'Find tournaments, explore clubs, and track your progress.',
+        title: 'Find your next HEMA Tournament!',
+        description: '',
         buttonLabel: 'Find Out More',
-        imageSrc: 'https://meyersquared.com/images/Banner2.png',
+        imageSrc: 'https://meyersquared.com/images/banners/largebanner01.jpg',
         tournaments: mockTournaments,
         topFencers: mockTopFencers,
         articles: mockArticles,
@@ -29,9 +29,9 @@ export const Default = {
 export const AllLoading = {
     args: {
         title: 'Discover, Compete, Connect',
-        description: 'Find tournaments, explore clubs, and track your progress.',
+        description: '',
         buttonLabel: 'Find Out More',
-        imageSrc: 'https://meyersquared.com/images/Banner2.png',
+        imageSrc: 'https://meyersquared.com/images/banners/largebanner01.jpg',
         tournaments: mockTournaments,
         topFencers: mockTopFencers,
         articles: mockArticles,

package/src/stories/Templates/HomePage/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-0 w-full bg-secondary">
-    <Header />
+    <PageHeader @changePage="changePage" />
     <HeroBanner :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc" />
     <GridLayout
         :cardComponent="TournamentCard"
@@ -13,7 +13,7 @@
     <SingleButtonBanner
         buttonLabel="Learn More"
         description="Look for a Club? <br> We can help."
-        imageUrl="https://via.placeholder.com/1200x400"
+        imageUrl="https://meyersquared.com/images/banners/largebanner03.jpg"
     />
     <GridLayout
         :cardComponent="FencerCard"
@@ -23,6 +23,7 @@
         :isLoading="topFencersIsLoading"
         moreButtonLabel="Leaderboards"
         title="Top Fencers"
+        @grid-card-click="handleGridCardClick"
     />
     <DoubleButtonBanner title="How Does Meyer Squared work?" button-label-two="Run a tournament" button-label-one="Submit Results" image-src="" />
     <GridLayout
@@ -38,10 +39,9 @@
   </div>
 </template>
 
-
 <script>
 import HeroBanner from "../../Organisms/HeroBanners/HomePage/HeroBanner.vue";
-import Header from "../../Organisms/Headers/Header.vue";
+import PageHeader from "../../Organisms/Headers/PageHeader/PageHeader.vue";
 import TournamentCard from "../../Organisms/Cards/TournamentCard/TournamentCard.vue";
 import FencerCard from "../../Organisms/Cards/FencerCard/FencerCard.vue";
 import ArticleCard from "../../Organisms/Cards/ArticleCard/ArticleCard.vue";
@@ -49,6 +49,7 @@ import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
 import SingleButtonBanner from "../../Organisms/SectionBanners/SingleButtonBanner/SingleButtonBanner.vue";
 import DoubleButtonBanner from "../../Organisms/SectionBanners/DoubleButtonBanner/DoubleButtonBanner.vue";
 import Footer from "../../Organisms/Footer/Footer.vue";
+import { markRaw } from 'vue';
 
 export default {
   name: 'HomePage',
@@ -57,10 +58,9 @@ export default {
     DoubleButtonBanner,
     SingleButtonBanner,
     GridLayout,
-    TournamentCard,
     ArticleCard,
     FencerCard,
-    Header,
+    PageHeader,
     HeroBanner,
   },
   props: {
@@ -107,20 +107,27 @@ export default {
   },
   computed: {
     ArticleCard() {
-      return ArticleCard
+      return ArticleCard;
     },
     FencerCard() {
-      return FencerCard
+      return FencerCard;
     },
-    limitedTournaments() { 
+    limitedTournaments() {
       return this.tournaments.slice(0, 6);
     }
   },
   data() {
     return {
-      TournamentCard: TournamentCard
+      TournamentCard: markRaw(TournamentCard), // Make TournamentCard raw to avoid reactivity
+    };
+  },
+  methods: {
+    handleGridCardClick() {
+      console.log('Grid Card Clicked');
+    },
+    changePage(item) {
+      console.log('Change Page', item);
     }
   }
-}
-
-</script>
+};
+</script>

package/src/stories/Templates/Leaderboard/Leaderboard.stories.js

@@ -0,0 +1,43 @@
+import Leaderboard from './Leaderboard.vue';
+import getFencersByWeapon from "../../../mocks/getFencersByWeapon.js";
+
+export default {
+    title: 'Templates/LeaderboardPage',
+    component: Leaderboard,
+    argTypes: {
+        title: { control: 'text' },
+        description: { control: 'text' },
+        imageSrc: { control: 'text' },
+        tournaments: { control: 'array' },
+        tournamentsIsLoading: { control: 'boolean' },
+    },
+};
+
+const Template = (args) => ({
+    components: { Leaderboard },
+    setup() {
+        return { args };
+    },
+    template: '<Leaderboard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Leaderboard',
+    description: 'Track Your Progress, Outshine the Competition.',
+    imageSrc: 'https://meyersquared.com/images/banners/thinbanner04.jpg',
+    fencers: getFencersByWeapon,
+    fencersIsLoading: false,
+};
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+    ...Default.args,
+    fencersIsLoading: true,
+};
+
+export const NoTournaments = Template.bind({});
+NoTournaments.args = {
+    ...Default.args,
+    tournaments: [],
+};

package/src/stories/Templates/Leaderboard/Leaderboard.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="m-0 w-full bg-secondary">
+    <Header @search="onSearch"/>
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <LeaderboardHeader  :weapons="['Longsword', 'Rapier', 'Saber', 'Sword & Buckler', 'Dagger']" @weaponSelected="changeLeaderBoarder"/>
+
+    <div class="w-full flex justify-center">
+      <section class="w-full md:w-2/3 mb-20 flex">
+        <GridLayout
+            :cardComponent="FencerListCard"
+            :items="fencers"
+            :maxColumns="1"
+            :isLoading="fencersIsLoading"
+            :whiteStyle="true"
+            moreButtonLabel="See All Tournaments"
+            :title="selectedWeapon"
+            @grid-card-click="handleCardClicked"
+        />
+      </section>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+
+<script>
+import TournamentBanner from "../../Organisms/HeroBanners/Tournaments/TournamentBanner.vue";
+import Header from "../../Organisms/Headers/PageHeader/PageHeader.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
+import TournamentHeader from "../../Organisms/Headers/TournamentHeader/TournamentHeader.vue";
+import LeaderboardHeader from "../../Organisms/Headers/LeaderboardHeader/LeaderboardHeader.vue";
+import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import FencerListCard from "../../Organisms/Cards/FencerListCard/FencerListCard.vue";
+
+export default {
+  name: 'LeaderboardPage',
+  components: {
+    FencerListCard,
+    GridLayout,
+    LeaderboardHeader,
+    TournamentHeader,
+    Footer,
+    Header,
+    TournamentBanner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    },
+    fencers: {
+      type: Array,
+      default: () => []
+    },
+    fencersIsLoading: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    FencerListCard() {
+      return FencerListCard
+    }
+
+  },
+  data() {
+    return {
+      selectedWeapon: 'Longsword',
+    }
+  },
+  methods: {
+    changeLeaderBoarder(selected) {
+      this.selectedWeapon = selected;
+    },
+    onSearch(searchQuery) {
+      console.log('Search Query:', searchQuery);
+    },
+    handleCardClicked(fencer) {
+      console.log('Fencer:', fencer);
+    }
+  }
+}
+
+</script>

package/src/stories/Templates/TournamentDetailPage/TournamentDetail.stories.js

@@ -0,0 +1,32 @@
+import HomePage from './TournamentDetailPage.vue';
+import mockTournamentDetails from "../../../mocks/getTouranmentDetailsMock.js";
+
+export default {
+    title: 'Templates/TournamentDetailsPage',
+    component: HomePage,
+    argTypes: {
+        'button-click': { action: 'button-click' },
+        title: { control: 'text', description: 'Title for the HeroBanner' },
+        description: { control: 'text', description: 'Description for the HeroBanner' },
+        buttonLabel: { control: 'text', description: 'Button label for the HeroBanner' },
+        imageSrc: { control: 'text', description: 'Image source for the HeroBanner' },
+    },
+};
+
+export const Default = {
+    args: {
+        title: mockTournamentDetails.Name,
+        imageSrc: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
+        tournament: mockTournamentDetails,
+        apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
+    },
+};
+
+export const AllLoading = {
+    args: {
+        title: 'Discover, Compete, Connect',
+        imageSrc: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
+        tournament: mockTournamentDetails,
+        apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
+    },
+};

package/src/stories/Templates/TournamentDetailPage/TournamentDetailPage.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="m-0 w-full bg-secondary">
+    <Header/>
+    <TournamentDetailsBanner :title="title"
+                             :imageSrc="imageSrc"
+                             :club-logo="tournament.Club.Images[0].URL"
+                             :hosting-club-name="tournament.Club.Name"
+                             :tournament-start-date="tournament.StartDate"
+    />
+
+    <section class="flex flex-col md:flex-row justify-center">
+      <section>
+        <div class="w-full flex justify-center mt-4 md:mt-12 md:pr-4">
+          <TournamentDetails
+              :imageSrc="tournament.Images[0].URL"
+              :description="tournament.Description"
+          />
+        </div>
+        <div class="w-full max-w-4xl mx-auto md:p-4">
+          <GridLayout
+              :cardComponent="EventListCard"
+              :items="tournament.Events"
+              :maxColumns="1"
+              :isLoading="false"
+              :whiteStyle="true"
+              :title="'Events'"
+          />
+        </div>
+        <div class="w-full flex justify-center md:mb-20">
+          <BaseButton label="Register" backgroundColor="secondary" border="primary" class="w-40 mx-auto mt-10"/>
+        </div>
+      </section>
+      <section class="mt-8 md:mt-16">
+        <HostColumn
+            :organizerName="tournament.PrimaryContact.DisplayName"
+            :organizerPortrait="tournament.PrimaryContact.Images[0].URL"
+            :address="tournament.Address"
+            :fencersGoing="tournament.TotalParticipants"
+            :bookmarksCount="tournament.TotalBookmarks"
+            :apiKey="apiKey"
+            @rulesClick="onRulesClick"
+        />
+      </section>
+    </section>
+    <Footer/>
+  </div>
+</template>
+
+
+<script>
+import TournamentDetailsBanner from "../../Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue";
+import Header from "../../Organisms/Headers/PageHeader/PageHeader.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
+import TournamentDetails from "../../Organisms/Cards/TournamentDetails/TournamentDetails.vue";
+import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import EventListCard from "../../Organisms/Cards/EventListCard/EventListCard.vue";
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
+import HostColumn from "../../Organisms/Column/HostColumn.vue";
+
+export default {
+  name: 'TournamentDetailPage',
+  components: {
+    HostColumn,
+    BaseButton,
+    BaseText,
+    GridLayout,
+    TournamentDetails,
+    Footer,
+    Header,
+    TournamentDetailsBanner,
+    EventListCard
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://images.squarespace-cdn.com/content/v1/588e439e1b10e309aeed2280/1549377422004-9SSG2INBP1HGR5OK4DIN/FacebookMockup2.png?format=1000w'
+    },
+    tournament: {
+      type: Object,
+      required: true,
+    },
+    tournamentsIsLoading: {
+      type: Boolean,
+      default: false
+    },
+    apiKey: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    EventListCard() {
+      return EventListCard
+    },
+    formattedDate() {
+      return new Date().toLocaleDateString(undefined, {
+        weekday: 'long',
+        month: 'short',
+        day: 'numeric',
+      });
+    },
+    limitedTournaments() {
+      return this.tournaments;
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    onRulesClick() {
+      this.$emit('rules-click');
+    }
+  }
+}
+
+</script>