Add storybook

.storybook/config.js

@@ -0,0 +1,11 @@
+import { configure, addDecorator } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+addDecorator(withInfo);
+
+function loadStories() {
+  require('../stories/index.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-scripts": "2.1.1"
@@ -11,7 +12,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -21,5 +23,11 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@storybook/addon-info": "^4.0.10",
+    "@storybook/react": "^4.0.10",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.4"
+  }
 }

stories/WeeklySongListItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import WeeklySongListItem from '../src/components/WeeklySongListItem';
+
+storiesOf('WeeklySongListItem', module)
+  .add(
+    'default',
+    () => (
+      <WeeklySongListItem
+        order="01"
+        title="Em Không Thể"
+        singer="Tiên Tiên, Touliver"
+        viewCount={3000}
+      />
+    )
+  );

stories/index.js

@@ -0,0 +1 @@
+import './WeeklySongListItem';