Merge pull request #1 from dpc-sdp/feature/SDPA-604-setup-ripple-as-i…

…ndividual-project

[SDPA-604] setup ripple as individual project

.babelrc

@@ -29,6 +29,9 @@
         ],
         "stage-2",
         "vue"
+      ],
+      "plugins": [
+        "dynamic-import-node"
       ]
     }
   }

.storybook/config.js

@@ -2,10 +2,10 @@ import { configure } from '@storybook/vue'
 import { setOptions } from '@storybook/addon-options'
 
 // Apply our Ripple global styles on storybook
-import '../src/components/Atoms/Global/style.scss';
+import './../packages/Atoms/Global/style.scss';
 
 import Vue from 'vue'
-import RplGlobal from '../src/components/Atoms/Global'
+import RplGlobal from './../packages/Atoms/Global'
 
 // Install Ripple Global plugin
 Vue.use(RplGlobal)
@@ -15,9 +15,10 @@ setOptions({
 })
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../src', true, /.stories.js$/);
+const req = require.context('../packages', true, /.stories.js$/);
 function loadStories() {
   req.keys().forEach((filename) => req(filename));
+  require('../src/storybook-components/stories');
 }
 
 configure(loadStories, module)

.storybook/webpack.config.js

@@ -15,19 +15,22 @@ module.exports = {
       {
         test: /\.scss$/,
         loaders: ["style-loader", "css-loader", "sass-loader"],
-        include: resolve('src')
+        include: [
+          resolve('packages'),
+          resolve('src')
+        ]
       },
       {
         test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
         loader: 'url-loader',
         exclude: [
-          resolve('src/components/Atoms/Icon/')
+          resolve('packages/Atoms/Icon/')
         ],
       },
       {
         test: /\.svg$/,
         include: [
-          resolve('src/components/Atoms/Icon/')
+          resolve('packages/Atoms/Icon/')
         ],
         use: [
           'svg-sprite-loader',
@@ -38,7 +41,10 @@ module.exports = {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        include: [
+          resolve('packages'),
+          resolve('src'),
+          resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter'),
           emitWarning: true

README.md

@@ -7,7 +7,7 @@ Ripple is a Vue.js component pattern library for SDP.
 
 ## Intro
 
-This git repo is a monorepo which contains all Ripple component packages.  [View all Ripple componet packages](src/components/).
+This git repo is a monorepo which contains all Ripple component packages.  [View all Ripple componet packages](packages/).
 
 This git repo also contains a style guide site which uses [Storybook](https://storybook.js.org/) and can be used for local development environment.
 
@@ -51,6 +51,15 @@ npm start
 npm run lint
 ```
 
+### Test
+
+``` bash
+# We uses Jest for unit test and snapshots test
+npm test
+```
+
+Before commit changes, run test first. If new Ripple components changed, we should update snapshots by `npm test -- -u`. Then add it in commit.
+
 ## Export as a Static App
 
 We can export this Ripple storybook site as a stacic app.

docs/development-start-guide.md

@@ -12,11 +12,11 @@ Documents
 
 ### The `src` Directory
 
-This directory contains Ripple components packages `/src/components/` and storybook components `/src/storybook-components/`. It will be changed soon, please refer to `packages` directory.
+This directory contains custom components for storybook site use.
 
 ### The `packages` Directory
 
-In later we will take Ripple components packages out of `/src/components/` and put it in `/packages` directory.
+This directory contains Ripple components packages.
 
 ### The `static` Directory
 

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  moduleFileExtensions: [
+    "js",
+    "json",
+    "vue"
+  ],
+  transform: {
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
+    "^.+\\.md?$": "markdown-loader-jest"
+  },
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/(?!(@storybook/.*\\.vue$|storybook-addon-vue-info))"
+  ],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+  },
+  verbose: true,
+}