docs(ui): overview-examples add

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

@@ -30,7 +30,7 @@ interface State {
 }
 
 /**
- * ApplicationProvider component is designed to be a root of the application.
+ * `ApplicationProvider` component is designed to be a root of the application.
  *
  * This does basically two things:
  * - Provides styles for basic components;
@@ -51,7 +51,7 @@ interface State {
  *
  * @property ThemeProviderProps
  *
- * @example ApplicationProvider API example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';

src/framework/theme/modal/modal.service.tsx

@@ -19,7 +19,7 @@ import { ModalPresentingBased } from '../../ui/support/typings';
  *
  * @method {(identifier: string, children: React.ReactNode) => void} update - Updates component from a modal window.
  *
- * @example Simple Usage example
+ * @example Simple Usage
  *
  * ```
  * import React from 'react';

src/framework/theme/style/style.service.ts

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { ThemedStyleType } from '@eva-design/dss';
 import { StyleType } from './type';
 import { getThemeValue } from '../theme/theme.service';

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

@@ -39,7 +39,7 @@ export interface ContextProps {
 export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps & P>;
 
 /**
- * High Order Function which is used to apply style mapping on component.
+ * `styled` is a High Order Function which is used to apply style mapping on component.
  *
  * Requires component to have `styledComponentName` string property which defines
  * corresponding component name in mapping. (e.g 'Button' for Button component).
@@ -57,7 +57,7 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  *
  * @param Component - Type: {React.ComponentClass}. Determines class or functional component to be styled.
  *
- * @example Declaring Styled Component
+ * @overview-example Declaring Styled Component
  *
  * ```
  * import React from 'react';
@@ -111,7 +111,7 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  * export const StyledButton = styled<StyledButtonProps>(Button);
  * ```
  *
- * @example Styled Component Usage
+ * @overview-example Styled Component Usage
  *
  * ```
  * import React from 'react';

src/framework/theme/style/styleConsumer.service.ts

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import {
   ControlMetaType,
   ControlThemedStyleType,

src/framework/theme/theme/theme.service.ts

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { ThemeType } from './type';
 
 const SYMBOL_REFERENCE: string = '$';

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

@@ -33,7 +33,7 @@ export interface Context {
 export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps & P>;
 
 /**
- * High Order Function which is used to create themed style for non-styled component.
+ * `withStyles` is a High Order Function which is used to create themed style for non-styled component.
  * Basically used when need to use theme variable somewhere.
  * Returns component class which can be used as themed component.
  *
@@ -45,7 +45,7 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  *
  * @param createStyles - Type: {(theme: ThemeType) => any}. Determines arrow function used to create styles.
  *
- * @example Declaring Themed Component
+ * @overview-example Declaring Themed Component
  *
  * ```
  * import React from 'react';
@@ -76,13 +76,13 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  * }));
  * ```
  *
- * @example Themed Component Usage
+ * @overview-example Themed Component Usage
  *
  * ```
  * import React from 'react';
  * import {
- *  ThemedButton,
- *  ThemedButtonProps,
+ *   ThemedButton,
+ *   ThemedButtonProps,
  * } from './path-to/themedButton.component';
  *
  * export const ThemedButtonShowcase = (props?: ThemedButtonProps): React.ReactElement<ThemedButtonProps> => {
@@ -92,6 +92,7 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  * };
  * ```
  */
