basic code for react-multi-selection

.babelrc

@@ -0,0 +1,19 @@
+{
+    "presets": ["babel-preset-react", "babel-preset-env", "stage-2"],
+    "plugins": ["transform-object-rest-spread"],
+
+    "env": {
+         "test": {
+               "plugins": [
+                 [
+                   "babel-plugin-webpack-loaders",
+                   {
+                     "config": "./test.webpack.config.js",
+                     "verbose": false
+                   }
+                 ],
+                 "rewire"
+               ]
+         }
+    }
+}

.eslintrc

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    "prettier",
+    "react"
+  ],
+  "rules": {
+    "prettier/prettier": "error"
+  },
+  "extends": [
+    "prettier"
+  ],
+  "parser": "babel-eslint"
+}

.gitignore

@@ -0,0 +1,13 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+npm-debug.log
+node_modules
+dist
+out
+coverage
+test/report.xml
+junit.xml

.npmignore

@@ -0,0 +1,20 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+.babelrc
+.eslintrc
+.storybook
+mentionk.yml
+test.webpack.config.js
+npm-debug.log
+lib
+test
+buildscripts
+config
+semantic_release
+coverage
+stories
+src

README.md

@@ -0,0 +1,33 @@
+# Multi selection list
+
+Kenshoo multi selection list component.
+
+
+<!-- example -->
+```jsx
+import {MultiSelectionList} from 'kenshoo-shared';
+
+const Something = () => (
+    <div>
+        <MultiSelectionList items={[{id:1}, {id:2}, {id:3}]} />
+    </div>
+);
+```
+
+
+## Properties
+
+| Name                            | Type                  | Default                                          | Description                                                                                                                                       |
+|:-----                           |:-----                 |:-----                                            |:-----                                                                                                                                             |
+| `items`                         | `List`                | []                                               | list of items .                                                                                                                                   |
+| `selectedIds`                   | `Array`               | []                                               | selected list to start with (subgroup of items). 
+| `searchPlaceholder`             | `String`              | 'Search...'                                      | Search box place holder                                                                                                                           |
+| `emptyText`                     | `String`              | 'No items...'                                    | Text to display when list is empty                                                                                                                |
+| `sortFn`                        | `function`            | undefined                                        | list item auto sorting (on items changed)                                                                                                         |
+| `onOrderChanged`                | `function`            | ()=>{}                                           | callback for order changed event (by navigation buttons or drag-n-drop)                                                                           |
+| `withNavigation`                | `boolean`             | false                                            | toggle to show navigation buttons in list                                                                                                         |
+| `groups`                        | `List`                | []                                               | list of objects. Groups will appear as titles for items. Example of object: {id: 1, label: 'A', selectGroupLabel: 'Select All', itemIds:[1, 2]}]  |
+| `isItemLockedFn`                | `function`            | (item)=>false                                    | function to define whether item should be blocked for navigation                                                                                  |
+| `sumItemsInPageForLazyLoad`     | `number`              | 100                                              | actual for lazyLoad props - sum of list items for single page                                                                                     |
+| `msDelayOnChangeFilter`         | `number`              | null -(if lazyload true by default passed 600 ms)| onChange is delayed before performing a function as the number of ms this value contains                                                          |
+| `withSelectAll`                 | `boolean`             | false                                            | toggle to show select All option in list.

config/enzyme/enzyme_setup.js

@@ -0,0 +1,8 @@
+// TODO: Remove this `raf` polyfill once the below issue is sorted
+// https://github.com/facebookincubator/create-react-app/issues/3199#issuecomment-332842582
+import raf from './tempPolyfills'
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

config/enzyme/tempPolyfills.js

@@ -0,0 +1,5 @@
+const raf = global.requestAnimationFrame = (cb) => {
+		setTimeout(cb, 0)
+}
+
+export default raf

config/jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

config/jest/jest.config.json

@@ -0,0 +1,31 @@
+{
+	"verbose": true,
+	"setupFiles": [
+		"./config/enzyme/enzyme_setup"
+	],
+	"testResultsProcessor": "jest-junit",
+	"rootDir": "../../",
+	"moduleFileExtensions": [
+		"js",
+		"jsx"
+	],
+	"moduleDirectories": [
+		"node_modules",
+		"bower_components",
+		"shared"
+	],
+	"moduleNameMapper": {
+		"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+		"./config/jest/fileMock.js",
+		"\\.(css|scss)$": "identity-obj-proxy"
+	},
+	"collectCoverageFrom" : [
+    "**/src/**/*.{js,jsx}",
+		"!**/buildscripts/**",
+		"!**/config/**",
+		"!**/node_modules/**",
+		"!**/resources/**",
+		"!**/stories/**",
+		"!**/coverage/**"
+	]
+}

config/webpack/loaders.js

@@ -0,0 +1,43 @@
+const babelLoader = {
+  test: /(\.jsx|\.js)$/,
+  loader: "babel-loader",
+  exclude: /(node_modules(?!\/webpack-dev-server)|bower_components)/
+};
+
+const cssLoader = {
+  test: /(\.scss|\.css)/,
+  loaders: [
+    "style-loader",
+    "css-loader?modules&importLoaders=1&localIdentName=kn-[name]__[local]___[hash:base64:5]",
+    "sass-loader"
+  ]
+};
+
+const pngLoader = {
+  test: /\.png$/,
+  loader: "url-loader?limit=10000&mimetype=image/png"
+};
+
+const mdLoader = {
+  test: /\.md$/,
+  loader: "raw"
+};
+
+const jsonLoader = {
+  test: /\.json$/,
+  loader: "json"
+};
+
+const svgLoader = {
+  test: /\.svg$/,
+  loader: "svg-inline-loader?classPrefix"
+};
+
+module.exports = {
+  babelLoader,
+  cssLoader,
+  pngLoader,
+  mdLoader,
+  jsonLoader,
+  svgLoader
+};

