Customizing Forms

import { DashboardFormComponentProps } from '@vendure/dashboard';export function MyCustomInput(props: DashboardFormComponentProps<string>) {    return <textarea value={props.value} onChange={e => props.onChange(e.target.value)} />;}MyCustomInput.metadata = {    isFullWidth: true,};

import {    Button,    Card,    CardContent,    cn,    DashboardFormComponent,    Input,    useFormContext,} from '@vendure/dashboard';import { useState } from 'react';// By typing your component as DashboardFormComponent, the props will be correctly typedexport const ColorPickerComponent: DashboardFormComponent = ({ value, onChange, name }) => {    // You can use any of the built-in React hooks as usual    const [isOpen, setIsOpen] = useState(false);    // To access the react-hook-form context, use this hook.    // This is useful for getting information about the current    // field, or even other fields in the form, which allows you    // to create advanced components that depend on the state of    // other fields in the form.    const { getFieldState } = useFormContext();    // The current field name is always passed in as a prop, allowing    // you to look up the field state    const error = getFieldState(name).error;    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57', '#FF9FF3', '#54A0FF', '#5F27CD'];    return (        <div className="space-y-2">            <div className="flex items-center space-x-2">                <Button                    type="button"                    variant="outline"                    size="icon"                    className={cn('w-8 h-8 border-2 border-gray-300 p-0', error && 'border-red-500')}                    style={{ backgroundColor: error ? 'transparent' : value || '#ffffff' }}                    onClick={() => setIsOpen(!isOpen)}                />                <Input value={value || ''} onChange={e => onChange(e.target.value)} placeholder="#ffffff" />            </div>            {isOpen && (                <Card>                    <CardContent className="grid grid-cols-4 gap-2 p-2">                        {colors.map(color => (                            <Button                                key={color}                                type="button"                                variant="outline"                                size="icon"                                className="w-8 h-8 border-2 border-gray-300 hover:border-gray-500 p-0"                                style={{ backgroundColor: color }}                                onClick={() => {                                    onChange(color);                                    setIsOpen(false);                                }}                            />                        ))}                    </CardContent>                </Card>            )}        </div>    );};

import { defineDashboardExtension } from '@vendure/dashboard';import { ColorPickerComponent } from './components/color-picker';defineDashboardExtension({    customFormComponents: {        // Custom field components for custom fields        customFields: [            {                // The "id" is a global identifier for this custom component. We will // [!code highlight]                // reference it in the next step. // [!code highlight]                id: 'color-picker', // [!code highlight]                component: ColorPickerComponent, // [!code highlight]            },        ],    },    // ... other extension properties});

@VendurePlugin({    // ...    configuration: config => {        config.customFields.Product.push({            name: 'color',            type: 'string',            pattern: '^#[A-Fa-f0-9]{6}$',            label: [{ languageCode: LanguageCode.en, value: 'Color' }],            description: [{ languageCode: LanguageCode.en, value: 'Main color for this product' }],            ui: {                // This is the ID of the custom field // [!code highlight]                // component we registered above. // [!code highlight]                component: 'color-picker', // [!code highlight]            },        });        return config;    },})export class MyPlugin {}

const customShippingCalculator = new ShippingCalculator({    code: 'custom-shipping-calculator',    description: [{ languageCode: LanguageCode.en, value: 'Custom Shipping Calculator' }],    args: {        color: {            type: 'string',            label: [{ languageCode: LanguageCode.en, value: 'Color' }],            description: [                { languageCode: LanguageCode.en, value: 'Color code for this shipping calculator' },            ],            ui: { component: 'color-picker' }, // [!code highlight]        },    },    calculate: (ctx, order, args) => {        // ...    },});

ColorPickerComponent.metadata = {    summary: ({ value }) => (        <span className="inline-flex items-center gap-1.5">            <span className="inline-block h-3 w-3 rounded-sm border" style={{ backgroundColor: value }} />            {value}        </span>    ),    popoverSize: 'lg',};

import { DashboardFormComponent, Textarea } from '@vendure/dashboard';// This is a simplified example - a real markdown editor should use// a library that handles markdown rendering and editing.export const MarkdownEditorComponent: DashboardFormComponent = props => {    return (        <Textarea            className="font-mono"            ref={props.ref}            onBlur={props.onBlur}            value={props.value}            onChange={e => props.onChange(e.target.value)}            disabled={props.disabled}        />    );};

import { defineDashboardExtension } from '@vendure/dashboard';import { MarkdownEditorComponent } from './components/markdown-editor';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail', // [!code highlight]            inputs: [                // [!code highlight]                {                    // [!code highlight]                    blockId: 'main-form', // [!code highlight]                    field: 'description', // [!code highlight]                    component: MarkdownEditorComponent, // [!code highlight]                }, // [!code highlight]            ], // [!code highlight]        },    ],});

defineDashboardExtension({    detailForms: [        {            pageId: 'customer-detail',            inputs: [                {                    blockId: 'main-form',                    field: 'emailAddress',                    component: EmailInputComponent,                },            ],        },    ],});

import { DashboardFormComponent, Input, Alert, AlertDescription, useFormContext } from '@vendure/dashboard';import { CheckCircle2 } from 'lucide-react';export const ValidatedInputComponent: DashboardFormComponent = ({    value,    onChange,    onBlur,    disabled,    name,}) => {    const { getFieldState } = useFormContext();    const fieldState = getFieldState(name);    console.log(fieldState);    // will log something like this:    // {    //     "invalid": false,    //     "isDirty": false,    //     "isValidating": false,    //     "isTouched": false    // }    // You can use this data to display validation errors, etc.    return (        <div className="space-y-2">            <Input                value={value || ''}                onChange={e => onChange(e.target.value)}                onBlur={onBlur}                disabled={disabled}                className={fieldState.error ? 'border-destructive' : ''}            />            {fieldState.error && (                <Alert variant="destructive">                    <AlertDescription>{fieldState.error.message}</AlertDescription>                </Alert>            )}            {fieldState.isTouched && !fieldState.error && (                <div className="flex items-center gap-1 text-sm text-green-600">                    <CheckCircle2 className="h-4 w-4" />                    Valid input                </div>            )}        </div>    );};

import {    Button,    Dialog,    DialogContent,    DialogTrigger,    Form,    DashboardFormComponent,    handleNestedFormSubmit,    useForm,} from '@vendure/dashboard';import { zodResolver } from '@hookform/resolvers/zod';import { z } from 'zod';const formSchema = z.object({    title: z.string().min(1, 'Title is required'),    description: z.string().min(1, 'Description is required'),});type FormData = z.infer<typeof formSchema>;export const NestedFormDialogComponent: DashboardFormComponent = props => {    const form = useForm<FormData>({        resolver: zodResolver(formSchema),        defaultValues: {            title: '',            description: '',        },    });    const onSubmit = (data: FormData) => {        // Handle your form submission logic        console.log('Form submitted:', data);        // You might update the parent form value here        props.onChange(data);        form.reset();    };    return (        <Dialog>            <DialogTrigger render={<Button variant="outline" />}>Open Form</DialogTrigger>            <DialogContent>                <Form {...form}>                    {/* Use handleNestedFormSubmit to prevent event bubbling */}                    <form onSubmit={handleNestedFormSubmit(form, onSubmit)}>                        {/* Your form fields here */}                        <Button type="submit">Save</Button>                    </form>                </Form>            </DialogContent>        </Dialog>    );};

import {    SingleRelationInput,    createRelationSelectorConfig,    graphql,    DashboardFormComponentProps,} from '@vendure/dashboard';const productConfig = createRelationSelectorConfig({    listQuery: graphql(`        query GetProductsForSelection($options: ProductListOptions) {            products(options: $options) {                items {                    id                    name                }                totalItems            }        }    `),    idKey: 'id',    labelKey: 'name',    placeholder: 'Search products...',    buildSearchFilter: (term: string) => ({        name: { contains: term },    }),});export function ProductSelectorComponent({ value, onChange }: DashboardFormComponentProps) {    return <SingleRelationInput value={value} onChange={onChange} config={productConfig} />;}