@seenn/setup-widget

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

Installation

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

Quick Start

# 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

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.

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.

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

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

Using with @seenn/react-native

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