+
 export const withStyles = <P extends object>(Component: React.ComponentType<P>,
                                              createStyles?: CreateStylesFunction): ThemedComponentClass<P> => {
 

src/framework/theme/theme/themeContext.ts

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import React from 'react';
 import { ThemeType } from './type';
 

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

@@ -26,7 +26,7 @@ export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps;
 export type AvatarElement = React.ReactElement<AvatarProps>;
 
 /**
- * Styled Image component.
+ * `Avatar` is a styled `Image` component.
  *
  * @extends React.Component
  *
@@ -42,7 +42,7 @@ export type AvatarElement = React.ReactElement<AvatarProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -54,6 +54,23 @@ export type AvatarElement = React.ReactElement<AvatarProps>;
  *   );
  * };
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Avatar, AvatarProps } from 'react-native-ui-kitten';
+ *
+ * export const AvatarShowcase = (props?: AvatarProps): React.ReactElement<AvatarProps> => {
+ *   return (
+ *     <Avatar
+ *       source={{uri: 'https://path-to/awesome-image.png'}}
+ *       size='large'
+ *       shape='rounded'
+ *     />
+ *   );
+ * };
+ * ```
  */
 
 export class AvatarComponent extends React.Component<AvatarProps> {

src/framework/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -37,7 +37,7 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component
 export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
 
 /**
- * BottomNavigation component is designed to be a Bottom Tab Bar.
+ * `BottomNavigation` component is designed to be a Bottom Tab Bar.
  * Can be used for navigation.
  *
  * @extends React.Component
@@ -58,7 +58,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -88,7 +88,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * }
  * ```
  *
- * @overview-example Without indicator
+ * @overview-example Without Indicator
  *
  * ```
  * import React from 'react';
@@ -118,7 +118,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @example Inline Styling
  *
  * ```
  * import React, { ReactElement } from 'react';
@@ -137,7 +137,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * };
  * ```
  *
- * @example With React Navigation API and usage example
+ * @example With React Navigation
  *
  * ```
  * import React, { ReactElement } from 'react';

src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx

@@ -40,9 +40,9 @@ export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityPr
 export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabProps>;
 
 /**
- * BottomNavigationTab component is a part of the BottomNavigation component.
- * BottomNavigation tabs should be wrapped in BottomNavigation to provide usable component.
- * See usage examples at BottomNavigation component documentation.
+ * `BottomNavigationTab` component is a part of the `BottomNavigation` component.
+ * `BottomNavigation` tabs should be wrapped in BottomNavigation to provide usable component.
+ * See usage examples at `BottomNavigation` component documentation.
  *
  * @extends React.Component
  *

src/framework/ui/button/button.component.tsx

@@ -42,7 +42,7 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone
 export type ButtonElement = React.ReactElement<ButtonProps>;
 
 /**
- * Styled Button component.
+ * Styled `Button` component.
  *
  * @extends React.Component
  *
@@ -70,7 +70,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -93,7 +93,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  * };
  * ```
  *
- * @overview-example Eva-related props using example
+ * @overview-example Eva Styling
  *
  * ```
  * import React from 'react';
@@ -119,27 +119,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  * };
  * ```
  *
- * @example Inline styling example
- *
- * ```
- * import React from 'react';
- * import {
- *   Button,
- *   ButtonProps,
- * } from 'react-native-ui-kitten';
- *
- * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement<ButtonProps> => {
- *   return (
- *     <Button
- *       style={styles.button}
- *       textStyle={styles.buttonText}>
- *       BUTTON
- *     </Button>
- *   );
- * };
- * ```
- *
- * @example Button with Icon usage example
+ * @example Inline Styling with Icon
  *
  * ```
  * import React from 'react';
@@ -155,14 +135,18 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * const ButtonIcon = (style: ImageStyle): React.ReactElement<ImageProps> => {
  *   return (
- *     <Image style={style} source={{ uri: 'path/to/image' }}/>
+ *     <Image
+ *       style={style}
+ *       source={{ uri: 'path/to/image' }}
+ *     />
  *   );
  * };
  *
  * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement<ButtonProps> => {
  *   return (
  *     <Button
  *       style={styles.button}
+ *       textStyle={styles.buttonText}
  *       icon={ButtonIcon}>
  *       BUTTON
  *     </Button>

src/framework/ui/buttonGroup/buttonGroup.component.tsx

@@ -30,7 +30,7 @@ export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps
 export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
 
 /**
- * Renders a group of buttons.
+ * Renders a group of `Buttons`.
  *
  * @extends React.Component
  *
@@ -51,7 +51,7 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  *
  * @property StyledComponentProps
  *
- * @example ButtonGroup usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -67,6 +67,25 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  *   );
  * };
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Button, ButtonGroup, ButtonGroupProps } from 'react-native-ui-kitten';
+ *
+ * export const ButtonGroupShowcase = (props?: ButtonGroupProps): React.ReactElement<ButtonGroupProps> => {
+ *   return (
+ *     <ButtonGroup
+ *       size='large'
+ *       status='warning'>
+ *       <Button>Left</Button>
+ *       <Button>Mid</Button>
+ *       <Button>Right</Button>
+ *     </ButtonGroup>
+ *   );
+ * };
+ * ```
  */
 
 class ButtonGroupComponent extends React.Component<ButtonGroupProps> {