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

export default {
    title: 'Atoms/InputField',
    component: InputField,
    argTypes: {
        type: {
            control: { type: 'text' },
            defaultValue: 'text',
        },
        placeholder: {
            control: { type: 'text' },
            defaultValue: 'Search',
        },
        modelValue: {
            control: { type: 'text' },
            defaultValue: '',
        },
        color: {
            control: { type: 'radio' },
            options: ['primary', 'secondary'],
            defaultValue: 'primary',
        },
    },
};

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

export const Primary = Template.bind({});
Primary.args = {
    color: 'primary',
    placeholder: 'Search in Primary Mode',
};

export const Secondary = Template.bind({});
Secondary.args = {
    color: 'secondary',
    placeholder: 'Search in Secondary Mode',
};