hanbiro-react16-sdk 1.0.0 → 1.0.2

package/README.md

@@ -1 +1,89 @@
 # hanbiro-react16-sdk
+
+React 16.2.0 compatible UI components SDK for Hanbiro projects.
+
+## Installation
+
+```bash
+npm install hanbiro-react16-sdk
+```
+
+## 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.
+
+```tsx
+// src/index.tsx (Entry point)
+import { initHanbiroReactSDK } from 'hanbiro-react16-sdk/utils';
+
+initHanbiroReactSDK({
+  baseUrl: import.meta.env.VITE_BASE_URL || "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.
+
+```tsx
+import React, { Component } from 'react';
+import { ChatAIDraft } from 'hanbiro-react16-sdk/components';
+import { getBaseUrl } from 'hanbiro-react16-sdk/utils';
+
+// 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);
+  };
+
+  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>
+    );
+  }
+}
+
+export default ChatAIDraftApp;
+```
+
+## 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`

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

@@ -6,5 +6,5 @@ interface ListProps {
     }) => void;
     getEditorContent?: () => string;
 }
-declare const List: React.SFC<ListProps>;
+declare const List: React.FunctionComponent<ListProps>;
 export default List;

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { C as t } from "../index-DuSzMCvF.mjs";
+import { C as t } from "../index-BB9T_tBw.mjs";
 export {
   t as ChatAIDraft
 };