Merge branch 'main' into next

.changeset/twenty-jars-divide.md

@@ -0,0 +1,26 @@
+---
+"@comet/admin": minor
+---
+
+Add the ability to disable individual `CheckboxListField` and `RadioGroupField` options
+
+```tsx
+const options = [
+    {
+        label: "Selectable",
+        value: "selectable",
+    },
+    {
+        label: "Disabled",
+        value: "disabled",
+        disabled: true,
+    },
+];
+
+const FormFields = () => (
+    <>
+        <CheckboxListField label="Checkbox List" name="checkboxList" options={options} />
+        <RadioGroupField label="Radio Group" name="radioGroup" fullWdth options={options} />
+    </>
+);
+```

demo/admin/.eslintrc.json

@@ -2,6 +2,7 @@
     "extends": "@comet/eslint-config/react",
     "ignorePatterns": ["schema.json", "src/fragmentTypes.json", "dist/**", "src/**/*.generated.ts"],
     "rules": {
-        "@calm/react-intl/missing-formatted-message": "off"
+        "@calm/react-intl/missing-formatted-message": "off",
+        "react/react-in-jsx-scope": "off"
     }
 }

demo/admin/src/App.tsx

@@ -27,7 +27,7 @@ import { ImportFromUnsplash } from "@src/dam/ImportFromUnsplash";
 import { pageTreeCategories } from "@src/pageTree/pageTreeCategories";
 import { theme } from "@src/theme";
 import { HTML5toTouch } from "rdndmb-html5-to-touch";
-import * as React from "react";
+import { Component, Fragment } from "react";
 import { DndProvider } from "react-dnd-multi-backend";
 import * as ReactDOM from "react-dom";
 import { FormattedMessage, IntlProvider } from "react-intl";
@@ -54,7 +54,7 @@ const config = createConfig();
 const apolloClient = createApolloClient(config.apiUrl);
 const apiClient = createHttpClient(config.apiUrl);
 
