@asyncapi/react-component 1.0.0-next.3 → 1.0.0-next.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (258) hide show
  1. package/README.md +71 -3
  2. package/browser/index.js +8 -6
  3. package/browser/standalone/index.js +45 -0
  4. package/browser/standalone/without-parser.js +41 -0
  5. package/browser/without-parser.js +6 -6
  6. package/lib/cjs/components/Bindings.js +12 -4
  7. package/lib/cjs/components/Bindings.js.map +1 -1
  8. package/lib/cjs/components/CollapseButton.js +4 -3
  9. package/lib/cjs/components/CollapseButton.js.map +1 -1
  10. package/lib/cjs/components/Extensions.js +4 -3
  11. package/lib/cjs/components/Extensions.js.map +1 -1
  12. package/lib/cjs/components/Href.js +2 -1
  13. package/lib/cjs/components/Href.js.map +1 -1
  14. package/lib/cjs/components/JSONSnippet.js +17 -0
  15. package/lib/cjs/components/JSONSnippet.js.map +1 -0
  16. package/lib/cjs/components/Markdown.js +4 -4
  17. package/lib/cjs/components/Markdown.js.map +1 -1
  18. package/lib/cjs/components/Schema.js +48 -20
  19. package/lib/cjs/components/Schema.js.map +1 -1
  20. package/lib/cjs/components/Tag.js +3 -2
  21. package/lib/cjs/components/Tag.js.map +1 -1
  22. package/lib/cjs/components/Tags.js +2 -1
  23. package/lib/cjs/components/Tags.js.map +1 -1
  24. package/lib/cjs/components/index.js +1 -1
  25. package/lib/cjs/components/index.js.map +1 -1
  26. package/lib/cjs/config/config.js.map +1 -1
  27. package/lib/cjs/config/default.js +1 -0
  28. package/lib/cjs/config/default.js.map +1 -1
  29. package/lib/cjs/config/index.js.map +1 -1
  30. package/lib/cjs/constants.js +3 -48
  31. package/lib/cjs/constants.js.map +1 -1
  32. package/lib/cjs/containers/AsyncApi/AsyncApi.js +3 -1
  33. package/lib/cjs/containers/AsyncApi/AsyncApi.js.map +1 -1
  34. package/lib/cjs/containers/AsyncApi/Layout.js +28 -20
  35. package/lib/cjs/containers/AsyncApi/Layout.js.map +1 -1
  36. package/lib/cjs/containers/AsyncApi/Standalone.js +2 -0
  37. package/lib/cjs/containers/AsyncApi/Standalone.js.map +1 -1
  38. package/lib/cjs/containers/Error/Error.js +5 -4
  39. package/lib/cjs/containers/Error/Error.js.map +1 -1
  40. package/lib/cjs/containers/Info/Info.js +5 -4
  41. package/lib/cjs/containers/Info/Info.js.map +1 -1
  42. package/lib/cjs/containers/Messages/Message.js +15 -7
  43. package/lib/cjs/containers/Messages/Message.js.map +1 -1
  44. package/lib/cjs/containers/Messages/MessageExample.js +13 -10
  45. package/lib/cjs/containers/Messages/MessageExample.js.map +1 -1
  46. package/lib/cjs/containers/Messages/Messages.js +11 -7
  47. package/lib/cjs/containers/Messages/Messages.js.map +1 -1
  48. package/lib/cjs/containers/Operations/Operation.js +60 -33
  49. package/lib/cjs/containers/Operations/Operation.js.map +1 -1
  50. package/lib/cjs/containers/Operations/Operations.js +9 -6
  51. package/lib/cjs/containers/Operations/Operations.js.map +1 -1
  52. package/lib/cjs/containers/Schemas/Schema.js +21 -0
  53. package/lib/cjs/containers/Schemas/Schema.js.map +1 -0
  54. package/lib/cjs/containers/Schemas/Schemas.js +28 -0
  55. package/lib/cjs/containers/Schemas/Schemas.js.map +1 -0
  56. package/lib/cjs/containers/Servers/Server.js +9 -5
  57. package/lib/cjs/containers/Servers/Server.js.map +1 -1
  58. package/lib/cjs/containers/Servers/ServerSecurity.js +71 -45
  59. package/lib/cjs/containers/Servers/ServerSecurity.js.map +1 -1
  60. package/lib/cjs/containers/Servers/Servers.js +7 -4
  61. package/lib/cjs/containers/Servers/Servers.js.map +1 -1
  62. package/lib/cjs/containers/Sidebar/Sidebar.js +50 -34
  63. package/lib/cjs/containers/Sidebar/Sidebar.js.map +1 -1
  64. package/lib/cjs/contexts/index.js +1 -0
  65. package/lib/cjs/contexts/index.js.map +1 -1
  66. package/lib/cjs/contexts/useConfig.js +10 -0
  67. package/lib/cjs/contexts/useConfig.js.map +1 -0
  68. package/lib/cjs/contexts/useSpec.js +2 -2
  69. package/lib/cjs/contexts/useSpec.js.map +1 -1
  70. package/lib/cjs/helpers/common.js +17 -0
  71. package/lib/cjs/helpers/common.js.map +1 -0
  72. package/lib/cjs/helpers/index.js +2 -3
  73. package/lib/cjs/helpers/index.js.map +1 -1
  74. package/lib/cjs/helpers/marked.js +34 -0
  75. package/lib/cjs/helpers/marked.js.map +1 -0
  76. package/lib/cjs/helpers/message.js +33 -5
  77. package/lib/cjs/helpers/message.js.map +1 -1
  78. package/lib/cjs/helpers/parser.js +4 -4
  79. package/lib/cjs/helpers/parser.js.map +1 -1
  80. package/lib/cjs/helpers/schema.js +136 -110
  81. package/lib/cjs/helpers/schema.js.map +1 -1
  82. package/lib/cjs/helpers/server.js +49 -0
  83. package/lib/cjs/helpers/server.js.map +1 -1
  84. package/lib/cjs/helpers/specification.js +3 -0
  85. package/lib/cjs/helpers/specification.js.map +1 -1
  86. package/lib/cjs/index.js +3 -1
  87. package/lib/cjs/index.js.map +1 -1
  88. package/lib/cjs/types.js +4 -51
  89. package/lib/cjs/types.js.map +1 -1
  90. package/lib/cjs/without-parser.js +3 -0
  91. package/lib/cjs/without-parser.js.map +1 -1
  92. package/lib/esm/components/Bindings.js +10 -3
  93. package/lib/esm/components/Bindings.js.map +1 -1
  94. package/lib/esm/components/CollapseButton.js +2 -2
  95. package/lib/esm/components/CollapseButton.js.map +1 -1
  96. package/lib/esm/components/Extensions.js +2 -2
  97. package/lib/esm/components/Extensions.js.map +1 -1
  98. package/lib/esm/components/Href.js.map +1 -1
  99. package/lib/esm/components/JSONSnippet.js +10 -0
  100. package/lib/esm/components/JSONSnippet.js.map +1 -0
  101. package/lib/esm/components/Markdown.js +2 -3
  102. package/lib/esm/components/Markdown.js.map +1 -1
  103. package/lib/esm/components/Schema.js +45 -18
  104. package/lib/esm/components/Schema.js.map +1 -1
  105. package/lib/esm/components/Tag.js +1 -1
  106. package/lib/esm/components/Tag.js.map +1 -1
  107. package/lib/esm/components/Tags.js.map +1 -1
  108. package/lib/esm/components/index.js +1 -1
  109. package/lib/esm/components/index.js.map +1 -1
  110. package/lib/esm/config/config.js.map +1 -1
  111. package/lib/esm/config/default.js +1 -0
  112. package/lib/esm/config/default.js.map +1 -1
  113. package/lib/esm/config/index.js.map +1 -1
  114. package/lib/esm/constants.js +1 -47
  115. package/lib/esm/constants.js.map +1 -1
  116. package/lib/esm/containers/AsyncApi/AsyncApi.js +2 -0
  117. package/lib/esm/containers/AsyncApi/AsyncApi.js.map +1 -1
  118. package/lib/esm/containers/AsyncApi/Layout.js +28 -20
  119. package/lib/esm/containers/AsyncApi/Layout.js.map +1 -1
  120. package/lib/esm/containers/AsyncApi/Standalone.js +2 -0
  121. package/lib/esm/containers/AsyncApi/Standalone.js.map +1 -1
  122. package/lib/esm/containers/Error/Error.js +3 -3
  123. package/lib/esm/containers/Error/Error.js.map +1 -1
  124. package/lib/esm/containers/Info/Info.js +2 -2
  125. package/lib/esm/containers/Info/Info.js.map +1 -1
  126. package/lib/esm/containers/Messages/Message.js +13 -6
  127. package/lib/esm/containers/Messages/Message.js.map +1 -1
  128. package/lib/esm/containers/Messages/MessageExample.js +9 -8
  129. package/lib/esm/containers/Messages/MessageExample.js.map +1 -1
  130. package/lib/esm/containers/Messages/Messages.js +10 -7
  131. package/lib/esm/containers/Messages/Messages.js.map +1 -1
  132. package/lib/esm/containers/Operations/Operation.js +58 -33
  133. package/lib/esm/containers/Operations/Operation.js.map +1 -1
  134. package/lib/esm/containers/Operations/Operations.js +7 -5
  135. package/lib/esm/containers/Operations/Operations.js.map +1 -1
  136. package/lib/esm/containers/Schemas/Schema.js +14 -0
  137. package/lib/esm/containers/Schemas/Schema.js.map +1 -0
  138. package/lib/esm/containers/Schemas/Schemas.js +21 -0
  139. package/lib/esm/containers/Schemas/Schemas.js.map +1 -0
  140. package/lib/esm/containers/Servers/Server.js +8 -5
  141. package/lib/esm/containers/Servers/Server.js.map +1 -1
  142. package/lib/esm/containers/Servers/ServerSecurity.js +68 -43
  143. package/lib/esm/containers/Servers/ServerSecurity.js.map +1 -1
  144. package/lib/esm/containers/Servers/Servers.js +5 -3
  145. package/lib/esm/containers/Servers/Servers.js.map +1 -1
  146. package/lib/esm/containers/Sidebar/Sidebar.js +34 -22
  147. package/lib/esm/containers/Sidebar/Sidebar.js.map +1 -1
  148. package/lib/esm/contexts/index.js +1 -0
  149. package/lib/esm/contexts/index.js.map +1 -1
  150. package/lib/esm/contexts/useConfig.js +6 -0
  151. package/lib/esm/contexts/useConfig.js.map +1 -0
  152. package/lib/esm/contexts/useSpec.js +2 -2
  153. package/lib/esm/contexts/useSpec.js.map +1 -1
  154. package/lib/esm/helpers/common.js +14 -0
  155. package/lib/esm/helpers/common.js.map +1 -0
  156. package/lib/esm/helpers/index.js +2 -3
  157. package/lib/esm/helpers/index.js.map +1 -1
  158. package/lib/esm/helpers/marked.js +27 -0
  159. package/lib/esm/helpers/marked.js.map +1 -0
  160. package/lib/esm/helpers/message.js +32 -4
  161. package/lib/esm/helpers/message.js.map +1 -1
  162. package/lib/esm/helpers/parser.js.map +1 -1
  163. package/lib/esm/helpers/schema.js +135 -109
  164. package/lib/esm/helpers/schema.js.map +1 -1
  165. package/lib/esm/helpers/server.js +49 -0
  166. package/lib/esm/helpers/server.js.map +1 -1
  167. package/lib/esm/helpers/specification.js +5 -2
  168. package/lib/esm/helpers/specification.js.map +1 -1
  169. package/lib/esm/index.js +2 -1
  170. package/lib/esm/index.js.map +1 -1
  171. package/lib/esm/types.js +2 -46
  172. package/lib/esm/types.js.map +1 -1
  173. package/lib/esm/without-parser.js +2 -0
  174. package/lib/esm/without-parser.js.map +1 -1
  175. package/lib/types/components/Bindings.d.ts.map +1 -1
  176. package/lib/types/components/Extensions.d.ts.map +1 -1
  177. package/lib/types/components/JSONSnippet.d.ts +7 -0
  178. package/lib/types/components/JSONSnippet.d.ts.map +1 -0
  179. package/lib/types/components/Markdown.d.ts.map +1 -1
  180. package/lib/types/components/Schema.d.ts +3 -2
  181. package/lib/types/components/Schema.d.ts.map +1 -1
  182. package/lib/types/components/index.d.ts +1 -1
  183. package/lib/types/components/index.d.ts.map +1 -1
  184. package/lib/types/config/config.d.ts +1 -0
  185. package/lib/types/config/config.d.ts.map +1 -1
  186. package/lib/types/config/default.d.ts.map +1 -1
  187. package/lib/types/constants.d.ts +1 -26
  188. package/lib/types/constants.d.ts.map +1 -1
  189. package/lib/types/containers/AsyncApi/Layout.d.ts.map +1 -1
  190. package/lib/types/containers/Messages/Message.d.ts +1 -0
  191. package/lib/types/containers/Messages/Message.d.ts.map +1 -1
  192. package/lib/types/containers/Messages/MessageExample.d.ts +2 -1
  193. package/lib/types/containers/Messages/MessageExample.d.ts.map +1 -1
  194. package/lib/types/containers/Messages/Messages.d.ts.map +1 -1
  195. package/lib/types/containers/Operations/Operation.d.ts +1 -0
  196. package/lib/types/containers/Operations/Operation.d.ts.map +1 -1
  197. package/lib/types/containers/Operations/Operations.d.ts.map +1 -1
  198. package/lib/types/containers/Schemas/Schema.d.ts +9 -0
  199. package/lib/types/containers/Schemas/Schema.d.ts.map +1 -0
  200. package/lib/types/containers/Schemas/Schemas.d.ts +3 -0
  201. package/lib/types/containers/Schemas/Schemas.d.ts.map +1 -0
  202. package/lib/types/containers/Servers/Server.d.ts.map +1 -1
  203. package/lib/types/containers/Servers/ServerSecurity.d.ts +1 -0
  204. package/lib/types/containers/Servers/ServerSecurity.d.ts.map +1 -1
  205. package/lib/types/containers/Servers/Servers.d.ts.map +1 -1
  206. package/lib/types/containers/Sidebar/Sidebar.d.ts.map +1 -1
  207. package/lib/types/contexts/index.d.ts +1 -0
  208. package/lib/types/contexts/index.d.ts.map +1 -1
  209. package/lib/types/contexts/useConfig.d.ts +5 -0
  210. package/lib/types/contexts/useConfig.d.ts.map +1 -0
  211. package/lib/types/contexts/useSpec.d.ts +1 -3
  212. package/lib/types/contexts/useSpec.d.ts.map +1 -1
  213. package/lib/types/helpers/common.d.ts +5 -0
  214. package/lib/types/helpers/common.d.ts.map +1 -0
  215. package/lib/types/helpers/index.d.ts +2 -3
  216. package/lib/types/helpers/index.d.ts.map +1 -1
  217. package/lib/types/helpers/marked.d.ts +4 -0
  218. package/lib/types/helpers/marked.d.ts.map +1 -0
  219. package/lib/types/helpers/message.d.ts +3 -2
  220. package/lib/types/helpers/message.d.ts.map +1 -1
  221. package/lib/types/helpers/schema.d.ts +8 -3
  222. package/lib/types/helpers/schema.d.ts.map +1 -1
  223. package/lib/types/helpers/server.d.ts +6 -1
  224. package/lib/types/helpers/server.d.ts.map +1 -1
  225. package/lib/types/helpers/specification.d.ts.map +1 -1
  226. package/lib/types/index.d.ts +2 -1
  227. package/lib/types/index.d.ts.map +1 -1
  228. package/lib/types/types.d.ts +10 -303
  229. package/lib/types/types.d.ts.map +1 -1
  230. package/lib/types/without-parser.d.ts +2 -0
  231. package/lib/types/without-parser.d.ts.map +1 -1
  232. package/package.json +31 -13
  233. package/styles/default.css +879 -648
  234. package/styles/default.min.css +4 -2
  235. package/lib/cjs/components/Code.js +0 -15
  236. package/lib/cjs/components/Code.js.map +0 -1
  237. package/lib/cjs/helpers/bemClasses.js +0 -49
  238. package/lib/cjs/helpers/bemClasses.js.map +0 -1
  239. package/lib/cjs/helpers/formatJsonHighlight.js +0 -61
  240. package/lib/cjs/helpers/formatJsonHighlight.js.map +0 -1
  241. package/lib/cjs/helpers/toKebabCase.js +0 -15
  242. package/lib/cjs/helpers/toKebabCase.js.map +0 -1
  243. package/lib/esm/components/Code.js +0 -9
  244. package/lib/esm/components/Code.js.map +0 -1
  245. package/lib/esm/helpers/bemClasses.js +0 -46
  246. package/lib/esm/helpers/bemClasses.js.map +0 -1
  247. package/lib/esm/helpers/formatJsonHighlight.js +0 -57
  248. package/lib/esm/helpers/formatJsonHighlight.js.map +0 -1
  249. package/lib/esm/helpers/toKebabCase.js +0 -11
  250. package/lib/esm/helpers/toKebabCase.js.map +0 -1
  251. package/lib/types/components/Code.d.ts +0 -7
  252. package/lib/types/components/Code.d.ts.map +0 -1
  253. package/lib/types/helpers/bemClasses.d.ts +0 -14
  254. package/lib/types/helpers/bemClasses.d.ts.map +0 -1
  255. package/lib/types/helpers/formatJsonHighlight.d.ts +0 -2
  256. package/lib/types/helpers/formatJsonHighlight.d.ts.map +0 -1
  257. package/lib/types/helpers/toKebabCase.d.ts +0 -2
  258. package/lib/types/helpers/toKebabCase.d.ts.map +0 -1
