feat: 🎸release v0.0.1

Author: chative-tu

.github/CODEOWNERS

@@ -0,0 +1,8 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*       @botstar-tra @chative-anh @chative-ly @chative-tu

CONTRIBUTING.md

@@ -6,8 +6,8 @@ Thank you for your interest in developing ChativeWidget! Below is a detailed gui
 
 1. Clone the repository to your local machine:
    ```
-   git clone https://github.com/botstar/chative-react-native-sdk.git
-   cd chative-react-native-sdk
+   git clone https://github.com/botstar/chative-react-native-widget.git
+   cd chative-react-native-widget
    ```
 
 2. Install dependencies:
@@ -58,7 +58,7 @@ After you've completed your changes and want to test them:
    yarn livechat
    ```
    This command will perform the following steps:
-   - Remove the current version of chative-react-native-sdk
+   - Remove the current version of chative-react-native-widget
    - Clear the yarn cache
    - Install the new version from the .tgz file
 

README.md

@@ -1,6 +1,6 @@
-# ChativeWidget for React Native
+# Chative Widget for React Native
 
-ChativeWidget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.
+Chative Widget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.
 
 ## Features
 
@@ -10,22 +10,28 @@ ChativeWidget is a React Native component that provides an easy-to-use chat widg
 - Adjustable insets for different device sizes
 - TypeScript support
 
+## Screenshot
+
+<img src="./screenshot/screenshot.png" alt="screenshot" width="350">
+
 ## Installation
 
 ```bash
-npm install chative-react-native-sdk
+npm install chative-react-native-widget
 # or
-yarn add chative-react-native-sdk
+yarn add chative-react-native-widget
 ```
 
+This library depends on [react-native-webview](https://www.npmjs.com/package/react-native-webview) and [async-storage](https://github.com/react-native-async-storage/async-storage). Please follow the instructions provided in the docs.
+
 ## Usage
 
 Here's a basic example of how to use the ChativeWidget in your React Native application:
 
 ```jsx
 import React, { useRef } from 'react';
 import { Button, View } from 'react-native';
