tybotflow-widget 0.5.4 → 0.5.6

package/README.md

@@ -1,42 +1,249 @@
-# TybotFlow Widget SDK
+# TybotFlow Widget - Development Documentation
 
 A modern, customizable React widget for Tybot chat integration.
 
-## Installation
+## 📋 Table of Contents
+
+-   [Prerequisites](#prerequisites)
+-   [Getting Started](#getting-started)
+-   [Project Structure](#project-structure)
+-   [Development](#development)
+-   [Building](#building)
+-   [Publishing to NPM](#publishing-to-npm)
+-   [Configuration](#configuration)
+-   [Technologies Used](#technologies-used)
+-   [Common Issues](#common-issues)
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed:
+
+-   **Node.js** (v16 or higher)
+-   **npm** or **yarn**
+-   **Git**
+
+## Getting Started
+
+### 1. Clone the Repository
 
 ```bash
-npm install tybotflow-widget
+git clone https://github.com/Tython-dev/tybotflow-widget.git
+cd tybotflow-widget
 ```
 
-## Usage
+### 2. Install Dependencies
 
-in react
+```bash
+npm install
+```
 
-```tsx
-import { createTybotWidget } from "tybotflow-widget";
+### 3. Start Development Server
 
-useEffect(() => {
-  createTybotWidget({
-    bot: { botId: "your-bot-id", name: "My Bot" },
-    mainColor: "#FF0000",
-    // ...other config options
-  });
-}, []);
+```bash
+npm run dev
+```
+
+The development server will start at `http://localhost:5500`.
+
+## Project Structure
+
+```
+tybot-widget-dev/
+├── src/
+│   ├── assets/              # Images, fonts, and static assets
+│   ├── components/          # React components
+│   │   ├── TybotWidget.tsx  # Main widget component
+│   │   ├── AudioPlayer.tsx
+│   │   ├── CarouselSlider.tsx
+│   │   ├── Products.tsx
+│   │   └── ...
+│   ├── index.tsx            # Library entry point
+│   ├── main.tsx             # Development entry point
+│   ├── types.ts             # TypeScript type definitions
+│   └── index.css            # Global styles
+├── dist/                    # Built files (generated)
+├── index.html               # Development HTML file
+├── package.json             # Package configuration
+├── vite.config.ts           # Vite build configuration
+├── tailwind.config.js       # Tailwind CSS configuration
+├── tsconfig.json            # TypeScript configuration
+├── README.md                # Developer documentation (this file)
+└── README.npm.md            # NPM package documentation
+```
+
+## Development
+
+### Running the Development Server
+
+```bash
+npm run dev
 ```
 
-with script tag
+This starts a local development server with hot module replacement (HMR). Open your browser and navigate to `http://localhost:5500`.
+
+### Testing the Widget
+
+The `index.html` file includes a test implementation of the widget. You can modify this file to test different configurations:
 
 ```html
-<script src="https://unpkg.com/tybotflow-widget/dist/index.umd.js"></script>
 <script>
-  TybotWidget.createTybotWidget({
-      bot: { botId: "your-bot-id", name: "My Bot" },
-      mainColor: "#FF0000",
-      // ...other config options
-  });
+    TybotWidget.createTybotWidget({
+        bot: { botId: 'your-bot-id' },
+    });
 </script>
 ```
 
-## Props
+### Making Changes
+
+1. **Components**: Edit files in `src/components/`
+2. **Styles**: Modify `src/index.css` or component-specific styles
+3. **Types**: Update `src/types.ts` for TypeScript definitions
+4. **Entry Point**: Main export is in `src/index.tsx`
+
+### Code Style
+
+-   Follow TypeScript best practices
+-   Use functional components with React hooks
+-   Keep components modular and reusable
+-   Use Tailwind CSS for styling
+
+## Building
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+This command:
+
+-   Compiles TypeScript to JavaScript
+-   Bundles the code using Vite
+-   Generates both ES and UMD formats
+-   Creates TypeScript declaration files (`.d.ts`)
+-   Outputs everything to the `dist/` directory
+
+### Build Output
+
+After building, the `dist/` directory will contain:
+
+```
+dist/
+├── index.es.js       # ES module format
+├── index.umd.js      # UMD format (for script tags)
+└── index.d.ts        # TypeScript declarations
+```
+
+### Preview Production Build
+
+```bash
+npm run preview
+```
+
+## Publishing to NPM
+
+### Prerequisites for Publishing
+
+1. **NPM Account**: You need access to the Tython npm account
+2. **Login to NPM**: Run `npm login` and enter the Tython npm account credentials
+3. **Access Rights**: Ensure the Tython account has publish rights to the `tybotflow-widget` package
+
+### Publishing Steps
+
+#### 1. Update Version
+
+Update the version in `package.json` following [Semantic Versioning](https://semver.org/):
+
+```bash
+# Patch release (bug fixes): 0.5.4 -> 0.5.5
+npm version patch
+
+# Minor release (new features): 0.5.4 -> 0.6.0
+npm version minor
+
+# Major release (breaking changes): 0.5.4 -> 1.0.0
+npm version major
+```
+
+Or manually edit the version in `package.json`:
+
+```json
+{
+    "version": "0.5.5"
+}
+```
+
+#### 2. Build the Package
+
+```bash
+npm run build
+```
+
+Verify the build was successful and check the `dist/` directory.
+
+#### 3. Test the Package Locally (Optional)
+
+Test the built package using the `index.html` file:
+
+1. Build the package: `npm run build`
+2. Open `index.html` in your browser
+3. Uncomment the local script tag:
+    ```html
+    <script src="./dist/index.umd.js"></script>
+    <script>
+      TybotWidget.createTybotWidget({
+        bot: { botId: "bot-id" },
+      });
+    </script>
+    ```
+4. Comment out the react main script if it's active
+    ```html
+      <script type="module" src="/src/main.tsx"></script>
+    ```
+5. Test the widget functionality
+
+#### 4. Publish to NPM
+
+```bash
+npm publish
+```
+
+#### 5. Verify Publication
+
+Visit `https://www.npmjs.com/package/tybotflow-widget` to confirm the new version is live.
+
+### Publishing Checklist
+
+-   [ ] Update version in `package.json`
+-   [ ] Update `README.npm.md` if needed
+-   [ ] Run `npm run build` successfully
+-   [ ] Test the build locally
+-   [ ] Commit all changes
+-   [ ] Run `npm publish`
+-   [ ] Push changes to GitHub
+
+## Technologies Used
+
+-   **React 19** - UI library
+-   **TypeScript** - Type safety
+-   **Vite** - Build tool and dev server
+-   **Tailwind CSS** - Utility-first CSS framework
+-   **Axios** - HTTP client
+-   **React Markdown** - Markdown rendering
+-   **Lucide React** - Icon library
+-   **WaveSurfer** - Audio visualization
+-   **jsPDF** - PDF generation
+
+## Common Issues
+
+### Build Fails
+
+-   Ensure all dependencies are installed: `npm install`
+-   Clear the cache: `rm -rf node_modules dist && npm install`
+-   Check TypeScript errors: `npx tsc --noEmit`
+
+### NPM Publish Fails
 
-See `dist/index.d.ts` for all available configuration options.
+-   Verify you're logged in: `npm whoami`
+-   Check if the version already exists on NPM
+-   Ensure you have publish rights to the package

package/README.npm.md

@@ -0,0 +1,42 @@
+# TybotFlow Widget SDK
+
+A modern, customizable React widget for Tybot chat integration.
+
+## Installation
+
+```bash
+npm install tybotflow-widget
+```
+
+## Usage
+
+in react
+
+```tsx
+import { createTybotWidget } from "tybotflow-widget";
+
+useEffect(() => {
+  createTybotWidget({
+    bot: { botId: "your-bot-id", name: "My Bot" },
+    mainColor: "#FF0000",
+    // ...other config options
+  });
+}, []);
+```
+
+with script tag
+
+```html
+<script src="https://unpkg.com/tybotflow-widget/dist/index.umd.js"></script>
+<script>
+  TybotWidget.createTybotWidget({
+      bot: { botId: "your-bot-id", name: "My Bot" },
+      mainColor: "#FF0000",
+      // ...other config options
+  });
+</script>
+```
+
+## Props
+
+See `dist/index.d.ts` for all available configuration options.

package/dist/index.d.ts

@@ -1,27 +1,10 @@
-export { }
-/**
- * Mounts the Tybot Widget to the DOM.
- * @param config - Configuration options for the widget.
- * @example
- * ```html
- * <script>
- *   TybotWidget.createTybotWidget(
- *     {
- *       bot: { botId: '123', name: 'Support Bot' }
- *     }
- *   );
- * </script>
- * ```
- */
-export declare function createTybotWidget(
-  config: TybotWidgetConfig
-): void;
+export declare function createTybotWidget(config: TybotWidgetConfig): void;
 
 /**
  * Information about a bot instance.
  * @category Types
  */
-declare interface IBot {
+export declare interface IBot {
     /** Bot's numeric ID (optional). */
     id?: number;
     /** Unique bot identifier string. */
@@ -48,7 +31,7 @@ declare interface IBot {
  * Configuration for the Tybot Widget instance.
  * @category Props
  */
-declare interface TybotWidgetConfig {
+export declare interface TybotWidgetConfig {
     /** Current user object or ID. */
     user?: any;
     /** Authentication token for API calls. */
@@ -113,4 +96,4 @@ declare interface TybotWidgetConfig {
     bot: IBot;
 }
 
-export { }
+export { }