Skip to content

Commit 55e7036

Browse files
mrchiefmrchief
committed
chore(releasing): Setting up commitlint 🔧
1 parent c4ca039 commit 55e7036

File tree

3 files changed

+666
-108
lines changed

3 files changed

+666
-108
lines changed

‎README.md‎

Lines changed: 97 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# react-dropdown-tree-select
2-
----
32

4-
[![Greenkeeper badge](https://badges.greenkeeper.io/dowjones/react-dropdown-tree-select.svg)](https://greenkeeper.io/)
3+
---
54

6-
[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][npm-url] [![semantic-release][semantic-release]][semantic-release-url]
5+
[![Greenkeeper badge][greenkeeper]][greenkeeper-url]
6+
7+
[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][npm-url] [![semantic-release][semantic-release]][semantic-release-url] [![Commitizen friendly][commitizen]][commitizen-url]
78

89
[npm-image]: http://img.shields.io/npm/v/react-dropdown-tree-select.svg?style=flat-square
910
[npm-url]: http://npmjs.org/package/react-dropdown-tree-select
@@ -16,38 +17,42 @@
1617
[download-image]: https://img.shields.io/npm/dm/react-dropdown-tree-select.svg?style=flat-square
1718
[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square
1819
[semantic-release-url]: https://github.com/semantic-release/semantic-release
19-
20+
[commitizen]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
21+
[commitizen-url]: http://commitizen.github.io/cz-cli/
22+
[greenkeeper]: https://badges.greenkeeper.io/dowjones/react-dropdown-tree-select.svg
23+
[greenkeeper-url]: https://greenkeeper.io/
2024

2125
## React Dropdown Tree Select
2226

2327
A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection.
2428

2529
## Table of Contents
26-
- [Screenshot](#screenshot)
27-
- [Demo](#example)
28-
- [Vanilla (no framework)](#vanilla-no-framework)
29-
- [With Bootstrap](#with-bootstrap)
30-
- [With Material Design](#with-material-design )
31-
- [Install](#install)
32-
- [Peer Dependencies](#peer-dependencies)
33-
- [Usage](#usage)
34-
- [Props](#props)
35-
- [className](#classname)
36-
- [onChange](#onchange)
37-
- [onNodeToggle](#onnodetoggle)
38-
- [data](#data)
39-
- [placeholderText](#placeholdertext)
40-
- [Styling and Customization](#styling-and-customization)
41-
- [Using default styles](#default-styles)
42-
- [Customizing with Bootstrap, Material Design styles](#customizing-styles)
43-
- [Performance](#performance)
44-
- [Search optimizations](#search-optimizations)
45-
- [Search debouncing](#search-debouncing)
46-
- [Virtualized rendering](#virtualized-rendering)
47-
- [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations)
48-
- [FAQ](#faq)
49-
- [Development](#development)
50-
- [License](#license)
30+
31+
* [Screenshot](#screenshot)
32+
* [Demo](#example)
33+
* [Vanilla (no framework)](#vanilla-no-framework)
34+
* [With Bootstrap](#with-bootstrap)
35+
* [With Material Design](#with-material-design)
36+
* [Install](#install)
37+
* [Peer Dependencies](#peer-dependencies)
38+
* [Usage](#usage)
39+
* [Props](#props)
40+
* [className](#classname)
41+
* [onChange](#onchange)
42+
* [onNodeToggle](#onnodetoggle)
43+
* [data](#data)
44+
* [placeholderText](#placeholdertext)
45+
* [Styling and Customization](#styling-and-customization)
46+
* [Using default styles](#default-styles)
47+
* [Customizing with Bootstrap, Material Design styles](#customizing-styles)
48+
* [Performance](#performance)
49+
* [Search optimizations](#search-optimizations)
50+
* [Search debouncing](#search-debouncing)
51+
* [Virtualized rendering](#virtualized-rendering)
52+
* [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations)
53+
* [FAQ](#faq)
54+
* [Development](#development)
55+
* [License](#license)
5156

5257
## Screenshot
5358

@@ -56,12 +61,15 @@ A lightweight and fast control to render a select component that can display hie
5661
## Demo
5762

5863
##### Vanilla, no framework
64+
5965
Online demo: http://dowjones.github.io/react-dropdown-tree-select/
6066

6167
##### With Bootstrap
68+
6269
Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/bootstrap
6370

6471
##### With Material Design
72+
6573
Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/material
6674

6775
## Install
@@ -81,33 +89,46 @@ In order to avoid version conflicts in your project, you must specify and instal
8189
## Usage
8290

8391
```jsx
84-
import React from 'react'
85-
import ReactDOM from 'react-dom'
86-
import DropdownTreeSelect from 'react-dropdown-tree-select'
92+
import React from "react";
93+
import ReactDOM from "react-dom";
94+
import DropdownTreeSelect from "react-dropdown-tree-select";
8795

8896
const tree = {
89-
"label": "search me",
90-
"value": "searchme",
91-
"children": [
97+
label: "search me",
98+
value: "searchme",
99+
children: [
92100
{
93-
"label": "search me too",
94-
"value": "searchmetoo",
95-
"children": [
101+
label: "search me too",
102+
value: "searchmetoo",
103+
children: [
96104
{
97-
"label": "No one can get me",
98-
"value": "anonymous"
105+
label: "No one can get me",
106+
value: "anonymous"
99107
}
100108
]
101109
}
102110
]
103-
}
104-
105-
const onChange = (currentNode, selectedNodes) => { console.log('onChange::', currentNode, selectedNodes) }
106-
const onAction = ({action, node}) => { console.log(`onAction:: [${action}]`, node) }
107-
const onNodeToggle = (currentNode) => { console.log('onNodeToggle::', currentNode) }
108-
109-
ReactDOM.render(<DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />, document.body) // in real world, you'd want to render to an element, instead of body.
110-
111+
};
112+
113+
const onChange = (currentNode, selectedNodes) => {
114+
console.log("onChange::", currentNode, selectedNodes);
115+
};
116+
const onAction = ({ action, node }) => {
117+
console.log(`onAction:: [${action}]`, node);
118+
};
119+
const onNodeToggle = currentNode => {
120+
console.log("onNodeToggle::", currentNode);
121+
};
122+
123+
ReactDOM.render(
124+
<DropdownTreeSelect
125+
data={data}
126+
onChange={onChange}
127+
onAction={onAction}
128+
onNodeToggle={onNodeToggle}
129+
/>,
130+
document.body
131+
); // in real world, you'd want to render to an element, instead of body.
111132
```
112133

113134
## Props
@@ -118,24 +139,24 @@ Type: `string`
118139

119140
Additional classname for container. The container renders with a default classname of `react-dropdown-tree-select`.
120141

121-
122142
### onChange
123143

124144
Type: `function`
125145

126146
Fires when a node change event occurs. Currently the following actions trigger a node change:
127-
- Checkbox click which checks/unchecks the item
128-
- Closing of pill (which unchecks the corresponding checkbox item)
147+
148+
* Checkbox click which checks/unchecks the item
149+
* Closing of pill (which unchecks the corresponding checkbox item)
129150

130151
Calls the handler with the current node object and all selected nodes (if any). Example:
131152

132153
```jsx
133-
function onChange (currentNode, selectedNodes) {
154+
function onChange(currentNode, selectedNodes) {
134155
// currentNode: { label, value, children, expanded, checked, className, ...extraProps }
135156
// selectedNodes: [{ label, value, children, expanded, checked, className, ...extraProps }]
136157
}
137158

138-
return <DropdownTreeSelect data={data} onChange={onChange} />
159+
return <DropdownTreeSelect data={data} onChange={onChange} />;
139160
```
140161

141162
### onNodeToggle
@@ -147,11 +168,11 @@ Fires when a node is expanded or collapsed.
147168
Calls the handler with the current node object. Example:
148169

149170
```jsx
150-
function onNodeToggle (currentNode) {
171+
function onNodeToggle(currentNode) {
151172
// currentNode: { label, value, children, expanded, checked, className, ...extraProps }
152173
}
153174

154-
return <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />
175+
return <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />;
155176
```
156177

157178
### data
@@ -211,18 +232,21 @@ module: {
211232
{
212233
test: /\.css$/,
213234
use: ExtractTextPlugin.extract({
214-
fallback: 'style-loader',
215-
use: [{
216-
loader: 'css-loader'
217-
}]
235+
fallback: "style-loader",
236+
use: [
237+
{
238+
loader: "css-loader"
239+
}
240+
]
218241
}),
219242
include: /node_modules[/\\]react-dropdown-tree-select/
220243
}
221-
]
244+
];
222245
}
223246
```
224247

225248
#### Using a CDN
249+
226250
You can import and place a style link directly by referencing it from a CDN.
227251

228252
```html
@@ -232,21 +256,23 @@ You can import and place a style link directly by referencing it from a CDN.
232256
Note: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.
233257

234258
#### Using with other bundlers
259+
235260
You can reference the files from `node_modules/react-dropdown-tree-select/dist/styles.css` to include in your own bundle via gulp or any other bundlers you have.
236261

237262
### Customizing styles
263+
238264
Once you import default styles, it is easy to add/override the provided styles to match popular frameworks. Checkout `/docs` folder for some examples.
239265

240-
- [With Bootstrap](/docs/examples/bootstrap)
241-
- [With Material Design ](/docs/examples/material)
266+
* [With Bootstrap](/docs/examples/bootstrap)
267+
* [With Material Design ](/docs/examples/material)
242268

243269
## Performance
244270

245271
### Search optimizations
246272

247-
- The tree creates a flat list of nodes from hierarchical tree data to perform searches that are linear in time irrespective of the tree depth or size.
248-
- It also memoizes each search term, so subsequent searches are instantaneous (almost).
249-
- Last but not the least, the search employs progressive filtering technique where subsequent searches are performed on the previous search set. E.g., say the tree has 4000 nodes altogether and the user wants to filter nodes that contain the text: "2002". As the user enters each key press the search goes like this:
273+
* The tree creates a flat list of nodes from hierarchical tree data to perform searches that are linear in time irrespective of the tree depth or size.
274+
* It also memoizes each search term, so subsequent searches are instantaneous (almost).
275+
* Last but not the least, the search employs progressive filtering technique where subsequent searches are performed on the previous search set. E.g., say the tree has 4000 nodes altogether and the user wants to filter nodes that contain the text: "2002". As the user enters each key press the search goes like this:
250276

251277
```
252278
key press : 2-----20-----200-----2002
@@ -272,14 +298,17 @@ The tree tries to minimize the DOM manipulations as much as possible. E.g., duri
272298
Node toggling also achieves the expand/collapse effect by manipulating css classes instead of creating new tree with filtered out nodes.
273299

274300
## FAQ
301+
275302
### How do I change the placeholder text?
303+
276304
The default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it.
277305

278306
```jsx
279307
<DropdownTreeSelect placeholderText="Search" />
280308
```
281309

282310
### How do I tweak styles?
311+
283312
Easy style customization is one of the design goals of this component. Every visual aspect of this dropdown can be tweaked without going through extensive hacks. E.g., to change how disabled nodes appear:
284313

285314
```css
@@ -291,6 +320,7 @@ Easy style customization is one of the design goals of this component. Every vis
291320
The css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).
292321

293322
### I do not want the default styles, do I need to fork the project?
323+
294324
Absolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:
295325

296326
```pug
@@ -318,11 +348,13 @@ Then include your own custom styles in your project.
318348
If you believe this aspect can be improved further, feel free to raise an issue.
319349

320350
### My question is not listed here
351+
321352
Find more questions and their answers in the [issue tracker](https://github.com/dowjones/react-dropdown-tree-select/issues?utf8=%E2%9C%93&q=%20label%3Aquestion%20). If it still doesn't answer your questions, please raise an issue.
322353

323354
## Development
324355

325356
Clone the git repo and install dependencies.
357+
326358
```
327359
npm i
328360

‎package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"license": "MIT",
2525
"scripts": {
2626
"build": "rimraf dist/**/* && webpack --config webpack.config.js --bail",
27+
"commit": "git-cz",
28+
"commitmsg": "commitlint -e $GIT_PARAMS",
2729
"coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
2830
"demo": "webpack-dev-server --config docs/webpack.config.js",
2931
"prepublishOnly": "npm run build",
@@ -40,6 +42,8 @@
4042
"prop-types": "^15.6.0"
4143
},
4244
"devDependencies": {
45+
"@commitlint/cli": "^6.1.0",
46+
"@commitlint/config-conventional": "^6.1.0",
4347
"ava": "^0.25.0",
4448
"babel-core": "^6.24.1",
4549
"babel-eslint": "^8.0.0",
@@ -49,9 +53,11 @@
4953
"babel-preset-es2015": "^6.24.1",
5054
"babel-preset-react": "^6.24.1",
5155
"babel-preset-stage-0": "^6.24.1",
56+
"commitizen": "^2.9.6",
5257
"coveralls": "^3.0.0",
5358
"cross-env": "^5.0.5",
5459
"css-loader": "^0.28.0",
60+
"cz-conventional-changelog-emoji": "^0.1.0",
5561
"enzyme": "^3.1.1",
5662
"enzyme-adapter-react-16": "^1.0.4",
5763
"eslint": "^4.6.1",
@@ -62,6 +68,7 @@
6268
"eslint-plugin-react": "^7.0.0",
6369
"eslint-plugin-standard": "^3.0.1",
6470
"extract-text-webpack-plugin": "^3.0.0",
71+
"husky": "^0.14.3",
6572
"ignore-styles": "^5.0.1",
6673
"jsdom": "^11.2.0",
6774
"jsdom-global": "^3.0.2",
@@ -105,5 +112,16 @@
105112
},
106113
"stylelint": {
107114
"extends": "stylelint-config-standard"
115+
},
116+
"commitlint": {
117+
"extends": ["@commitlint/config-conventional"],
118+
"rules": {
119+
"subject-case": [2, "always", "sentence-case"]
120+
}
121+
},
122+
"config": {
123+
"commitizen": {
124+
"path": "cz-conventional-changelog-emoji"
125+
}
108126
}
109127
}

0 commit comments

Comments
 (0)