# @brixon-group/presentation-sdk

SDK for building B2B presentations that deploy to the Brixon platform.

## Prerequisites

- Node.js 20+
- GitHub account with access to Brixon-Group organization
- Personal Access Token (classic) with `read:packages` scope

## Authentication Setup (One-Time)

This package is hosted on GitHub Packages. You need to authenticate once:

### 1. Create a Personal Access Token

1. Go to https://github.com/settings/tokens
2. Click "Generate new token (classic)"
3. Select scope: `read:packages`
4. Set expiration (recommended: 90 days)
5. Copy the token (`ghp_...`)

### 2. Configure npm

Add to your `~/.npmrc` (create if it doesn't exist):

```bash
echo "@brixon-group:registry=https://npm.pkg.github.com" >> ~/.npmrc
echo "//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE" >> ~/.npmrc
```

Replace `YOUR_TOKEN_HERE` with your PAT.

## Installation

```bash
npm install @brixon-group/presentation-sdk
```

**Peer dependencies:** React 18+ and React DOM 18+

## Quick Start

```bash
# Create a new presentation
npx @brixon-group/presentation-sdk init my-presentation
cd my-presentation
npm install
npm run dev
```

## CLI Commands

### `brixon init [name]`

Scaffolds a new presentation project.

```bash
brixon init acme-pitch           # Create project
brixon init acme-pitch --force   # Overwrite existing
```

Creates:
- `src/presentation.tsx` - Main presentation component
- `brixon.config.ts` - Configuration file
- `package.json` - Dependencies
- `tsconfig.json` - TypeScript config
- `CLAUDE.md` - AI assistant context

### `brixon build`

Builds the presentation for deployment.

```bash
brixon build                    # Build to dist/
brixon build -o output          # Custom output directory
```

### `brixon dev`

Shows local development workflow guidance.

```bash
brixon dev                      # Default port 3000
brixon dev -p 4000              # Custom port
```

### `brixon deploy`

Deploys the presentation to the Brixon Hosting Platform.

```bash
brixon deploy                   # Use BRIXON_API_KEY env
brixon deploy -k <api-key>      # Explicit API key
brixon deploy --dry-run         # Preview without uploading
```

**Note:** For manual deployment, copy to the hosting platform:

```bash
# Copy presentation to hosting platform
mkdir -p ~/brixon-presentation-hosting/src/presentations/my-slug
cp src/presentation.tsx ~/brixon-presentation-hosting/src/presentations/my-slug/page.tsx

# Deploy hosting platform
cd ~/brixon-presentation-hosting
npm run cf:build && wrangler deploy
```

Presentations are accessible at `https://present.brixongroup.com/p/[slug]`

## Components

### PresentationWrapper

Root layout component that provides structure and navigation.

```tsx
import { PresentationWrapper } from '@brixon-group/presentation-sdk'

<PresentationWrapper
  title="ACME Proposal"
  sections={sections}
>
  {/* Sections go here */}
</PresentationWrapper>
```

### Hero

Full-screen title section for presentation headers.

```tsx
import { Hero } from '@brixon-group/presentation-sdk'

<Hero
  title="Digital Transformation"
  subtitle="A Strategic Proposal"
  clientName="ACME Corporation"
  year="2026"
/>
```

### Content

General content section with headline and description.

```tsx
import { Content } from '@brixon-group/presentation-sdk'

<Content
  id="challenge"
  label="The Challenge"
  headline="Current Situation"
  description="Description text..."
/>
```

### CTA

Call-to-action section with button.

```tsx
import { CTA } from '@brixon-group/presentation-sdk'

<CTA
  headline="Ready to get started?"
  subline="Let's discuss next steps"
  buttonText="Get in Touch"
  buttonHref="mailto:hello@example.com"
/>
```

### Section

Generic trackable section wrapper.

```tsx
import { Section } from '@brixon-group/presentation-sdk'

<Section id="custom" label="Custom Section">
  {/* Custom content */}
</Section>
```

## Hooks

### useTracking

Manual event tracking hook.

```tsx
import { useTracking } from '@brixon-group/presentation-sdk'

const { trackEngagement } = useTracking({
  presentationId: 'my-presentation',
  sections: [
    { id: 'hero', label: 'Intro', order: 1, type: 'hero' },
  ],
})

// Track custom event
trackEngagement('button_click', { target: 'cta' })
```

## Configuration

Create `brixon.config.ts` in your project root:

```typescript
import { defineConfig } from '@brixon-group/presentation-sdk'

export default defineConfig({
  presentation: {
    slug: 'acme-pitch',
    title: 'ACME Digital Transformation',
    subtitle: 'A Strategic Proposal',
    clientName: 'ACME Corporation',
  },
  build: {
    outDir: 'dist',
  },
  dev: {
    port: 3000,
  },
})
```

## Example Presentation

```tsx
'use client'

import {
  PresentationWrapper,
  Hero,
  Content,
  CTA,
  useTracking,
} from '@brixon-group/presentation-sdk'

const sections = [
  { id: 'hero', label: 'Introduction', order: 1, type: 'hero' as const },
  { id: 'challenge', label: 'The Challenge', order: 2, type: 'content' as const },
  { id: 'solution', label: 'Our Solution', order: 3, type: 'content' as const },
  { id: 'cta', label: 'Next Steps', order: 4, type: 'cta' as const },
]

export default function Presentation() {
  useTracking({ presentationId: 'acme-pitch', sections })

  return (
    <PresentationWrapper title="ACME Proposal" sections={sections}>
      <Hero
        title="Digital Transformation"
        subtitle="A Strategic Proposal"
        clientName="ACME Corporation"
        year="2026"
      />

      <Content
        id="challenge"
        label="The Challenge"
        headline="Current Situation"
        description="Your client faces..."
      />

      <Content
        id="solution"
        label="Our Solution"
        headline="How We Help"
        description="We propose..."
      />

      <CTA
        headline="Ready to start?"
        subline="Schedule a call"
        buttonText="Contact Us"
        buttonHref="mailto:hello@brixongroup.com"
      />
    </PresentationWrapper>
  )
}
```

## CI/CD Setup

For GitHub Actions in the same organization:

```yaml
- uses: actions/setup-node@v4
  with:
    node-version: '20'
    registry-url: 'https://npm.pkg.github.com'
    scope: '@brixon-group'

- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

For projects outside the org, use a PAT secret instead of `GITHUB_TOKEN`.

## License

UNLICENSED - Private package for Brixon Group use only.