feat: add support of react 18 (Redocly#2369)

* feat: add support of react 18

* chore: add newest version of styled-components to peerDependencies

* chore: add supoort of styled components

* chore: downgrade types

* chore: update snapshots

Author: RomanPidkostelnyi

package-lock.json

@@ -135,9 +135,9 @@
   "peerDependencies": {
     "core-js": "^3.1.4",
     "mobx": "^6.0.4",
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0",
-    "styled-components": "^4.1.1 || ^5.1.1"
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "styled-components": "^4.1.1 || ^5.1.1 || ^6.0.5"
   },
   "dependencies": {
     "@redocly/openapi-core": "^1.0.0-beta.104",

package.json

@@ -70,7 +70,9 @@ export const TypeTitle = styled(FieldLabel)`
 
 export const TypeFormat = TypeName;
 
-export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
+export const RequiredLabel = styled(FieldLabel).attrs({
+  as: 'div',
+})`
   color: ${props => props.theme.schema.requireLabelColor};
   font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;

src/common-elements/fields.ts

@@ -32,7 +32,9 @@ export const SampleControlsWrap = styled.div`
   }
 `;
 
-export const StyledPre = styled(PrismDiv.withComponent('pre'))`
+export const StyledPre = styled(PrismDiv).attrs({
+  as: 'pre',
+})`
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: ${props => props.theme.typography.code.fontSize};
   overflow-x: auto;

src/common-elements/samples.tsx

@@ -4,8 +4,11 @@ import * as React from 'react';
 import { OptionsConsumer } from '../OptionsProvider';
 import { StylingMarkdownProps } from './Markdown';
 import { StyledMarkdownBlock } from './styled.elements';
+import styled from 'styled-components';
 
-const StyledMarkdownSpan = StyledMarkdownBlock.withComponent('span');
+const StyledMarkdownSpan = styled(StyledMarkdownBlock)`
+  display: inline;
+`;
 
 const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
 

src/components/Markdown/SanitizedMdBlock.tsx

@@ -41,7 +41,9 @@ export const ResponseDetailsWrap = styled.div`
   padding: 10px;
 `;
 
-export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
+export const HeadersCaption = styled(UnderlinedHeader).attrs({
+  as: 'caption',
+})`
   text-align: left;
   margin-top: 1em;
   caption-side: top;

src/components/Responses/styled.elements.ts

@@ -5,27 +5,27 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
   class="oneOf-schema"
 >
   <span
-    class="sc-kfYoZR juYXUf"
+    class="sc-fUnMCh hPwMmL"
   >
      One of 
   </span>
   <div
-    class="sc-dlMDgC EoFth"
+    class="sc-feUZmu bTropM"
   >
     <button
-      class="sc-fKgJPI iEPbLk"
+      class="sc-hzhJZQ ilKqWS"
     >
       string
     </button>
     <button
-      class="sc-fKgJPI bpjiHN"
+      class="sc-hzhJZQ emRRrf"
     >
       integer
     </button>
   </div>
   <div>
     <span
-      class="sc-bqGGPW eSYQnm"
+      class="sc-jEACwC gWyYnj"
       type="warning"
     >
       Deprecated
@@ -37,18 +37,18 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
     >
       <div>
         <span
-          class="sc-laZMeE sc-iNiQyp jWaWWE jrLlAa"
+          class="sc-Nxspf sc-cfxfcM cXxAXt jrGEaR"
         />
         <span
-          class="sc-laZMeE sc-jffHpj jWaWWE cThoNa"
+          class="sc-Nxspf sc-gFAWRd cXxAXt dYzdDr"
         >
           string
         </span>
       </div>
        
       <div>
         <div
-          class="sc-iJCRrE sc-ciSkZP jCdxGr lhENGb"
+          class="sc-eeDRCY sc-eBMEME gTGgei hXXgcw"
         />
       </div>
     </div>