@voplus/morpho-workspace 1.0.0-dev01

package/es/styles/ScrollBar.less

@@ -0,0 +1,30 @@
+.members-list {
+	overflow-x: auto;
+	// height: 50%;
+	// height: 600px;
+	scrollbar-color: transparent transparent;
+	-ms-overflow-style: none;
+}
+.members-list::-webkit-scrollbar {
+	width: 8px;
+}
+.members-list:hover {
+	scrollbar-color: auto;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	scrollbar-shadow-color: rgba(0, 0, 0, 0.5);
+}
+.members-list:hover::-webkit-scrollbar {
+	width: 8px;
+	background-color: #f5f5f5;
+}
+.members-list:hover::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
+	border-radius: 10px;
+	background-color: #f5f5f5;
+}
+.members-list:hover::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	padding-bottom: 4px;
+	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.5);
+}

package/es/styles/common.less

@@ -0,0 +1,187 @@
+@import "~@voplus/antd/es/style/themes/default.less";
+:global {
+	.module-header-title {
+		position: relative;
+		padding: 10px 0;
+		font-size: 15px;
+		line-height: 15px;
+		color: @primary-color;
+	}
+	.module-header-title:before {
+		position: absolute;
+		content: "";
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		border-bottom: 1px solid @primary-color;
+	}
+	.module-comment-view {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.ant-tabs {
+			display: flex;
+			flex-direction: column;
+			.ant-tabs-content {
+				height: 100%;
+				padding-bottom: 45px;
+			}
+		}
+	}
+	.module-detail-view,
+	.module-tab-view {
+		// display: flex;
+		// flex-direction: column;
+		// height: 100%;
+		.module-view-header {
+			padding: 15px 20px;
+			background: #fff;
+			color: #666;
+			line-height: 20px;
+		}
+		.ant-tabs {
+			display: flex;
+			flex-direction: column;
+			.ant-tabs-content {
+				height: 100%;
+				padding-bottom: 45px;
+			}
+			.ant-tabs-bar {
+				margin: 0 20px;
+			}
+		}
+		.module-box {
+			height: 100%;
+			padding: 10px 20px;
+			box-sizing: border-box;
+			overflow-x: hidden;
+		}
+	}
+	.module-tab-view {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		position: absolute;
+		width: 100%;
+		background: #f2f2f2;
+		.module-view-header {
+			margin-bottom: 10px;
+		}
+		.module-tab-view_main {
+			display: flex;
+			height: 100%;
+			.module-tab-view_left {
+				flex: 1;
+				margin-right: 10px;
+				overflow: auto;
+				background: #fff;
+			}
+			.module-tab-view_right {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				flex: 1;
+				background: #fff;
+			}
+		}
+	}
+}
+.tool-bar-icon {
+	display: inline-block;
+	width: 22px;
+	height: 22px;
+	line-height: 22px;
+	border: 1px solid @border-color-base;
+	border-radius: 50%;
+	color: #666;
+	text-align: center;
+	cursor: pointer;
+}
+.not-assigned,
+.not-assigned:hover {
+	background: #e6ad51;
+}
+.not-started,
+.not-started:hover {
+	background: #ff5c86;
+}
+.in-progress,
+.in-progress:hover {
+	background: #4bd8e0;
+}
+.done,
+.done:hover {
+	background: #a8a8a8;
+}
+.padding-vertical-10 {
+	padding: 10px 0;
+}
+.padding-top-5 {
+	padding-top: 5px;
+}
+.padding-top-10 {
+	padding-top: 10px;
+}
+.padding-left-10 {
+	padding-left: 10px;
+}
+.padding-left-20 {
+	padding-left: 20px;
+}
+.padding-right-10 {
+	padding-right: 10px;
+}
+.padding-bottom-5 {
+	padding-bottom: 5px;
+}
+.padding-bottom-15 {
+	padding-bottom: 15px;
+}
+.padding-bottom-20 {
+	padding-bottom: 20px;
+}
+.margin-left-5 {
+	margin-left: 5px;
+}
+.margin-right-5 {
+	margin-right: 5px;
+}
+.margin-left-10 {
+	margin-left: 10px;
+}
+.margin-left-20 {
+	margin-left: 20px;
+}
+.margin-left-30 {
+	margin-left: 30px;
+}
+.margin-right-10 {
+	margin-right: 10px;
+}
+.margin-right-15 {
+	margin-right: 15px;
+}
+.margin-right-20 {
+	margin-right: 20px;
+}
+.margin-top-5 {
+	margin-top: 5px;
+}
+.margin-top-10 {
+	margin-top: 10px;
+}
+.margin-bottom-5 {
+	margin-bottom: 5px;
+}
+.margin-bottom-10 {
+	margin-bottom: 10px;
+}
+.margin-bottom-15 {
+	margin-bottom: 15px;
+}
+.margin-bottom-20 {
+	margin-bottom: 20px;
+}
+.margin-bottom-25 {
+	margin-bottom: 25px;
+}

package/es/styles/index.less

