npm package: @hiro-ui/sdk
Description: HIRO Applications SDK.
Latest version: 8.3.12

# HIRO SDK for HIRO 7.x

## Available Functions

### initSdk

Initializes the SDK and provides config details from HIRO Desktop. `initSdk` also provides a `ready` callback and a `state` object.

```ts
const config = {}; // Optional default config

initSdk(config).then(
  ({
    config: { } // Config values provided by SDK
    ready, // Callback, once your application is ready
    state, // Stored application state
  }: InitSdkResult) => {
      // SDK is initialized and ready to use
  }
);
```

### close

Closes the application within HIRO Desktop

```js
close();
```

### unauthorized

Callback to SDK for unauthorized Token

```js
unauthorized();
```

### saveState

Sync application state back to HIRO Desktop

```js
const state = {}; // Application state object
saveState(state);
```

### runApp

Open a different application, with parameters, from within your application.

```js
const appParameters = {}; // Parameters for the new application
runApp(appId, appParameters);
```

## Available TypeScript Interfaces

### SdkConfig TypeScript Interface

```ts
interface SdkConfig {
  authUrl?: string;
  graphUrl?: string;
  redirectUrl?: string;
  clientId?: string;
  roles?: string[];
}
```

### LoadedConfig TypeScript Interface

```ts
interface LoadedConfig {
  graphUrl?: string;
  token?: string;
}
```

### DesktopUser TypeScript Interface

```ts
interface DesktopUser {
  _id: string;
  accountId: string;
  email: string;
  id: string;
  name: string;
  roles: string[];
}
```

### DesktopConfig TypeScript Interface

```ts
interface DesktopConfig {
  user: DesktopUser;
  org: {
    id: string;
    name: string;
  };
  token: string;
  graphUrl: string;
  shared: {
    [key: string]: any;
  };
  options?: {
    [key: string]: any;
  };
}
```

### InitSdkResult TypeScript Interface

InitSdkResult TypeScript Interface

```ts
interface InitSdkResult<S = {}> {
  ready: () => void;
  state: S;
  config: DesktopConfig;
}
```

## Example Usage in React

```ts
import React from 'react';
import ReactDOM from 'react-dom';

import YourReactApp from './YourReactApp';

import {
  SdkConfig, // SdkConfig TypeScript Interface
  InitSdkResult, // InitSdkResult TypeScript Interface
  initSdk, // Initializes the SDK
  unauthorized, // Callback to SDK for unauthorized Token
} from '@hiro-ui/sdk';

import Client, { Token } from '@hiro-graph/client';

// Default config for Development
const config: SdkConfig = {
  clientId: process.env.HIRO_CLIENT_ID,
  graphUrl: process.env.HIRO_GRAPH_URL,
  authUrl: process.env.HIRO_AUTH_URL,
  redirectUrl: process.env.HIRO_REDIRECT_URL,
  scopeId: process.env.HIRO_SCOPE_ID,
};

// Initializes the SDK with Default config
initSdk(config).then(
  ({
    config: { user, graphUrl, token, shared, scopeId, options },
    ready, // Callback, once your application is ready
    state, // Stored application state
  }: InitSdkResult) => {
    // SDK is initialized and ready to use

    const myToken = new Token({
      onInvalidate: () => {
        // Handle unauthorized Token
        unauthorized();
        return Promise.resolve();
      },
      getToken: () => Promise.resolve(token),
    });

    // Get Graph Client with SKD Configs
    const graphClient = new Client({
      endpoint: graphUrl,
      token: myToken,
    });

    ReactDOM.render(
      <YourReactApp />,
      document.getElementById('app'),
      ready, //ready callback for SDK
    );
  },
);
```