Merge pull request #4 from Stackup-Rwanda/ch-setup-story-book-171380692

#171380692 Setup storybook

Author: kipropbrian

.gitignore

@@ -17,6 +17,7 @@ build
 #caches
 package-lock.json
 yarn.lock
+yarn-error.log
 
 #test coverage
 coverage

.storybook/main.js

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

README.md

@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/Stackup-Rwanda/stackup2-barefoot-frontend.svg?branch=develop)](https://travis-ci.org/Stackup-Rwanda/stackup2-barefoot-frontend)
 
 ## To run it locally
-### A.Pre-requisites : 
+### A. Pre-requisites: 
 * To be able to test this project locally, you need to have the following tools on your local machine:
 > * You need to have [NodeJS version between `6` higher](https://nodejs.org/en/) and [npm version `6` or higher](https://www.npmjs.com/) or [yarn v1.15.0 or higher](https://yarnpkg.com/getting-started/install)
 > * Your local machine needs to be able to run terminal, Powershell, or bash commands
@@ -28,3 +28,5 @@
 1. [node-sass](https://www.npmjs.com/package/node-sass)
 2. [sass](https://www.npmjs.com/package/sass)
 3. [sass-loader](https://www.npmjs.com/package/sass-loader)
+4. [Storybook](https://storybook.js.org/docs/guides/guide-react/)
+5. [Enzyme](https://enzymejs.github.io/enzyme/)

package.json

@@ -1,13 +1,15 @@
 {
   "name": "stackup2-barefoot-frontend",
   "version": "1.0.0",
-  "description": "This is the frontend of the barefoot-nomad app",
+  "description": "This is the frontend of the Barefoot Nomad application",
   "main": "src/entry/index.js",
   "scripts": {
     "build": "webpack -p --env production",
     "dev": "webpack-dev-server --env development --watch --open",
     "start": "npm run build && node ./src/entry/server.js",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -27,9 +29,11 @@
   "homepage": "https://github.com/Stackup-Rwanda/stackup2-barefoot-frontend#readme",
   "dependencies": {
     "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
-    "babel-eslint": "^10.1.0",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -43,7 +47,6 @@
     "html-webpack-plugin": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
-    "jest-enzyme": "^7.1.2",
     "jest-html-reporters": "^1.2.1",
     "jest-transform-stub": "^2.0.0",
     "mini-css-extract-plugin": "^0.9.0",

stories/0-Welcome.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

stories/1-Button.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.story = {
+  name: 'with emoji',
+};

stories/2-HelloComponent.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import HelloComponent from '../src/components/HelloComponent';
+
+export default {
+  title: 'Hello Component',
+  components: [HelloComponent],
+};
+
+export const HelloStory = () => (<HelloComponent />);