nhn · heenakwag · Jan 9, 2020 · Dec 16, 2019 · Dec 31, 2019 · Dec 31, 2019
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+tui-note.config.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'tui',
+  extends: ['tui', 'plugin:prettier/recommended'],
   env: {
     browser: true,
     amd: true,

diff --git a/README.md b/README.md
@@ -30,14 +30,14 @@
 TOAST UI ColorPicker applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ColorPicker is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` options when creating the instance.
 
 ```js
-var options = {
-    ...
-    usageStatistics: false
+const options = {
+  ...
+  usageStatistics: false
 }
-var instance = tui.colorPicker.create(options);
+const instance = tui.colorPicker.create(options);
 ```
 
-Or, include `tui-code-snippet.js` (**v1.5.0** or **later**) and then immediately write the options as follows:
+Or, include `tui-code-snippet.js` (**v2.2.0** or **later**) and then immediately write the options as follows:
 
 ```js
 tui.usageStatistics = false;
@@ -104,9 +104,10 @@ The CDN directory has the following structure.
 ```
 tui-color-picker/
 ├─ latest/
+│  ├─ tui-color-picker.css
 │  ├─ tui-color-picker.js
-│  ├─ tui-color-picker.min.js
-│  └─ tui-color-picker.css
+│  ├─ tui-color-picker.min.css
+│  └─ tui-color-picker.min.js
 ├─ v2.1.0/
 │  ├─ ...
 ```
@@ -138,7 +139,7 @@ var colorPicker = tui.colorPicker;
 
 #### Using module format in node environment
 ``` javascript
-var colorPicker = require('tui-color-picker'); /* CommonJS */
+const colorPicker = require('tui-color-picker'); /* CommonJS */
 ```
 
 ``` javascript
@@ -150,10 +151,10 @@ Then you should call the `create` method with [options](https://nhn.github.io/tu
 After creating an instance, you can call various APIs.
 
 ``` javascript
-var container = document.getElementById('tui-color-picker-conatiner');
-var instance = colorPicker.create({
-    container: container,
-    ...
+const container = document.getElementById('tui-color-picker-conatiner');
+const instance = colorPicker.create({
+  container: container,
+  ...
 });
 
 instance.getColor();
@@ -201,7 +202,7 @@ $ npm run test
 
 
 ## 🔩 Dependency
-* [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >=1.5.0
+* [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >=2.2.0
 
 
 ## 🌏 Browser Support

diff --git a/bower.json b/bower.json
@@ -19,8 +19,5 @@
         "karma.conf.js",
         "webpack.config.js",
         "package.json"
-    ],
-    "dependencies": {
-        "tui-code-snippet": "^1.3.0"
-    }
+    ]
 }
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1,21 +1,26 @@
-## Load
+## Install
 
-Download `tui-color-picker`, `tui-code-snippet` manually and include sources in page.
-
-```html
-<link href="tui-color-picker.css" />
-<script src="tui-code-snippet.js"></script>
-<script src="tui-color-picker.js"></script>
+``` sh
+$ npm install --save tui-color-picker # Latest version
+$ npm install --save tui-color-picker@<version> # Specific version
 ```
 
-## HTML
-```html
-<div id="tui-color-picker-conatiner"></div>
-```
-```js
-var colorpicker = tui.colorpicker.create({
-    container: document.getElementById('tui-color-picker-conatiner'),
-    color: '#f9f9f9',
-    preset: ['#181818', '#292929', '#393939']
+It can also be installed by using bower or downloaded by CDN. Please refer to the [💾 Install](https://github.com/nhn/tui.color-picker#-install).
+
+## Usage
+
+```javascript
+import colorPicker from 'tui-color-picker';
+import 'tui-color-picker/dist/tui-color-picker.css';
+
+const colorpicker = colorPicker.create({
+  container: document.getElementById('color-picker-container'),
+  color: '#f9f9f9',
+  preset: ['#181818', '#292929', '#393939'],
+  ...
 });
 ```
+
+It can also be used by namespace or CommonJS module. Please refer to the [🔨 Usage](https://github.com/nhn/tui.color-picker#-usage).
+
+For more information about the API, please see [here](https://nhn.github.io/tui.color-picker/latest/ColorPicker).
diff --git a/examples/example01-basic.html b/examples/example01-basic.html
@@ -12,24 +12,40 @@
                 border-radius: 3px;
                 padding: 7px;
             }
+            .explain {
+                position: absolute;
+                top: 0;
+                left: 250px;
+            }
+            .explain textarea {
+                width: 300px;
+                height: 300px;
+                resize: none;
+                border: none;
+                outline: 0;
+            }
         </style>
     </head>
 
     <body>
         <div class="code-html">
             <div id="color-picker"></div>
+            <div class="explain">
+                <h3>Result of <a href="http://nhn.github.io/tui.color-picker/latest/ColorPicker#event-selectColor" target="_blank">selectColor</a> event:</h3>
+                <textarea id="result" readonly></textarea>
+            </div>
         </div>
-
-        <script src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
         <script src="../dist/tui-color-picker.js"></script>
         <script class="code-js">
+        var result = document.getElementById('result');
 
         var colorpicker = tui.colorPicker.create({
             container: document.getElementById('color-picker')
         });
 
-        colorpicker.on('selectColor', function(obj) {
-            console.log(obj);
+        colorpicker.on('selectColor', function(ev) {
+            result.value = JSON.stringify(ev, null, 8);
+            console.log(ev);
         });
 
         </script>

diff --git a/karma.conf.js b/karma.conf.js
@@ -5,6 +5,8 @@
 
 'use strict';
 
+var path = require('path');
+
 /* eslint-disable consts-on-top, no-process-env, require-jsdoc */
 /* eslint-disable no-process-env, require-jsdoc */
 var webdriverConfig = {
@@ -144,6 +146,11 @@ module.exports = function(config) {
             enforce: 'pre'
           }
         ]
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, './src/js')
+        }
       }
     },
     port: 9876,