refactor(docs): hoc docs and doc-app refactor (#389)

docs/src/app/@theme/services/tabbed.service.ts

@@ -45,6 +45,10 @@ export class NgdTabbedService {
     return component.types && component.types.length > 0;
   }
 
+  componentHasParams(component: any): boolean {
+    return component.params && component.params.length > 0;
+  }
+
   componentHasMethods(component): boolean {
     return component &&
       component.methods &&

docs/src/app/blocks/blocks.module.ts

@@ -31,6 +31,7 @@ import {
   NgdPagerBlockComponent,
   NgdComponentsOverviewBlockComponent,
   NgdTypesBlockComponent,
+  NgdHocParamsBlockComponent,
 } from './components/';
 
 const blocks = [
@@ -55,6 +56,7 @@ const blocks = [
   NgdPagerBlockComponent,
   NgdComponentsOverviewBlockComponent,
   NgdTypesBlockComponent,
+  NgdHocParamsBlockComponent,
 ];
 
 @NgModule({

docs/src/app/blocks/components/api-block/api-block.component.ts

@@ -20,6 +20,7 @@ import { NgdTabbedService } from '../../../@theme/services';
         <ngd-types-block [source]="source" *ngIf="hasTypes(source)"></ngd-types-block>
         <ngd-props-block [source]="source" *ngIf="hasProps(source)"></ngd-props-block>
         <ngd-methods-block [source]="source" *ngIf="hasMethods(source)"></ngd-methods-block>
+        <ngd-hoc-params-block [source]="source" *ngIf="hasParams(source)"></ngd-hoc-params-block>
       </nb-card-body>
     </nb-card>
   `,
@@ -44,4 +45,8 @@ export class NgdApiBlockComponent {
   hasTypes(component): boolean {
     return this.tabbedService.componentHasTypes(component);
   }
+
+  hasParams(component: any): boolean {
+    return this.tabbedService.componentHasParams(component);
+  }
 }

docs/src/app/blocks/components/hoc-params-block/hoc-params-block.component.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+import { NgdMetadataService } from '../../../@theme/services';
+
+@Component({
+  selector: 'ngd-hoc-params-block',
+  template: `
+    <ngd-prop-block *ngIf="params.length > 0"
+                    [properties]="params"
+                    name="Parameters"
+                    [slag]="slag"
+                    class="widget-block">
+    </ngd-prop-block>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgdHocParamsBlockComponent {
+  slag: string;
+
+  params: any[] = [];
+
+  @Input('source')
+  set setSource(source: any) {
+    this.params = source.params;
+    this.slag = source.slag;
+  }
+
+  constructor(private metadataService: NgdMetadataService) {
+  }
+}

docs/src/app/blocks/components/index.ts

@@ -19,3 +19,4 @@ export * from './examples-block/examples-block.component';
 export * from './pager-block/pager-block.component';
 export * from './components-overview-block/components-overview-block.component';
 export * from './types-block/types-block.component';
+export * from './hoc-params-block/hoc-params-block.component';

docs/src/app/blocks/components/overview-block/overview-block.component.ts

@@ -31,22 +31,7 @@ export class NgdOverviewBlockComponent {
 
   @Input('source')
   set setSource(source: any) {
-    this.source = this.prepareDescription(source);
+    this.source = source;
   }
 
-  private prepareDescription(source: any): any {
-    const description: string = source.description;
-    source.description = description
-      .replace(/./g, (character: string, index: number) => {
-        if (index === description.indexOf('`')) {
-          return '<code>';
-        } else if (index === description.lastIndexOf('`')) {
-          return '</code>';
-        } else {
-          return character;
-
-        }
-      });
-    return source;
-  }
 }

docs/src/guides/theme-switching.md

@@ -0,0 +1,55 @@
+# React Native UI Kitten Theme Switching
+
+React Native UI Kitten Theme System allows the developer to change the theme.
+To do this, it is enough to replace the configuration object of the `theme` and pass it
+through the property into the `ApplicationProvider`.
+
+<hr>
+
+### Changing Theme Example
+
+```tsx
+import { mapping } from '@eva/eva';
+import { theme } from '@eva/theme-eva';
+import { customTheme } from './path-to/custom-theme;
+import {
+  ApplicationProvider,
+  ThemeType,
+} from '@kitten/theme';
+import { Application } from './path-to/root.component';
+
+interface AppState {
+  theme: ThemeType;
+}
+
+export default class App extends React.Component<any, State> {
+
+  public state: State = {
+    theme: theme,
+  };
+
+  private changeTheme = (): void => {
+    this.setState({ theme: customTheme });
+  }
+
+  public render(): React.ReactNode {
+    return (
+      <ApplicationProvider
+        mapping={mapping}
+        theme={theme}>
+        <Application/>
+      </ApplicationProvider>
+    );
+  }
+}
+```
+
+<hr>
+
+### Other theme management options
+
+This is not the only way to change the `theme` of the application. It is also possible to use one of the libraries that provide state management services, such as:
+
+- [MobX](https://mobx.js.org/getting-started.html)
+- [Redux](https://redux.js.org/)
+

docs/src/structure.ts

@@ -75,6 +75,17 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Theme Switching',
+        children: [
+          {
+            type: 'block',
+            block: 'markdown',
+            source: 'theme-switching.md',
+          },
+        ],
+      },
     ],
   },
   {
@@ -91,6 +102,34 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'group',
+        name: 'Styling & Theming',
+      },
+      {
+        type: 'tabs',
+        name: 'ApplicationProvider',
+        icon: 'layout.svg',
+        source: [
+          'ApplicationProvider',
+        ],
+      },
+      {
+        type: 'tabs',
+        name: 'styled',
+        icon: 'layout.svg',
+        source: [
+          'styled',
+        ],
+      },
+      {
+        type: 'tabs',
+        name: 'withStyles',
+        icon: 'layout.svg',
+        source: [
+          'withStyles',
+        ],
+      },
       {
         type: 'group',
         name: 'Global',
@@ -171,6 +210,14 @@ export const structure = [
           'Radio',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'RadioGroup',
+        icon: 'radio.svg',
+        source: [
+          'RadioGroup',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Toggle',

src/framework/theme/application/applicationProvider.component.tsx

@@ -33,20 +33,20 @@ interface State {
  * The `ApplicationProvider` component is designed to be a root of the application.
  *
  * This does basically two things:
- * - Provides styles for react-native-ui-kitten basic components (e.g `Button`);
+ * - Provides styles for react-native-ui-kitten basic components (e.g 'Button');
  * - Renders modal window which is used to be common for all elements presented as modal;
  *
  * @extends React.Component
  *
  * @property {SchemaType} mapping - Determines the mapping for basic components.
- * This is designed to be provided by developers team and can be imported from npm package (e.g `@eva/eva`).
+ * This is designed to be provided by developers team and can be imported from npm package (e.g. `@eva/eva`).
  *
  * @property {CustomSchemaType} customMapping - Determines the customization mapping.
  * This is merged with `mapping` property and designed to be used components customization.
  * Optional.
  *
  * @property {ThemeType} theme - Determines the theme for basic components.
- * This is designed to be provided by developers team and can be imported from npm package (e.v `@eva/theme-eva`).
+ * This is designed to be provided by developers team and can be imported from npm package (e.g. `@eva/theme-eva`).
  *
  * @property {React.ReactNode} children - Determines application root component.
  *

src/framework/theme/style/styleConsumer.component.tsx

@@ -43,17 +43,19 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  *
  * To be styled, source component class should have static `styledComponentName` property which defines
  * corresponding component name in `mapping`. (e.g 'Button' for `Button` class).
- *
- * Passes following props to `Component` when it is rendered:
+ * Returns `StyledComponentClass` - component class which can be used as styled component.
  *
  * @property {string} appearance - Determines style appearance of component. Default is provided by mapping.
+ *
  * @property {ThemeType} theme - Determines theme used to style component.
+ *
  * @property {StyleType} themedStyle - Determines component style for it's current state.
+ *
  * @property {(interaction: Interaction[]) => void} - Determines function
  * for dispatching current state of component. This is designed to be used as style request function.
  * Calls component re-render if style for requested state differ from current.
  *
- * @param {React.ComponentClass} Component - Determines class of component to be styled.
+ * @param Component - Type: {React.ComponentClass}. Determines class of component to be styled.
  *
  * @example Declaring Styled Component
  *
@@ -115,8 +117,8 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  *
  * ```
  * import {
- *  StyledButton,
- *  StyledButtonProps,
+ *   StyledButton,
+ *   StyledButtonProps,
  * } from './path-to/styledButton.component';
  *
  * public render(): React.ReactElement<StyledButtonProps> {
@@ -125,8 +127,6 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  *   );
  * }
  * ```
- *
- * @returns {StyledComponentClass} - component class which can be used as styled component
  */
 export const styled = <P extends object>(Component: React.ComponentClass<P>): StyledComponentClass<P> => {
 

src/framework/theme/theme/themeConsumer.component.tsx

@@ -33,14 +33,15 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
 /**
  * The `withStyles` function is a High Order Function which is used to create themed style for non-styled component.
  * Basically used when need to use `theme` variables somewhere.
- *
- * Passes following props to `Component` when it is rendered:
+ * Returns `ThemedComponentClass` - component class which can be used as styled component.
  *
  * @property {ThemeType} theme - Determines theme used to style component.
+ *
  * @property {StyleType} themedStyle - Determines component style for it's current state.
  *
- * @param {React.ComponentClass} Component - Determines class of component to be themed
- * @param {(theme: ThemeType) => any} createStyles - Determines arrow function used to create styles
+ * @param Component - Type: {React.ComponentClass}. Determines class of component to be themed.
+ *
+ * @param createStyles - Type: {(theme: ThemeType) => any}. Determines arrow function used to create styles.
  *
  * @example Declaring Themed Component
  *
@@ -88,8 +89,6 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  *   );
  * }
  * ```
- *
- * @returns {ThemedComponentClass} - component class which can be used as styled component
  */
 export const withStyles = <P extends object>(Component: React.ComponentClass<P>,
                                              createStyles?: CreateStylesFunction): ThemedComponentClass<P> => {

src/framework/ui/avatar/avatar.component.tsx

@@ -42,12 +42,12 @@ export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps;
  *
  * @property StyledComponentProps
  *
- * @example Avatar API example
+ * @example Avatar API and usage example
  *
  * ```
  * import {
- *  Avatar,
- *  AvatarProps,
+ *   Avatar,
+ *   AvatarProps,
  * } from '@kitten/ui';
  *
  * public render(): React.ReactElement<AvatarProps> {