ci: publish playground from next branch (#352)

.github/workflows/release-wc-and-playground.yml

@@ -50,11 +50,16 @@ jobs:
 
   playground:
     name: Release Playground
-    if: github.event.release.target_commitish != 'next'
+    if: github.event.release.target_commitish == 'next'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
+        with:
+          # target branch of release. More info https://docs.github.com/en/rest/reference/repos#releases
+          # in case release is created from release branch then we need to checkout from given branch
+          # if @semantic-release/github is used to publish, the minimum version is 7.2.0 for proper working
+          ref: ${{ github.event.release.target_commitish }}
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:

library/src/containers/Error/Error.tsx

@@ -16,7 +16,7 @@ const renderErrors = (errors: ValidationError[]): React.ReactNode => {
       return (
         <div key={index} className="flex">
           <span>{`${singleError.location.startLine}.`}</span>
-          <code className="break-words whitespace-pre-wrap ml-2">
+          <code className="whitespace-pre-wrap break-all ml-2">
             {singleError.title}
           </code>
         </div>

playground/package.json

@@ -14,6 +14,7 @@
     "react": "^16.9.0",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.9.0",
+    "react-split": "^2.0.11",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {

playground/src/Playground.tsx

@@ -9,9 +9,9 @@ import {
   Tabs,
   Tab,
   PlaygroundWrapper,
-  ContentWrapper,
   CodeEditorsWrapper,
   AsyncApiWrapper,
+  SplitWrapper,
 } from './components';
 
 import { defaultConfig, parse, debounce } from './common';
@@ -60,7 +60,7 @@ class Playground extends Component<{}, State> {
     return (
       <PlaygroundWrapper>
         <Navigation />
-        <ContentWrapper>
+        <SplitWrapper>
           <CodeEditorsWrapper>
             <Tabs
               additionalHeaderContent={this.renderAdditionalHeaderContent()}
@@ -91,7 +91,7 @@ class Playground extends Component<{}, State> {
           <AsyncApiWrapper>
             <AsyncApi schema={schema} config={parsedConfig} />
           </AsyncApiWrapper>
-        </ContentWrapper>
+        </SplitWrapper>
       </PlaygroundWrapper>
     );
   }

playground/src/components/SplitWrapper.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+// @ts-ignore
+import Split from 'react-split';
+
+const SplitWrapper: React.FunctionComponent = ({ children }) => (
+  <Split
+    style={{
+      width: '100%',
+      height: 'calc(100vh - 50px)',
+      minHeight: 'calc(100vh - 50px)',
+      display: 'flex',
+      background: '#f3f4f5',
+    }}
+    gutter={() => {
+      const gutter = document.createElement('div');
+      gutter.onmouseover = () => (gutter.style.cursor = 'ew-resize');
+      return gutter;
+    }}
+    gutterStyle={() => ({
+      backgroundColor: 'gray',
+      width: '7px',
+    })}
+    minSize={250}
+  >
+    {children}
+  </Split>
+);
+
+export default SplitWrapper;

playground/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Navigation } from './Navigation';
 export { default as CodeEditorComponent } from './CodeEditorComponent';
 export { default as FetchSchema } from './FetchSchema';
+export { default as SplitWrapper } from './SplitWrapper';
 export { default as Tabs } from './Tabs';
 export { default as Tab } from './Tab';
 export * from './styled';

playground/src/components/styled.ts

@@ -73,22 +73,11 @@ export const NavigationLinksItem = styled.li`
 
 export const NavigationLink = styled.a``;
 
-export const ContentWrapper = styled.div`
-  width: 100%;
-  height: calc(100vh - 50px);
-  min-height: calc(100vh - 50px);
-  display: flex;
-  justify-content: space-between;
-  background: #f3f4f5;
-`;
-
 export const CodeEditorsWrapper = styled.div`
-  width: 40%;
   background: rgb(38, 50, 56);
 `;
 
 export const AsyncApiWrapper = styled.div`
-  width: 60%;
   height: calc(100vh - 50px);
   min-height: calc(100vh - 50px);
   overflow: auto;

playground/src/specs/index.ts

@@ -3,6 +3,7 @@ export * from './application-headers';
 export * from './correlation-id';
 export * from './dummy';
 export * from './gitter-streaming';
+export * from './invalid';
 export * from './not';
 export * from './oneOf';
 export * from './rpc-client';

playground/src/specs/invalid.ts

@@ -0,0 +1,37 @@
+export const invalid = `
+components:
+  messages:
+    RideUpdated:
+      payload:
+        type: object
+      schemaFormat: application/vnd.aai.asyncapi+json;version=2.0.0
+      contentType: application/json
+    PaymentCharged:
+      payload:
+        type: object
+      schemaFormat: application/vnd.aai.asyncapi+json;version=2.0.0
+      contentType: application/json
+channels:
+  'taxinyc/backoffice/payment/charged/v1/{payment_status}/{driver_id}/{passenger_id}':
+    publish:
+      x-scs-function-name: processPayment
+      message:
+        $ref: '#/components/messages/PaymentCharged'
+    parameters:
+      driver_id:
+        schema:
+          type: string
+      payment_status:
+        schema:
+          type: string
+  'taxinyc/ops/ride/updated/v1/{ride_status}/{driver_id}/{passenger_id}/{current_latitude}/{current_longitude}/{long_property}':
+    subscribe:
+      x-scs-function-name: processPayment
+      x-scs-destination: test/taxinyc/PaymentProcessorQueue
+      message:
+        $ref: '#/components/messages/RideUpdated'
+asyncapi: 2.0.0
+info:
+  title: ProcessPayment
+  version: 0.0.1
+`;

playground/src/specs/streetlights.ts

@@ -348,6 +348,7 @@ components:
       properties:
         key2:
           type: string
+          format: time
     oneOfSchema:
       oneOf:
         - $ref: "#/components/schemas/objectWithKey"