@claudebernard/storybook-addon-theme-switcher

Un addon Storybook qui permet de basculer entre différents thèmes CSS dans vos stories.

Fonctionnalités

• 🎨 Basculer entre plusieurs thèmes CSS
• 🎯 Intégration facile avec Storybook
• 📦 Léger et type-safe
• 🔧 Configuration personnalisable des thèmes

Installation

npm install @claudebernard/storybook-addon-theme-switcher

Intégration dans votre projet Storybook

Étape 1 : Enregistrer l'addon

Dans votre fichier .storybook/main.ts (ou .storybook/main.js), ajoutez l'addon à la liste des addons :

import type { StorybookConfig } from "@storybook/web-components";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@claudebernard/storybook-addon-theme-switcher" // Ajoutez cette ligne
  ],
  framework: {
    name: "@storybook/web-components",
    options: {},
  },
};

export default config;

Étape 2 : Configurer les thèmes dans preview.ts

Option 1 : Utiliser le fichier preview.ts de l'addon (recommandé)

Vous pouvez importer directement la configuration preview de l'addon :

import type { Preview } from "@storybook/web-components";
import { decorators, globalTypes, parameters } from "@claudebernard/storybook-addon-theme-switcher/preview";

// Définissez vos thèmes CSS
const lightTheme = `
  :root {
    --primary-color: #007bff;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const darkTheme = `
  :root {
    --primary-color: #4dabf7;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const preview: Preview = {
  decorators,
  globalTypes,
  parameters: {
    ...parameters,
    themeSwitcher: {
      themes: {
        light: lightTheme,
        dark: darkTheme,
      },
      defaultTheme: 'light',
    },
  },
};

export default preview;

Option 2 : Configuration manuelle

Dans votre fichier .storybook/preview.ts, configurez vos thèmes et ajoutez le décorateur :

import type { Preview } from "@storybook/web-components";
import { withThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

// Définissez vos thèmes CSS
const lightTheme = `
  :root {
    --primary-color: #007bff;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const darkTheme = `
  :root {
    --primary-color: #4dabf7;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const blueTheme = `
  :root {
    --primary-color: #0066cc;
    --background-color: #f0f8ff;
    --text-color: #003366;
    --border-color: #b3d9ff;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

// Configuration des thèmes
const themes = {
  'Clair': lightTheme,
  'Sombre': darkTheme,
  'Bleu': blueTheme,
};

const preview: Preview = {
  parameters: {
    // Configuration de l'addon theme-switcher
    themeSwitcher: {
      themes,
      defaultTheme: 'Clair'
    },
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  // Ajoutez le décorateur
  decorators: [withThemeSwitcher],
  // Déclaration du global type
  globalTypes: {
    themeSwitcher: {}
  },
};

export default preview;

Étape 3 : Utilisation avec des fichiers CSS externes

Si vous préférez utiliser des fichiers CSS séparés :

// .storybook/preview.ts
import type { Preview } from "@storybook/web-components";
import { withThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

// Importez vos fichiers CSS comme des chaînes de caractères
// Note: Vous devrez peut-être configurer votre bundler pour importer les CSS comme du texte
import lightThemeCSS from './themes/light.css?inline';
import darkThemeCSS from './themes/dark.css?inline';

const themes = {
  'Thème Clair': lightThemeCSS,
  'Thème Sombre': darkThemeCSS,
};

const preview: Preview = {
  parameters: {
    themeSwitcher: {
      themes,
      defaultTheme: 'Thème Clair'
    },
  },
  decorators: [withThemeSwitcher],
  globalTypes: {
    themeSwitcher: {}
  },
};

export default preview;

Étape 4 : Enregistrement manuel (optionnel)

Si vous préférez enregistrer l'addon manuellement, créez un fichier .storybook/manager.ts :

import { registerThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

registerThemeSwitcher();

Configuration avancée

Paramètres disponibles

interface ThemeSwitcherParameters {
  themes: Record<string, string>;    // Nom du thème -> CSS
  defaultTheme: string;              // Nom du thème par défaut
}

Exemple avec CSS Variables

const themes = {
  'Corporate': `
    :root {
      --primary: #0066cc;
      --secondary: #6c757d;
      --success: #28a745;
      --danger: #dc3545;
      --warning: #ffc107;
      --info: #17a2b8;
      --light: #f8f9fa;
      --dark: #343a40;
    }
  `,
  'Creative': `
    :root {
      --primary: #ff6b6b;
      --secondary: #4ecdc4;
      --success: #45b7d1;
      --danger: #f9ca24;
      --warning: #f0932b;
      --info: #6c5ce7;
      --light: #ddd;
      --dark: #2d3436;
    }
  `,
};

Utilisation dans les stories

Une fois configuré, l'addon apparaîtra dans la barre d'outils de Storybook avec une icône de pinceau. Vous pourrez :

1. Cliquer sur l'icône pour ouvrir le menu des thèmes
2. Sélectionner un thème dans la liste
3. Voir le changement appliqué immédiatement à votre story

Développement

Construction

npm run build

Mode développement

npm run dev

Vérification des types

npm run type-check

Compatibilité

• Storybook 8.6.11
• React 18+
• TypeScript 5+

Licence

MIT