Remove DispatchSetStateAction, SetStateAction and SetStateFn

.changeset/six-suns-join.md

@@ -18,6 +18,9 @@ Therefore, the `@comet/blocks-admin` is merged into this package.
     -   `Collapsible`
     -   `CollapsibleSwitchButtonHeader`
     -   `usePromise`
+    -   `DispatchSetStateAction` (use `Dispatch<SetStateAction<T>>` from `react` instead)
+    -   `SetStateAction`
+    -   `SetStateFn`
 -   Multiple exports that were too generic have been renamed
     -   `createCompositeSetting` -> `createCompositeBlockField`
     -   `createCompositeSettings` -> `createCompositeBlockFields`

packages/admin/cms-admin/src/blocks/factories/createBlocksBlock.tsx

@@ -12,7 +12,7 @@ import {
 import { Add, Copy, Delete, Invisible, Paste, Visible } from "@comet/admin-icons";
 import { Box, Checkbox, FormControlLabel, IconButton, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { ChangeEvent, FunctionComponent, ReactNode, useCallback, useEffect, useState } from "react";
+import { ChangeEvent, Dispatch, FunctionComponent, ReactNode, SetStateAction, useCallback, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { v4 as uuid } from "uuid";
 
@@ -29,7 +29,7 @@ import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
 import { deduplicateBlockDependencies } from "../helpers/deduplicateBlockDependencies";
 import { HoverPreviewComponent } from "../iframebridge/HoverPreviewComponent";
 import { SelectPreviewComponent } from "../iframebridge/SelectPreviewComponent";
-import { BlockDependency, BlockInterface, BlockState, DispatchSetStateAction, PreviewContent } from "../types";
+import { BlockDependency, BlockInterface, BlockState, PreviewContent } from "../types";
 import { resolveNewState } from "../utils";
 import { parallelAsyncEvery } from "../utils/parallelAsyncEvery";
 
@@ -444,7 +444,7 @@ export function createBlocksBlock<AdditionalItemFields extends Record<string, un
 
             const createUpdateSubBlocksFn = useCallback(
                 (blockKey: string) => {
-                    const updateSubBlocksFn: DispatchSetStateAction<unknown> = (setStateAction) => {
+                    const updateSubBlocksFn: Dispatch<SetStateAction<unknown>> = (setStateAction) => {
                         updateState((prevState) => ({
                             ...prevState,
                             blocks: prevState.blocks.map((c) =>

packages/admin/cms-admin/src/blocks/factories/createColumnsBlock.tsx

@@ -2,7 +2,7 @@ import { Field, StackPage, StackPageTitle, StackSwitch, StackSwitchApiContext }
 import { Add, Copy, Delete, Invisible, Paste, Visible } from "@comet/admin-icons";
 import { Checkbox, Divider, FormControlLabel, IconButton, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { ReactNode } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { FormattedMessage, IntlShape, useIntl } from "react-intl";
 import { v4 as uuid } from "uuid";
 
@@ -17,7 +17,7 @@ import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
 import { deduplicateBlockDependencies } from "../helpers/deduplicateBlockDependencies";
 import { HoverPreviewComponent } from "../iframebridge/HoverPreviewComponent";
 import { SelectPreviewComponent } from "../iframebridge/SelectPreviewComponent";
-import { BlockCategory, BlockDependency, BlockInputApi, BlockInterface, CustomBlockCategory, DispatchSetStateAction, PreviewContent } from "../types";
+import { BlockCategory, BlockDependency, BlockInputApi, BlockInterface, CustomBlockCategory, PreviewContent } from "../types";
 import { resolveNewState } from "../utils";
 import { parallelAsyncEvery } from "../utils/parallelAsyncEvery";
 import { FinalFormColumnsSelect } from "./columnsBlock/FinalFormColumnsSelect";
@@ -209,7 +209,7 @@ export function createColumnsBlock<T extends BlockInterface>({
         AdminComponent: ({ state, updateState }) => {
             const intl = useIntl();
             const groupLayoutsByColumnsApi = createGroupLayoutsByColumnsApi(layouts);
-            const handleListBlockAdminChange: DispatchSetStateAction<ListBlockState<T>> = (listBlockSetStateAction) => {
+            const handleListBlockAdminChange: Dispatch<SetStateAction<ListBlockState<T>>> = (listBlockSetStateAction) => {
                 updateState((prevState) => {
                     const listBlockState = resolveNewState({
                         prevState: { blocks: prevState.columns },

packages/admin/cms-admin/src/blocks/factories/createOneOfBlock.tsx

@@ -2,7 +2,7 @@ import { Field, FieldContainer, FinalFormRadio, SelectField } from "@comet/admin
 import { Box, Divider, FormControlLabel, ToggleButton as MuiToggleButton, ToggleButtonGroup as MuiToggleButtonGroup } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import isEqual from "lodash.isequal";
-import { ReactNode, useCallback } from "react";
+import { Dispatch, ReactNode, SetStateAction, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { useAdminComponentPaper } from "../common/AdminComponentPaper";
@@ -11,7 +11,7 @@ import { BlocksFinalForm } from "../form/BlocksFinalForm";
 import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
 import { HoverPreviewComponent } from "../iframebridge/HoverPreviewComponent";
 import { SelectPreviewComponent } from "../iframebridge/SelectPreviewComponent";
-import { BlockCategory, BlockInterface, BlockPreviewStateInterface, BlockState, CustomBlockCategory, DispatchSetStateAction } from "../types";
+import { BlockCategory, BlockInterface, BlockPreviewStateInterface, BlockState, CustomBlockCategory } from "../types";
 import { resolveNewState } from "../utils";
 import { parallelAsyncEvery } from "../utils/parallelAsyncEvery";
 
@@ -335,7 +335,7 @@ export const createOneOfBlock = <T extends boolean = boolean>({
             const createUpdateSubBlocksFn = useCallback(
                 (blockType: string) => {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const updateSubBlocksFn: DispatchSetStateAction<any> = (setStateAction) => {
+                    const updateSubBlocksFn: Dispatch<SetStateAction<any>> = (setStateAction) => {
                         updateState((prevState) => ({
                             ...prevState,
                             attachedBlocks: prevState.attachedBlocks.map((c) =>

packages/admin/cms-admin/src/blocks/factories/createOptionalBlock.tsx

@@ -1,13 +1,13 @@
 import { Box, Divider } from "@mui/material";
 import isEqual from "lodash.isequal";
-import { ReactNode } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { Route, useRouteMatch } from "react-router";
 
 import { AdminComponentPaper } from "../common/AdminComponentPaper";
 import { Collapsible } from "../common/Collapsible";
 import { CollapsibleSwitchButtonHeader } from "../common/CollapsibleSwitchButtonHeader";
 import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
-import { BlockInputApi, BlockInterface, BlockOutputApi, BlockState, DispatchSetStateAction } from "../types";
+import { BlockInputApi, BlockInterface, BlockOutputApi, BlockState } from "../types";
 import { resolveNewState } from "../utils";
 
 // @TODO: move to general types
@@ -97,7 +97,7 @@ export function createOptionalBlock<T extends BlockInterface>(
             const match = useRouteMatch();
 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const updateSubBlocksFn: DispatchSetStateAction<any> = (setStateAction) => {
+            const updateSubBlocksFn: Dispatch<SetStateAction<any>> = (setStateAction) => {
                 updateState((prevState) => ({
                     ...prevState,
                     block: resolveNewState({ prevState: prevState.block ? prevState.block : decoratedBlock.defaultValues(), setStateAction }),

packages/admin/cms-admin/src/blocks/factories/listBlock/createUseAdminComponent.tsx

@@ -1,11 +1,11 @@
 import { UndoSnackbar, useSnackbarApi } from "@comet/admin";
-import { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { ChangeEvent, Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { v4 as uuid } from "uuid";
 
 import { CannotPasteBlockDialog } from "../../clipboard/CannotPasteBlockDialog";
 import { ClipboardContent, useBlockClipboard } from "../../clipboard/useBlockClipboard";
-import { BlockAdminComponentProps, BlockInterface, BlockState, DispatchSetStateAction } from "../../types";
+import { BlockAdminComponentProps, BlockInterface, BlockState } from "../../types";
 import { resolveNewState } from "../../utils";
 import { ListBlockAdditionalItemField, ListBlockState } from "../createListBlock";
 
@@ -23,7 +23,7 @@ interface ListBlockUseAdminComponentApi<T extends BlockInterface> {
     deleteBlocks: (blockKeys: string[]) => void;
     deleteAllSelectedBlocks: () => void;
     addNewBlock: (beforeIndex?: number | undefined) => string;
-    createUpdateSubBlocksFn: (blockKey: string) => DispatchSetStateAction<BlockState<T>>;
+    createUpdateSubBlocksFn: (blockKey: string) => Dispatch<SetStateAction<BlockState<T>>>;
     totalVisibleBlocks: number;
     updateClipboardContent: (content: ClipboardContent) => Promise<void>;
     pasteBlock: (insertAt: number) => Promise<void>;
@@ -161,7 +161,7 @@ export function createUseAdminComponent<T extends BlockInterface>({
 
         const createUpdateSubBlocksFn = useCallback(
             (blockKey: string) => {
-                const updateSubBlocksFn: DispatchSetStateAction<BlockState<T>> = (setStateAction) => {
+                const updateSubBlocksFn: Dispatch<SetStateAction<BlockState<T>>> = (setStateAction) => {
                     updateState((prevState) => ({
                         ...prevState,
                         blocks: prevState.blocks.map((c) =>

packages/admin/cms-admin/src/blocks/helpers/composeBlocks/composeBlocks.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { Dispatch, SetStateAction } from "react";
+
 import { BlockPreviewContent } from "../../common/blockRow/BlockPreviewContent";
-import { BlockContext, BlockDependency, BlockInterface, BlockMethods, DispatchSetStateAction, PreviewContent, SetStateAction } from "../../types";
+import { BlockContext, BlockDependency, BlockInterface, BlockMethods, PreviewContent } from "../../types";
 import { resolveNewState } from "../../utils";
 import { deduplicateBlockDependencies } from "../deduplicateBlockDependencies";
 import { isBlockInterface } from "../isBlockInterface";
@@ -34,8 +36,8 @@ export type ComposeBlocksApi<C extends CompositeBlocksConfig> = {
     block: BlockMethods<DataMapInputApi<C>, DataMapState<C>, DataMapOutputApi<C>>;
 
     api: {
-        adminComponentProps: (props: { state: DataMapState<C>; updateState: DispatchSetStateAction<DataMapState<C>> }) => AdminComponentPropsMap<C>;
-        adminComponents: (props: { state: DataMapState<C>; updateState: DispatchSetStateAction<DataMapState<C>> }) => AdminComponentsMap<C>;
+        adminComponentProps: (props: { state: DataMapState<C>; updateState: Dispatch<SetStateAction<DataMapState<C>>> }) => AdminComponentPropsMap<C>;
+        adminComponents: (props: { state: DataMapState<C>; updateState: Dispatch<SetStateAction<DataMapState<C>>> }) => AdminComponentsMap<C>;
         previews: (state: DataMapState<C>, ctx?: BlockContext) => PreviewMap<C>;
         childBlockCounts: (state: DataMapState<C>) => ChildBlockCountMap<C>;
         isValids: (state: DataMapState<C>) => IsValidMap<C>;

packages/admin/cms-admin/src/blocks/helpers/composeBlocks/types.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { ReactNode } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 
-import { AnonymousBlockInterface, BlockInputApi, BlockInterface, BlockOutputApi, BlockState, DispatchSetStateAction } from "../../types";
+import { AnonymousBlockInterface, BlockInputApi, BlockInterface, BlockOutputApi, BlockState } from "../../types";
 import { Flatten, KeysMatching } from "./utility-types";
 
 export interface CompositeOptions {
@@ -64,7 +64,7 @@ export type AdminComponentPropsMap<C extends CompositeBlocksConfig> = AdminCompo
 type AdminComponentPropsMapByCompositeBlocks<C extends CompositeBlocks> = {
     [K in keyof C]: {
         state: BlockState<C[K]>;
-        updateState: DispatchSetStateAction<BlockState<C[K]>>;
+        updateState: Dispatch<SetStateAction<BlockState<C[K]>>>;
     };
 };
 

packages/admin/cms-admin/src/blocks/helpers/decomposeUpdateStateAction.ts

@@ -1,22 +1,23 @@
-import { DispatchSetStateAction, SetStateAction } from "../types";
+import { Dispatch, SetStateAction } from "react";
+
 import { resolveNewState } from "../utils";
 
-type InferedState<T> = T extends DispatchSetStateAction<infer S> ? S : never;
+type InferedState<T> = T extends Dispatch<SetStateAction<infer S>> ? S : never;
 
 /**
  * Modify a given dispatch action to update only a whitelisted subset of attributes
  * State of dispatch action must be an object
  * In the example below the newly returned dispatch function would only update "bar", values under attribute "foo" are not updated
  *
- * @param action  f.i. pass a DispatchSetStateAction which updates the state {foo: number, bar: string}
+ * @param action  f.i. pass a Dispatch<SetStateAction> which updates the state {foo: number, bar: string}
  * @param whiteKeys f.i. define ["bar"] as whitelist
  */
 export function decomposeUpdateStateAction<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    D extends DispatchSetStateAction<any>,
+    D extends Dispatch<SetStateAction<any>>,
     S extends InferedState<D>,
     Whitelisted extends keyof S,
->(action: D, whiteKeys: Array<Whitelisted>): DispatchSetStateAction<Pick<S, Whitelisted>> {
+>(action: D, whiteKeys: Array<Whitelisted>): Dispatch<SetStateAction<Pick<S, Whitelisted>>> {
     return function decomposedUpdateStateAction(setStateAction: SetStateAction<Pick<S, Whitelisted>>): void {
         action((prevState: S) => {
             const stateWhitelistedToUpdate = Object.entries(prevState).reduce((acc, [key, value]) => {

packages/admin/cms-admin/src/blocks/types.tsx

@@ -1,9 +1,6 @@
-import { ComponentType, ReactElement, ReactNode } from "react";
+import { ComponentType, Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
 import { FormattedMessage, MessageDescriptor } from "react-intl";
 
-export type SetStateFn<S> = (prevState: S) => S;
-export type SetStateAction<S> = S | SetStateFn<S>;
-export type DispatchSetStateAction<S> = (setStateAction: SetStateAction<S>) => void;
 export interface BlockPreviewContext {
     showVisibleOnly?: boolean;
     parentUrl: string;
@@ -21,7 +18,7 @@ export interface BlockPreviewStateInterface {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface BlockAdminComponentProps<S = any> {
     state: S;
-    updateState: DispatchSetStateAction<S>;
+    updateState: Dispatch<SetStateAction<S>>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/admin/cms-admin/src/blocks/utils.ts

@@ -1,13 +1,13 @@
-import { SetStateAction, SetStateFn } from "./types";
+import { SetStateAction } from "react";
 
 interface ResolveNewStateOptions<S> {
     prevState: S;
     setStateAction: SetStateAction<S>;
 }
 export function resolveNewState<S>({ prevState, setStateAction }: ResolveNewStateOptions<S>): S {
     // type guard
-    function actionIsFunction(action: SetStateAction<S>): action is SetStateFn<S> {
-        return typeof (action as SetStateFn<S>) === "function";
+    function actionIsFunction(action: SetStateAction<S>): action is (prevState: S) => S {
+        return typeof action === "function";
     }
 
     if (actionIsFunction(setStateAction)) {

packages/admin/cms-admin/src/index.ts

@@ -91,12 +91,9 @@ export type {
     BlockPreviewContext,
     BlockPreviewStateInterface,
     BlockState,
-    DispatchSetStateAction,
     LinkBlockInterface,
     ReplaceDependencyObject,
     RootBlockInterface,
-    SetStateAction,
-    SetStateFn,
 } from "./blocks/types";
 export type { CustomBlockCategory } from "./blocks/types";
 export { BlockCategory, blockCategoryLabels } from "./blocks/types";

packages/admin/cms-admin/src/pages/createUsePage.tsx

@@ -1,11 +1,11 @@
 import { ApolloError, gql, TypedDocumentNode, useApolloClient, useQuery } from "@apollo/client";
 import { messages, SaveButton, SaveButtonProps } from "@comet/admin";
 import isEqual from "lodash.isequal";
-import { createElement, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { createElement, Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { v4 as uuid } from "uuid";
 
-import { BindBlockAdminComponent, BlockInterface, BlockState, DispatchSetStateAction } from "../blocks/types";
+import { BindBlockAdminComponent, BlockInterface, BlockState } from "../blocks/types";
 import { resolveNewState } from "../blocks/utils";
 import { parallelAsyncEvery } from "../blocks/utils/parallelAsyncEvery";
 import { GQLDocumentInterface } from "../graphql.generated";
@@ -336,7 +336,7 @@ export const createUsePage: CreateUsePage =
 
             // allow to create an updateHandler for each block-node
             const createHandleUpdate = useCallback((key: string) => {
-                const handleUpdateState: DispatchSetStateAction<BlockInterface> = (setStateAction) => {
+                const handleUpdateState: Dispatch<SetStateAction<BlockInterface>> = (setStateAction) => {
                     setPageState((s) => {
                         if (!s || !s.document) {
                             return;