Skip to content

Commit

Permalink
Add Storybook and other updates
Browse files Browse the repository at this point in the history
Storybook:
* add webpack config
* add new webpack loaders
* add storybook viewer
* add presets
* update seng-generator templates
* update build tools

Add json-partials-loader, where you can include a json file from within
another. Useful for keeping the component json in its own folder, and
referencing it from the page data json.
  • Loading branch information
ThaNarie committed Nov 5, 2017
1 parent 4c35c73 commit a93e320
Show file tree
Hide file tree
Showing 79 changed files with 2,603 additions and 123 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ module.exports = {
{
js: 'never',
ts: 'never',
hbs: 'never',
},
],
// allow debugger during development
Expand Down
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,3 @@ node_modules/
### Project

/dist/
bundlesize-profile.*
16 changes: 12 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,9 @@ yarn build html # or yarn compile:html
* `src/app/bundle.js` Webpack entry that will include all js and css files referenced from all
template files.
* `src/app/polyfills.js` List of polyfills to include in the bundles.
* `src/app/component/layout/index/index.hbs` Template file to list all the pages, used during
development.
* `src/app/component/layout/index/index.hbs` Template file to list all the pages.
* `src/app/component/layout/app/app.hbs` Template file that is used for all pages, contains basic
page layout.
page layout (e.g. header, footer and wrapper).
* `src/app/component/` Contains all components, each folder is made up of:
* `component-name.hbs` The template file, can import a stylesheet using the html `link` tag, and a
script using the html `script` tag.
Expand All @@ -110,7 +109,7 @@ yarn build html # or yarn compile:html
DOM attribute.
* `src/app/component/blocks/` Contains all _block_ components. They are dynamically rendered based
on the blocks entry in the json data file.
* `src/app/util/components.ts` Helper function for registering, updating and initializing
* `src/app/muban/componentUtils.ts` Helper function for registering, updating and initializing
components.
* `src/app/style` Folder containing global styles. All components will include their own stylesheet.
* `src/app/style/main.scss` Main stylesheet file, only for setting up global styles.
Expand All @@ -121,3 +120,12 @@ yarn build html # or yarn compile:html
* `.modernizrrc` config file for Modernizrrc used by `modernizr-loader`, config rules can
be found [here](https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json).
* `template/*` Template files for seng-generator, for creating pages, blocks and components.

## Storybook

Storybook is a web-app that lets you preview and interact with the components in your project.
You can create presets that render your component with custom HTML, and pass different properties
by providing a json object.

Please read the
[extended documentation](docs/storybook.md) for more information.
13 changes: 13 additions & 0 deletions build-tools/config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,19 @@ module.exports = {
enableTSLintLoader: false,
enableStyleLintPlugin: false,
},
storybook: {
env: {
NODE_ENV: JSON.stringify('development'),
},
port: 9002,
publicPath: '/',
staticPath: path.join(projectRoot, 'src/storybook/static'),
buildPath: path.join(distPath, 'storybook'),
// enables specific linters during webpack compilation, which will error your compile
enableESLintLoader: false,
enableTSLintLoader: false,
enableStyleLintPlugin: false,
},
distPath,
buildPath: path.join(distPath, 'site'),
// enable for local HTTPS dev-server
Expand Down
9 changes: 9 additions & 0 deletions build-tools/config/storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { configure } from 'storybook/utils/utils';

const context = require.context('app/component/', true, /preset\.js$/);

function loadStories() {
context.keys().forEach(context);
}

configure(loadStories);
67 changes: 67 additions & 0 deletions build-tools/config/storybook/webpack.config.base.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* Webpack config used during development
*/
const path = require('path');
const merge = require('webpack-merge');
const config = require('../index');

const {
getBabelLoaderConfig,
getHbsInlineLoaderConfig,
getESLintLoader,
getTSLintLoader,
getStyleLintPlugin,
} = require('../webpack/webpack-helpers');

const projectRoot = path.resolve(__dirname, '../../../');
const port = process.env.PORT || config.storybook.port;

