feat: custom extension rendering

docs/configuration/config-modification.md

@@ -36,6 +36,7 @@ interface ConfigInterface {
   receiveLabel?: string;
   requestLabel?: string;
   replyLabel?: string;
+  extensions?: Record<string, React.ComponentType<ExtensionComponentProps>>;
 }
 ```
 
@@ -100,6 +101,11 @@ interface ConfigInterface {
   This field contains configuration responsible for customizing the label for response operation. This takes effect when rendering AsyncAPI v3 documents.
   This field is set to `REPLY` by default.
 
+- **extensions?: Record<string, React.ComponentType<ExtensionComponentProps>>**
+
+  This field contains configuration responsible for adding custom extension components.
+  This field will contain default components.
+
 ## Examples
 
 See exemplary component configuration in TypeScript and JavaScript.
@@ -110,6 +116,7 @@ See exemplary component configuration in TypeScript and JavaScript.
 import * as React from "react";
 import { render } from "react-dom";
 import AsyncAPIComponent, { ConfigInterface } from "@asyncapi/react-component";
+import CustomExtension from "./CustomExtension";
 
 import { schema } from "./mock";
 
@@ -126,13 +133,28 @@ const config: ConfigInterface = {
   expand: {
     messageExamples: false,
   },
+  extensions: {
+    'x-custom-extension': CustomExtension
+  }
 };
 
 const App = () => <AsyncAPIComponent schema={schema} config={config} />;
 
 render(<App />, document.getElementById("root"));
 ```
 
+```tsx
+// CustomExtension.tsx
+import { ExtensionComponentProps } from '@asyncapi/react-component/lib/types/components/Extensions';
+
+export default function CustomExtension(props: ExtensionComponentProps<string>) {
+  return <div>
+    <h1>{props.propertyName}</h1>
+    <p>{props.propertyValue}</p>
+  </div>
+}
+```
+
 ### JavaScript
 
 ```jsx
@@ -162,6 +184,16 @@ const App = () => <AsyncAPIComponent schema={schema} config={config} />;
 render(<App />, document.getElementById("root"));
 ```
 
+```jsx
+// CustomExtension.jsx
+export default function CustomExtension(props) {
+  return <div>
+    <h1>{props.propertyName}</h1>
+    <p>{props.propertyValue}</p>
+  </div>
+}
+```
+
 In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows:
 
 ```js
@@ -188,6 +220,10 @@ In the above examples, after concatenation with the default configuration, the r
   sendLabel: 'SEND',
   receiveLabel: 'RECEIVE',
   requestLabel: 'REQUEST',
-  replyLabel: 'REPLY'
+  replyLabel: 'REPLY', 
+  extensions: {
+    // default extensions...
+    'x-custom-extension': CustomExtension
+  }
 }
 ```

library/src/__tests__/index.test.tsx

@@ -13,6 +13,7 @@ import krakenMultipleChannels from './docs/v3/kraken-websocket-request-reply-mul
 import streetlightsKafka from './docs/v3/streetlights-kafka.json';
 import streetlightsMqtt from './docs/v3/streetlights-mqtt.json';
 import websocketGemini from './docs/v3/websocket-gemini.json';
+import { ExtensionComponentProps } from '../components';
 
 jest.mock('use-resize-observer', () => ({
   __esModule: true,
@@ -216,4 +217,54 @@ describe('AsyncAPI component', () => {
       expect(result.container.querySelector('#introduction')).toBeDefined(),
     );
   });
+
+  test('should work with custom extensions', async () => {
+    const schema = {
+      asyncapi: '2.0.0',
+      info: {
+        title: 'Example AsyncAPI',
+        version: '0.1.0',
+      },
+      channels: {
+        'smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured':
+          {
+            subscribe: {
+              message: {
+                $ref: '#/components/messages/lightMeasured',
+              },
+            },
+          },
+      },
+      components: {
+        messages: {
+          lightMeasured: {
+            name: 'lightMeasured',
+            title: 'Light measured',
+            contentType: 'application/json',
+            'x-custom-extension': 'Custom extension value',
+          },
+        },
+      },
+    };
+
+    const CustomExtension = (props: ExtensionComponentProps) => (
+      <div id="custom-extension">{props.propertyValue}</div>
+    );
+
+    const result = render(
+      <AsyncApiComponent
+        schema={schema}
+        config={{
+          extensions: {
+            'x-custom-extension': CustomExtension,
+          },
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(result.container.querySelector('#introduction')).toBeDefined();
+      expect(result.container.querySelector('#custom-extension')).toBeDefined();
+    });
+  });
 });

library/src/components/Extensions.tsx

@@ -1,34 +1,107 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Schema } from './Schema';
 
 import { SchemaHelpers } from '../helpers';
