@fwrlines/utils
v2.1.1
Published
fwrlines Utils
Downloads
12
Readme
template-now-storybook
Inspired by (https://github.com/zeit/now-examples/tree/master/storybook), made more featureful
Features
- Babel 7 integration
- Storybook 5.2.8 for React
- React Proptypes integration
- Storybook Docs Addon
- Eslint Config
- Stylelint Config (From Palantir)
- Compiles to both cjs and esm for integration into your apps
- Made to be deployed on zeit/now. In the continuous deployment style.
Compatibility
Module | Version React | 16.8 Babel | 7.7.7 Storybook | 5.2.8
This has not been tested on previous versions
Installation
- Clone / Fork the template
- Install the local packages :
npm i
- To compile : (done automatically if you install the package through npm) :
npm run compile
ornpm run compile:show
(displays the output file tree) - (optional) configure the linters to match your coding style :
.eslintrc.js
for js and.stylelintrc
for scss - (optional) Install a scss library (see below)
- (optional) Syncronize with zeit.now. NEw project / Select from github your fork of this template. It goes automatically online.
- Create your new components !
Install a SCSS Library
sass-loader
, node-sass
are already installed as devDependencies
- CLone the scss library to src/scss (for instance)
- Import the scss lib main file in
.storybook/config.js
for instanceimport 'scss/main.scss
if you installed it insrc/scss
- (Optional) If you want to add the scss library to the context of the components scss files (so that you can reuse the scss variables in the other components), add the path the to the sass-loader, as follows
const ADD_SCSS_LIB_TO_CONTEXT = '../src/scss'
...
{
test: /\.scss$/,
loaders: [
"style-loader",
"css-loader",
{ loader:'sass-loader', options: {
sassOptions: {
includePaths: [path.resolve(__dirname, ADD_SCSS_LIB_TO_CONTEXT)],
},
}},
],
include: path.resolve(__dirname, "../")
}
Create new components
To create new modules in the same coding style
- Create the module
cd ui/module_group
yo @fwrlines/react-component FancyButton
echo "export { FancyButton } from './FancyButton'" >> ./index.js #The local index.js file, at ui/module_group
- Create the story
cd src/stories
yo @fwrlines/storybook-story module_group|FancyButton
- The story automatically appears in the storybook
(bonus) To make things a bit faster ... in you .bashrc or .zshrc
alias comp="yo @fwrlines/react-component"
alias story="yo @fwrlines/storybook-story