bramw_baserow/web-frontend/stories/FormInput.stories.mdx

import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'

import FormInput from '@baserow/modules/core/components/FormInput'

<Meta
    title="Baserow/Form Elements/Input"
    component={FormInput}
    parameters={{
        backgrounds: {
            default: 'light',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        suffix: {
            control: {
                type: 'text',
            },
            defaultValue: '',
        },
        label: {
            control: {
                type: 'text',
            },
            defaultValue: 'Label',
        },
        size: {
            control: {
                type: 'select',
                options: ['small', 'regular', 'large'],
            },
            defaultValue: 'regular',
        },
        placeholder: {
            control: {
                type: 'text',
            },
            defaultValue: 'Placeholder text...',
        },
        required: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        error: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        monospace: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        disabled: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        loading: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        iconLeft: {
            control: {
                type: 'text',
            },
            defaultValue: 'iconoir-db',
        },
        iconRight: {
            control: {
                type: 'text',
            },
            defaultValue: 'iconoir-db',
        },
        type: {
            control: {
                type: 'select',
                options: ['text', 'number', 'password', 'email', 'url'],
            },
            defaultValue: 'text',
        },
        textInvisible: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# FormInput

The FormInput component is used to render a form input field. It can be used to render a text, number, password, email or url input field.

export const Template = (args, { argTypes }) => ({
    components: { FormInput },
    props: Object.keys(argTypes),
    template: `
    <FormInput v-bind="$props">
        <template v-if="${'suffix' in args}" v-slot:suffix>${
        args.suffix
    }</template>
    </FormInput>
    `,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=1%3A87&mode=dev',
}

<Canvas>
    <Story
        name="Input"
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="w/ suffix"
        parameters={{
            design: config(designConfig),
        }}
        args={{
            iconRight: '',
            suffix: '.com',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<FormInput>Label</FormInput>
```

## Props

<Props of={FormInput} />