From e5d7e70790726b3c7c84858bb241db0ea008fb6b Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 14:13:49 -0500 Subject: [PATCH 01/18] types of csf properties --- src/index.ts | 21 +++++ src/properties.ts | 219 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 240 insertions(+) create mode 100644 src/properties.ts diff --git a/src/index.ts b/src/index.ts index a05fa28..88eca52 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,7 @@ import startCase from 'lodash/startCase'; +import { StoryProperties } from './properties'; + +export * from './properties'; /** * Remove punctuation and illegal characters from a story ID. @@ -82,3 +85,21 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ groups, }; }; + +/** + * csf story definition + */ +export interface CSFStory { + story: { + /** + * story name if differnet from the export name + */ + name?: string; + + /** + * optional collection of properties, which values + * will be passed onto the story function + */ + properties?: StoryProperties; + }; +} diff --git a/src/properties.ts b/src/properties.ts new file mode 100644 index 0000000..e3f969d --- /dev/null +++ b/src/properties.ts @@ -0,0 +1,219 @@ +/** + * Property field types + * examples are propvided for the different types: + * + */ +export const FieldTypes = { + /** + * userName: { + * type: csf.FieldTypes.TEXT, + * label: 'Name', + * defaultValue: 'Storyteller', + * }, + */ + TEXT: 'text', + + /** + * age: { + * type: 'number', + * label: 'Age', + * defaultValue: 78, + * range: true, + * min: 0, + * max: 90, + * step: 5, + * }, + */ + NUMBER: 'number', + + /** + * nice: { + * type: 'boolean', + * label: 'Nice', + * defaultValue: true, + * }, + */ + BOOLEAN: 'boolean', + + /** + * fruit: { + * type: 'options', + * label: 'Fruit', + * defaultValue: 'apple', + * options: { + * Apple: 'apple', + * Banana: 'banana', + * Cherry: 'cherry', + * }, + * }, + */ + OPTIONS: 'options', + + /** + * birthday: { + * type: 'date', + * label: 'Birthday', + * defaultValue: new Date(), + * }, + */ + DATE: 'date', + + /** + * color: { + * type: 'color', + * defaultValue: '#000000', + * }, + */ + COLOR: 'color', + + /** + * button: { + * type: 'button', + * onClick: () => { + * ... code to modify some variables + * } + * }, + */ + BUTTON: 'button', + + /** + * otherStyles: { + * type: 'object', + * label: 'Styles', + * defaultValue: { + * border: '2px dashed silver', + * borderRadius: 10, + * padding: 10, + * }, + * }, + */ + OBJECT: 'object', + + /** + * items: { + * type: 'array', + * label: 'Items', + * defaultValue: ['Laptop', 'Book', 'Whiskey'], + * }, + */ + ARRAY: 'array', + + /** + * images: { + * type: 'files', + * label: 'Happy Picture', + * accept: 'image/*', + * defaultValue: [ + * 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', + * ], + * }, + */ + FILES: 'files', +}; + +export interface StoryPropertyObject { + type?: string; + + /** + * label to display next to the field editor + * by default uses the property name itself + */ + + label?: string; + + /** + * placehlder for empty properties + * either undefined defautValue + * or user clears the field + */ + placeholder?: string; + + /** + * a default value for the property + */ + defaultValue?: any; + + /** + * hide the label from the property editor + */ + hideLabel?: boolean; + /** + * hide the property editor for this property + * will only use the defaultValue + */ + + hidden?: boolean; + /** + * allows grouping of the properties + * in a property editor + * for example different editor tabs + */ + groupId?: string; + + // FIELD TYPE SPECIFIC + /** + * for button type fields, an onClick handler + */ + onClick?: () => any; + + /** + * for options type fields + */ + + display?: 'select' | 'radio' | 'inline-radio' | 'multi-select' | 'check' | 'inline-check'; + + /** + * for numeric type fields + */ + + /** + * if true, will display a range type slider editor + */ + range?: boolean; + + /** + * minimum allowed value for numeric propery + */ + min?: number; + + /** + * maximum allowed value for numeric propery + */ + max?: number; + + /** + * stepper for numeric editor /i nc/dec value + */ + + step?: number; +} + +/** + * StoryProperty is a either an object of property settings + * or a shortcut can be used: + * properties: { + * text: 'Hello', + * }, + */ + +export type StoryProperty = StoryPropertyObject | string; + +/** + * StoryProperties are defined in key value pairs + * the name of the property is the key + * and the value is the StoryProperty + */ +export interface StoryProperties { + [name: string]: StoryProperty; +} + +export type StoryPropertiesArray = StoryProperty[]; + +/** + * StoryValues are passed into the story function + * either the default value or + * if a property editor is installed, can be modified + */ +export interface StoryValues { + [name: string]: any; +} From b12e1c1fddddb2598803a1e0e1c05d9b19ddd3ac Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 14:27:04 -0500 Subject: [PATCH 02/18] add parameters to CSFStory --- src/index.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 88eca52..a9599fa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -90,7 +90,7 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ * csf story definition */ export interface CSFStory { - story: { + story?: { /** * story name if differnet from the export name */ @@ -101,5 +101,12 @@ export interface CSFStory { * will be passed onto the story function */ properties?: StoryProperties; + + /** + * optional collection of story parameters + */ + parameters?: { + [key: string]: any; + }; }; } From 841af837142682f215560ad8bf281faa3e12890d Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 16:04:38 -0500 Subject: [PATCH 03/18] field types as enum --- src/index.ts | 2 +- src/properties.test.ts | 12 ++++++++++++ src/properties.ts | 42 +++++++++++++++++++++--------------------- 3 files changed, 34 insertions(+), 22 deletions(-) create mode 100644 src/properties.test.ts diff --git a/src/index.ts b/src/index.ts index a9599fa..c5728ce 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import startCase from 'lodash/startCase'; -import { StoryProperties } from './properties'; +import { StoryProperties, StoryProperty, FieldTypes } from './properties'; export * from './properties'; diff --git a/src/properties.test.ts b/src/properties.test.ts new file mode 100644 index 0000000..057a5d7 --- /dev/null +++ b/src/properties.test.ts @@ -0,0 +1,12 @@ +import { FieldTypes, StoryProperty } from '.'; + +describe('properties', () => { + it('type FieldTypes.TEXT', () => { + expect(() => { + const prop: StoryProperty = { + type: FieldTypes.TEXT, + }; + return prop.type === 'text'; + }).toBeTruthy(); + }); +}); diff --git a/src/properties.ts b/src/properties.ts index e3f969d..db95731 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -3,7 +3,7 @@ * examples are propvided for the different types: * */ -export const FieldTypes = { +export enum FieldTypes { /** * userName: { * type: csf.FieldTypes.TEXT, @@ -11,11 +11,11 @@ export const FieldTypes = { * defaultValue: 'Storyteller', * }, */ - TEXT: 'text', + TEXT = 'text', /** * age: { - * type: 'number', + * type: csf.FieldTypes.NUMBER, * label: 'Age', * defaultValue: 78, * range: true, @@ -24,20 +24,20 @@ export const FieldTypes = { * step: 5, * }, */ - NUMBER: 'number', + NUMBER = 'number', /** * nice: { - * type: 'boolean', + * type: csf.FieldTypes.BOOLEAN, * label: 'Nice', * defaultValue: true, * }, */ - BOOLEAN: 'boolean', + BOOLEAN = 'boolean', /** * fruit: { - * type: 'options', + * type: csf.FieldTypes.OPTIONS, * label: 'Fruit', * defaultValue: 'apple', * options: { @@ -47,16 +47,16 @@ export const FieldTypes = { * }, * }, */ - OPTIONS: 'options', + OPTIONS = 'options', /** * birthday: { - * type: 'date', + * type: csf.FieldTypes.DATE, * label: 'Birthday', * defaultValue: new Date(), * }, */ - DATE: 'date', + DATE = 'date', /** * color: { @@ -64,21 +64,21 @@ export const FieldTypes = { * defaultValue: '#000000', * }, */ - COLOR: 'color', + COLOR = 'color', /** * button: { - * type: 'button', + * type: csf.FieldTypes.BUTTON, * onClick: () => { * ... code to modify some variables * } * }, */ - BUTTON: 'button', + BUTTON = 'button', /** * otherStyles: { - * type: 'object', + * type: csf.FieldTypes.OBJECT, * label: 'Styles', * defaultValue: { * border: '2px dashed silver', @@ -87,20 +87,20 @@ export const FieldTypes = { * }, * }, */ - OBJECT: 'object', + OBJECT = 'object', /** * items: { - * type: 'array', + * type: csf.FieldTypes.ARRAY, * label: 'Items', * defaultValue: ['Laptop', 'Book', 'Whiskey'], * }, */ - ARRAY: 'array', + ARRAY = 'array', /** * images: { - * type: 'files', + * type: csf.FieldTypes.FILES, * label: 'Happy Picture', * accept: 'image/*', * defaultValue: [ @@ -108,11 +108,11 @@ export const FieldTypes = { * ], * }, */ - FILES: 'files', -}; + FILES = 'files', +} export interface StoryPropertyObject { - type?: string; + type?: FieldTypes; /** * label to display next to the field editor From 65f5322a15eff475f1d171d28f29f0ccd274ed80 Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 19:03:08 -0500 Subject: [PATCH 04/18] updated interfaces --- src/properties.test.ts | 6 ++-- src/properties.ts | 81 +++++++++++++++++++++++++++++++++--------- 2 files changed, 68 insertions(+), 19 deletions(-) diff --git a/src/properties.test.ts b/src/properties.test.ts index 057a5d7..029a457 100644 --- a/src/properties.test.ts +++ b/src/properties.test.ts @@ -1,10 +1,10 @@ -import { FieldTypes, StoryProperty } from '.'; +import { PropertyTypes, StoryProperty } from '.'; describe('properties', () => { - it('type FieldTypes.TEXT', () => { + it('type PropertyTypes.TEXT', () => { expect(() => { const prop: StoryProperty = { - type: FieldTypes.TEXT, + type: PropertyTypes.TEXT, }; return prop.type === 'text'; }).toBeTruthy(); diff --git a/src/properties.ts b/src/properties.ts index db95731..3bf83ae 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -3,10 +3,10 @@ * examples are propvided for the different types: * */ -export enum FieldTypes { +export enum PropertyTypes { /** * userName: { - * type: csf.FieldTypes.TEXT, + * type: csf.PropertyTypes.TEXT, * label: 'Name', * defaultValue: 'Storyteller', * }, @@ -15,7 +15,7 @@ export enum FieldTypes { /** * age: { - * type: csf.FieldTypes.NUMBER, + * type: csf.PropertyTypes.NUMBER, * label: 'Age', * defaultValue: 78, * range: true, @@ -28,7 +28,7 @@ export enum FieldTypes { /** * nice: { - * type: csf.FieldTypes.BOOLEAN, + * type: csf.PropertyTypes.BOOLEAN, * label: 'Nice', * defaultValue: true, * }, @@ -37,7 +37,7 @@ export enum FieldTypes { /** * fruit: { - * type: csf.FieldTypes.OPTIONS, + * type: csf.PropertyTypes.OPTIONS, * label: 'Fruit', * defaultValue: 'apple', * options: { @@ -51,7 +51,7 @@ export enum FieldTypes { /** * birthday: { - * type: csf.FieldTypes.DATE, + * type: csf.PropertyTypes.DATE, * label: 'Birthday', * defaultValue: new Date(), * }, @@ -68,7 +68,7 @@ export enum FieldTypes { /** * button: { - * type: csf.FieldTypes.BUTTON, + * type: csf.PropertyTypes.BUTTON, * onClick: () => { * ... code to modify some variables * } @@ -78,7 +78,7 @@ export enum FieldTypes { /** * otherStyles: { - * type: csf.FieldTypes.OBJECT, + * type: csf.PropertyTypes.OBJECT, * label: 'Styles', * defaultValue: { * border: '2px dashed silver', @@ -91,7 +91,7 @@ export enum FieldTypes { /** * items: { - * type: csf.FieldTypes.ARRAY, + * type: csf.PropertyTypes.ARRAY, * label: 'Items', * defaultValue: ['Laptop', 'Book', 'Whiskey'], * }, @@ -100,7 +100,7 @@ export enum FieldTypes { /** * images: { - * type: csf.FieldTypes.FILES, + * type: csf.PropertyTypes.FILES, * label: 'Happy Picture', * accept: 'image/*', * defaultValue: [ @@ -111,8 +111,8 @@ export enum FieldTypes { FILES = 'files', } -export interface StoryPropertyObject { - type?: FieldTypes; +export interface StoryPropertyBase { + type: string; /** * label to display next to the field editor @@ -131,7 +131,7 @@ export interface StoryPropertyObject { /** * a default value for the property */ - defaultValue?: any; + defaultValue?: T; /** * hide the label from the property editor @@ -149,19 +149,59 @@ export interface StoryPropertyObject { * for example different editor tabs */ groupId?: string; +} + +export interface StoryPropertyText extends StoryPropertyBase { + type: PropertyTypes.TEXT; +} + +export interface StoryPropertyBoolean extends StoryPropertyBase { + type: PropertyTypes.BOOLEAN; +} + +export interface StoryPropertyColor extends StoryPropertyBase { + type: PropertyTypes.COLOR; +} + +export interface StoryPropertyDate extends StoryPropertyBase { + type: PropertyTypes.DATE; +} + +export interface StoryPropertyFiles extends StoryPropertyBase { + type: PropertyTypes.FILES; + /** + * type of files to acept user to open + * ex 'image/*', + */ + accept?: string; +} + +export interface StoryPropertyObject extends StoryPropertyBase { + type: PropertyTypes.OBJECT; +} + +export interface StoryPropertyButton extends StoryPropertyBase { + type: PropertyTypes.BUTTON; - // FIELD TYPE SPECIFIC /** * for button type fields, an onClick handler */ - onClick?: () => any; + onClick?: (prop: StoryPropertyButton) => void; +} + +export interface StoryPropertyOptions + extends StoryPropertyBase { + type: PropertyTypes.OPTIONS; /** * for options type fields */ display?: 'select' | 'radio' | 'inline-radio' | 'multi-select' | 'check' | 'inline-check'; +} +export interface StoryPropertyNumber extends StoryPropertyBase { + type: PropertyTypes.NUMBER; /** * for numeric type fields */ @@ -196,7 +236,16 @@ export interface StoryPropertyObject { * }, */ -export type StoryProperty = StoryPropertyObject | string; +export type StoryProperty = + | StoryPropertyText + | StoryPropertyBoolean + | StoryPropertyColor + | StoryPropertyDate + | StoryPropertyFiles + | StoryPropertyObject + | StoryPropertyButton + | StoryPropertyOptions + | StoryPropertyNumber; /** * StoryProperties are defined in key value pairs From 9f1e14cef07286b95e597e54a56d344d3ae54a4e Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 19:15:27 -0500 Subject: [PATCH 05/18] move placeholder to text variable --- src/properties.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 3bf83ae..137b549 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -121,13 +121,6 @@ export interface StoryPropertyBase { label?: string; - /** - * placehlder for empty properties - * either undefined defautValue - * or user clears the field - */ - placeholder?: string; - /** * a default value for the property */ @@ -153,6 +146,13 @@ export interface StoryPropertyBase { export interface StoryPropertyText extends StoryPropertyBase { type: PropertyTypes.TEXT; + + /** + * placehlder for empty properties + * either undefined defautValue + * or user clears the field + */ + placeholder?: string; } export interface StoryPropertyBoolean extends StoryPropertyBase { From 2b54c325028c6a03b3c708fcec40db39fa4ebd4f Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 19:17:54 -0500 Subject: [PATCH 06/18] rename defaultValue to value --- src/properties.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 137b549..ed4cbf0 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -8,7 +8,7 @@ export enum PropertyTypes { * userName: { * type: csf.PropertyTypes.TEXT, * label: 'Name', - * defaultValue: 'Storyteller', + * value: 'Storyteller', * }, */ TEXT = 'text', @@ -17,7 +17,7 @@ export enum PropertyTypes { * age: { * type: csf.PropertyTypes.NUMBER, * label: 'Age', - * defaultValue: 78, + * value: 78, * range: true, * min: 0, * max: 90, @@ -30,7 +30,7 @@ export enum PropertyTypes { * nice: { * type: csf.PropertyTypes.BOOLEAN, * label: 'Nice', - * defaultValue: true, + * value: true, * }, */ BOOLEAN = 'boolean', @@ -39,7 +39,7 @@ export enum PropertyTypes { * fruit: { * type: csf.PropertyTypes.OPTIONS, * label: 'Fruit', - * defaultValue: 'apple', + * value: 'apple', * options: { * Apple: 'apple', * Banana: 'banana', @@ -53,7 +53,7 @@ export enum PropertyTypes { * birthday: { * type: csf.PropertyTypes.DATE, * label: 'Birthday', - * defaultValue: new Date(), + * value: new Date(), * }, */ DATE = 'date', @@ -61,7 +61,7 @@ export enum PropertyTypes { /** * color: { * type: 'color', - * defaultValue: '#000000', + * value: '#000000', * }, */ COLOR = 'color', @@ -80,7 +80,7 @@ export enum PropertyTypes { * otherStyles: { * type: csf.PropertyTypes.OBJECT, * label: 'Styles', - * defaultValue: { + * value: { * border: '2px dashed silver', * borderRadius: 10, * padding: 10, @@ -93,7 +93,7 @@ export enum PropertyTypes { * items: { * type: csf.PropertyTypes.ARRAY, * label: 'Items', - * defaultValue: ['Laptop', 'Book', 'Whiskey'], + * value: ['Laptop', 'Book', 'Whiskey'], * }, */ ARRAY = 'array', @@ -103,7 +103,7 @@ export enum PropertyTypes { * type: csf.PropertyTypes.FILES, * label: 'Happy Picture', * accept: 'image/*', - * defaultValue: [ + * value: [ * 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', * ], * }, @@ -124,7 +124,7 @@ export interface StoryPropertyBase { /** * a default value for the property */ - defaultValue?: T; + value?: T; /** * hide the label from the property editor @@ -132,7 +132,7 @@ export interface StoryPropertyBase { hideLabel?: boolean; /** * hide the property editor for this property - * will only use the defaultValue + * will only use the value */ hidden?: boolean; From e82f0ce692b0c6d4189810da828eaa58163f9c8a Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 23 Jan 2020 19:25:10 -0500 Subject: [PATCH 07/18] renamed StoryMetadata --- src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index c5728ce..311f2e4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -87,9 +87,9 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ }; /** - * csf story definition + * csf story metadata attached to the story export function */ -export interface CSFStory { +export interface StoryMetadata { story?: { /** * story name if differnet from the export name From 725c95843b7cbb5a5d22f1e96e36a44307d4c24b Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 24 Jan 2020 09:49:20 -0500 Subject: [PATCH 08/18] remove unused --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 311f2e4..e49c61e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import startCase from 'lodash/startCase'; -import { StoryProperties, StoryProperty, FieldTypes } from './properties'; +import { StoryProperties } from './properties'; export * from './properties'; From 0bf6408809f603cc0488833b08edac3a9cfcbcdf Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 24 Jan 2020 10:22:58 -0500 Subject: [PATCH 09/18] removed array type, sb specific --- src/properties.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index ed4cbf0..1d51333 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -256,8 +256,6 @@ export interface StoryProperties { [name: string]: StoryProperty; } -export type StoryPropertiesArray = StoryProperty[]; - /** * StoryValues are passed into the story function * either the default value or From a74008198a52be5070f3d57078435887d9357d5d Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 24 Jan 2020 10:32:01 -0500 Subject: [PATCH 10/18] added Array field type --- src/properties.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 1d51333..0f12b1e 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -176,6 +176,14 @@ export interface StoryPropertyFiles extends StoryPropertyBase { accept?: string; } +export interface StoryPropertyArray extends StoryPropertyBase { + type: PropertyTypes.ARRAY; + /** + * the array items separator, by dfault comma + */ + separator?: string; +} + export interface StoryPropertyObject extends StoryPropertyBase { type: PropertyTypes.OBJECT; } @@ -241,11 +249,12 @@ export type StoryProperty = | StoryPropertyBoolean | StoryPropertyColor | StoryPropertyDate - | StoryPropertyFiles | StoryPropertyObject | StoryPropertyButton | StoryPropertyOptions - | StoryPropertyNumber; + | StoryPropertyNumber + | StoryPropertyArray + | StoryPropertyFiles; /** * StoryProperties are defined in key value pairs From 2381349782cfcc42517d860f979e44cb90b3e830 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 24 Jan 2020 17:04:02 -0500 Subject: [PATCH 11/18] date field --- src/properties.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/properties.ts b/src/properties.ts index 0f12b1e..5109f2e 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -163,7 +163,7 @@ export interface StoryPropertyColor extends StoryPropertyBase { type: PropertyTypes.COLOR; } -export interface StoryPropertyDate extends StoryPropertyBase { +export interface StoryPropertyDate extends StoryPropertyBase { type: PropertyTypes.DATE; } From b9ef57699748e133444a954cddc8dc0453ec9688 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 25 Jan 2020 02:27:09 -0500 Subject: [PATCH 12/18] remove storyvalues --- src/properties.ts | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 5109f2e..81269a6 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -197,15 +197,26 @@ export interface StoryPropertyButton extends StoryPropertyBase { onClick?: (prop: StoryPropertyButton) => void; } -export interface StoryPropertyOptions - extends StoryPropertyBase { +export type OptionsValueType = string | string[] | { [key: string]: string }; +export type OptionsListType = { [key: string]: OptionsValueType } | OptionsValueType[]; + +/** + * list of options can be + * 1. key-value pair object + * 2. array of strings + * 3. array of key-value pair objects + */ + +export interface StoryPropertyOptions extends StoryPropertyBase { type: PropertyTypes.OPTIONS; + options: OptionsListType; /** - * for options type fields + * how to render slecting the options: + * default is 'select' */ - display?: 'select' | 'radio' | 'inline-radio' | 'multi-select' | 'check' | 'inline-check'; + display?: 'select' | 'multi-select' | 'radio' | 'inline-radio' | 'check' | 'inline-check'; } export interface StoryPropertyNumber extends StoryPropertyBase { @@ -264,12 +275,3 @@ export type StoryProperty = export interface StoryProperties { [name: string]: StoryProperty; } - -/** - * StoryValues are passed into the story function - * either the default value or - * if a property editor is installed, can be modified - */ -export interface StoryValues { - [name: string]: any; -} From d90a1e90332d156176a95f3425c04c024b1e9014 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 25 Jan 2020 10:22:20 -0500 Subject: [PATCH 13/18] fixed typos --- src/index.ts | 2 +- src/properties.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/index.ts b/src/index.ts index e49c61e..5a949e5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -92,7 +92,7 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ export interface StoryMetadata { story?: { /** - * story name if differnet from the export name + * story name if different from the export name */ name?: string; diff --git a/src/properties.ts b/src/properties.ts index 81269a6..5459696 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -1,6 +1,6 @@ /** * Property field types - * examples are propvided for the different types: + * examples are provided for the different types: * */ export enum PropertyTypes { @@ -112,7 +112,7 @@ export enum PropertyTypes { } export interface StoryPropertyBase { - type: string; + type: PropertyTypes; /** * label to display next to the field editor @@ -148,8 +148,8 @@ export interface StoryPropertyText extends StoryPropertyBase { type: PropertyTypes.TEXT; /** - * placehlder for empty properties - * either undefined defautValue + * placeholder for empty properties + * either undefined initial value * or user clears the field */ placeholder?: string; @@ -170,7 +170,7 @@ export interface StoryPropertyDate extends StoryPropertyBase { export interface StoryPropertyFiles extends StoryPropertyBase { type: PropertyTypes.FILES; /** - * type of files to acept user to open + * type of files to accept user to open * ex 'image/*', */ accept?: string; @@ -231,12 +231,12 @@ export interface StoryPropertyNumber extends StoryPropertyBase { range?: boolean; /** - * minimum allowed value for numeric propery + * minimum allowed value for numeric property */ min?: number; /** - * maximum allowed value for numeric propery + * maximum allowed value for numeric property */ max?: number; From 81170ebc93fee870d174aa4bd6d60b1b299780b8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 25 Jan 2020 10:28:40 -0500 Subject: [PATCH 14/18] typo --- src/properties.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/properties.ts b/src/properties.ts index 5459696..72e9c94 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -179,7 +179,7 @@ export interface StoryPropertyFiles extends StoryPropertyBase { export interface StoryPropertyArray extends StoryPropertyBase { type: PropertyTypes.ARRAY; /** - * the array items separator, by dfault comma + * the array items separator, by default comma */ separator?: string; } From 5d35c34db61d15f6a9706f5a40acb5afedf29ddc Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 25 Jan 2020 14:17:10 -0500 Subject: [PATCH 15/18] datePicker, timePicker --- src/properties.ts | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 72e9c94..8ed1504 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -165,6 +165,18 @@ export interface StoryPropertyColor extends StoryPropertyBase { export interface StoryPropertyDate extends StoryPropertyBase { type: PropertyTypes.DATE; + /** + * whether to display a date picker (calendar). + * default: true + */ + datePicker?: boolean; + + /** + * whether to display a time picker (calendar). + * default: true + */ + + timePicker?: boolean; } export interface StoryPropertyFiles extends StoryPropertyBase { @@ -197,8 +209,17 @@ export interface StoryPropertyButton extends StoryPropertyBase { onClick?: (prop: StoryPropertyButton) => void; } -export type OptionsValueType = string | string[] | { [key: string]: string }; -export type OptionsListType = { [key: string]: OptionsValueType } | OptionsValueType[]; +export type OptionsValueType = + | string + | number + | string[] + | number[] + | { label: string; value: any }; + +/** + * value/label pairs or array of OptionsValueType + */ +export type OptionsListType = { [key: string]: string } | OptionsValueType[]; /** * list of options can be From dabd642bb70bba1c0e41bc62eacaaa2d15922361 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 28 Jan 2020 11:46:19 -0500 Subject: [PATCH 16/18] added maxRows to text type --- src/properties.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/properties.ts b/src/properties.ts index 8ed1504..1704a15 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -153,6 +153,12 @@ export interface StoryPropertyText extends StoryPropertyBase { * or user clears the field */ placeholder?: string; + + /** + * number of rows in a TextArea field + * by default, only 1 row = means a Input field + */ + maxRows?: number; } export interface StoryPropertyBoolean extends StoryPropertyBase { @@ -223,7 +229,7 @@ export type OptionsListType = { [key: string]: string } | OptionsValueType[]; /** * list of options can be - * 1. key-value pair object + * 1. key-value pair object: in format { label: value } * 2. array of strings * 3. array of key-value pair objects */ From e329b858b2534a3a8286a36c415e2def34e5d3d8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 28 Jan 2020 20:13:41 -0500 Subject: [PATCH 17/18] added order fied --- src/properties.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/properties.ts b/src/properties.ts index 1704a15..33d72a3 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -142,6 +142,13 @@ export interface StoryPropertyBase { * for example different editor tabs */ groupId?: string; + + /** + * allows custom sorting of the properties + * if 'order' is not provided, the props + * will be sorted by the order/key of the object (unreliable) + */ + order?: number; } export interface StoryPropertyText extends StoryPropertyBase { From a65b41a160cd674c8d5c89d2de617e5fa1c94221 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 30 Jan 2020 15:18:36 +0100 Subject: [PATCH 18/18] apply @BeInLife 's comment about generic type for StoryPropertyOptions --- src/properties.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/properties.ts b/src/properties.ts index 33d72a3..159f375 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -222,7 +222,8 @@ export interface StoryPropertyButton extends StoryPropertyBase { onClick?: (prop: StoryPropertyButton) => void; } -export type OptionsValueType = +export type OptionsValueType = + | T | string | number | string[] @@ -232,7 +233,7 @@ export type OptionsValueType = /** * value/label pairs or array of OptionsValueType */ -export type OptionsListType = { [key: string]: string } | OptionsValueType[]; +export type OptionsListType = { [key: string]: T } | OptionsValueType[]; /** * list of options can be @@ -241,12 +242,12 @@ export type OptionsListType = { [key: string]: string } | OptionsValueType[]; * 3. array of key-value pair objects */ -export interface StoryPropertyOptions extends StoryPropertyBase { +export interface StoryPropertyOptions extends StoryPropertyBase> { type: PropertyTypes.OPTIONS; - options: OptionsListType; + options: OptionsListType; /** - * how to render slecting the options: + * how to render selecting the options: * default is 'select' */