@storybook/core

Custom Storybook Configuration

This code snippet demonstrates how to customize Storybook's configuration, including specifying where to find stories, which addons to use, the framework (e.g., React), and the builder (e.g., Webpack 5).

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5'
  }
};

Adding Decorators

Decorators are a way to wrap stories with extra markup or styling. This code sample shows how to add a decorator globally in `.storybook/preview.js` that adds margin around each story.

export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Custom Webpack Configuration

This demonstrates how to extend Storybook's default Webpack configuration to support additional file types or loaders, in this case, adding support for SCSS files.

const path = require('path');

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};