Update docs related to styles

README.md

@@ -1,22 +1,33 @@
-# AsyncAPI React Component
+<h5 align="center">
+  <img src="./.github/assets/logo.png" alt="AsyncAPI logo" width="200">
+  <br>
+  React Component
+</h5>
+<h4 align="center">A official React component for AsyncAPI 2.0 specification</h4>
+
+---
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
 ## Overview
 
-A [React](https://reactjs.org/) component for AsyncAPI specification. It allows you to render the documentation of your asynchronous API provided in the AsyncAPI specification format and validate this specification. You can fully restyle the component using your own styles.
+A official [React](https://reactjs.org/) component for AsyncAPI 2.0 specification. It allows you to render the documentation of your asynchronous API provided in the AsyncAPI specification format and validate this specification. You can fully restyle the component using your own styles.
+
+> **CAUTION**: This package only supports AsyncAPI 2.0 specification. If you use 1.x, we recommend that you upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.
 
 ## Playground
 
 This repository comes in with a [Playground application](https://www.asyncapi.com/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application.
 
 You can also run the Playground application locally by following [this](./docs/development/guide.md#install-dependencies) instruction from the development guide.
 
-## Usage
+## Prerequisites
+
+- [`react`](https://github.com/facebook/react/) (version 16.8.0 or higher)
 
-> **NOTE:** Use React version 16.0.0 or higher and styled-components version 4.0.0 or higher.
+## Usage
 
-Run this command to install the component:
+Run this command to install the component in your project:
 
 ```sh
 npm install --save @kyma-project/asyncapi-react
@@ -28,25 +39,29 @@ Check out this simple sandbox application that uses the asyncapi-react component
 
 ### Props
 
-The list of props for the AsyncApi React component includes:
+The list of props for the AsyncAPI React component includes:
 
 - **schema: string | AsyncApiInterface | FetchingSchemaInterface**
 
   The `schema` property is required and contains AsyncAPI specification. Use the `string` type, the [`AsyncApiInterface`](./library/src/types.ts#L13) type, or the [`FetchingSchemaInterface`](./library/src/helpers/fetchSchema.ts#L1) object to fetch the schema from an external resource. For more information on what it contains and what it should look like, read [AsyncAPI Specification](https://github.com/asyncapi/asyncapi#asyncapi-specification).
 
-- **theme?: Partial<ThemeInterface\>**
-
-  The `theme` property is optional and contains styles for specific parts of the AsyncApi component. For information on how to change styles, read the [Theme Modification](./docs/configuration/theme-modification.md) document.
-
-  > **NOTE:** If you do not pass the [**disableDefaultTheme**](./docs/configuration/config-modification.md) config as `true`, this property is concatenated with the [default theme](./library/src/theme/default.ts)
-
 - **config?: Partial<ConfigInterface\>**
 
-  The `config` property is optional and contains configuration for the AsyncApi component. For more information on the available configuration options, read the [Configuration Modification](./docs/configuration/config-modification.md) document.
+  The `config` property is optional and contains configuration for the AsyncAPI component. For more information on the available configuration options, read the [Configuration Modification](./docs/configuration/config-modification.md) document.
   This property is concatenated with the [default configuration](./library/src/config/default.ts).
 
   > **NOTE:** The `Partial<T>` type means that every field in the `T` type is optional.
 
+### Styles
+
+To use default styles based on [SAP Fundamentals](https://sap.github.io/fundamental/), import them as follows:
+
+``` js
+import "@kyma-project/asyncapi-react/lib/styles/fiori.css";
+```
+
+For information on how to change styles, read the [Style Modification](./docs/configuration/style-modification.md) document.
+
 ## Development
 
 For information on how to set up a development environment, write and run tests, follow the naming and architecture convention defined for the project in the [Development Guide](./docs/development/guide.md).
@@ -62,6 +77,14 @@ If you create a feature request, use the dedicated **Feature request** issue tem
 
 If you have a bug to report, reproduce it in an online code editor. For example, use [CodeSandbox](https://codesandbox.io/). Attach the link to the reproduced bug to your issue. Log the bug using the **Bug report** template.
 
+## Missing features
+
+- [ ] render [`bindings`](https://github.com/asyncapi/asyncapi/blob/master/versions/next/asyncapi.md#fixed-fields-19)
+- [ ] render [`tags`](https://github.com/asyncapi/asyncapi/blob/master/versions/next/asyncapi.md#tagsObject)
+- [ ] render [`externalDocs`](https://github.com/asyncapi/asyncapi/blob/master/versions/next/asyncapi.md#externalDocumentationObject)
+- [ ] render [`schema properties`](https://github.com/asyncapi/asyncapi/blob/master/versions/next/asyncapi.md#properties) 
+- [ ] render [`correlationID`](https://github.com/asyncapi/asyncapi/blob/master/versions/next/asyncapi.md#correlationIdObject)
+
 ## Credits
 
 <p align="center">

docs/README.md

@@ -5,7 +5,7 @@
 This directory contains the following documents that relate to the project:
 
 - configuration:
-  - [Theme Modification](./configuration/theme-modification.md) describes how to edit a theme of the whole AsyncAPI component or of its specific part.
+  - [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncAPI component.
   - [Configuration Modification](./configuration/config-modification.md) describes the available component configuration options.
 - development:
   - [Development Guide](./development/guide.md) describes how to set up a development environment, write, and run tests. It also contains the naming and architecture convention.

docs/configuration/config-modification.md

@@ -6,83 +6,100 @@ Learn how to use various configuration options available in `ConfigInterface`.
 
 ## Definition
 
-See the definition of the object that you must pass to probs to modify the component configuration:
+See the definition of the object that you must pass to props to modify the component configuration:
 
 ```ts
 interface ConfigInterface {
   show?: {
     info?: boolean;
-    security?: boolean;
-    servers?: boolean;
     channels?: boolean;
+    servers?: boolean;
     messages?: boolean;
     schemas?: boolean;
   };
-  disableDefaultTheme?: boolean;
+  expand?: {
+    channels?: {
+      root?: boolean;
+      elements?: boolean;
+    };
+    servers?: {
+      root?: boolean;
+      elements?: boolean;
+    };
+    messages?: {
+      root?: boolean;
+      elements?: boolean;
+    };
+    schemas?: {
+      root?: boolean;
+      elements?: boolean;
+    };
+  },
   showErrors?: boolean;
+  parserOptions?: ParserOptions;
 }
 ```
 
 - **show?: Partial<ShowConfig>**
 
-  This field contains configuration responsible for rendering specific parts of the AsyncApi component.
+  This field contains configuration responsible for rendering specific parts of the AsyncAPI component.
   All fields are set to `true` by default.
 
-- **disableDefaultTheme?: boolean**
+- **expand?: Partial<ExpandConfig>**
 
-  This field informs whether the forwarded [`ThemeInterface`](../../library/src/theme/theme.ts#L5) should be concatenated with the [default theme](../../library/src/theme/default.ts) or if the AsyncApi component should consider only the forwarded one.
-  This field is set to `false` by default.
-
-  > **NOTE:** When you set this flag to `true`, you must provide definitions of all styles.
+  This field contains configuration responsible for expanding specific parts of the AsyncAPI component automatically.
+  `root` refers to a root component for specific parts of the AsyncAPI component, and `elements` refers to elements inside the `root` component.
+  By default, `expand.channels.root` is set to `true`.
 
 - **showErrors?: boolean**
 
   This field turns on or off the option displaying validation or parsing errors that show at the top of the component.
-  This field is set to `false` by default.
+  This field is set to `true` by default.
+
+- **parserOptions?: ParserOptions**
+
+  This field contains configuration for [`asyncapi-parser`](https://github.com/asyncapi/parser). See available options [here](https://github.com/asyncapi/parser-js/blob/master/API.md#parser).
+  This field is set to `null` by default.
 
 ## Examples
 
-See exemplary component configuration in JavaScript and TypeScript.
+See exemplary component configuration in TypeScript and JavaScript.
 
-### JavaScript
+### TypeScript
 
-```jsx
+```tsx
 import * as React from "react";
 import { render } from "react-dom";
-import AsyncApiComponent from "asyncapi-react";
+import AsyncApiComponent, { ConfigInterface } from "asyncapi-react";
 
 import { schema } from "./mock";
 
-const config = {
+const config: Partial<ConfigInterface> = {
   show: {
-    security: false,
     schemas: false
   },
-  disableDefaultTheme: true,
-  showErrors: true
+  showErrors: false
 };
 
 const App = () => <AsyncApiComponent schema={schema} config={config} />;
 
 render(<App />, document.getElementById("root"));
 ```
 
-### TypeScript
+### JavaScript
 
-```tsx
+```jsx
 import * as React from "react";
 import { render } from "react-dom";
-import AsyncApiComponent, { ConfigInterface } from "asyncapi-react";
+import AsyncApiComponent from "asyncapi-react";
 
 import { schema } from "./mock";
 
-const config: Partial<ConfigInterface> = {
+const config = {
   show: {
-    security: false,
     schemas: false
   },
-  disableDefaultTheme: true,
-  showErrors: true
+  showErrors: false
 };
 
 const App = () => <AsyncApiComponent schema={schema} config={config} />;
@@ -96,13 +113,11 @@ In the above examples, after concatenation with the default configuration, the r
 {
   show: {
     info: true,
-    security: false,
     servers: true,
     channels: true,
     messages: true,
     schemas: false
   },
-  disableDefaultTheme: true,
-  showErrors: true
+  showErrors: false
 }
 ```

docs/configuration/style-modification.md

@@ -0,0 +1,16 @@
+# Style Modification
+
+## Overview
+
+This document describes how you can apply the styles for the AsyncAPI component.
+
+## Changing styles
+
+In the AsyncApi component, we use pure CSS styling and [`BEM`](http://getbem.com/) methodology. Each HTML tag inside the root component has a unique CSS class in the `asyncapi__{ELEMENT}--{MODIFIER}` format, where:
+
+- `{ELEMENT}` is the name of a specific element. Each element name is the concatenation of the names of the elements in which it is located. For example, `asyncapi__channel-header-title` is located in the `header` HTML element of the `channel` element. 
+- `{MODIFIER}` is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually a badge, button, or similar, generic components.
+
+To change styles, create an appropriate class or modify it if you use the [default](../../library/src/styles/fiori.css) style.
+
+> **NOTE**: We recommend that you first [copy](../../library/src/styles/fiori.css) the default styles to a separate file and then modify them as you prefer.