Custom multi-select example should use a JSON type field

[tkrotoff]

Instead of using a text field type and hacking value by transforming JSON into a string and vice-versa, use a JSON type field: https://payloadcms.com/docs/beta/fields/json

• custom-select/src/fields/customSelectHasMany/field.ts

  Line 6 in 697c15f

  type: "text",

• custom-select/src/fields/customSelectHasMany/component.tsx

  Lines 34 to 37 in 697c15f

  	if (value && !Array.isArray(value)) {
  	// convert saved stringified array back to an array
  	const newValue = JSON.parse(value);
  	setValue(newValue)

• custom-select/src/fields/customSelectHasMany/field.ts

  Lines 16 to 17 in 697c15f

  	const stringifiedValue = JSON.stringify(value);
  	return stringifiedValue;

Example with a list of string:

import type { CollectionConfig } from "payload";

import { SelectCategories } from "./SelectCategories";

export const Banners: CollectionConfig = {
  slug: "banners",
  fields: [
    {
      name: "categories",
      type: "json",
      admin: { components: { Field: SelectCategories } },
      // The JSON Schema makes Payload generates the proper TypeScript types in payload-types.ts
      jsonSchema: {
        // Why? https://github.com/payloadcms/payload/issues/6737
        uri: "_",
        fileMatch: ["_"],
        schema: {
          type: "array",
          items: { type: "string" },
        },
      },
    },
  ],
};

"use client";

import { useField } from "@payloadcms/ui";

export function SelectCategories() {
  const { value, setValue } = useField<string[]>({});
  ...
}