# Local Testing Guide

This guide explains how to test changes to `itech-fluentui` locally in your iCaptur project without publishing to npm.

---

## Method 1: Using npm link (Recommended)

This creates a symlink between your local package and the consuming project.

### Step 1: Build the package

In your `itech-fluentui` directory:

```bash
npm run build
```

This compiles TypeScript to the `lib` folder.

### Step 2: Create the link

In your `itech-fluentui` directory:

```bash
npm link
```

This creates a global symlink to your local package.

### Step 3: Link in your iCaptur project

Navigate to your iCaptur project directory and link the package:

```bash
cd /path/to/your/icaptur-project
npm link itech-fluentui
```

**Note:** If your package is scoped (e.g., `@itech-india/itech-fluentui`), use:

```bash
npm link @itech-india/itech-fluentui
```

### Step 4: Test your changes

1. Make changes to the select component in `itech-fluentui`
2. Run `npm run build` in `itech-fluentui` to rebuild
3. Your iCaptur project will automatically pick up the changes (you may need to restart your dev server)

### Step 5: Unlink when done

When you're finished testing:

**In iCaptur project:**

```bash
npm unlink itech-fluentui
npm install itech-fluentui@latest  # or your previous version
```

**In itech-fluentui:**

```bash
npm unlink
```

---

## Method 2: Using Local File Path (Alternative)

This method uses a direct file path in your `package.json`.

### Step 1: Build the package

In your `itech-fluentui` directory:

```bash
npm run build
```

### Step 2: Update package.json in iCaptur

In your iCaptur project's `package.json`, change the dependency:

**Before:**

```json
{
  "dependencies": {
    "itech-fluentui": "^1.0.28"
  }
}
```

**After:**

```json
{
  "dependencies": {
    "itech-fluentui": "file:../itech-fluentui"
  }
}
```

**Note:** Adjust the path (`../itech-fluentui`) to match your actual directory structure.

### Step 3: Install

In your iCaptur project:

```bash
npm install
```

### Step 4: Test your changes

1. Make changes to the select component in `itech-fluentui`
2. Run `npm run build` in `itech-fluentui` to rebuild
3. Restart your iCaptur dev server

### Step 5: Revert when done

Change the `package.json` back to the npm version and reinstall:

```json
{
  "dependencies": {
    "itech-fluentui": "^1.0.28"
  }
}
```

```bash
npm install
```

---

## Method 3: Using npm pack (For Testing Built Package)

This creates a tarball that you can install locally, simulating a real npm install.

### Step 1: Build and pack

In your `itech-fluentui` directory:

```bash
npm run build
npm pack
```

This creates a file like `itech-fluentui-1.0.28.tgz`

### Step 2: Install in iCaptur

In your iCaptur project:

```bash
npm install /path/to/itech-fluentui/itech-fluentui-1.0.28.tgz
```

### Step 3: Test

Make changes, rebuild, repack, and reinstall:

```bash
# In itech-fluentui
npm run build
npm pack

# In iCaptur
npm install /path/to/itech-fluentui/itech-fluentui-1.0.28.tgz
```

---

## Troubleshooting

### Issue: `npm error Invalid package name "@shared"` or similar

**Problem:** When running `npm link`, you get an error about invalid package names in your monorepo.

**Solution:** This happens when npm tries to resolve dependencies and encounters packages with invalid names. Use **Method 2 (File Path)** instead, which bypasses npm's package name validation:

1. In your iCaptur project's `package.json`, change:

   ```json
   {
     "dependencies": {
       "itech-fluentui": "file:../itech-fluentui"
     }
   }
   ```

2. Run `npm install` (this will work even with invalid package names in the monorepo)

3. If that still fails, use **Method 3 (npm pack)** which creates a tarball that can be installed without dependency resolution issues.

### Issue: Changes not reflecting

**Solution:**

- Make sure you've run `npm run build` after making changes
- Restart your dev server in iCaptur
- Clear node_modules cache: `rm -rf node_modules/.cache` (or `node_modules\.cache` on Windows)

### Issue: Module not found errors

**Solution:**

- Verify the package is properly linked: `npm list itech-fluentui`
- Check that the `lib` folder exists and has the built files
- Ensure the package name matches exactly (case-sensitive)

### Issue: TypeScript errors

**Solution:**

- Make sure `lib/index.d.ts` and other type definitions are generated
- Restart your TypeScript server in your IDE
- Check that the `types` field in package.json points to the correct location

### Issue: React hooks errors (duplicate React)

**Solution:**
This happens when React is installed in both projects. Use `peerDependencies` correctly or:

```bash
# In itech-fluentui
npm link ../icaptur-project/node_modules/react
```

---

## Quick Reference

| Method        | Pros                              | Cons                               |
| ------------- | --------------------------------- | ---------------------------------- |
| **npm link**  | Fast iteration, automatic updates | Can cause duplicate React issues   |
| **File path** | Simple, no symlinks               | Requires path updates, slower      |
| **npm pack**  | Most similar to real install      | Requires repacking for each change |

**Recommendation:** Use `npm link` for active development, switch to published version for final testing.

---

## Workflow Example

```bash
# Terminal 1: itech-fluentui
cd itech-fluentui
npm run build
npm link

# Terminal 2: iCaptur
cd icaptur-project
npm link itech-fluentui
npm run dev

# Make changes in itech-fluentui/src/components/ui/select.tsx
# Terminal 1:
npm run build  # Rebuild after changes

# Changes should appear in iCaptur (may need to refresh)
```