Skip to content

Commit 76edc15

Browse files
OpryskOprysk
authored
fix: react18 cli integration (#2404)
* fix: react18 cli integration * fix: update unit tests snapshots
1 parent 2eff85a commit 76edc15

20 files changed

+117
-127
lines changed

‎package-lock.json

Lines changed: 8 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@
7878
"@types/prop-types": "^15.7.3",
7979
"@types/react": "^17.0.8",
8080
"@types/react-dom": "^17.0.5",
81-
"@types/react-tabs": "^2.3.2",
8281
"@types/styled-components": "^5.1.1",
8382
"@types/tapable": "^2.2.2",
8483
"@types/webpack": "^5.28.0",
@@ -157,7 +156,7 @@
157156
"polished": "^4.1.3",
158157
"prismjs": "^1.27.0",
159158
"prop-types": "^15.7.2",
160-
"react-tabs": "^3.2.2",
159+
"react-tabs": "^4.3.0",
161160
"slugify": "~1.4.7",
162161
"stickyfill": "^1.1.1",
163162
"swagger2openapi": "^7.0.6",

‎src/common-elements/panels.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { SECTION_ATTR } from '../services/MenuStore';
22
import styled, { media } from '../styled-components';
33

4-
export const MiddlePanel = styled.div<{ compact?: boolean }>`
4+
export const MiddlePanel = styled.div<{ $compact?: boolean }>`
55
width: calc(100% - ${props => props.theme.rightPanel.width});
66
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
77
8-
${({ compact, theme }) =>
8+
${({ $compact, theme }) =>
99
media.lessThan('medium', true)`
1010
width: 100%;
11-
padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
11+
padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${
1212
theme.spacing.sectionHorizontal
1313
}px`};
1414
`};
1515
`;
1616

1717
export const Section = styled.div.attrs(props => ({
1818
[SECTION_ATTR]: props.id,
19-
}))<{ underlined?: boolean }>`
19+
}))<{ $underlined?: boolean }>`
2020
padding: ${props => props.theme.spacing.sectionVertical}px 0;
2121
2222
&:last-child {
@@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({
3030
${media.lessThan('medium', true)`
3131
padding: 0;
3232
`}
33-
${(props: any) =>
34-
(props.underlined &&
33+
${({ $underlined }) =>
34+
($underlined &&
3535
`
3636
position: relative;
3737

‎src/components/Callbacks/CallbackTitle.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
2424
<CallbackTitleWrapper className={className} onClick={onClick || undefined}>
2525
<OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
2626
<ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
27-
<CallbackName deprecated={deprecated}>{name}</CallbackName>
27+
<CallbackName $deprecated={deprecated}>{name}</CallbackName>
2828
{deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
2929
</CallbackTitleWrapper>
3030
);
@@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button`
4545
}
4646
`;
4747

48-
const CallbackName = styled.span<{ deprecated?: boolean }>`
49-
text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
48+
const CallbackName = styled.span<{ $deprecated?: boolean }>`
49+
text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')};
5050
margin-right: 8px;
5151
`;
5252

‎src/components/ContentItems/ContentItems.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
5151
return (
5252
<>
5353
{content && (
54-
<Section id={item.id} underlined={item.type === 'operation'}>
54+
<Section id={item.id} $underlined={item.type === 'operation'}>
5555
{content}
5656
</Section>
5757
)}
@@ -61,7 +61,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
6161
}
6262
}
6363

64-
const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
64+
const middlePanelWrap = component => <MiddlePanel $compact={true}>{component}</MiddlePanel>;
6565

6666
@observer
6767
export class SectionItem extends React.Component<ContentItemProps> {
@@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
7272
return (
7373
<>
7474
<Row>
75-
<MiddlePanel compact={false}>
75+
<MiddlePanel $compact={false}>
7676
<Header>
7777
<ShareLink to={this.props.item.id} />
7878
{name}

‎src/components/Endpoint/Endpoint.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
4949
<OptionsContext.Consumer>
5050
{options => (
5151
<OperationEndpointWrap>
52-
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
53-
<HttpVerb type={operation.httpVerb} compact={this.props.compact}>
52+
<EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
53+
<HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
5454
{operation.httpVerb}
5555
</HttpVerb>
5656
<ServerRelativeURL>{operation.path}</ServerRelativeURL>
@@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
6262
style={{ marginRight: '-25px' }}
6363
/>
6464
</EndpointInfo>
65-
<ServersOverlay expanded={expanded} aria-hidden={!expanded}>
65+
<ServersOverlay $expanded={expanded} aria-hidden={!expanded}>
6666
{operation.servers.map(server => {
6767
const normalizedUrl = options.expandDefaultServerVariables
6868
? expandDefaultServerVariables(server.url, server.variables)

‎src/components/Endpoint/styled.elements.ts

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span`
1414
text-overflow: ellipsis;
1515
`;
1616

17-
export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
17+
export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>`
1818
outline: 0;
1919
color: inherit;
2020
width: 100%;
2121
text-align: left;
2222
cursor: pointer;
23-
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
24-
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
23+
padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
24+
border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
2525
background-color: ${props =>
26-
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
26+
props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
2727
display: flex;
2828
white-space: nowrap;
2929
align-items: center;
30-
border: ${props => (props.inverted ? '0' : '1px solid transparent')};
31-
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
30+
border: ${props => (props.$inverted ? '0' : '1px solid transparent')};
31+
border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')};
3232
transition: border-color 0.25s ease;
3333
3434
${props =>
35-
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
35+
(props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
36+
''}
3637
3738
.${ServerRelativeURL} {
38-
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
39+
color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
3940
}
4041
&:focus {
4142
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
4243
}
4344
`;
4445

45-
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
46+
export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
4647
className: `http-verb ${props.type}`,
47-
}))<{ type: string; compact?: boolean }>`
48-
font-size: ${props => (props.compact ? '0.8em' : '0.929em')};
49-
line-height: ${props => (props.compact ? '18px' : '20px')};
48+
}))<{ type: string; $compact?: boolean }>`
49+
font-size: ${props => (props.$compact ? '0.8em' : '0.929em')};
50+
line-height: ${props => (props.$compact ? '18px' : '20px')};
5051
background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
5152
color: #ffffff;
52-
padding: ${props => (props.compact ? '2px 8px' : '3px 10px')};
53+
padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')};
5354
text-transform: uppercase;
5455
font-family: ${props => props.theme.typography.headings.fontFamily};
5556
margin: 0;
5657
`;
5758

58-
export const ServersOverlay = styled.div<{ expanded: boolean }>`
59+
export const ServersOverlay = styled.div<{ $expanded: boolean }>`
5960
position: absolute;
6061
width: 100%;
6162
z-index: 100;
6263
background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor};
6364
color: ${props => props.theme.rightPanel.servers.overlay.textColor};
6465
box-sizing: border-box;
65-
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
66+
box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
6667
overflow: hidden;
6768
border-bottom-left-radius: 4px;
6869
border-bottom-right-radius: 4px;
6970
transition: all 0.25s ease;
7071
visibility: hidden;
71-
${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
72+
${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
7273
`;
7374

7475
export const ServerItem = styled.div`

‎src/components/ExternalDocumentation/ExternalDocumentation.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import styled from '../../styled-components';
44
import { OpenAPIExternalDocumentation } from '../../types';
55
import { linksCss } from '../Markdown/styled.elements';
66

7-
const LinkWrap = styled.div<{ compact?: boolean }>`
7+
const LinkWrap = styled.div<{ $compact?: boolean }>`
88
${linksCss};
9-
${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
9+
${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')}
1010
`;
1111

1212
@observer
@@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{
2121
}
2222

2323
return (
24-
<LinkWrap compact={this.props.compact}>
24+
<LinkWrap $compact={this.props.compact}>
2525
<a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
2626
</LinkWrap>
2727
);

‎src/components/Markdown/SanitizedMdBlock.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,25 @@ const StyledMarkdownSpan = styled(props => <StyledMarkdownBlock {...props} />)`
1212

1313
const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
1414

15-
export function SanitizedMarkdownHTML(
16-
props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string },
17-
) {
18-
const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
15+
export function SanitizedMarkdownHTML({
16+
inline,
17+
compact,
18+
...rest
19+
}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) {
20+
const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock;
1921

2022
return (
2123
<OptionsConsumer>
2224
{options => (
2325
<Wrap
24-
className={'redoc-markdown ' + (props.className || '')}
26+
className={'redoc-markdown ' + (rest.className || '')}
2527
dangerouslySetInnerHTML={{
26-
__html: sanitize(options.untrustedSpec, props.html),
28+
__html: sanitize(options.untrustedSpec, rest.html),
2729
}}
28-
data-role={props['data-role']}
29-
{...props}
30+
data-role={rest['data-role']}
31+
{...rest}
32+
$inline={inline}
33+
$compact={compact}
3034
/>
3135
)}
3236
</OptionsConsumer>

‎src/components/Markdown/styled.elements.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled(
2424
PrismDiv as StyledComponent<
2525
'div',
2626
ResolvedThemeInterface,
27-
{ compact?: boolean; inline?: boolean }
27+
{ $compact?: boolean; $inline?: boolean }
2828
>,
2929
)`
3030
font-family: ${props => props.theme.typography.fontFamily};
@@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
3737
}
3838
}
3939
40-
${({ compact }) =>
41-
compact &&
40+
${({ $compact }) =>
41+
$compact &&
4242
`
4343
p:first-child {
4444
margin-top: 0;
@@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
4848
}
4949
`}
5050
51-
${({ inline }) =>
52-
inline &&
51+
${({ $inline }) =>
52+
$inline &&
5353
` p {
5454
display: inline-block;
5555
}`}
@@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled(
8787
padding: ${props => props.theme.spacing.unit * 4}px;
8888
overflow-x: auto;
8989
line-height: normal;
90-
border-radius: 0px;
90+
border-radius: 0;
9191
border: 1px solid rgba(38, 50, 56, 0.1);
9292
9393
code {

‎src/components/SecurityRequirement/SecurityHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) {
1818

1919
const grouping = security.schemes.length > 1;
2020
if (security.schemes.length === 0)
21-
return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>;
21+
return <SecurityRequirementOrWrap $expanded={expanded}>None</SecurityRequirementOrWrap>;
2222
return (
23-
<SecurityRequirementOrWrap expanded={expanded}>
23+
<SecurityRequirementOrWrap $expanded={expanded}>
2424
{grouping && '('}
2525
{security.schemes.map(scheme => {
2626
return (

0 commit comments

Comments
 (0)