mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 23:07:06 +00:00
[@storybook__*] Delete Storybook types (#38447)
* Delete @storybook/addon-actions * Delete @storybook/addon-backgrounds * Delete @storybook/addon-centered * Delete @storybook/addon-jest * Delete @storybook/addon-knobs * Delete @storybook/addon-links * Delete @storybook/addon-options * Delete @storybook/addon-viewport * Delete @storybook/addons * Delete @storybook/channels * Delete @storybook/html * Delete @storybook/preact * Delete @storybook/react * Delete @storybook/react-native * Delete @storybook/vue * Fix for @storybook/preact * Fix test errors * Revert removing @storybook/react types
This commit is contained in:
Michaël De Boey
committed by
Armando Aguirre
Armando Aguirre
parent
f2d688ab20
commit
ab4aed49ce
@@ -3456,12 +3456,96 @@
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.1.1"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-actions",
|
||||
"typingsPackageName": "storybook__addon-actions",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-backgrounds",
|
||||
"typingsPackageName": "storybook__addon-backgrounds",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-centered",
|
||||
"typingsPackageName": "storybook__addon-centered",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-jest",
|
||||
"typingsPackageName": "storybook__addon-jest",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-knobs",
|
||||
"typingsPackageName": "storybook__addon-knobs",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-links",
|
||||
"typingsPackageName": "storybook__addon-links",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-notes",
|
||||
"typingsPackageName": "storybook__addon-notes",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.0.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-options",
|
||||
"typingsPackageName": "storybook__addon-options",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addon-viewport",
|
||||
"typingsPackageName": "storybook__addon-viewport",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/addons",
|
||||
"typingsPackageName": "storybook__addons",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/channels",
|
||||
"typingsPackageName": "storybook__channels",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/html",
|
||||
"typingsPackageName": "storybook__html",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/preact",
|
||||
"typingsPackageName": "storybook__preact",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.1"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/react-native",
|
||||
"typingsPackageName": "storybook__react-native",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "@storybook/vue",
|
||||
"typingsPackageName": "storybook__vue",
|
||||
"sourceRepoURL": "https://github.com/storybooks/storybook",
|
||||
"asOfVersion": "5.2.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "stream-mock",
|
||||
"typingsPackageName": "stream-mock",
|
||||
|
||||
-17
@@ -1,17 +0,0 @@
|
||||
// Type definitions for @storybook/addon-actions 3.4
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/actions
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>, June <https://github.com/jicjjang>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
export type HandlerFunction = (...args: any[]) => undefined;
|
||||
export type DecoratorFunction = (args: any[]) => any[];
|
||||
export interface Options {
|
||||
depth?: number;
|
||||
clearOnStoryChange?: boolean;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
export function decorateAction(decorators: DecoratorFunction[]): (name: string, options?: Options) => HandlerFunction;
|
||||
export function configureActions(options: Options): undefined;
|
||||
export function action(name: string): HandlerFunction;
|
||||
@@ -1,43 +0,0 @@
|
||||
/// <reference types="storybook__react" />
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action, decorateAction, configureActions } from '@storybook/addon-actions';
|
||||
|
||||
configureActions({
|
||||
depth: 100
|
||||
});
|
||||
|
||||
const firstArgAction = decorateAction([
|
||||
args => args.slice(0, 1)
|
||||
]);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('action', () => (
|
||||
<button onClick={ action('my-action') }>
|
||||
Hello World!
|
||||
</button>
|
||||
))
|
||||
.add('decorated action', () => (
|
||||
<button onClick={ firstArgAction('button-click') }>
|
||||
Hello World!
|
||||
</button>
|
||||
));
|
||||
|
||||
interface CustomComponentProps {
|
||||
id: string;
|
||||
setValues(id: string, values: string[]): void;
|
||||
}
|
||||
class CustomComponent extends React.Component<CustomComponentProps> {
|
||||
setSomeValues = () => {
|
||||
this.props.setValues(this.props.id, ['one', 'two', 'three']);
|
||||
}
|
||||
render() {
|
||||
return <button onClick={this.setSomeValues}>Set some values</button>;
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('CustomComponent', module)
|
||||
.add('decorated custom action', () => (
|
||||
<CustomComponent id="test" setValues={firstArgAction('set-values')} />
|
||||
));
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-actions": [
|
||||
"storybook__addon-actions"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addon-actions-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
-20
@@ -1,20 +0,0 @@
|
||||
// Type definitions for @storybook/addon-backgrounds 4.1
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/backgrounds
|
||||
// Definitions by: HyunSeob <https://github.com/hyunseob>
|
||||
// An Dohyung <https://github.com/adhrinae>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import { StoryDecorator } from '@storybook/react';
|
||||
|
||||
export interface Background {
|
||||
name: string;
|
||||
value: string;
|
||||
default?: boolean;
|
||||
}
|
||||
export function withBackgrounds(backgrounds: Background[]): StoryDecorator;
|
||||
|
||||
// [DEPRECATED] Use `withBackgrounds` function instead.
|
||||
declare function backgrounds(backgrounds: Background[]): StoryDecorator;
|
||||
|
||||
export default backgrounds;
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withBackgrounds } from '@storybook/addon-backgrounds';
|
||||
|
||||
storiesOf('Text', module)
|
||||
.addDecorator(
|
||||
withBackgrounds([
|
||||
{
|
||||
name: 'white',
|
||||
value: '#fff',
|
||||
default: true
|
||||
},
|
||||
{
|
||||
name: 'black',
|
||||
value: '#000'
|
||||
}
|
||||
])
|
||||
)
|
||||
.add('default', () => <p>This is just sample.</p>);
|
||||
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-backgrounds": [
|
||||
"storybook__addon-backgrounds"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addon-backgrounds-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
@@ -1,2 +0,0 @@
|
||||
import centered from "./index";
|
||||
export default centered;
|
||||
-11
@@ -1,11 +0,0 @@
|
||||
// Type definitions for @storybook/addon-centered 3.4
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/centered
|
||||
// Definitions by: kiyopikko <https://github.com/kiyopikko>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as React from "react";
|
||||
import { StoryDecorator } from "@storybook/react";
|
||||
|
||||
declare const centered: StoryDecorator;
|
||||
export default centered;
|
||||
@@ -1,2 +0,0 @@
|
||||
import centered from "./index";
|
||||
export default centered;
|
||||
-2
@@ -1,2 +0,0 @@
|
||||
import centered from "./index";
|
||||
export default centered;
|
||||
@@ -1,7 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import centered from "@storybook/addon-centered";
|
||||
|
||||
storiesOf("Centered", module)
|
||||
.addDecorator(centered)
|
||||
.add("Hello", () => <div>Hello</div>);
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": ["es6"],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": ["../"],
|
||||
"paths": {
|
||||
"@storybook/addon-centered": ["storybook__addon-centered"],
|
||||
"@storybook/react": ["storybook__react"]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"angular.d.ts",
|
||||
"index.d.ts",
|
||||
"react.d.ts",
|
||||
"mithril.d.ts",
|
||||
"storybook__addon-centered-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
-16
@@ -1,16 +0,0 @@
|
||||
// Type definitions for @storybook/addon-jest 3.4
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/jest
|
||||
// Definitions by: Matt Oliver <https://github.com/halfmatthalfcat>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import { StoryDecorator } from '@storybook/react';
|
||||
|
||||
export type SpecsFunction = (...specs: string[]) => StoryDecorator;
|
||||
|
||||
export interface Options {
|
||||
results: object;
|
||||
filesExt?: string;
|
||||
}
|
||||
|
||||
export function withTests(options: Options): SpecsFunction;
|
||||
@@ -1,53 +0,0 @@
|
||||
/// <reference types="storybook__react" />
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
const testDecorator = withTests({
|
||||
results: {
|
||||
numFailedTestSuites: 0,
|
||||
numFailedTests: 0,
|
||||
numPassedTestSuites: 1,
|
||||
numPassedTests: 1,
|
||||
numPendingTestSuites: 0,
|
||||
numPendingTests: 0,
|
||||
numRuntimeErrorTestSuites: 0,
|
||||
numTotalTestSuites: 1,
|
||||
numTotalTests: 1,
|
||||
startTime: 1533301378256,
|
||||
success: true,
|
||||
testResults: [
|
||||
{
|
||||
assertionResults: [
|
||||
{
|
||||
ancestorTitles: [
|
||||
'TestComponent',
|
||||
'Basic'
|
||||
],
|
||||
failureMessages: [],
|
||||
fullName: 'TestComponent Basic should render without error',
|
||||
location: null,
|
||||
status: 'passed',
|
||||
title: 'should render without error',
|
||||
}
|
||||
],
|
||||
endTime: 1533301381197,
|
||||
message: '',
|
||||
name: '/path/to/tests',
|
||||
startTime: 1533301379074,
|
||||
status: 'passed',
|
||||
summary: ''
|
||||
}
|
||||
],
|
||||
wasInterrupted: false,
|
||||
},
|
||||
});
|
||||
|
||||
storiesOf('Test', module)
|
||||
.addDecorator(testDecorator('test'))
|
||||
.add('test', () => (
|
||||
<button>
|
||||
Hello World!
|
||||
</button>
|
||||
));
|
||||
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-jest": [
|
||||
"storybook__addon-jest"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addon-jest-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
-1
@@ -1 +0,0 @@
|
||||
export * from './index';
|
||||
-111
@@ -1,111 +0,0 @@
|
||||
// Type definitions for @storybook/addon-knobs 5.0
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/knobs
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>
|
||||
// Martynas Kadisa <https://github.com/martynaskadisa>
|
||||
// A.MacLeay <https://github.com/amacleay>
|
||||
// Michael Loughry <https://github.com/MLoughry>
|
||||
// Alan Choi <https://github.com/alanhchoi>
|
||||
// Adam Zmenak <https://github.com/azmenak>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.0
|
||||
|
||||
import * as React from 'react';
|
||||
import { RenderFunction } from '@storybook/react';
|
||||
|
||||
export interface KnobOption<T> {
|
||||
value: T;
|
||||
type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date' | 'radios';
|
||||
}
|
||||
|
||||
export interface StoryContext {
|
||||
kind: string;
|
||||
story: string;
|
||||
}
|
||||
|
||||
export interface NumberOptions {
|
||||
range: boolean;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
}
|
||||
|
||||
export interface EmptyNumberOptions {
|
||||
range?: undefined;
|
||||
min?: undefined;
|
||||
max?: undefined;
|
||||
step?: undefined;
|
||||
}
|
||||
|
||||
export function knob<T>(name: string, options: KnobOption<T>): T;
|
||||
|
||||
export function text(name: string, value: string | null, groupId?: string): string;
|
||||
|
||||
export function boolean(name: string, value: boolean, groupId?: string): boolean;
|
||||
|
||||
export function files(label: string, accept: string, defaultValue: string[]): string[];
|
||||
|
||||
export function number(name: string, value: number, options?: NumberOptions | EmptyNumberOptions, groupId?: string): number;
|
||||
|
||||
export function color(name: string, value: string, groupId?: string): string;
|
||||
|
||||
export function object<T>(name: string, value: T, groupId?: string): T;
|
||||
|
||||
export function radios<T>(name: string, options: { [s: string]: T }, value?: T, groupId?: string): T;
|
||||
|
||||
export function select<T>(
|
||||
name: string,
|
||||
options: { [s: string]: T } | ReadonlyArray<T>,
|
||||
value: T,
|
||||
groupId?: string,
|
||||
): T;
|
||||
export function select<
|
||||
T extends Exclude<
|
||||
React.OptionHTMLAttributes<HTMLOptionElement>['value'],
|
||||
undefined
|
||||
>
|
||||
>(name: string, options: ReadonlyArray<T>, value: T, groupId?: string): T;
|
||||
|
||||
export function date(name: string, value?: Date, groupId?: string): number;
|
||||
|
||||
export function array<T>(name: string, value: ReadonlyArray<T>, separator?: string, groupId?: string): T[];
|
||||
|
||||
export function button(name: string, handler: () => any, groupId?: string): void;
|
||||
|
||||
export interface OptionsKnobOptions {
|
||||
display?:
|
||||
| "radio"
|
||||
| "inline-radio"
|
||||
| "check"
|
||||
| "inline-check"
|
||||
| "select"
|
||||
| "multi-select";
|
||||
}
|
||||
|
||||
export function optionsKnob<T>(
|
||||
label: string,
|
||||
values: {
|
||||
[key: string]: T;
|
||||
},
|
||||
defaultValue?: T,
|
||||
options?: OptionsKnobOptions
|
||||
): T;
|
||||
|
||||
export function optionsKnob<T>(
|
||||
label: string,
|
||||
values: {
|
||||
[key: string]: T;
|
||||
},
|
||||
defaultValue?: T[],
|
||||
options?: OptionsKnobOptions
|
||||
): T[];
|
||||
|
||||
export interface WrapStoryProps {
|
||||
context?: object;
|
||||
storyFn?: RenderFunction;
|
||||
channel?: object;
|
||||
knobStore?: object;
|
||||
initialContent?: object;
|
||||
}
|
||||
|
||||
export function withKnobs(storyFn: RenderFunction, context: StoryContext): React.ReactElement<WrapStoryProps>;
|
||||
export function withKnobsOptions(options: { debounce: boolean, timestamps: boolean }): (storyFn: RenderFunction, context: StoryContext) => React.ReactElement<WrapStoryProps>;
|
||||
-1
@@ -1 +0,0 @@
|
||||
export * from './index';
|
||||
@@ -1,159 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import {
|
||||
withKnobs,
|
||||
withKnobsOptions,
|
||||
number,
|
||||
color,
|
||||
files,
|
||||
object,
|
||||
boolean,
|
||||
text,
|
||||
select,
|
||||
date,
|
||||
array,
|
||||
button,
|
||||
knob,
|
||||
radios,
|
||||
optionsKnob as options,
|
||||
} from '@storybook/addon-knobs';
|
||||
|
||||
enum SomeEnum {
|
||||
Type1 = 1,
|
||||
Type2
|
||||
}
|
||||
|
||||
const stories = storiesOf('Example of Knobs', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
stories.addDecorator(withKnobsOptions({ debounce: true, timestamps: true }));
|
||||
|
||||
stories.add('with all knobs', () => {
|
||||
const name = text('Name', 'Tom Cary');
|
||||
const dob = date('DOB', new Date('January 20 1887'));
|
||||
|
||||
const bold = boolean('Bold', false);
|
||||
const selectedColor = color('Color', 'black');
|
||||
const favoriteNumber = number('Favorite Number', 42);
|
||||
const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 });
|
||||
const radioStation: string = radios('Favorite Radio Station', { 1100: "1100", 2200: "2200", 3300: "3300" });
|
||||
const luckyNumber: number = radios('Lucky Number', { 3: 3, 7: 7, 23: 23 });
|
||||
const textDecoration = select('Decoration', {
|
||||
None: 'none',
|
||||
Underline: 'underline',
|
||||
'Line-through': 'line-through'
|
||||
}, 'none');
|
||||
|
||||
const customStyle = object('Style', {
|
||||
fontFamily: 'Arial',
|
||||
padding: 20,
|
||||
});
|
||||
|
||||
const genericObject: string = object<string>('Some generic object', 'value');
|
||||
|
||||
type X = 'a' | 'b';
|
||||
|
||||
const enumSelectOptions: { [s: number]: string } = {};
|
||||
enumSelectOptions[SomeEnum.Type1] = "Type 1";
|
||||
enumSelectOptions[SomeEnum.Type2] = "Type 2";
|
||||
|
||||
const genericSelectV2: X = select<X>('Some generic select', { 'type a': 'a', 'type b': 'b' }, 'b');
|
||||
const genericSelectV2Enum: SomeEnum = select<SomeEnum>('Some generic select v2', { 'type a': SomeEnum.Type1, 'type b': SomeEnum.Type2 }, SomeEnum.Type2);
|
||||
|
||||
const genericArray: string[] = array<string>('Some generic array', ['red', 'green', 'blue']);
|
||||
|
||||
const genericKnob: X = knob<X>('Some generic knob', { value: 'a', type: 'text' });
|
||||
|
||||
button('Some button', () => console.log('Button knob clicked'));
|
||||
|
||||
const style = {
|
||||
...customStyle,
|
||||
fontWeight: bold ? 800 as 800 : 400 as 400, // tslint:disable-line no-unnecessary-type-assertion
|
||||
color: selectedColor,
|
||||
textDecoration
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
I'm {name} and I was born on "{new Date(dob)}"
|
||||
<p>My favorite number is {favoriteNumber}.</p>
|
||||
<p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
|
||||
<p>My favorite radio station is: {radioStation}</p>
|
||||
<p>My lucky number is {luckyNumber}.</p>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
stories.add('dynamic knobs', () => {
|
||||
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{text('compulsary', 'I must be here')}
|
||||
</div>
|
||||
{ showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null }
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// readonly option array: element can be typed string | number | string[]
|
||||
select('With readonly string array', ['hi'], 'hi');
|
||||
select('With readonly number array', [1, 2, 3, 4], 1);
|
||||
select('With readonly string[] array', [['a'], ['b', 'c']], ['a']);
|
||||
select('With mixed-typed element array', [1, 'hi', ['a']], 1);
|
||||
|
||||
type StringLiteralType = 'Apple' | 'Banana' | 'Grapes';
|
||||
const stringLiteralArray: StringLiteralType[] = ['Apple', 'Banana', 'Grapes'];
|
||||
|
||||
// type of value returned from `select` must be `StringLiteralType`.
|
||||
const _: StringLiteralType = select('With string literal array', stringLiteralArray, stringLiteralArray[0]);
|
||||
|
||||
type StringLiteralTypeUndefined = StringLiteralType | undefined;
|
||||
|
||||
const _Undefined: StringLiteralTypeUndefined = select(
|
||||
'With string literal array',
|
||||
stringLiteralArray,
|
||||
undefined,
|
||||
);
|
||||
|
||||
const optionsObject = {
|
||||
Apple: { taste: 'sweet', color: 'red' },
|
||||
Lemon: { taste: 'sour', color: 'yellow' }
|
||||
};
|
||||
select('With object', optionsObject, optionsObject.Apple);
|
||||
|
||||
const genericArray = array('With regular array', ['hi', 'there']);
|
||||
|
||||
const userInputArray = array('With readonly array', ['hi']);
|
||||
userInputArray.push('Make sure that the output is still mutable although the input need not be!');
|
||||
|
||||
// groups
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
text('label', 'default', groupId);
|
||||
boolean('label', true, groupId);
|
||||
number('label', 1, {}, groupId);
|
||||
color('label', '#ffffff', groupId);
|
||||
object('label', {}, groupId);
|
||||
array('label', [], ',', groupId);
|
||||
radios('label', {}, null, groupId);
|
||||
select<any>('label', { option: 'Option' }, null, groupId);
|
||||
files('label', 'image/*', []);
|
||||
date('label', new Date(), groupId);
|
||||
button('label', () => undefined, groupId);
|
||||
|
||||
// optionsKnob
|
||||
type Tool = 'hammer' | 'saw' | 'drill';
|
||||
const visibleToolOptions: { [key: string]: Tool } = { hammer: 'hammer', saw: 'saw', drill: 'drill' };
|
||||
|
||||
// test selecting one option
|
||||
const defaultVisibleTool = 'hammer';
|
||||
const singleSelection: Tool = options<Tool>('visibleTools', visibleToolOptions, defaultVisibleTool, {
|
||||
display: 'check',
|
||||
});
|
||||
|
||||
// test selecting multiple options
|
||||
const defaultVisibleTools: Tool[] = ['hammer'];
|
||||
const multiSelection: Tool[] = options<Tool>('visibleTools', visibleToolOptions, defaultVisibleTools, {
|
||||
display: 'check',
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-knobs": [
|
||||
"storybook__addon-knobs"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"angular.d.ts",
|
||||
"index.d.ts",
|
||||
"react.d.ts",
|
||||
"storybook__addon-knobs-tests.tsx",
|
||||
"vue.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
-1
@@ -1 +0,0 @@
|
||||
export * from './index';
|
||||
-17
@@ -1,17 +0,0 @@
|
||||
// Type definitions for @storybook/addon-links 3.3
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/links
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>,
|
||||
// Jesse Pinho <https://github.com/jessepinho>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export type LinkToFunction = (...args: any[]) => string;
|
||||
|
||||
export function linkTo<T>(
|
||||
book: string | LinkToFunction,
|
||||
kind?: string | LinkToFunction
|
||||
): () => void;
|
||||
|
||||
export function hrefTo(kind: string, story: string): Promise<string>;
|
||||
-6
@@ -1,6 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export default class LinkTo extends React.PureComponent<
|
||||
React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> &
|
||||
{ story: string, kind?: string }
|
||||
> {}
|
||||
@@ -1,20 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { hrefTo, linkTo } from '@storybook/addon-links';
|
||||
import LinkTo from '@storybook/addon-links/react';
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('First', () => (
|
||||
<button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
|
||||
))
|
||||
.add('Second', () => (
|
||||
<button onClick={linkTo('Button', 'First')}>Go to "First"</button>
|
||||
))
|
||||
.add('With function', () => (
|
||||
<button onClick={linkTo((arg1, arg2) => 'Button', () => 'First')}>Go to "First"</button>
|
||||
))
|
||||
.add('With <LinkTo> component', () => (
|
||||
<LinkTo story="First" kind="Button"><button>Go to "First"</button></LinkTo>
|
||||
));
|
||||
|
||||
hrefTo('Button', 'First').then(link => link);
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-links": [
|
||||
"storybook__addon-links"
|
||||
],
|
||||
"@storybook/addon-links/react": [
|
||||
"storybook__addon-links/react"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react.d.ts",
|
||||
"storybook__addon-links-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"no-unnecessary-generics": false
|
||||
}
|
||||
}
|
||||
-37
@@ -1,37 +0,0 @@
|
||||
// Type definitions for @storybook/addon-options 4.0
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/addons/options
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>
|
||||
// Simon Helle Nielsen <https://github.com/simonhn>
|
||||
// A.MacLeay <https://github.com/amacleay>
|
||||
// Gaetan Maisse <https://github.com/gaetanmaisse>
|
||||
// Adam Misiorny <https://github.com/adam187>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import { StoryDecorator } from '@storybook/react';
|
||||
|
||||
export interface Options {
|
||||
name?: string;
|
||||
url?: string;
|
||||
goFullScreen?: boolean;
|
||||
showLeftPanel?: boolean; // deprecated, use showStoriesPanel
|
||||
showStoriesPanel?: boolean;
|
||||
showDownPanel?: boolean; // deprecated; use showAddonPanel
|
||||
showAddonPanel?: boolean;
|
||||
showSearchBox?: boolean;
|
||||
downPanelInRight?: boolean; // deprecated; use addonPanelInRight
|
||||
addonPanelInRight?: boolean;
|
||||
sortStoriesByKind?: boolean;
|
||||
hierarchySeparator?: RegExp | string;
|
||||
hierarchyRootSeparator?: RegExp | string;
|
||||
sidebarAnimations?: boolean;
|
||||
selectedAddonPanel?: string;
|
||||
enableShortcuts?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use withOptions instead
|
||||
*/
|
||||
export function setOptions(options: Options): void;
|
||||
|
||||
export function withOptions(options: Options): StoryDecorator;
|
||||
@@ -1,54 +0,0 @@
|
||||
import { addDecorator } from '@storybook/react';
|
||||
import { setOptions, withOptions } from '@storybook/addon-options';
|
||||
|
||||
addDecorator(
|
||||
withOptions({
|
||||
name: 'My Storybook',
|
||||
url: 'https://example.com',
|
||||
goFullScreen: false,
|
||||
showStoriesPanel: false,
|
||||
showAddonPanel: false,
|
||||
showSearchBox: false,
|
||||
addonPanelInRight: false,
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: /\//,
|
||||
hierarchyRootSeparator: /\|/,
|
||||
sidebarAnimations: false,
|
||||
selectedAddonPanel: 'storybook/actions/action-panel',
|
||||
enableShortcuts: false
|
||||
})
|
||||
);
|
||||
|
||||
setOptions({
|
||||
name: 'My Storybook',
|
||||
url: 'https://example.com',
|
||||
goFullScreen: false,
|
||||
showStoriesPanel: false,
|
||||
showAddonPanel: false,
|
||||
showSearchBox: false,
|
||||
addonPanelInRight: false,
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: /\//,
|
||||
hierarchyRootSeparator: /\|/,
|
||||
sidebarAnimations: false,
|
||||
selectedAddonPanel: 'storybook/actions/action-panel',
|
||||
enableShortcuts: false
|
||||
});
|
||||
|
||||
setOptions({
|
||||
name: 'My Storybook - deprecated options',
|
||||
url: 'https://example.com',
|
||||
goFullScreen: false,
|
||||
showLeftPanel: false,
|
||||
showDownPanel: false,
|
||||
showSearchBox: false,
|
||||
downPanelInRight: false,
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: /\//,
|
||||
hierarchyRootSeparator: /\|/
|
||||
});
|
||||
|
||||
setOptions({
|
||||
hierarchySeparator: '.',
|
||||
hierarchyRootSeparator: '#',
|
||||
});
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-options": [
|
||||
"storybook__addon-options"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addon-options-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
-42
@@ -1,42 +0,0 @@
|
||||
// Type definitions for @storybook/addon-viewport 4.1
|
||||
// Project: https://github.com/storybookjs/storybook/tree/master/addons/viewport
|
||||
// Definitions by: Vincent Tunru <https://github.com/Vinnl>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import { StoryDecorator } from '@storybook/react';
|
||||
|
||||
export type ViewportName = string;
|
||||
|
||||
export interface ViewportProperties {
|
||||
name: ViewportName;
|
||||
styles: {
|
||||
width?: string,
|
||||
height?: string,
|
||||
[styleName: string]: any,
|
||||
};
|
||||
type?: 'desktop' | 'tablet' | 'mobile' | string;
|
||||
}
|
||||
export interface ViewportDecoratorOptions {
|
||||
/**
|
||||
* Default viewport
|
||||
*/
|
||||
name?: ViewportName;
|
||||
/**
|
||||
* Called whenever different viewport is selected from the dropdown
|
||||
*/
|
||||
onViewportChange: (change: { viewport: ViewportProperties }) => void;
|
||||
}
|
||||
export interface ViewportDefinitions {
|
||||
[viewportKey: string]: ViewportProperties;
|
||||
}
|
||||
export type Viewport = ViewportName | ViewportDecoratorOptions;
|
||||
|
||||
export interface ViewportConfiguration {
|
||||
viewports?: ViewportDefinitions;
|
||||
defaultViewport?: ViewportName;
|
||||
}
|
||||
|
||||
export const INITIAL_VIEWPORTS: ViewportDefinitions;
|
||||
export function configureViewport(configuration: ViewportConfiguration): void;
|
||||
export function withViewport(viewport?: Viewport): StoryDecorator;
|
||||
@@ -1,33 +0,0 @@
|
||||
import { configureViewport, INITIAL_VIEWPORTS, withViewport } from '@storybook/addon-viewport';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
const minimalViewport = {
|
||||
name: 'Viewport with minimal amount of configuration',
|
||||
styles: {
|
||||
width: '450px',
|
||||
height: '150px',
|
||||
},
|
||||
};
|
||||
const maximalViewport = {
|
||||
name: 'Viewport that also sets its type',
|
||||
styles: {
|
||||
width: '230px',
|
||||
height: '300px',
|
||||
},
|
||||
type: 'desktop',
|
||||
};
|
||||
configureViewport({
|
||||
viewports: { ...INITIAL_VIEWPORTS, minimalViewport, maximalViewport },
|
||||
});
|
||||
configureViewport({
|
||||
defaultViewport: 'minimalViewport',
|
||||
});
|
||||
|
||||
const stories = storiesOf('Example of Knobs', module);
|
||||
|
||||
stories.addDecorator(withViewport());
|
||||
stories.addDecorator(withViewport('viewportName'));
|
||||
stories.addDecorator(withViewport({
|
||||
onViewportChange: ({ viewport }) => `Viewport changed: ${viewport.name} (${viewport.type})`,
|
||||
}));
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addon-viewport": [
|
||||
"storybook__addon-viewport"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addon-viewport-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Vendored
-85
@@ -1,85 +0,0 @@
|
||||
// Type definitions for @storybook/addons 4.1
|
||||
// Project: https://github.com/storybookjs/storybook/tree/master/lib/addons
|
||||
// Definitions by: Bob Matcuk <https://github.com/bmatcuk>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.1
|
||||
|
||||
import Channel = require("@storybook/channels");
|
||||
import { RenderFunction, StoryDecorator } from "@storybook/react";
|
||||
|
||||
export const mockChannel: Channel;
|
||||
|
||||
export interface Context {
|
||||
kind: string;
|
||||
story: string;
|
||||
}
|
||||
|
||||
export type GetStoryFunc = (context: Context) => ReturnType<StoryDecorator>;
|
||||
|
||||
export interface Wrapper<Options, Parameters> {
|
||||
(getStory: GetStoryFunc, context: Context, optsAndParams: { options: Options, parameters: Parameters }):
|
||||
ReturnType<StoryDecorator>;
|
||||
}
|
||||
|
||||
export interface MakeDecoratorOptions<ParameterName extends string, Options, Parameters> {
|
||||
name: string;
|
||||
parameterName: ParameterName;
|
||||
wrapper: Wrapper<Options, Parameters>;
|
||||
skipIfNoParametersOrOptions?: boolean;
|
||||
allowDeprecatedUsage?: boolean;
|
||||
}
|
||||
|
||||
export interface DecoratorContext<ParameterName extends string, T> extends Context {
|
||||
parameters?: Record<ParameterName, T>;
|
||||
}
|
||||
|
||||
export interface DecoratorWithOptions<ParameterName extends string, T> {
|
||||
// Support for older, but not deprecated style:
|
||||
// .addDecorator(decorator(options))
|
||||
(story: RenderFunction, context: DecoratorContext<ParameterName, T>): ReturnType<StoryDecorator>;
|
||||
|
||||
// Support for the deprecated style:
|
||||
// .add(decorator(options)(() => <Story />)
|
||||
(story: RenderFunction): (context: DecoratorContext<ParameterName, T>) => ReturnType<StoryDecorator>;
|
||||
}
|
||||
|
||||
export interface Decorator<ParameterName extends string, Options, Parameters> {
|
||||
// Supports newer style:
|
||||
// .addDecorator(decorator)
|
||||
// .add('story', () => <Story />)
|
||||
(story: RenderFunction, context: DecoratorContext<ParameterName, Parameters>): ReturnType<StoryDecorator>;
|
||||
|
||||
// Support for older styles which pass options.
|
||||
// See DecoratorWithOptions above.
|
||||
(options: Options): DecoratorWithOptions<ParameterName, Parameters>;
|
||||
(...options: Options[]): DecoratorWithOptions<ParameterName, Parameters>;
|
||||
}
|
||||
|
||||
// If you manually specify the type parameters, the first type (ParameterName)
|
||||
// must match the "parameterName" option, ie:
|
||||
//
|
||||
// makeDecorator<"myParam", ..., ...>({ parameterName: "myParam", ... })
|
||||
//
|
||||
// TypeScript is pretty good about inferring all of the type generics if you
|
||||
// include the type declarations on the options/parameters in your wrapper
|
||||
// function.
|
||||
export function makeDecorator<ParameterName extends string, Options = any, Parameters = any>(
|
||||
options: MakeDecoratorOptions<ParameterName, Options, Parameters>):
|
||||
Decorator<ParameterName, Options, Parameters>;
|
||||
|
||||
export class AddonStore {
|
||||
constructor();
|
||||
getChannel(): Channel;
|
||||
hasChannel(): boolean;
|
||||
setChannel(channel: any): void;
|
||||
getPreview(): any;
|
||||
getDatabase(): any;
|
||||
setDatabase(database: any): void;
|
||||
getPanels(): any;
|
||||
addPanel(name: any, panel: any): void;
|
||||
register(name: any, loader: any): any;
|
||||
loadAddons(api: any): any;
|
||||
}
|
||||
|
||||
declare const DefaultAddonStore: AddonStore;
|
||||
export default DefaultAddonStore;
|
||||
@@ -1,25 +0,0 @@
|
||||
import addons, { makeDecorator } from "@storybook/addons";
|
||||
import { addDecorator, storiesOf } from "@storybook/react";
|
||||
|
||||
// Example from Storybook documentation
|
||||
const withNotes = makeDecorator({
|
||||
name: "withNotes",
|
||||
parameterName: "notes",
|
||||
wrapper: (getStory, context, {options, parameters}: {options: number, parameters: string}) => {
|
||||
const channel = addons.getChannel();
|
||||
channel.emit("MYADDON/add_notes", parameters);
|
||||
return getStory(context);
|
||||
}
|
||||
});
|
||||
|
||||
// new style
|
||||
addDecorator(withNotes);
|
||||
|
||||
// old style, but still supported
|
||||
addDecorator(withNotes(42));
|
||||
|
||||
// the deprecated style actually isn't supported by
|
||||
// @storybook/react's typings, so, no test for that...
|
||||
storiesOf("Hello", module)
|
||||
.addDecorator(withNotes) // new style
|
||||
.addDecorator(withNotes(42)); // old style, but still supported
|
||||
@@ -1,34 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/addons": [
|
||||
"storybook__addons"
|
||||
],
|
||||
"@storybook/channels": [
|
||||
"storybook__channels"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__addons-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Vendored
-39
@@ -1,39 +0,0 @@
|
||||
// Type definitions for @storybook/channels 4.1
|
||||
// Project: https://github.com/storybookjs/storybook/tree/master/lib/channels
|
||||
// Definitions by: Bob Matcuk <https://github.com/bmatcuk>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.1
|
||||
|
||||
type EventName = PropertyKey;
|
||||
type EventHandler = (event: Channel.Event) => void;
|
||||
type Listener = (...args: any) => void;
|
||||
|
||||
declare namespace Channel {
|
||||
interface Event {
|
||||
type: EventName;
|
||||
args: any;
|
||||
from: string;
|
||||
}
|
||||
|
||||
interface Transport {
|
||||
setHandler(handler: EventHandler): void;
|
||||
send(event: any): void;
|
||||
}
|
||||
}
|
||||
|
||||
declare class Channel {
|
||||
constructor(options?: { transport?: Channel.Transport, async?: boolean });
|
||||
addListener(type: EventName, listener: Listener): void;
|
||||
addPeerListener(type: EventName, listener: Listener): void;
|
||||
emit(type: EventName, ...args: any): void;
|
||||
eventNames(): EventName[];
|
||||
listenerCount(type: EventName): number;
|
||||
listeners(type: EventName): Listener[];
|
||||
on(type: EventName, listener: Listener): void;
|
||||
once(type: EventName, listener: Listener): void;
|
||||
prependListener(type: EventName, listener: Listener): void;
|
||||
removeAllListeners(type: EventName): void;
|
||||
removeListener(type: EventName, listener: Listener): void;
|
||||
}
|
||||
|
||||
export = Channel;
|
||||
@@ -1,21 +0,0 @@
|
||||
import Channel = require("@storybook/channels");
|
||||
|
||||
const transport: Channel.Transport = {
|
||||
setHandler(handler) { },
|
||||
send(event) { },
|
||||
};
|
||||
const channel = new Channel({ transport, async: true });
|
||||
const listener = (...args: any) => { };
|
||||
channel.addListener("event", listener);
|
||||
channel.addPeerListener("event", listener);
|
||||
channel.emit("event", 42);
|
||||
channel.on("event", listener);
|
||||
channel.once("event", listener);
|
||||
channel.prependListener("event", listener);
|
||||
|
||||
const events: PropertyKey[] = channel.eventNames();
|
||||
const count: number = channel.listenerCount("event");
|
||||
const listeners: Array<(...args: any) => void> = channel.listeners("event");
|
||||
|
||||
channel.removeListener("event", listener);
|
||||
channel.removeAllListeners("event");
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/channels": [
|
||||
"storybook__channels"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__channels-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Vendored
-42
@@ -1,42 +0,0 @@
|
||||
// Type definitions for @storybook/html 5.0
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/html
|
||||
// Definitions by: Christian Murphy <https://github.com/ChristianMurphy>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
/// <reference types="webpack-env" />
|
||||
|
||||
export type RenderFunction = () => string | string[] | HTMLElement;
|
||||
|
||||
export interface DecoratorParameters {
|
||||
[key: string]: any;
|
||||
}
|
||||
export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => string | null;
|
||||
|
||||
export interface Story {
|
||||
readonly kind: string;
|
||||
add(storyName: string, callback: RenderFunction, parameters?: DecoratorParameters): this;
|
||||
addDecorator(decorator: StoryDecorator): this;
|
||||
addParameters(parameters: DecoratorParameters): this;
|
||||
}
|
||||
|
||||
export function addDecorator(decorator: StoryDecorator): void;
|
||||
export function addParameters(parameters: DecoratorParameters): void;
|
||||
export function clearDecorators(): void;
|
||||
export function configure(fn: () => void, module: NodeModule): void;
|
||||
export function setAddon(addon: object): void;
|
||||
export function storiesOf(name: string, module: NodeModule): Story;
|
||||
export function storiesOf<T>(name: string, module: NodeModule): Story & T;
|
||||
export function forceReRender(): void;
|
||||
|
||||
export interface StoryObject {
|
||||
name: string;
|
||||
render: RenderFunction;
|
||||
}
|
||||
|
||||
export interface StoryBucket {
|
||||
kind: string;
|
||||
stories: StoryObject[];
|
||||
}
|
||||
|
||||
export function getStorybook(): StoryBucket[];
|
||||
@@ -1,48 +0,0 @@
|
||||
import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/html';
|
||||
|
||||
const Decorator = (story: RenderFunction) => `<div>${story()}</div>`;
|
||||
const parameters: DecoratorParameters = { parameter: 'foo' };
|
||||
|
||||
forceReRender();
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
// local addDecorator
|
||||
.addDecorator(Decorator)
|
||||
.add('to Storybook', () => "<div></div>")
|
||||
.add('to Storybook as Array', () => ["<div></div>", "<div></div>"])
|
||||
.add('and a story with additional parameters', () => "<div></div>", parameters);
|
||||
|
||||
// global addDecorator
|
||||
addDecorator(Decorator);
|
||||
addParameters(parameters);
|
||||
clearDecorators();
|
||||
|
||||
// setAddon
|
||||
interface AnyAddon {
|
||||
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
|
||||
}
|
||||
const AnyAddon: AnyAddon = {
|
||||
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
|
||||
console.log(this.kind === 'withAnyAddon');
|
||||
return this.add(storyName, storyFn);
|
||||
}
|
||||
};
|
||||
setAddon(AnyAddon);
|
||||
storiesOf<AnyAddon>('withAnyAddon', module)
|
||||
.addWithSideEffect('custom story', () => "<div></div>")
|
||||
.addWithSideEffect('more', () => "<div></div>")
|
||||
.add('another story', () => "<div></div>")
|
||||
.add('to Storybook as Array', () => ["<div></div>", "<div></div>"])
|
||||
.add('storybook with dom', () => {
|
||||
const button = document.createElement('button');
|
||||
button.innerText = '😀 😎 👍 💯';
|
||||
return button;
|
||||
})
|
||||
.add('and a story with additional parameters', () => "<div></div>", parameters)
|
||||
.addWithSideEffect('even more', () => "<div></div>");
|
||||
|
||||
// configure
|
||||
configure(() => undefined, module);
|
||||
|
||||
// getStorybook
|
||||
getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "preserve",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/html": [
|
||||
"storybook__html"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__html-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"no-unnecessary-generics": false
|
||||
}
|
||||
}
|
||||
Vendored
-47
@@ -1,47 +0,0 @@
|
||||
// Type definitions for @storybook/preact 5.2
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/preact
|
||||
// Definitions by: Keisuke Kan <https://github.com/9renpoto>
|
||||
// Darrel Guerrero <https://github.com/ddayguerrero>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.3
|
||||
// Created with the help of storybook__react types
|
||||
|
||||
/// <reference types="webpack-env" />
|
||||
|
||||
import * as Preact from 'preact';
|
||||
|
||||
export type Renderable = Preact.AnyComponent | JSX.Element | preact.JSX.Element;
|
||||
export type RenderFunction = () => Renderable | Renderable[];
|
||||
|
||||
export interface DecoratorParameters {
|
||||
[key: string]: any;
|
||||
}
|
||||
export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => Renderable | null;
|
||||
|
||||
export interface Story {
|
||||
readonly kind: string;
|
||||
add(storyName: string, callback: RenderFunction, parameters?: DecoratorParameters): this;
|
||||
addDecorator(decorator: StoryDecorator): this;
|
||||
addParameters(parameters: DecoratorParameters): this;
|
||||
}
|
||||
|
||||
export function addDecorator(decorator: StoryDecorator): void;
|
||||
export function addParameters(parameters: DecoratorParameters): void;
|
||||
export function clearDecorators(): void;
|
||||
export function configure(fn: () => void, module: NodeModule): void;
|
||||
export function setAddon(addon: object): void;
|
||||
export function storiesOf(name: string, module: NodeModule): Story;
|
||||
export function storiesOf<T>(name: string, module: NodeModule): Story & T;
|
||||
export function forceReRender(): void;
|
||||
|
||||
export interface StoryObject {
|
||||
name: string;
|
||||
render: RenderFunction;
|
||||
}
|
||||
|
||||
export interface StoryBucket {
|
||||
kind: string;
|
||||
stories: StoryObject[];
|
||||
}
|
||||
|
||||
export function getStorybook(): StoryBucket[];
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"preact": "^8.4.2"
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
/** @jsx h */
|
||||
import { h, Component } from 'preact';
|
||||
import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/preact';
|
||||
|
||||
const Decorator = (story: RenderFunction) => <div>{story()}</div>;
|
||||
class Input<P> extends Component<P> {
|
||||
render() {
|
||||
return <div><input type="text" id="name" name="name" /></div>;
|
||||
}
|
||||
}
|
||||
|
||||
const parameters: DecoratorParameters = { parameter: 'foo' };
|
||||
|
||||
forceReRender();
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
// local addDecorator
|
||||
.addDecorator(Decorator)
|
||||
.add('to Storybook', () => <div/>)
|
||||
.add('to Storybook as Array', () => [<div />, <div />])
|
||||
.add('and a story with additional parameters', () => <div/>, parameters);
|
||||
|
||||
// global addDecorator
|
||||
addDecorator(Decorator);
|
||||
addParameters(parameters);
|
||||
clearDecorators();
|
||||
|
||||
// setAddon
|
||||
interface AnyAddon {
|
||||
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
|
||||
}
|
||||
const AnyAddon: AnyAddon = {
|
||||
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
|
||||
console.log(this.kind === 'withAnyAddon');
|
||||
return this.add(storyName, storyFn);
|
||||
}
|
||||
};
|
||||
setAddon(AnyAddon);
|
||||
storiesOf<AnyAddon>('withAnyAddon', module)
|
||||
.addWithSideEffect('custom story', () => <div />)
|
||||
.addWithSideEffect('more', () => <div />)
|
||||
.add('another story', () => <div />)
|
||||
.add('to Storybook as Array', () => [<div />, <div />])
|
||||
.add('and a story with additional parameters', () => <div />, parameters)
|
||||
.addWithSideEffect('even more', () => <div />)
|
||||
.add('add a class component', () => <Input></Input>);
|
||||
|
||||
// configure
|
||||
configure(() => undefined, module);
|
||||
|
||||
// getStorybook
|
||||
getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "preserve",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/preact": [
|
||||
"storybook__preact"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__preact-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"no-unnecessary-generics": false
|
||||
}
|
||||
}
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
// Type definitions for @storybook/react-native 3.0
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/react-native
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>
|
||||
// Anton Izmailov <https://github.com/wapgear>
|
||||
// Alec Hill <https://github.com/alechill>
|
||||
// Kyle Roach <https://github.com/iRoachie>
|
||||
// Ceyhun Ozugur <https://github.com/ceyhuno>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export interface StorybookUIOptions {
|
||||
/**
|
||||
* display navigator and addons on the device
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
onDeviceUI?: boolean;
|
||||
|
||||
/**
|
||||
* allows to display stories without running storybook server. Should be used with onDeviceUI
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
disableWebsockets?: boolean;
|
||||
|
||||
/**
|
||||
* use wss/https instead of ws/http
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
secured?: boolean;
|
||||
|
||||
/**
|
||||
* host to use
|
||||
*
|
||||
* @default NativeModules.SourceCode.scriptURL
|
||||
*/
|
||||
host?: string;
|
||||
|
||||
/**
|
||||
* port to use
|
||||
*
|
||||
* @default 7007
|
||||
*/
|
||||
port?: number;
|
||||
|
||||
/**
|
||||
* additional query string to pass to websockets
|
||||
*
|
||||
* @default ""
|
||||
*/
|
||||
query?: string;
|
||||
|
||||
/**
|
||||
* should the ui be closed initialy.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
isUIHidden?: boolean;
|
||||
|
||||
/**
|
||||
* which tab should be open. -1 Navigator, 0 Preview, 1 Addons
|
||||
*
|
||||
* @default 0
|
||||
*/
|
||||
tabOpen?: number;
|
||||
|
||||
/**
|
||||
* initialize storybook with a specific story.
|
||||
* In case a valid object is passed, it will take precedence over `shouldPersistSelection`.
|
||||
* ex: `{ kind: 'Knobs', story: 'with knobs' }`
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
initialSelection?: object;
|
||||
|
||||
/**
|
||||
* initialize storybook with the last selected story.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
shouldPersistSelection?: boolean;
|
||||
|
||||
/**
|
||||
* disable KeyboardAvoidingView wrapping Storybook's view
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
shouldDisableKeyboardAvoidingView?: boolean;
|
||||
|
||||
/**
|
||||
* this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
|
||||
*
|
||||
* @default 0
|
||||
*/
|
||||
keyboardAvoidingViewVerticalOffset?: number;
|
||||
}
|
||||
|
||||
export function getStorybookUI(
|
||||
options: StorybookUIOptions
|
||||
): React.ComponentClass;
|
||||
|
||||
export * from '@storybook/react';
|
||||
@@ -1,64 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
configure,
|
||||
getStorybook,
|
||||
RenderFunction,
|
||||
getStorybookUI,
|
||||
Story
|
||||
} from '@storybook/react-native';
|
||||
|
||||
const Decorator = (story: RenderFunction) => <div>{story()}</div>;
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
// local addDecorator
|
||||
.addDecorator(Decorator)
|
||||
.add('to Storybook', () => <div />)
|
||||
.add('to Storybook as Array', () => [<div />, <div />]);
|
||||
|
||||
// global addDecorator
|
||||
addDecorator(Decorator);
|
||||
|
||||
// setAddon
|
||||
interface AnyAddon {
|
||||
addWithSideEffect<T>(
|
||||
this: Story & T,
|
||||
storyName: string,
|
||||
storyFn: RenderFunction
|
||||
): Story & T;
|
||||
}
|
||||
const AnyAddon: AnyAddon = {
|
||||
addWithSideEffect<T>(
|
||||
this: Story & T,
|
||||
storyName: string,
|
||||
storyFn: RenderFunction
|
||||
): Story & T {
|
||||
console.log(this.kind === 'withAnyAddon');
|
||||
return this.add(storyName, storyFn);
|
||||
}
|
||||
};
|
||||
setAddon(AnyAddon);
|
||||
storiesOf<AnyAddon>('withAnyAddon', module)
|
||||
.addWithSideEffect('custom story', () => <div />)
|
||||
.addWithSideEffect('more', () => <div />)
|
||||
.add('another story', () => <div />)
|
||||
.add('to Storybook as Array', () => [<div />, <div />])
|
||||
.addWithSideEffect('even more', () => <div />);
|
||||
|
||||
// configure
|
||||
configure(() => undefined, module);
|
||||
|
||||
// getStorybook
|
||||
getStorybook().forEach(({ kind, stories }) =>
|
||||
stories.forEach(({ name, render }) => render())
|
||||
);
|
||||
|
||||
const StorybookUI = getStorybookUI({
|
||||
port: 9001,
|
||||
host: 'localhost',
|
||||
onDeviceUI: true
|
||||
});
|
||||
|
||||
const TestRender = () => <StorybookUI />;
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/react-native": [
|
||||
"storybook__react-native"
|
||||
],
|
||||
"@storybook/react": [
|
||||
"storybook__react"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__react-native-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Vendored
-47
@@ -1,47 +0,0 @@
|
||||
// Type definitions for @storybook/vue 5.0
|
||||
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/vue
|
||||
// Definitions by: Punit Gupta <https://github.com/pntgupta>
|
||||
// Jurgis Rudaks <https://github.com/jurgisrudaks>
|
||||
// Yoyo Young <https://github.com/yoyoys>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
// Created with the help of storybook__react types
|
||||
|
||||
/// <reference types="webpack-env" />
|
||||
|
||||
import Vue, { ComponentOptions } from 'vue';
|
||||
|
||||
// Story can be used as template or component
|
||||
export type StoryFunction = () => ComponentOptions<Vue> | string;
|
||||
|
||||
export interface DecoratorParameters {
|
||||
[key: string]: any;
|
||||
}
|
||||
export type StoryDecorator = (story: () => ComponentOptions<Vue>, context: { kind: string, story: string }) => ComponentOptions<Vue> | null;
|
||||
|
||||
export interface Story {
|
||||
readonly kind: string;
|
||||
add(storyName: string, getStory: StoryFunction, parameters?: any): this;
|
||||
addDecorator(decorator: StoryDecorator): this;
|
||||
addParameters(parameters: DecoratorParameters): this;
|
||||
}
|
||||
|
||||
export interface Addon {
|
||||
[addonName: string]: (storyName: string, storyFn: StoryFunction) => void;
|
||||
}
|
||||
export interface StoryStore {
|
||||
fileName: string | undefined;
|
||||
kind: string;
|
||||
stories: StoryObject[];
|
||||
}
|
||||
export interface StoryObject {
|
||||
name: string;
|
||||
render: StoryFunction;
|
||||
}
|
||||
|
||||
export function addDecorator(decorator: StoryDecorator): void;
|
||||
export function addParameters(parameters: DecoratorParameters): void;
|
||||
export function configure(loaders: () => void, module: NodeModule): void;
|
||||
export function getStorybook(): StoryStore[];
|
||||
export function setAddon(addon: Addon): void;
|
||||
export function storiesOf(kind: string, module: NodeModule): Story;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"vue": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import Vue, { ComponentOptions } from 'vue';
|
||||
import { addDecorator, configure, getStorybook, setAddon, storiesOf, StoryFunction, Story, addParameters, DecoratorParameters } from '@storybook/vue';
|
||||
|
||||
interface CustomStory extends Story {
|
||||
addCentered(storyName: string, storyFn: StoryFunction): this;
|
||||
}
|
||||
|
||||
const addCenteredAddon = {
|
||||
addCentered(this: Story, storyName: string, storyFn: StoryFunction): void {
|
||||
console.log(this.kind);
|
||||
this.add(storyName, storyFn);
|
||||
}
|
||||
};
|
||||
|
||||
const Decorator = (story: () => ComponentOptions<Vue>) => {
|
||||
const wrapper = story();
|
||||
return {
|
||||
components: { wrapper },
|
||||
template: '<div :style="{ border: borderStyle }"><wrapper/></div>',
|
||||
data() {
|
||||
return { borderStyle: 'medium solid red' };
|
||||
}
|
||||
};
|
||||
};
|
||||
const parameters: DecoratorParameters = { parameter: 'foo' };
|
||||
|
||||
addDecorator(Decorator);
|
||||
addParameters(parameters);
|
||||
configure(() => undefined, module);
|
||||
getStorybook().forEach(({ fileName, kind, stories }) => stories.forEach(({ name, render }) => render()));
|
||||
setAddon(addCenteredAddon);
|
||||
|
||||
storiesOf('Storybook__vue', module)
|
||||
.addDecorator(Decorator)
|
||||
.add('story as a template', () => '<div></div>')
|
||||
.add('story as a component', () => ({
|
||||
components: {},
|
||||
template: '<div></div>'
|
||||
}))
|
||||
.add('story has a option', () => ({
|
||||
components: {},
|
||||
template: '<div></div>'
|
||||
}), { notes: 'I have notes' });
|
||||
|
||||
(storiesOf('Custom_Story', module) as CustomStory)
|
||||
.addCentered('custom story', () => ({
|
||||
template: '<div></div>'
|
||||
}))
|
||||
.add('story as a template', () => '<div></div>')
|
||||
.add('story as a component', () => ({
|
||||
components: {},
|
||||
template: '<div></div>'
|
||||
}))
|
||||
.addCentered('custom story', () => ({
|
||||
template: '<div></div>'
|
||||
}));
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"paths": {
|
||||
"@storybook/vue": [
|
||||
"storybook__vue"
|
||||
]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"storybook__vue-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Reference in New Issue
Block a user