@dcrackel/meyersquaredui/src/stories/Organisms/Grids/GridLayout/GridLayout.stories.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import GridLayout from './GridLayout.vue';
import TournamentCard from '../../Cards/TournamentCard/TournamentCard.vue';
import FencerCard from '../../Cards/FencerCard/FencerCard.vue';
import FencerListCard from '../../Cards/FencerListCard/FencerListCard.vue';
import ArticleCard from '../../Cards/ArticleCard/ArticleCard.vue';
import mockTournaments from "../../../../mocks/getTournamentsMock.js";
import mockTopFencers from "../../../../mocks/getTopFencers.js";
import mockArticles from "../../../../mocks/getArticles.js";
import mockGetFinalResults from "../../../../mocks/getFinalResults.js";

export default {
    title: 'Organisms/Grids/GridLayout',
    component: GridLayout,
    argTypes: {
        cardComponent: { control: false, description: 'The component to render in the grid (e.g., TournamentCard, FencerCard)' },
        items: { control: 'object', description: 'Array of items passed as props to the component' },
    },
};


// Template for Tournament Grid
const Template = (args) => ({
    components: { GridLayout, TournamentCard },
    setup() {
        return { args };
    },
    template: '<GridLayout v-bind="args" />',
});

// Template for Fencer Grid
const FencerTemplate = (args) => ({
    components: { GridLayout, FencerCard },
    setup() {
        return { args };
    },
    template: '<GridLayout v-bind="args" />',
});

// Default Story for Tournament Grid
export const Default = Template.bind({});
Default.args = {
    title: 'Tournaments',
    moreButtonLabel: 'See All Tournaments',
    maxColumns: 3,
    cardComponent: TournamentCard,
    items: mockTournaments,
};

// New Story for Fencer Grid
export const FencerGrid = FencerTemplate.bind({});
FencerGrid.args = {
    title: 'Fencers',
    moreButtonLabel: 'See All Fencers',
    maxColumns: 5,
    cardComponent: FencerCard,
    items: mockTopFencers,
};

export const FencerGridLoading = FencerTemplate.bind({});
FencerGridLoading.args = {
    title: 'Fencers',
    moreButtonLabel: 'See All Fencers',
    maxColumns: 5,
    cardComponent: FencerCard,
    items: mockTopFencers,
    isLoading: true
};

export const ArticleGrid = FencerTemplate.bind({});
ArticleGrid.args = {
    title: 'Interesting Articles',
    moreButtonLabel: 'See More',
    maxColumns: 3,
    cardComponent: ArticleCard,
    items: mockArticles,
};

export const ArticleGridLoading = FencerTemplate.bind({});
ArticleGridLoading.args = {
    title: 'Interesting Articles',
    moreButtonLabel: 'See More',
    maxColumns: 3,
    cardComponent: ArticleCard,
    items: mockArticles,
    isLoading: true
};

export const FinalResults = FencerTemplate.bind({});
FinalResults.args = {
    title: 'Final Results',
    moreButtonLabel: '',
    maxColumns: 1,
    cardComponent: FencerListCard,
    items: mockGetFinalResults.FinalResults,
    isLoading: false
};

export const Empty = FencerTemplate.bind({});
Empty.args = {
    title: 'Empty Set',
    moreButtonLabel: '',
    maxColumns: 1,
    cardComponent: ArticleCard,
    items: [],
    isLoading: true
};