feat!: trigger version 1

README.md

@@ -1,4 +1,4 @@
-[![Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public.](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip)
+[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
 ![Maintenance score](https://img.shields.io/npms-io/maintenance-score/@asyncapi/modelina)
 [![Npm latest version](https://img.shields.io/npm/v/@lagoni/edavisualiser)](https://www.npmjs.com/package/@lagoni/edavisualiser)
 [![License](https://img.shields.io/github/license/jonaslagoni/EDAVisualiser)](https://github.com/asyncapi/modelina/blob/master/LICENSE)
@@ -9,10 +9,6 @@
 
 ---
 
-## :loudspeaker: ATTENTION:
-
-This package is still under development and has not reached version 1.0.0 yet. This means that its API may contain breaking changes until we're able to deploy the first stable version and begin semantic versioning. Please use tests to ensure expected outputs or to hardcode the version.
-
 https://user-images.githubusercontent.com/13396189/169362612-0b6129b6-09b6-4807-aff9-8b545bcbc5dc.mp4
 
 ---
@@ -21,46 +17,109 @@ https://user-images.githubusercontent.com/13396189/169362612-0b6129b6-09b6-4807-
 
 <!-- toc -->
 
-- [:loudspeaker: ATTENTION:](#loudspeaker-attention)
 - [EDAVisualiser](#edavisualiser)
-- [Inputs](#inputs)
-- [Views](#views)
-- [Installation](#installation)
-- [Contributors ✨](#contributors-)
+  * [Installation](#installation)
+  * [Inputs](#inputs)
+  * [Views](#views)
+    + [ApplicationFocusView](#applicationfocusview)
+      - [**Configurations**](#configurations)
+    + [ApplicationView](#applicationview)
+      - [**Configurations**](#configurations-1)
+    + [SystemView](#systemview)
+      - [**Configurations**](#configurations-2)
+  * [Showcases](#showcases)
+  * [Contributors ✨](#contributors-%E2%9C%A8)
 
 <!-- tocstop -->
 
-## EDAVisualiser
-EDAVisualiser is a visualization library to show various views revolving around your application. An Application is seen something that communicate with others through incoming and outgoing connections. This is what makes up the foundation for the views.  
+# EDAVisualiser
+EDAVisualiser is a visualization library to show various views revolving around your application. An Application is seen as something that communicates with others through incoming and outgoing "connections". This is what makes up the foundation for the views.  
 
 It is written in React, however, it also supports the most used frameworks such as [Vue](./examples/vue/) and [Angular](./examples/angular/), check out the [examples](./examples/) for concrete code examples.
 
+## Installation
+
+Run this command to install the visualizer in your project:
+
+```bash
+npm install @lagoni/edavisualiser
+```
+
 ## Inputs
-The library uses a domain-driven approach, meaning we don't assume one or the other input but build on top of a domain model that is specific for this problem we are trying to solve.
+The library uses a domain-driven approach, meaning we don't assume one or the other input but build on top of a domain model that is specific to this problem we are trying to solve.
 
 | Input | Example | Description|
 |:---:|:---:|:---:|
-| [**AsyncAPI**](asyncapi.com/) | <a href="https://jonaslagoni.github.io/EDAVisualiser/asyncapi">Preview</a>, <a href="https://github.com/jonaslagoni/EDAVisualiser/blob/main/examples/simple-react/src/SimpleAsyncapi.tsx">code</a> | *Allows you to reuse pre-parsed AsyncAPI documents from the [official AsyncAPI parser](github.com/asyncapi/parser-js), underneath it splits up the AsyncAPI document into the core building blocks.* |
-| **Core building blocks** | <a href="https://jonaslagoni.github.io/EDAVisualiser/asyncapi">Preview</a>, <a href="https://github.com/jonaslagoni/EDAVisualiser/blob/main/examples/simple-react/src/SimpleApp.tsx">code</a> | *The core building blocks that is the domain abstraction for inputs, is what any other input type is converted to.* |
+| [**AsyncAPI**](https://www.asyncapi.com/) | <a href="https://jonaslagoni.github.io/EDAVisualiser/asyncapi">Preview</a>, <a href="https://github.com/jonaslagoni/EDAVisualiser/blob/main/examples/simple-react/src/SimpleAsyncapi.tsx">code</a> | *Allows you to reuse pre-parsed AsyncAPI documents from the [official AsyncAPI parser](github.com/asyncapi/parser-js), underneath it splits up the AsyncAPI document into the core building blocks. AsyncAPI v2.0 -> v2.5 is supported.* |
+| **Core building blocks** | <a href="https://jonaslagoni.github.io/EDAVisualiser/">Preview</a>, <a href="https://github.com/jonaslagoni/EDAVisualiser/blob/main/examples/simple-react/src/SimpleApp.tsx">code</a> | *The core building blocks is the domain abstraction for inputs this is what any other input type is converted to.* |
 
 
 ## Views
 
-A view could for example be how a ["system" of applications are related](https://jonaslagoni.github.io/EDAVisualiser/social-media), [how a single application relate to others](https://jonaslagoni.github.io/EDAVisualiser/social-media/application/notification_service), only the fantasy sets the limitations, and [feel free to propose new ideas](https://github.com/jonaslagoni/EDAVisualiser/issues/new)!
+A view could for example be how a ["system" of applications is related](https://jonaslagoni.github.io/EDAVisualiser/social-media), [how a single application relates to others](https://jonaslagoni.github.io/EDAVisualiser/social-media/application/notification_service), only the fantasy sets the limitations, and [feel free to propose new ideas](https://github.com/jonaslagoni/EDAVisualiser/issues/new)!
 
-| View | Example | Description|
-|:---:|:---:|:---:|
-| **ApplicationFocusView** | <a href="https://jonaslagoni.github.io/EDAVisualiser/social-media/application/notification_service"><img src="./docs/img/applicationFocusView.png" /></a> | *Puts a single application in focus as part of a larger system. Used to figure out who are "connected" to the application* |
-| **ApplicationView** | <a href="https://jonaslagoni.github.io/EDAVisualiser/"><img src="./docs/img/applicationView.png" /></a> | *Puts a single application is focus.* |
-| **SystemView** | <a href="https://jonaslagoni.github.io/EDAVisualiser/social-media"><img src="./docs/img/systemView.png" /></a> | *Puts the system/collection of application in focus to figure out how they are all connected.* |
+### ApplicationFocusView
+Puts a single application in focus as part of a larger system. Used to figure out who is "connected" to the application.
 
-## Installation
+<a href="https://jonaslagoni.github.io/EDAVisualiser/social-media/application/notification_service"><img src="./docs/img/applicationFocusView.png" /></a>
 
-Run this command to install the visualizer in your project:
+#### **Configurations**
 
-```bash
-npm install @lagoni/edavisualiser
-```
+These are all the arguments you can use to configure the view.
+| Arguments | Description | Value type | Default | 
+|:---:|:---:|:---:|:---:|
+| `application` | The core building block for setting the application information. | `ApplicationNodeData \| undefined` | `undefined` |
+| `incomingOperations` | The core building block for setting incoming operations for the application. | `Array<IncomingNodeData> \| undefined` | undefined |
+| `outgoingOperations` | The core building block for setting incoming operations for the application. | `Array<OutgoingNodeData> \| undefined` | undefined |
+| `external` | This is the main difference from the `ApplicationView` as it shows how external applications interact with it. | `Array<ApplicationViewData> \| undefined` | undefined |
+| `asyncapi` | If the application is to be loaded from a pre-parsed AsyncAPI document, which can extend the node with a custom react component in the top of the node. I.e., if you want to render a button or whatever it can be. | `AsyncapiApplicationData \| undefined` | undefined |
+| `layout` | Used to customize the layout of nodes by setting their position. | `(elements: FlowElement[]) => React.JSXElementConstructor<LayoutProps> \| undefined` | A column layout (`ColumnLayout`) |
+| `sideMenu` | Used to create a custom menu, or whatever you wish to display within the view on top of the nodes. | `() => React.JSXElementConstructor<any> \| undefined` | Simple headline with the library name |
+| `includeControls` | Include controls to zoom in and out, focus and lock nodes. | `boolean \| undefined` | `false` |
+| `edgeType` | Determine the type of edge between nodes. | Either `'smoothstep'`, `'step'`, `'straight'`, `'floating'`, `'default'`, `'simplebezier'`, `'animated'` | `smoothstep` 
+
+
+### ApplicationView
+Puts a single application in focus with only it's near connections that are incoming to the application or outgoing from it.
+
+<a href="https://jonaslagoni.github.io/EDAVisualiser/"><img src="./docs/img/applicationView.png" /></a>
+
+#### **Configurations**
+
+These are all the arguments you can use to configure the view.
+| Arguments | Description | Value type | Default | 
+|:---:|:---:|:---:|:---:|
+| `application` | The core building block for setting the application information. | `ApplicationNodeData \| undefined` | `undefined` |
+| `incomingOperations` | The core building block for setting incoming operations for the application. | `Array<IncomingNodeData> \| undefined` | undefined |
+| `outgoingOperations` | The core building block for setting incoming operations for the application. | `Array<OutgoingNodeData> \| undefined` | undefined |
+| `asyncapi` | If the application is to be loaded from a pre-parsed AsyncAPI document, which can extend the node with a custom react component in the top of the node. I.e., if you want to render a button or whatever it can be. | `AsyncapiApplicationData \| undefined` | undefined |
+| `layout` | Used to customize the layout of nodes by setting their position. | `(elements: FlowElement[]) => React.JSXElementConstructor<LayoutProps> \| undefined` | A column layout (`ColumnLayout`) |
+| `sideMenu` | Used to create a custom menu, or whatever you wish to display within the view on top of the nodes. | `() => React.JSXElementConstructor<any> \| undefined` | Simple headline with the library name |
+| `includeControls` | Include controls to zoom in and out, focus and lock nodes. | `boolean \| undefined` | `false` |
+| `edgeType` | Determine the type of edge between nodes. | Either `'smoothstep'`, `'step'`, `'straight'`, `'floating'`, `'default'`, `'simplebezier'`, `'animated'` | `smoothstep` 
+
+### SystemView
+Puts the system/collection of applications in focus to figure out how they are all connected.
+
+<a href="https://jonaslagoni.github.io/EDAVisualiser/social-media"><img src="./docs/img/systemView.png" /></a>
+
+#### **Configurations**
+
+These are all the arguments you can use to configure the view.
+| Arguments | Description | Value type | Default | 
+|:---:|:---:|:---:|:---:|
+| `applications` | A list of all the applications within your "system". | `Array<ApplicationViewData> \| undefined` | `undefined` |
+| `layout` | Used to customize the layout of nodes by setting their position. | `(elements: FlowElement[]) => React.JSXElementConstructor<LayoutProps> \| undefined` | A circle layout (`CircleLayout`) |
+| `sideMenu` | Used to create a custom menu, or whatever you wish to display within the view on top of the nodes. | `() => React.JSXElementConstructor<any> \| undefined` | Simple headline with the library name |
+| `includeControls` | Include controls to zoom in and out, focus and lock nodes. | `boolean \| undefined` | `false` |
+| `edgeType` | Determine the type of edge between nodes. | Either `'smoothstep'`, `'step'`, `'straight'`, `'floating'`, `'default'`, `'simplebezier'`, `'animated'` | `smoothstep` 
+
+## Showcases
+These are the use-cases and where this library is used that you can use as inspiration.
+
+- AsyncAPI Studio, was where this library's components was [originally created and split out from](https://github.com/asyncapi/studio/pull/342). It uses this library to visualize AsyncAPI documents. 
+
+Feel free to add your own projects that are using this library and why.
 
 ## Contributors ✨
 Thanks go to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

examples/simple-react/src/social_media/System.tsx

@@ -27,7 +27,7 @@ function Asyncapi() {
     node = (
       <SystemView 
         includeControls={true}
-        sideMenu={() => Menu}
+        sideMenu={() => <Menu/> as any}
         applications={asyncapiDocuments.map(({ parsedDoc, name }) => {
           return {
             asyncapi: {

examples/simple-react/src/social_media/application.tsx

@@ -35,7 +35,7 @@ function Asyncapi() {
   if (externalApplications.length > 0 && focusedApplication !== undefined) {
     node = (
       <ApplicationFocusView
-        sideMenu={() => Menu}
+        sideMenu={() => <Menu/> as any}
         asyncapi={{ document: focusedApplication.parsedDoc }}
         external={externalApplications.map(({ parsedDoc, name }) => {
           return {

examples/simple-react/src/social_media/menu.tsx

@@ -4,12 +4,12 @@ export function Menu() {
       <div className="space-x-2 py-2 m-4 inline-block text-lg px-2 text-gray-800">
         <span className="font-bold">Visualiser</span>
       </div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/system" className="font-light capitalize">View system</a></div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/application/frontend" className="font-light capitalize">View frontend application</a></div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/application/backend" className="font-light capitalize">View backend application</a></div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/application/comments_service" className="font-light capitalize">View comments application</a></div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/application/notification_service" className="font-light capitalize">View notification application</a></div>
-      <div style={{padding: "0 30px"}}><a href="/social-media/application/public_api" className="font-light capitalize">View public application</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media" className="font-light capitalize">View system</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media/application/frontend" className="font-light capitalize">View frontend application</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media/application/backend" className="font-light capitalize">View backend application</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media/application/comments_service" className="font-light capitalize">View comments application</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media/application/notification_service" className="font-light capitalize">View notification application</a></div>
+      <div style={{padding: "0 30px"}}><a href="/EDAVisualiser/social-media/application/public_api" className="font-light capitalize">View public application</a></div>
     </div>
   );
 }

library/package.json

@@ -50,7 +50,7 @@
     "get:version": "echo $npm_package_version"
   },
   "dependencies": {
-    "@asyncapi/parser": "^1.15.0",
+    "@asyncapi/parser": "^1.17.0",
     "canvas": "^2.9.1",
     "dompurify": "^2.3.8",
     "highlight.js": "^11.5.1",