refactor: monorepo skeleton

.editorconfig

@@ -1,5 +1,5 @@
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
-end_of_line = lf
+indent_size = 2
+end_of_line = lf

apps/image-editor/README.md

@@ -0,0 +1 @@
+# image-editor README

examples/example01-includeUi.html → apps/image-editor/examples/example01-includeUi.html

@@ -37,8 +37,8 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
     ></script>
     <script type="text/javascript" src="../dist/tui-image-editor.js"></script>
-    <script type="text/javascript" src="./js/theme/white-theme.js"></script>
-    <script type="text/javascript" src="./js/theme/black-theme.js"></script>
+    <script type="text/javascript" src="js/theme/white-theme.js"></script>
+    <script type="text/javascript" src="js/theme/black-theme.js"></script>
     <script>
       // Image editor
       var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {

examples/example02-useApiDirect.html → apps/image-editor/examples/example02-useApiDirect.html

@@ -14,7 +14,7 @@
     <div class="body-container">
       <div class="tui-image-editor-controls">
         <div class="header">
-          <img class="logo" src="img/TOAST UI Component.png" />
+          <img class="logo" src="img/TOAST%20UI%20Component.png" />
           <span class="name"> Image Editor</span>
           <ul class="menu">
             <li class="menu-item border input-wrapper">

examples/example03-mobile.html → apps/image-editor/examples/example03-mobile.html

@@ -15,7 +15,7 @@
     <!-- Image editor controls - top area -->
     <div class="header">
       <div>
-        <img class="logo" src="img/TOAST UI Component.png" /> <span class="name">Image Editor</span>
+        <img class="logo" src="img/TOAST%20UI%20Component.png" /> <span class="name">Image Editor</span>
       </div>
       <div class="menu">
         <span class="button">

examples/js/service-basic.js → apps/image-editor/examples/js/service-basic.js

@@ -1,6 +1,6 @@
 /**
- * basic.js
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * service-basic.js
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview
  */
 /* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity,prefer-const,no-unused-vars */

examples/js/service-mobile.js → apps/image-editor/examples/js/service-mobile.js

@@ -1,6 +1,6 @@
 /**
- * mobile.js
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * service-mobile.js
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview
  */
 /* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */

karma.conf.js → apps/image-editor/karma.conf.js

@@ -1,5 +1,8 @@
 /* eslint-disable consts-on-top, no-process-env, require-jsdoc */
 /* eslint-disable no-process-env, require-jsdoc */
+
+const path = require('path');
+
 const webdriverConfig = {
   hostname: 'fe.nhnent.com',
   port: 4444,
@@ -49,7 +52,7 @@ function setConfig(defaultConfig, server) {
       },
     };
     defaultConfig.browsers = [
-      'IE9',
+      // 'IE9',
       'IE10',
       // 'IE11',
       // 'Edge',
@@ -95,28 +98,28 @@ module.exports = function (config) {
       // included jasmine-karma version is 2.0.5 and this version don't support ie8
       'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
       'node_modules/fabric/dist/fabric.js',
-      'test/index.js',
+      'tests/index.js',
       {
-        pattern: 'test/fixtures/*.jpg',
+        pattern: 'tests/fixtures/*.jpg',
         watched: false,
         included: false,
         served: true,
       },
       {
-        pattern: 'test/fixtures/*.png',
+        pattern: 'tests/fixtures/*.png',
         watched: false,
         included: false,
         served: true,
       },
       {
-        pattern: 'test/fixtures/*.svg',
+        pattern: 'tests/fixtures/*.svg',
         watched: false,
         included: false,
         served: true,
       },
     ],
     preprocessors: {
-      'test/index.js': ['webpack', 'sourcemap'],
+      'tests/index.js': ['webpack', 'sourcemap'],
     },
     reporters: ['dots'],
     webpack: {
@@ -125,6 +128,13 @@ module.exports = function (config) {
       externals: {
         fabric: 'fabric',
       },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, 'src/js/'),
+          '@css': path.resolve(__dirname, 'src/css/'),
+          '@svg': path.resolve(__dirname, 'src/svg/'),
+        },
+      },
       module: {
         rules: [
           {
@@ -136,7 +146,7 @@ module.exports = function (config) {
           },
           {
             test: /\.js$/,
-            exclude: /(test|node_modules)/,
+            exclude: /(tests|node_modules)/,
             loader: 'istanbul-instrumenter-loader',
             query: {
               esModules: true,

package.json → apps/image-editor/package.json

@@ -79,7 +79,7 @@
   "scripts": {
     "test": "karma start --no-single-run",
     "test:ne": "KARMA_SERVER=ne karma start",
-    "test:types": "tsc --project test/types",
+    "test:types": "tsc --project tests/types",
     "bundle": "webpack && webpack -p && npm run bundle:svg && node tsBannerGenerator.js",
     "bundle:svg": "node makesvg.js",
     "serve": "webpack-dev-server",

apps/image-editor/src/index.js

@@ -0,0 +1,27 @@
+import '@/polyfill';
+import ImageEditor from '@/imageEditor';
+import '@css/index.styl';
+
+// commands
+import '@/command/addIcon';
+import '@/command/addImageObject';
+import '@/command/addObject';
+import '@/command/addShape';
+import '@/command/addText';
+import '@/command/applyFilter';
+import '@/command/changeIconColor';
+import '@/command/changeShape';
+import '@/command/changeText';
+import '@/command/changeTextStyle';
+import '@/command/clearObjects';
+import '@/command/flip';
+import '@/command/loadImage';
+import '@/command/removeFilter';
+import '@/command/removeObject';
+import '@/command/resizeCanvasDimension';
+import '@/command/rotate';
+import '@/command/setObjectProperties';
+import '@/command/setObjectPosition';
+import '@/command/changeSelection';
+
+module.exports = ImageEditor;

src/js/action.js → apps/image-editor/src/js/action.js

@@ -1,6 +1,6 @@
 import { extend } from 'tui-code-snippet';
-import { isSupportFileApi, base64ToBlob, toInteger } from './util';
-import Imagetracer from './helper/imagetracer';
+import Imagetracer from '@/helper/imagetracer';
+import { isSupportFileApi, base64ToBlob, toInteger } from '@/util';
 
 export default {
   /**
@@ -155,12 +155,12 @@ export default {
           this.changeCursor('default');
           this.stopDrawingMode();
         },
-        registDefalutIcons: (type, path) => {
+        registerDefaultIcons: (type, path) => {
           const iconObj = {};
           iconObj[type] = path;
           this.registerIcons(iconObj);
         },
-        registCustomIcon: (imgUrl, file) => {
+        registerCustomIcon: (imgUrl, file) => {
           const imagetracer = new Imagetracer();
           imagetracer.imageToSVG(
             imgUrl,

src/js/command/addIcon.js → apps/image-editor/src/js/command/addIcon.js

@@ -1,10 +1,10 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Add an icon
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { componentNames, commandNames } from '@/consts';
 
 const { ICON } = componentNames;
 
@@ -30,6 +30,7 @@ const command = {
       return objectProps;
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @returns {Promise}

src/js/command/addImageObject.js → apps/image-editor/src/js/command/addImageObject.js

@@ -1,10 +1,10 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Add an image object
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { commandNames } from '@/consts';
 
 const command = {
   name: commandNames.ADD_IMAGE_OBJECT,
@@ -22,6 +22,7 @@ const command = {
       return objectProps;
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @returns {Promise}

src/js/command/addObject.js → apps/image-editor/src/js/command/addObject.js

@@ -1,10 +1,10 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Add an object
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames, rejectMessages } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { commandNames, rejectMessages } from '@/consts';
 
 const command = {
   name: commandNames.ADD_OBJECT,
@@ -25,6 +25,7 @@ const command = {
       }
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @param {Object} object - Fabric object

src/js/command/addShape.js → apps/image-editor/src/js/command/addShape.js

@@ -1,10 +1,10 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Add a shape
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { componentNames, commandNames } from '@/consts';
 
 const { SHAPE } = componentNames;
 
@@ -37,6 +37,7 @@ const command = {
       return objectProps;
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @returns {Promise}

src/js/command/addText.js → apps/image-editor/src/js/command/addText.js

@@ -1,10 +1,11 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Add a text object
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames, rejectMessages } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { componentNames, commandNames, rejectMessages } from '@/consts';
+
 const { TEXT } = componentNames;
 
 const command = {
@@ -51,6 +52,7 @@ const command = {
       return objectProps;
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @returns {Promise}

src/js/command/applyFilter.js → apps/image-editor/src/js/command/applyFilter.js

@@ -1,18 +1,18 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Apply a filter into an image
  */
 import snippet from 'tui-code-snippet';
-import commandFactory from '../factory/command';
-import { componentNames, rejectMessages, commandNames } from '../consts';
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
 
 const { FILTER } = componentNames;
 
 /**
- * Chched data for undo
+ * Cached data for undo
  * @type {Object}
  */
-let chchedUndoDataForSilent = null;
+let cachedUndoDataForSilent = null;
 
 /**
  * Make undoData
@@ -62,11 +62,12 @@ const command = {
       const prevfilterOption = filterComp.getOptions(type);
       const undoData = makeUndoData(type, prevfilterOption, options);
 
-      chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
+      cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);
     }
 
     return filterComp.add(type, options);
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @param {string} type - Filter type

src/js/command/changeIconColor.js → apps/image-editor/src/js/command/changeIconColor.js

@@ -1,10 +1,10 @@
 /**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview Change icon color
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, rejectMessages, commandNames } from '../consts';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
 
 const { ICON } = componentNames;
 
@@ -33,6 +33,7 @@ const command = {
       resolve();
     });
   },
+
   /**
    * @param {Graphics} graphics - Graphics instance
    * @returns {Promise}

src/js/command/changeSelection.js → apps/image-editor/src/js/command/changeSelection.js

@@ -2,10 +2,10 @@
  * @author NHN. FE Development Team <dl_javascript@nhn.com>
  * @fileoverview change selection
  */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
-import { getCachedUndoDataForDimension } from '../helper/selectionModifyHelper';
+import commandFactory from '@/factory/command';
+import { Promise } from '@/util';
+import { commandNames } from '@/consts';
+import { getCachedUndoDataForDimension } from '@/helper/selectionModifyHelper';
 
 const command = {
   name: commandNames.CHANGE_SELECTION,
@@ -21,6 +21,7 @@ const command = {
 
     return Promise.resolve();
   },
+
   undo(graphics) {
     this.undoData.forEach((datum) => {
       graphics.setObjectProperties(datum.id, datum);