@dcrackel/meyersquaredui/src/stories/Organisms/Cards/BoutCardMobile/BoutCardMobile.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 BoutCardMobile from './BoutCardMobile.vue';
import BaseText from '../../../Atoms/BaseText/BaseText.vue';

export default {
    title: 'Organisms/Cards/BoutCardMobile',
    component: BoutCardMobile,
    argTypes: {
        bout: {
            control: 'object',
            description: 'Bout object containing the fencers and match information.',
        },
        isWaiting: {
            control: 'boolean',
            description: 'Flag indicating whether the bout is in a waiting state.',
        },
        timerStatus: {
            control: 'text',
            description: 'Controls the timer state (e.g., "running", "stopped").',
        },
        hostingClubColors: {
            control: 'object',
            description: 'Colors for the hosting club, used for styling.',
        },
    },
};

const Template = (args) => ({
    components: { BoutCardMobile, BaseText },
    setup() {
        return { args };
    },
    template: '<BoutCardMobile v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
    bout: {
        Person1: {
            DisplayName: 'Fencer One',
            Club: { Name: 'Club A' },
            Images: [{ URL: 'https://via.placeholder.com/150' }],
        },
        Person2: {
            DisplayName: 'Fencer Two',
            Club: { Name: 'Club B' },
            Images: [{ URL: 'https://via.placeholder.com/150' }],
        },
        Score1: 5,
        Score2: 3,
        Status: 'Active',
        TimeLeft: 120,
        customStatus: null,
    },
    isWaiting: false,
    timerStatus: 'running',
    hostingClubColors: {
        Color1: 'red',
        Color2: 'blue',
    },
};

export const WaitingState = Template.bind({});
WaitingState.args = {
    bout: {
        Person1: {
            DisplayName: '',
            Club: { Name: '' },
            Images: [],
        },
        Person2: {
            DisplayName: '',
            Club: { Name: '' },
            Images: [],
        },
        Score1: '-',
        Score2: '-',
        Status: 'Scheduled',
        TimeLeft: 0,
        customStatus: 'Waiting for fencers to be selected',
    },
    isWaiting: true,
    timerStatus: 'stopped',
    hostingClubColors: {
        Color1: 'red',
        Color2: 'blue',
    },
};