Skip to content

Instantly share code, notes, and snippets.

@ylastapis
Created November 16, 2018 13:36
Show Gist options
  • Save ylastapis/5170faf6e2e31fa23206485e69419f8c to your computer and use it in GitHub Desktop.
Save ylastapis/5170faf6e2e31fa23206485e69419f8c to your computer and use it in GitHub Desktop.
CRA 2.1 + Storybook + typescript + jest
// ./.storybook/addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import 'storybook-addon-intl/register';
// ./.storybook/config.js
import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
import { withKnobs } from '@storybook/addon-knobs';
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import frLocaleData from 'react-intl/locale-data/fr';
import { getFlattenedMessages } from "../src/utils/locale";
import 'typeface-roboto';
import 'typeface-montserrat';
import 'typeface-noto-sans';
import '../src/index.css';
addLocaleData(enLocaleData);
addLocaleData(frLocaleData);
// Set intl configuration
setIntlConfig({
locales: ['en', 'fr'],
defaultLocale: 'en',
getMessages: (locale) => getFlattenedMessages(locale)
});
// Register decorator
addDecorator(withIntl);
addDecorator(withKnobs);
const req = require.context('../src/components', true, /\.stories\.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
{
"extends": "./tsconfig.json",
"compilerOptions": {
"jsx": "react",
"isolatedModules": false
}
}
{
"name": "whatever",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-redux": "^5.0.7",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom --modulePaths=src",
"eject": "react-scripts eject",
"storybook": "NODE_PATH=src start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"dev": "yarn install && yarn start"
},
"devDependencies": {
"@babel/core": "^7.1.5",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^4.0.4",
"@storybook/addon-info": "^4.0.4",
"@storybook/addon-knobs": "^4.0.6",
"@storybook/addon-links": "^4.0.4",
"@storybook/addons": "^4.0.4",
"@storybook/react": "^4.0.4",
"@types/jest": "^23.3.9",
"@types/lodash": "^4.14.116",
"@types/node": "^10.11.3",
"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.8",
"@types/react-redux": "^6.0.9",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"redux-mock-store": "^1.5.3",
"tslint-config-prettier": "^1.15.0",
"tslint-react": "^3.6.0",
"typescript": "^2.9.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
import React from 'react';
import { storiesOf } from '@storybook/react';
import { AnyComponent } from './AnyComponent';
import { boolean, select } from '@storybook/addon-knobs';
storiesOf('AnyComponent', module)
.add('AnyComponent Default', () => {
const selected = boolean('Selected', false);
return (
<AnyComponent
from={1539820800000} // Thursday 18 October 2018 00:00:00
to={1539824400000} // Thursday 18 October 2018 01:00:00
selected={selected}
/>
);
}
)
;
{
"compilerOptions": {
"outDir": "build",
"module": "esnext",
"target": "es5",
"lib": [
"es5",
"es6",
"es7",
"es2017",
"dom"
],
"sourceMap": true,
"allowJs": false,
"jsx": "preserve",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"resolveJsonModule": true,
"noEmit": true,
"esModuleInterop": true,
"strict": false,
"isolatedModules": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"build",
"scripts"
]
}
// ./.storybook/webpack.config.js
const path = require("path");
// https://storybook.js.org/configurations/custom-webpack-config/
module.exports = (baseConfig, env, defaultConfig) => {
// Add typescript loader
defaultConfig.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: 'awesome-typescript-loader',
options: {
// path to custom tsconfig file, overrided by CRA 2.1 otherwise
configFileName: path.resolve(__dirname, '../tsconfig.storybook.json')
}
}
]
});
defaultConfig.resolve.extensions.push(".ts", ".tsx");
// @fix: Error: Can't resolve 'net' in '/Users/yann/www/eco6-airline-airport/frontend/node_modules/stompjs/lib'
defaultConfig = Object.assign({ node: { net: 'empty' } }, defaultConfig);
return defaultConfig;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment