fix: react18 cli integration

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",

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;
 

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;
 `;
 

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}

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)

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`

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>
  );

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>

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 {

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 (