From 5b7cdeb7f438cfc82e63246d6beda4b85f031fe2 Mon Sep 17 00:00:00 2001 From: Yauhen Date: Wed, 17 Jul 2019 19:34:43 +0300 Subject: [PATCH] feat(docs): overview-examples handling add --- docs/src/app/@theme/styles/styles.scss | 1 + docs/src/app/blocks/blocks.module.ts | 4 ++ .../code-block/code-block.component.scss | 6 ++ docs/src/app/blocks/components/index.ts | 1 + .../overview-block.component.ts | 6 +- .../overview-example-block.component.ts | 31 ++++++++++ package-lock.json | 47 +++++---------- package.json | 2 +- src/framework/ui/button/button.component.tsx | 59 ++++++++++++++++++- src/framework/ui/modal/modal.component.tsx | 2 +- 10 files changed, 122 insertions(+), 37 deletions(-) create mode 100644 docs/src/app/blocks/components/overview-example-block/overview-example-block.component.ts diff --git a/docs/src/app/@theme/styles/styles.scss b/docs/src/app/@theme/styles/styles.scss index 748220546..687fa6744 100644 --- a/docs/src/app/@theme/styles/styles.scss +++ b/docs/src/app/@theme/styles/styles.scss @@ -19,6 +19,7 @@ @include nb-select-theme(); @include nb-input-theme(); @include nb-overlay-theme(); + @include nb-radio-theme(); @include nb-typography(); diff --git a/docs/src/app/blocks/blocks.module.ts b/docs/src/app/blocks/blocks.module.ts index 372fb0e59..6ffb2582b 100644 --- a/docs/src/app/blocks/blocks.module.ts +++ b/docs/src/app/blocks/blocks.module.ts @@ -32,7 +32,9 @@ import { NgdComponentsOverviewBlockComponent, NgdTypesBlockComponent, NgdHocParamsBlockComponent, + NgdOverviewExampleBlock, } from './components/'; +import { NbRadioModule } from '@nebular/theme'; const blocks = [ NgdMdBLockComponent, @@ -57,6 +59,7 @@ const blocks = [ NgdComponentsOverviewBlockComponent, NgdTypesBlockComponent, NgdHocParamsBlockComponent, + NgdOverviewExampleBlock, ]; @NgModule({ @@ -64,6 +67,7 @@ const blocks = [ CommonModule, RouterModule, NgdThemeModule, + NbRadioModule, ], declarations: [ ...blocks, 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 index 3c9a4d9fb..32a2efc5d 100644 --- a/docs/src/app/blocks/components/code-block/code-block.component.scss +++ b/docs/src/app/blocks/components/code-block/code-block.component.scss @@ -13,6 +13,12 @@ background: $code-block-bg; overflow-x: auto; + .language { + position: absolute; + right: 0.5rem; + top: 4rem; + } + .lines { display: flex; flex-direction: column; diff --git a/docs/src/app/blocks/components/index.ts b/docs/src/app/blocks/components/index.ts index 1fdce1ffc..b4821da04 100644 --- a/docs/src/app/blocks/components/index.ts +++ b/docs/src/app/blocks/components/index.ts @@ -20,3 +20,4 @@ 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'; +export * from './overview-example-block/overview-example-block.component'; diff --git a/docs/src/app/blocks/components/overview-block/overview-block.component.ts b/docs/src/app/blocks/components/overview-block/overview-block.component.ts index 607a99bae..ac36460d5 100644 --- a/docs/src/app/blocks/components/overview-block/overview-block.component.ts +++ b/docs/src/app/blocks/components/overview-block/overview-block.component.ts @@ -19,6 +19,10 @@ import {
+ + `assets/images/overview/${image}`); return source; } 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 new file mode 100644 index 000000000..b8cbf8154 --- /dev/null +++ b/docs/src/app/blocks/components/overview-example-block/overview-example-block.component.ts @@ -0,0 +1,31 @@ +/** + * @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'; + +@Component({ + selector: 'ngd-overview-example', + template: ` +
{{title}}:
+ + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NgdOverviewExampleBlock { + + code: any; + title: string; + + @Input('example') + set example(value) { + this.code = value.code.replace(/```/g, ''); + this.title = value.description; + } +} diff --git a/package-lock.json b/package-lock.json index eb2e0e03f..ecc1d3b8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4447,9 +4447,9 @@ } }, "doc-prsr": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/doc-prsr/-/doc-prsr-2.2.2.tgz", - "integrity": "sha512-cTdJCDQfjmtAopJinuboXyi61gRC9RNnkmfMaaYrQeacZo4qHoVKwL/kNwH82PjW/zyLnqVbmeti1JhBc0080Q==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/doc-prsr/-/doc-prsr-2.2.3.tgz", + "integrity": "sha512-O6+/paki4pSYaUHwSJAy01cHg4xe/BCIbDtw6fF3XbEFhaNsoIInYXMlzEuDwKK0SH8OeWO7Sh0SVOCA+sLfSg==", "dev": true, "requires": { "commander": "^2.9.0", @@ -5885,8 +5885,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5907,14 +5906,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5929,20 +5926,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -6059,8 +6053,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -6072,7 +6065,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6087,7 +6079,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6095,14 +6086,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6121,7 +6110,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6202,8 +6190,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -6215,7 +6202,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6301,8 +6287,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -6338,7 +6323,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6358,7 +6342,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6402,14 +6385,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/package.json b/package.json index ad78630be..e849add59 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "conventional-changelog-cli": "^2.0.21", "coveralls": "^3.0.2", "del": "^4.1.1", - "doc-prsr": "^2.2.2", + "doc-prsr": "^2.2.3", "gulp": "^3.9.1", "gulp-replace": "^1.0.0", "gulp-typedoc": "^2.2.1", diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx index b3dbf136a..1800ac333 100644 --- a/src/framework/ui/button/button.component.tsx +++ b/src/framework/ui/button/button.component.tsx @@ -70,7 +70,7 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * * @property StyledComponentProps * - * @example Simple usage example + * @overview-example Simple usage example * * ``` * import React from 'react'; @@ -93,6 +93,32 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * }; * ``` * + * @overview-example Eva-related props using example + * + * ``` + * import React from 'react'; + * import { + * Button, + * ButtonProps, + * } from 'react-native-ui-kitten'; + * + * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement => { + * + * const onPress = () => { + * // Handle Button press + * }; + * + * return ( + * + * ); + * }; + * ``` + * * @example Inline styling example * * ``` @@ -112,6 +138,37 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * ); * }; * ``` + * + * @example Button with Icon usage example + * + * ``` + * import React from 'react'; + * import { + * ImageStyle, + * Image, + * ImageProps, + * } from 'react-native'; + * import { + * Button, + * ButtonProps, + * } from 'react-native-ui-kitten'; + * + * const ButtonIcon = (style: ImageStyle): React.ReactElement => { + * return ( + * + * ); + * }; + * + * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement => { + * return ( + * + * ); + * }; + * ``` */ export class ButtonComponent extends React.Component { diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx index 9c1f8f57a..672c6bfe5 100644 --- a/src/framework/ui/modal/modal.component.tsx +++ b/src/framework/ui/modal/modal.component.tsx @@ -58,7 +58,7 @@ export type ModalProps = ViewProps & ComponentProps & ModalPresentingBased; * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop. * Default is `false`. * - * @property {{backgroundColor: string, opacity: number }} backdropStyle - Determines the style of backdrop. + * @property {BackdropStyle} backdropStyle - Determines the style of backdrop. * * @property {() => void} onBackdropPress - Determines component's behavior when the user is * tapping on back-drop.