npm package: @sitegenerate/blocks
Description: Bibliothèque de composants SiteGenerate — blocs, layouts, variantes, animations
Author: SiteGenerate
Latest version: 1.0.0

# @sitegenerate/blocks

Bibliothèque de composants React/Next.js pour SiteGenerate.

## Installation

```bash
npm install @sitegenerate/blocks
```

## Configuration du projet consommateur

### 1. `tailwind.config.js` — scanner les fichiers de la bibliothèque

```js
module.exports = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    // ↓ OBLIGATOIRE — permet à Tailwind de voir les classes de la bibliothèque
    './node_modules/@sitegenerate/blocks/dist/**/*.js',
  ],
  // ...
}
```

### 2. `globals.css` — importer les tokens de base

```css
@import '@sitegenerate/blocks/tokens';
/* ou */
@import '@sitegenerate/blocks/dist/tokens/theme.css';
```

### 3. `app/[site_slug]/layout.tsx` — fournir les tokens via contexte

```tsx
import { SiteNav, SiteFooter, SiteTokensProvider } from '@sitegenerate/blocks'
import '@sitegenerate/blocks/tokens'

export default function SiteLayout({ children, params }) {
  const site = await getSite(params.site_slug)

  return (
    <html>
      <body>
        <SiteTokensProvider tokens={site.tokens ?? {}}>
          <SiteNav site={site} />
          {children}
          <SiteFooter site={site} />
        </SiteTokensProvider>
      </body>
    </html>
  )
}
```

### 4. Utiliser un bloc dans une page

```tsx
import { DynamicBlock } from '@sitegenerate/blocks'

// Rendu automatique selon le type
<DynamicBlock id="hero-main" type="hero" props={{ title: 'Bonjour' }} />

// Import direct d'un bloc
import { HeroBlock } from '@sitegenerate/blocks'
<HeroBlock
  sectionId="hero"
  title="Mon titre"
  layout="split"
  bg_type="gradient"
  cta_text="En savoir plus"
  cta_url="/contact"
/>
```

## Personnalisation des tokens CSS

Chaque site surcharge les variables via le style inline de la page :

```tsx
// app/[site_slug]/page.tsx
<div
  id="main-content"
  style={{
    '--sg-primary':     site.tokens.primary,
    '--sg-secondary':   site.tokens.secondary,
    '--sg-accent':      site.tokens.accent,
    '--sg-font-heading': site.tokens.font_heading,
    '--sg-font-body':    site.tokens.font_body,
  } as React.CSSProperties}
>
  {/* sections */}
</div>
```

## Blocs disponibles

| Composant | Description |
|-----------|-------------|
| `HeroBlock` | Section hero — image, gradient, split, fullscreen |
| `FeaturesBlock` | Grille de features/services |
| `TestimonialsBlock` | Témoignages — grid, list, carousel |
| `CTABlock` | Call-to-action — centered, split, banner |
| `ContactBlock` | Formulaire de contact + infos |
| `TeamBlock` | Équipe avec avatars et réseaux sociaux |
| `GalleryBlock` | Galerie — grid, masonry, carousel + lightbox |
| `TextBlock` | Texte riche avec image optionnelle |
| `PricingBlock` | Grille de tarifs avec toggle mensuel/annuel |
| `FAQBlock` | Accordion de FAQ |
| `CarouselBlock` | Carousel plein écran avec slides |
| `DynamicBlock` | Dispatcher — résout le composant selon `type` |

## Layout

| Composant | Description |
|-----------|-------------|
| `SiteNav` | Navbar responsive avec menu mobile, scroll-aware |
| `SiteFooter` | Footer avec brand, navigation, réseaux sociaux |

## Variants de section

Chaque bloc accepte une prop `variant` qui contrôle le fond et les couleurs :

```tsx
variant: 'light' | 'dark' | 'primary' | 'secondary' | 'accent' | 'surface' | 'muted' | 'white' | 'gradient'
```

## Animations

```tsx
animation_variant: 'fadeUp' | 'fadeIn' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'blurIn' | 'none'
```

## Développement local

```bash
# Dans @sitegenerate/blocks
npm install
npm run dev        # build en watch mode

# Dans le projet consommateur
npm link @sitegenerate/blocks
```

## Publication

```bash
# Patch : correction de bug (1.0.0 → 1.0.1)
npm run version:patch

# Minor : nouvelle feature (1.0.0 → 1.1.0)
npm run version:minor

# Major : breaking change (1.0.0 → 2.0.0)
npm run version:major
```