Inline React state types to improve Preact compat (#1628)

packages/react-cosmos-core/src/utils/state.ts

@@ -1 +1,5 @@
-export type StateUpdater<T> = (prevState: T) => T;
+export type StateUpdater<S> = (prevState: S) => S;
+
+export type SetStateAction<S> = S | StateUpdater<S>;
+
+export type Dispatch<A> = (value: A) => void;

packages/react-cosmos-renderer/src/fixture/useFixtureInput/useFixtureInput.ts

@@ -1,11 +1,12 @@
+import { Dispatch, SetStateAction } from 'react-cosmos-core';
 import { useCurrentInputValue } from './useCurrentInputValue.js';
 import { useInputFixtureState } from './useInputFixtureState.js';
 import { useSetInputValue } from './useSetInputValue.js';
 
 export function useFixtureInput<T>(
   inputName: string,
   defaultValue: T
-): [T, React.Dispatch<React.SetStateAction<T>>] {
+): [T, Dispatch<SetStateAction<T>>] {
   useInputFixtureState(inputName, defaultValue);
   const currentValue = useCurrentInputValue(inputName, defaultValue);
   const setValue = useSetInputValue(inputName, defaultValue);

packages/react-cosmos-renderer/src/fixture/useFixtureInput/useSetInputValue.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import {
+  Dispatch,
   InputsFixtureState,
+  SetStateAction,
   createValue,
   extendWithValue,
 } from 'react-cosmos-core';
@@ -9,7 +11,7 @@ import { useFixtureState } from '../useFixtureState.js';
 export function useSetInputValue<T>(
   inputName: string,
   defaultValue: T
-): React.Dispatch<React.SetStateAction<T>> {
+): Dispatch<SetStateAction<T>> {
   const [, setFixtureState] = useFixtureState<InputsFixtureState>('inputs');
   return React.useCallback(
     stateChange => {

packages/react-cosmos-renderer/src/fixture/useFixtureInput/useValue.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react-cosmos-core';
 import { useFixtureInput } from './useFixtureInput.js';
 
 type Opts<T> = {
@@ -9,6 +10,6 @@ type Opts<T> = {
 export function useValue<T>(
   inputName: string,
   opts: Opts<T>
-): [T, React.Dispatch<React.SetStateAction<T>>] {
+): [T, Dispatch<SetStateAction<T>>] {
   return useFixtureInput(inputName, opts.defaultValue);
 }

packages/react-cosmos-ui/src/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.tsx

@@ -1,14 +1,12 @@
 import { isEqual } from 'lodash-es';
 import React, {
-  Dispatch,
   ReactNode,
-  SetStateAction,
   useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import { Viewport } from 'react-cosmos-core';
+import { Dispatch, SetStateAction, Viewport } from 'react-cosmos-core';
 import styled, { css } from 'styled-components';
 import { useDrag } from '../../../hooks/useDrag.js';
 import { grey64, grey8 } from '../../../style/colors.js';

packages/react-cosmos-ui/src/plugins/ResponsivePreview/index.tsx

@@ -1,5 +1,9 @@
-import React, { SetStateAction } from 'react';
-import { Viewport, ViewportFixtureState } from 'react-cosmos-core';
+import React from 'react';
+import {
+  SetStateAction,
+  Viewport,
+  ViewportFixtureState,
+} from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
 import { RendererCoreSpec } from '../RendererCore/spec.js';
 import { StorageSpec } from '../Storage/spec.js';