cunningham/packages/react/.storybook/preview.tsx

import "../src/icons.scss";
import "../src/index.scss";
import "../src/fonts.scss";
import { Preview } from "@storybook/react";
import { DocsContainer } from "@storybook/blocks";

import { CunninghamProvider } from "../src/components/Provider";
import {
  BACKGROUND_COLOR_TO_THEME,
  getThemeFromGlobals,
  themes,
} from "./themes";
import React from "react";

export const DocsWithTheme = (props, context) => {
  const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
  return (
    <CunninghamProvider theme={theme}>
      <DocsContainer {...props} theme={themes[theme]} />
    </CunninghamProvider>
  );
};

const preview: Preview = {
  decorators: [
    (Story, context) => (
      <CunninghamProvider theme={getThemeFromGlobals(context.globals)}>
        <Story />
      </CunninghamProvider>
    ),
  ],
  parameters: {
    backgrounds: {
      default: null,
      values: Object.entries(BACKGROUND_COLOR_TO_THEME).map((value) => ({
        name: value[1],
        value: value[0],
      })),
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    docs: {
      container: DocsWithTheme,
    },
    options: {
      storySort: (a, b) => {
        const roots = ["Getting Started", "Components", "Migrating"];
        const gettingStartedOrder = [
          "Installation",
          "First steps",
          "Customization",
          "Theming",
          "Colors",
          "Spacings",
          "Typography",
        ];

        const aParts = a.title.split("/");
        const bParts = b.title.split("/");
        if (aParts[0] !== bParts[0]) {
          return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
        }
        if (aParts[1] !== bParts[1]) {
          if (aParts[0] === "Getting Started") {
            return (
              gettingStartedOrder.indexOf(aParts[1]) -
              gettingStartedOrder.indexOf(bParts[1])
            );
          }
          return aParts[1].localeCompare(bParts[1]);
        }
        return 0;
      },
    },
  },
};

export default preview;