@@ -0,0 +1,13 @@
+@import "~@voplus/antd/lib/style/themes/default.less";
+
+.themed {
+	:global {
+		.ant-btn-primary {
+			background-color: @success-color;
+		}
+	}
+}
+
+.app {
+	color: @primary-color;
+}

package/package.json

@@ -0,0 +1,132 @@
+{
+	"name": "@voplus/morpho-workspace",
+	"version": "1.0.0-dev01",
+	"description": "morpho workspace module",
+	"repository": {
+		"type": "git",
+		"url": "https://voplus.visualstudio.com/morpho-workspace/_git/morpho-workspace"
+	},
+	"main": "es/index.js",
+	"module": "es/index.js",
+	"types": "es/index.d.ts",
+	"files": [
+		"es"
+	],
+	"author": "VOPLUS",
+	"license": "SEE LICENSE IN LICENSE",
+	"scripts": {
+		"copy-less": "cpx src/**/*.less lib && cpx src/**/*.less es",
+		"clean": "del-cli es && jest --clearCache",
+		"storybook": "start-storybook -p 9001 -c .storybook -s ./public,./node_modules",
+		"lint": "tslint -c tslint.json 'src/**/*.ts'",
+		"build": "npm run clean && tsc -p tsconfig.prod.json && npm run copy-less",
+		"test": "jest"
+	},
+	"devDependencies": {
+		"@antv/data-set": "^0.10.2",
+		"@babel/core": "^7.6.2",
+		"@babel/plugin-proposal-class-properties": "^7.5.5",
+		"@babel/plugin-proposal-decorators": "^7.6.0",
+		"@babel/preset-env": "^7.6.2",
+		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.6.0",
+		"@fortawesome/fontawesome-svg-core": "^1.2.25",
+		"@fortawesome/free-solid-svg-icons": "^5.11.2",
+		"@fortawesome/pro-light-svg-icons": "^5.11.2",
+		"@fortawesome/react-fontawesome": "^0.1.4",
+		"@storybook/addon-knobs": "^5.2.1",
+		"@storybook/react": "^5.2.1",
+		"@types/classnames": "^2.2.9",
+		"@types/emoji-mart": "^2.11.0",
+		"@types/enzyme": "^3.10.3",
+		"@types/enzyme-adapter-react-16": "^1.0.3",
+		"@types/invariant": "^2.2.30",
+		"@types/jest": "^24.0.18",
+		"@types/lodash-es": "^4.17.3",
+		"@types/node": "^12.7.5",
+		"@types/react": "^16.9.2",
+		"@types/react-addons-css-transition-group": "^15.0.5",
+		"@types/react-dom": "^16.9.0",
+		"@types/react-highlight-words": "^0.16.0",
+		"@types/react-router": "^5.0.5",
+		"@types/react-router-dom": "^4.3.5",
+		"@types/storybook__react": "^4.0.2",
+		"@voplus/antd": "^3.20.3-vo1.0.6",
+		"@voplus/morpho-client-test": "^1.0.0-dev009",
+		"@voplus/morpho-collaboration": "^1.0.0-dev012",
+		"@voplus/morpho-data": "^1.0.0-dev058",
+		"@voplus/morpho-document": "^1.0.0-dev037",
+		"@voplus/morpho-org": "^1.0.0-dev018",
+		"@voplus/morpho-ui": "^1.0.0-dev055",
+		"babel-jest": "^24.9.0",
+		"babel-loader": "^8.0.6",
+		"babel-plugin-import": "^1.12.2",
+		"bizcharts": "^3.5.5",
+		"clean-webpack-plugin": "^3.0.0",
+		"core-js": "^3.2.1",
+		"cpx": "^1.5.0",
+		"css-loader": "^2.1.1",
+		"del-cli": "^2.0.0",
+		"emoji-mart": "^2.9.2",
+		"enzyme": "^3.10.0",
+		"enzyme-adapter-react-16": "^1.14.0",
+		"enzyme-to-json": "^3.4.0",
+		"fetch-mock": "^7.3.7",
+		"file-saver": "^2.0.2",
+		"history": "^4.10.1",
+		"html-webpack-plugin": "^3.2.0",
+		"identity-obj-proxy": "^3.0.0",
+		"jest": "^24.9.0",
+		"jest-environment-jsdom": "^24.9.0",
+		"jest-environment-jsdom-global": "^1.1.0",
+		"jest-localstorage-mock": "^2.3.0",
+		"jsdom": "^15.1.1",
+		"jsdom-global": "3.0.2",
+		"less": "^3.10.3",
+		"less-loader": "^5.0.0",
+		"lodash-es": "^4.17.11",
+		"mini-css-extract-plugin": "^0.7.0",
+		"mobx": "^5.13.0",
+		"mobx-react-lite": "^1.4.1",
+		"mobx-utils": "^5.4.1",
+		"mockjs": "^1.0.1-beta3",
+		"moment": "^2.24.0",
+		"progress-bar-webpack-plugin": "^1.11.0",
+		"react": "^16.9.0",
+		"react-addons-css-transition-group": "^15.6.2",
+		"react-dom": "^16.9.0",
+		"react-highlight-words": "^0.16.0",
+		"react-router": "^5.0.1",
+		"react-router-dom": "^5.0.1",
+		"string": "^3.3.3",
+		"strongly-typed-events": "^1.6.3",
+		"style-loader": "^0.23.1",
+		"ts-import-plugin": "^1.6.1",
+		"ts-loader": "^6.1.2",
+		"tslint": "^5.20.0",
+		"tslint-config-prettier": "^1.18.0",
+		"tslint-react": "^4.1.0",
+		"tslint-react-hooks": "^2.2.1",
+		"typemoq": "^2.1.0",
+		"typescript": "^3.6.3",
+		"webpack": "^4.40.2",
+		"webpack-cli": "^3.3.9",
+		"webpack-dev-server": "^3.8.1",
+		"webpack-merge": "^4.2.2",
+		"webpack-node-externals": "^1.7.2"
+	},
+	"peerDependencies": {
+		"react": ">=16.0.0",
+		"tslib": ">=1.9.3",
+		"lodash-es": "*"
+	},
+	"dependencies": {
+		"@types/fetch-mock": "^7.3.1",
+		"@types/mockjs": "^1.0.2",
+		"@types/react-infinite-scroller": "^1.2.1",
+		"immutability-helper": "^3.0.1",
+		"react-dnd": "^9.3.4",
+		"react-dnd-html5-backend": "^9.3.4",
+		"react-infinite-scroller": "^1.2.4"
+	}
+}

