From a65710957808be0b8af43026ca67f11d3634ee3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Tue, 10 Sep 2019 14:53:35 +0200 Subject: [PATCH 1/9] Create new doc described the way of styling component and update root Readme --- README.md | 26 +++-- docs/README.md | 2 +- docs/configuration/config-modification.md | 71 +++++++----- docs/configuration/style-modification.md | 16 +++ docs/configuration/theme-modification.md | 116 ------------------- docs/development/guide.md | 19 +-- library/src/config/config.ts | 14 +-- library/src/containers/AsyncApi/AsyncApi.tsx | 30 +++-- library/src/containers/Channels/Channels.tsx | 10 +- library/src/containers/Messages/Messages.tsx | 10 +- library/src/containers/Schemas/Schemas.tsx | 10 +- library/src/containers/Servers/Servers.tsx | 10 +- library/src/helpers/stateHelpers.ts | 10 +- package.json | 1 + 14 files changed, 129 insertions(+), 216 deletions(-) create mode 100644 docs/configuration/style-modification.md delete mode 100644 docs/configuration/theme-modification.md diff --git a/README.md b/README.md index 39ee2bd29..ca22a8f57 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) +> :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. + ## 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. @@ -12,11 +14,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 + +- [`react`](https://github.com/facebook/react/): >= 16.8.0 -> **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 @@ -34,12 +38,6 @@ 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** - - 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** 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. @@ -47,6 +45,16 @@ The list of props for the AsyncApi React component includes: > **NOTE:** The `Partial` 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). diff --git a/docs/README.md b/docs/README.md index 9e71f342e..ae0118bde 100644 --- a/docs/README.md +++ b/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. diff --git a/docs/configuration/config-modification.md b/docs/configuration/config-modification.md index 8ecb6ae9b..d806bf0ee 100644 --- a/docs/configuration/config-modification.md +++ b/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,38 +45,40 @@ 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** - 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. Otherwise, `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 = { show: { - security: false, schemas: false }, - disableDefaultTheme: true, - showErrors: true + showErrors: false }; const App = () => ; @@ -67,22 +86,20 @@ const App = () => ; render(, 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 = { +const config = { show: { - security: false, schemas: false }, - disableDefaultTheme: true, - showErrors: true + showErrors: false }; const App = () => ; @@ -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 } ``` diff --git a/docs/configuration/style-modification.md b/docs/configuration/style-modification.md new file mode 100644 index 000000000..6cef16fc3 --- /dev/null +++ b/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. diff --git a/docs/configuration/theme-modification.md b/docs/configuration/theme-modification.md deleted file mode 100644 index 51f451e6b..000000000 --- a/docs/configuration/theme-modification.md +++ /dev/null @@ -1,116 +0,0 @@ - - -# Theme Modification - -## Overview - -This document describes `ThemeInterface` and explains how you can apply the new styles for specific parts of the AsyncApi component. - -## Definition - -See the basic definition of the interface: - -```ts -type styledCss = string | InterpolationValue[]; - -interface ThemeInterface { - asyncApiWrapper: styledCss; - header: styledCss; - headerParagraph: styledCss; - ... -} -``` - -For more details, check [this](../../library/src/theme/theme.ts) file. - -> **NOTE:** The `InterpolationValue` type is taken from the [`styled-components`](https://github.com/styled-components/styled-components) library. - -## How it works - -[`Styled-components`](https://github.com/styled-components/styled-components) is a feature-rich library that allows you to think about styles as components. It is used to provide styles for relevant parts of the AsyncApi component. The component's architecture allows you to quickly modify the default styles for the appropriate class that you want to change in your project. - -> **NOTE:** You can also configure the component not to support the default styles. For more information, see [this](./config-modification.md#definition) document. - -For example, if you want to change styles for an element displaying generated examples of schemas, messages, and topics, you should create an appropriate object which has the following [structure](../../library/src/components/Code.tsx#L14): - -```tsx - - {title && ( - - {title} - - )} - {code} - -``` - -See an example of such an object: - -```ts -const theme = { - codeWrapper: `...`, - codeHeader: `...`, - codeHeaderH4: `...`, - codeBody: `...` -}; -``` - -Provide the value ​​of the appropriate field in `ThemeInterface` either as a literal string or using the [`css`](https://www.styled-components.com/docs/api#css) function from the `styled-components` library. - -## Examples - -See exemplary theme configuration in JavaScript and TypeScript. - -### JavaScript - -```jsx -import * as React from "react"; -import { render } from "react-dom"; -import AsyncApiComponent from "asyncapi-react"; -import { css } from "styled-components"; - -import { schema } from "./mock"; - -const theme = { - asyncApiWrapper: ` - padding: 16px; - background-color: #fff; - `, - header: css` - font-size: 32px; - color: #000; - text-align: center; - ` -}; - -const App = () => ; - -render(, document.getElementById("root")); -``` - -### TypeScript - -```tsx -import * as React from "react"; -import { render } from "react-dom"; -import AsyncApiComponent, { ThemeInterface } from "asyncapi-react"; -import { css } from "styled-components"; - -import { schema } from "./mock"; - -const theme: Partial = { - asyncApiWrapper: ` - padding: 16px; - background-color: #fff; - `, - header: css` - font-size: 32px; - color: #000; - text-align: center; - ` -}; - -const App = () => ; - -render(, document.getElementById("root")); -``` diff --git a/docs/development/guide.md b/docs/development/guide.md index 6b79d0143..de19fc7de 100644 --- a/docs/development/guide.md +++ b/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: - ``` ├── .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: diff --git a/library/src/config/config.ts b/library/src/config/config.ts index 5530f55c6..5e54306f7 100644 --- a/library/src/config/config.ts +++ b/library/src/config/config.ts @@ -2,7 +2,7 @@ import { Options as ParserOptions } from 'json-schema-ref-parser'; export interface ConfigInterface { show?: ShowConfig; - collapse?: CollapseConfig; + expand?: ExpandConfig; showErrors?: boolean; parserOptions?: ParserOptions; } @@ -15,14 +15,14 @@ export interface ShowConfig { schemas?: boolean; } -export interface CollapseNestedConfig { +export interface ExpandNestedConfig { root?: boolean; elements?: boolean; } -export interface CollapseConfig { - channels?: CollapseNestedConfig; - servers?: CollapseNestedConfig; - messages?: CollapseNestedConfig; - schemas?: CollapseNestedConfig; +export interface ExpandConfig { + channels?: ExpandNestedConfig; + servers?: ExpandNestedConfig; + messages?: ExpandNestedConfig; + schemas?: ExpandNestedConfig; } diff --git a/library/src/containers/AsyncApi/AsyncApi.tsx b/library/src/containers/AsyncApi/AsyncApi.tsx index 0d34c232c..520c8b5ed 100644 --- a/library/src/containers/AsyncApi/AsyncApi.tsx +++ b/library/src/containers/AsyncApi/AsyncApi.tsx @@ -77,9 +77,9 @@ class AsyncApiComponent extends Component { ...defaultConfig.show, ...(!!config && config.show), }, - collapse: { - ...defaultConfig.collapse, - ...(!!config && config.collapse), + expand: { + ...defaultConfig.expand, + ...(!!config && config.expand), }, }; @@ -101,7 +101,7 @@ class AsyncApiComponent extends Component { { spec: validatedSchema, showConfig: concatenatedConfig.show, - collapseConfig: concatenatedConfig.collapse || {}, + expandConfig: concatenatedConfig.expand || {}, }, ); @@ -123,9 +123,8 @@ class AsyncApiComponent extends Component { {concatenatedConfig.show.channels && validatedSchema.channels && ( )} @@ -136,9 +135,8 @@ class AsyncApiComponent extends Component { validatedSchema.components && validatedSchema.components.securitySchemes } - collapse={ - concatenatedConfig.collapse && - concatenatedConfig.collapse.servers + expand={ + concatenatedConfig.expand && concatenatedConfig.expand.servers } /> )} @@ -148,9 +146,9 @@ class AsyncApiComponent extends Component { validatedSchema.components.messages && ( )} @@ -158,9 +156,9 @@ class AsyncApiComponent extends Component { validatedSchema.components.schemas && ( )} diff --git a/library/src/containers/Channels/Channels.tsx b/library/src/containers/Channels/Channels.tsx index 58868f5cf..7b3391b9c 100644 --- a/library/src/containers/Channels/Channels.tsx +++ b/library/src/containers/Channels/Channels.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ChannelComponent } from './Channel'; -import { CollapseNestedConfig } from '../../config'; +import { ExpandNestedConfig } from '../../config'; import { bemClasses } from '../../helpers'; import { Channels } from '../../types'; import { Toggle, ToggleLabel } from '../../components'; @@ -10,12 +10,12 @@ import { CHANNELS_TEXT } from '../../constants'; interface Props { channels: Channels; - collapse?: CollapseNestedConfig; + expand?: ExpandNestedConfig; } export const ChannelsComponent: React.FunctionComponent = ({ channels, - collapse, + expand, }) => { const className = `channels`; @@ -28,7 +28,7 @@ export const ChannelsComponent: React.FunctionComponent = ({ ))} @@ -40,7 +40,7 @@ export const ChannelsComponent: React.FunctionComponent = ({ diff --git a/library/src/containers/Messages/Messages.tsx b/library/src/containers/Messages/Messages.tsx index 0b736dd69..463ccbbc8 100644 --- a/library/src/containers/Messages/Messages.tsx +++ b/library/src/containers/Messages/Messages.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MessageComponent } from './Message'; -import { CollapseNestedConfig } from '../../config'; +import { ExpandNestedConfig } from '../../config'; import { bemClasses } from '../../helpers'; import { Toggle, ToggleLabel } from '../../components'; import { Message } from '../../types'; @@ -10,13 +10,13 @@ import { MESSAGES_TEXT } from '../../constants'; interface Props { messages?: Record; - collapse?: CollapseNestedConfig; + expand?: ExpandNestedConfig; inChannel?: boolean; } export const MessagesComponent: React.FunctionComponent = ({ messages, - collapse, + expand, inChannel = false, }) => { if (!messages) { @@ -38,7 +38,7 @@ export const MessagesComponent: React.FunctionComponent = ({ message={message} hideTags={true} inChannel={false} - toggleExpand={collapse && collapse.elements} + toggleExpand={expand && expand.elements} /> ))} @@ -53,7 +53,7 @@ export const MessagesComponent: React.FunctionComponent = ({ diff --git a/library/src/containers/Schemas/Schemas.tsx b/library/src/containers/Schemas/Schemas.tsx index 56c1c85e4..4479b880c 100644 --- a/library/src/containers/Schemas/Schemas.tsx +++ b/library/src/containers/Schemas/Schemas.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { SchemaComponent } from './Schema'; -import { CollapseNestedConfig } from '../../config'; +import { ExpandNestedConfig } from '../../config'; import { bemClasses } from '../../helpers'; import { Toggle, ToggleLabel } from '../../components'; import { SCHEMAS_TEXT } from '../../constants'; @@ -10,12 +10,12 @@ import { Schema } from '../../types'; interface Props { schemas?: Record; - collapse?: CollapseNestedConfig; + expand?: ExpandNestedConfig; } export const SchemasComponent: React.FunctionComponent = ({ schemas, - collapse, + expand, }) => { if (!schemas) { return null; @@ -32,7 +32,7 @@ export const SchemasComponent: React.FunctionComponent = ({ name={key} schema={schema} toggle={true} - toggleExpand={collapse && collapse.elements} + toggleExpand={expand && expand.elements} /> ))} @@ -44,7 +44,7 @@ export const SchemasComponent: React.FunctionComponent = ({ diff --git a/library/src/containers/Servers/Servers.tsx b/library/src/containers/Servers/Servers.tsx index 44eb209c4..bffd0fc4d 100644 --- a/library/src/containers/Servers/Servers.tsx +++ b/library/src/containers/Servers/Servers.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ServerComponent } from './Server'; -import { CollapseNestedConfig } from '../../config'; +import { ExpandNestedConfig } from '../../config'; import { bemClasses } from '../../helpers'; import { Servers, SecurityScheme } from '../../types'; import { Toggle, ToggleLabel } from '../../components'; @@ -11,13 +11,13 @@ import { SERVERS } from '../../constants'; interface Props { servers?: Servers; securitySchemes?: Record; - collapse?: CollapseNestedConfig; + expand?: ExpandNestedConfig; } export const ServersComponent: React.FunctionComponent = ({ servers, securitySchemes, - collapse, + expand, }) => { if (!servers) { return null; @@ -38,7 +38,7 @@ export const ServersComponent: React.FunctionComponent = ({ server={server} stage={stage} securitySchemes={securitySchemes} - toggleExpand={collapse && collapse.elements} + toggleExpand={expand && expand.elements} /> ))} @@ -50,7 +50,7 @@ export const ServersComponent: React.FunctionComponent = ({ diff --git a/library/src/helpers/stateHelpers.ts b/library/src/helpers/stateHelpers.ts index e51d9898b..47f78b7a6 100644 --- a/library/src/helpers/stateHelpers.ts +++ b/library/src/helpers/stateHelpers.ts @@ -1,4 +1,4 @@ -import { ShowConfig, CollapseConfig, CollapseNestedConfig } from '../config'; +import { ShowConfig, ExpandNestedConfig, ExpandConfig } from '../config'; import { AsyncAPI, Servers, Server } from '../types'; class StateHelpers { @@ -44,11 +44,11 @@ class StateHelpers { calculateInitialExpandedElements = ({ spec, showConfig, - collapseConfig, + expandConfig, }: { spec: AsyncAPI; showConfig: ShowConfig; - collapseConfig: CollapseConfig; + expandConfig: ExpandConfig; }): number => { const showConfigKeys = Object.keys(showConfig); const collapseConfigKeys = Object.keys(showConfig); @@ -62,11 +62,11 @@ class StateHelpers { showConfigKeys.includes(key) && showConfig[key] && collapseConfigKeys.includes(key) && - collapseConfig[key], + expandConfig[key], ); if (condition) { - const field: CollapseNestedConfig = collapseConfig[key]; + const field: ExpandNestedConfig = expandConfig[key]; if (field.root) { numberOfElements += 1; } diff --git a/package.json b/package.json index 6497cbce4..18f715f56 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "changelog": "lerna-changelog", "clean": "lerna clean", "start": "lerna exec --parallel -- npm run start", + "test": "cd library && npm test", "lint-check": "tslint -c ./tslint.json --project tsconfig.base.json --format verbose && prettier --check '**/*.{ts,tsx,js,jsx,json,html,css,yaml}'", "lint-fix": "tslint -c ./tslint.json --project tsconfig.base.json --format verbose --fix && prettier --write '**/*.{ts,tsx,js,jsx,json,html,css,yaml}'", "conflict-check": "tslint-config-prettier-check ./tslint.json", From c45c9267679b4bcf4aed71fe8b7ece953578a7f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Tue, 10 Sep 2019 14:55:16 +0200 Subject: [PATCH 2/9] Update tests --- library/src/config/default.ts | 2 +- library/src/helpers/__tests__/stateHelpers.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/library/src/config/default.ts b/library/src/config/default.ts index e4c0b0d53..e44d00ab1 100644 --- a/library/src/config/default.ts +++ b/library/src/config/default.ts @@ -8,7 +8,7 @@ export const defaultConfig: ConfigInterface = { messages: true, schemas: true, }, - collapse: { + expand: { channels: { root: true, elements: false, diff --git a/library/src/helpers/__tests__/stateHelpers.ts b/library/src/helpers/__tests__/stateHelpers.ts index 5b01cd370..5485c6882 100644 --- a/library/src/helpers/__tests__/stateHelpers.ts +++ b/library/src/helpers/__tests__/stateHelpers.ts @@ -1,5 +1,5 @@ import { stateHelpers } from '../stateHelpers'; -import { ShowConfig, CollapseConfig } from '../../config'; +import { ShowConfig, ExpandConfig } from '../../config'; import { AsyncAPI } from '../../types'; describe('stateHelpers', () => { @@ -45,7 +45,7 @@ describe('stateHelpers', () => { messages: true, schemas: true, }; - const collapseConfig: CollapseConfig = { + const expandConfig: ExpandConfig = { channels: { root: true, elements: false, @@ -77,7 +77,7 @@ describe('stateHelpers', () => { const result = stateHelpers.calculateInitialExpandedElements({ spec, showConfig, - collapseConfig, + expandConfig, }); expect(result).toEqual(4); From e52213c8aa0658074d8468c7910ad27e4663d241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Tue, 10 Sep 2019 15:03:38 +0200 Subject: [PATCH 3/9] Update doc --- docs/configuration/config-modification.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configuration/config-modification.md b/docs/configuration/config-modification.md index d806bf0ee..1a6f2be01 100644 --- a/docs/configuration/config-modification.md +++ b/docs/configuration/config-modification.md @@ -48,7 +48,7 @@ interface ConfigInterface { - **expand?: Partial** 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. Otherwise, `elements` means elements inside `root` 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** From 8143cff8bf07254b4ad57d81d472e7ba73f98f50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Tue, 10 Sep 2019 21:32:30 +0200 Subject: [PATCH 4/9] Add old version in warning info --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ca22a8f57..b70c2f6e2 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) > :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` ## Overview From ec34620e0573302924b36c4de50bff10bc44135f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Wed, 11 Sep 2019 09:05:50 +0200 Subject: [PATCH 5/9] Add logo to Readme --- .github/assets/logo.png | Bin 0 -> 5587 bytes README.md | 14 ++++++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 .github/assets/logo.png diff --git a/.github/assets/logo.png b/.github/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..66f97478c817ebcf767881115fe5884fca018a86 GIT binary patch literal 5587 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 +
+ AsyncAPI logo +
+ React Component + +