+import { AsyncAPIDocumentInterface, BaseModel } from '@asyncapi/parser';
+import { useConfig, useSpec } from '../contexts';
+import { CollapseButton } from './CollapseButton';
 
 interface Props {
   name?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   item: any;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ExtensionComponentProps<V = any> {
+  propertyName: string;
+  propertyValue: V;
+  document: AsyncAPIDocumentInterface;
+  parent: BaseModel;
+}
+
 export const Extensions: React.FunctionComponent<Props> = ({
   name = 'Extensions',
   item,
 }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [deepExpand, setDeepExpand] = useState(false);
+
+  const config = useConfig();
+  const document = useSpec();
+
   const extensions = SchemaHelpers.getCustomExtensions(item);
   if (!extensions || !Object.keys(extensions).length) {
     return null;
   }
 
-  const schema = SchemaHelpers.jsonToSchema(extensions);
+  if (!config.extensions || !Object.keys(config.extensions).length) {
+    const schema = SchemaHelpers.jsonToSchema(extensions);
+    return (
+      schema && (
+        <div className="mt-2">
+          <Schema schemaName={name} schema={schema} onlyTitle={true} />
+        </div>
+      )
+    );
+  }
 
   return (
-    schema && (
-      <div className="mt-2">
-        <Schema schemaName={name} schema={schema} onlyTitle />
+    <div>
+      <div className="flex py-2">
+        <div className="min-w-1/4">
+          <>
+            <CollapseButton
+              onClick={() => setExpanded((prev) => !prev)}
+              expanded={expanded}
+            >
+              <span className={`break-anywhere text-sm ${name}`}>{name}</span>
+            </CollapseButton>
+            <button
+              type="button"
+              onClick={() => setDeepExpand((prev) => !prev)}
+              className="ml-1 text-sm text-gray-500"
+            >
+              {deepExpand ? 'Collapse all' : 'Expand all'}
+            </button>
+          </>
+        </div>
+      </div>
+      <div
+        className={`rounded p-4 py-2 border bg-gray-100 ${expanded ? 'block' : 'hidden'}`}
+      >
+        {Object.keys(extensions)
+          .sort((extension1, extension2) =>
+            extension1.localeCompare(extension2),
+          )
+          .map((extensionKey) => {
+            if (config.extensions?.[extensionKey]) {
+              const CustomExtensionComponent = config.extensions[extensionKey];
+              return (
+                <CustomExtensionComponent
+                  key={extensionKey}
+                  propertyName={extensionKey}
+                  propertyValue={extensions[extensionKey]}
+                  document={document}
+                  parent={item}
+                />
+              );
+            } else {
+              const extensionSchema = SchemaHelpers.jsonToSchema(
+                extensions[extensionKey],
+              );
+              return (
+                <div key={extensionKey} className="mt-2">
+                  <Schema schemaName={extensionKey} schema={extensionSchema} />
+                </div>
+              );
+            }
+          })}
       </div>
-    )
+    </div>
   );
 };

library/src/components/supportedExtensions/XExtension.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ExtensionComponentProps } from '../Extensions';
+
+/**
+ * See <https://github.com/asyncapi/extensions-catalog/blob/master/extensions/x.md>.
+ */
+export default function XExtension({
+  propertyValue,
+}: ExtensionComponentProps<string>) {
+  const onClickHandler = () => {
+    window.open(`https://x.com/${propertyValue}`, '_blank');
+  };
+
+  return (
+    <div
+      title={`https://x.com/${propertyValue}`}
+      style={{ display: 'inline-block' }}
+    >
+      <svg
+        onClick={onClickHandler}
+        style={{ cursor: 'pointer' }}
+        width="15px"
+        height="15px"
+        viewBox="0 0 1200 1227"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+          fill="black"
+        />
+      </svg>
+    </div>
+  );
+}

library/src/config/config.ts

@@ -1,3 +1,5 @@
+import { ExtensionComponentProps } from '../components';
+
 export interface ConfigInterface {
   schemaID?: string;
   show?: ShowConfig;
@@ -11,6 +13,7 @@ export interface ConfigInterface {
   receiveLabel?: string;
   requestLabel?: string;
   replyLabel?: string;
+  extensions?: Record<string, React.ComponentType<ExtensionComponentProps>>;
 }
 
 export interface ShowConfig {

library/src/config/default.ts

@@ -7,6 +7,7 @@ import {
   SEND_LABEL_DEFAULT_TEXT,
   SUBSCRIBE_LABEL_DEFAULT_TEXT,
 } from '../constants';
+import XExtension from '../components/supportedExtensions/XExtension';
 
 export const defaultConfig: ConfigInterface = {
   schemaID: '',
@@ -33,4 +34,7 @@ export const defaultConfig: ConfigInterface = {
   receiveLabel: RECEIVE_TEXT_LABEL_DEFAULT_TEXT,
   requestLabel: REQUEST_LABEL_DEFAULT_TEXT,
   replyLabel: REPLIER_LABEL_DEFAULT_TEXT,
+  extensions: {
+    'x-x': XExtension,
+  },
 };

library/src/containers/AsyncApi/Standalone.tsx

@@ -69,6 +69,10 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {
         ...defaultConfig.sidebar,
         ...(!!config && config.sidebar),
       },
+      extensions: {
+        ...defaultConfig.extensions,
+        ...(!!config && config.extensions),
+      },
     };
 
     if (!asyncapi) {

playground/specs/streetlights.ts

@@ -136,6 +136,7 @@ servers:
 
 channels:
   smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured:
+    x-x: AsyncAPISpec
     x-security:
       $ref: '#/components/securitySchemes/supportedOauthFlows/flows/clientCredentials'
     description: The topic on which measured values may be produced and consumed.