package/README.md CHANGED
@@ -7,7 +7,8 @@
7
7
 
8
8
  ---
9
9
 
10
- [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg)](#contributors) ![npm](https://img.shields.io/npm/v/@asyncapi/react-component) ![npm](https://img.shields.io/npm/dt/@asyncapi/react-component)
10
+ [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg)](#contributors) ![npm](https://img.shields.io/npm/v/@asyncapi/react-component) ![npm](https://img.shields.io/npm/dt/@asyncapi/react-component) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-908a85?logo=gitpod)](https://gitpod.io/#https://github.com/asyncapi/asyncapi-react/tree/next)
11
+
11
12
 
12
13
  ## Overview
13
14
 
@@ -96,11 +97,13 @@ render(<App />, document.getElementById("root"));
96
97
 
97
98
  ## Using in other technologies
98
99
 
99
- To check how to use web-component or use a component in Angular or in NextJS see:
100
+ To check how to use web-component or use a component in other technologies see:
100
101
 
101
- - [Web Component usage](./docs/usage/web-component.md)
102
102
  - [Using in Angular](./docs/usage/angular.md)
103
+ - [Using in Vue](./docs/usage/vue.md)
103
104
  - [Using in NextJS](./docs/usage/nextjs.md)
105
+ - [Standalone bundle usage](./docs/usage/standalone-bundle.md)
106
+ - [Web Component usage](./docs/usage/web-component.md)
104
107
 
105
108
  ## Props
106
109
 
@@ -123,6 +126,7 @@ For a list and description of features offered by the AsyncAPI React component,
123
126
 
124
127
  ## Styles
125
128
 
129
+ ### Default styles
126
130
  To use default styles import them as follows:
127
131
 
128
132
  ``` js
@@ -131,6 +135,70 @@ import "@asyncapi/react-component/styles/default.css";
131
135
  import "@asyncapi/react-component/styles/default.min.css";
132
136
  ```
133
137
 
138
+ ### Custom styles
139
+ The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling.
140
+
141
+ This can be done by defining the styles in a file or inline using a `<style>` tag in the `<head>` section of the page where you are using AsyncAPI React component.
142
+
143
+ Example custom styles (defined in the `styles/custom.css` file):
144
+ ```css
145
+ html {
146
+ -moz-tab-size: 4;
147
+ -o-tab-size: 4;
148
+ tab-size: 4;
149
+ line-height: 1.15;
150
+ -webkit-text-size-adjust: 100%;
151
+ }
152
+
153
+ body {
154
+ margin: 0;
155
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
156
+ }
157
+ ```
158
+
159
+ If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.
160
+
161
+ ``` js
162
+ import "styles/custom.css";
163
+ import "@asyncapi/react-component/styles/default.min.css";
164
+ ```
165
+
166
+ If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you can put the custom styles as a style sheet link or as an inline style in the `<head>` section of the HTML code:
167
+
168
+ ```html
169
+ <head>
170
+ <!-- Custom style sheet -->
171
+ <link rel="stylesheet" href="./styles/custom.css">
172
+
173
+ <!-- OR as inline style -->
174
+ <style>
175
+ html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
176
+ body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
177
+ </style>
178
+
179
+ <link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/styles/default.min.css">
180
+
181
+ ...
182
+ </head>
183
+ ```
184
+
185
+ ### Custom logo
186
+
187
+ 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.
188
+
189
+ > **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled.
190
+
191
+ ```yaml
192
+ asyncapi: 2.2.0
193
+ info:
194
+ title: Account Service
195
+ version: 1.0.0
196
+ description: This service is in charge of processing user signups.
197
+ x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
198
+ channels:
199
+ ...
200
+ ```
201
+
134
202
  ## Playground
135
203
 
136
204
  This repository comes in with a [Playground application](https://asyncapi.github.io/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application.