diff --git a/.all-contributorsrc b/.all-contributorsrc
index 0ba670b5..813c9e2a 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -276,4 +276,3 @@
"skipCi": false,
"commitConvention": "angular"
}
-
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1334921c..ed3008e5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,5 @@
# Contributing to AsyncAPI
+
We love your input! We want to make contributing to this project as easy and transparent as possible.
## Contribution recogniton
@@ -37,12 +38,15 @@ The following is a summary of the ideal contribution flow. Please, note that Pul
```
## Code of Conduct
+
AsyncAPI has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](./CODE_OF_CONDUCT.md) so that you can understand what sort of behaviour is expected.
## Our Development Process
+
We use Github to host code, to track issues and feature requests, as well as accept pull requests.
## Issues
+
[Open an issue](https://github.com/asyncapi/asyncapi/issues/new) **only** if you want to report a bug or a feature. Don't open issues for questions or support, instead join our [Slack workspace](https://www.asyncapi.com/slack-invite) and ask there. Don't forget to follow our [Slack Etiquette](https://github.com/asyncapi/community/blob/master/slack-etiquette.md) while interacting with community members! It's more likely you'll get help, and much faster!
## Bug Reports and Feature Requests
@@ -73,7 +77,9 @@ Prefix that follows specification is not enough though. Remember that the title
Happy contributing :heart:
## License
+
When you submit changes, your submissions are understood to be under the same [Apache 2.0 License](https://github.com/asyncapi/asyncapi/blob/master/LICENSE) that covers the project. Feel free to [contact the maintainers](https://www.asyncapi.com/slack-invite) if that's a concern.
## References
-This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).
\ No newline at end of file
+
+This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).
diff --git a/README.md b/README.md
index 053b205c..99a4c3a7 100644
--- a/README.md
+++ b/README.md
@@ -19,9 +19,9 @@ The official [React](https://reactjs.org/) component for AsyncAPI specification.
- [Props](#props)
- [Features](#features)
- [Styles](#styles)
- * [Default styles](#default-styles)
- * [Custom styles](#custom-styles)
- * [Custom logo](#custom-logo)
+ - [Default styles](#default-styles)
+ - [Custom styles](#custom-styles)
+ - [Custom logo](#custom-logo)
- [Playground](#playground)
- [Modules](#modules)
- [Development](#development)
@@ -52,9 +52,9 @@ Check out this sandbox application that uses the React component:
Check a simple example which shows passing the inline AsyncAPI specification with custom configurations:
```tsx
-import * as React from "react";
-import { render } from "react-dom";
-import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component";
+import * as React from 'react';
+import { render } from 'react-dom';
+import AsyncApiComponent, { ConfigInterface } from '@asyncapi/react-component';
const schema = `
asyncapi: '2.0.0'
@@ -87,7 +87,7 @@ const config: ConfigInterface = {
const App = () => ;
-render(, document.getElementById("root"));
+render(, document.getElementById('root'));
```
## Using in other technologies
@@ -122,20 +122,23 @@ For a list and description of features offered by the AsyncAPI React component,
## Styles
### Default styles
+
To use default styles import them as follows:
-``` js
-import "@asyncapi/react-component/styles/default.css";
+```js
+import '@asyncapi/react-component/styles/default.css';
// or minified version
-import "@asyncapi/react-component/styles/default.min.css";
+import '@asyncapi/react-component/styles/default.min.css';
```
### Custom styles
+
The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling.
This can be done by defining the styles in a file or inline using a `
-
-
-
- ...
-
+
+
+
+
+
+
+
+
+
+ ...
+
```
### Custom logo
@@ -182,7 +215,7 @@ If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you
The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the [InfoObject](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#infoObject), a logo will be shown in the top left corner.
> **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled.
-
+
```yaml
asyncapi: 2.2.0
info:
@@ -190,8 +223,7 @@ info:
version: 1.0.0
description: This service is in charge of processing user signups.
x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
-channels:
- ...
+channels: ...
```
## Playground
@@ -203,6 +235,7 @@ You can also run the Playground application locally by following [this](./docs/d
## Modules
The `@asyncapi/react-component` package has 3 crafted JS modules to be used in various environments:
+
- `esm` (ECMAScript Modules) is intended for use in a single-page applications with predefined environments like [`create-react-app`](https://github.com/facebook/create-react-app) that are capable of resolving dependencies (via Webpack, Browserify, etc). It can also be used on the server side (for tasks like Server Side Rendering) when the application is using `esm`.
- `cjs` (CommonJS Modules) similar uses as for `esm` modules, but using CommonJS modules.
- `umd` (Universal Module Definition) is a dependency-free module that includes everything you need to serve AsyncAPI documentation (however [React](https://github.com/facebook/react/tree/master/packages/react) and [ReactDOM](https://github.com/facebook/react/tree/master/packages/react-dom) dependencies must be served separately) on a single-page application that can't resolve npm module dependencies or in normal HTML page. We have 2 types of minified `umd` bundles, with and without [AsyncAPI Parser](https://github.com/asyncapi/parser-js) in paths:
diff --git a/docs/configuration/config-modification.md b/docs/configuration/config-modification.md
index 3eb36a4c..c429b215 100644
--- a/docs/configuration/config-modification.md
+++ b/docs/configuration/config-modification.md
@@ -23,12 +23,12 @@ interface ConfigInterface {
};
expand?: {
messageExamples?: boolean;
- },
+ };
sidebar?: {
showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags';
showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags';
useChannelAddressAsIdentifier?: boolean;
- },
+ };
parserOptions?: ParserOptions;
publishLabel?: string;
subscribeLabel?: string;
@@ -59,7 +59,7 @@ interface ConfigInterface {
`showOperations` field is set to `byDefault` by default.
`useChannelAddressAsIdentifier`: for AsyncAPI v3 documents, use the operation summary or channel address in the sidebar instead of the operationId.
By default, this behavior is applied only to AsyncAPI v2 documents.
-
+
- **expand?: Partial**
This field contains configuration responsible for collapsing and expanding component sections.
@@ -73,7 +73,7 @@ interface ConfigInterface {
- **publishLabel?: string**
This field contains configuration responsible for customizing the label for publish operations.This take effect for AsyncAPI v2 documents.
- This field is set to `PUB` by default.
+ This field is set to `PUB` by default.
- **subscribeLabel?: string**
@@ -107,11 +107,11 @@ See exemplary component configuration in TypeScript and JavaScript.
### TypeScript
```tsx
-import * as React from "react";
-import { render } from "react-dom";
-import AsyncAPIComponent, { ConfigInterface } from "@asyncapi/react-component";
+import * as React from 'react';
+import { render } from 'react-dom';
+import AsyncAPIComponent, { ConfigInterface } from '@asyncapi/react-component';
-import { schema } from "./mock";
+import { schema } from './mock';
const config: ConfigInterface = {
schemaID: 'custom-spec',
@@ -130,17 +130,17 @@ const config: ConfigInterface = {
const App = () => ;
-render(, document.getElementById("root"));
+render(, document.getElementById('root'));
```
### JavaScript
```jsx
-import * as React from "react";
-import { render } from "react-dom";
-import AsyncAPIComponent from "@asyncapi/react-component";
+import * as React from 'react';
+import { render } from 'react-dom';
+import AsyncAPIComponent from '@asyncapi/react-component';
-import { schema } from "./mock";
+import { schema } from './mock';
const config = {
schemaID: 'custom-spec',
@@ -159,7 +159,7 @@ const config = {
const App = () => ;
-render(, document.getElementById("root"));
+render(, document.getElementById('root'));
```
In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows:
diff --git a/docs/features/anchors.md b/docs/features/anchors.md
index e05dc562..82d6dd0a 100644
--- a/docs/features/anchors.md
+++ b/docs/features/anchors.md
@@ -11,15 +11,15 @@ Each component has a unique anchor in the `http://{URL}/#{SCHEMA_NAME}-{CONTAINE
- `{URL}` is the website URL.
- `{SCHEMA_NAME}` is the name of the schema. It is passed to the component by configuration with the [`schemaID`](../configuration/config-modification.md#definition) field. By default, the value of `schemaID` is set to an empty string.
- `{CONTAINER}` is the name of the container. The possible values are: `info`, `servers`, `operations`, `messages`, `schemas`. If `ITEM_NAME` is also present then container has singular form like `operation`, `message` etc.
-- `{ITEM_NAME}` is the name of the item:
- - there are no defined items for the `info` container
- - for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...`
+- `{ITEM_NAME}` is the name of the item:
+ - there are no defined items for the `info` container
+ - for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...`
- `{ITEM_PROPERTY}` is the name of a particular part of the item. The possible values are:
- - for the `info` container: there are no defined properties
- - for the `servers` container: `url-variables`, `security`
- - for the `operations` container: `parameters`, `message`
- - for the `messages` container: `payload`, `headers`
- - for the `schemas` container: there are no defined properties
+ - for the `info` container: there are no defined properties
+ - for the `servers` container: `url-variables`, `security`
+ - for the `operations` container: `parameters`, `message`
+ - for the `messages` container: `payload`, `headers`
+ - for the `schemas` container: there are no defined properties
## Examples
diff --git a/docs/features/highlight.md b/docs/features/highlight.md
index 414685e9..90d526bb 100644
--- a/docs/features/highlight.md
+++ b/docs/features/highlight.md
@@ -11,13 +11,16 @@ To add configuration for an additional language, import configuration from `high
See how to add a configuration in the example below:
```js
-import AsyncApiComponent, { hljs } from "@asyncapi/react-component";
+import AsyncApiComponent, { hljs } from '@asyncapi/react-component';
import csharp from 'highlight.js/lib/languages/csharp';
hljs.registerLanguage('csharp', csharp);
// And then you can use the comppnent.
-render(, document.getElementById("root"));
+render(
+ ,
+ document.getElementById('root'),
+);
```
> **NOTE**: You need to load the configuration before rendering the component.
diff --git a/docs/usage/angular.md b/docs/usage/angular.md
index 3e61e705..28ebb948 100644
--- a/docs/usage/angular.md
+++ b/docs/usage/angular.md
@@ -21,32 +21,30 @@ To use component in Angular, follow these steps:
1. Import `@asyncapi/react-component/browser/standalone` bundle and create similar component as below:
- ```ts
- import { Component, ElementRef, OnDestroy, AfterViewInit, } from '@angular/core';
- import AsyncApiStandalone from "@asyncapi/react-component/browser/standalone";
-
- @Component({
- selector: 'asyncapi',
- template: `
-
- `,
- styleUrls: ['./asyncapi.component.scss']
- })
- export class AsyncApiComponent implements OnDestroy, AfterViewInit {
- constructor(private element: ElementRef) {}
-
- ngAfterViewInit() {
- const schema = `...`; // AsyncAPI specification, fetched or pasted.
- const config = {}; // Configuration for component. This same as for normal React component
- const container = this.element.nativeElement.querySelector('#asyncapi-doc');
- AsyncApiStandalone.render({ schema, config }, container);
- }
-
- ngOnDestroy(): void {
- this.element.nativeElement.querySelector('#asyncapi-doc').remove();
- }
+```ts
+import { Component, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
+import AsyncApiStandalone from '@asyncapi/react-component/browser/standalone';
+
+@Component({
+ selector: 'asyncapi',
+ template: ` `,
+ styleUrls: ['./asyncapi.component.scss'],
+})
+export class AsyncApiComponent implements OnDestroy, AfterViewInit {
+ constructor(private element: ElementRef) {}
+
+ ngAfterViewInit() {
+ const schema = `...`; // AsyncAPI specification, fetched or pasted.
+ const config = {}; // Configuration for component. This same as for normal React component
+ const container = this.element.nativeElement.querySelector('#asyncapi-doc');
+ AsyncApiStandalone.render({ schema, config }, container);
}
- ```
+
+ ngOnDestroy(): void {
+ this.element.nativeElement.querySelector('#asyncapi-doc').remove();
+ }
+}
+```
2. Update given `NgModule` in which you want to use the component by importing the component into the `declarations` array.
@@ -70,49 +68,50 @@ To use the component in Angular, follow these steps:
1. Update `AppModule` by adding the `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` array in the `NgModule` metadata:
- ```ts
- import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
- @NgModule({
- ...
- schemas: [
- CUSTOM_ELEMENTS_SCHEMA,
- ]
- })
- export class AppModule {}
- ```
-
-2. Import the `@asyncapi/web-component` module in an Angular's component where you want to use the web component:
-
- ```ts
- import { Component } from '@angular/core';
- import '@asyncapi/web-component/lib/asyncapi-web-component';
-
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- ...
- }
- ```
+```ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+ ...
+ schemas: [
+ CUSTOM_ELEMENTS_SCHEMA,
+ ]
+})
+export class AppModule {}
+```
+
+2. Import the `@asyncapi/web-component` module in an Angular's component where you want to use the web component:
+
+```ts
+import { Component } from '@angular/core';
+import '@asyncapi/web-component/lib/asyncapi-web-component';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+ ...
+}
+```
3. Use web component in the template as follows:
- ```html
-
-
- ```
-
- where:
-
- - `schema`, `config`, `schemaUrl`, `schemaFetchOptions` are Web Component's properties used in any valid combination, as described in [Web Component specification](#web-component),
- - `cssImportPath` is the path to styles. By default it is `assets/default.min.css`
-
- > **NOTE**: The easiest way to use the default `css` is to copy the content of the `@asyncapi/react-component/styles/default.min.css` file to a `assets/default.min.css` file.
+```html
+
+
+```
+
+where:
+
+- `schema`, `config`, `schemaUrl`, `schemaFetchOptions` are Web Component's properties used in any valid combination, as described in [Web Component specification](#web-component),
+- `cssImportPath` is the path to styles. By default it is `assets/default.min.css`
+
+> **NOTE**: The easiest way to use the default `css` is to copy the content of the `@asyncapi/react-component/styles/default.min.css` file to a `assets/default.min.css` file.
diff --git a/docs/usage/nextjs.md b/docs/usage/nextjs.md
index 2bf0cd7d..bd934e23 100644
--- a/docs/usage/nextjs.md
+++ b/docs/usage/nextjs.md
@@ -21,10 +21,13 @@ The `@asyncapi/react-component` package has a special `umd` bundle that can be u
import dynamic from 'next/dynamic';
// Import styles
-import "@asyncapi/react-component/styles/default.min.css";
+import '@asyncapi/react-component/styles/default.min.css';
// Import component without SSR/SSG
-const AsyncApiComponent = dynamic(() => import('@asyncapi/react-component/browser'), { ssr: false });
+const AsyncApiComponent = dynamic(
+ () => import('@asyncapi/react-component/browser'),
+ { ssr: false },
+);
// `schema` and `config` are these same properties as for normal AsyncAPI React component
export default function AsyncApiDocs({ schema, config }) {
@@ -45,18 +48,16 @@ npm install --save @asyncapi/parser
Then we need to use the parser and component as follows:
```js
-import { parse } from "@asyncapi/parser";
+import { parse } from '@asyncapi/parser';
// import component without parser onboard
-import { AsyncApiComponentWP } from "@asyncapi/react-component";
+import { AsyncApiComponentWP } from '@asyncapi/react-component';
// Import styles
-import "@asyncapi/react-component/styles/default.min.css";
+import '@asyncapi/react-component/styles/default.min.css';
export default function AsyncApiDocsPage({ asyncapi }) {
const config = {}; // Configuration for component. This same as for normal React component
- return (
-
- )
+ return ;
}
// This function gets called at build time
@@ -72,7 +73,7 @@ export async function getStaticProps() {
props: {
asyncapi: stringified,
},
- }
+ };
}
```
diff --git a/docs/usage/standalone-bundle.md b/docs/usage/standalone-bundle.md
index 2dfc7366..e4c7d50c 100644
--- a/docs/usage/standalone-bundle.md
+++ b/docs/usage/standalone-bundle.md
@@ -20,35 +20,39 @@ Check how to use the Standalone bundle in:
## Usage in HTML webpage
```html
-
+
-
+
-
-
```
-The Standalone Bundle exports two functions:
+The Standalone Bundle exports two functions:
- `render`, which works like [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render) function, where first argument is the [props for component](../../README.md#props) and the second is the HTML Node,
- `hydrate`, which works like [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) function, where first argument is the [props for component](../../README.md#props) and the second is the HTML Node.
diff --git a/docs/usage/vue.md b/docs/usage/vue.md
index aec6e460..1eb1e7de 100644
--- a/docs/usage/vue.md
+++ b/docs/usage/vue.md
@@ -16,12 +16,12 @@ To use component in Angular, follow these steps:
1. Import `@asyncapi/react-component/browser/standalone` bundle and create similar component as below:
- ```html
-
-
-
+```html
+
+
+
-
- ```
+ },
+ };
+
+```
2. Copy styles `@asyncapi/react-component/styles/default.min.css` to `assets/asyncapi.min.css` and import in component as:
diff --git a/docs/usage/web-component.md b/docs/usage/web-component.md
index 2402e8b0..706f26f3 100644
--- a/docs/usage/web-component.md
+++ b/docs/usage/web-component.md
@@ -46,10 +46,10 @@ Check how to use the Web Component in:
When invoked as an independent entity, Web Component takes the following props (as it is still a React component):
- `schema` is a `schema` property from the React component,
- > **NOTE**: Since version 0.19.0 specifying a `schema` object can be omitted. `schema.url` and `schema.requestOptions` can be replaced with `schemaUrl` and `schemaFetchOptions` properties accordingly.
+ > **NOTE**: Since version 0.19.0 specifying a `schema` object can be omitted. `schema.url` and `schema.requestOptions` can be replaced with `schemaUrl` and `schemaFetchOptions` properties accordingly.
- `config` is an **optional** `config` property from the React component in the stringified JSON format,
- `schemaUrl` property is a `string`, specific to Web Component, containing a URL to fetch an AsyncAPI Schema from. It is a wrapper for `schema.url` property in `schema` object under the hood,
- > **NOTE**: If `schemaUrl` property is specified, the `schema.url` property of the React component will be ignored.
+ > **NOTE**: If `schemaUrl` property is specified, the `schema.url` property of the React component will be ignored.
- `schemaFetchOptions` property is an **optional** `object` of [RequestInit](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html) type in JSON format, specific to Web Component, containing additional fetching options. It is a wrapper for `schema.requestOptions` property in `schema` object, which are both needed only in case process of fetching from a URL is any different from a usual browser request,
- > **NOTE**: If `schemaFetchOptions` property is specified, `schema.requestOptions` property of the React component will be ignored. If `schemaUrl` property is NOT specified, `schemaFetchOptions` will be ignored itself and `schema.url`/`schema.requestOptions` properties of the React component must be used in this case.
+ > **NOTE**: If `schemaFetchOptions` property is specified, `schema.requestOptions` property of the React component will be ignored. If `schemaUrl` property is NOT specified, `schemaFetchOptions` will be ignored itself and `schema.url`/`schema.requestOptions` properties of the React component must be used in this case.
- `cssImportPath` property is the path to styles. Default version from `unpkg.com` contains guaranteed minimum styling for the Web Component,
diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
index fe313624..7a106b9b 100644
--- a/library/src/containers/Sidebar/Sidebar.tsx
+++ b/library/src/containers/Sidebar/Sidebar.tsx
@@ -348,7 +348,12 @@ const OperationItem: React.FunctionComponent = ({
config,
isAsyncAPIv2,
});
- const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600'];
+ const bgColors = [
+ 'bg-red-600',
+ 'bg-orange-600',
+ 'bg-green-600',
+ 'bg-blue-600',
+ ];
return (