npm package: @moller/sanity-plugin-mime
Description: > This is a **Sanity Studio v3** plugin.
Latest version: 0.1.57

# @moller/sanity-plugin-mime

> This is a **Sanity Studio v3** plugin.

## Installation

```sh
npm i @moller/sanity-plugin-mime
```

## Usage

Add `mimePlugin()` to the plugin array in `sanity.config.ts` (or .js):

```ts
import { mimePlugin } from '@moller/sanity-plugin-mime';
import { contactForm, metadata, selectFieldsConfig } from 'mimeprops';

export default defineConfig({
    //...
    plugins: [
        mimePlugin({
            forms: [contactForm],
            selectFieldsConfig: selectFieldsConfig,
            metadata: metadata,
        }),
    ],
});
```

### Example Props for Mime plugin

#### Configure Forms

This input renders one form template with the basic fields firstname, lastname, email and phone number. In addition the unique fields `select:dealership` and `text: message to dealership`.

```ts
export const contactForm = {
    name: 'contactForms',
    title: 'Contact forms',
    formFields: [
        {
            _type: 'areacodes',
            type: 'select',
            label: 'Area Code',
            options: 'areacodes',
            required: true,
        },
        {
            _type: 'formField',
            type: 'text',
            label: 'Message',
        },
    ],
};
```

#### Configure Select Fields

In order to use the select field `dealership`, it has to be configured in `selectFieldConfig`

```ts
export const selectFieldsConfig = [
    {
        fieldName: 'areacodes',
        title: 'Area Code',
        endpoint: 'areacodes',
        options: [
            {
                name: 'parameter1',
                title: 'Parameter 1',
                optionlist: [
                    { title: 'X', value: '1' },
                    { title: 'Y', value: '2' },
                ],
            },
            {
                name: 'parameter2',
                title: 'Parameter 2',
                optionlist: [
                    { title: 'A', value: '3' },
                    { title: 'B', value: '4' },
                ],
            },
        ],
    },
];
```

#### Configure Metadata

Metadata contain all data which has to be included in the form, but not rendered as a input field. Metadata has three different types `readOnly`, `options` and `toggle`. Note the `toggle` has the option to display follow up options.

```ts
export const metadata = {
    readOnlyFields: [
        {
            name: 'postUrl',
            title: 'Post URL',
            initialValue: 'https://example.com/newform',
        },
    ],
    optionFields: [
        {
            name: 'language',
            title: 'Language',
            optionlist: [
                { title: 'English', value: 'english' },
                { title: 'French', value: 'french' },
            ],
        },
    ],
    toggleFields: [
        {
            name: 'sendConfirmationMail',
            title: 'Send Confirmation Mail',
            followUpOptions: {
                name: 'confirmationTemplate',
                title: 'Confirmation Mail Template',
                emptyFieldErrorMessage: 'Select Template',
                options: [
                    { title: 'SuccessTemplate', value: 'SuccessTemplate' },
                    {
                        title: 'SomethingwrongTemplate',
                        value: 'SomethingwrongTemplate',
                    },
                ],
            },
        },
    ],
    customFields: [],
};
```

## License

[BSD 3-Clause "New" or "Revised"](LICENSE) © Bekk

## Develop & test

This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.

See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.