Fix React typings (#8346)

Fix React typings

Co-authored-by: Norbert de Langen <ndelangen@me.com>

addons/a11y/src/components/ColorBlindness.tsx

@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { ReactNode, useState } from 'react';
+import React, { FunctionComponent, ReactNode, useState } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 
@@ -79,7 +79,7 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
   })),
 ];
 
-export const ColorBlindness: React.FC = () => {
+export const ColorBlindness: FunctionComponent = () => {
   const [active, setActiveState] = useState(null);
 
   const setActive = (activeState: string | null): void => {

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import { connect } from 'react-redux';
 import { styled, themes, convert } from '@storybook/theming';
 import memoize from 'memoizerific';
@@ -100,7 +100,7 @@ class HighlightToggle extends Component<ToggleProps> {
     elementsToHighlight: [],
   };
 
-  private checkBoxRef = React.createRef<HTMLInputElement>();
+  private checkBoxRef = createRef<HTMLInputElement>();
 
   componentDidMount() {
     const { elementsToHighlight, highlightedElementsMap } = this.props;

addons/actions/src/manager.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';

addons/contexts/src/manager/components/ToolBar.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, memo } from 'react';
 import { Separator } from '@storybook/components';
 import { ToolBarControl } from './ToolBarControl';
 import { ContextNode, FCNoChildren, SelectionState } from '../../shared/types.d';
@@ -9,7 +9,7 @@ type ToolBar = FCNoChildren<{
   setSelected: ComponentProps<typeof ToolBarControl>['setSelected'];
 }>;
 
-export const ToolBar: ToolBar = React.memo(({ nodes, state, setSelected }) =>
+export const ToolBar: ToolBar = memo(({ nodes, state, setSelected }) =>
   nodes.length ? (
     <>
       <Separator />

addons/contexts/src/manager/components/ToolBarControl.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ToolBarMenu } from './ToolBarMenu';
 import { OPT_OUT } from '../../shared/constants';
-import { ContextNode, FCNoChildren, Omit } from '../../shared/types.d';
+import { ContextNode, FCNoChildren } from '../../shared/types.d';
 
 type ToolBarControl = FCNoChildren<
   Omit<
@@ -22,7 +22,7 @@ export const ToolBarControl: ToolBarControl = ({
   selected,
   setSelected,
 }) => {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
   const paramNames = params.map(({ name }) => name);
   const activeName =
     // validate the integrity of the selected name

addons/contexts/src/manager/components/ToolBarMenuOptions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TooltipLinkList } from '@storybook/components';
 import { OPT_OUT } from '../../shared/constants';
 import { FCNoChildren } from '../../shared/types.d';

addons/contexts/src/preview/frameworks/react.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import { createElement, ReactElement } from 'react';
 import { createAddonDecorator, Render } from '../../index';
 import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
 
 /**
  * This is the framework specific bindings for React.
  * '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode).
  */
-export const renderReact: Render<React.ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
+export const renderReact: Render<ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
   const { getRendererFrom } = ContextsPreviewAPI();
-  return getRendererFrom(React.createElement)(contextNodes, propsMap, getStoryVNode);
+  return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode);
 };
 
 export const withContexts = createAddonDecorator(renderReact);

addons/contexts/src/shared/types.d.ts

@@ -6,7 +6,6 @@ export { API as ManagerAPI } from '@storybook/api';
 // helpers
 export declare type AnyFunctionReturns<T> = (...arg: any[]) => T;
 export declare type FCNoChildren<P> = FunctionComponent<{ children?: never } & P>;
-export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 export declare type GenericProp = null | {
   readonly [key: string]: unknown;
 };

addons/cssresources/src/register.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { addons, types } from '@storybook/addons';
 
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';

addons/design-assets/src/register.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';

addons/docs/src/blocks/Anchor.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
 
 export interface AnchorProps {
   storyId: string;
 }
 
-export const Anchor: React.FC<AnchorProps> = ({ storyId, children }) => (
+export const Anchor: FunctionComponent<AnchorProps> = ({ storyId, children }) => (
   <div id={anchorBlockIdFromId(storyId)}>{children}</div>
 );

addons/docs/src/blocks/Description.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './shared';
@@ -66,7 +66,7 @@ ${getDocgen(target) || ''}
   }
 };
 
-const DescriptionContainer: React.FunctionComponent<DescriptionProps> = props => (
+const DescriptionContainer: FunctionComponent<DescriptionProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const { markdown } = getDescriptionProps(props, context);

addons/docs/src/blocks/DocsContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 import { document } from 'global';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
@@ -15,7 +15,7 @@ interface DocsContainerProps {
 interface CodeOrSourceProps {
   className?: string;
 }
-export const CodeOrSource: React.FC<CodeOrSourceProps> = props => {
+export const CodeOrSource: FunctionComponent<CodeOrSourceProps> = props => {
   const { className, children, ...rest } = props;
   // markdown-to-jsx does not add className to inline code
   if (
@@ -41,17 +41,14 @@ const defaultComponents = {
   code: CodeOrSource,
 };
 
-export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
-  context,
-  children,
-}) => {
+export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
   const { id: storyId = null, parameters = {} } = context || {};
   const options = parameters.options || {};
   const theme = ensureTheme(options.theme);
   const { components: userComponents = null } = parameters.docs || {};
   const components = { ...defaultComponents, ...userComponents };
 
-  React.useEffect(() => {
+  useEffect(() => {
     let element = document.getElementById(anchorBlockIdFromId(storyId));
     if (!element) {
       element = document.getElementById(storyBlockIdFromId(storyId));

addons/docs/src/blocks/DocsContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Context, createContext } from 'react';
 
 export interface DocsContextProps {
   id?: string;
@@ -16,4 +16,4 @@ export interface DocsContextProps {
   forceRender?: () => void;
 }
 
-export const DocsContext: React.Context<DocsContextProps> = React.createContext({});
+export const DocsContext: Context<DocsContextProps> = createContext({});

addons/docs/src/blocks/DocsPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 import { parseKind } from '@storybook/router';
 import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components';
@@ -79,7 +79,7 @@ const defaultStoriesSlot: StoriesSlot = stories => {
 const StoriesHeading = H2;
 const StoryHeading = H3;
 
-const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
+const DocsStory: FunctionComponent<DocsStoryProps> = ({
   id,
   name,
   expanded = true,
@@ -97,7 +97,7 @@ const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
   </Anchor>
 );
 
-export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
+export const DocsPage: FunctionComponent<DocsPageProps> = ({
   titleSlot = defaultTitleSlot,
   subtitleSlot = defaultSubtitleSlot,
   descriptionSlot = defaultDescriptionSlot,

addons/docs/src/blocks/Meta.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 
 type Decorator = (...args: any) => any;
 
@@ -14,4 +14,4 @@ interface MetaProps {
  * and gets transformed into a default export underneath the hood.
  * It doesn't actually render anything.
  */
-export const Meta: React.FunctionComponent<MetaProps> = props => null;
+export const Meta: FunctionComponent<MetaProps> = props => null;

addons/docs/src/blocks/Preview.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNodeArray } from 'react';
+import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
 import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
 import { getSourceProps } from './Source';
 import { DocsContext, DocsContextProps } from './DocsContext';
@@ -14,20 +14,16 @@ type PreviewProps = PurePreviewProps & {
 };
 
 const getPreviewProps = (
-  {
-    withSource = SourceState.CLOSED,
-    children,
-    ...props
-  }: PreviewProps & { children?: React.ReactNode },
+  { withSource = SourceState.CLOSED, children, ...props }: PreviewProps & { children?: ReactNode },
   { mdxStoryNameToId, storyStore }: DocsContextProps
 ): PurePreviewProps => {
   if (withSource === SourceState.NONE && !children) {
     return props;
   }
   const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
   const stories = childArray.filter(
-    (c: React.ReactElement) => c.props && (c.props.id || c.props.name)
-  ) as React.ReactElement[];
+    (c: ReactElement) => c.props && (c.props.id || c.props.name)
+  ) as ReactElement[];
   const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
   const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
   return {
@@ -37,7 +33,7 @@ const getPreviewProps = (
   };
 };
 
-export const Preview: React.FunctionComponent<PreviewProps> = props => (
+export const Preview: FunctionComponent<PreviewProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const previewProps = getPreviewProps(props, context);

addons/docs/src/blocks/Props.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './shared';
@@ -44,7 +44,7 @@ export const getPropsTableProps = (
   }
 };
 
-const PropsContainer: React.FunctionComponent<PropsProps> = props => (
+const PropsContainer: FunctionComponent<PropsProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const propsTableProps = getPropsTableProps(props, context);

addons/docs/src/blocks/Source.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { CURRENT_SELECTION } from './shared';
@@ -85,7 +85,7 @@ export const getSourceProps = (
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-const SourceContainer: React.FunctionComponent<SourceProps> = props => (
+const SourceContainer: FunctionComponent<SourceProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const sourceProps = getSourceProps(props, context);

addons/docs/src/blocks/Story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createElement, ElementType, FunctionComponent, ReactNode } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { components as docsComponents } from '@storybook/components/html';
 import { Story, StoryProps as PureStoryProps } from '@storybook/components';
@@ -8,9 +8,9 @@ import { DocsContext, DocsContextProps } from './DocsContext';
 
 export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
 
-const resetComponents: Record<string, React.ElementType> = {};
+const resetComponents: Record<string, ElementType> = {};
 Object.keys(docsComponents).forEach(key => {
-  resetComponents[key] = (props: any) => React.createElement(key, props);
+  resetComponents[key] = (props: any) => createElement(key, props);
 });
 
 interface CommonProps {
@@ -20,7 +20,7 @@ interface CommonProps {
 
 type StoryDefProps = {
   name: string;
-  children: React.ReactNode;
+  children: ReactNode;
 } & CommonProps;
 
 type StoryRefProps = {
@@ -81,7 +81,7 @@ export const getStoryProps = (
   };
 };
 
-const StoryContainer: React.FunctionComponent<StoryProps> = props => (
+const StoryContainer: FunctionComponent<StoryProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const storyProps = getStoryProps(props, context);

addons/docs/src/blocks/Wrapper.tsx

@@ -1,9 +1,5 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
-interface WrapperProps {
-  children: React.ReactNode;
-}
-
-export const Wrapper: React.FunctionComponent<WrapperProps> = ({ children }) => (
+export const Wrapper: FunctionComponent = ({ children }) => (
   <div style={{ fontFamily: 'sans-serif' }}>{children}</div>
 );

addons/events/src/components/Event.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { ChangeEvent, Component } from 'react';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import isEqual from 'lodash/isEqual';
@@ -12,7 +12,7 @@ interface StyledTextareaProps {
   shown: boolean;
   failed: boolean;
   value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
 const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (
@@ -143,7 +143,7 @@ class Item extends Component<ItemProps, ItemState> {
     prevPayload: null,
   };
 
-  onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => {
+  onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => {
     const newState: Partial<ItemState> = {
       payloadString: value,
     };

addons/events/src/manager.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import addons from '@storybook/addons';
 
 import Panel from './components/Panel';

addons/graphql/src/preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import GraphiQL from 'graphiql';
 
 import 'graphiql/graphiql.css';