updated to babel7, use webpack extract plugin to create separate styl…

…e.css file (#129) BREAKING CHANGE: styles moved to a separate style.css file * updated to babel7, use webpack extract plugin to create separate styles.css file * fixed broken tests * removed package-lock.json, updated yarn.lock * updated README
kenshoo · Feb 1, 2019 · 3f00ad7 · 3f00ad7
1 parent 2bd9c91
commit 3f00ad7
Show file tree

Hide file tree

Showing 12 changed files with 3,562 additions and 4,678 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,10 @@
 {
-    "presets": ["babel-preset-react", "babel-preset-env", "stage-2"],
-    "plugins": ["transform-object-rest-spread"]
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread"
+    ]
 }
diff --git a/README.md b/README.md
@@ -13,23 +13,31 @@ Multi select is a straight forward component that helps a user select multiple i
 </p>
 
 ## Installation
- 
+
  **Installation using npm:**
- 
+
 ```
  npm install @kenshooui/react-multi-select --save
 ```
 
  **Installation using Yarn:**
- 
+
 ```
  yarn add @kenshooui/react-multi-select
 ```
-
-
-
- ## How to use 
-
+
+ ## Import styles
+
+Include the component's css on your app
+
+ ```jsx
+import "@kenshooui/react-multi-select/dist/style.css"
+ ```
+
+ ## How to use
+
+
+
 ```jsx
 import React, { Component } from "react";
 import MultiSelect from "@kenshooui/react-multi-select";
@@ -68,8 +76,8 @@ class Example extends Component {
 
 ## Properties
 
-| Name                            | Type                  | Default                                          | Description                                                                                                                                       
-|:-----                           |:-----                 |:-----                                            |:-----                                                                                                                                             
+| Name                            | Type                  | Default                                          | Description
+|:-----                           |:-----                 |:-----                                            |:-----
 | `items`                         | `List`                | []                                               | list of items.
 | `selectedItems`                 | `Array`               | []                                               | selected list to start with (subgroup of items).
 | `onChange`                      | `function`            | ()=>{}                                           | callback for changed event.
@@ -93,8 +101,8 @@ class Example extends Component {
 | `noItemsRenderer`               | `Component`           |                                                  | Component to replace the default no items component.
 | `searchValue`                   | `string`              |                                                  | The value of the search field.
 | `searchValueChanged`            | `function`            |                                                  | Function to handle the change of search field. Accepts value as a single argument.
-|`responsiveHeight`               | `string`              | 400px                                            | Responsive height of the wrapping component, can send percent for example: `70%` 
-|`withGrouping`                   | `boolean`             | false                                            | Your items will be grouped by the group prop values - see "item grouping" section below  
+|`responsiveHeight`               | `string`              | 400px                                            | Responsive height of the wrapping component, can send percent for example: `70%`
+|`withGrouping`                   | `boolean`             | false                                            | Your items will be grouped by the group prop values - see "item grouping" section below
 
 
 ## Customization
@@ -244,13 +252,13 @@ You can use your own messages. Here is the default messages object:
 You can add also grouping to your items - add a group prop with the group name as a value to each of your items and add withGrouping prop as well.
 ```jsx
  <MultiSelect
