CSF is great, but it lacks an important feature for visual testing about ladle HOT 5 CLOSED

export function snapshotVariantsForVisualTesting(stories: DSIStories, options: DSIStoryConfig<any>) {
  stories.forEach(([name, Story]) => {
    // create unique suite instances for each so we can compose decorators per-story
    const suite = storiesOf('Variants', module);

    Story.decorators?.forEach((decorator) => suite.addDecorator(decorator));
    options.decorators?.forEach((decorator) => suite.addDecorator(decorator));

    const baseProps = {
      ...(options.argTypes
        ? Object.entries(options.argTypes).reduce(
            // @ts-ignore
            (map, [key, value]) => ((map[key as keyof Props] = 'action' in value ? value : value.defaultValue), map),
            {} as Record<string, unknown>
          )
        : undefined),
      ...options.args!,
      ...Story.args!,
    };

    const argTypes = { ...options.argTypes, ...Story.argTypes };

    const shouldSnapshotAlternateThemes =
      Story.snapshotAlternateThemes !== undefined ? Story.snapshotAlternateThemes : options.snapshotAlternateThemes;
    const shouldSnapshotDarkMode =
      Story.snapshotDarkMode !== undefined ? Story.snapshotDarkMode : options.snapshotDarkMode;
    const shouldSnapshotPropVariants = (
      Story.snapshotPropVariants !== undefined
        ? { ...options.snapshotPropVariants, ...Story.snapshotPropVariants }
        : options.snapshotPropVariants
    ) as { [key: string]: any[] };

    if (shouldSnapshotPropVariants) {
      Object.entries(shouldSnapshotPropVariants).forEach(([key, value]) => {
        value.forEach((propValue) => {
          suite.add(
            `${name} [prop "${key}" ${propValue}]`,
            (props: any) => (
              <Story
                {...merge(baseProps, props, {
                  [key]: argTypes[key]?.mapping ? argTypes[key]?.mapping[propValue] : propValue,
                })}
              />
            ),
            Story.parameters
          );
        });
      });
    }

    if (shouldSnapshotDarkMode) {
      suite.add(
        `${name} [Dark Mode]`,
        (props: any) => (
          <DarkMode>
            <Story {...merge(baseProps, props)} />
          </DarkMode>
        ),
        Story.parameters
      );

      if (shouldSnapshotPropVariants) {
        Object.entries(shouldSnapshotPropVariants).forEach(([key, value]) => {
          const variants = Array.isArray(value) ? value : ([] as any[]).concat(value);

          variants.forEach((propValue) => {
            suite.add(
              `${name} [Dark Mode] [prop "${key}" ${propValue}]`,
              (props: any) => (
                <DarkMode>
                  <Story
                    {...merge(baseProps, props, {
                      [key]: argTypes[key]?.mapping ? argTypes[key]?.mapping[propValue] : propValue,
                    })}
                  />
                </DarkMode>
              ),
              Story.parameters
            );
          });
        });
      }
    }

    if (shouldSnapshotAlternateThemes) {
      otherThemes.forEach(([themeName, theme]) => {
        suite.add(
          `${name} [${themeName} Theme]`,
          (props: any) => (
            <DSStyleProvider theme={theme}>
              <Story {...merge(baseProps, props)} />
            </DSStyleProvider>
          ),
          Story.parameters
        );

        if (shouldSnapshotDarkMode) {
          suite.add(
            `${name} [${themeName} Theme] [Dark Mode]`,
            (props: any) => (
              <DSStyleProvider theme={theme}>
                <DarkMode>
                  <Story {...merge(baseProps, props)} />
                </DarkMode>
              </DSStyleProvider>
            ),
            Story.parameters
          );
        }
      });
    }
  });
}