Merge pull request #240 from cofacts/feature/storybook

Feature/storybook

.dockerignore

@@ -9,4 +9,5 @@
 !package-lock.json
 !server.js
 !next.config.js
-!ecosystem.config.js
+!ecosystem.config.js
+!.storybook/*

.gitignore

@@ -3,5 +3,6 @@ node_modules
 *.log
 coverage
 .vscode
+public/storybook
 .env
-.DS_Store
+.DS_Store

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../components/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};

Dockerfile

@@ -15,6 +15,9 @@ COPY . .
 ARG LOCALE=en_US
 ARG APP_ID=DEV
 
+# Generate storybook files
+RUN npm run build-storybook -- -c .storybook/ -o public/storybook/
+
 # Generate .next, which includes absolute path to package so it must be done
 # within container.
 #
@@ -33,4 +36,5 @@ CMD ["node_modules/.bin/pm2-runtime", "ecosystem.config.js"]
 
 COPY package.json package-lock.json next.config.js ecosystem.config.js server.js ./
 COPY --from=builder /srv/www/.next ./.next
+COPY --from=builder /srv/www/public ./public
 COPY --from=builder /srv/www/node_modules ./node_modules

README.md

@@ -52,6 +52,19 @@ $ docker run --rm --env-file .env -p 3000:3000 rumors-site-test-tw
 
 On [docker hub](https://hub.docker.com/r/cofacts/rumors-site), `hooks/build` is automatically executed on `dev` and `master` branch.
 
+### Storybook
+We use storybook to demonstrate components.
+```bash
+# run storybook localserver on port 6006
+$ npm run storybook
+```
+we also use storyshot to do snapshot test with stories, make sure to run:
+```
+$ npm test -- -u 
+```
+before pushing to update stories snapshots.
+Storybook will be available under /storybook/index.html after build.
+
 ## Analytics
 
 This project supports Google Tag Manager. You can prepare the following setup in `.env` file:

Storyshots.test.js

@@ -0,0 +1,3 @@
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots();

__snapshots__/Storyshots.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Example story Hello World 1`] = `
+<div>
+  Hello world!
+</div>
+`;

components/Example.stories.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default { title: 'Example story' };
+
+export const HelloWorld = () => <div>Hello world!</div>;