# Swype SDK

SDK for KYC components with isolated styles using PostCSS scoping.

## Development Setup

### Initial Setup (One-time)

1. **Build the SDK first:**

   ```bash
   cd swype-sdk
   npm run build:all
   ```

2. **Link the SDK for development:**

   ```bash
   cd swype-sdk
   yarn link
   ```

3. **In the Next.js app, use the linked SDK:**
   ```bash
   cd swype-nextjs
   yarn remove swype-sdk  # Remove any existing installation
   yarn add link:../swype-sdk  # Add the linked version
   ```

### Hot Reload Development

To develop the SDK with hot reload:

1. **Terminal 1 - Run SDK in watch mode:**

   ```bash
   cd swype-sdk
   npm run dev
   ```

2. **Terminal 2 - Run the Next.js app:**
   ```bash
   cd swype-nextjs
   yarn dev
   ```

**Important Notes:**

- If hot reload isn't working, restart the Next.js dev server
- The Next.js config has been updated to watch symlinked packages
- Make sure both terminals are running for hot reload to work

Now any changes you make to the SDK files will automatically rebuild and be reflected in the Next.js app.

### Troubleshooting

If hot reload stops working:

1. Stop both dev servers
2. Clear Next.js cache: `rm -rf swype-nextjs/.next`
3. Restart both dev servers

### Build Commands

- `npm run dev` - Run in development mode with hot reload
- `npm run build` - Build TypeScript files only
- `npm run build:css` - Build CSS files only
- `npm run build:all` - Build everything (TypeScript + CSS)

### CSS Isolation

All styles are automatically scoped under `.swype-sdk-root` using PostCSS to prevent conflicts with the host application.

### Project Structure

```
swype-sdk/
├── src/
│   ├── api/          # API service layer
│   ├── components/   # Reusable components
│   ├── hooks/        # Custom React hooks
│   ├── stores/       # Zustand stores
│   ├── utils/        # Utility functions
│   ├── widgets/      # Main widget components
│   └── styles.css    # Tailwind CSS entry
├── dist/             # Built files
├── postcss.config.js # PostCSS configuration
└── tailwind.config.js # Tailwind configuration
```