A React component for AsyncAPI specification

-[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) +--- > :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) + ## 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. From 34d662a3e2d3ee84f1e990b4a99a40a63dc1b9fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Wed, 11 Sep 2019 09:19:50 +0200 Subject: [PATCH 6/9] Update Readme after discussion --- README.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6f99f90cc..985dd379e 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,14 @@ --- -> :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) ## 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. +> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to 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. From 4d9a08ee56fae59d501df6287b3444129bf63270 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Wed, 11 Sep 2019 09:57:35 +0200 Subject: [PATCH 7/9] Update description of subscribe and publish operations --- README.md | 17 ++++++++++++----- docs/configuration/style-modification.md | 2 +- docs/development/guide.md | 7 ------- library/src/constants.ts | 8 ++++---- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 985dd379e..05654ab3d 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,9 @@
-
- AsyncAPI logo + AsyncAPI logo
React Component
-

A React component for AsyncAPI specification

+

A official React component for AsyncAPI 2.0 specification

--- @@ -12,9 +11,9 @@ ## 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. -> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters. +> **CAUTION**:: This package support only AsyncAPI 2.0 specification. If you using 1.x we recommend to 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 @@ -78,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

diff --git a/docs/configuration/style-modification.md b/docs/configuration/style-modification.md index 6cef16fc3..a4714a6a7 100644 --- a/docs/configuration/style-modification.md +++ b/docs/configuration/style-modification.md @@ -6,7 +6,7 @@ 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: +In the AsyncApi component we use pure css styling and [`BEM`](http://getbem.com/) methodology. Each HTML tag inside the AsyncApi 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. diff --git a/docs/development/guide.md b/docs/development/guide.md index de19fc7de..f77722cfd 100644 --- a/docs/development/guide.md +++ b/docs/development/guide.md @@ -35,13 +35,6 @@ This repository has the following structure: If you make any changes in the project structure, remember to update it. -## Prerequisites - -Use the following tools to develop the AsyncApi React component: - -- [`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 To install all dependencies for the [Playground](../../playground) application and prepare a symlink for the [`library`](../../library) package, run these commands: diff --git a/library/src/constants.ts b/library/src/constants.ts index 6cd5f63df..a782ca909 100644 --- a/library/src/constants.ts +++ b/library/src/constants.ts @@ -14,13 +14,13 @@ export const ONE_OF_PAYLOADS_TEXT = 'One of those payloads:'; export const ANY_OF_PAYLOADS_TEXT = 'Any of those payloads:'; export const GENERATED_BADGE_TEXT = 'generated'; export const ONE_OF_FOLLOWING_MESSAGES_PUBLISH_TEXT = - 'You can receive one of the following messages:'; + 'You can send one of the following messages:'; export const ONE_OF_FOLLOWING_MESSAGES_PUBLISH_SINGLE_TEXT = - 'You can receive the following message:'; + 'You can send the following message:'; export const ONE_OF_FOLLOWING_MESSAGES_SUBSCRIBE_TEXT = - 'You can send one of the following messages:'; + 'You can receive one of the following messages:'; export const ONE_OF_FOLLOWING_MESSAGES_SUBSCRIBE_SINGLE_TEXT = - 'You can send the following message:'; + 'You can receive the following message:'; export const CONTACT_TEXT = 'Contact'; export const NAM_TEXTE = 'Name'; From a09fc538684dfa51c536e3a0b4afe4bd77dcd2af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Wed, 11 Sep 2019 11:06:24 +0200 Subject: [PATCH 8/9] After review --- README.md | 8 ++++---- docs/README.md | 2 +- docs/configuration/config-modification.md | 8 ++++---- docs/configuration/style-modification.md | 12 ++++++------ docs/development/guide.md | 16 ++++++++-------- library/src/constants.ts | 4 ++-- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 05654ab3d..b201cc253 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ 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 support only AsyncAPI 2.0 specification. If you using 1.x we recommend to upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters. +> **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 @@ -23,7 +23,7 @@ You can also run the Playground application locally by following [this](./docs/d ## Prerequisites -- [`react`](https://github.com/facebook/react/): >= 16.8.0 +- [`react`](https://github.com/facebook/react/) (version 16.8.0 or higher) ## Usage @@ -39,7 +39,7 @@ 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** @@ -47,7 +47,7 @@ The list of props for the AsyncApi React component includes: - **config?: Partial** - 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` type means that every field in the `T` type is optional. diff --git a/docs/README.md b/docs/README.md index ae0118bde..1e86c5ecf 100644 --- a/docs/README.md +++ b/docs/README.md @@ -5,7 +5,7 @@ This directory contains the following documents that relate to the project: - configuration: - - [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncApi component. + - [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. diff --git a/docs/configuration/config-modification.md b/docs/configuration/config-modification.md index 1a6f2be01..656e4401e 100644 --- a/docs/configuration/config-modification.md +++ b/docs/configuration/config-modification.md @@ -42,14 +42,14 @@ interface ConfigInterface { - **show?: Partial** - 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. - **expand?: Partial** - 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`. + 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** diff --git a/docs/configuration/style-modification.md b/docs/configuration/style-modification.md index a4714a6a7..be7d87e78 100644 --- a/docs/configuration/style-modification.md +++ b/docs/configuration/style-modification.md @@ -2,15 +2,15 @@ ## Overview -This document describes how you can apply the styles for the AsyncApi component. +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 AsyncApi component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where: +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 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. +- `{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. -For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class. +To change styles, create an appropriate class or modify it if you use the [default](../../library/src/styles/fiori.css) style. -> **NOTE**: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion. +> **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. diff --git a/docs/development/guide.md b/docs/development/guide.md index f77722cfd..558209f35 100644 --- a/docs/development/guide.md +++ b/docs/development/guide.md @@ -15,16 +15,16 @@ This repository has the following structure: ``` ├── .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 + ├── library # Source code of the AsyncAPI React component + │ ├── src # Source code of the AsyncAPI React component │ │ ├── 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 + │ │ ├── config # Configuration of the AsyncAPI React component + │ │ ├── containers # Subcomponents for specific parts of the AsyncAPI React component │ │ ├── helpers # Various helper functions - │ │ ├── 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 + │ │ ├── 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 └── src # Source code of the Playground application ├── common # Various helper functions including mocks diff --git a/library/src/constants.ts b/library/src/constants.ts index a782ca909..89b1f984b 100644 --- a/library/src/constants.ts +++ b/library/src/constants.ts @@ -18,9 +18,9 @@ export const ONE_OF_FOLLOWING_MESSAGES_PUBLISH_TEXT = export const ONE_OF_FOLLOWING_MESSAGES_PUBLISH_SINGLE_TEXT = 'You can send the following message:'; export const ONE_OF_FOLLOWING_MESSAGES_SUBSCRIBE_TEXT = - 'You can receive one of the following messages:'; + 'You can subscribe to one of the following messages:'; export const ONE_OF_FOLLOWING_MESSAGES_SUBSCRIBE_SINGLE_TEXT = - 'You can receive the following message:'; + 'You can subscribe to the following message:'; export const CONTACT_TEXT = 'Contact'; export const NAM_TEXTE = 'Name'; From b0ca96c98ba46e15ebbe1bf5c90f8b1561af1f8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Urba=C5=84czyk?= Date: Wed, 11 Sep 2019 11:43:52 +0200 Subject: [PATCH 9/9] Update doc --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index b201cc253..ef355c9aa 100644 --- a/README.md +++ b/README.md @@ -79,12 +79,16 @@ If you have a bug to report, reproduce it in an online code editor. For example, ## Missing features +See the list of features that are still missing in the component: + - [ ] 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) +If you want to help us develop them, feel free to contribute. + ## Credits