@dcrackel/meyersquaredui/src/stories/Organisms/Cards/FencerListCard/FencerListCard.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 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" @grid-card-click="onCardClick" />',
    methods: {
        onCardClick(fencer) {
            const name = fencer?.DisplayName ?? fencer?.Person?.DisplayName ?? 'Unknown';
            alert(`Fencer selected: ${name}`);
        },
    },
});

// This matches the API "persons" array item shape you pasted
const attendancePerson = {
    Id: 2591,
    EventId: 178,
    PoolId: null,
    PersonId: 43,
    Seed: 1,
    PoolPosition: 1,
    DEPosition: null,
    Status: 'Absent',
    LastNote: null,
    Person: {
        PersonId: 43,
        DisplayName: 'Derek Ray',
        ShowData: true,
        Images: [
            {
                ImageId: 139,
                URL: 'https://meyersquaredimages.com/uploads/p-e12ed951.png',
                AltText: 'Derek Ray',
                Type: 'Portrait',
                EntityId: 43,
                EntityType: 'Person',
            },
        ],
        Club: {
            ClubId: 10,
            Name: 'Columbus United Fencing Club',
            ShortName: 'CUFC',
            Color1: 'navy',
            Color2: 'rose',
        },
        HEMARatings: [
            {
                HemaRatingId: 5569,
                WeaponId: 1,
                Rating: 1748.4,
            },
        ],
        M2Ratings: [],
    },
};

export const Default = Template.bind({});
Default.args = {
    data: attendancePerson,
    index: 0,
    isLoading: false,
    showHRRatings: true,
};

// No HR ratings present (still current shape)
export const NoHR = Template.bind({});
NoHR.args = {
    data: {
        ...attendancePerson,
        Person: {
            ...attendancePerson.Person,
            HEMARatings: [],
        },
    },
    index: 0,
    isLoading: false,
    showHRRatings: true,
};

// No profile image in Images (still current shape)
export const NoProfileImage = Template.bind({});
NoProfileImage.args = {
    data: {
        ...attendancePerson,
        Person: {
            ...attendancePerson.Person,
            Images: [],
        },
    },
    index: 0,
    isLoading: false,
    showHRRatings: true,
};

// Optional: show explicit M2 rating if you ever have it populated
export const WithM2Rating = Template.bind({});
WithM2Rating.args = {
    data: {
        ...attendancePerson,
        Person: {
            ...attendancePerson.Person,
            M2Ratings: [{WeaponId: 1, FormattedRating: 'A23'}],
        },
    },
    index: 0,
    isLoading: false,
    showHRRatings: true,
};