akveo · artyorsh · Apr 8, 2020 · Feb 28, 2020 · Feb 28, 2020 · Feb 28, 2020
diff --git a/babel.config.js b/babel.config.js
@@ -1,38 +1,6 @@
-const path = require('path');
-
-/**
- * UI Kitten modules aliases (needed for Jest resolver)
- */
-const moduleAliases = {
-  '@ui-kitten/components': path.resolve(__dirname, './src/components'),
-  '@ui-kitten/eva-icons': path.resolve(__dirname, './src/eva-icons'),
-  '@ui-kitten/moment': path.resolve(__dirname, './src/moment'),
-  '@ui-kitten/date-fns': path.resolve(__dirname, './src/date-fns'),
-};
-
-const moduleInternalAliases = {
-  '@kitten/theme': path.resolve(__dirname, './src/components/theme'),
-  '@kitten/ui': path.resolve(__dirname, './src/components/ui'),
-};
-
-const moduleResolverConfig = {
-  root: path.resolve('./'),
-  alias: {
-    ...moduleAliases,
-    ...moduleInternalAliases,
-  },
-};
-
-const presets = [
-  'module:metro-react-native-babel-preset',
-];
-
-const plugins = [
-  ['module-resolver', moduleResolverConfig],
-];
-
-module.exports = function(api) {
-  api.cache(true);
-  return { presets, plugins };
+module.exports = {
+  presets: [
+    'module:metro-react-native-babel-preset',
+  ],
 };
 
diff --git a/docs/src/app/@theme/services/highlight.service.ts b/docs/src/app/@theme/services/highlight.service.ts
@@ -5,6 +5,6 @@ import * as hljs from 'highlight.js';
 export class NgdHighlightService {
 
   public highlight(code: string): string {
-    return hljs.highlightAuto(code, ['ts', 'html', 'scss', 'nginx']).value;
+    return hljs.highlightAuto(code, ['js', 'jsx', 'ts', 'tsx', 'json']).value;
   }
 }
diff --git a/docs/src/app/@theme/services/structure.service.ts b/docs/src/app/@theme/services/structure.service.ts
@@ -150,6 +150,8 @@ export class NgdStructureService {
     return {
       id: example.description,
       name: example.description.split(/(?=[A-Z])/).join(' '),
+      description: example.description,
+      shortDescription: example.shortDescription,
       files: [{
         path: helper.path,
         code: helper.code,

diff --git a/docs/src/app/blocks/components/code-block/code-block.component.scss b/docs/src/app/blocks/components/code-block/code-block.component.scss
@@ -9,7 +9,7 @@
     display: flex;
     padding: 0;
     font-size: 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     background: $code-block-bg;
     overflow-x: auto;
 

diff --git a/docs/src/app/blocks/components/live-example-block/live-example-block.component.html b/docs/src/app/blocks/components/live-example-block/live-example-block.component.html
@@ -12,12 +12,6 @@
     </button>
   </div>
 </section>
-<span
-  class="caption-2 title-caption"
-  nbTooltipPlacement="top"
-  nbTooltip="Rendering of React Native components in a web browser is an experimental feature and may contain issues.">
-  <nb-icon icon="alert-triangle"></nb-icon>  Experimental Preview
-</span>
 <div class="iframe-container">
   <iframe #iframe *ngIf="content.id" [style.height.px]="iframeHeight" [class.loading]="loading"></iframe>
 </div>

diff --git a/docs/src/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/src/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -6,7 +6,7 @@
   // colors
   $action-bg: white;
   $action-fg: nb-theme(color-fg-heading-light);
-  $block-bg-default: #edf0f4;
+  $block-bg-default: nb-theme(background-basic-color-3);
   $block-bg-cosmic: #1b1b38;
   $block-fg-cosmic: #e8e9fa;
   $block-bg-corporate: #edf0f4;
@@ -16,15 +16,15 @@
   display: flex;
   flex-direction: column;
   padding: 0.5rem 1rem 2.5rem 1.5rem;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
   position: relative;
 
   .header {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 1.875rem;
+    margin-bottom: 1rem;
   }
 
   .title-caption {
@@ -62,7 +62,7 @@
 
   .action-item {
     background-color: $action-bg;
-    border-radius: 0.375rem;
+    border-radius: 0.25rem;
     height: 100%;
     line-height: 1;
     border: none;

diff --git a/docs/src/app/blocks/components/overview-example-block/overview-example-block.component.ts b/docs/src/app/blocks/components/overview-example-block/overview-example-block.component.ts
@@ -13,7 +13,9 @@ import {
 @Component({
   selector: 'ngd-overview-example',
   template: `
-    <h5 style="margin-top: 2rem">{{title}}:</h5>
+    <td>
+      <div *ngIf="title" ngdDescription>{{title}}</div>
+    </td>
     <ngd-code-block [code]="code"></ngd-code-block>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +27,8 @@ export class NgdOverviewExampleBlock {
 
   @Input('example')
   set example(value) {
-    this.code = value.code.replace(/```/g, '');
-    this.title = value.description;
+    this.code = value.code.replace(/```/g, '')
+                     .replace(/^\s+|\s+$/g, '');
+    this.title = value.shortDescription;
   }
 }
diff --git a/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts b/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts
@@ -20,6 +20,9 @@ export const pulse = animation(
   selector: 'ngd-stacked-example-block',
   template: `
     <div *ngIf="isLiveExample">
+      <td>
+        <div *ngIf="content.shortDescription" ngdDescription>{{ content.shortDescription }}</div>
+      </td>
       <ngd-live-example-block [hidden]="!isLive"
                               [@exampleState]="isLive ? 'live': 'code'"
                               [content]="content"

diff --git a/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html b/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html
@@ -7,7 +7,7 @@
 </button>
 
 <nb-tabset class="tabs-container">
-  <nb-tab *ngFor="let example of examples" tabTitle="{{ example.extension }}" [active]="example.active">
+  <nb-tab *ngFor="let example of examples" tabTitle="Code" [active]="example.active">
     <ngd-code-block [code]="example.code"></ngd-code-block>
   </nb-tab>
 </nb-tabset>
diff --git a/docs/src/app/documentation/page/page.component.scss b/docs/src/app/documentation/page/page.component.scss
@@ -11,7 +11,8 @@
   $settings-margin: nb-theme(settings-col-margin);
   $heading-light: nb-theme(color-fg-heading-light);
   $code-bg: #f1f2f3;
-  $code-fg: nb-theme(color-info-500);
+  $code-bg: nb-theme(background-basic-color-3);
+  $code-fg: nb-theme(color-primary-500);
   $code-block-bg: nb-theme(code-block-bg);
   $table-head-fg: #8994a3;
   $table-border: 1px solid #f1f2f3;
@@ -98,7 +99,7 @@
       ::ng-deep {
         .widget-block {
           display: block;
-          margin-bottom: 2rem;
+          margin: 2rem 0 2rem;
         }
 
         ngd-styles-table-block table {

diff --git a/docs/src/articles/design-system/custom-mapping.md b/docs/src/articles/design-system/custom-mapping.md
@@ -61,23 +61,21 @@ And pass it to an `ApplicationProvider` component:
 
 ```js
 import React from 'react';
+import * as eva from '@eva-design/eva';
 import { ApplicationProvider, Layout } from '@ui-kitten/components';
-import { mapping, light as lightTheme } from '@eva-design/eva';
 import { default as customMapping } from './path-to/custom-mapping.json'; // <-- Import custom mapping
 import CircleButton from './path-to/CircleButton'; // <-- Import custom component
 
-const App = () => (
-  <ApplicationProvider 
-    mapping={mapping}
+export default () => (
+  <ApplicationProvider
+    {...eva}
     customMapping={customMapping}
-    theme={lightTheme}>
+    theme={eva.light}>
     <Layout style={{padding: 64, alignItems: 'center'}}>
       <CircleButton />
     </Layout>
   </ApplicationProvider>
 );
-
-export default App;
 ```
 
 <hr>
@@ -175,23 +173,21 @@ What we did is that we added a rounded [variant](design-system/design-system-glo
 
 ```js
 import React from 'react';
+import * as eva from '@eva-design/eva';
 import { ApplicationProvider, Layout } from '@ui-kitten/components';
-import { mapping, light as lightTheme } from '@eva-design/eva';
 import { default as customMapping } from './path-to/custom-mapping.json';
 import CircleButton from './path-to/CircleButton';
 
-const App = () => (
-  <ApplicationProvider 
-    mapping={mapping}
+export default () => (
+  <ApplicationProvider
+    {...eva}
     customMapping={customMapping}
-    theme={lightTheme}>
+    theme={eva.light}>
     <Layout style={{padding: 64, alignItems: 'center'}}>
       <CircleButton shape='rounded'/> // <-- Apply `rounded` shape variant
     </Layout>
   </ApplicationProvider>
 );
-
-export default App;
 ```
 
 And this is how it looks:

diff --git a/docs/src/articles/design-system/customize-mapping.md b/docs/src/articles/design-system/customize-mapping.md
@@ -144,19 +144,18 @@ The only thing we have to do is to pass our custom mapping to an `ApplicationPro
 
 ```js
 import React from 'react';
+import * as eva from '@eva-design/eva';
 import { ApplicationProvider } from '@ui-kitten/components';
-import { mapping, light as lightTheme } from '@eva-design/eva';
 import { default as customMapping } from './path-to/custom-mapping.json'; // <-- import custom mapping
 
-const App = () => (
+export default () => (
   <ApplicationProvider 
-    mapping={mapping}
+    {...eva}
     customMapping={customMapping} // <-- apply custom mapping
-    theme={lightTheme}>
+    theme={eva.light}>
   </ApplicationProvider>
 );
 
-export default App;
 ```
 
 Here we are. Now the default `backgroundColor` of a Button should be `pink`. Here is a result

diff --git a/docs/src/articles/getting-started/what-is-ui-kitten.md b/docs/src/articles/getting-started/what-is-ui-kitten.md
@@ -1,6 +1,6 @@
 # What is UI Kitten?
 
-UI Kitten is a customizable React Native UI Library based on <a href="https://hubs.ly/H0n6C-l0">Eva Design System</a> specifications, with 20+ UI components, 2 visual themes, and other supporting modules.
+UI Kitten is a customizable React Native UI Library based on <a href="https://hubs.ly/H0n6C-l0">Eva Design System</a> specifications, with 30+ UI components, 2 visual themes, and other supporting modules.
 <hr>
 
 ## What's included
@@ -10,10 +10,10 @@ UI Kitten is a customizable React Native UI Library based on <a href="https://hu
   - UI Components `@ui-kitten/components`
     - Theme - Light and Dark visual themes, based on Design System.
     - UI Components - high-quality React Native components with no 3rd party dependencies.
+    - Browser support with <a href="https://github.com/necolas/react-native-web" target="_blank">React Native Web</a>.
     - Right-to-left writing system support for all components.
-    - <a href="https://github.com/necolas/react-native-web" target="_blank">React Native Web</a> support.
   - UI Kitten Eva Icons `@ui-kitten/eva-icons`
-    - <a href="https://hubs.ly/H0n6Df20">Eva Icons</a> is a pack of more than 480 beautifully crafted icons. This module runs it in React Native
+    - <a href="https://hubs.ly/H0n6Df20">Eva Icons</a> is a pack of more than 480 beautifully crafted icons. This module runs it in React Native, adopting for better usage with UI Kitten components.
   - UI Kitten Moment `@ui-kitten/moment`
   - UI Kitten date-fns `@ui-kitten/date-fns`
     - Modules allowing UI Kitten components to work with dates with help most popular date libraries. 

diff --git a/docs/src/articles/getting-started/where-to-start.md b/docs/src/articles/getting-started/where-to-start.md
@@ -1,15 +1,12 @@
 # Where to start?
 
-UI Kitten is a framework of UI components powered by Eva Design System for your next <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a> application. Despite it is not required to know React Native framework to set up your first React Native UI Kitten project, it is highly recommended to go through the React Native tutorial beforehand and be familiar with basic React Native concepts.
+UI Kitten is a framework of UI components powered by Eva Design System for your next <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a> application. Despite it is not required to know React Native framework to set up your first UI Kitten project, it is highly recommended to go through the React Native tutorial beforehand and be familiar with basic React Native concepts.
 <hr>
 
 ## Quick start tutorials
 
-- **[Start a new App](guides/getting-started#new-apps)** 
-
-This tutorial explains how to setup React Native app with UI Kitten from a scratch.
-
-- **[Install into existing App](guides/getting-started#manual-installation)**
+- [Start a new App](guides/getting-started#new-apps) with a single command from a terminal.
+- [Install into existing App](guides/getting-started#manual-installation). Already run some code? No problem.
 
 Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first.