npm package: @seenn/setup-widget
Description: CLI tool to setup iOS Widget Extension for Seenn Live Activities
Author: Seenn
Latest version: 0.2.1

# @seenn/setup-widget

CLI tool to setup iOS Widget Extension for Seenn Live Activities in React Native projects.

## Installation

```bash
npm install @seenn/setup-widget --save-dev
# or
pnpm add @seenn/setup-widget -D
# or
yarn add @seenn/setup-widget --dev
```

## Quick Start

```bash
# Initialize widget configuration and create Widget Extension
npx @seenn/setup-widget init

# After editing seenn.config.js, regenerate Swift files
npx @seenn/setup-widget update
```

## What it does

1. Creates `seenn.config.js` in your project root
2. Generates Widget Extension files in `ios/SeennWidgetExtension/`
3. Creates the bridge implementation in `ios/SeennBridge/`
4. Prints instructions for Xcode setup

## Configuration

### seenn.config.js

```javascript
module.exports = {
  // Widget Extension settings
  widget: {
    name: 'SeennWidgetExtension',  // Extension name
    deploymentTarget: '16.1',       // iOS version
  },

  // Theme configuration
  theme: {
    preset: 'default',  // or 'gradient-sunset', 'gradient-ocean', etc.

    // Override specific colors
    colors: {
      progressBar: '#007AFF',
      statusCompleted: '#34C759',
      statusFailed: '#FF3B30',
    },

    // Or use a gradient background
    gradient: {
      colors: ['#FF6B6B', '#FFE66D'],
      startPoint: 'topLeading',
      endPoint: 'bottomTrailing',
    },

    // Layout options
    layout: {
      showIcon: true,
      showEta: true,
      showStage: true,
      progressBarHeight: 8,
    },

    // CTA button styling
    cta: {
      style: {
        backgroundColor: '#FFFFFF',
        textColor: '#000000',
        cornerRadius: 20,
      },
      showOn: ['completed', 'failed'],
    },
  },

  // Job type specific icons (SF Symbols)
  jobTypes: {
    'video-generation': { icon: 'video.fill', color: '#9B59B6' },
    'image-generation': { icon: 'photo.fill', color: '#3498DB' },
  },
};
```

## Theme Presets

| Preset | Description |
|--------|-------------|
| `default` | Dark background with blue progress bar |
| `gradient-sunset` | Orange to yellow gradient |
| `gradient-ocean` | Purple to blue gradient |
| `gradient-purple` | Purple to pink gradient |
| `minimal-dark` | Black background, white text |
| `minimal-light` | White background, black text |

## CLI Commands

### `init`

Initialize the project with configuration and Widget Extension.

```bash
npx @seenn/setup-widget init [options]

Options:
  -n, --name <name>   Widget Extension name (default: "SeennWidgetExtension")
  -f, --force         Overwrite existing files
```

### `update`

Regenerate Swift files from the configuration.

```bash
npx @seenn/setup-widget update [options]

Options:
  -n, --name <name>   Widget Extension name
```

## Xcode Setup

After running `init`, you need to manually add files to Xcode:

1. **Add Widget Extension**
   - File > Add Files to "YourApp"
   - Select `ios/SeennWidgetExtension/`
   - Check "Copy items if needed"

2. **Add SeennJobAttributes.swift to both targets**
   - Select the file in Xcode
   - In File Inspector, check both your main app and Widget Extension targets

3. **Add Bridge to main app**
   - File > Add Files to "YourApp"
   - Select `ios/SeennBridge/SeennLiveActivityBridgeImpl.swift`
   - Only add to main app target

4. **Register in AppDelegate.swift**
   ```swift
   import SeennReactNative

   // In didFinishLaunchingWithOptions:
   if #available(iOS 16.1, *) {
       SeennLiveActivityRegistry.shared.register(SeennLiveActivityBridgeImpl.shared)
   }
   ```

## Using with @seenn/react-native

```typescript
import { useLiveActivity } from '@seenn/react-native';

function JobScreen({ jobId }) {
  const job = useSeennJob(seenn, jobId);

  const { isActive, isSupported } = useLiveActivity(job, {
    autoStart: true,
    autoEnd: true,
    completionCTA: {
      text: 'See Your Photos',
      deepLink: (job) => `myapp://jobs/${job.jobId}/results`,
    },
  });

  return <View>...</View>;
}
```

## Requirements

- iOS 16.1+
- React Native 0.60+
- @seenn/react-native 0.6.0+

## License

MIT