Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: react18 cli integration #2404

Merged
merged 2 commits into from
Sep 8, 2023
Merged

fix: react18 cli integration #2404

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
056da79
fix: react18 cli integration
Oprysk Sep 7, 2023
28a12f0
fix: update unit tests snapshots
Oprysk Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 8 additions & 27 deletions package-lock.json
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
6 changes: 3 additions & 3 deletions src/components/ExternalDocumentation/ExternalDocumentation.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading