From e8abcb4bede6a6027ca44474f08c5404b3abd0e2 Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Thu, 5 Apr 2018 15:00:07 +0100 Subject: [PATCH 01/16] Input with prefix suffix --- .../input-with-prefix-suffix.examples.md | 12 ++++ .../forms/input-with-prefix-suffix.tsx | 57 +++++++++++++++++++ src/ts/index.ts | 3 + 3 files changed, 72 insertions(+) create mode 100644 src/ts/components/forms/input-with-prefix-suffix.examples.md create mode 100644 src/ts/components/forms/input-with-prefix-suffix.tsx diff --git a/src/ts/components/forms/input-with-prefix-suffix.examples.md b/src/ts/components/forms/input-with-prefix-suffix.examples.md new file mode 100644 index 000000000..a9e559a6c --- /dev/null +++ b/src/ts/components/forms/input-with-prefix-suffix.examples.md @@ -0,0 +1,12 @@ +#### Example + +```js + null} + type="text" + disabled={false} + /> +``` diff --git a/src/ts/components/forms/input-with-prefix-suffix.tsx b/src/ts/components/forms/input-with-prefix-suffix.tsx new file mode 100644 index 000000000..1847b9627 --- /dev/null +++ b/src/ts/components/forms/input-with-prefix-suffix.tsx @@ -0,0 +1,57 @@ +import * as classNames from 'classnames'; +import * as React from 'react'; +import { PureComponent } from 'react'; +import { ComponentProps } from '../../types'; +import InputGroup from './input-group'; +import InputGroupAddon from './input-group-addon'; + +export interface InputWithPrefixSuffixProps extends ComponentProps { + /** + * prefix + */ + prefix?: string; + /** + * suffix + */ + suffix?: string; + /** + * input value + */ + value: any; + /** + * is disabled + */ + disabled?: boolean; + /** + * input type + */ + type?: string; + /** + * on change function + */ + onChange(): void; +} + +export class InputWithPrefixSuffix extends PureComponent { + + public render() { + const { + prefix, + suffix, + disabled, + type, + onChange, + value, + } = this.props; + + return ( + + {prefix && {prefix}} + + {suffix && {suffix}} + + ); + } +} + +export default InputWithPrefixSuffix; diff --git a/src/ts/index.ts b/src/ts/index.ts index c630348d0..8d93ab883 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -23,6 +23,9 @@ export { default as InputGroup } from './components/forms/input-group'; export { default as InputGroupAddon, } from './components/forms/input-group-addon'; +export { + default as InputWithPrefixSuffix, +} from './components/forms/input-with-prefix-suffix'; export { default as Modal } from './components/modals/modal'; export { default as ModalBody } from './components/modals/modal-body'; export { From fcf89b74985292ce7f49535f861a5e10a1ff40da Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Thu, 5 Apr 2018 15:06:05 +0100 Subject: [PATCH 02/16] prettier --- .../forms/input-with-prefix-suffix.tsx | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/ts/components/forms/input-with-prefix-suffix.tsx b/src/ts/components/forms/input-with-prefix-suffix.tsx index 1847b9627..9d94ebd7e 100644 --- a/src/ts/components/forms/input-with-prefix-suffix.tsx +++ b/src/ts/components/forms/input-with-prefix-suffix.tsx @@ -1,4 +1,3 @@ -import * as classNames from 'classnames'; import * as React from 'react'; import { PureComponent } from 'react'; import { ComponentProps } from '../../types'; @@ -32,22 +31,22 @@ export interface InputWithPrefixSuffixProps extends ComponentProps { onChange(): void; } -export class InputWithPrefixSuffix extends PureComponent { - +export class InputWithPrefixSuffix extends PureComponent< + InputWithPrefixSuffixProps, + {} +> { public render() { - const { - prefix, - suffix, - disabled, - type, - onChange, - value, - } = this.props; + const { prefix, suffix, disabled, type, onChange, value } = this.props; return ( {prefix && {prefix}} - + {suffix && {suffix}} ); From 8b306039f96d3d0a73b3c28670d80a6dbb64bfca Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Thu, 5 Apr 2018 15:58:33 +0100 Subject: [PATCH 03/16] Snapshots --- .../input-with-prefix-suffix.tsx.snap | 47 +++++++++++++++++++ tests/input-with-prefix-suffix.tsx | 28 +++++++++++ 2 files changed, 75 insertions(+) create mode 100644 tests/__snapshots__/input-with-prefix-suffix.tsx.snap create mode 100644 tests/input-with-prefix-suffix.tsx diff --git a/tests/__snapshots__/input-with-prefix-suffix.tsx.snap b/tests/__snapshots__/input-with-prefix-suffix.tsx.snap new file mode 100644 index 000000000..2d7271fa2 --- /dev/null +++ b/tests/__snapshots__/input-with-prefix-suffix.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InputWithPrefixSuffix should match snapshot 1`] = ` +
+ +
+`; + +exports[`InputWithPrefixSuffix should match snapshot with all props 1`] = ` +
+
+ £ +
+ +
+ % +
+
+`; diff --git a/tests/input-with-prefix-suffix.tsx b/tests/input-with-prefix-suffix.tsx new file mode 100644 index 000000000..3f700cdb0 --- /dev/null +++ b/tests/input-with-prefix-suffix.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; +import { InputWithPrefixSuffix } from '../src/ts/components/forms/input-with-prefix-suffix'; + +describe('InputWithPrefixSuffix', () => { + it('should match snapshot', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should match snapshot with all props', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); +}); From a43a96e7d916597e9cf8dbe5ea376932eba716f7 Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Thu, 5 Apr 2018 16:41:53 +0100 Subject: [PATCH 04/16] Refactor --- .../input-with-prefix-suffix.examples.md | 0 .../{forms => precomposed}/input-with-prefix-suffix.tsx | 4 ++-- src/ts/index.ts | 2 +- styleguide.config.js | 8 ++++++-- tests/input-with-prefix-suffix.tsx | 2 +- 5 files changed, 10 insertions(+), 6 deletions(-) rename src/ts/components/{forms => precomposed}/input-with-prefix-suffix.examples.md (100%) rename src/ts/components/{forms => precomposed}/input-with-prefix-suffix.tsx (90%) diff --git a/src/ts/components/forms/input-with-prefix-suffix.examples.md b/src/ts/components/precomposed/input-with-prefix-suffix.examples.md similarity index 100% rename from src/ts/components/forms/input-with-prefix-suffix.examples.md rename to src/ts/components/precomposed/input-with-prefix-suffix.examples.md diff --git a/src/ts/components/forms/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx similarity index 90% rename from src/ts/components/forms/input-with-prefix-suffix.tsx rename to src/ts/components/precomposed/input-with-prefix-suffix.tsx index 9d94ebd7e..46f02f61d 100644 --- a/src/ts/components/forms/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { PureComponent } from 'react'; import { ComponentProps } from '../../types'; -import InputGroup from './input-group'; -import InputGroupAddon from './input-group-addon'; +import InputGroup from '../forms/input-group'; +import InputGroupAddon from '../forms/input-group-addon'; export interface InputWithPrefixSuffixProps extends ComponentProps { /** diff --git a/src/ts/index.ts b/src/ts/index.ts index 8d93ab883..e06a38653 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -25,7 +25,7 @@ export { } from './components/forms/input-group-addon'; export { default as InputWithPrefixSuffix, -} from './components/forms/input-with-prefix-suffix'; +} from './components/precomposed/input-with-prefix-suffix'; export { default as Modal } from './components/modals/modal'; export { default as ModalBody } from './components/modals/modal-body'; export { diff --git a/styleguide.config.js b/styleguide.config.js index 190192dc8..6c504c630 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -48,7 +48,11 @@ var components = [ { name: 'Misc', components: 'src/ts/components/*.tsx' - } + }, + { + name: 'Precomposed', + components: 'src/ts/components/precomposed/*.tsx' + }, ]; var less = [ @@ -138,7 +142,7 @@ module.exports = { ], title: 'Roe - DabApps\' Project Development Kit', components: 'src/ts/components/**/*.{ts,tsx}', - ignore: [], + ignore: ['src/ts/precomposed/*.tsx'], propsParser: require('react-docgen-typescript') .withCustomConfig('./tsconfig.json', reactDocGenTypescriptConfig).parse, webpackConfig: webpackConfig, diff --git a/tests/input-with-prefix-suffix.tsx b/tests/input-with-prefix-suffix.tsx index 3f700cdb0..f487c278c 100644 --- a/tests/input-with-prefix-suffix.tsx +++ b/tests/input-with-prefix-suffix.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; -import { InputWithPrefixSuffix } from '../src/ts/components/forms/input-with-prefix-suffix'; +import { InputWithPrefixSuffix } from '../src/ts/components/precomposed/input-with-prefix-suffix'; describe('InputWithPrefixSuffix', () => { it('should match snapshot', () => { From 2d8975588cbcb911433e25d3476fd023db59e9b1 Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Thu, 5 Apr 2018 17:16:13 +0100 Subject: [PATCH 05/16] added the component to exceptions array --- styleguide.config.js | 2 +- tests/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/styleguide.config.js b/styleguide.config.js index 6c504c630..328a3a753 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -142,7 +142,7 @@ module.exports = { ], title: 'Roe - DabApps\' Project Development Kit', components: 'src/ts/components/**/*.{ts,tsx}', - ignore: ['src/ts/precomposed/*.tsx'], + ignore: [], propsParser: require('react-docgen-typescript') .withCustomConfig('./tsconfig.json', reactDocGenTypescriptConfig).parse, webpackConfig: webpackConfig, diff --git a/tests/index.tsx b/tests/index.tsx index 6c2d712db..a28275802 100644 --- a/tests/index.tsx +++ b/tests/index.tsx @@ -43,6 +43,7 @@ describe('index file', () => { 'Modal', 'Table', 'SideBar', + 'InputWithPrefixSuffix', ]; type Keys = keyof typeof index; From edef14469511dbb397d28a2f2bdbf6a6bc6e9cd4 Mon Sep 17 00:00:00 2001 From: Nikolaev Tomov Date: Wed, 9 May 2018 16:15:45 +0100 Subject: [PATCH 06/16] Feedback --- .../components/precomposed/input-with-prefix-suffix.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx index 46f02f61d..921a55255 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -40,14 +40,18 @@ export class InputWithPrefixSuffix extends PureComponent< return ( - {prefix && {prefix}} + {typeof prefix !== 'undefined' && ( + {prefix} + )} - {suffix && {suffix}} + {typeof suffix !== 'undefined' && ( + {suffix} + )} ); } From 642f11d5599e3493ba9866d19ef58effa151ade6 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:00:12 +0100 Subject: [PATCH 07/16] Adjust props --- .../precomposed/input-with-prefix-suffix.tsx | 59 +++++++++++-------- 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx index 921a55255..316f6574c 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -4,53 +4,66 @@ import { ComponentProps } from '../../types'; import InputGroup from '../forms/input-group'; import InputGroupAddon from '../forms/input-group-addon'; -export interface InputWithPrefixSuffixProps extends ComponentProps { +export interface PrefixSuffixProps { /** - * prefix + * Content to display to the left of the input. */ - prefix?: string; + prefix?: React.ReactChild; /** - * suffix + * Content to display to the right of the input. */ - suffix?: string; + suffix?: React.ReactChild; /** - * input value + * Set the style `display: block;` so the input group fills its parent. */ - value: any; + block?: boolean; /** - * is disabled + * Class name to apply to the input. */ - disabled?: boolean; + inputClassName?: string; /** - * input type + * Class name to apply to the prefix. */ - type?: string; + prefixClassName?: string; /** - * on change function + * Class name to apply to the suffix. */ - onChange(): void; + suffixClassName?: string; } +export type InputWithPrefixSuffixProps = React.HTMLAttributes< + HTMLInputElement +> & + PrefixSuffixProps; + export class InputWithPrefixSuffix extends PureComponent< InputWithPrefixSuffixProps, {} > { public render() { - const { prefix, suffix, disabled, type, onChange, value } = this.props; + const { + prefix, + suffix, + block, + className, + inputClassName, + prefixClassName, + suffixClassName, + ...remainingProps + } = this.props; return ( - + {typeof prefix !== 'undefined' && ( - {prefix} + + {prefix} + )} - + {typeof suffix !== 'undefined' && ( - {suffix} + + {suffix} + )} ); From 9a5fb8b2c1ae3ba57b6ad93097c9a41140ea0806 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:00:18 +0100 Subject: [PATCH 08/16] Update examples --- .../input-with-prefix-suffix.examples.md | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.examples.md b/src/ts/components/precomposed/input-with-prefix-suffix.examples.md index a9e559a6c..355cca399 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.examples.md +++ b/src/ts/components/precomposed/input-with-prefix-suffix.examples.md @@ -1,12 +1,25 @@ #### Example +Example with class names + +```js + +``` + +Display block with React element prefix + ```js - null} - type="text" - disabled={false} - /> +Strong} + value="Example" +/> ``` From 2b5ba5aeef8ace235c3dcf40eb1527a539d59c82 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:03:29 +0100 Subject: [PATCH 09/16] Update tests --- tests/input-with-prefix-suffix.tsx | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/tests/input-with-prefix-suffix.tsx b/tests/input-with-prefix-suffix.tsx index f487c278c..05dbb9eff 100644 --- a/tests/input-with-prefix-suffix.tsx +++ b/tests/input-with-prefix-suffix.tsx @@ -4,25 +4,39 @@ import { InputWithPrefixSuffix } from '../src/ts/components/precomposed/input-wi describe('InputWithPrefixSuffix', () => { it('should match snapshot', () => { - const tree = renderer.create( - - ); + const tree = renderer.create(); expect(tree).toMatchSnapshot(); }); - it('should match snapshot with all props', () => { + it('should apply class names to appropriate elements', () => { const tree = renderer.create( ); expect(tree).toMatchSnapshot(); }); + + it('should add the "block" class name if this prop is true', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should pass props to the input', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); }); From 8f9c5d66fbba485fc12f5c0dc8c500cb3768d3ff Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:07:43 +0100 Subject: [PATCH 10/16] Allow input with prefix suffix to take a component prop --- src/ts/components/precomposed/input-with-prefix-suffix.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx index 316f6574c..be69c95ff 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -4,7 +4,7 @@ import { ComponentProps } from '../../types'; import InputGroup from '../forms/input-group'; import InputGroupAddon from '../forms/input-group-addon'; -export interface PrefixSuffixProps { +export interface PrefixSuffixProps extends ComponentProps { /** * Content to display to the left of the input. */ @@ -49,11 +49,12 @@ export class InputWithPrefixSuffix extends PureComponent< inputClassName, prefixClassName, suffixClassName, + component, ...remainingProps } = this.props; return ( - + {typeof prefix !== 'undefined' && ( {prefix} From 641540da8f1e4ed4d79cc1cf55e0bb56fde3ffe2 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:10:34 +0100 Subject: [PATCH 11/16] Update snapshots --- .../input-with-prefix-suffix.tsx.snap | 73 ++++++++++++++++--- 1 file changed, 64 insertions(+), 9 deletions(-) diff --git a/tests/__snapshots__/input-with-prefix-suffix.tsx.snap b/tests/__snapshots__/input-with-prefix-suffix.tsx.snap index 2d7271fa2..ae672c214 100644 --- a/tests/__snapshots__/input-with-prefix-suffix.tsx.snap +++ b/tests/__snapshots__/input-with-prefix-suffix.tsx.snap @@ -1,19 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`InputWithPrefixSuffix should add the "block" class name if this prop is true 1`] = ` +
+
+ £ +
+ +
+ % +
+
+`; + +exports[`InputWithPrefixSuffix should apply class names to appropriate elements 1`] = ` +
+
+ £ +
+ +
+ % +
+
+`; + exports[`InputWithPrefixSuffix should match snapshot 1`] = `
`; -exports[`InputWithPrefixSuffix should match snapshot with all props 1`] = ` +exports[`InputWithPrefixSuffix should pass props to the input 1`] = `
@@ -28,10 +85,8 @@ exports[`InputWithPrefixSuffix should match snapshot with all props 1`] = ` £
Date: Tue, 24 Jul 2018 12:12:10 +0100 Subject: [PATCH 12/16] Do not exclude input with prefix suffix from component prop test --- tests/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/index.tsx b/tests/index.tsx index a28275802..6c2d712db 100644 --- a/tests/index.tsx +++ b/tests/index.tsx @@ -43,7 +43,6 @@ describe('index file', () => { 'Modal', 'Table', 'SideBar', - 'InputWithPrefixSuffix', ]; type Keys = keyof typeof index; From 416c119778cc065697d90988093e53e2c6a30220 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:14:10 +0100 Subject: [PATCH 13/16] Examples, plural --- .../components/precomposed/input-with-prefix-suffix.examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.examples.md b/src/ts/components/precomposed/input-with-prefix-suffix.examples.md index 355cca399..ba87ef5d1 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.examples.md +++ b/src/ts/components/precomposed/input-with-prefix-suffix.examples.md @@ -1,4 +1,4 @@ -#### Example +#### Examples Example with class names From e4e2aca36f700ed28c343a7e8ce001cac7f82822 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:15:23 +0100 Subject: [PATCH 14/16] Add doc comment description --- src/ts/components/precomposed/input-with-prefix-suffix.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx index be69c95ff..a9cae4aba 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -36,6 +36,10 @@ export type InputWithPrefixSuffixProps = React.HTMLAttributes< > & PrefixSuffixProps; + /** + * A precomposed Input containing an optional prefix (InputGroupAddon), an input, + * and an optional suffix (InputGroupAddon). + */ export class InputWithPrefixSuffix extends PureComponent< InputWithPrefixSuffixProps, {} From 8d09006ffad6e71a6d28bbf4c45df2115e79d287 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:16:01 +0100 Subject: [PATCH 15/16] Fix comment alignment --- src/ts/components/precomposed/input-with-prefix-suffix.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx index a9cae4aba..4b0a635cb 100644 --- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx +++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx @@ -36,7 +36,7 @@ export type InputWithPrefixSuffixProps = React.HTMLAttributes< > & PrefixSuffixProps; - /** +/** * A precomposed Input containing an optional prefix (InputGroupAddon), an input, * and an optional suffix (InputGroupAddon). */ From 09b1255076efef0bd788944dfa63938deb33204a Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Tue, 24 Jul 2018 12:28:14 +0100 Subject: [PATCH 16/16] 0.9.12 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index fc67b7dab..1e703bcdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@dabapps/roe", - "version": "0.9.11", + "version": "0.9.12", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a7ac1f36f..0686ac908 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dabapps/roe", - "version": "0.9.11", + "version": "0.9.12", "description": "A Collection of React Components for Project Development", "main": "dist/js/index.js", "types": "dist/js/index.d.ts",