@storybook/addon-knobs#withKnobs TypeScript Examples
The following examples show how to use
@storybook/addon-knobs#withKnobs.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: _module.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
storiesOf(`${COMPONENT_SECTION_NAME}/List Item Tag`, module)
.addDecorator(
moduleMetadata({
imports: [ListItemTagModule, MatIconModule, UtilModule, InfoListItemModule],
})
)
.addDecorator(withKnobs)
.addDecorator(storyWrapper())
.addDecorator(infoListItemWrapper())
.addParameters({
...STORY_PARAMS,
notes: { markdown: getReadMe('ListItemTag.md') },
})
.add('within an InfoListItem', withinAnInfoListItem);
Example #2
| Source File: index.ts From alauda-ui with MIT License | 6 votes |
|
storiesOf('Accordion', module)
.addDecorator(withKnobs)
.add('accordion', () => {
const multi = boolean('multi', false);
const background = boolean('background', true);
return {
moduleMetadata: {
imports: [BrowserAnimationsModule, AccordionModule],
},
template: /* HTML */ `
<aui-accordion
[multi]="multi"
[background]="background"
>
<aui-accordion-item [disabled]="true">
<div auiAccordionItemHeader>header1</div>
<div>accordion item content1</div>
</aui-accordion-item>
<aui-accordion-item>
<div auiAccordionItemHeader>header2</div>
<div>accordion item content2</div>
</aui-accordion-item>
<aui-accordion-item>
<div auiAccordionItemHeader>header3</div>
<div>accordion item content3</div>
</aui-accordion-item>
</aui-accordion>
`,
props: {
multi,
background,
},
};
});
Example #3
| Source File: Stream.stories.tsx From stream-react with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
adUrl.story = {
decorators: [
withKnobs({
// Necessary to prevent adUrl from being escaped
// https://github.com/storybookjs/storybook/issues/4445
escapeHTML: false,
}),
],
};
Example #4
| Source File: _module.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
storiesOf(`${COMPONENT_SECTION_NAME}/User Menu`, module)
.addDecorator(
moduleMetadata({
imports: [
BrowserAnimationsModule,
MatToolbarModule,
UserMenuModule,
InfoListItemModule,
MatListModule,
MatDividerModule,
UtilModule,
MatIconModule,
],
})
)
.addDecorator(withKnobs)
// @accessibility
.addDecorator(withA11y)
.addDecorator(storyWrapper())
.addParameters({
...STORY_PARAMS,
notes: { markdown: userMenuReadMe },
})
.add(README_STORY_NAME, getReadMeStory)
.add(WITH_MIN_PROPS_STORY_NAME, withBasicConfig)
.add('with non-text avatar', withNonTextAvatar)
.add('with a menu header', withMenuHeader)
.add('with menu placement options', withMenuPlacement)
.add('with custom menu', withCustomMenu)
.add('with full config', withFullConfig);
Example #5
| Source File: windowNotice.stories.tsx From skin-react with MIT License | 5 votes |
|
story: any = {
title: Category.SKINDS6,
component: WindowNotice,
decorators: [withKnobs, withA11y]
}
Example #6
| Source File: config.ts From substrate-api-explorer with Apache License 2.0 | 5 votes |
|
// Apply decorators
addDecorator(withKnobs)
Example #7
| Source File: App.tsx From react-native-base-ui with MIT License | 5 votes |
|
addDecorator(withKnobs);
Example #8
| Source File: config.tsx From natds-rn with ISC License | 5 votes |
|
addDecorator(
withKnobs({
escapeHTML: false,
}),
);
Example #9
| Source File: ReactPasswordChecklist.stories.tsx From react-password-checklist with MIT License | 5 votes |
|
storiesOf("ReactPasswordChecklist", module)
.addDecorator(withKnobs)
.add("Default", () => (
<ReactPasswordChecklist
value={text("Password", "")}
valueAgain={text("Password Again", "")}
minLength={number("Minimum Length", 8)}
maxLength={number("Maximum Length", 16)}
onChange={action("onChange")}
rtl={boolean('rtl', getDirection() == 'rtl')}
rules={
array("Rules", [
"minLength",
"specialChar",
"number",
"capital",
"match",
"notEmpty",
"maxLength",
"lowercase",
]) as Array<RuleNames>
}
/>
))
.add("Custom Messages", () => (
<ReactPasswordChecklist
value={text("Password", "")}
valueAgain={text("Password Again", "")}
minLength={number("Minimum Length", 8)}
onChange={action("onChange")}
rtl={boolean('rtl', getDirection() == 'rtl')}
rules={
array("Rules", [
"minLength",
"specialChar",
"number",
"capital",
"match",
]) as Array<RuleNames>
}
messages={{
minLength: "La contraseña tiene más de 8 caracteres.",
specialChar: "La contraseña tiene caracteres especiales.",
number: "La contraseña tiene un número.",
capital: "La contraseña tiene una letra mayúscula.",
match: "Las contraseñas coinciden.",
}}
/>
)).add("Custom Messages RTL (Persian)", () => (
<ReactPasswordChecklist
value={text("Password", "")}
valueAgain={text("Password Again", "")}
minLength={8}
onChange={action("onChange")}
rtl={true}
rules={
array("Rules", [
"minLength",
"specialChar",
"number",
"capital",
]) as Array<RuleNames>
}
messages={{
minLength: "رمز عبور باید حداقل ۸ کارکتر باشد.",
specialChar: "رمز عبور باید شامل کاراکترهای خاص (نمادها) باشد",
number: "رمز عبور باید شامل اعداد باشد ",
capital: "رمز عبور باید ترکیبی از حروف کوچک و بزرگ باشد.",
}}
/>
))
Example #10
| Source File: 2-tgButton.stories.ts From taiga-front-next with GNU Affero General Public License v3.0 | 5 votes |
|
storiesOf('tgButton', module)
.addDecorator(withKnobs)
.addDecorator(
moduleMetadata({
imports: [
CommonComponentsModule,
],
})
)
.add('Primary button', () => {
const buttonText = text('Content', faker.hacker.verb());
const buttonDisabled = boolean('Disabled', false);
const loading = boolean('Loading', false);
const variant = select(
'Variant',
{
primary: 'primary',
secondary: 'secondary',
flat: 'flat',
},
'primary'
);
return {
template: `
<button tg-button
[loading]="loading"
[variant]="variant"
disabled="buttonDisabled ? 'disabled' : null">
{{buttonText}}
</button>
`,
props: {
buttonText,
buttonDisabled,
loading,
variant,
},
};
});
Example #11
| Source File: preview.ts From grafana-chinese with Apache License 2.0 | 5 votes |
|
addDecorator(withKnobs);
Example #12
| Source File: icon.stories.tsx From skin-react with MIT License | 5 votes |
|
story: any = {
title: Category.SKINDS6,
component: Icon,
decorators: [withKnobs, withA11y]
}
Example #13
| Source File: index.ts From alauda-ui with MIT License | 5 votes |
|
storiesOf('Paginator', module)
.addDecorator(withKnobs)
.add('chinese', () => {
const layout = text('layout', 'total,pager,sizes,jumper,content');
const currentPage = number('currentPage', 1);
const pageSize = number('pageSize', 20);
const total = number('total', 350);
const pageSizeOptions = array('pageSizeOptions', ['10', '20', '50']);
const disabled = boolean('disabled', false);
return {
moduleMetadata: {
imports: [PaginatorModule],
providers: [
{
provide: PaginatorIntl,
useClass: PaginatorZh,
},
],
},
template: /* HTML */ `
<aui-paginator
[layout]="layout"
[(currentPage)]="currentPage"
[(pageSize)]="pageSize"
[total]="total"
[pageSizeOptions]="pageSizeOptions"
[disabled]="disabled"
>
custom content
</aui-paginator>
`,
props: {
layout,
currentPage,
pageSize,
total,
pageSizeOptions,
disabled,
},
};
})
.add('english', () => {
const currentPage = number('currentPage', 1);
const pageSize = number('pageSize', 20);
const total = number('total', 150);
const pageSizeOptions = array('pageSizeOptions', ['10', '20', '50']);
return {
moduleMetadata: {
imports: [PaginatorModule],
},
template: /* HTML */ `
<aui-paginator
layout="total,pager,sizes,jumper"
[(currentPage)]="currentPage"
[(pageSize)]="pageSize"
[total]="total"
[pageSizeOptions]="pageSizeOptions"
></aui-paginator>
`,
props: {
currentPage,
pageSize,
total,
pageSizeOptions,
},
};
});
Example #14
| Source File: actionable.stories.tsx From skin-react with MIT License | 5 votes |
|
story: any = {
title: Category.SKINDS6,
component: Actionable,
decorators: [withKnobs, withA11y, withSkinIcons]
}
Example #15
| Source File: index.ts From alauda-ui with MIT License | 4 votes |
|
storiesOf('Input', module)
.addDecorator(withKnobs)
.add('input', () => ({
moduleMetadata: {
imports: [InputModule, FormsModule],
},
template: /* HTML */ `
<div>
<p style="margin-top: 26px;">Input:</p>
<input
style="margin-top: 16px;"
size="large"
aui-input
[(ngModel)]="value"
placeholder="placeholder"
/>
<input
style="margin-top: 16px;"
size="medium"
aui-input
[(ngModel)]="value"
placeholder="placeholder"
/>
<input
readonly
style="margin-top: 16px;"
size="small"
aui-input
[(ngModel)]="value"
placeholder="readonly"
/>
<input
disabled
style="margin-top: 16px;"
size="mini"
aui-input
[(ngModel)]="value"
placeholder="disabled"
/>
<p style="margin-top: 26px;">Textarea:</p>
<textarea
style="margin-top: 16px;"
size="large"
aui-input
[(ngModel)]="value"
placeholder="size:large, default 3 rows"
></textarea>
<textarea
style="margin-top: 16px;"
size="medium"
aui-input
[(ngModel)]="value"
placeholder="size:medium, default 3 rows"
></textarea>
<textarea
readonly
style="margin-top: 16px;"
size="small"
aui-input
[(ngModel)]="value"
placeholder="size:small, default 3 rows"
></textarea>
<textarea
disabled
style="margin-top: 16px;"
size="mini"
aui-input
[(ngModel)]="value"
placeholder="size:mini, default 3 rows"
></textarea>
<p style="margin-top: 26px;">
Textarea with autosize (size:default = medium):
</p>
</div>
`,
}))
.add('input group', () => {
const disabled = boolean('disabled', false);
return {
moduleMetadata: {
imports: [InputModule, IconModule],
},
template: /* HTML */ `
<div style="margin-top: 20px;">
<aui-input-group>
<span auiInputAddonBefore>HTTPS</span>
<span auiInputAddonAfter>GB</span>
<aui-icon
auiInputPrefix
icon="search_s"
></aui-icon>
<aui-icon
auiInputSuffix
icon="spinner"
></aui-icon>
<input
aui-input
size="large"
[disabled]="disabled"
placeholder="placeholder"
/>
</aui-input-group>
</div>
<div style="margin-top: 20px;">
<aui-input-group>
<span auiInputAddonBefore>HTTPS</span>
<span auiInputAddonAfter>GB</span>
<aui-icon
auiInputPrefix
icon="search_s"
></aui-icon>
<aui-icon
auiInputSuffix
icon="spinner"
></aui-icon>
<input
aui-input
size="medium"
[disabled]="disabled"
placeholder="placeholder"
/>
</aui-input-group>
</div>
<div style="margin-top: 20px;">
<aui-input-group>
<span auiInputAddonBefore>HTTPS</span>
<span auiInputAddonAfter>GB</span>
<aui-icon
auiInputPrefix
icon="search_s"
></aui-icon>
<aui-icon
auiInputSuffix
icon="spinner"
></aui-icon>
<input
aui-input
size="small"
[disabled]="disabled"
placeholder="placeholder"
/>
</aui-input-group>
</div>
<div style="margin-top: 20px;">
<aui-input-group>
<span auiInputAddonBefore>HTTPS</span>
<span auiInputAddonAfter>GB</span>
<aui-icon
auiInputPrefix
icon="search_s"
></aui-icon>
<aui-icon
auiInputSuffix
icon="spinner"
></aui-icon>
<input
aui-input
size="mini"
[disabled]="disabled"
placeholder="placeholder"
/>
</aui-input-group>
</div>
`,
props: {
disabled,
},
};
})
.add('tags input', () => {
const value = ['app', 'service'];
const pattern = /^a/;
const sizeOptions = {
[ComponentSize.Large]: ComponentSize.Large,
[ComponentSize.Medium]: ComponentSize.Medium,
[ComponentSize.Small]: ComponentSize.Small,
[ComponentSize.Mini]: ComponentSize.Mini,
};
const checkArrFn: ValidatorFn = control => {
const value = control.value as string[];
if (value.includes('b')) {
return { patternB: true };
}
return null;
};
const control = new FormControl(value, { validators: [checkArrFn] });
const size = select('size', sizeOptions, ComponentSize.Medium);
const allowRepeat = boolean('allowRepeat', true);
const allowEmpty = boolean('allowEmpty', false);
const checkFn: ValidatorFn = control => {
const value = control.value as string;
if (value.startsWith('a')) {
return { patternA: true };
}
return null;
};
const printStatus = () => {
console.log('print control status to make sure sync', control.status);
};
return {
moduleMetadata: { imports: [InputModule, ReactiveFormsModule] },
template: /* HTML */ `
<aui-tags-input
[size]="size"
[formControl]="control"
[inputValidator]="checkFn"
[clearable]="true"
[allowRepeat]="allowRepeat"
[allowEmpty]="allowEmpty"
placeholder="placeholder"
[maxRowCount]="3"
></aui-tags-input>
{{ control.value | json }} status:{{control.status}}
<br />
<button (click)="printStatus()">submit</button>
<br />
<br />
<div>只读标签，不可删除</div>
<aui-tags-input
[size]="size"
[formControl]="control"
[inputValidator]="checkFn"
[maxRowCount]="3"
[clearable]="true"
[readonlyTags]="['service']"
[allowRepeat]="allowRepeat"
[allowEmpty]="allowEmpty"
placeholder="placeholder"
></aui-tags-input>
`,
props: {
checkFn,
control,
pattern,
value,
size,
allowRepeat,
allowEmpty,
printStatus,
},
};
})
.add('search input', () => {
const sizeOptions = {
[ComponentSize.Medium]: ComponentSize.Medium,
[ComponentSize.Small]: ComponentSize.Small,
};
const size = select('size', sizeOptions, ComponentSize.Medium);
const searchButton = boolean('searchButton', false);
const searching = boolean('searching', false);
const clearable = boolean('clearable', false);
const disabled = boolean('disabled', false);
const keyword = text('keyword', 'keyword');
const onChangeHandler = action('change');
const onSearchHandler = action('search');
const onClearHandler = action('clear');
return {
moduleMetadata: {
imports: [InputModule],
},
template: /* HTML */ `
<aui-search
[size]="size"
[searchButton]="searchButton"
[searching]="searching"
[clearable]="clearable"
[disabled]="disabled"
[(keyword)]="keyword"
placeholder="placeholder"
(search)="onSearchHandler($event)"
(keywordChange)="onChangeHandler($event)"
(clear)="onClearHandler($event)"
></aui-search>
{{ keyword }}
`,
props: {
searchButton,
searching,
clearable,
disabled,
keyword,
size,
onChangeHandler,
onSearchHandler,
onClearHandler,
},
};
})
.add('number input', () => {
const sizeOptions = {
[ComponentSize.Medium]: ComponentSize.Medium,
[ComponentSize.Small]: ComponentSize.Small,
};
const size = select('size', sizeOptions, ComponentSize.Medium);
const min = number('min', 0);
const max = number('max', 10);
const step = number('step', 1);
const precision = number('precision', 1);
const value = number('value', 4);
const disabled = boolean('disabled', false);
const controls = boolean('controls', true);
return {
moduleMetadata: {
imports: [InputModule, FormsModule],
},
template: /* HTML */ `
<aui-number-input
[size]="size"
[step]="step"
[precision]="precision"
[min]="min"
[max]="max"
[controls]="controls"
[disabled]="disabled"
placeholder="placeholder"
[(ngModel)]="value"
></aui-number-input>
<br />
{{ value | json }}
`,
props: {
size,
step,
precision,
min,
max,
value,
disabled,
controls,
},
};
})
.add('autosize', () => {
const minRows = number('minRows', 0);
const maxRows = number('maxRows', 0);
const value = text('value', 'Hello world!');
return {
moduleMetadata: {
imports: [FormsModule, InputModule],
},
template: /* HTML */ `
<textarea
[autosize]="{ minRows: minRows, maxRows: maxRows }"
[(ngModel)]="value"
></textarea>
`,
props: {
minRows,
maxRows,
value,
},
};
});