-import ChativeWidget from 'chative-react-native-sdk';
+import ChativeWidget from 'chative-react-native-widget';
 
 export default function App() {
   const widgetRef = useRef(null);
@@ -35,7 +41,7 @@ export default function App() {
   };
 
   const handleCloseChat = () => {
-    widgetRef.current?.hide();
+    // widgetRef.current?.hide();
   };
 
   return (
@@ -44,7 +50,7 @@ export default function App() {
       <ChativeWidget
         ref={widgetRef}
         channelId="your-channel-id"
-        onClosed={handleCloseChat}
+        onClosed={() => console.log('Widget closed')}
         onLoaded={() => console.log('Widget loaded')}
         onNewMessage={(message) => console.log('New message:', message)}
       />
@@ -64,15 +70,14 @@ export default function App() {
 | insetBottom | number | No | Bottom inset (default: 50 for iOS, 20 for Android) |
 | onClosed | () => void | No | Callback when the widget is closed |
 | onLoaded | () => void | No | Callback when the widget is loaded |
-| onNewMessage | (message: any) => void | No | Callback when a new message is received |
+| onNewMessage | () => void | No | Callback when a new message is received |
 
 ## Methods
 
 The following methods are available via the ref:
 
 - `show()`: Display the chat widget
 - `hide()`: Hide the chat widget
-- `injectJavaScript(script: string)`: Inject custom JavaScript into the widget
 - `reload()`: Reload the widget
 
 ## Customization
@@ -93,7 +98,7 @@ You can customize the appearance of the widget by providing a custom header comp
 This module includes TypeScript declarations. You can import types like this:
 
 ```typescript
-import ChativeWidget, { ChativeWidgetRef } from 'chative-react-native-sdk';
+import ChativeWidget, { ChativeWidgetRef } from 'chative-react-native-widget';
 ```
 
 ## License

examples/App.js

@@ -1,16 +1,17 @@
-import ChativeWidget from 'chative-react-native-sdk';
+import ChativeWidget from 'chative-react-native-widget';
 import React, { useRef } from 'react';
 import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
 
 export default function App() {
   const chativeWidgetRef = useRef(null);
+  const channelId = 's49f3a621-2f07-45a4-8019-92663014b998'; // Replace with your channel id
 
   const handleOpenModal = () => {
     chativeWidgetRef.current.show();
   };
 
   const handleCloseModal = () => {
-    chativeWidgetRef.current.hide();
+    // chativeWidgetRef.current.hide();
   };
 
   const onLoaded = () => {
@@ -28,7 +29,7 @@ export default function App() {
       </View>
       <ChativeWidget
         ref={chativeWidgetRef}
-        channelId="sacfa6e20-cf0a-11ee-a51c-59f486eae982"
+        channelId={channelId}
         onLoaded={onLoaded}
         onClosed={handleCloseModal}
         onNewMessage={onNewMessage}

examples/package.json

@@ -7,11 +7,11 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "livechat": "yarn remove chative-react-native-sdk && yarn cache clean && yarn add ../chative-react-native-sdk-v0.0.1.tgz"
+    "livechat": "yarn remove chative-react-native-widget && yarn cache clean && yarn add ../chative-react-native-widget-v0.0.1.tgz"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
-    "chative-react-native-sdk": "../chative-react-native-sdk-v0.0.1.tgz",
+    "chative-react-native-widget": "../chative-react-native-widget-v0.0.1.tgz",
     "expo": "~51.0.20",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",

examples/yarn.lock

@@ -2263,9 +2263,9 @@ charenc@0.0.2, charenc@~0.0.1:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
-chative-react-native-sdk@../chative-react-native-sdk-v0.0.1.tgz:
+chative-react-native-widget@../chative-react-native-widget-v0.0.1.tgz:
   version "0.0.1"
-  resolved "../chative-react-native-sdk-v0.0.1.tgz#5b120f83c65105c86599bbac74461433b215afa2"
+  resolved "../chative-react-native-widget-v0.0.1.tgz#6b64d0e39773d3160899c53c54fe01236f1e76e2"
 
 chownr@^2.0.0:
   version "2.0.0"

index.d.ts

@@ -3,7 +3,7 @@
 import { ReactElement } from 'react';
 import { ViewStyle } from 'react-native';
 
-declare module 'chative-react-native-sdk' {
+declare module 'chative-react-native-widget' {
   export interface ChativeWidgetProps {
     channelId: string;
     headerComponent?: ReactElement;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chative-react-native-sdk",
+  "name": "chative-react-native-widget",
   "version": "0.0.1",
   "description": "React Native SDK for Chative",
   "main": "index.js",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/botstar/chative-react-native-sdk.git"
+    "url": "git+https://github.com/botstar/chative-react-native-widget.git"
   },
   "dependencies": {},
   "peerDependencies": {
@@ -46,12 +46,14 @@
     "react",
     "native",
     "chative",
-    "widget"
+    "widget",
+    "chat",
+    "customer-support"
   ],
   "author": "chative",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/botstar/chative-react-native-sdk/issues"
+    "url": "https://github.com/botstar/chative-react-native-widget/issues"
   },
-  "homepage": "https://github.com/botstar/chative-react-native-sdk#readme"
+  "homepage": "https://github.com/botstar/chative-react-native-widget#readme"
 }

screenshot/screenshot.png

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import WebViewComponent from './WebView';
-import { WidgetApi } from './helper';
+import { INDEX_HIDE, INDEX_SHOW } from './constants';
+import { WidgetApi } from './utils';
 
 const propTypes = {
   channelId: PropTypes.string.isRequired,
@@ -29,7 +30,7 @@ const ChativeWidget = forwardRef(({
   const webViewRef = useRef(null);
 
   const modalStyleDynamic = {
-    zIndex: isModalVisible ? 999 : -1,
+    zIndex: isModalVisible ? INDEX_SHOW : INDEX_HIDE,
     opacity: isModalVisible ? 1 : 0,
   };
 
@@ -41,6 +42,7 @@ const ChativeWidget = forwardRef(({
   const handleClose = () => {
     setIsModalVisible(false);
     onClosed && onClosed();
+    webViewRef.current?.injectJavaScript(WidgetApi('openChatWindow'));
   };
 
   useImperativeHandle(ref, () => ({
@@ -50,7 +52,6 @@ const ChativeWidget = forwardRef(({
     },
     hide: () => {
       setIsModalVisible(false);
-      webViewRef.current?.injectJavaScript(WidgetApi('openChatWindow'));
     },
     injectJavaScript: (script) => {
       webViewRef.current?.injectJavaScript(script);