@dcrackel/meyersquaredui/src/stories/Molecules/Calendar/Calendar.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 Calendar from './Calendar.vue';

export default {
    title: 'Molecules/Calendar/Calendar',
    component: Calendar,
    argTypes: {
        'date-select': { action: 'date-select' },
        tournaments: { control: 'array', description: 'List of tournaments with dates to highlight on the calendar' },
    },
};

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { Calendar },
    template: '<Calendar v-bind="$props" @date-select="date-select" />',
});

export const Default = Template.bind({});
Default.args = {
    tournaments: [
        { id: 1, name: 'Tournament 1', date: '2024-09-15' },
        { id: 2, name: 'Tournament 2', date: '2024-09-20' },
        { id: 3, name: 'Tournament 3', date: '2024-09-25' },
    ],
};

export const NoTournaments = Template.bind({});
NoTournaments.args = {
    tournaments: [],
};

export const DifferentMonth = Template.bind({});
DifferentMonth.args = {
    tournaments: [
        { id: 1, name: 'Tournament A', date: '2024-10-05' },
        { id: 2, name: 'Tournament B', date: '2024-10-12' },
        { id: 3, name: 'Tournament C', date: '2024-10-20' },
    ],
};