zenith-gen/src/templates/storybook.config.ts

A CLI tool designed to streamline the creation of projects within the Zenith Inova ecosystem, providing optimized configurations and modern development tools.

export const storybookMainConfig = (
    useChromatic: boolean,
) => `import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [${useChromatic && "'@chromatic-com/storybook'"}],

  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  core: {
    builder: '@storybook/builder-webpack5',
  },
  staticDirs: ['../public'],
};
export default config;`;

export const storybookPrevConfig = `import React from 'react';
import '../src/app/globals.css';

import type { Preview } from '@storybook/react';
import { themes } from '@storybook/theming';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    docs: {
      theme: themes.dark,
    },
    layout: 'fullscreen',
    backgrounds: {
      values: [
        { name: 'Dark', value: '#333' },
        { name: 'Light', value: '#F7F9F2' },
      ],
      default: 'Light',
    },
  },

  decorators: (Story) => (
    <div className='flex min-h-screen w-full flex-col items-center justify-center'>
      <Story />
    </div>
  ),
};

export default preview;`;