Storyblok Datasources

Automatische Synchronisation von Design Tokens zu Storyblok Datasources für den Visual Editor

🎯 Überblick

Dieses System synchronisiert Ihre Design Tokens (@httpjpg/tokens) automatisch mit Storyblok Datasources, damit Redakteure im Visual Editor benutzerfreundliche Dropdowns statt technischer Werte sehen.

📊 Erstelle Datasources

1. Umgebungsvariablen einrichten

Erstellen Sie eine .env.local Datei im Root:

# Storyblok Management API (für Datasource-Sync)
STORYBLOK_MANAGEMENT_TOKEN=your_personal_access_token
STORYBLOK_SPACE_ID=your_space_id

Token erstellen:

Öffne Storyblok Account Settings
Erstelle einen Personal Access Token
Kopiere den Token in .env.local

Space ID finden:

Öffne dein Storyblok Space
Settings → General
Die Space ID ist die Nummer in der URL: https://app.storyblok.com/#!/me/spaces/[SPACE_ID]

2. Datasources synchronisieren

# Im Root des Projekts
pnpm --filter @httpjpg/tokens sync:storyblok

Das Script erstellt/aktualisiert folgende Datasources:

spacing-options - None, XS, Small, Medium, Large, XL, 2XL, 3XL, 4XL
background-color-options - White, Black, Light Gray, Gray, Dark Gray, Primary, Accent
width-options - Full Width, Container, Narrow
aspect-ratio-options - 16:9, 4:3, 1:1, 3:4, 9:16, 21:9

🔧 In Storyblok Component Schema verwenden

Beispiel: Section Component

{
  "name": "section",
  "display_name": "Section",
  "schema": {
    "padding_top": {
      "type": "option",
      "display_name": "Padding Top",
      "datasource": "spacing-options",
      "default_value": "Medium"
    },
    "padding_bottom": {
      "type": "option",
      "display_name": "Padding Bottom",
      "datasource": "spacing-options",
      "default_value": "Medium"
    },
    "bg_color": {
      "type": "option",
      "display_name": "Background Color",
      "datasource": "background-color-options",
      "default_value": "White"
    },
    "width": {
      "type": "option",
      "display_name": "Width",
      "datasource": "width-options",
      "default_value": "Container"
    }
  }
}

💻 Im Code verwenden

Die Mapping-Funktionen konvertieren Datasource-Werte automatisch zu Tokens:

import { mapSpacingToToken } from "@httpjpg/storyblok-ui/lib/spacing-utils";
import { mapColorToToken } from "@httpjpg/storyblok-ui/lib/token-mapping";

// Im Component
<Section
  css={{
    pt: mapSpacingToToken(blok.paddingTop),  // "Medium" → "8"
    bg: mapColorToToken(blok.bgColor),        // "White" → "white"
  }}
>
  {children}
</Section>