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

export default {
    title: 'Atoms/BaseText',
    component: BaseText,
    tags: ['autodocs'],
    args: {
        tag: 'p',
        size: 'md',
        color: 'primary',
        weight: 'normal',
        content: 'This is a text component'
    },
    argTypes: {
        tag: {
            control: { type: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'] }
        },
        size: {
            control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] }
        },
        color: {
            control: { type: 'select', options: ['primary', 'secondary', 'danger', 'success', 'warning', 'info'] }
        },
        weight: {
            control: { type: 'select', options: ['light', 'normal', 'semibold', 'bold'] }
        },
        content: { control: 'text' }
    }
};

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

export const Default = Template.bind({});
Default.args = {
    tag: 'p',
    size: 'md',
    color: 'primary',
    weight: 'normal',
    content: 'This is a paragraph'
};

export const BoldText = Template.bind({});
BoldText.args = {
    tag: 'h1',
    size: '2xl',
    color: 'primary',
    weight: 'bold',
    content: 'This is bold text'
};