-         items={[{id: 1, label: "item1", group: "group1"},
-                 {id: 2, label: "item2", group: "group1"}
-                 {id: 3, label: "item3", group: "group2"}]}
-         withGrouping
-         selectedItems={selectedItems}
-         onChange={this.handleChange}
-       />
+    items={[{id: 1, label: "item1", group: "group1"},
+            {id: 2, label: "item2", group: "group1"}
+            {id: 3, label: "item3", group: "group2"}]}
+    withGrouping
+    selectedItems={selectedItems}
+    onChange={this.handleChange}
+  />
 ```
 
 ## How to Contribute
@@ -271,10 +279,9 @@ You can add also grouping to your items - add a group prop with the group name a
    - Set title prefix to feature/bug and supply a descriptive PR title.
    - Add description to your Pull Request describing your change.
 4. Once your Pull Request is issued, the test suite and build processes will run and your change will be reviewed.
-  
-  
+
+
 ## Compatibility
-  
+
   - React 16 or newer
-
-
+
diff --git a/config/jest/jest.config.json b/config/jest/jest.config.json
@@ -27,5 +27,6 @@
 		"!**/resources/**",
 		"!**/stories/**",
 		"!**/coverage/**"
-	]
+	],
+	"testURL": "http://localhost/"
 }
diff --git a/config/webpack/loaders.js b/config/webpack/loaders.js
@@ -1,3 +1,5 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const babelLoader = {
   test: /(\.jsx|\.js)$/,
   loader: "babel-loader",
@@ -6,10 +8,13 @@ const babelLoader = {
 
 const cssLoader = {
   test: /(\.scss|\.css)/,
-  loaders: [
-    "style-loader",
-    "css-loader?modules&importLoaders=1&localIdentName=kn-[name]__[local]___[hash:base64:5]",
-    "sass-loader"
+  use: [
+    { loader: MiniCssExtractPlugin.loader },
+    {
+      loader:
+        "css-loader?modules&importLoaders=true&localIdentName=kn-[name]__[local]___[hash:base64:5]"
+    },
+    { loader: "sass-loader" }
   ]
 };
 

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -1,5 +1,6 @@
 const path = require("path");
-const { babelLoader, cssLoader, mdLoader, pngLoader, jsonLoader, svgLoader } = require("./loaders");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { babelLoader, cssLoader } = require("./loaders");
 
 module.exports = {
   entry: {
@@ -9,6 +10,11 @@ module.exports = {
     react: "react",
     "react-dom": "react-dom"
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "style.css"
+    })
+  ],
   output: {
     filename: "[name].js",
     path: path.resolve(process.cwd(), "dist"),

diff --git a/package.json b/package.json
@@ -28,25 +28,25 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
     "@kadira/react-storybook-addon-info": "^3.4.0",
     "@storybook/addon-knobs": "^3.3.15",
     "@storybook/addon-options": "^3.3.15",
     "@storybook/addons": "^3.3.15",
     "@storybook/react": "^3.3.15",
-    "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",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.5",
     "chai-enzyme": "^0.8.0",
     "cheerio": "^1.0.0-rc.2",
     "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
+    "css-loader": "^2.1.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "^4.8.0",
@@ -63,23 +63,24 @@
     "jest-sandbox": "^1.1.2",
     "jsdom": "^11.3.0",
     "lint-staged": "^7.0.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.5.0",
     "nodemon": "^1.9.1",
-    "postcss-loader": "^2.0.6",
+    "postcss-loader": "^3.0.0",
     "prettier": "^1.8.2",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^1.0.0",
     "react": "^16.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-addons-update": "^15.4.1",
     "react-dom": "^16.0.0",
     "react-slick": "^0.23.2",
     "react-test-renderer": "^16.0.0",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.1.0",
     "semantic-release": "^8.2.0",
     "storybook-readme": "3.0.6",
-    "style-loader": "^0.18.2",
-    "webpack": "^4.2.0",
-    "webpack-cli": "^2.0.12",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
     "webpack-merge": "^4.1.2",
     "webpack-strip": "^0.1.0"
   },

diff --git a/src/components/multi_select.js b/src/components/multi_select.js
@@ -142,22 +142,21 @@ export class MultiSelect extends PureComponent {
               listRenderer={listRenderer}
             />
           )}
-          {!loading &&
-            showSelectedItems && (
-              <DestinationList
-                selectionStatusRenderer={selectionStatusRenderer}
-                selectedIds={selectedIds}
-                clearAll={clearAll}
-                messages={messages}
-                selectedItems={selectedItems}
-                itemHeight={itemHeight}
-                height={height}
-                unselectItems={unselectItems}
-                selectedItemRenderer={selectedItemRenderer}
-                noItemsRenderer={noItemsRenderer}
-                withGrouping={withGrouping}
-              />
-            )}
+          {!loading && showSelectedItems && (
+            <DestinationList
+              selectionStatusRenderer={selectionStatusRenderer}
+              selectedIds={selectedIds}
+              clearAll={clearAll}
+              messages={messages}
+              selectedItems={selectedItems}
+              itemHeight={itemHeight}
+              height={height}
+              unselectItems={unselectItems}
+              selectedItemRenderer={selectedItemRenderer}
+              noItemsRenderer={noItemsRenderer}
+              withGrouping={withGrouping}
+            />
+          )}
         </div>
       </JssProvider>
     );

diff --git a/stories/custom_components/list_renderer/item_style.scss b/stories/custom_components/list_renderer/item_style.scss
@@ -1,37 +1,37 @@
 .item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
 
-    color: #000000;
-    background-size: cover;
-    background-color: #fff;
+  color: #000000;
+  background-size: cover;
+  background-color: #fff;
 }
 
 .icon {
-    position: absolute;
-    left: 15px;
-    top: 15px;
-    width: 50px;
-    height: 50px;
-    border-radius: 25px;
-    font-size: 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255,255,255, 0.2); 
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  font-size: 3em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .icon_checked {
-    background-color: #41B6E6;
+  background-color: #41b6e6;
 }
 
 .label {
-    font-size: 4em;
-    display: inline-block;
-    padding: .5em 1em;
-    border-radius: 5px;
-    background-color: rgba(255,255,255,.2);
-}
+  font-size: 4em;
+  display: inline-block;
+  padding: 0.5em 1em;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.2);
+}
diff --git a/stories/custom_components/list_renderer/style.scss b/stories/custom_components/list_renderer/style.scss
@@ -2,15 +2,16 @@
 @import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css");
 
 .slick-arrow {
-    z-index: 100;
-    transform: translate(0, -50%) scale(2);
+  z-index: 100;
+  transform: translate(0, -50%) scale(2);
 }
 .slick-prev {
-    left: 20px;
+  left: 20px;
 }
 .slick-next {
-    right: 20px;
+  right: 20px;
+}
+.slick-prev:before,
+.slick-next:before {
+  color: rgba(255, 255, 255, 0.4);
 }
-.slick-prev:before, .slick-next:before {
-    color: rgba(255,255,255,.4);
-}
diff --git a/stories/multi-select.stories.js b/stories/multi-select.stories.js
@@ -198,7 +198,7 @@ storiesOf("React Multi Select", module)
     withReadme(Readme, () => {
       class ValueController extends React.Component {
         state = {
-          value: "",
+          value: ""
         };
 
         onChange = value => {