hanbiro-react16-sdk 1.0.5 → 1.0.7

package/README.md

@@ -8,72 +8,77 @@ React 16.2.0 compatible UI components SDK for Hanbiro projects.
 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:**
+```ts
+// src/index.tsx or App.tsx
+import 'hanbiro-react16-sdk/dist/hanbiro-react16-sdk.style.css';
+```
+
+**For UMD (script tag):**
+```html
+<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` |
+
+## Exported Utils
+
+| Function | Description | Import path |
+|---|---|---|
+| `initHanbiroReactSDK` | Initialize SDK (baseUrl, signer) | `hanbiro-react16-sdk/utils` |
+| `getBaseUrl` | Get the configured base URL | `hanbiro-react16-sdk/utils` |
+| `getGroupwareUrl` | Get the groupware URL | `hanbiro-react16-sdk/utils` |
+
+---
+
 ## Initialization (Required)
 
-You **must** initialize the SDK at the entry point of your main project (e.g., `index.tsx` or `App.tsx`) by calling `initHanbiroReactSDK`. This ensures that global configurations like `baseUrl` and `signer` are properly set up before any components are rendered.
+Call `initHanbiroReactSDK` at the entry point of your project before rendering any components.
 
-```tsx
-// src/index.tsx (Entry point)
+```ts
 import { initHanbiroReactSDK } from 'hanbiro-react16-sdk/utils';
 
 initHanbiroReactSDK({
-  baseUrl: import.meta.env.VITE_BASE_URL || "https://vndev.hanbiro.com",
+  baseUrl: 'https://vndev.hanbiro.com',
   signer: null, // Pass your signer instance here if available
 });
 ```
 
-## Usage Example: `ChatAIDraft` in a Class Component
+---
 
-Here is an example of how to import and use the `ChatAIDraft` component inside a React class component.
+## Usage: ES Module (npm)
 
 ```tsx
 import React, { Component } from 'react';
 import { ChatAIDraft } from 'hanbiro-react16-sdk/components';
 import { getBaseUrl } from 'hanbiro-react16-sdk/utils';
+import 'hanbiro-react16-sdk/dist/hanbiro-react16-sdk.style.css';
 
