Build Configuration Tool

Build a command-line tool that initializes and configures a component library development environment. The tool should set up configuration files for organizing component stories, registering plugins, and customizing the development experience.

Requirements

Your tool should create two configuration files:

Main Configuration (main.config.js)

Create a main configuration file that:

1. Story Discovery: Define patterns to locate story files in src/components/**/*.stories.js and src/pages/**/*.stories.js

2. Plugin Registration: Register the following plugins:

   • @storybook/addon-essentials for core functionality
   • @storybook/addon-links for navigation
   • @storybook/addon-a11y for accessibility testing

3. Framework Selection: Configure to use React with Vite as the builder

Preview Configuration (preview.config.js)

Create a preview configuration file that:

1. Global Parameters: Set the following default parameters:
   • Layout mode: centered
   • Available background colors: light (#F8F8F8) and dark (#333333)

Implementation

Create a Node.js script setup-config.js that:

• Accepts a target directory as a command-line argument (defaults to current directory)
• Creates the configuration files in the .storybook subdirectory
• Uses proper JavaScript module syntax (ES modules)
• Validates that configuration objects are properly structured

Test Cases { .test-cases }

Test Case 1: Basic Configuration Generation { .test-case @test }

Input:

node setup-config.js

Expected Behavior:

• Creates .storybook/main.config.js with all required settings
• Creates .storybook/preview.config.js with parameters
• Both files use valid JavaScript syntax

Validation in setup-config.test.js:

// Verify files are created and contain expected configuration
const mainConfig = require('./.storybook/main.config.js');
assert(Array.isArray(mainConfig.stories));
assert(mainConfig.stories.length === 2);
assert(mainConfig.addons.includes('@storybook/addon-essentials'));

const previewConfig = require('./.storybook/preview.config.js');
assert(previewConfig.parameters.layout === 'centered');

Test Case 2: Custom Directory Target { .test-case @test }

Input:

node setup-config.js ./my-project

Expected Behavior:

• Creates configuration files in ./my-project/.storybook/ directory
• Creates parent directories if they don't exist

Validation in setup-config.test.js:

// Verify files in custom location
assert(fs.existsSync('./my-project/.storybook/main.config.js'));
assert(fs.existsSync('./my-project/.storybook/preview.config.js'));

Dependencies { .dependencies }

@storybook/core { .dependency }

Provides the core configuration system for organizing and building component libraries. Supports main and preview configuration files with customizable story patterns, addon registration, framework selection, and global settings.