@moller/sanity-plugin-mime

This is a Sanity Studio v3 plugin.

Installation

npm i @moller/sanity-plugin-mime

Usage

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

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.

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

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.

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" © Bekk

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.