DSMMG/storybook/.storybook/preview.ts

import type { Preview } from "@storybook/react";
import "@managemate/css";
import "@managemate/icons";
import "./preview.css";

const preview: Preview = {
  parameters: {
    layout: "padded",
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: "page",
      values: [
        { name: "page", value: "var(--mmg-color-bg-page)" },
        { name: "surface", value: "var(--mmg-color-bg-surface)" },
        { name: "white", value: "#FFFFFF" },
        { name: "dark", value: "#0B0D14" },
      ],
    },
    a11y: {
      // axe-core configuration. WCAG 2.1 AA + RGAA tags.
      config: {
        rules: [
          { id: "color-contrast", enabled: true },
          { id: "label", enabled: true },
          { id: "button-name", enabled: true },
        ],
      },
      options: {
        runOnly: {
          type: "tag",
          values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice"],
        },
      },
    },
    options: {
      storySort: {
        order: [
          "Intro",
          "Tokens",
          ["Colors", "Spacing", "Typography", "Shadows", "Motion"],
          "Layout",
          "Forms",
          ["Button", "Input", "Select", "Checkbox", "Radio", "Switch"],
          "Feedback",
          "Overlays",
          "Navigation",
          "Data display",
          "Advanced",
          "Theming",
        ],
      },
    },
  },
  globalTypes: {
    theme: {
      description: "Thème global",
      defaultValue: "light",
      toolbar: {
        title: "Thème",
        icon: "circlehollow",
        items: [
          { value: "light", title: "Light" },
          { value: "dark", title: "Dark" },
          { value: "system", title: "Système" },
        ],
        dynamicTitle: true,
      },
    },
    accent: {
      description: "Couleur d'accent (preset DSMMG)",
      defaultValue: "synapse",
      toolbar: {
        title: "Accent",
        icon: "paintbrush",
        items: [
          { value: "synapse", title: "Synapse (rose)" },
          { value: "rose", title: "Rose vif" },
          { value: "blue", title: "Bleu" },
          { value: "violet", title: "Violet" },
          { value: "green", title: "Vert" },
          { value: "amber", title: "Ambre" },
          { value: "red", title: "Rouge" },
          { value: "cyan", title: "Cyan" },
          { value: "slate", title: "Ardoise" },
        ],
        dynamicTitle: true,
      },
    },
    density: {
      description: "Densité",
      defaultValue: "comfortable",
      toolbar: {
        title: "Densité",
        icon: "component",
        items: [
          { value: "comfortable", title: "Comfortable" },
          { value: "cozy", title: "Cozy" },
          { value: "compact", title: "Compact" },
        ],
        dynamicTitle: true,
      },
    },
  },
  decorators: [
    (Story, ctx) => {
      const root = document.documentElement;
      // Theme
      if (ctx.globals.theme === "system") root.removeAttribute("data-mmg-theme");
      else root.setAttribute("data-mmg-theme", ctx.globals.theme);
      // Accent
      if (ctx.globals.accent === "synapse") root.removeAttribute("data-mmg-accent");
      else root.setAttribute("data-mmg-accent", ctx.globals.accent);
      // Density
      if (ctx.globals.density === "comfortable") root.removeAttribute("data-mmg-density");
      else root.setAttribute("data-mmg-density", ctx.globals.density);
      return Story();
    },
  ],
};

export default preview;