@enmove/conf-storybook v1.0.0-alpha.3
@enmove/conf-storybook
A set of configuration files for storybook.
Project structure
This module infers that your project structure is following:
my-project
├── .storybook
│ ├── config.ts
│ └── webpack.config.js
├── static
│ └── ...
├── stories
│ ├── foo.stories.tsx
│ ├── bar.stories.tsx
│ └── ...
├── package.json
├── tsconfig.json
└── webpack.config.js
NOTE: The
webpack.config.js
under.storybook
directory is the one that is used by storybook and not used to build your application.
Usage
webpack.config.js
In order to use storybook with a webpack configuration that is compatible with the main webpack config, you may want to use @enmove/conf-storybook/webpack
module:
// In `.storybook/webpack.config.js`
module.exports = require("@enmove/conf-storybook/webpack");
It adds TypeScript and SASS support, which you need to preview your react component in storybook page.
config.ts
If you feel lazy, use @enmove/conf-storybook
to write your storybook config file (.storybook/config.ts
):
import configure from "@enmove/conf-storybook";
configure(
// Automatically imports all files ending in *.stories.tsx
require.context("../stories", true, /\.stories\.tsx$/),
module
);
You can write this config script interchangeably without any use of @enmove/conf-storybook
:
import { configure } from "@storybook/react";
const req = require.context("../stories", true, /\.stories\.tsx$/);
function loadStories() {
req.keys().forEach(req);
}
configure(loadStories, module);
require.context
With webpack, you can use require.context
method to create a context that contains multiple files matched with the given conditions.
require.context(directory[, useSubdirectories, regExp])
This is definitely useful when it comes to collect source files for stories.
NOTE: The first argument must be a literal string like
"./test"
, or../stories
, and not a dynamic string likeprocess.cwd()
, which confuse webpack to determine where the files imported live in.
See also webpack's documentation about this topic.
Serving static files
If you want to import your static assets from static
directory, add -s ./static
argument to your npm script that runs storybook:
{
"scripts": {
"storybook": "start-storybook -s ./static -p 9001"
}
}
See also: Serving Static Files
Additional info
This package is included in: