Update docs related to styles

README.md

@@ -1,4 +1,18 @@
-# AsyncAPI React Component
+<h5 align="center">
+  <br>
+  <a href="https://www.asyncapi.org"><img src="./.github/assets/logo.png" alt="AsyncAPI logo" width="200"></a>
+  <br>
+  React Component
+</h5>
+<h4 align="center">A React component for AsyncAPI specification</h4>
+
+---
+
+> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [AsyncAPI converter](https://github.com/asyncapi/converter). If you need to convert documents on the fly, you may use the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.
+>
+> However, if you have to use 1.x version use command `npm install --save @kyma-project/asyncapi-react@0.2.0`
+
+---
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
@@ -12,11 +26,13 @@ This repository comes in with a [Playground application](https://www.asyncapi.co
 
 You can also run the Playground application locally by following [this](./docs/development/guide.md#install-dependencies) instruction from the development guide.
 
-## Usage
+## Prerequisites
 
-> **NOTE:** Use React version 16.0.0 or higher and styled-components version 4.0.0 or higher.
+- [`react`](https://github.com/facebook/react/): >= 16.8.0
 
-Run this command to install the component:
+## Usage
+
+Run this command to install the component in your project:
 
 ```sh
 npm install --save @kyma-project/asyncapi-react
@@ -34,19 +50,23 @@ The list of props for the AsyncApi React component includes:
 
   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.
   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).

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,20 +6,37 @@ 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;
 }
 ```
 
@@ -28,61 +45,61 @@ interface ConfigInterface {
   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 initial expanding specific parts of the AsyncApi component.
+  `root` means root component for specific parts of the AsyncApi component. `Elements` means elements inside `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. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:
+
+- `{ELEMENT}` - is a name of 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 `header` HTML element of `channel` element. 
+- `{MODIFIER}` - is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually badge, button and similar, generic components.
+
+For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.
+
+> **NOTE**: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.

docs/development/guide.md

@@ -11,18 +11,18 @@ Read the document to find out how to install dependencies, launch the developmen
 This repository has the following structure:
 
 <!-- markdownlint-disable MD040 -->
-<!-- remember to update docs after removing styled components, like `theme` folder here -->
 
 ```
   ├── .github                     # Pull request and issue templates
   ├── docs                        # Directory with project-related documents
   ├── library                     # Source code of the AsyncApi React component
   │    ├── src                    # Source code of the AsyncApi React component
-  │    │    ├── components        # Source code of generic components used in the "containers" directory
+  │    │    ├── components        # Source code of shared components used in the "containers" directory
   │    │    ├── config            # Configuration of the AsyncApi React component
   │    │    ├── containers        # Subcomponents for specific parts of the AsyncApi React component
   │    │    ├── helpers           # Various helper functions
-  │    │    └── theme             # Theme-related files for the AsyncApi React component
+  │    │    ├── store             # Global store of the AsyncApi React component
+  │    │    └── styles            # Style-related files for the AsyncApi React component
   │    └── test                   # Tests for the AsyncApi React component
   └── playground                  # Source code of the Playground application for the AsyncApi React component
        ├── public                 # Fonts, images, and icons used in the Playground application
@@ -39,9 +39,8 @@ If you make any changes in the project structure, remember to update it.
 
 Use the following tools to develop the AsyncApi React component:
 
-- React (version 16.8.0 or higher)
-- [Styled-components](https://github.com/styled-components/styled-components) (version 4.0.0 or higher)
-- TypeScript (version 3.5.0 or higher)
+- [`react`](https://github.com/facebook/react/) (version 16.8.0 or higher)
+- [`typescript`](https://github.com/microsoft/TypeScript) (version 3.5.0 or higher)
 
 ## Install dependencies
 
@@ -76,14 +75,6 @@ To launch tests for the [`library`](../../library) package, run this command:
 npm test
 ```
 
-If you only want to run tests for a specific part of the repository, use:
-
-```sh
-npm run test:{PART}
-```
-
-In this command `{PART}` must be either `playground` or `library`.
-
 ## Naming and architecture convention
 
 See the rules for naming functions and components, and the architecture convention to use in the `playground` and `library` projects: