hanbiro-react16-sdk

v1.0.35

Published

19 days ago

React 16.2.0 compatible UI components for Hanbiro

Downloads

618

0High
0Medium
0Low

minhnhat1104

hanbiro-react16-sdk

React 16.2.0 compatible UI components SDK for Hanbiro projects.

Installation

npm install hanbiro-react16-sdk

CSS Import (Required)

You must import the SDK stylesheet at the entry point of your project (or in the HTML file when using UMD).

For npm/ES module projects:

// src/index.tsx or App.tsx
import "hanbiro-react16-sdk/style.css";

For UMD (script tag):

<link rel="stylesheet" href="path/to/hanbiro-react16-sdk.style.css" />

Exported Components

| Component | Import path | | ------------------ | -------------------------------- | | ChatAIDraft | hanbiro-react16-sdk/components | | LoadingCircular | hanbiro-react16-sdk/components | | LoadingContainer | hanbiro-react16-sdk/components | | CountryFlag | hanbiro-react16-sdk/components |

Exported Utils

| Function | Description | Import path | | ----------------- | ---------------------------------------------------- | --------------------------- | | setLibLang | Set the active language for SDK components | hanbiro-react16-sdk/utils | | getBaseUrl | Get the base URL (derived from the current location) | hanbiro-react16-sdk/utils | | getGroupwareUrl | Get the groupware URL | hanbiro-react16-sdk/utils | | getAppVersion | Get the detected app version ("v2" | "v3") | hanbiro-react16-sdk/utils |

Versioned Theming (Automatic)

The SDK serves both the v3 app (URL contains /v3) and the v2 app (URL contains /ngw/app). On import, the SDK detects the current version from the URL and sets a data-hanbiro-sdk-version attribute ("v2" | "v3") on the <html> element:

<html data-hanbiro-sdk-version="v2">
  ...
</html>

The stylesheet then overrides the primary color palette for v2 via the :root[data-hanbiro-sdk-version="v2"] selector. No initialization call is required — just import the SDK and its stylesheet.

The base URL is derived automatically from the current location (getBaseUrl), so there is no manual setup step.

Language Configuration (`setLibLang`)

SDK components read their translations from a shared global config (SDKConfig.lang). Because some translation lookups happen at module-load time inside the bundled .ts files, the language must be set before the SDK components are rendered — passing it later (e.g. via a prop and useEffect) is too late for those module-level lookups.

Use setLibLang to configure the active language imperatively.

Supported language codes: en, ko, vi (defaults to en).

ES Module (npm)

import { setLibLang } from "hanbiro-react16-sdk/utils";

// Call ONCE at app startup, before rendering any SDK component
setLibLang("ko");

Changing language at runtime

setLibLang only updates the global config — components already mounted will not re-translate module-level strings automatically. To apply a new language at runtime, set it then remount the SDK subtree (or reload the page):

import { setLibLang } from "hanbiro-react16-sdk/utils";

function App() {
  const [lang, setLangState] = useState("ko");

  const handleLangChange = (next: string) => {
    setLibLang(next);    // update SDK config first
    setLangState(next);  // then trigger remount via `key`
  };

  return <ChatAIDraft key={lang} onApply={...} />;
}

UMD (script tag)

HanbiroReact16SDK.setLibLang("ko");

Usage: ES Module (npm)

import React, { Component } from "react";
import { ChatAIDraft } from "hanbiro-react16-sdk/components";
import { getBaseUrl } from "hanbiro-react16-sdk/utils";
import "hanbiro-react16-sdk/style.css";

class ChatAIDraftApp extends Component {
  handleApply = (result) => {
    console.log("Applied Output:", result);
  };

  render() {
    return <ChatAIDraft baseUrl={getBaseUrl()} onApply={this.handleApply} />;
  }
}

export default ChatAIDraftApp;

Usage: UMD (Script Tag / AngularJS / Legacy Projects)

Load the SDK via <script> and <link> tags directly in your HTML. React and ReactDOM must be loaded first.

<!-- 1. Load peer dependencies -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<!-- 2. Load SDK stylesheet -->
<link rel="stylesheet" href="path/to/hanbiro-react16-sdk.style.css" />

<!-- 3. Load SDK UMD bundle -->
<script src="path/to/hanbiro-react16-sdk.umd.js"></script>

The SDK is exposed as a global variable HanbiroReact16SDK.

// Mount a component into a DOM element
ReactDOM.render(
  React.createElement(HanbiroReact16SDK.ChatAIDraft, {
    baseUrl: HanbiroReact16SDK.getBaseUrl(),
    onApply: function (result) {
      console.log("Applied:", result);
    },
  }),
  document.getElementById("chat-ai-container"),
);

Example: AngularJS Directive

angular.module("myApp").directive("chatAiDraft", function () {
  return {
    restrict: "E",
    link: function (scope, element) {
      var container = element[0];

      ReactDOM.render(
        React.createElement(HanbiroReact16SDK.ChatAIDraft, {
          baseUrl: HanbiroReact16SDK.getBaseUrl(),
          onApply: function (result) {
            scope.$apply(function () {
              scope.draftContent = result.html;
            });
          },
        }),
        container,
      );

      scope.$on("$destroy", function () {
        ReactDOM.unmountComponentAtNode(container);
      });
    },
  };
});

<!-- In your AngularJS template -->
<chat-ai-draft></chat-ai-draft>

ChatAIDraft — Imperative API (Ref)

ChatAIDraft exposes setAIContext via ref, allowing you to programmatically set the HTML content of the AI Context editor inside the Settings panel.

interface ChatAIDraftRef {
  setAIContext: (html: string) => void;
}

React 18 / React 16.8+ (useRef)

import React, { useRef } from "react";
import { ChatAIDraft } from "hanbiro-react16-sdk/components";

function MailComposer() {
  const chatRef = useRef<ChatAIDraft>(null);

  const handleOpenAI = () => {
    chatRef.current?.setAIContext("<p>Original email content...</p>");
  };

  return (
    <>
      <button onClick={handleOpenAI}>Open AI</button>
      <ChatAIDraft
        ref={chatRef}
        onApply={(params) => console.log(params.html)}
      />
    </>
  );
}

AngularJS / UMD (callback ref)

let chatAIInstance = null;

ReactDOM.render(
  React.createElement(HanbiroReact16SDK.ChatAIDraft, {
    ref: function (instance) {
      chatAIInstance = instance;
    },
    onApply: function (result) {
      /* ... */
    },
  }),
  document.getElementById("chat-ai-container"),
);

// Call anytime — e.g. when opening the AI panel
function setEmailContext(html) {
  if (chatAIInstance) {
    chatAIInstance.setAIContext(html);
  }
}

Development Commands

Run playground locally: npm run dev
Build library for production: npm run build
Build playground for production: npm run build:playground
Typecheck: npm run test:typescript

Development Workflow

Follow these steps when updating the library:

Finish coding: Make your changes in the src directory.
Publish: Run the publish script which will automatically run typecheck, build, commit, bump version, and publish to npm.
```
python3 publish.py
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

hanbiro-react16-sdk

Installation

CSS Import (Required)

Exported Components

Exported Utils

Versioned Theming (Automatic)

Language Configuration (setLibLang)

ES Module (npm)

Changing language at runtime

UMD (script tag)

Usage: ES Module (npm)

Usage: UMD (Script Tag / AngularJS / Legacy Projects)

Example: AngularJS Directive

ChatAIDraft — Imperative API (Ref)

React 18 / React 16.8+ (useRef)

AngularJS / UMD (callback ref)

Development Commands

Development Workflow

Language Configuration (`setLibLang`)