-// Optional: Import global styles if needed (depending on your build setup)
-// import 'hanbiro-react16-sdk/dist/style.css'; 
-
-interface AppState {
-  draftContent: string;
-}
-
-class ChatAIDraftApp extends Component<{}, AppState> {
-  constructor(props: {}) {
-    super(props);
-    this.state = {
-      draftContent: ''
-    };
-  }
-
-  // Handle the event when user applies AI generated content
-  handleApply = (result: any) => {
-    console.log("Applied Output:", result);
-    this.setState({ draftContent: result.html });
-    alert("Applied content: " + result.html);
+class ChatAIDraftApp extends Component {
+  handleApply = (result) => {
+    console.log('Applied Output:', result);
   };
 
   render() {
     return (
-      <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
-        <h2>Hanbiro AI Draft Component</h2>
-        
-        <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
-          {/* Using the component */}
-          <ChatAIDraft
-            baseUrl={getBaseUrl()}
-            onApply={this.handleApply}
-          />
-        </div>
-
-        {/* Display the draft result */}
-        {this.state.draftContent && (
-          <div style={{ marginTop: '20px' }}>
-            <h3>Draft Result:</h3>
-            <div dangerouslySetInnerHTML={{ __html: this.state.draftContent }} />
-          </div>
-        )}
-      </div>
+      <ChatAIDraft
+        baseUrl={getBaseUrl()}
+        onApply={this.handleApply}
+      />
     );
   }
 }
@@ -81,6 +86,86 @@ class ChatAIDraftApp extends Component<{}, AppState> {
 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.
+
+```html
+<!-- 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`.
+
+```js
+// Initialize
+HanbiroReact16SDK.initHanbiroReactSDK({
+  baseUrl: 'https://vndev.hanbiro.com',
+  signer: null,
+});
+
+// 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
+
+```js
+angular.module('myApp').directive('chatAiDraft', function() {
+  return {
+    restrict: 'E',
+    link: function(scope, element) {
+      var container = element[0];
+
+      HanbiroReact16SDK.initHanbiroReactSDK({
+        baseUrl: 'https://vndev.hanbiro.com',
+        signer: null,
+      });
+
+      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);
+      });
+    }
+  };
+});
+```
+
+```html
+<!-- In your AngularJS template -->
+<chat-ai-draft></chat-ai-draft>
+```
+
+---
+
 ## Development Commands
 
 - Run playground locally: `npm run dev`

package/dist/components/ChatAIDraft/SettingPopper.d.ts

@@ -6,12 +6,14 @@ interface SettingPopperProps {
     originalEmail: string;
     setOriginalEmail: (email: string) => void;
     getEditorContent?: () => string;
+    parentRef?: React.RefObject<HTMLDivElement>;
 }
 interface SettingPopperState {
     open: boolean;
 }
 declare class SettingPopper extends React.Component<SettingPopperProps, SettingPopperState> {
     private containerRef;
+    private popperRef;
     constructor(props: SettingPopperProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/components/ChatAIDraft/index.d.ts

@@ -25,6 +25,7 @@ interface AIPaneState {
     originalEmail: string;
 }
 declare class ChatAIDraft extends React.Component<AIPaneProps, AIPaneState> {
+    private rootRef;
     constructor(props: AIPaneProps);
     setAiContext: (nVal: string) => void;
     handleMessageChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/dist/components/LoadingCircular/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface LoadingCircularProps {
+    size?: number;
+    color?: string;
+    thickness?: number;
+}
+declare const LoadingCircular: React.FunctionComponent<LoadingCircularProps>;
+export default LoadingCircular;

package/dist/components/LoadingContainer/index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, CSSProperties } from 'react';
+
+interface LoadingContainerProps {
+    style?: CSSProperties;
+    fullHeight?: boolean;
+    label?: string;
+    size?: "small" | "medium";
+}
+declare const LoadingContainer: React.FunctionComponent<LoadingContainerProps>;
+export default LoadingContainer;

package/dist/components/TinyMceEditor/index.d.ts

@@ -0,0 +1,41 @@
+import { default as React, CSSProperties } from 'react';
+import { EditorEvent } from 'tinymce';
+
+export interface TinyMceEditorProps {
+    value: string;
+    onChange?: (v: string) => void;
+    isSimple?: boolean;
+    disabled?: boolean;
+    height?: string | number;
+    skin?: "tinymce-5" | "oxide";
+    onClick?: (e: EditorEvent<MouseEvent>) => void;
+    style?: CSSProperties;
+    lang?: string;
+    placeholder?: string;
+    options?: any;
+    defaultPlugins?: any;
+    defaultToolbar?: any;
+    imageUploadBasePath?: string;
+    imageUploadUrl?: string;
+    supportImageTypes?: any;
+    fontfamily?: string;
+    filePickerHandle?: any;
+    noImage?: boolean;
+    defaultFontType?: string;
+    defaultFontSize?: number;
+    setupFunction?: any;
+}
+interface TinyMceEditorState {
+    showEditor: boolean;
+}
+declare class TinyMceEditor extends React.Component<TinyMceEditorProps, TinyMceEditorState> {
+    private editorRef;
+    constructor(props: TinyMceEditorProps);
+    getContent: () => {
+        content: any;
+    };
+    getRawContent: () => any;
+    private handleEditorChange;
+    render(): React.JSX.Element;
+}
+export default TinyMceEditor;

package/dist/components/TinyMceEditor/scrollStyle.d.ts

@@ -0,0 +1 @@
+export declare const scrollStyle = "\n::-webkit-scrollbar,\n*::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n*::-webkit-scrollbar-track {\n  background: transparent;\n  backdrop-filter: blur(6px);\n}\n\n::-webkit-scrollbar-thumb,\n*::-webkit-scrollbar-thumb {\n  background: #e0e0e0;\n}\n\n::-webkit-scrollbar-thumb:focus,\n*::-webkit-scrollbar-thumb:focus {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-thumb:active,\n*::-webkit-scrollbar-thumb:active {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-thumb:hover,\n*::-webkit-scrollbar-thumb:hover {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-corner,\n*::-webkit-scrollbar-corner {\n  background-color: transparent;\n}\n";

package/dist/components/TinyMceEditor/useEditor.d.ts

@@ -0,0 +1,24 @@
+import { Editor as EditorType } from 'tinymce';
+
+export declare const EDITOR_CLASS = "annie-editor";
+export declare const isEditorEmpty: (editorValue: string) => boolean;
+interface editorInterface {
+    isSimple: boolean;
+    noImage: boolean;
+}
+declare const useEditor: (options: editorInterface) => {
+    defaultPlugins: string;
+    defaultToolbar: string;
+    imageUploadBasePath: string;
+    imageUploadUrl: string;
+    supportImageTypes: string;
+    fontfamily: string;
+    setupFunction: (ed: EditorType) => void;
+    filePickerHandle: (cb: (uri: string, fields: {
+        title: string;
+    }) => void) => void;
+    defaultFontType: undefined;
+    defaultFontSize: number;
+    isFontWeightBold: boolean;
+};
+export default useEditor;

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ChatAIDraft } from './ChatAIDraft';
-export * from './ChatAIDraft';
+export { default as LoadingCircular } from './LoadingCircular';
+export { default as LoadingContainer } from './LoadingContainer';