module.exports = merge(require('../webpack/webpack.config.base'), {
entry: {
storybook: [
'./src/app/polyfills.js',
'./src/storybook/storybook.js',
'./build-tools/config/storybook/config.js',
],
story: [
'./src/app/polyfills.js',
'./src/storybook/story.js',
'./build-tools/config/storybook/config.js',
],
},
output: {
path: config.storybook.buildPath,
publicPath: config.storybook.publicPath,
},
resolve: {
extensions: ['.hbs', '.ts', '.js', '.json'],
},
module: {
rules: [
{
test: /preset\.js$/,
include: [
/src[\/\\]app/,
],
use: [
{
loader :'preset-loader',
options: {},
},
getHbsInlineLoaderConfig(),
getBabelLoaderConfig(),
]
},
getESLintLoader(config.storybook.enableESLintLoader),
getTSLintLoader(config.storybook.enableTSLintLoader),
{
test: /\.js$/,
enforce: 'pre',
loader: 'source-map-loader'
},
]
},
plugins: [
getStyleLintPlugin(config.storybook.enableStyleLintPlugin),
].filter(_ => _),
});
78 changes: 78 additions & 0 deletions build-tools/config/storybook/webpack.config.dist.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* Webpack config used during development
*/
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');

const config = require('../index');

const {
getStyleRules,
getCodeRules,
getHandlebarsRules,
} = require('../webpack/webpack-helpers');

const projectRoot = path.resolve(__dirname, '../../../');
const port = process.env.PORT || config.storybook.port;

module.exports = merge(require('./webpack.config.base'), {
output: {
path: config.storybook.buildPath,
publicPath: config.storybook.publicPath,
},
module: {
rules: [
...getHandlebarsRules({ development: true }),
...getCodeRules(),
...getStyleRules({ development: false }),
]
},
plugins: [
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),

new webpack.DefinePlugin({
'process.env': config.dist.env,
}),

new CopyWebpackPlugin([
{
// copy files to public root (not versioned)
context: config.dist.staticPath,
from: '**/*',
to: config.storybook.buildPath,
},
{
// copy files to public root (not versioned)
context: config.storybook.staticPath,
from: '**/*',
to: config.storybook.buildPath,
},
]),

new ExtractTextPlugin({
filename: 'asset/[name].css',
allChunks : true,
}),

new ImageminPlugin({
disable: !config.dist.enableImageOptimization,
svgo: null,
gifsicle: null,
jpegtran: null,
optipng: !config.dist.enablePNGQuant ? { optimizationLevel: 3 } : null,
pngquant: config.dist.enablePNGQuant ? { quality: '65' } : null,
plugins: [
imageminMozjpeg({
quality: 85,
progressive: true
})
],
}),
].filter(_ => _),
});
72 changes: 72 additions & 0 deletions build-tools/config/storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* Webpack config used during development
*/
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const config = require('../index');

const {
getStyleRules,
getCodeRules,
getHandlebarsRules,
} = require('../webpack/webpack-helpers');

const projectRoot = path.resolve(__dirname, '../../../');
const port = process.env.PORT || config.storybook.port;

module.exports = merge(require('./webpack.config.base'), {
output: {
path: config.storybook.buildPath,
publicPath: config.storybook.publicPath,
},
plugins: [
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),

new webpack.DefinePlugin({
'process.env': config.dist.env,
}),
].filter(_ => _),
module: {
rules: [
...getHandlebarsRules({ development: true }),
...getCodeRules(),
...getStyleRules({ development: true }),
]
},
devServer: {
hotOnly: true,
publicPath: config.storybook.publicPath,
contentBase: config.storybook.staticPath,
compress: true,
host: '0.0.0.0',
port,
disableHostCheck: true,
overlay: true,
noInfo: true,
before(app) {
// render basic default index.html for all html files (path will be picked by JS)
app.use((req, res, next) => {
if (req.path.includes('storybook.html')) {
res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/storybook.html'), 'utf-8'));
} else if (req.path.includes('story.html')) {
res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/story.html'), 'utf-8'));
} else {
next();
}
});

// also render index.html on /
app.get('/', function(req, res) {
res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/storybook.html'), 'utf-8'));
});
},
https: (config.useHttps ? {
key: fs.readFileSync(path.resolve(projectRoot, 'build-tools/ssl/key.pem')),
cert: fs.readFileSync(path.resolve(projectRoot, 'build-tools/ssl/cert.pem')),
} : false),
},
devtool: 'eval-source-map'
});
Loading

0 comments on commit a93e320

Please sign in to comment.