config/webpack/plugins.js

@@ -0,0 +1,16 @@
+const path = require("path");
+const webpack = require("webpack");
+
+const definePlugin = env =>
+  new webpack.DefinePlugin({
+    "process.env": {
+      NODE_ENV: JSON.stringify(env)
+    }
+  });
+
+const ignorePlugin = new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/);
+
+module.exports = {
+  definePlugin,
+	ignorePlugin
+};

config/webpack/webpack.common.js

@@ -0,0 +1,24 @@
+const path = require("path");
+const { babelLoader, cssLoader, mdLoader, pngLoader, jsonLoader, svgLoader } = require("./loaders");
+const { ignorePlugin } = require("./plugins");
+
+module.exports = {
+  entry: {
+    index: "./src/index.js",
+    table: "./src/components/table/index.js",
+  },
+  plugins: [ignorePlugin],
+  externals: {
+    react: "react",
+    "react-dom": "react-dom"
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve(process.cwd(), "dist"),
+    library: "kenshoo-shared",
+    libraryTarget: "commonjs2"
+  },
+  module: {
+    rules: [babelLoader, cssLoader, mdLoader, pngLoader, jsonLoader, svgLoader]
+  }
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,9 @@
+const merge = require("webpack-merge");
+
+const common = require("./webpack.common.js");
+const { definePlugin } = require("./plugins");
+
+module.exports = merge(common, {
+  plugins: [definePlugin("dev")],
+  devtool: "inline-source-map",
+});

config/webpack/webpack.prod.js

@@ -0,0 +1,8 @@
+const merge = require("webpack-merge");
+
+const common = require("./webpack.common.js");
+const { definePlugin } = require("./plugins");
+
+module.exports = merge(common, {
+  plugins: [definePlugin("production")]
+});

package.json

@@ -0,0 +1,95 @@
+{
+  "name": "multi-selection",
+  "version": "0.0.0-development",
+  "description": "React List To List",
+  "repository": "https://github.com/kenshoo/react-shared.git",
+  "author": "Kenshoo",
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config config/webpack/webpack.dev.js",
+    "build:stats": "NODE_ENV=production webpack  --config config/webpack/webpack.prod.js -p --bail --json > stats.json",
+    "test": "cross-env BABEL_DISABLE_CACHE=1 jest --config config/jest/jest.config.json",
+    "test:watch": "cross-env BABEL_DISABLE_CACHE=1 jest --watchAll --config config/jest/jest.config.json",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "lint:dev": "eslint --ext js --ext jsx ./src --fix",
+    "lint:jenkins": "eslint --ext js --ext jsx ./src",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+  },
+  "devDependencies": {
+    "@kadira/react-storybook-addon-info": "^3.3.0",
+    "@storybook/addon-knobs": "3.2.12",
+    "@storybook/addon-options": "3.2.12",
+    "@storybook/addons": "3.2.12",
+    "@storybook/react": "3.2.12",
+    "babel-cli": "^6.6.4",
+    "babel-core": "^6.7.4",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-rewire": "^1.1.0",
+    "babel-plugin-transform-object-rest-spread": "~6.26.0",
+    "babel-plugin-webpack-loaders": "^0.9.0",
+    "babel-preset-env": "~1.6.0",
+    "babel-preset-react": "~6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "chai-enzyme": "^0.8.0",
+    "cheerio": "^1.0.0-rc.2",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "eslint": "^4.8.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-prettier": "^2.3.1",
+    "eslint-plugin-react": "^7.5.1",
+    "identity-obj-proxy": "^3.0.0",
+    "ignore-styles": "^5.0.1",
+    "isomorphic-fetch": "^2.2.1",
+    "jest": "^21.2.1",
+    "jest-cli": "^22.0.6",
+    "jest-junit": "^3.1.0",
+    "jest-sandbox": "^1.1.1",
+    "jsdom": "^11.3.0",
+    "json-loader": "^0.5.4",
+    "node-sass": "^4.5.0",
+    "nodemon": "^1.9.1",
+    "postcss-loader": "^2.0.6",
+    "prettier": "^1.8.2",
+    "raw-loader": "^0.5.1",
+    "react": "^16.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "react-addons-update": "^15.4.1",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
+    "sass-loader": "^6.0.6",
+    "semantic-release": "^8.2.0",
+    "storybook-readme": "3.0.6",
+    "style-loader": "^0.18.2",
+    "svg-inline-loader": "^0.8.0",
+    "webpack": "^3.6.0",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "^2.2.0",
+    "webpack-merge": "^4.1.1",
+    "webpack-strip": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0-0 || ^16.0.0",
+    "react-dom": "^15.0.0-0 || ^16.0.0"
+  },
+  "dependencies": {
+    "classnames": "2.2.5",
+    "material-ui": "^1.0.0-beta.25",
+    "prop-types": "^15.5.8"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "release": {
+    "debug": false,
+    "analyzeCommits": "./semantic_release/analyzeCommits",
+    "verifyConditions": {
+      "path": "./semantic_release/verifyConditions"
+    }
+  }
+}