Add createCompositeBlockSelectField helper (#1701)

### Description
With this PR a helper function called `createCompositeBlockSelectField`
is added. It simplifies the creation of a select field block by hiding
the verbose definition of Form, Field and Items.

### Acceptance Critiera
- [x] Add changeset

### Example Usage
#### Before
```tsx
// ...
            level: {
                block: createCompositeSetting<HeadlineBlockData["level"]>({
                    defaultValue: "header-one",
                    AdminComponent: ({ state, updateState }) => (
                        <BlocksFinalForm<Pick<HeadlineBlockData, "level">>
                            onSubmit={({ level }) => updateState(level)}
                            initialValues={{ level: state }}
                        >
                            <Field name="level" label="Level" fullWidth>
                                {(props) => (
                                    <FinalFormSelect {...props}>
                                        <MenuItem value="header-one">Header One</MenuItem>
                                        <MenuItem value="header-two">Header Two</MenuItem>
                                        <MenuItem value="header-three">Header Three</MenuItem>
                                        <MenuItem value="header-four">Header Four</MenuItem>
                                        <MenuItem value="header-five">Header Five</MenuItem>
                                        <MenuItem value="header-six">Header Six</MenuItem>
                                    </FinalFormSelect>
                                )}
                            </Field>
                        </BlocksFinalForm>
                    ),
                }),
            },
// ...
```
#### After
```tsx
// ...
            level: {
                block: createCompositeBlockSelectField({
                    defaultValue: "header-one",
                    fieldProps: { label: "Level", fullWidth: true },
                    options: [
                        { value: "header-one", label: "Header One" },
                        { value: "header-two", label: "Header Two" },
                        { value: "header-three", label: "Header Three" },
                        { value: "header-four", label: "Header Four" },
                        { value: "header-five", label: "Header Five" },
                        { value: "header-six", label: "Header Six" },
                    ],
                }),
            },
// ...
```

.changeset/cyan-mayflies-relate.md

@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Add `createCompositeBlockSelectField` helper function
+
+To simplify the creation of a select field blocks by hiding the verbose definition of `Form`, `Field` and items.

demo/admin/src/common/blocks/HeadlineBlock.tsx

@@ -1,7 +1,7 @@
-import { SelectField, TextField } from "@comet/admin";
+import { TextField } from "@comet/admin";
 import { BlockCategory, BlocksFinalForm, createCompositeBlock, createCompositeSetting } from "@comet/blocks-admin";
+import { createCompositeBlockSelectField } from "@comet/blocks-admin/lib/blocks/helpers/createCompositeBlockSelectField";
 import { createRichTextBlock } from "@comet/cms-admin";
-import { MenuItem } from "@mui/material";
 import { HeadlineBlockData } from "@src/blocks.generated";
 import { LinkBlock } from "@src/common/blocks/LinkBlock";
 import * as React from "react";
@@ -39,23 +39,17 @@ export const HeadlineBlock = createCompositeBlock(
                 title: "Headline",
             },
             level: {
-                block: createCompositeSetting<HeadlineBlockData["level"]>({
+                block: createCompositeBlockSelectField<HeadlineBlockData["level"]>({
                     defaultValue: "header-one",
-                    AdminComponent: ({ state, updateState }) => (
-                        <BlocksFinalForm<Pick<HeadlineBlockData, "level">>
-                            onSubmit={({ level }) => updateState(level)}
-                            initialValues={{ level: state }}
-                        >
-                            <SelectField name="level" label="Level" fullWidth>
-                                <MenuItem value="header-one">Header One</MenuItem>
-                                <MenuItem value="header-two">Header Two</MenuItem>
-                                <MenuItem value="header-three">Header Three</MenuItem>
-                                <MenuItem value="header-four">Header Four</MenuItem>
-                                <MenuItem value="header-five">Header Five</MenuItem>
-                                <MenuItem value="header-six">Header Six</MenuItem>
-                            </SelectField>
-                        </BlocksFinalForm>
-                    ),
+                    fieldProps: { label: "Level", fullWidth: true },
+                    options: [
+                        { value: "header-one", label: "Header One" },
+                        { value: "header-two", label: "Header Two" },
+                        { value: "header-three", label: "Header Three" },
+                        { value: "header-four", label: "Header Four" },
+                        { value: "header-five", label: "Header Five" },
+                        { value: "header-six", label: "Header Six" },
+                    ],
                 }),
             },
         },

packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx

@@ -0,0 +1,29 @@
+import { SelectField, SelectFieldProps } from "@comet/admin";
+import { MenuItem } from "@mui/material";
+import * as React from "react";
+
+import { BlocksFinalForm } from "../../form/BlocksFinalForm";
+import { createCompositeSetting } from "./composeBlocks/createCompositeSetting";
+
+interface Options<T extends string | number> {
+    defaultValue: T;
+    options: Array<{ value: T; label: React.ReactNode }>;
+    fieldProps?: Partial<SelectFieldProps<T>>;
+}
+
+export function createCompositeBlockSelectField<T extends string | number>({ defaultValue, fieldProps, options }: Options<T>) {
+    return createCompositeSetting<T>({
+        defaultValue,
+        AdminComponent: ({ state, updateState }) => (
+            <BlocksFinalForm<{ value: typeof state }> onSubmit={({ value }) => updateState(value)} initialValues={{ value: state }}>
+                <SelectField name="value" {...fieldProps}>
+                    {options.map(({ value, label }) => (
+                        <MenuItem key={value} value={value}>
+                            {label}
+                        </MenuItem>
+                    ))}
+                </SelectField>
+            </BlocksFinalForm>
+        ),
+    });
+}