chore: fix ts errors

cli/index.ts

@@ -340,6 +340,7 @@ async function getPageHTML(
     const specUrl = redocOptions.specUrl || (isURL(pathToSpec) ? pathToSpec : undefined);
     const store = await createStore(spec, specUrl, redocOptions);
     const sheet = new ServerStyleSheet();
+    // @ts-ignore
     html = renderToString(sheet.collectStyles(React.createElement(Redoc, { store })));
     css = sheet.getStyleTags();
     state = await store.toJS();

src/common-elements/CopyButtonWrapper.tsx

@@ -8,36 +8,24 @@ export interface CopyButtonWrapperProps {
   children: (props: { renderCopyButton: () => React.ReactNode }) => React.ReactNode;
 }
 
-export class CopyButtonWrapper extends React.PureComponent<
+export const CopyButtonWrapper = (
-  CopyButtonWrapperProps,
+  props: CopyButtonWrapperProps & { tooltipShown?: boolean },
-  { tooltipShown: boolean }
+): JSX.Element => {
-> {
+  const [tooltipShown, setTooltipShown] = React.useState(false);
-  constructor(props) {
-    super(props);
-    this.state = {
-      tooltipShown: false,
-    };
-  }
 
-  render() {
+  const copy = () => {
-    return this.props.children({ renderCopyButton: this.renderCopyButton });
-  }
-
-  copy = () => {
     const content =
-      typeof this.props.data === 'string'
+      typeof props.data === 'string' ? props.data : JSON.stringify(props.data, null, 2);
-        ? this.props.data
-        : JSON.stringify(this.props.data, null, 2);
     ClipboardService.copyCustom(content);
-    this.showTooltip();
+    showTooltip();
   };
 
-  renderCopyButton = () => {
+  const renderCopyButton = () => {
     return (
-      <button onClick={this.copy}>
+      <button onClick={copy}>
         <Tooltip
           title={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
-          open={this.state.tooltipShown}
+          open={tooltipShown}
         >
           Copy
         </Tooltip>
@@ -45,15 +33,12 @@ export class CopyButtonWrapper extends React.PureComponent<
     );
   };
 
-  showTooltip() {
+  const showTooltip = () => {
-    this.setState({
+    setTooltipShown(true);
-      tooltipShown: true,
-    });
 
     setTimeout(() => {
-      this.setState({
+      setTooltipShown(false);
-        tooltipShown: false,
-      });
     }, 1500);
-  }
+  };
-}
+  return props.children({ renderCopyButton: renderCopyButton }) as JSX.Element;
+};

src/common-elements/shelfs.tsx

@@ -8,31 +8,29 @@ const directionMap = {
   down: '0',
 };
 
-class IntShelfIcon extends React.PureComponent<{
+const IntShelfIcon = (props: {
   className?: string;
   float?: 'left' | 'right';
   size?: string;
   color?: string;
   direction: 'left' | 'right' | 'up' | 'down';
   style?: React.CSSProperties;
-}> {
+}): JSX.Element => {
-  render() {
+  return (
-    return (
+    <svg
-      <svg
+      className={props.className}
-        className={this.props.className}
+      style={props.style}
-        style={this.props.style}
+      version="1.1"
-        version="1.1"
+      viewBox="0 0 24 24"
-        viewBox="0 0 24 24"
+      x="0"
-        x="0"
+      xmlns="http://www.w3.org/2000/svg"
-        xmlns="http://www.w3.org/2000/svg"
+      y="0"
-        y="0"
+      aria-hidden="true"
-        aria-hidden="true"
+    >
-      >
+      <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 " />
-        <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 " />
+    </svg>
-      </svg>
+  );
-    );
+};
-  }
-}
 
 export const ShelfIcon = styled(IntShelfIcon)`
   height: ${props => props.size || '18px'};

src/components/Callbacks/CallbackTitle.tsx

@@ -17,20 +17,18 @@ export interface CallbackTitleProps {
   onClick?: () => void;
 }
 
-export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
+export const CallbackTitle = (props: CallbackTitleProps) => {
-  render() {
+  const { name, opened, className, onClick, httpVerb, deprecated } = props;
-    const { name, opened, className, onClick, httpVerb, deprecated } = this.props;
 
-    return (
+  return (
-      <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
+    <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
-        <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
+      <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
-        <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
+      <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
-        <CallbackName deprecated={deprecated}>{name}</CallbackName>
+      <CallbackName deprecated={deprecated}>{name}</CallbackName>
-        {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
+      {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
-      </CallbackTitleWrapper>
+    </CallbackTitleWrapper>
-    );
+  );
-  }
+};
-}
 
 const CallbackTitleWrapper = styled.button`
   border: 0;

src/components/DropdownOrLabel/DropdownOrLabel.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
+import { StyledComponent } from 'styled-components';
 
 import { DropdownProps, MimeLabel, SimpleDropdown } from '../../common-elements/Dropdown';
 
 export interface DropdownOrLabelProps extends DropdownProps {
-  Label?: React.ComponentClass;
+  Label?: StyledComponent<any, any, GenericObject, never>;
-  Dropdown?: React.ComponentClass;
+  Dropdown?: StyledComponent<
+    React.NamedExoticComponent<DropdownProps>,
+    any,
+    {
+      fullWidth?: boolean | undefined;
+    },
+    never
+  >;
 }
 
 export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element {

src/components/ErrorBoundary.tsx

@@ -37,6 +37,6 @@ export class ErrorBoundary extends React.Component<
         </ErrorWrapper>
       );
     }
-    return React.Children.only(this.props.children);
+    return <React.Fragment>{React.Children.only(this.props.children)}</React.Fragment>;
   }
 }

src/components/JsonViewer/JsonViewer.tsx

@@ -19,17 +19,13 @@ const JsonViewerWrap = styled.div`
   }
 `;
 
-class Json extends React.PureComponent<JsonProps> {
+const Json = (props: JsonProps) => {
-  node: HTMLDivElement;
+  const [node, setNode] = React.useState<HTMLDivElement>();
 
-  render() {
+  const renderInner = ({ renderCopyButton }) => {
-    return <CopyButtonWrapper data={this.props.data}>{this.renderInner}</CopyButtonWrapper>;
-  }
-
-  renderInner = ({ renderCopyButton }) => {
     const showFoldingButtons =
-      this.props.data &&
+      props.data &&
-      Object.values(this.props.data).some(value => typeof value === 'object' && value !== null);
+      Object.values(props.data).some(value => typeof value === 'object' && value !== null);
 
     return (
       <JsonViewerWrap>
@@ -37,19 +33,19 @@ class Json extends React.PureComponent<JsonProps> {
           {renderCopyButton()}
           {showFoldingButtons && (
             <>
-              <button onClick={this.expandAll}> Expand all </button>
+              <button onClick={expandAll}> Expand all </button>
-              <button onClick={this.collapseAll}> Collapse all </button>
+              <button onClick={collapseAll}> Collapse all </button>
             </>
           )}
         </SampleControls>
         <OptionsContext.Consumer>
           {options => (
             <PrismDiv
-              className={this.props.className}
+              className={props.className}
               // tslint:disable-next-line
-              ref={node => (this.node = node!)}
+              ref={node => setNode(node!)}
               dangerouslySetInnerHTML={{
-                __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
+                __html: jsonToHTML(props.data, options.jsonSampleExpandLevel),
               }}
             />
           )}
@@ -58,8 +54,8 @@ class Json extends React.PureComponent<JsonProps> {
     );
   };
 
-  expandAll = () => {
+  const expandAll = () => {
-    const elements = this.node.getElementsByClassName('collapsible');
+    const elements = node?.getElementsByClassName('collapsible');
     for (const collapsed of Array.prototype.slice.call(elements)) {
       const parentNode = collapsed.parentNode as Element;
       parentNode.classList.remove('collapsed');
@@ -67,8 +63,8 @@ class Json extends React.PureComponent<JsonProps> {
     }
   };
 
-  collapseAll = () => {
+  const collapseAll = () => {
-    const elements = this.node.getElementsByClassName('collapsible');
+    const elements = node?.getElementsByClassName('collapsible');
     // skip first item to avoid collapsing whole object/array
     const elementsArr = Array.prototype.slice.call(elements, 1);
 
@@ -79,7 +75,7 @@ class Json extends React.PureComponent<JsonProps> {
     }
   };
 
-  collapseElement = (target: HTMLElement) => {
+  const collapseElement = (target: HTMLElement) => {
     let collapsed;
     if (target.className === 'collapser') {
       collapsed = target.parentElement!.getElementsByClassName('collapsible')[0];
@@ -93,26 +89,25 @@ class Json extends React.PureComponent<JsonProps> {
     }
   };
 
-  clickListener = (event: MouseEvent) => {
+  const clickListener = React.useCallback((event: MouseEvent) => {
-    this.collapseElement(event.target as HTMLElement);
+    collapseElement(event.target as HTMLElement);
-  };
+  }, []);
 
-  focusListener = (event: KeyboardEvent) => {
+  const focusListener = React.useCallback((event: KeyboardEvent) => {
     if (event.key === 'Enter') {
-      this.collapseElement(event.target as HTMLElement);
+      collapseElement(event.target as HTMLElement);
     }
-  };
+  }, []);
 
-  componentDidMount() {
+  React.useEffect(() => {
-    this.node!.addEventListener('click', this.clickListener);
+    if (node) {
-    this.node!.addEventListener('focus', this.focusListener);
+      node?.addEventListener('click', clickListener);
-  }
+      node?.addEventListener('focus', focusListener);
+    }
+  }, [clickListener, focusListener, node]);
 
-  componentWillUnmount() {
+  return <CopyButtonWrapper data={props.data}>{renderInner}</CopyButtonWrapper>;
-    this.node!.removeEventListener('click', this.clickListener);
+};
-    this.node!.removeEventListener('focus', this.focusListener);
-  }
-}
 
 export const JsonViewer = styled(Json)`
   ${jsonStyles};

src/components/Markdown/AdvancedMarkdown.tsx

@@ -42,7 +42,8 @@ export class AdvancedMarkdown extends React.Component<AdvancedMarkdownProps> {
           { key: idx },
         );
       }
-      return <part.component key={idx} {...{ ...part.props, ...part.propsSelector(store) }} />;
+      const PartComponent = part.component as React.FunctionComponent;
+      return <PartComponent key={idx} {...{ ...part.props, ...part.propsSelector(store) }} />;
     });
   }
 }