Skip to content

Commit

Permalink
fix: react18 cli integration (#2404)
Browse files Browse the repository at this point in the history
* fix: react18 cli integration

* fix: update unit tests snapshots
  • Loading branch information
Oprysk authored Sep 8, 2023
1 parent 2eff85a commit 76edc15
Show file tree
Hide file tree
Showing 20 changed files with 117 additions and 127 deletions.
35 changes: 8 additions & 27 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions src/common-elements/panels.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Callbacks/CallbackTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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;
`;

Expand Down
6 changes: 3 additions & 3 deletions src/components/ContentItems/ContentItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -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> {
Expand All @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Endpoint/Endpoint.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)
Expand Down
33 changes: 17 additions & 16 deletions src/components/Endpoint/styled.elements.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
);
Expand Down
20 changes: 12 additions & 8 deletions src/components/Markdown/SanitizedMdBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/components/Markdown/styled.elements.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
}
}
${({ compact }) =>
compact &&
${({ $compact }) =>
$compact &&
`
p:first-child {
margin-top: 0;
Expand All @@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
}
`}
${({ inline }) =>
inline &&
${({ $inline }) =>
$inline &&
` p {
display: inline-block;
}`}
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/SecurityRequirement/SecurityHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
Loading

0 comments on commit 76edc15

Please sign in to comment.