fix: react18 cli integration (#2404)

* fix: react18 cli integration * fix: update unit tests snapshots
Redocly · Sep 8, 2023 · 76edc15 · 76edc15
1 parent 2eff85a
commit 76edc15
Show file tree

Hide file tree

Showing 20 changed files with 117 additions and 127 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
     "@types/prop-types": "^15.7.3",
     "@types/react": "^17.0.8",
     "@types/react-dom": "^17.0.5",
-    "@types/react-tabs": "^2.3.2",
     "@types/styled-components": "^5.1.1",
     "@types/tapable": "^2.2.2",
     "@types/webpack": "^5.28.0",
@@ -157,7 +156,7 @@
     "polished": "^4.1.3",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
-    "react-tabs": "^3.2.2",
+    "react-tabs": "^4.3.0",
     "slugify": "~1.4.7",
     "stickyfill": "^1.1.1",
     "swagger2openapi": "^7.0.6",

diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
@@ -1,22 +1,22 @@
 import { SECTION_ATTR } from '../services/MenuStore';
 import styled, { media } from '../styled-components';
 
-export const MiddlePanel = styled.div<{ compact?: boolean }>`
+export const MiddlePanel = styled.div<{ $compact?: boolean }>`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
-  ${({ compact, theme }) =>
+  ${({ $compact, theme }) =>
     media.lessThan('medium', true)`
     width: 100%;
-    padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
+    padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${
       theme.spacing.sectionHorizontal
     }px`};
   `};
 `;
 
 export const Section = styled.div.attrs(props => ({
   [SECTION_ATTR]: props.id,
-}))<{ underlined?: boolean }>`
+}))<{ $underlined?: boolean }>`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
   &:last-child {
@@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({
   ${media.lessThan('medium', true)`
     padding: 0;
   `}
-  ${(props: any) =>
-    (props.underlined &&
+  ${({ $underlined }) =>
+    ($underlined &&
       `
     position: relative;
 

diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx
@@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
     <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
       <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
       <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}
     </CallbackTitleWrapper>
   );
@@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button`
   }
 `;
 
-const CallbackName = styled.span<{ deprecated?: boolean }>`
-  text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
+const CallbackName = styled.span<{ $deprecated?: boolean }>`
+  text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')};
   margin-right: 8px;
 `;
 

diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx
@@ -51,7 +51,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
     return (
       <>
         {content && (
-          <Section id={item.id} underlined={item.type === 'operation'}>
+          <Section id={item.id} $underlined={item.type === 'operation'}>
             {content}
           </Section>
         )}
@@ -61,7 +61,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
   }
 }
 
-const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
+const middlePanelWrap = component => <MiddlePanel $compact={true}>{component}</MiddlePanel>;
 
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
@@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
     return (
       <>
         <Row>
-          <MiddlePanel compact={false}>
+          <MiddlePanel $compact={false}>
             <Header>
               <ShareLink to={this.props.item.id} />
               {name}

diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx
@@ -49,8 +49,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
       <OptionsContext.Consumer>
         {options => (
           <OperationEndpointWrap>
-            <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
-              <HttpVerb type={operation.httpVerb} compact={this.props.compact}>
+            <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
+              <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
                 {operation.httpVerb}
               </HttpVerb>
               <ServerRelativeURL>{operation.path}</ServerRelativeURL>
@@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                 style={{ marginRight: '-25px' }}
               />
             </EndpointInfo>
-            <ServersOverlay expanded={expanded} aria-hidden={!expanded}>
+            <ServersOverlay $expanded={expanded} aria-hidden={!expanded}>
               {operation.servers.map(server => {
                 const normalizedUrl = options.expandDefaultServerVariables
                   ? expandDefaultServerVariables(server.url, server.variables)

diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
@@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span`
   text-overflow: ellipsis;
 `;
 
-export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
+export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>`
   outline: 0;
   color: inherit;
   width: 100%;
   text-align: left;
   cursor: pointer;
-  padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
-  border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
+  padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
+  border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
   background-color: ${props =>
-    props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
+    props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
   display: flex;
   white-space: nowrap;
   align-items: center;
-  border: ${props => (props.inverted ? '0' : '1px solid transparent')};
-  border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
+  border: ${props => (props.$inverted ? '0' : '1px solid transparent')};
+  border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;
 
   ${props =>
-    (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
+    (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
+    ''}
 
   .${ServerRelativeURL} {
-    color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
+    color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
   }
   &:focus {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
   }
 `;
 
-export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
+export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
   className: `http-verb ${props.type}`,
-}))<{ type: string; compact?: boolean }>`
-  font-size: ${props => (props.compact ? '0.8em' : '0.929em')};
-  line-height: ${props => (props.compact ? '18px' : '20px')};
+}))<{ type: string; $compact?: boolean }>`
+  font-size: ${props => (props.$compact ? '0.8em' : '0.929em')};
+  line-height: ${props => (props.$compact ? '18px' : '20px')};
   background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
   color: #ffffff;
-  padding: ${props => (props.compact ? '2px 8px' : '3px 10px')};
+  padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')};
   text-transform: uppercase;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   margin: 0;
 `;
 
-export const ServersOverlay = styled.div<{ expanded: boolean }>`
+export const ServersOverlay = styled.div<{ $expanded: boolean }>`
   position: absolute;
   width: 100%;
   z-index: 100;
   background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor};
   color: ${props => props.theme.rightPanel.servers.overlay.textColor};
   box-sizing: border-box;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
   overflow: hidden;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   transition: all 0.25s ease;
   visibility: hidden;
-  ${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
+  ${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
 `;
 
 export const ServerItem = styled.div`

diff --git a/src/components/ExternalDocumentation/ExternalDocumentation.tsx b/src/components/ExternalDocumentation/ExternalDocumentation.tsx
@@ -4,9 +4,9 @@ import styled from '../../styled-components';
 import { OpenAPIExternalDocumentation } from '../../types';
 import { linksCss } from '../Markdown/styled.elements';
 
-const LinkWrap = styled.div<{ compact?: boolean }>`
+const LinkWrap = styled.div<{ $compact?: boolean }>`
   ${linksCss};
-  ${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
+  ${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')}
 `;
 
 @observer
@@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{
     }
 
     return (
-      <LinkWrap compact={this.props.compact}>
+      <LinkWrap $compact={this.props.compact}>
         <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
       </LinkWrap>
     );

diff --git a/src/components/Markdown/SanitizedMdBlock.tsx b/src/components/Markdown/SanitizedMdBlock.tsx
@@ -12,21 +12,25 @@ const StyledMarkdownSpan = styled(props => <StyledMarkdownBlock {...props} />)`
 
 const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
 
-export function SanitizedMarkdownHTML(
-  props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string },
-) {
-  const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
+export function SanitizedMarkdownHTML({
+  inline,
+  compact,
+  ...rest
+}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) {
+  const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock;
 
   return (
     <OptionsConsumer>
       {options => (
         <Wrap
-          className={'redoc-markdown ' + (props.className || '')}
+          className={'redoc-markdown ' + (rest.className || '')}
           dangerouslySetInnerHTML={{
-            __html: sanitize(options.untrustedSpec, props.html),
+            __html: sanitize(options.untrustedSpec, rest.html),
           }}
-          data-role={props['data-role']}
-          {...props}
+          data-role={rest['data-role']}
+          {...rest}
+          $inline={inline}
+          $compact={compact}
         />
       )}
     </OptionsConsumer>

diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
@@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled(
   PrismDiv as StyledComponent<
     'div',
     ResolvedThemeInterface,
-    { compact?: boolean; inline?: boolean }
+    { $compact?: boolean; $inline?: boolean }
   >,
 )`
   font-family: ${props => props.theme.typography.fontFamily};
@@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
     }
   }
 
-  ${({ compact }) =>
-    compact &&
+  ${({ $compact }) =>
+    $compact &&
     `
     p:first-child {
       margin-top: 0;
@@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
     }
   `}
 
-  ${({ inline }) =>
-    inline &&
+  ${({ $inline }) =>
+    $inline &&
     ` p {
     display: inline-block;
   }`}
@@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled(
     padding: ${props => props.theme.spacing.unit * 4}px;
     overflow-x: auto;
     line-height: normal;
-    border-radius: 0px;
+    border-radius: 0;
     border: 1px solid rgba(38, 50, 56, 0.1);
 
     code {

diff --git a/src/components/SecurityRequirement/SecurityHeader.tsx b/src/components/SecurityRequirement/SecurityHeader.tsx
@@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) {
 
   const grouping = security.schemes.length > 1;
   if (security.schemes.length === 0)
-    return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>;
+    return <SecurityRequirementOrWrap $expanded={expanded}>None</SecurityRequirementOrWrap>;
   return (
-    <SecurityRequirementOrWrap expanded={expanded}>
+    <SecurityRequirementOrWrap $expanded={expanded}>
       {grouping && '('}
       {security.schemes.map(scheme => {
         return (