Documentation Index
Fetch the complete documentation index at: https://docs.versori.com/llms.txt
Use this file to discover all available pages before exploring further.
This section provides an overview of the components available in the embed-react/src/components directory. These
components are designed to be used in your React application to integrate with the Versori Embedded SDK.
DialogContent
Description
The DialogContent component is used to render the content of a dialog, including a title, description, and any
additional children components.
Props
| Name | Type | Required | Description |
|---|
children | ReactNode | No | Additional content to be displayed inside the dialog. |
title | string | Yes | The title of the dialog, hidden visually but accessible to screen readers. |
description | string | Yes | The description of the dialog, hidden visually but accessible to screen readers. |
Example
<DialogContent title="Dialog Title" description="Dialog Description">
<p>Additional content goes here.</p>
</DialogContent>
IntegrationPage
Description
The IntegrationPage component displays a grid of integration tiles, allowing users to connect, manage, or disconnect
integrations.
Props
| Name | Type | Required | Description |
|---|
id | string | No | The unique identifier for the component. |
className | string | No | Additional CSS classes for styling. |
projects | UserProjectSummary[] | Yes | A list of user projects to display as integration tiles. |
onConnectClick | (integrationId: string) => void | Yes | Callback for when the “Connect” button is clicked. |
onManageClick | (integrationId: string) => void | Yes | Callback for when the “Manage” button is clicked. |
onDisconnectClick | (integrationId: string) => void | Yes | Callback for when the “Disconnect” button is clicked. |
isConnectingId | string | No | The ID of the integration currently being connected. |
Example
<IntegrationPage
projects={projects}
onConnectClick={handleConnect}
onManageClick={handleManage}
onDisconnectClick={handleDisconnect}
/>
Description
The ConnectButton component is used to display a button for connecting, managing, or indicating the status of an
integration.
Props
| Name | Type | Required | Description |
|---|
isDeployed | boolean | Yes | Indicates if the integration is deployed and available to end users. |
isActivated | boolean | Yes | Indicates if the integration is activated for the user. |
onClick | (e: SyntheticEvent<HTMLButtonElement>) => void | Yes | Callback for button click events. |
id | string | No | The unique identifier for the button. |
className | string | No | Additional CSS classes for styling. |
Example
<ConnectButton isDeployed={true} isActivated={false} onClick={handleClick} />
IntegrationTile
Description
The IntegrationTile component represents a single integration in the grid, displaying its name, image, and connection
status.
Props
| Name | Type | Required | Description |
|---|
id | string | No | The unique identifier for the tile. |
className | string | No | Additional CSS classes for styling. |
projectId | string | Yes | The unique identifier for the project. |
name | string | Yes | The name of the integration. |
imageUrl | string | No | The URL of the image representing the integration. |
description | string | Yes | A description of the integration. |
isDeployed | boolean | Yes | Indicates if the integration is deployed and available to end users. |
isActivated | boolean | Yes | Indicates if the integration is activated for the user. |
onConnectClick | (integrationId: string) => void | Yes | Callback for when the “Connect” button is clicked. |
onManageClick | (integrationId: string) => void | Yes | Callback for when the “Manage” button is clicked. |
onDisconnectClick | (integrationId: string) => void | Yes | Callback for when the “Disconnect” button is clicked. |
isConnecting | boolean | No | Indicates if the integration is currently being connected. |
Example
<IntegrationTile
projectId="123"
name="Integration Name"
description="Integration Description"
isDeployed={true}
isActivated={false}
onConnectClick={handleConnect}
onManageClick={handleManage}
onDisconnectClick={handleDisconnect}
/>
Connect
Description
The Connect component is the main entry point for managing integrations, providing a user interface for connecting and
managing integration templates.
Props
| Name | Type | Required | Description |
|---|
templates | Template[] | Yes | A list of integration templates available for connection. |
onConnect | (templateId: string) => void | Yes | Callback triggered when a template is connected. |
Example
<Connect templates={templates} onConnect={handleConnect} />
ConnectSingleTemplate
Description
The ConnectSingleTemplate component is used to manage a single integration template, allowing users to configure and
connect it.
Props
| Name | Type | Required | Description |
|---|
template | Template | Yes | The integration template to be managed. |
onSave | (template: Template) => void | Yes | Callback triggered when the template is saved. |
Example
<ConnectSingleTemplate template={template} onSave={handleSave} />
CredentialDataBasicAuth
Description
The CredentialDataBasicAuth component handles the input and validation of credentials for Basic Authentication.
Props
| Name | Type | Required | Description |
|---|
data | { basicAuth: { username: string; password: string; } } | Yes | The credential data for Basic Authentication, including username and password. |
onDataChange | (data: { basicAuth: { username: string; password: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataBasicAuth data={{ basicAuth: { username: 'user', password: 'pass' } }} onDataChange={handleDataChange} />
CredentialDataBinary
Description
The CredentialDataBinary component handles the input and validation of binary credential data.
Props
| Name | Type | Required | Description |
|---|
data | { binary: { binaryData: string; } } | Yes | The binary credential data, represented as a base64-encoded string. |
onDataChange | (data: { binary: { binaryData: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataBinary data={{ binary: { binaryData: 'base64encodedstring' } }} onDataChange={handleDataChange} />
CredentialDataOAuth2ClientCredentials
Description
The CredentialDataOAuth2ClientCredentials component handles the input and validation of OAuth2 Client Credentials.
Props
| Name | Type | Required | Description |
|---|
data | { oauth2Client: { clientId: string; clientSecret: string; } } | Yes | The OAuth2 Client Credentials data, including client ID and client secret. |
onDataChange | (data: { oauth2Client: { clientId: string; clientSecret: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataOAuth2ClientCredentials
data={{ oauth2Client: { clientId: 'client-id', clientSecret: 'client-secret' } }}
onDataChange={handleDataChange}
/>
CredentialDataOAuth2Code
Description
The CredentialDataOAuth2Code component handles the input and validation of OAuth2 Code credentials.
Props
| Name | Type | Required | Description |
|---|
data | { oauth2Code: { authorizationCode: string; redirectUri: string; } } | Yes | The OAuth2 Code credential data, including authorization code and redirect URI. |
onDataChange | (data: { oauth2Code: { authorizationCode: string; redirectUri: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataOAuth2Code
data={{ oauth2Code: { authorizationCode: 'auth-code', redirectUri: 'https://example.com/callback' } }}
onDataChange={handleDataChange}
/>
CredentialDataOAuth2Password
Description
The CredentialDataOAuth2Password component handles the input and validation of OAuth2 Password credentials.
Props
| Name | Type | Required | Description |
|---|
data | { oauth2Password: { username: string; password: string; } } | Yes | The OAuth2 Password credential data, including username and password. |
onDataChange | (data: { oauth2Password: { username: string; password: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataOAuth2Password
data={{ oauth2Password: { username: 'user', password: 'pass' } }}
onDataChange={handleDataChange}
/>
CredentialDataString
Description
The CredentialDataString component handles the input and validation of string-based credential data.
Props
| Name | Type | Required | Description |
|---|
data | { string: { value: string; } } | Yes | The string-based credential data, represented as a single string value. |
onDataChange | (data: { string: { value: string; } }) => void | Yes | Callback triggered when the credential data changes. |
Example
<CredentialDataString data={{ string: { value: 'example-string' } }} onDataChange={handleDataChange} />
