tessl/npm-kadira--storybook
React Storybook: Isolate React Component Development with Hot Reloading.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
configuration.mddocs/
Configuration
System configuration for loading and organizing stories with hot module replacement support. The configuration system manages story discovery and loading with automatic reloading during development.
Capabilities
Configure
Sets up Storybook with story loading functions and enables hot module replacement for development.
/**
* Configures Storybook with story loaders and hot reloading
* @param loaders - Function or array of functions that load stories
* @param module - Webpack module for hot reloading support
*/
function configure(loaders: Function, module?: any): void;Usage Examples:
import { configure } from '@kadira/storybook';
// Basic configuration - single loader
configure(() => {
require('../stories/button.stories');
require('../stories/input.stories');
}, module);
// Multiple story files with require.context
configure(() => {
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}, module);
// Loading stories from multiple directories
configure(() => {
// Load component stories
const componentReq = require.context('../src/components', true, /\.stories\.js$/);
componentReq.keys().forEach(filename => componentReq(filename));
// Load page stories
const pageReq = require.context('../src/pages', true, /\.stories\.js$/);
pageReq.keys().forEach(filename => pageReq(filename));
}, module);
// Advanced configuration with conditional loading
configure(() => {
if (process.env.NODE_ENV === 'development') {
// Load development-only stories
require('../stories/dev.stories');
}
// Always load main stories
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}, module);Configuration Files
Storybook supports various configuration files for customizing the setup.
Main Configuration (.storybook/config.js)
Primary configuration file where stories are loaded and global settings are applied.
// .storybook/config.js
import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';
// Add global decorators
addDecorator(withKnobs);
// Configure story loading
configure(() => {
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}, module);Webpack Configuration (.storybook/webpack.config.js)
Custom webpack configuration for handling additional file types and loaders.
// .storybook/webpack.config.js
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
include: path.resolve(__dirname, '../')
}
]
}
};HTML Head Customization (.storybook/head.html)
Custom HTML head content for adding stylesheets, fonts, or meta tags.
<!-- .storybook/head.html -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>Express Middleware (.storybook/middleware.js)
Custom Express middleware for handling API routes or additional server functionality.
// .storybook/middleware.js
module.exports = function expressMiddleware(router) {
router.get('/api/mock-data', (req, res) => {
res.json({ message: 'Mock API response' });
});
};Hot Module Replacement
Automatic story reloading during development when story files are modified.
/**
* Hot module replacement support
* Automatically reloads stories when files change during development
* Requires webpack module parameter in configure() call
*/Usage Examples:
// Enable HMR by passing module parameter
configure(() => {
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}, module); // module parameter enables HMR
// Individual story files also support HMR
storiesOf('Button', module) // module parameter here too
.add('default', () => <Button>Default</Button>);Environment Configuration
Configuration options can be set via environment variables for different deployment scenarios.
Environment Variables:
SBCONFIG_PORT: Override default portSBCONFIG_HOSTNAME: Set custom hostnameSBCONFIG_STATIC_DIR: Specify static file directoriesSBCONFIG_CONFIG_DIR: Custom configuration directorySBCONFIG_DO_NOT_TRACK: Disable usage tracking
# Example environment configuration
SBCONFIG_PORT=9001 SBCONFIG_HOSTNAME=0.0.0.0 start-storybook