feat: scoped package (#189)

vchimev · web-flow · commit 7414760326bc · 2019-10-10T16:47:49.000+03:00
* feat: scope package

* refactor: migrate imports

* docs: migrate imports

* chore: migrate package-lock.json

* fix: eslint errors
diff --git a/.travis.yml b/.travis.yml
@@ -5,7 +5,7 @@ install:
     - echo no | npm install
 
 before_script:
-    - node_modules/.bin/eslint
+    - npm run eslint
 
 script:
     - npm run builder
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # NativeScript Theme: Core V2
-[![npm](https://img.shields.io/npm/v/nativescript-theme-core.svg)](https://www.npmjs.com/package/nativescript-theme-core)
-[![npm](https://img.shields.io/npm/dt/nativescript-theme-core.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-theme-core)
+[![npm](https://img.shields.io/npm/v/@nativescript/theme.svg)](https://www.npmjs.com/package/@nativescript/theme)
+[![npm](https://img.shields.io/npm/dt/@nativescript/theme.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript/theme)
 
 Home of the core NativeScript theme 2.0 beta. The documentation of the beta theme will live here, until it gets final.
 
@@ -26,77 +26,77 @@ Home of the core NativeScript theme 2.0 beta. The documentation of the beta them
 ## Breaking changes
 
 * The theme requires 2 files to be loaded - the core theme and a skin on top of it. Read [Usage](#usage) for more info.
-* The theme is now **applied using Element selectors**, if you need the old classes approach - it has moved to 
+* The theme is now **applied using Element selectors**, if you need the old classes approach - it has moved to
 .compat CSS/SCSS files, e.g. `core.compat.css` and `blue.compat.css`.
 * Theme 2.0 beta **requires some JavaScript to be loaded** for **{N} before 6.1** which helps with the styling.
-* Theme 2.0 replaces node-sass with **sass** which is more up to date feature-wise and doesn't have a native dependency. 
+* Theme 2.0 replaces node-sass with **sass** which is more up to date feature-wise and doesn't have a native dependency.
 It does still work with node-sass though.
 
 ## Usage
 
-The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just 
+The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just
 load the core CSS (the default skin was added in 2.0.18):
 
 ```css
- @import "~nativescript-theme-core/css/core.css";
+ @import "~@nativescript/theme/css/core.css";
 ```
 
 or alternatively SCSS:
 
 ```scss
-@import "~nativescript-theme-core/core";
+@import "~@nativescript/theme/core";
 ```
 
 If you want, you can choose from several different skins. To do that, you can include a second CSS/SCC file just after
 you load the core CSS/SCSS (if you use Theme 2.017 or earlier, you will have to include both files for the styling
-to work. 
+to work.
 
 ```css
-@import "~nativescript-theme-core/css/core.css";
-@import "~nativescript-theme-core/css/blue.css";
+@import "~@nativescript/theme/css/core.css";
+@import "~@nativescript/theme/css/blue.css";
 ```
 
 or
 
 ```scss
-@import "~nativescript-theme-core/core";
-@import "~nativescript-theme-core/blue";
+@import "~@nativescript/theme/core";
+@import "~@nativescript/theme/blue";
 ```
 
 In order to import just the Theme variables in one of your modules, use this:
 
 ```scss
-@import "~nativescript-theme-core/scss/variables";
+@import "~@nativescript/theme/scss/variables";
 ```
 
 It will import just the variables and mixins, without any additional styling.
 
-Here is the old list of Theme skins - the first two are now the Core default Light and Dark skins, the rest are 
+Here is the old list of Theme skins - the first two are now the Core default Light and Dark skins, the rest are
 all the Light skins available, listed by name.
 
-![Multiple Platforms](http://docs.nativescript.org/img/theme/color-schemes-all.png) 
+![Multiple Platforms](http://docs.nativescript.org/img/theme/color-schemes-all.png)
 
 The theme will style your application using Element selectors - you don't need to add CSS classes on every element you
 need to style.
 
-Additionally, if you need to create you own skin, you can start just from the core theme - it includes the sizing and 
+Additionally, if you need to create you own skin, you can start just from the core theme - it includes the sizing and
 initial styling of the components.
 
 ## Usage before NativeScript 6.1
 
 In order to use the 2.0 beta theme before {N} 6.1, you will also need to include a small JS file in your project:
 
 ```javascript
-import "nativescript-theme-core";
+import "@nativescript/theme";
 ```
 
-This JS takes care of updating several classes on the app root elements, something that got 
+This JS takes care of updating several classes on the app root elements, something that got
 [included in tns-core-modules](https://github.com/NativeScript/NativeScript/issues/7313) in {N} 6.1.
 
 ## Setting Dark or Light mode
 
-Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and 
-set `.ns-dark` class to it - this will change all colorization to dark tones. For instance, if your page root is 
+Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and
+set `.ns-dark` class to it - this will change all colorization to dark tones. For instance, if your page root is
 RadSideDrawer, just add a class to it, like this:
 
 ```html
@@ -111,16 +111,16 @@ If your root is a frame, you can do this
 <Frame class="ns-dark" defaultPage="root"></Frame>
 ```
 
-For **Angular**, if your root is a `page-router-outlet`, you can set the .ns-dark class on it - it will pass it down to the 
-Frame it renders. 
+For **Angular**, if your root is a `page-router-outlet`, you can set the .ns-dark class on it - it will pass it down to the
+Frame it renders.
 
 ## Setting Dark or Light mode from JavaScript
 
-Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with 
+Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with
 your preferred mode - either Theme.Light or Theme.dark, like this:
 
 ```javascript
-import Theme from "nativescript-theme-core";
+import Theme from "@nativescript/theme";
 
 Theme.setMode(Theme.Dark); // Or Theme.Light
 ```
@@ -129,7 +129,7 @@ Additionally there is another helper method - toggleMode, which can be used with
 or with a boolean parameter to ensure light or dark mode is set:
 
 ```javascript
-import Theme from "nativescript-theme-core";
+import Theme from "@nativescript/theme";
 
 Theme.toggleMode(); // to toggle between the modes
 
@@ -145,28 +145,28 @@ Due to limitation in Playground the JS Theme API cannot be imported like an ES6
 have to resort to requiring it:
 
 ```javascript
-const Theme = require("nativescript-theme-core");
+const Theme = require("@nativescript/theme");
 
 Theme.setMode(Theme.Dark); // Or Theme.Light
 ```
 
 ## More root classes
 
 In addition to `.ns-light` and `.ns-dark` classes, the theme's little JavaScript file introduces `.ns-root` on the root element,
-`.ns-android/.ns-ios` depending on the current platform (which the theme extensively uses) and additionally 
-`.ns-portrait/.ns-landscape` and `.ns-phone/.ns-tablet`, which should be self-explanatory. 
-Of course `.ns-portrait/.ns-landscape` get updated on orientation change, so you can use it to show a two pane layout 
-in landscape, for instance. 
+`.ns-android/.ns-ios` depending on the current platform (which the theme extensively uses) and additionally
+`.ns-portrait/.ns-landscape` and `.ns-phone/.ns-tablet`, which should be self-explanatory.
+Of course `.ns-portrait/.ns-landscape` get updated on orientation change, so you can use it to show a two pane layout
+in landscape, for instance.
 
-The newest addition is `.ns-statusbar-transparent` since 2.0.4 - add this class to your root element, if you have enabled 
-transparent status bar in the OS and your ActionBar gets underneath it. 
+The newest addition is `.ns-statusbar-transparent` since 2.0.4 - add this class to your root element, if you have enabled
+transparent status bar in the OS and your ActionBar gets underneath it.
 
-> Keep in mind that **Android APIs before 21** don't support transparent status bars and this will result 
+> Keep in mind that **Android APIs before 21** don't support transparent status bars and this will result
 in an undesired top ActionBar padding!
 
 ## Using Theme variables
 
-There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using 
+There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using
 SASS/SCSS.
 
 If you need to access specific theme variables like simple colors or sizes, do it through the `const` function:
@@ -176,7 +176,7 @@ Button {
     background-color: const(forest);
     height: const(btn-height);
 }
-``` 
+```
 
 You can get light/dark colors:
 
@@ -206,13 +206,13 @@ Button {
 }
 ```
 
-The above example uses the contrasted function to check the contrast level of the background and adjust the lightness of 
+The above example uses the contrasted function to check the contrast level of the background and adjust the lightness of
 the accent color according to it.
 
 ## CSS variables
 
-Since 2.0.17 beta, the Theme now exports all its internal variables to CSS ones in the .ns-root and .ns-modal classes. 
-This is also done for Kendo based skins. You can use them to inherit your styles from the Theme. 
+Since 2.0.17 beta, the Theme now exports all its internal variables to CSS ones in the .ns-root and .ns-modal classes.
+This is also done for Kendo based skins. You can use them to inherit your styles from the Theme.
 A list of the supported CSS variables follows:
 
 | Simple Colors | Constants | Light Colors | Dark Colors |
@@ -252,14 +252,14 @@ Use them like this:
 }
 ```
 
-For now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned 
-for after HSL color support comes in NativeScript 6.2. 
+For now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned
+for after HSL color support comes in NativeScript 6.2.
 
 ## Kendo UI ThemeBuilder support
 
 The theme now supports inheriting the [Kendo UI ThemeBuilder](https://themebuilder.telerik.com/) theme variables. Just head
-there, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS 
-that you can use to style your web app, and `variables.scss` - the one you need for your NativeScript theme. It will look 
+there, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS
+that you can use to style your web app, and `variables.scss` - the one you need for your NativeScript theme. It will look
 something like this:
 
 ```scss
@@ -294,27 +294,27 @@ Take this file, add the following under it:
 // Uncomment this row, if you target compat styling:
 // $compat: true;
 
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
 ```
 
 And load the file after your core theme. It should just work&trade;. If it doesn't - head for the issues section.
 
 ## Theme classes and compatibility
 
-The old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world - 
+The old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world -
 if you want to use them, you should load them separately, like this:
 
 ```scss
-@import "~nativescript-theme-core/core.compat";
-@import "~nativescript-theme-core/blue.compat";
+@import "~@nativescript/theme/core.compat";
+@import "~@nativescript/theme/blue.compat";
 ```
 
 There might be bugs with these in the beta, you might want to hold off upgrading if you want to use the old classes.
 
 As of 2.0, the theme now utilizes a simplified BEM approach for the new element classes, that might be needed here or there.
-For instance, the buttons need `.-primary` and `.-outline` modifiers, instead of the old `.btn-primary` and 
-`.btn-outline` classes. All element classes (which are not needed by default, except if you want to style a component 
-to look like another one) are namespaced, so for instance a button is `.nt-button`, an action bar is `.nt-action-bar` and a ListView is 
+For instance, the buttons need `.-primary` and `.-outline` modifiers, instead of the old `.btn-primary` and
+`.btn-outline` classes. All element classes (which are not needed by default, except if you want to style a component
+to look like another one) are namespaced, so for instance a button is `.nt-button`, an action bar is `.nt-action-bar` and a ListView is
 `.nt-list-view`.
 
 ## Should I use sass or node-sass
@@ -333,13 +333,13 @@ Theme 2.0 is developed using SASS. The NPM package used was sass (formerly dart-
 ## Why Beta
 
 * Firstly, we want to gather feedback from the community and create a theme that is useful and if possible - beautiful.
-* Secondly, the theme needs the classes inside the core modules to work properly without loading additional JavaScript 
+* Secondly, the theme needs the classes inside the core modules to work properly without loading additional JavaScript
 (this is now released with {N} 6.1).
-* And thirdly - {N} core modules should have a way to propagate OS theme changes inside the app, so that it can act accordingly 
+* And thirdly - {N} core modules should have a way to propagate OS theme changes inside the app, so that it can act accordingly
 (planned for {N} 6.2).
 
-The theme is relatively stable, try the latest version [![npm](https://img.shields.io/npm/v/nativescript-theme-core?label=%20&style=flat-square)](https://www.npmjs.com/package/nativescript-theme-core)
-and report if you notice problems. 
+The theme is relatively stable, try the latest version [![npm](https://img.shields.io/npm/v/@nativescript/theme?label=%20&style=flat-square)](https://www.npmjs.com/package/@nativescript/theme)
+and report if you notice problems.
 
 ## Screenshots
 
@@ -371,7 +371,7 @@ If you’d like to toggle the color scheme from light to dark, open the sidedraw
 
 **IMPORTANT**: Always make sure you have run the demo app in iOS or Android to verify any changes as well as ensure the latest `css` has been built before doing the following:
 
-* Bump version in `nativescript-theme-core.json`
+* Bump version in `package.json`
 * Adjust `nativescript-theme-core.md` if any changes to the published `README` are needed.
 
 ```
diff --git a/app-compat/app.js b/app-compat/app.js
@@ -4,7 +4,7 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 import * as app from "tns-core-modules/application";
-import "nativescript-theme-core";
+import "@nativescript/theme";
 
 export function fonticon(value) {
     if (value) {
diff --git a/app-compat/app.scss b/app-compat/app.scss
@@ -1,7 +1,7 @@
 // Import the theme’s variables. If you’re using a color scheme
 // other than “light”, switch the path to the alternative scheme,
-// for example '~nativescript-theme-core/scss/dark'.
-@import '~nativescript-theme-core/core.compat';
+// for example '~@nativescript/theme/scss/dark'.
+@import '~@nativescript/theme/core.compat';
 
 @import '~/assets/css/font-awesome.scss';
 
diff --git a/app-compat/pages/themes.js b/app-compat/pages/themes.js
@@ -1,7 +1,7 @@
 import { BaseModel } from "./base";
 import themes from "nativescript-themes";
 import * as application from "tns-core-modules/application";
-import { ClassList } from "nativescript-theme-core";
+import { ClassList } from "@nativescript/theme";
 
 const currentTheme = {
     theme: "core.light",
@@ -74,7 +74,7 @@ export class ThemesModel extends BaseModel {
         import(
             /*  webpackMode: "lazy",
                 webpackExclude: /\/scss\/|index.d.ts|index.js/ */
-            `nativescript-theme-core/${currentTheme.skin}`)
+            `@nativescript/theme/${currentTheme.skin}`)
             .then((skinStyles) => this._applyStyles(skinStyles, `${currentTheme.skin}`));
     }
 
diff --git a/app/app.js b/app/app.js
@@ -4,7 +4,7 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 import * as app from "tns-core-modules/application";
-import "nativescript-theme-core";
+import "@nativescript/theme";
 
 export function fonticon(value) {
     if (value) {
diff --git a/app/app.scss b/app/app.scss
@@ -1,7 +1,7 @@
 // Import the theme’s variables. If you’re using a color scheme
 // other than “light”, switch the path to the alternative scheme,
-// for example '~nativescript-theme-core/scss/dark'.
-@import '~nativescript-theme-core/core';
+// for example '~@nativescript/theme/scss/dark'.
+@import '~@nativescript/theme/core';
 
 @import '~/assets/css/font-awesome.scss';
 
diff --git a/app/bootstrap-based.scss b/app/bootstrap-based.scss
@@ -5,13 +5,13 @@
  * Licensed under Apache 2.0 (https://github.com/NativeScript/theme/blob/master/LICENSE)
  */
 
-@import '~nativescript-theme-core/scss/variables';
+@import '~@nativescript/theme/scss/variables';
 
 // Variables form bootstrap v4 dependency
 @import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
 
 // Import bootstrap map to apply variable mapping
-@import '~nativescript-theme-core/scss/bootstrap/map';
+@import '~@nativescript/theme/scss/bootstrap/map';
 
 // Import theme
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
diff --git a/app/customized.scss b/app/customized.scss
@@ -8,7 +8,7 @@
 // Theme variables customizations
 
 // Core variables
-@import '~nativescript-theme-core/scss/variables';
+@import '~@nativescript/theme/scss/variables';
 
 // Colors
 $focus: #09A52e;
@@ -27,4 +27,4 @@ $background-alt-10: #0AC16E;
 $btn-color-disabled: #CCC4C9;
 
 // Core styles
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
diff --git a/app/kendo-bootstrap.scss b/app/kendo-bootstrap.scss
@@ -21,4 +21,4 @@ $series-d: #f0ad4e;
 $series-e: #e67d4a;
 $series-f: #d9534f;
 
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
diff --git a/app/kendo-default.scss b/app/kendo-default.scss
@@ -22,4 +22,4 @@ $series-d: #ac3900;
 $series-e: #9bbd73;
 $series-f: #598229;
 
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
diff --git a/app/kendo-material.scss b/app/kendo-material.scss
@@ -6,4 +6,4 @@ $primary-palette-name: blue;
 $secondary-palette-name: pink;
 $theme-type: dark;
 
-@import '~nativescript-theme-core/index';
+@import '~@nativescript/theme/index';
diff --git a/app/pages/themes.js b/app/pages/themes.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/scripts/builder.js b/scripts/builder.js
diff --git a/src/package.json b/src/package.json
diff --git a/webpack.config.js b/webpack.config.js
