Skip to content

Instantly share code, notes, and snippets.

View ndelangen's full-sized avatar
🇳🇱
yes?

Norbert de Langen ndelangen

🇳🇱
yes?
  • Chroma Software
  • Netherlands
View GitHub Profile
@ndelangen
ndelangen / doc.md
Last active December 22, 2017 06:55
Markdown extension for placing React components

Add storybook dependencies

First of all, you need to add a few storybook packages to your project's package.json. To do that, simply run:

:::CodeSwitcher

npm i --save-dev @storybook/react @storybook/addons react react-dom
@ndelangen
ndelangen / storybook.config.js
Created July 29, 2019 09:57
Configuring storybook's entries & addons
export const entries = ['**/*.stories.[t|j]s'];
export const addons = ['docs', 'knobs'];
@ndelangen
ndelangen / storybook.config.js
Created July 29, 2019 11:50
Configuration with webpack & babel
export const entries = ['**/*.stories.[t|j]s'];
export const babel = async (base, config) => ({
rootMode: 'upward',
sourceType: 'unambiguous',
});
export const webpack = async (base, config) => {
const { default: webpackMerge } = await import('webpack-merge');
export const babel = async (base, config) => ({
rootMode: 'upward',
sourceType: 'unambiguous',
});
export const entries = ['**/*.stories.[t|j]s'];
export const presets = ['babel/auto', 'sass'];
@ndelangen
ndelangen / your-storybook-preset.js
Created July 29, 2019 12:31
Using other config properties
export const webpack = async (base, config) => {
const { default: webpackMerge } = await import('webpack-merge');
const { default: globToRegex } = await import('glob-to-regexp');
// here we request the resulting entries property
// and transform the array of globs to an array of regular expressions
const entries = (await config.entries).map(globToRegex);
return webpackMerge(base, {
module: {