How to import custom component in payload 3.0? 😅

[AdamZajler]

Hi! Previously I was importing things like that:

import { Field } from 'payload';
import deepMerge from '@/payload/utilities/deepMerge';
import { SelectColor } from '@/payload/components/select-color/SelectColor';

// eslint-disable-next-line no-unused-vars
type Props = (nameOverride?: string, overrides?: Partial<Field>) => Field;

export const selectColor: Props = (nameOverride = 'backgroundColor', overrides = {}) => {
  return deepMerge<Field, Partial<Field>>(
    {
      name: nameOverride,
      type: 'text',
      label: {
        en: 'Select background color',
        pl: 'Wybierz kolor tła',
        ...('label' in overrides ? overrides.label : {}),
      },
      admin: {
        components: {
          Field: SelectColor,
        },
      },
    },
    overrides,
  );
};

But now I'm trying to do things that are written at https://github.com/payloadcms/payload/releases/tag/v3.0.0-beta.79.
So my component look like this; and it's not working :|

Server side wrapper at src/payload/components/select-color/SelectColorWrapper.tsx

import { ReactNode } from 'react';
import SelectColor from '@/payload/components/select-color/SelectColor';

// What are props type? :o
export function SelectColorWrapper(props): ReactNode {
  console.log('TEST: ', props);
  return (
    <div className="field-type">
      <SelectColor label={props.field.label} required={props.field.required} />
    </div>
  );
}

import { Field } from 'payload';
import deepMerge from '@/payload/utilities/deepMerge';

// eslint-disable-next-line no-unused-vars
type Props = (nameOverride?: string, overrides?: Partial<Field>) => Field;

export const selectColor: Props = (nameOverride = 'backgroundColor', overrides = {}) => {
  return deepMerge<Field, Partial<Field>>(
    {
      name: nameOverride,
      type: 'text',
      label: {
        en: 'Select background color',
        pl: 'Wybierz kolor tła',
        ...('label' in overrides ? overrides.label : {}),
      },
      admin: {
        components: {
          Field: '/components/select-color/SelectColorWrapper.tsx#default',
        },
      },
    },
    overrides,
  );
};

Can anyone help?

[AdamZajler]

I'm a little bit confused :| can someone help me fix this custom component for me? How to repair it? How to pass server props to it (field etc. if necessary).

Wrapper

import { ReactNode } from 'react';
import SelectColor from '@/payload/components/select-color/SelectColor';

// What are props type? :o
export function SelectColorWrapper(props): ReactNode {
  console.log('TEST: ', props);
  return (
    <div className="field-type">
      <SelectColor label={props.field.label} required={props.field.required} />
    </div>
  );
}

'use client';
import * as React from 'react';
import { SelectInput, useField, useFieldProps } from '@payloadcms/ui';
import { selectColors } from '@/config/payload/select-colors';

export default function SelectColor({ label, required }: { label: string; required: boolean }) {
  const { path } = useFieldProps();
  const { value, setValue } = useField<string>({ path });

  return (
    <div className="field-type">
      <div style={{ display: 'flex', gap: '8px' }}>
        {value ? <div style={{ width: '100px', backgroundColor: value, border: '1px solid black' }}></div> : null}
        <SelectInput
          label={label}
          required={required}
          path={path}
          name={path}
          hasMany={false}
          // @ts-ignore
          options={selectColors.map((color) => ({
            value: color,
            label: (
              <div style={{ display: 'flex', gap: '16px' }}>
                {color.toUpperCase()}
                <div style={{ width: '100px', backgroundColor: color, border: '1px solid black' }}></div>
              </div>
            ),
          }))}
          value={value}
          onChange={(e) => setValue(e && 'value' in e ? (e.value as string).toLowerCase() : null)}
          style={{ flexGrow: 1 }}
        />
      </div>
    </div>
  );
}

[revnelson]

Can't you get the label and required values from the value object returned from the useField hook in the client component? I do think the custom components and importMap generation et al needs a lot more attention and documentation, though. I also have been struggling with generating the importMap as well, as laid out in a discussion I started after hitting a wall asking for help in a related issue.

[Figumari]

Hi,

I’m facing similar issues (see also Issue #8).

An updated example for 3.0 would be greatly appreciated. Thanks for the great work!