Skip to content

Instantly share code, notes, and snippets.

@jeffryang24

jeffryang24/addons.ts

Last active April 14, 2020 18:13
Show Gist options
  • Save jeffryang24/2147d8dbed6189ba6cc9a022ec79ac11 to your computer and use it in GitHub Desktop.
Save jeffryang24/2147d8dbed6189ba6cc9a022ec79ac11 to your computer and use it in GitHub Desktop.
Download ZIP
StoryBook CSF No Code Available Reproduce
Raw
addons.ts
// Storybook v5.2.7
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-storysource/register';
import '@storybook/addon-docs/register';
import '@storybook/addon-a11y/register';
Raw
button.stories.tsx
import React, { FunctionComponent } from 'react';
import { text } from '@storybook/addon-knobs';
import { Button } from './button';
export default { title: 'Genesis|Button', component: Button };
export const withText: FunctionComponent = () => <Button>Hello Button</Button>;
export const withEmoji: FunctionComponent = () => (
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
);
export const withKnobs: FunctionComponent = () => (
<Button>{text('children', 'Test Children')}</Button>
);
Raw
button.tsx
import React, { ReactNode, FunctionComponentElement } from 'react';
export type Props = {
/**
* Children
*/
children?: ReactNode;
};
export function Button({ children }: Props): FunctionComponentElement<Props> {
return <button type="button">{children}</button>;
}
export default Button;
Raw
config.ts
// Core(s)
import { configure, addDecorator, addParameters } from '@storybook/react';
// Addon(s)
import { withA11y } from '@storybook/addon-a11y';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
// Custom(s)
import theme from './theme';
// Decorator(s)
addDecorator(withA11y);
addDecorator(withKnobs);
// Parameter(s)
addParameters({
docs: {
container: DocsContainer,
page: DocsPage
},
options: {
theme
}
});
// Autoloader
function loaderFn(): __WebpackModuleApi.RequireContext[] {
// Place your first order story here.
const allExports: Set<__WebpackModuleApi.RequireContext> = new Set([
require('../src/introduction.stories.mdx')
]);
const requireContext = require.context(
'../src',
true,
/\.stories\.(tsx?|mdx)$/
);
requireContext
.keys()
.forEach(fileName => allExports.add(requireContext(fileName)));
return [...allExports];
}
// Summary
configure(loaderFn, module);
Raw
webpack-debug
Manager webpack config
{
name: 'manager',
mode: 'development',
bail: false,
devtool: 'none',
entry: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/common/polyfills.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/.storybook/addons.ts',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/client/manager/index.js'
],
output: {
path: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/public',
filename: '[name].[chunkhash].bundle.js',
publicPath: ''
},
cache: {},
plugins: [
DllReferencePlugin {
options: {
context: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/node_modules',
manifest: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dll/storybook_ui-manifest.json'
}
},
HtmlWebpackPlugin {
options: {
template: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/templates/index.ejs',
templateContent: false,
templateParameters: [Function: templateParameters],
filename: 'index.html',
hash: false,
inject: false,
compile: true,
favicon: false,
minify: 'auto',
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'none',
meta: {},
base: false,
title: 'Webpack App',
xhtml: false,
alwaysWriteToDisk: true
},
childCompilerHash: undefined,
childCompilationOutputName: undefined,
assetJson: undefined,
hash: undefined,
version: 4
},
CaseSensitivePathsPlugin {
options: {},
pathCache: {},
fsOperations: 0,
primed: false
},
DefinePlugin { definitions: {} },
DefinePlugin {
definitions: {
'process.env': {
NODE_ENV: '"development"',
NODE_PATH: '""',
PUBLIC_URL: '""'
},
NODE_ENV: '"development"'
}
},
ContextReplacementPlugin {
resourceRegExp: /graphql-language-service-interface[/\\]dist/,
newContentResource: undefined,
newContentRecursive: undefined,
newContentRegExp: /\.js$/
},
NormalModuleReplacementPlugin {
resourceRegExp: /core-js/,
newResource: [Function]
}
],
module: {
rules: [
{
test: /\.(mjs|jsx?)$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook',
presets: [
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-env/lib/index.js',
{
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3'
}
],
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-react/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-flow/lib/index.js'
],
plugins: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
{ sourceMap: true, autoLabel: true }
],
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-macros/dist/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-add-react-displayname/index.js',
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-react-docgen/lib/index.js',
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
}
]
]
}
}
],
include: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
],
exclude: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
]
},
{
test: /\.css$/,
use: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/style-loader/index.js',
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/css-loader/dist/cjs.js',
options: { importLoaders: 1 }
}
]
},
{
test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/file-loader/dist/cjs.js',
query: { name: 'static/media/[name].[hash:8].[ext]' }
},
{
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/url-loader/dist/cjs.js',
query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
}
]
},
resolve: {
extensions: [ '.mjs', '.js', '.jsx', '.json' ],
modules: [ 'node_modules' ],
alias: {
'@emotion/core': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@emotion/core',
'@emotion/styled': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@emotion/styled',
'emotion-theming': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/emotion-theming',
'@storybook/addons': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/addons',
'@storybook/api': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/api',
'@storybook/channels': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/channels',
'@storybook/components': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/components',
'@storybook/core-events': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core-events',
'@storybook/router': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/router',
'@storybook/theming': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/theming',
'@storybook/ui': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/ui',
'prop-types': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/prop-types',
react: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react',
'react-dom': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-dom'
}
},
recordsPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook/records.json',
performance: { hints: false },
optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: true }
}
Preview webpack config
{
mode: 'development',
bail: false,
devtool: '#cheap-module-source-map',
entry: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/common/polyfills.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/preview/globals.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/.storybook/config.ts',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true'
],
output: {
path: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/public',
filename: '[name].[hash].bundle.js',
publicPath: ''
},
plugins: [
HtmlWebpackPlugin {
options: {
template: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/templates/index.ejs',
templateContent: false,
templateParameters: [Function: templateParameters],
filename: 'iframe.html',
hash: false,
inject: false,
compile: true,
favicon: false,
minify: 'auto',
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'none',
meta: {},
base: false,
title: 'Webpack App',
xhtml: false,
alwaysWriteToDisk: true
},
childCompilerHash: undefined,
childCompilationOutputName: undefined,
assetJson: undefined,
hash: undefined,
version: 4
},
DefinePlugin {
definitions: {
'process.env': {
NODE_ENV: '"development"',
NODE_PATH: '""',
PUBLIC_URL: '"."'
},
NODE_ENV: '"development"'
}
},
WatchMissingNodeModulesPlugin {
nodeModulesPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
},
HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000
},
CaseSensitivePathsPlugin {
options: {},
pathCache: {},
fsOperations: 0,
primed: false
},
ProgressPlugin {
profile: false,
handler: undefined,
modulesCount: 500,
showEntries: false,
showModules: true,
showActiveModules: true
},
DefinePlugin { definitions: {} },
NormalModuleReplacementPlugin {
resourceRegExp: /core-js/,
newResource: [Function]
}
],
module: {
rules: [
{
test: /\.(mjs|jsx?)$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook',
presets: [
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-env/lib/index.js',
{
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3'
}
],
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-react/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-flow/lib/index.js'
],
plugins: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
{ sourceMap: true, autoLabel: true }
],
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-macros/dist/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-add-react-displayname/index.js',
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-react-docgen/lib/index.js',
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
}
]
]
}
}
],
include: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
],
exclude: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
]
},
{
test: /\.md$/,
use: [
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/raw-loader/dist/cjs.js'
}
]
},
{
test: /\.css$/,
sideEffects: true,
use: [
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/style-loader/index.js',
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/css-loader/dist/cjs.js',
options: { importLoaders: 1 }
},
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/postcss-loader/src/index.js',
options: {
ident: 'postcss',
postcss: {},
plugins: [Function: plugins]
}
}
]
},
{
test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/file-loader/dist/cjs.js',
query: { name: 'static/media/[name].[hash:8].[ext]' }
},
{
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/url-loader/dist/cjs.js',
query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
},
{
test: /\.stories\.mdx$/,
use: [
{
loader: 'babel-loader',
options: { plugins: [ '@babel/plugin-transform-react-jsx' ] }
},
{
loader: '@mdx-js/loader',
options: { compilers: [ [Function: compiler] ] }
}
]
},
{
test: /\.stories\.tsx?$/,
use: [
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/source-loader/dist/server/index.js',
options: {
parser: 'typescript',
prettierConfig: {
arrowParens: 'avoid',
printWidth: 80,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'none',
singleQuote: true,
semi: true,
jsxBracketSameLine: false
}
}
}
],
enforce: 'pre'
},
{
test: /\.tsx?$/,
use: [
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-loader/lib/index.js',
options: {
presets: [
[
'/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-preset-react-app/index.js',
{ flow: false, typescript: true }
]
]
}
},
{
loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-docgen-typescript-loader/dist/index.js',
options: {
tsconfigPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/tsconfig.json'
}
}
]
},
{
test: /\.s[ac]ss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ],
include: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
}
]
},
resolve: {
extensions: [ '.mjs', '.js', '.jsx', '.json', '.ts', '.tsx' ],
modules: [ 'node_modules' ],
alias: {
'babel-runtime/core-js/object/assign': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/core-js/es/object/assign.js',
react: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react',
'react-dom': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-dom'
}
},
optimization: {
splitChunks: { chunks: 'all' },
runtimeChunk: true,
minimizer: [
TerserPlugin {
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: [Function: chunkFilter],
warningsFilter: [Function: warningsFilter],
extractComments: false,
sourceMap: true,
cache: true,
cacheKeys: [Function: cacheKeys],
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
terserOptions: {
output: { comments: /^\**!|@preserve|@license|@cc_on/i },
mangle: false,
keep_fnames: true
}
}
}
]
},
performance: { hints: false }
}
Raw
webpack.config.js
// Core(s)
const path = require('path');
const createMDXCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
// Summary
module.exports = async ({ config }) => {
config.module.rules.push(
{
test: /\.stories\.mdx$/,
use: [
{
loader: 'babel-loader',
// May or may not need this line depending on your app's setup
options: {
plugins: ['@babel/plugin-transform-react-jsx']
}
},
{
loader: '@mdx-js/loader',
options: {
compilers: [createMDXCompiler({})]
}
}
]
},
{
test: /\.stories\.tsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
parser: 'typescript',
prettierConfig: {
arrowParens: 'avoid',
printWidth: 80,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'none',
singleQuote: true,
semi: true,
jsxBracketSameLine: false
}
}
}
],
enforce: 'pre',
include: path.resolve(__dirname, '../src')
},
{
test: /\.tsx?$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
[
require.resolve('babel-preset-react-app'),
{ flow: false, typescript: true }
]
]
}
},
require.resolve('react-docgen-typescript-loader')
]
},
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
}
);
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
@dgreene1
Copy link

dgreene1 commented Apr 14, 2020

Hi. Did you ever get this working? If so, would you be willing to update this gist?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment