Improve usage of composite-block field-helpers (#3155)

vivid-planet · Jan 20, 2025 · 86479e7 · 86479e7
1 parent 47be4eb
commit 86479e7
Show file tree

Hide file tree

Showing 18 changed files with 69 additions and 44 deletions.
diff --git a/.changeset/five-wolves-kneel.md b/.changeset/five-wolves-kneel.md
@@ -0,0 +1,16 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Simplify setting field props when using `createCompositeBlockTextField` or `createCompositeBlockSelectField`
+
+The props can now be set directly without nesting them inside the `fieldProps` object.
+
+```diff
+ block: createCompositeBlockTextField({
+-    fieldProps: {
+         label: "Title",
+         fullWidth: true,
+-    },
+ }),
+```
diff --git a/.changeset/tender-socks-trade.md b/.changeset/tender-socks-trade.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Support `disabled` in select options when using `createCompositeBlockSelectField`
diff --git a/demo/admin/src/common/blocks/AccordionItemBlock.tsx b/demo/admin/src/common/blocks/AccordionItemBlock.tsx
@@ -31,7 +31,8 @@ export const AccordionItemBlock = createCompositeBlock(
         blocks: {
             title: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/CallToActionBlock.tsx b/demo/admin/src/common/blocks/CallToActionBlock.tsx
@@ -21,7 +21,8 @@ export const CallToActionBlock = createCompositeBlock(
                         { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> },
                         { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />, fullWidth: true },
+                    label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/HeadingBlock.tsx b/demo/admin/src/common/blocks/HeadingBlock.tsx
@@ -81,7 +81,8 @@ export const HeadingBlock = createCompositeBlock(
                         { value: "H5", label: <FormattedMessage id="headingBlock.headline5" defaultMessage="Headline 5" /> },
                         { value: "H6", label: <FormattedMessage id="headingBlock.headline6" defaultMessage="Headline 6" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />, fullWidth: true },
+                    label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/MediaGalleryBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
@@ -24,10 +24,8 @@ export const MediaGalleryBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<MediaGalleryBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: {
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
@@ -13,10 +13,8 @@ export const MediaGalleryItemBlock = createCompositeBlock(
             },
             caption: {
                 block: createCompositeBlockTextField({
-                    fieldProps: {
-                        fullWidth: true,
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
-                    },
+                    fullWidth: true,
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx b/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
@@ -19,10 +19,8 @@ export const StandaloneCallToActionListBlock = createCompositeBlock(
                         { value: "center", label: <FormattedMessage id="standaloneCallToActionList.alignment.center" defaultMessage="center" /> },
                         { value: "right", label: <FormattedMessage id="standaloneCallToActionList.alignment.right" defaultMessage="right" /> },
                     ],
-                    fieldProps: {
-                        label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx b/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
@@ -19,7 +19,8 @@ export const StandaloneHeadingBlock = createCompositeBlock(
                         { value: "left", label: <FormattedMessage id="standaloneHeading.textAlignment.left" defaultMessage="left" /> },
                         { value: "center", label: <FormattedMessage id="standaloneHeading.textAlignment.center" defaultMessage="center" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx b/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
@@ -16,7 +16,8 @@ export const StandaloneMediaBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<StandaloneMediaBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: { label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx b/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
@@ -40,7 +40,7 @@ export const BasicStageBlock = createCompositeBlock({
             block: createCompositeBlockSelectField<BasicStageBlockData["overlay"]>({
                 defaultValue: 50,
                 options: overlayOptions,
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.overlay" defaultMessage="Overlay" />,
             hiddenInSubroute: true,
@@ -52,7 +52,7 @@ export const BasicStageBlock = createCompositeBlock({
                     { value: "left", label: <FormattedMessage id="basicStageBlock.alignment.left" defaultMessage="left" /> },
                     { value: "center", label: <FormattedMessage id="basicStageBlock.alignment.center" defaultMessage="center" /> },
                 ],
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.alignment" defaultMessage="Alignment" />,
             hiddenInSubroute: true,

diff --git a/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx b/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
@@ -41,7 +41,7 @@ export const BillboardTeaserBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<BillboardTeaserBlockData["overlay"]>({
                     defaultValue: 50,
                     options: overlayOptions,
-                    fieldProps: { fullWidth: true },
+                    fullWidth: true,
                 }),
                 title: <FormattedMessage id="billboardTeaserBlock.overlay" defaultMessage="Overlay" />,
                 hiddenInSubroute: true,

diff --git a/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx b/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx
@@ -46,7 +46,8 @@ export const ContentGroupBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<ContentGroupBlockData["backgroundColor"]>({
                     defaultValue: "default",
                     options: backgroundColorOptions,
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx b/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx
@@ -23,12 +23,14 @@ export const KeyFactsItemBlock = createCompositeBlock(
             },
             fact: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="keyFactsItemBlock.fact" defaultMessage="Fact" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="keyFactsItemBlock.fact" defaultMessage="Fact" />,
                 }),
             },
             label: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="keyFactsItemBlock.label" defaultMessage="Label" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="keyFactsItemBlock.label" defaultMessage="Label" />,
                 }),
             },
             description: {

diff --git a/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx b/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx
@@ -25,7 +25,8 @@ export const TeaserItemBlock = createCompositeBlock(
             },
             title: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="teaserItemBlock.title" defaultMessage="Title" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="teaserItemBlock.title" defaultMessage="Title" />,
                 }),
             },
             description: {

diff --git a/demo/admin/src/footer/blocks/FooterContentBlock.tsx b/demo/admin/src/footer/blocks/FooterContentBlock.tsx
@@ -24,10 +24,8 @@ export const FooterContentBlock = createCompositeBlock({
         },
         copyrightNotice: {
             block: createCompositeBlockTextField({
-                fieldProps: {
-                    label: <FormattedMessage id="footers.blocks.content.copyrightNotice" defaultMessage="Copyright notice" />,
-                    fullWidth: true,
-                },
+                label: <FormattedMessage id="footers.blocks.content.copyrightNotice" defaultMessage="Copyright notice" />,
+                fullWidth: true,
             }),
             hiddenInSubroute: true,
         },

diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx
@@ -1,28 +1,28 @@
-import { SelectField, SelectFieldProps } from "@comet/admin";
-import { MenuItem } from "@mui/material";
-import { ReactNode } from "react";
+import { SelectField, SelectFieldOption, SelectFieldProps } from "@comet/admin";
 
 import { BlocksFinalForm } from "../../form/BlocksFinalForm";
 import { createCompositeSetting } from "./composeBlocks/createCompositeSetting";
 
-interface Options<T extends string | number> {
+interface Options<T extends string | number> extends Partial<SelectFieldProps<T>> {
     defaultValue: T;
-    options: Array<{ value: T; label: ReactNode }>;
+    options: Array<SelectFieldOption<T>>;
+    /**
+     * @deprecated Set the props directly instead of nesting inside fieldProps
+     */
     fieldProps?: Partial<SelectFieldProps<T>>;
 }
 
-export function createCompositeBlockSelectField<T extends string | number>({ defaultValue, fieldProps, options }: Options<T>) {
+export function createCompositeBlockSelectField<T extends string | number>({
+    defaultValue,
+    options,
+    fieldProps: legacyFieldProps,
+    ...fieldProps
+}: 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>
+                <SelectField name="value" {...legacyFieldProps} {...fieldProps} options={options} />
             </BlocksFinalForm>
         ),
     });

diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx
@@ -3,20 +3,23 @@ import { TextField, TextFieldProps } from "@comet/admin";
 import { BlocksFinalForm } from "../../form/BlocksFinalForm";
 import { createCompositeSetting } from "./composeBlocks/createCompositeSetting";
 
-interface Options {
+interface Options extends Partial<TextFieldProps> {
     defaultValue?: string;
+    /**
+     * @deprecated Set the props directly instead of nesting inside fieldProps
+     */
     fieldProps?: Partial<TextFieldProps>;
 }
 
-export function createCompositeBlockTextField({ defaultValue = "", fieldProps }: Options) {
+export function createCompositeBlockTextField({ defaultValue = "", fieldProps: legacyFieldProps, ...fieldProps }: Options) {
     return createCompositeSetting<string>({
         defaultValue,
         AdminComponent: ({ state, updateState }) => (
             <BlocksFinalForm<{ value: typeof state }>
                 onSubmit={({ value }) => updateState(value ?? "")}
                 initialValues={{ value: state || undefined }}
             >
-                <TextField name="value" {...fieldProps} />
+                <TextField name="value" {...legacyFieldProps} {...fieldProps} />
             </BlocksFinalForm>
         ),
     });