-class App extends React.Component {
+class App extends Component {
     public static render(baseEl: Element): void {
         ReactDOM.render(<App />, baseEl);
     }
@@ -111,7 +111,7 @@ class App extends React.Component {
                                                             pageTreeDocumentTypes={pageTreeDocumentTypes}
                                                             additionalPageTreeNodeFragment={additionalPageTreeNodeFieldsFragment}
                                                         >
-                                                            <React.Fragment>
+                                                            <Fragment>
                                                                 <GlobalStyle />
                                                                 <ContentScopeProvider>
                                                                     {({ match }) => (
@@ -141,7 +141,7 @@ class App extends React.Component {
                                                                         </Switch>
                                                                     )}
                                                                 </ContentScopeProvider>
-                                                            </React.Fragment>
+                                                            </Fragment>
                                                         </CmsBlockContextProvider>
                                                     </SnackbarProvider>
                                                 </DndProvider>

demo/admin/src/common/ComponentDemo.tsx

@@ -43,7 +43,7 @@ import {
 } from "@comet/blocks-admin";
 import { DamImageBlock, FinalFormToggleButtonGroup, PixelImageBlock } from "@comet/cms-admin";
 import { Box, FormControlLabel, Grid, MenuItem, Typography } from "@mui/material";
-import * as React from "react";
+import { ReactNode, useState } from "react";
 
 import { RichTextBlock } from "./blocks/RichTextBlock";
 
@@ -76,12 +76,12 @@ const ColumnsBlock = createColumnsBlock({
 });
 
 interface CustomSelectItemProps {
-    icon: React.ReactNode;
-    primary: React.ReactNode;
-    secondary: React.ReactNode;
+    icon: ReactNode;
+    primary: ReactNode;
+    secondary: ReactNode;
 }
 
-function CustomSelectItem({ icon, primary, secondary }: CustomSelectItemProps): React.ReactElement {
+function CustomSelectItem({ icon, primary, secondary }: CustomSelectItemProps) {
     return (
         <Grid container spacing={4} alignItems="center">
             <Grid item>
@@ -99,13 +99,13 @@ function CustomSelectItem({ icon, primary, secondary }: CustomSelectItemProps):
     );
 }
 
-export function ComponentDemo(): React.ReactElement {
-    const [optionalBlockState, setOptionalBlockState] = React.useState(OptionalRichTextBlock.defaultValues());
-    const [pixelImageBlockState, setPixelImageBlockState] = React.useState(PixelImageBlock.defaultValues());
-    const [listBlockState, setListBlockState] = React.useState(ListBlock.defaultValues());
-    const [blocksBlockState, setBlocksBlockState] = React.useState(BlocksBlock.defaultValues());
-    const [columnsBlockState, setColumnsBlockState] = React.useState(ColumnsBlock.defaultValues());
-    const [imageBlockState, setImageBlockState] = React.useState(DamImageBlock.defaultValues());
+export function ComponentDemo() {
+    const [optionalBlockState, setOptionalBlockState] = useState(OptionalRichTextBlock.defaultValues());
+    const [pixelImageBlockState, setPixelImageBlockState] = useState(PixelImageBlock.defaultValues());
+    const [listBlockState, setListBlockState] = useState(ListBlock.defaultValues());
+    const [blocksBlockState, setBlocksBlockState] = useState(BlocksBlock.defaultValues());
+    const [columnsBlockState, setColumnsBlockState] = useState(ColumnsBlock.defaultValues());
+    const [imageBlockState, setImageBlockState] = useState(DamImageBlock.defaultValues());
 
     return (
         <Stack topLevelTitle="Component demo">

demo/admin/src/common/ContentScopeProvider.tsx

@@ -10,7 +10,6 @@ import {
     useSitesConfig,
 } from "@comet/cms-admin";
 import { SitesConfig } from "@src/config";
-import React from "react";
 
 type Domain = "main" | "secondary" | string;
 type Language = "en" | string;
@@ -30,7 +29,7 @@ export function useContentScopeConfig(p: ContentScopeConfigProps): void {
     return useContentScopeConfigLibrary(p);
 }
 
-const ContentScopeProvider: React.FC<Pick<ContentScopeProviderProps, "children">> = ({ children }) => {
+const ContentScopeProvider = ({ children }: Pick<ContentScopeProviderProps, "children">) => {
     const sitesConfig = useSitesConfig<SitesConfig>();
     const user = useCurrentUser();
 

demo/admin/src/common/EditPageNode.tsx

@@ -2,7 +2,6 @@ import { gql } from "@apollo/client";
 import { SelectField } from "@comet/admin";
 import { createEditPageNode } from "@comet/cms-admin";
 import { Box, Divider, MenuItem } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 export type { GQLPageTreeNodeAdditionalFieldsFragment } from "./EditPageNode.generated"; //re-export

demo/admin/src/common/MasterHeader.tsx

@@ -1,7 +1,6 @@
 import { BuildEntry, ContentScopeControls, Header, UserHeaderItem } from "@comet/cms-admin";
-import * as React from "react";
 
-const MasterHeader: React.FC = () => {
+const MasterHeader = () => {
     return (
         <Header>
             <ContentScopeControls />

demo/admin/src/common/MasterMenu.tsx

@@ -32,7 +32,6 @@ import { ProductsPage } from "@src/products/generated/ProductsPage";
 import { ManufacturersPage as ManufacturersHandmadePage } from "@src/products/ManufacturersPage";
 import ProductsHandmadePage from "@src/products/ProductsPage";
 import ProductTagsPage from "@src/products/tags/ProductTagsPage";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 import { Redirect, RouteComponentProps } from "react-router-dom";
 

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

@@ -2,7 +2,6 @@ import { createListBlock } from "@comet/blocks-admin";
 import { userGroupAdditionalItemFields } from "@src/userGroups/userGroupAdditionalItemFields";
 import { UserGroupChip } from "@src/userGroups/UserGroupChip";
 import { UserGroupContextMenuItem } from "@src/userGroups/UserGroupContextMenuItem";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { TextLinkBlock } from "./TextLinkBlock";

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

@@ -1,8 +1,8 @@
 import { createSpaceBlock } from "@comet/blocks-admin";
-import * as React from "react";
+import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
-const options: { value: string; label: React.ReactNode }[] = [
+const options: { value: string; label: ReactNode }[] = [
     { value: "d150", label: <FormattedMessage id="spacing.d150" defaultMessage="Dynamic 150" /> },
     { value: "d200", label: <FormattedMessage id="spacing.d200" defaultMessage="Dynamic 200" /> },
     { value: "d250", label: <FormattedMessage id="spacing.d250" defaultMessage="Dynamic 250" /> },

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

@@ -1,5 +1,4 @@
 import { BlockCategory } from "@comet/blocks-admin";
-import React from "react";
 import { FormattedMessage } from "react-intl";
 
 const customBlockCategory = {

demo/admin/src/dam/ImportFromUnsplash.tsx

@@ -2,17 +2,17 @@ import { CancelButton, messages, SaveButton } from "@comet/admin";
 import { useCurrentDamFolder, useDamAcceptedMimeTypes, useDamFileUpload } from "@comet/cms-admin";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import * as React from "react";
+import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { getRandomUnsplashImage, UnsplashImage } from "./getRandomUnsplashImage";
 import UnsplashIcon from "./UnsplashIcon";
 
-export const ImportFromUnsplash: React.FC = () => {
+export const ImportFromUnsplash = () => {
     const { allAcceptedMimeTypes } = useDamAcceptedMimeTypes();
     const { folderId } = useCurrentDamFolder();
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [unsplashImage, setUnsplashImage] = React.useState<UnsplashImage>();
+    const [isOpen, setIsOpen] = useState(false);
+    const [unsplashImage, setUnsplashImage] = useState<UnsplashImage>();
 
     const { uploadFiles } = useDamFileUpload({
         acceptedMimetypes: allAcceptedMimeTypes,

demo/admin/src/dam/UnsplashIcon.tsx

@@ -1,5 +1,4 @@
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import * as React from "react";
 
 export default function UnsplashIcon(props: SvgIconProps): JSX.Element {
     return (

demo/admin/src/dashboard/Dashboard.tsx

@@ -1,14 +1,13 @@
 import { MainContent, Stack, Toolbar } from "@comet/admin";
 import { ContentScopeIndicator, DashboardHeader, LatestBuildsDashboardWidget, useUserPermissionCheck } from "@comet/cms-admin";
 import { Grid } from "@mui/material";
-import * as React from "react";
 import { useIntl } from "react-intl";
 
 import backgroundImage1x from "./[email protected]";
 import backgroundImage2x from "./[email protected]";
 import { LatestContentUpdates } from "./LatestContentUpdates";
 
-const Dashboard: React.FC = () => {
+const Dashboard = () => {
     const intl = useIntl();
     const isAllowed = useUserPermissionCheck();
     return (

demo/admin/src/dashboard/LatestContentUpdates.tsx

@@ -3,7 +3,6 @@ import { LatestContentUpdatesDashboardWidget } from "@comet/cms-admin";
 import { useContentScope } from "@src/common/ContentScopeProvider";
 import { GQLLatestContentUpdatesQueryVariables } from "@src/dashboard/LatestContentUpdates.generated";
 import { categoryToUrlParam } from "@src/pageTree/pageTreeCategories";
-import React from "react";
 
 import { GQLLatestContentUpdatesQuery } from "./LatestContentUpdates.generated";
 

demo/admin/src/links/EditLink.tsx

@@ -16,7 +16,6 @@ import { AdminComponentRoot } from "@comet/blocks-admin";
 import { ContentScopeIndicator, createUsePage, PageName } from "@comet/cms-admin";
 import { IconButton } from "@mui/material";
 import { LinkBlock } from "@src/common/blocks/LinkBlock";
-import * as React from "react";
 import { useIntl } from "react-intl";
 
 import { GQLEditLinkQuery, GQLEditLinkQueryVariables, GQLUpdateLinkMutation, GQLUpdateLinkMutationVariables } from "./EditLink.generated";
@@ -62,7 +61,7 @@ interface Props {
     id: string;
 }
 
-export const EditLink: React.FC<Props> = ({ id }) => {
+export const EditLink = ({ id }: Props) => {
     const intl = useIntl();
     const stackApi = useStackApi();
 

demo/admin/src/links/Link.tsx

@@ -9,7 +9,6 @@ import { GQLLink, GQLLinkInput } from "@src/graphql.generated";
 import { EditLink } from "@src/links/EditLink";
 import { categoryToUrlParam } from "@src/pageTree/pageTreeCategories";
 import gql from "graphql-tag";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 const rootBlocks = {

demo/admin/src/news/blocks/NewsDetailBlock.tsx

@@ -1,7 +1,6 @@
 import { Field, FinalFormInput } from "@comet/admin";
 import { BlockInterface, BlocksFinalForm, createBlockSkeleton } from "@comet/blocks-admin";
 import { NewsDetailBlockData, NewsDetailBlockInput } from "@src/blocks.generated";
-import * as React from "react";
 
 type State = NewsDetailBlockData;
 

demo/admin/src/news/blocks/NewsLinkBlock.tsx

@@ -1,7 +1,6 @@
 import { TextField } from "@comet/admin";
 import { BlockInterface, BlocksFinalForm, createBlockSkeleton, LinkBlockInterface } from "@comet/blocks-admin";
 import { NewsLinkBlockData, NewsLinkBlockInput } from "@src/blocks.generated";
-import * as React from "react";
 
 type State = NewsLinkBlockData;
 

demo/admin/src/news/dependencies/NewsDependency.tsx

@@ -1,6 +1,5 @@
 import { createDependencyMethods, DamImageBlock, DependencyInterface } from "@comet/cms-admin";
 import { NewsContentBlock } from "@src/news/blocks/NewsContentBlock";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 export const NewsDependency: DependencyInterface = {

demo/admin/src/pageTree/pageTreeCategories.tsx

@@ -1,7 +1,6 @@
 import { AllCategories } from "@comet/cms-admin";
 import { GQLPageTreeNodeCategory } from "@src/graphql.generated";
 import { kebabCase, pascalCase } from "change-case";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 export const pageTreeCategories: AllCategories = [

demo/admin/src/pages/EditPage.tsx

@@ -18,7 +18,6 @@ import { Button, IconButton } from "@mui/material";
 import { SeoBlock } from "@src/common/blocks/SeoBlock";
 import { useContentScope } from "@src/common/ContentScopeProvider";
 import { GQLPageTreeNodeCategory } from "@src/graphql.generated";
-import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useRouteMatch } from "react-router";
 
@@ -87,7 +86,7 @@ const usePage = createUsePage({
     `,
 });
 
-export const EditPage: React.FC<Props> = ({ id, category }) => {
+export const EditPage = ({ id, category }: Props) => {
     const intl = useIntl();
     const { pageState, rootBlocksApi, hasChanges, loading, dialogs, pageSaveButton, handleSavePage } = usePage({
         pageId: id,

demo/admin/src/pages/Page.tsx

@@ -8,7 +8,6 @@ import { GQLPageTreeNodeAdditionalFieldsFragment } from "@src/common/EditPageNod
 import { GQLPage, GQLPageInput } from "@src/graphql.generated";
 import { categoryToUrlParam } from "@src/pageTree/pageTreeCategories";
 import gql from "graphql-tag";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { EditPage } from "./EditPage";

demo/admin/src/pages/PageContentBlock.tsx

@@ -9,7 +9,6 @@ import { NewsDetailBlock } from "@src/news/blocks/NewsDetailBlock";
 import { userGroupAdditionalItemFields } from "@src/userGroups/userGroupAdditionalItemFields";
 import { UserGroupChip } from "@src/userGroups/UserGroupChip";
 import { UserGroupContextMenuItem } from "@src/userGroups/UserGroupContextMenuItem";
-import * as React from "react";
 
 import { ColumnsBlock } from "./blocks/ColumnsBlock";
 import { FullWidthImageBlock } from "./blocks/FullWidthImageBlock";

demo/admin/src/pages/blocks/ColumnsBlock.tsx

@@ -9,7 +9,6 @@ import {
 import { DamImageBlock } from "@comet/cms-admin";
 import { HeadlineBlock } from "@src/common/blocks/HeadlineBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 const ColumnsContentBlock = createBlocksBlock({

demo/admin/src/pages/blocks/FullWidthImageBlock.tsx

@@ -3,7 +3,6 @@ import { createCompositeBlock, createOptionalBlock } from "@comet/blocks-admin";
 import { DamImageBlock } from "@comet/cms-admin";
 import { customBlockCategory } from "@src/common/blocks/customBlockCategories";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 const FullWidthImageContentBlock = createOptionalBlock(RichTextBlock, {

demo/admin/src/pages/blocks/MediaBlock.tsx

@@ -1,6 +1,5 @@
 import { BlockCategory, createOneOfBlock } from "@comet/blocks-admin";
 import { DamImageBlock, DamVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 export const MediaBlock = createOneOfBlock({

demo/admin/src/pages/blocks/TeaserBlock.tsx

@@ -2,7 +2,6 @@ import { BlockCategory, createCompositeBlock } from "@comet/blocks-admin";
 import { DamImageBlock } from "@comet/cms-admin";
 import { HeadlineBlock } from "@src/common/blocks/HeadlineBlock";
 import { LinkListBlock } from "@src/common/blocks/LinkListBlock";
-import React from "react";
 import { FormattedMessage } from "react-intl";
 
 const TeaserBlock = createCompositeBlock(

demo/admin/src/pages/blocks/VideoBlock.tsx

@@ -1,6 +1,5 @@
 import { BlockCategory, createOneOfBlock } from "@comet/blocks-admin";
 import { DamVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 export const VideoBlock = createOneOfBlock({

demo/admin/src/pages/mainMenu/MainMenu.tsx

@@ -1,6 +1,5 @@
 import { gql } from "@apollo/client";
 import { Loading, Selected, Stack, StackPage, StackSwitch } from "@comet/admin";
-import * as React from "react";
 import { useIntl } from "react-intl";
 
 import EditMainMenuItem, { editMainMenuItemFragment, GQLEditMainMenuItemFragment } from "./components/EditMainMenuItem";
@@ -16,7 +15,7 @@ const MAIN_MENU_ITEM_QUERY = gql`
     ${editMainMenuItemFragment}
 `;
 
-const MainMenu: React.FunctionComponent = () => {
+const MainMenu = () => {
     const intl = useIntl();
 
     return (