diff --git a/packages/plugin/README.md b/packages/plugin/README.md index 620e277..fd604ca 100644 --- a/packages/plugin/README.md +++ b/packages/plugin/README.md @@ -10,7 +10,7 @@ some of the methods it will use from the associated Veramo agent. ### Example -A plugin that adds a new menu item and a new page to the UI to manage some contacts. +A [plugin](https://github.com/veramolabs/agent-explorer/blob/main/packages/agent-explore/src/plugins/contacts/index.tsx#L9) that adds a new menu item and a new page to the UI to manage some contacts. ```tsx import { IPlugin } from '@veramo-community/agent-explorer-plugin'; @@ -24,26 +24,213 @@ const Plugin: IPlugin = { }, name: 'Contacts', description: 'Explore contacts', + icon: , requiredMethods: ['dataStoreORMGetIdentifiers'], routes: [ { - path: '/Contacts', - element: , + path: '/contacts', + element: , }, { path: '/contacts/:id', - element: , + element: , }, ], menuItems: [ { name: 'Contacts', path: '/contacts', - icon: , + icon: , }, ], + getCredentialContextMenuItems } } }; ``` + +### Implementations + +- [veramolabs/agent-explorer-plugin-brainshare](https://github.com/veramolabs/agent-explorer-plugin-brainshare) +- [veramolabs/agent-explorer-plugin-gitcoin-passport](https://github.com/veramolabs/agent-explorer-plugin-gitcoin-passport) +- [veramolabs/agent-explorer-plugin-kudos](https://github.com/veramolabs/agent-explorer-plugin-kudos) +- [veramolabs/agent-explorer-plugin-graph-view](https://github.com/veramolabs/agent-explorer-plugin-graph-view) +- [veramolabs/agent-explorer-plugin-social-feed](https://github.com/veramolabs/agent-explorer-plugin-social-feed) +- [veramolabs/agent-explorer-plugin-developer-tools](https://github.com/veramolabs/agent-explorer-plugin-developer-tools) +- [simonas-notcat/agent-explorer-plugin-codyfight](https://github.com/simonas-notcat/agent-explorer-plugin-codyfight) + +## Plugin API + +### `name`, `description`, `icon` + +```ts +/** The plugin name */ +name: string; + +/** A short description of the plugin */ +description: string; + +/** The plugin icon */ +icon?: React.ReactNode; +``` + +These will be displayed in the plugins list + +![plugin-list](./docs/img/plugin-list.png) + +### `routes` + +```ts +/** An array of routes to be added to the explorer */ +routes?: IRouteComponent[]; +``` +Example: +```ts +routes: [ + { + path: '/contacts', + element: , + }, + { + path: '/contacts/:id', + element: , + }, +] +``` + +### `menuItems` + +```ts +/** An array of menu items to be added to the explorer */ +menuItems?: ExtendedMenuDataItem[]; +``` + +Example: +```ts +menuItems: [ + { + name: 'Contacts', + path: '/contacts', + icon: , + }, +], +``` + +![contacts](./docs/img/contacts.png) + +### `requiredMethods` + +```ts +/** An array of methods that the plugin requires to be implemented by the agent*/ +requiredMethods: string[]; +``` + +Example: +```ts +requiredMethods: ['dataStoreORMGetIdentifiers'], +``` + +If the agent does not implement the required methods, the plugin will be loaded but the menu item will not be shown. + +### `hasCss` + +```ts +/** Does the plugin provide custom css */ +hasCss?: boolean; +``` + +Example: [Brainshare](https://github.com/veramolabs/agent-explorer-plugin-graph-view/tree/main/dist) plugin provides custom css. + +### `agentPlugins` + +```ts +/** Veramo agent plugins accesable by all explorer plugins */ +agentPlugins?: IAgentPlugin[]; +``` + +### `messageHandlers` + +```ts +/** Veramo agent message handlers */ +messageHandlers?: AbstractMessageHandler[]; +``` + +Example: [Chats plugin](https://github.com/veramolabs/agent-explorer/blob/main/packages/agent-explore/src/plugins/chats/index.tsx#L20) + +### `getCredentialContextMenuItems` + +```ts +/** Menu items for the credential context menu */ +getCredentialContextMenuItems?: (credential: UniqueVerifiableCredential) => MenuProps['items']; +``` + +![Credential context menu](./docs/img/credential-context-menu.png) + +### `getIdentifierContextMenuItems` + +```ts +/** Returns a react component for a given verifiable credential */ +getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC | undefined; +``` + +Example: [Kudos plugin](https://github.com/veramolabs/agent-explorer-plugin-kudos/blob/e2535b295ef91c6c85d3530313ec5ed5c5aefb4c/src/index.tsx#L32) + +![Kudos credential](./docs/img/kudos.png) + +### `getIdentifierContextMenuItems` + +```ts +/** Returns a react component that will be displayed in the identifier hover component */ +getIdentifierHoverComponent?: () => React.FC; +``` +Example: [Gitcoin Passport plugin](https://github.com/veramolabs/agent-explorer-plugin-gitcoin-passport/blob/main/src/index.tsx#L20) + +![Identifier hover](./docs/img/identifier-hover.png) + +### `getIdentifierTabsComponents` + +```ts +/** Returns an array of react components and labels that will be displayed as tabs in the indentifier profile page */ +getIdentifierTabsComponents?: () => Array<{ label: string, component: React.FC }>; +``` + +Example: [Credentials plugin]() + +```ts +getIdentifierTabsComponents: () => { + return [ + { + label: 'Issued credentials', + component: IdentifierIssuedCredentials, + }, + { + label: 'Received credentials', + component: IdentifierReceivedCredentials, + }, + ] +} +``` +![Identifier tabs](docs/img/identifier-tabs.png) + +### `getCredentialActionComponents` + +```ts +/** Returns an array of react components that will be displayed as action buttons in Credential component */ +getCredentialActionComponents?: () => Array>; +``` +Example: [Reactions plugin](https://github.com/veramolabs/agent-explorer/blob/main/packages/agent-explore/src/plugins/reactions/index.tsx#L33) + +![Credential actions](docs/img/kudos.png) + +### `getMarkdownComponents`, `getRemarkPlugins` + +```ts +/** react-markdown Components for custom markdown rendering */ +getMarkdownComponents?: () => Partial | undefined; + +/** remark plugins for custom markdown manipulations */ +getRemarkPlugins?: () => PluggableList; +``` + +Example: [Brainshare plugin](https://github.com/veramolabs/agent-explorer-plugin-brainshare/blob/4de0d677ffd907dcbaf59028647e45967fdd9c85/src/index.tsx#L105) \ No newline at end of file diff --git a/packages/plugin/docs/img/contacts.png b/packages/plugin/docs/img/contacts.png new file mode 100644 index 0000000..ca4a523 Binary files /dev/null and b/packages/plugin/docs/img/contacts.png differ diff --git a/packages/plugin/docs/img/credential-context-menu.png b/packages/plugin/docs/img/credential-context-menu.png new file mode 100644 index 0000000..d06b197 Binary files /dev/null and b/packages/plugin/docs/img/credential-context-menu.png differ diff --git a/packages/plugin/docs/img/identifier-hover.png b/packages/plugin/docs/img/identifier-hover.png new file mode 100644 index 0000000..f852c63 Binary files /dev/null and b/packages/plugin/docs/img/identifier-hover.png differ diff --git a/packages/plugin/docs/img/identifier-tabs.png b/packages/plugin/docs/img/identifier-tabs.png new file mode 100644 index 0000000..16a2150 Binary files /dev/null and b/packages/plugin/docs/img/identifier-tabs.png differ diff --git a/packages/plugin/docs/img/kudos.png b/packages/plugin/docs/img/kudos.png new file mode 100644 index 0000000..0354a9f Binary files /dev/null and b/packages/plugin/docs/img/kudos.png differ diff --git a/packages/plugin/docs/img/plugin-list.png b/packages/plugin/docs/img/plugin-list.png new file mode 100644 index 0000000..2e2b74f Binary files /dev/null and b/packages/plugin/docs/img/plugin-list.png differ diff --git a/packages/plugin/src/types.ts b/packages/plugin/src/types.ts index 7903638..ef699f2 100644 --- a/packages/plugin/src/types.ts +++ b/packages/plugin/src/types.ts @@ -41,23 +41,56 @@ type ExtendedMenuDataItem = MenuDataItem & { } export type IAgentExplorerPlugin = { + + /** You don't have to provide this. It is used by internal implementation */ config?: IAgentExplorerPluginConfig; + + /** The plugin name */ name: string; + + /** A short description of the plugin */ description: string; + + /** The plugin icon */ icon?: React.ReactNode; + + /** An array of routes to be added to the explorer */ routes?: IRouteComponent[]; + + /** An array of menu items to be added to the explorer */ menuItems?: ExtendedMenuDataItem[]; + + /** An array of methods that the plugin requires to be implemented by the agent*/ requiredMethods: string[]; + + /** Does the plugin provide custom css */ hasCss?: boolean; - identifierContextMenuItems?: MenuProps['items']; + + /** Veramo agent plugins accesable by all explorer plugins */ agentPlugins?: IAgentPlugin[]; + + /** Veramo agent message handlers */ messageHandlers?: AbstractMessageHandler[]; + + /** Menu items for the credential context menu */ getCredentialContextMenuItems?: (credential: UniqueVerifiableCredential) => MenuProps['items']; + + /** Returns a react component for a given verifiable credential */ getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC | undefined; + + /** Returns a react component that will be displayed in the identifier hover component */ getIdentifierHoverComponent?: () => React.FC; - getIdentifierTabsComponents?: () => Array<{label: string, component: React.FC}>; + + /** Returns an array of react components and labels that will be displayed as tabs in the indentifier profile page */ + getIdentifierTabsComponents?: () => Array<{ label: string, component: React.FC }>; + + /** Returns an array of react components that will be displayed as action buttons in Credential component */ getCredentialActionComponents?: () => Array>; + + /** react-markdown Components for custom markdown rendering */ getMarkdownComponents?: () => Partial | undefined; + + /** remark plugins for custom markdown manipulations */ getRemarkPlugins?: () => PluggableList; }