feat(ui): Remove dependency on react-simple-dropdown package (#45) ✨

refactor(ui): Removed dependency on react-simple-dropdown package

- Slims down bundle size
- Removes warnings associated with react-simple-dropdown package

* perf: V8 Perf tweak 🐎

* docs(README): Updated CSS skeleton to reflect react-simple-dropdown package removal related changes 📚

Fixes #40

Author: mrchief

.babelrc

@@ -1,8 +1,7 @@
 {
   "presets": [["es2015", { "modules": false }], "stage-0", "react"],
   "plugins": [
-    "transform-class-properties",
-    "transform-react-remove-prop-types"
+    "transform-class-properties"
   ],
   "env": {
       "test": {

.codeclimate.yml

@@ -1,7 +1,7 @@
 engines:
   eslint:
     enabled: true
-  csslint:
+  stylelint:
     enabled: true
   duplication:
     enabled: true

.eslintrc.json

@@ -1,7 +1,14 @@
 {
   "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
   "extends": ["standard", "plugin:react/recommended"],
-  "plugins": [
-    "react"
-  ]
-}
+  "plugins": ["react"],
+  "rules": {
+    "max-len": ["error", { "code": 120 }]
+  }
+}

README.md

@@ -26,7 +26,7 @@ A lightweight and fast control to render a select component that can display hie
 - [Screenshot](#screenshot)
 - [Demo](#example)
   - [Vanilla (no framework)](#vanilla-no-framework)
-  - [With Bootstrap](#with-bootstrap) 
+  - [With Bootstrap](#with-bootstrap)
   - [With Material Design](#with-material-design )
 - [Install](#install)
   - [Peer Dependencies](#peer-dependencies)
@@ -58,10 +58,10 @@ A lightweight and fast control to render a select component that can display hie
 ##### Vanilla, no framework
 Online demo: http://dowjones.github.io/react-dropdown-tree-select/
 
-##### With Bootstrap 
+##### With Bootstrap
 Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/bootstrap
 
-##### With Material Design 
+##### With Material Design
 Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/material
 
 ## Install
@@ -198,7 +198,7 @@ The text to display as placeholder on the search box. Defaults to `Choose...`
 
 ### Default styles
 
-The component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs. 
+The component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs.
 
 #### Using WebPack
 
@@ -239,7 +239,7 @@ Once you import default styles, it is easy to add/override the provided styles t
 
  - [With Bootstrap](/docs/examples/bootstrap)
  - [With Material Design ](/docs/examples/material)
- 
+
 ## Performance
 
 ### Search optimizations
@@ -295,14 +295,14 @@ Absolutely not! Simply do not import the styles (webpack) or include it in your
 
 ```pug
 div.react-dropdown-tree-select
-  div.dropdown 
-    a.dropdown__trigger.dropdown-trigger
+  div.dropdown
+    a.dropdown-trigger
       span
     ul.tag-list
       li.tag-item
         input
-    div.dropdown__content.dropdown-content
-      ul.root 
+    div.dropdown-content
+      ul.root
         li.node.tree
           i.toggle.collapsed
           label
@@ -311,9 +311,9 @@ div.react-dropdown-tree-select
 ```
 
 Write your own styles from scratch or copy [existing styles](https://github.com/search?utf8=%E2%9C%93&q=repo%3Adowjones%2Freact-dropdown-tree-select+language%3ACSS+path%3A%2Fsrc&type=Code&ref=advsearch&l=CSS&l=) and tweak them.
-Then include your own custom styles in your project. 
+Then include your own custom styles in your project.
 
-:bulb: Pro tip: Leverage [node's](#data) `className`, `tagClassName` or [action's](#data) `className` prop to emit your own class name. Then override/add css propeties in your class. Remember that last person wins in CSS (unless specificity or `!important` is involved). Often times, this may suffice and may be easier then writin all the styles from the ground up.
+:bulb: Pro tip: Leverage [node's](#data) `className`, `tagClassName` or [action's](#data) `className` prop to emit your own class name. Then override/add css propeties in your class. Remember that last person wins in CSS (unless specificity or `!important` is involved). Often times, this may suffice and may be easier then writing all the styles from the ground up.
 
 If you believe this aspect can be improved further, feel free to raise an issue.
 

docs/examples/bootstrap/index.css

@@ -49,4 +49,4 @@ h2 {
 
 .bootstrap-demo .toggle.expanded::after {
   content: "\f068";
-}
+}

docs/examples/material/index.css

@@ -61,7 +61,7 @@ h2, h6 {
   position: relative;
   width: 1rem;
   height: 1rem;
-  margin-right: .75rem;
+  margin-right: 0.75rem;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -89,4 +89,4 @@ h2, h6 {
   border-top-style: none;
   border-right-style: none;
   border-color: #2196f3;
-}
+}

docs/index.css

@@ -31,7 +31,7 @@ h2 {
 
 .dropdown-content {
   max-height: 400px;
-
+  overflow-y: auto;
 }
 
 .node .fa {
@@ -42,4 +42,4 @@ h2 {
 
 .node .fa-ban {
   color: darkorange;
-}
+}

docs/index.js

@@ -3,8 +3,17 @@ import ReactDOM from 'react-dom'
 import DropdownTreeSelect from '../src'
 import data from './demo-data.json'
 
-const onChange = (curNode, selectedNodes) => { console.log('onChange::', curNode, selectedNodes) }
-const onAction = ({action, node}) => { console.log(`onAction:: [${action}]`, node) }
-const onNodeToggle = (curNode) => { console.log('onNodeToggle::', curNode) }
+const onChange = (curNode, selectedNodes) => {
+  console.log('onChange::', curNode, selectedNodes)
+}
+const onAction = ({ action, node }) => {
+  console.log(`onAction:: [${action}]`, node)
+}
+const onNodeToggle = curNode => {
+  console.log('onNodeToggle::', curNode)
+}
 
-ReactDOM.render(<DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />, document.getElementById('app'))
+ReactDOM.render(
+  <DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />,
+  document.getElementById('app')
+)

docs/webpack.config.js

@@ -15,9 +15,18 @@ const baseConfig = {
     {
       test: /\.css$/,
       use: [
-        'style-loader',
         {
-          loader: 'css-loader'
+          loader: 'style-loader'
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            localIdentName: 'react-dropdown-tree-select__[local]--[hash:base64:5]',
+            importLoaders: 1
+          }
+        },
+        {
+          loader: 'postcss-loader'
         }
       ],
       include: /src/

package.json

@@ -27,20 +27,17 @@
     "coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
     "demo": "webpack-dev-server --config docs/webpack.config.js",
     "prepublishOnly": "npm run build",
-    "lint": "eslint --fix src docs webpack.config.js",
+    "lint": "eslint --fix src docs webpack.config.js && stylelint \"src/**/*.css\" --fix",
     "semantic-release": "semantic-release",
     "travis-deploy-once": "travis-deploy-once",
     "test": "cross-env NODE_ENV=test ava",
     "test:cov": "rimraf .nyc_output && nyc npm test"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "dependencies": {
     "classnames": "^2.2.5",
     "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.5.8",
-    "react-simple-dropdown": "^3.2.0"
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
     "ava": "^0.25.0",
@@ -49,8 +46,6 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-imports": "^1.4.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -72,51 +67,43 @@
     "jsdom-global": "^3.0.2",
     "nyc": "^11.2.1",
     "open": "^0.0.5",
+    "postcss": "^6.0.16",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.10",
+    "postcss-nested": "^3.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.1",
     "semantic-release": "^12.2.2",
     "sinon": "^4.0.0",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.20.1",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.0.0",
     "travis-deploy-once": "^4.3.2",
     "webpack": "^3.5.6",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-dev-server": "^2.9.4"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^15.0.0 || ^16.0.0"
   },
   "ava": {
-    "files": [
-      "src/**/*.test.js"
-    ],
-    "require": [
-      "babel-register",
-      "ignore-styles",
-      "jsdom-global/register",
-      "./setupEnzyme"
-    ],
+    "files": ["src/**/*.test.js"],
+    "require": ["babel-register", "ignore-styles", "jsdom-global/register", "./setupEnzyme"],
     "babel": "inherit"
   },
   "nyc": {
     "sourceMap": false,
     "instrument": false,
     "cache": true,
-    "reporter": [
-      "html",
-      "text-summary"
-    ],
+    "reporter": ["html", "text-summary"],
     "all": true,
-    "include": [
-      "src/**/*.js"
-    ],
-    "exclude": [
-      "**/*.test.js",
-      "**/node_modules/**",
-      "dist",
-      "demo"
-    ]
+    "include": ["src/**/*.js"],
+    "exclude": ["**/*.test.js", "**/node_modules/**", "dist", "demo"]
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard"
   }
 }