<commit_before>import { makeDecorator } from "@storybook/addons";
import isChromatic from "./isChromatic";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import CarbonProvider from "../src/components/carbon-provider";
import sageDebugTheme from "../src/style/design-tokens/debug-theme.util";
import {
  aegeanTheme,
  mintTheme,
  noTheme,
  sageTheme,
} from "../src/style/themes";
import { config } from "react-transition-group";
import WebFont from "webfontloader";

const themes = [mintTheme, aegeanTheme, noTheme, sageTheme].reduce(
  (themesObject, theme) => {
    themesObject[theme.name] = theme;
    return themesObject;
  },
  {}
);

if (process.env.STORYBOOK_DEBUG_THEME === "true") {
  themes["sage-debug"] = sageDebugTheme;
}

const render = (Story, themeName) => (
  <CarbonProvider theme={themes[themeName]}>
    <Story themeName={themeName} />
  </CarbonProvider>
);

const FourColumnLayout = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
`;

const withThemeProvider = makeDecorator({
  name: "withThemeProvider",
  parameterName: "themeProvider",
  skipIfNoParametersOrOptions: false,
  allowDeprecatedUsage: false,
  wrapper: (
    Story,
    context,
    {
      parameters = {
        chromatic: {
          theme: null,
          fourColumnLayout: false,
        },
      },
    }
  ) => {
    const { theme: chromaticTheme, fourColumnLayout } = parameters.chromatic;
    const isChromaticBuild = isChromatic();

    // Disable transitions
    config.disabled = isChromaticBuild;

    // Only render the story once the fonts are loaded
    const [loading, setLoading] = useState(true);
    useEffect(() => {
      WebFont.load({
        custom: {
          families: ["CarbonIcons", "Sage UI"],
        },
        classes: false,
        active: () => setLoading(false),
        inactive: () => setLoading(new Error("Unable to load font files.")),
      });
    }, []);

    if (loading instanceof Error) {
      throw loading;
    }

    if (loading) {
      return null;
    }
<commit_msg>chore: amend withThemeProvider to load three SageUI variants<commit_after>import { makeDecorator } from "@storybook/addons";
import isChromatic from "./isChromatic";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import CarbonProvider from "../src/components/carbon-provider";
import sageDebugTheme from "../src/style/design-tokens/debug-theme.util";
import {
  aegeanTheme,
  mintTheme,
  noTheme,
  sageTheme,
} from "../src/style/themes";
import { config } from "react-transition-group";
import WebFont from "webfontloader";

const themes = [mintTheme, aegeanTheme, noTheme, sageTheme].reduce(
  (themesObject, theme) => {
    themesObject[theme.name] = theme;
    return themesObject;
  },
  {}
);

if (process.env.STORYBOOK_DEBUG_THEME === "true") {
  themes["sage-debug"] = sageDebugTheme;
}

const render = (Story, themeName) => (
  <CarbonProvider theme={themes[themeName]}>
    <Story themeName={themeName} />
  </CarbonProvider>
);

const FourColumnLayout = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
`;

const withThemeProvider = makeDecorator({
  name: "withThemeProvider",
  parameterName: "themeProvider",
  skipIfNoParametersOrOptions: false,
  allowDeprecatedUsage: false,
  wrapper: (
    Story,
    context,
    {
      parameters = {
        chromatic: {
          theme: null,
          fourColumnLayout: false,
        },
      },
    }
  ) => {
    const { theme: chromaticTheme, fourColumnLayout } = parameters.chromatic;
    const isChromaticBuild = isChromatic();

    // Disable transitions
    config.disabled = isChromaticBuild;

    // Only render the story once the fonts are loaded
    const [loading, setLoading] = useState(true);
    useEffect(() => {
      WebFont.load({
        custom: {
          families: ["CarbonIcons", "Sage UI:n4,n7,n9"],
        },
        classes: false,
        active: () => setLoading(false),
        inactive: () => setLoading(new Error("Unable to load font files.")),
      });
    }, []);

    if (loading instanceof Error) {
      throw loading;
    }

    if (loading) {
      return null;
    }

{'fraction_non_alphanumeric': 0.13222748815165877, 'fraction_numerical': 0.0026066350710900474, 'mean_word_length': 3.204183266932271, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2338785', 'n_tokens_mistral': 1329, 'n_tokens_neox': 1296, 'n_words': 307}