Enhance documentation and setup for TypeScript and Changesets

.changeset/README.md

@@ -0,0 +1,34 @@
+# How to Use Changesets
+
+This repo uses [Changesets](https://github.com/changesets/changesets) for automated changelog and version management.
+
+## Common Commands
+
+- **Add a changeset:**
+
+    ```sh
+    pnpm changeset
+    ```
+
+    Follow the prompts to describe your change and select affected packages and version bumps.
+
+- **Version packages & update changelog:**
+
+    ```sh
+    pnpm changeset version
+    ```
+
+    This will update versions and changelogs for all packages with pending changesets.
+
+- **Publish (after versioning):**
+    ```sh
+    pnpm changeset publish
+    ```
+
+## Workflow
+
+1. Run `pnpm changeset` after making a change. Commit the generated markdown file.
+2. When ready to release, run `pnpm changeset version` and commit the updated changelogs and package versions.
+3. Publish with `pnpm changeset publish`.
+
+See the [Changesets docs](https://github.com/changesets/changesets) for more details.

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.4/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: CI
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [18, 20, 22]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+
+            - name: Setup Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'pnpm'
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Run linting
+              run: pnpm run lint
+
+            - name: Check types
+              run: pnpm run check-types
+
+            - name: Run tests
+              run: pnpm run test
+
+            - name: Build packages
+              run: pnpm run build

apps/docs/CHANGELOG.md

@@ -0,0 +1,8 @@
+# docs
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [2037029]
+    - react-toast-msg@2.8.0

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/test-app/CHANGELOG.md

@@ -0,0 +1,8 @@
+# test-app
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [2037029]
+    - react-toast-msg@2.8.0

apps/test-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "test-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -9,6 +9,7 @@
     "check-types": "turbo run check-types"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.0",
     "prettier": "^3.7.4",
     "turbo": "^2.9.6",
     "typescript": "5.9.2"

packages/react-toast-msg/CHANGELOG.md

@@ -0,0 +1,7 @@
+# react-toast-msg
+
+## 2.8.0
+
+### Minor Changes
+
+- 2037029: added comprehensive JSDoc comments to all the exported types, functions, and components

packages/react-toast-msg/USAGE.md

@@ -0,0 +1,63 @@
+# React Toast Msg
+
+A fast, flexible, developer-friendly React toast notification library with a clean black & white design.
+
+## Installation
+
+```sh
+pnpm add react-toast-msg
+# or
+yarn add react-toast-msg
+# or
+npm install react-toast-msg
+```
+
+## Usage
+
+1. **Add the ToastContainer at the root of your app:**
+
+```tsx
+import { ToastContainer } from 'react-toast-msg';
+
+function App() {
+    return (
+        <>
+            <ToastContainer />
+            {/* ...your app... */}
+        </>
+    );
+}
+```
+
+2. **Show a toast from anywhere:**
+
+```tsx
+import { toast } from 'react-toast-msg';
+
+toast('Hello world!');
+toast.success('Success message');
+toast.error('Error message');
+toast.warning('Warning message');
+toast.loading('Loading...');
+```
+
+3. **Promise toast:**
+
+```tsx
+import { toast } from 'react-toast-msg';
+
+toast.promise(fetch('/api/data'), {
+    loading: 'Loading...',
+    success: 'Loaded!',
+    error: 'Failed!'
+});
+```
+
+## Customization
+
+- Pass `autoClose`, `closeButton`, or custom `icon` as props to `ToastContainer` or individual toasts.
+- Style with your own CSS or override the default styles.
+
+---
+
+For more, see the [full documentation](https://rtm.sudhucodes.com) or the [example app](../apps/test-app).

packages/react-toast-msg/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-toast-msg",
-    "version": "2.7.2",
+    "version": "2.8.0",
     "description": "Fast, flexible, developer-friendly React toast notifications with a clean black & white design.",
     "files": [
         "dist"
@@ -11,7 +11,7 @@
         "build": "pnpm build:ts && pnpm build:css",
         "build:ts": "tsup",
         "build:css": "shx mkdir -p dist && shx cp ./src/style.css ./dist/style.css",
-        "test": "vitest"
+        "test": "vitest run"
     },
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -49,19 +49,20 @@
         "react-dom": "^18 || ^19"
     },
     "devDependencies": {
+        "@repo/typescript-config": "workspace:*",
         "@tailwindcss/cli": "^4.1.18",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
-        "shx": "^0.4.0",
-        "@vitejs/plugin-react": "^4.3.4",
+        "@vitejs/plugin-react": "^6.0.1",
         "jsdom": "^29.0.1",
         "prettier": "^3.6.2",
         "prettier-plugin-tailwindcss": "^0.7.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "shx": "^0.4.0",
         "tailwindcss": "^4.1.18",
         "tsup": "^8.5.0",
         "typescript": "^5.9.3",

packages/react-toast-msg/src/components/icons/icons.tsx

@@ -1,6 +1,10 @@
-import { IconProps } from '../../types';
-import { cn } from '../../utilities/cn';
+import { IconProps } from '@/types';
+import { cn } from '@/utilities/cn';
 
+/**
+ * Success icon component for success toast notifications.
+ * Displays a checkmark icon indicating a successful operation.
+ */
 export const SuccessIcon = ({ className }: IconProps) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -18,6 +22,10 @@ export const SuccessIcon = ({ className }: IconProps) => (
     </svg>
 );
 
+/**
+ * Error icon component for error toast notifications.
+ * Displays an exclamation mark in a circle indicating an error occurred.
+ */
 export const ErrorIcon = ({ className }: IconProps) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -35,6 +43,10 @@ export const ErrorIcon = ({ className }: IconProps) => (
     </svg>
 );
 
+/**
+ * Warning icon component for warning toast notifications.
+ * Displays a triangle with an exclamation mark indicating a warning.
+ */
 export const WarningIcon = ({ className }: IconProps) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -52,6 +64,10 @@ export const WarningIcon = ({ className }: IconProps) => (
     </svg>
 );
 
+/**
+ * Loading icon component for loading toast notifications.
+ * Displays an animated spinning icon indicating an ongoing process.
+ */
 export const LoadingIcon = ({ className }: IconProps) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -77,6 +93,10 @@ export const LoadingIcon = ({ className }: IconProps) => (
     </svg>
 );
 
+/**
+ * Close icon component used for the close button on toast notifications.
+ * Displays an X mark for dismissing toasts.
+ */
 export const CloseIcon = ({ className }: IconProps) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"