package/readme.md

@@ -0,0 +1,146 @@
+# Typescript support
+Install dependencies
+```
+npm i typescript ts-loader -D
+```
+webpack configuration in webpack.config.js
+```
+// ts loader for typescript
+{
+    test: /\.tsx?$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+},
+resolve: {
+    extensions: [
+        //required for ts imports
+        ".tsx", ".ts", 
+        //required for js imports (mostly in webpack dev self dependency)
+        '.js']
+}
+```
+# Less support
+Install dependencies
+```
+npm i less less-loader css-loader style-loader -D
+```
+Create tsexternals.d.ts with following content
+```
+declare module '*.less'
+```
+tsconfig configurations
+```
+"includes" : ["./tsexternals.d.ts"],
+```
+webpack configurations.
+```
+// less support for project
+// chain less -> css loader (module support) -> style loader (inject styles tag into DOM)
+{
+    test: /\.less$/,
+    include: [path.join(__dirname, "/src")],
+    use: [
+        {loader: "style-loader"},
+        {
+        loader: "css-loader",
+        options: {
+            sourceMap: true,
+            modules: true,
+            localIdentName: "[local]___[hash:base64:5]"
+        }
+        },
+        {loader: "less-loader"}
+    ]
+},
+```
+
+# Antd support
+Install dependencies
+```
+npm i @voplus/antd ts-import-plugin -D
+```
+webpack configurations
+```
+// Add following to beginning of webpack.config.js
+const tsImportPlugin = require('ts-import-plugin');
+
+// Add following options to ts-loader rules
+options: 
+{
+    getCustomTransformers: () => ({
+    before: [ tsImportPlugin({
+        libraryDirectory: 'es',
+        libraryName: '@voplus/antd',
+        style: true}) 
+    ]})
+}
+
+// As antd does not support css module (https://segmentfault.com/q/1010000011170368)
+// Add following additional less loader 
+// less support for antd
+// javascriptEnabled are required for antd
+{
+    test: /\.less$/,
+    include: [path.join(__dirname, "/node_modules/@voplus/antd")],
+    use: [
+        {loader: "style-loader"},
+        {loader: "css-loader"},
+        {loader: "less-loader", options:  { javascriptEnabled: true}}
+    ]
+}   
+```
+
+Override antd style reference
+https://stackoverflow.com/questions/44817981/how-to-override-antd-style-with-dva
+
+## Theme
+### Override less variables
+modify '/src/style/theme.js'
+
+### Override antd styles in components with modular less
+modular css/less will generate a unique class name and make it difficult to override antd class styles.
+We can use :global to overcome this. Code below demonstrated how to do this.
+
+```
+// Less
+.componentClass {
+    :global {
+        //override ant styles under componentClass
+        .ant-btn-primary {
+            background-color: @success-color;
+        }    
+    }
+}
+```
+```
+// TS
+<component className={styles.componentClass}>
+    <Button type="primary">Button display with success color instead of primary color.</Button>
+</component>
+```
+
+# Test Setup
+https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f
+
+"skipBabel" must set to true if allowSyntheticDefaultImports is true in tsconfig.json. Otherwise debugging with VSCode will have source map issues.
+5 Dec 2018 : The above seems no longer needed after updated ts-jest.
+
+# Library Build
+Modify package.json
+```
+"main": "lib/index.js",
+"build" : "webpack --config webpack.prod.js && tsc --outDir lib"
+```
+
+Modify tsconfig.json
+1. Remove "allowJs"
+2. Add "declaration" : true
+
+# Knowledges
+## test
+[28 Jul 2018] 
+* jest skipBabel need set to true otherwise will have strange sourcemap issues.
+* tsconfig need following configuration otherwise awync await may not work
+    "target": "es6",
+    "allowSyntheticDefaultImports":false,
+    "esModuleInterop":false