From 22f17cf61d5d5c4d2c4e346e3d8792f6fe247d2c Mon Sep 17 00:00:00 2001 From: Prannay Budhraja Date: Wed, 9 Aug 2017 18:39:58 -0700 Subject: [PATCH 1/5] select knob options object keys are strings or numbers only * select knob uses the keys of the "options" object as the selected values, and doesn't support arbitrary types as values. * It only supports arbitrary types for the select->option->child. These are the values in options object. * The value of the select knob or the selected option however, is still either a string or number. Also, since typescript object key signature can only be either "string" or "number" (but not string | number) we need to specify both types explicitly. options : { [s: string | number]: T } does not work. --- types/storybook__addon-knobs/index.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts index 3e422640c8..11fbfb9cd5 100644 --- a/types/storybook__addon-knobs/index.d.ts +++ b/types/storybook__addon-knobs/index.d.ts @@ -36,8 +36,10 @@ export function color(name: string, value: string): string; export function object(name: string, value: T): T; -export function select(name: string, options: { [s: string]: T }, value: string): T; -export function select(name: string, options: string[], value: string): string; +export function select(name: string, options: { [s: string]: T }, value: string): string; +export function select(name: string, options: { [s: number]: T }, value: number): number; +type SelectValue = string | number; +export function select(name: string, options: T[], value: T): T; export function date(name: string, value?: Date): Date; From 363135abfa412c1bcbc589f85ce6514d0ccac6ca Mon Sep 17 00:00:00 2001 From: Prannay Budhraja Date: Wed, 9 Aug 2017 19:01:06 -0700 Subject: [PATCH 2/5] fix tslint errors --- types/storybook__addon-knobs/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts index 11fbfb9cd5..0a83194453 100644 --- a/types/storybook__addon-knobs/index.d.ts +++ b/types/storybook__addon-knobs/index.d.ts @@ -36,9 +36,9 @@ export function color(name: string, value: string): string; export function object(name: string, value: T): T; -export function select(name: string, options: { [s: string]: T }, value: string): string; -export function select(name: string, options: { [s: number]: T }, value: number): number; -type SelectValue = string | number; +export type SelectValue = string | number; +export function select(name: string, options: { [s: string]: string }, value: T): T; +export function select(name: string, options: { [s: number]: string }, value: T): T; export function select(name: string, options: T[], value: T): T; export function date(name: string, value?: Date): Date; From d3e91997e701274c48a089b432000d08926225fe Mon Sep 17 00:00:00 2001 From: Prannay Budhraja Date: Wed, 9 Aug 2017 19:19:54 -0700 Subject: [PATCH 3/5] add tests showing that options object's keys are the values of the React select --- .../storybook__addon-knobs-tests.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx index 76c72f1a7d..636dd8cd01 100644 --- a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx +++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx @@ -13,6 +13,11 @@ import { knob, } from '@storybook/addon-knobs'; +enum SomeEnum { + Type1 = 1, + Type2 +}; + const stories = storiesOf('Example of Knobs', module); stories.addDecorator(withKnobs); @@ -38,8 +43,15 @@ stories.add('with all knobs', () => { }); const genericObject: string = object('Some generic object', 'value'); + type X = 'a' | 'b'; - const genericSelect: X = select('Some generic select', { a: 'a', b: 'b'}, 'b'); + const genericSelect: X = select('Some generic select', { 'a': 'type a', 'b': 'type b'}, 'b'); + + const enumSelectOptions: { [s: number]: string } = {}; + enumSelectOptions[SomeEnum.Type1] = "Type 1"; + enumSelectOptions[SomeEnum.Type2] = "Type 2"; + const genericSelect2: SomeEnum = select('Some generic select', enumSelectOptions, SomeEnum.Type1); + const genericKnob: X = knob('Some generic knob', { value: 'a', type: 'text' }); const style = Object.assign({}, customStyle, { From 5cbb71e28c9c0dc7ab2d8716dd37f8611f0cfd2d Mon Sep 17 00:00:00 2001 From: Prannay Budhraja Date: Wed, 9 Aug 2017 19:26:49 -0700 Subject: [PATCH 4/5] tslint errors fixed again --- .../storybook__addon-knobs-tests.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx index 636dd8cd01..2600d60850 100644 --- a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx +++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx @@ -16,7 +16,7 @@ import { enum SomeEnum { Type1 = 1, Type2 -}; +} const stories = storiesOf('Example of Knobs', module); @@ -43,15 +43,15 @@ stories.add('with all knobs', () => { }); const genericObject: string = object('Some generic object', 'value'); - + type X = 'a' | 'b'; - const genericSelect: X = select('Some generic select', { 'a': 'type a', 'b': 'type b'}, 'b'); - + const genericSelect: X = select('Some generic select', { a: 'type a', b: 'type b'}, 'b'); + const enumSelectOptions: { [s: number]: string } = {}; enumSelectOptions[SomeEnum.Type1] = "Type 1"; enumSelectOptions[SomeEnum.Type2] = "Type 2"; const genericSelect2: SomeEnum = select('Some generic select', enumSelectOptions, SomeEnum.Type1); - + const genericKnob: X = knob('Some generic knob', { value: 'a', type: 'text' }); const style = Object.assign({}, customStyle, { From 7683a9c4bcce2965f2e03e7f43c5a32e62a5570b Mon Sep 17 00:00:00 2001 From: Andy Hanson Date: Mon, 16 Oct 2017 08:20:53 -0700 Subject: [PATCH 5/5] Fix lint --- types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx index 9c2eed1e1b..9e1c1dbd6b 100644 --- a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx +++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx @@ -53,9 +53,9 @@ stories.add('with all knobs', () => { enumSelectOptions[SomeEnum.Type1] = "Type 1"; enumSelectOptions[SomeEnum.Type2] = "Type 2"; const genericSelect2: SomeEnum = select('Some generic select', enumSelectOptions, SomeEnum.Type1); - + const genericArray: string[] = array('Some generic array', ['red', 'green', 'blue']); - + const genericKnob: X = knob('Some generic knob', { value: 'a', type: 'text' }); const style = {