mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Migrate @storybook/addon-knobs to typescript (#7180)
Migrate @storybook/addon-knobs to typescript
This commit is contained in:
Michael Shilman
GitHub
commit
41602a063a
1
addons/knobs/angular.js
vendored
1
addons/knobs/angular.js
vendored
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/angular.ts
Normal file
1
addons/knobs/angular.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/html.ts
Normal file
1
addons/knobs/html.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/marko.ts
Normal file
1
addons/knobs/marko.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/mithril.ts
Normal file
1
addons/knobs/mithril.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -17,7 +17,7 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
@ -44,5 +44,11 @@
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^2.0.19"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/polymer.ts
Normal file
1
addons/knobs/polymer.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
1
addons/knobs/react.js
vendored
1
addons/knobs/react.js
vendored
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/react.ts
Normal file
1
addons/knobs/react.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -1,25 +1,33 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import { navigator } from 'global';
|
||||
import escape from 'escape-html';
|
||||
|
||||
import { getQueryParams } from '@storybook/client-api';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { Channel } from '@storybook/channels';
|
||||
|
||||
import KnobStore from './KnobStore';
|
||||
import KnobStore, { Knob } from './KnobStore';
|
||||
import { SET } from './shared';
|
||||
|
||||
import { deserializers } from './converters';
|
||||
|
||||
const knobValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
|
||||
if (k.includes('knob-')) {
|
||||
return { ...acc, [k.replace('knob-', '')]: v };
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
const knobValuesFromUrl: Record<string, string> = Object.entries(getQueryParams()).reduce(
|
||||
(acc, [k, v]) => {
|
||||
if (k.includes('knob-')) {
|
||||
return { ...acc, [k.replace('knob-', '')]: v };
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
// This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
|
||||
const PANEL_UPDATE_INTERVAL = 400;
|
||||
|
||||
const escapeStrings = obj => {
|
||||
function escapeStrings(obj: { [key: string]: string }): { [key: string]: string };
|
||||
function escapeStrings(obj: (string | string[])[]): (string | string[])[];
|
||||
function escapeStrings(obj: string): string;
|
||||
function escapeStrings(obj: any): any {
|
||||
if (typeof obj === 'string') {
|
||||
return escape(obj);
|
||||
}
|
||||
@ -31,31 +39,39 @@ const escapeStrings = obj => {
|
||||
const didChange = newArray.some((newValue, key) => newValue !== obj[key]);
|
||||
return didChange ? newArray : obj;
|
||||
}
|
||||
return Object.entries(obj).reduce((acc, [key, oldValue]) => {
|
||||
return Object.entries<{ [key: string]: string }>(obj).reduce((acc, [key, oldValue]) => {
|
||||
const newValue = escapeStrings(oldValue);
|
||||
return newValue === oldValue ? acc : { ...acc, [key]: newValue };
|
||||
}, obj);
|
||||
};
|
||||
}
|
||||
|
||||
interface KnobManagerOptions {
|
||||
escapeHTML?: boolean;
|
||||
disableDebounce?: boolean;
|
||||
}
|
||||
|
||||
export default class KnobManager {
|
||||
constructor() {
|
||||
this.knobStore = new KnobStore();
|
||||
this.options = {};
|
||||
}
|
||||
knobStore = new KnobStore();
|
||||
|
||||
setChannel(channel) {
|
||||
channel: Channel;
|
||||
|
||||
options: KnobManagerOptions = {};
|
||||
|
||||
calling: boolean;
|
||||
|
||||
setChannel(channel: Channel) {
|
||||
this.channel = channel;
|
||||
}
|
||||
|
||||
setOptions(options) {
|
||||
setOptions(options: KnobManagerOptions) {
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
getKnobValue({ value }) {
|
||||
getKnobValue({ value }: Knob) {
|
||||
return this.options.escapeHTML ? escapeStrings(value) : value;
|
||||
}
|
||||
|
||||
knob(name, options) {
|
||||
knob(name: string, options: Knob) {
|
||||
this._mayCallChannel();
|
||||
|
||||
const knobName = options.groupId ? `${name}_${options.groupId}` : name;
|
||||
@ -77,7 +93,7 @@ export default class KnobManager {
|
||||
return this.getKnobValue(existingKnob);
|
||||
}
|
||||
|
||||
const knobInfo = {
|
||||
const knobInfo: Knob & { name: string; label: string; defaultValue?: any } = {
|
||||
...options,
|
||||
name: knobName,
|
||||
label: name,
|
||||
@ -1,56 +0,0 @@
|
||||
const callArg = fn => fn();
|
||||
const callAll = fns => fns.forEach(callArg);
|
||||
|
||||
export default class KnobStore {
|
||||
constructor() {
|
||||
this.store = {};
|
||||
this.callbacks = [];
|
||||
}
|
||||
|
||||
has(key) {
|
||||
return this.store[key] !== undefined;
|
||||
}
|
||||
|
||||
set(key, value) {
|
||||
this.store[key] = value;
|
||||
this.store[key].used = true;
|
||||
this.store[key].groupId = value.groupId;
|
||||
|
||||
// debounce the execution of the callbacks for 50 milliseconds
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(callAll, 50, this.callbacks);
|
||||
}
|
||||
|
||||
get(key) {
|
||||
const knob = this.store[key];
|
||||
if (knob) {
|
||||
knob.used = true;
|
||||
}
|
||||
return knob;
|
||||
}
|
||||
|
||||
getAll() {
|
||||
return this.store;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.store = {};
|
||||
}
|
||||
|
||||
markAllUnused() {
|
||||
Object.keys(this.store).forEach(knobName => {
|
||||
this.store[knobName].used = false;
|
||||
});
|
||||
}
|
||||
|
||||
subscribe(cb) {
|
||||
this.callbacks.push(cb);
|
||||
}
|
||||
|
||||
unsubscribe(cb) {
|
||||
const index = this.callbacks.indexOf(cb);
|
||||
this.callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
101
addons/knobs/src/KnobStore.ts
Normal file
101
addons/knobs/src/KnobStore.ts
Normal file
@ -0,0 +1,101 @@
|
||||
import Types, {
|
||||
TextTypeKnob,
|
||||
NumberTypeKnob,
|
||||
ColorTypeKnob,
|
||||
BooleanTypeKnob,
|
||||
ObjectTypeKnob,
|
||||
SelectTypeKnob,
|
||||
RadiosTypeKnob,
|
||||
ArrayTypeKnob,
|
||||
DateTypeKnob,
|
||||
ButtonTypeOnClickProp,
|
||||
FileTypeKnob,
|
||||
OptionsTypeKnob,
|
||||
} from './components/types';
|
||||
|
||||
type Callback = () => any;
|
||||
|
||||
type KnobPlus<T extends keyof typeof Types, K> = K & { type: T; groupId?: string };
|
||||
|
||||
export type Knob =
|
||||
| KnobPlus<'text', Pick<TextTypeKnob, 'value'>>
|
||||
| KnobPlus<'boolean', Pick<BooleanTypeKnob, 'value'>>
|
||||
| KnobPlus<'number', Pick<NumberTypeKnob, 'value' | 'range' | 'min' | 'max' | 'step'>>
|
||||
| KnobPlus<'color', Pick<ColorTypeKnob, 'value'>>
|
||||
| KnobPlus<'object', Pick<ObjectTypeKnob<any>, 'value'>>
|
||||
| KnobPlus<'select', Pick<SelectTypeKnob, 'value' | 'options'> & { selectV2: true }>
|
||||
| KnobPlus<'radios', Pick<RadiosTypeKnob, 'value' | 'options'>>
|
||||
| KnobPlus<'array', Pick<ArrayTypeKnob, 'value' | 'separator'>>
|
||||
| KnobPlus<'date', Pick<DateTypeKnob, 'value'>>
|
||||
| KnobPlus<'files', Pick<FileTypeKnob, 'value' | 'accept'>>
|
||||
| KnobPlus<'button', { value?: unknown; callback: ButtonTypeOnClickProp; hideLabel: true }>
|
||||
| KnobPlus<'options', Pick<OptionsTypeKnob<any>, 'options' | 'value' | 'optionsObj'>>;
|
||||
|
||||
export type KnobStoreKnob = Knob & {
|
||||
name: string;
|
||||
label: string;
|
||||
used?: boolean;
|
||||
defaultValue?: any;
|
||||
hideLabel?: boolean;
|
||||
callback?: () => any;
|
||||
};
|
||||
|
||||
const callArg = (fn: Callback) => fn();
|
||||
const callAll = (fns: Callback[]) => fns.forEach(callArg);
|
||||
|
||||
export default class KnobStore {
|
||||
store: Record<string, KnobStoreKnob> = {};
|
||||
|
||||
callbacks: Callback[] = [];
|
||||
|
||||
timer: number;
|
||||
|
||||
has(key: string) {
|
||||
return this.store[key] !== undefined;
|
||||
}
|
||||
|
||||
set(key: string, value: KnobStoreKnob) {
|
||||
this.store[key] = {
|
||||
...value,
|
||||
used: true,
|
||||
groupId: value.groupId,
|
||||
};
|
||||
|
||||
// debounce the execution of the callbacks for 50 milliseconds
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(callAll, 50, this.callbacks);
|
||||
}
|
||||
|
||||
get(key: string) {
|
||||
const knob = this.store[key];
|
||||
if (knob) {
|
||||
knob.used = true;
|
||||
}
|
||||
return knob;
|
||||
}
|
||||
|
||||
getAll() {
|
||||
return this.store;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.store = {};
|
||||
}
|
||||
|
||||
markAllUnused() {
|
||||
Object.keys(this.store).forEach(knobName => {
|
||||
this.store[knobName].used = false;
|
||||
});
|
||||
}
|
||||
|
||||
subscribe(cb: Callback) {
|
||||
this.callbacks.push(cb);
|
||||
}
|
||||
|
||||
unsubscribe(cb: Callback) {
|
||||
const index = this.callbacks.indexOf(cb);
|
||||
this.callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import React, { PureComponent, Fragment, ComponentType } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import qs from 'qs';
|
||||
import { document } from 'global';
|
||||
@ -18,6 +18,7 @@ import { RESET, SET, CHANGE, SET_OPTIONS, CLICK } from '../shared';
|
||||
|
||||
import Types from './types';
|
||||
import PropForm from './PropForm';
|
||||
import { KnobStoreKnob } from '../KnobStore';
|
||||
|
||||
const getTimestamp = () => +new Date();
|
||||
|
||||
@ -32,17 +33,60 @@ const PanelWrapper = styled(({ children, className }) => (
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export default class KnobPanel extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
knobs: {},
|
||||
};
|
||||
this.options = {};
|
||||
interface PanelKnobGroups {
|
||||
title: string;
|
||||
render: (knob: any) => any;
|
||||
}
|
||||
|
||||
this.lastEdit = getTimestamp();
|
||||
this.loadedFromUrl = false;
|
||||
}
|
||||
interface KnobPanelProps {
|
||||
active: boolean;
|
||||
onReset?: object;
|
||||
api: {
|
||||
on: Function;
|
||||
off: Function;
|
||||
emit: Function;
|
||||
getQueryParam: Function;
|
||||
setQueryParams: Function;
|
||||
};
|
||||
}
|
||||
|
||||
interface KnobPanelState {
|
||||
knobs: Record<string, KnobStoreKnob>;
|
||||
}
|
||||
|
||||
interface KnobPanelOptions {
|
||||
timestamps?: boolean;
|
||||
}
|
||||
|
||||
type KnobControlType = ComponentType<any> & {
|
||||
serialize: (v: any) => any;
|
||||
deserialize: (v: any) => any;
|
||||
};
|
||||
|
||||
export default class KnobPanel extends PureComponent<KnobPanelProps> {
|
||||
static propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
onReset: PropTypes.object, // eslint-disable-line
|
||||
api: PropTypes.shape({
|
||||
on: PropTypes.func,
|
||||
getQueryParam: PropTypes.func,
|
||||
setQueryParams: PropTypes.func,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
state: KnobPanelState = {
|
||||
knobs: {},
|
||||
};
|
||||
|
||||
options: KnobPanelOptions = {};
|
||||
|
||||
lastEdit: number = getTimestamp();
|
||||
|
||||
loadedFromUrl = false;
|
||||
|
||||
mounted = false;
|
||||
|
||||
stopListeningOnStory: Function;
|
||||
|
||||
componentDidMount() {
|
||||
this.mounted = true;
|
||||
@ -66,12 +110,18 @@ export default class KnobPanel extends PureComponent {
|
||||
this.stopListeningOnStory();
|
||||
}
|
||||
|
||||
setOptions = (options = { timestamps: false }) => {
|
||||
setOptions = (options: KnobPanelOptions = { timestamps: false }) => {
|
||||
this.options = options;
|
||||
};
|
||||
|
||||
setKnobs = ({ knobs, timestamp }) => {
|
||||
const queryParams = {};
|
||||
setKnobs = ({
|
||||
knobs,
|
||||
timestamp,
|
||||
}: {
|
||||
knobs: Record<string, KnobStoreKnob>;
|
||||
timestamp?: number;
|
||||
}) => {
|
||||
const queryParams: Record<string, any> = {};
|
||||
const { api } = this.props;
|
||||
|
||||
if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
|
||||
@ -83,9 +133,9 @@ export default class KnobPanel extends PureComponent {
|
||||
|
||||
// If the knob value present in url
|
||||
if (urlValue !== undefined) {
|
||||
const value = Types[knob.type].deserialize(urlValue);
|
||||
const value = (Types[knob.type] as KnobControlType).deserialize(urlValue);
|
||||
knob.value = value;
|
||||
queryParams[`knob-${name}`] = Types[knob.type].serialize(value);
|
||||
queryParams[`knob-${name}`] = (Types[knob.type] as KnobControlType).serialize(value);
|
||||
|
||||
api.emit(CHANGE, knob);
|
||||
}
|
||||
@ -111,7 +161,7 @@ export default class KnobPanel extends PureComponent {
|
||||
const { knobs } = this.state;
|
||||
|
||||
Object.entries(knobs).forEach(([name, knob]) => {
|
||||
query[`knob-${name}`] = Types[knob.type].serialize(knob.value);
|
||||
query[`knob-${name}`] = (Types[knob.type] as KnobControlType).serialize(knob.value);
|
||||
});
|
||||
|
||||
copy(`${location.origin + location.pathname}?${qs.stringify(query, { encode: false })}`);
|
||||
@ -119,13 +169,13 @@ export default class KnobPanel extends PureComponent {
|
||||
// TODO: show some notification of this
|
||||
};
|
||||
|
||||
emitChange = changedKnob => {
|
||||
emitChange = (changedKnob: KnobStoreKnob) => {
|
||||
const { api } = this.props;
|
||||
|
||||
api.emit(CHANGE, changedKnob);
|
||||
};
|
||||
|
||||
handleChange = changedKnob => {
|
||||
handleChange = (changedKnob: KnobStoreKnob) => {
|
||||
this.lastEdit = getTimestamp();
|
||||
const { api } = this.props;
|
||||
const { knobs } = this.state;
|
||||
@ -139,18 +189,18 @@ export default class KnobPanel extends PureComponent {
|
||||
this.setState({ knobs: newKnobs }, () => {
|
||||
this.emitChange(changedKnob);
|
||||
|
||||
const queryParams = {};
|
||||
const queryParams: { [key: string]: any } = {};
|
||||
|
||||
Object.keys(newKnobs).forEach(n => {
|
||||
const knob = newKnobs[n];
|
||||
queryParams[`knob-${n}`] = Types[knob.type].serialize(knob.value);
|
||||
queryParams[`knob-${n}`] = (Types[knob.type] as KnobControlType).serialize(knob.value);
|
||||
});
|
||||
|
||||
api.setQueryParams(queryParams);
|
||||
});
|
||||
};
|
||||
|
||||
handleClick = knob => {
|
||||
handleClick = (knob: KnobStoreKnob) => {
|
||||
const { api } = this.props;
|
||||
|
||||
api.emit(CLICK, knob);
|
||||
@ -163,8 +213,8 @@ export default class KnobPanel extends PureComponent {
|
||||
return null;
|
||||
}
|
||||
|
||||
const groups = {};
|
||||
const groupIds = [];
|
||||
const groups: Record<string, PanelKnobGroups> = {};
|
||||
const groupIds: string[] = [];
|
||||
|
||||
const knobKeysArray = Object.keys(knobs).filter(key => knobs[key].used);
|
||||
|
||||
@ -210,12 +260,12 @@ export default class KnobPanel extends PureComponent {
|
||||
}
|
||||
|
||||
// Always sort DEFAULT_GROUP_ID (ungrouped) tab last without changing the remaining tabs
|
||||
const sortEntries = g => {
|
||||
const sortEntries = (g: Record<string, PanelKnobGroups>): [string, PanelKnobGroups][] => {
|
||||
const unsortedKeys = Object.keys(g);
|
||||
if (unsortedKeys.indexOf(DEFAULT_GROUP_ID) !== -1) {
|
||||
const sortedKeys = unsortedKeys.filter(key => key !== DEFAULT_GROUP_ID);
|
||||
sortedKeys.push(DEFAULT_GROUP_ID);
|
||||
return sortedKeys.map(key => [key, g[key]]);
|
||||
return sortedKeys.map<[string, PanelKnobGroups]>(key => [key, g[key]]);
|
||||
}
|
||||
return Object.entries(g);
|
||||
};
|
||||
@ -251,13 +301,3 @@ export default class KnobPanel extends PureComponent {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
KnobPanel.propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
onReset: PropTypes.object, // eslint-disable-line
|
||||
api: PropTypes.shape({
|
||||
on: PropTypes.func,
|
||||
getQueryParam: PropTypes.func,
|
||||
setQueryParams: PropTypes.func,
|
||||
}).isRequired,
|
||||
};
|
||||
@ -1,50 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
import TypeMap from './types';
|
||||
|
||||
const InvalidType = () => <span>Invalid Type</span>;
|
||||
|
||||
export default class PropForm extends Component {
|
||||
makeChangeHandler(name, type) {
|
||||
const { onFieldChange } = this.props;
|
||||
return (value = '') => {
|
||||
const change = { name, type, value };
|
||||
|
||||
onFieldChange(change);
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knobs, onFieldClick } = this.props;
|
||||
|
||||
return (
|
||||
<Form>
|
||||
{knobs.map(knob => {
|
||||
const changeHandler = this.makeChangeHandler(knob.name, knob.type);
|
||||
const InputType = TypeMap[knob.type] || InvalidType;
|
||||
|
||||
return (
|
||||
<Form.Field key={knob.name} label={!knob.hideLabel && `${knob.label || knob.name}`}>
|
||||
<InputType knob={knob} onChange={changeHandler} onClick={onFieldClick} />
|
||||
</Form.Field>
|
||||
);
|
||||
})}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PropForm.displayName = 'PropForm';
|
||||
|
||||
PropForm.propTypes = {
|
||||
knobs: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
})
|
||||
).isRequired,
|
||||
onFieldChange: PropTypes.func.isRequired,
|
||||
onFieldClick: PropTypes.func.isRequired,
|
||||
};
|
||||
62
addons/knobs/src/components/PropForm.tsx
Normal file
62
addons/knobs/src/components/PropForm.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { Component, WeakValidationMap, ComponentType, Requireable } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
import TypeMap from './types';
|
||||
import { KnobStoreKnob } from '../KnobStore';
|
||||
|
||||
interface PropFormProps {
|
||||
knobs: KnobStoreKnob[];
|
||||
onFieldChange: Function;
|
||||
onFieldClick: Function;
|
||||
}
|
||||
|
||||
const InvalidType = () => <span>Invalid Type</span>;
|
||||
|
||||
export default class PropForm extends Component<PropFormProps> {
|
||||
static displayName = 'PropForm';
|
||||
|
||||
static defaultProps = {
|
||||
knobs: [] as KnobStoreKnob[],
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<PropFormProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knobs: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
})
|
||||
).isRequired as Requireable<any[]>,
|
||||
onFieldChange: PropTypes.func.isRequired,
|
||||
onFieldClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
makeChangeHandler(name: string, type: string) {
|
||||
const { onFieldChange } = this.props;
|
||||
return (value = '') => {
|
||||
const change = { name, type, value };
|
||||
|
||||
onFieldChange(change);
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knobs, onFieldClick } = this.props;
|
||||
|
||||
return (
|
||||
<Form>
|
||||
{knobs.map(knob => {
|
||||
const changeHandler = this.makeChangeHandler(knob.name, knob.type);
|
||||
const InputType: ComponentType<any> = TypeMap[knob.type] || InvalidType;
|
||||
|
||||
return (
|
||||
<Form.Field key={knob.name} label={!knob.hideLabel && `${knob.label || knob.name}`}>
|
||||
<InputType knob={knob} onChange={changeHandler} onClick={onFieldClick} />
|
||||
</Form.Field>
|
||||
);
|
||||
})}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
function formatArray(value, separator) {
|
||||
if (value === '') {
|
||||
return [];
|
||||
}
|
||||
return value.split(separator);
|
||||
}
|
||||
|
||||
class ArrayType extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
const { knob, onChange } = this.props;
|
||||
const { value } = e.target;
|
||||
const newVal = formatArray(value, knob.separator);
|
||||
|
||||
onChange(newVal);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
const value = knob.value.join(knob.separator);
|
||||
|
||||
return (
|
||||
<Form.Textarea
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ArrayType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
ArrayType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
separator: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
ArrayType.serialize = value => value;
|
||||
ArrayType.deserialize = value => {
|
||||
if (Array.isArray(value)) return value;
|
||||
|
||||
return Object.keys(value)
|
||||
.sort()
|
||||
.reduce((array, key) => [...array, value[key]], []);
|
||||
};
|
||||
|
||||
export default ArrayType;
|
||||
80
addons/knobs/src/components/types/Array.tsx
Normal file
80
addons/knobs/src/components/types/Array.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component, WeakValidationMap } from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type ArrayTypeKnobValue = string[];
|
||||
|
||||
export interface ArrayTypeKnob {
|
||||
name: string;
|
||||
value: ArrayTypeKnobValue;
|
||||
separator: string;
|
||||
}
|
||||
|
||||
interface ArrayTypeProps {
|
||||
knob: ArrayTypeKnob;
|
||||
onChange: (value: ArrayTypeKnobValue) => ArrayTypeKnobValue;
|
||||
}
|
||||
|
||||
function formatArray(value: string, separator: string) {
|
||||
if (value === '') {
|
||||
return [];
|
||||
}
|
||||
return value.split(separator);
|
||||
}
|
||||
|
||||
export default class ArrayType extends Component<ArrayTypeProps> {
|
||||
static defaultProps: Partial<ArrayTypeProps> = {
|
||||
knob: {} as any,
|
||||
onChange: (value: ArrayTypeKnobValue) => value,
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<ArrayTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
separator: PropTypes.string,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
static serialize = (value: ArrayTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: ArrayTypeKnobValue) => {
|
||||
if (Array.isArray(value)) return value;
|
||||
|
||||
return Object.keys(value)
|
||||
.sort()
|
||||
.reduce((array, key) => [...array, value[key]], []);
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps: Readonly<ArrayTypeProps>) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = (e: Event) => {
|
||||
const { knob, onChange } = this.props;
|
||||
const { value } = e.target as HTMLTextAreaElement;
|
||||
const newVal = formatArray(value, knob.separator);
|
||||
|
||||
onChange(newVal);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
const value = knob.value.join(knob.separator);
|
||||
|
||||
return (
|
||||
<Form.Textarea
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
const Input = styled.input({
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'top',
|
||||
height: 21,
|
||||
outline: 'none',
|
||||
border: '1px solid #ececec',
|
||||
fontSize: '12px',
|
||||
color: '#555',
|
||||
});
|
||||
|
||||
const BooleanType = ({ knob, onChange }) => (
|
||||
<Input
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
type="checkbox"
|
||||
onChange={e => onChange(e.target.checked)}
|
||||
checked={knob.value}
|
||||
/>
|
||||
);
|
||||
|
||||
BooleanType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
BooleanType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.bool,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
BooleanType.serialize = value => (value ? String(value) : null);
|
||||
BooleanType.deserialize = value => value === 'true';
|
||||
|
||||
export default BooleanType;
|
||||
63
addons/knobs/src/components/types/Boolean.tsx
Normal file
63
addons/knobs/src/components/types/Boolean.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
type BooleanTypeKnobValue = boolean;
|
||||
|
||||
export interface BooleanTypeKnob {
|
||||
name: string;
|
||||
value: BooleanTypeKnobValue;
|
||||
separator: string;
|
||||
}
|
||||
|
||||
export interface BooleanTypeProps {
|
||||
knob: BooleanTypeKnob;
|
||||
onChange: (value: BooleanTypeKnobValue) => BooleanTypeKnobValue;
|
||||
}
|
||||
|
||||
const Input = styled.input({
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'top',
|
||||
height: 21,
|
||||
outline: 'none',
|
||||
border: '1px solid #ececec',
|
||||
fontSize: '12px',
|
||||
color: '#555',
|
||||
});
|
||||
|
||||
const serialize = (value: BooleanTypeKnobValue): string | null => (value ? String(value) : null);
|
||||
const deserialize = (value: string | null) => value === 'true';
|
||||
|
||||
const BooleanType: FunctionComponent<BooleanTypeProps> & {
|
||||
serialize: typeof serialize;
|
||||
deserialize: typeof deserialize;
|
||||
} = ({ knob, onChange }) => (
|
||||
<Input
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
type="checkbox"
|
||||
onChange={e => onChange(e.target.checked)}
|
||||
checked={knob.value}
|
||||
/>
|
||||
);
|
||||
|
||||
BooleanType.defaultProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
BooleanType.propTypes = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.bool,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
BooleanType.serialize = serialize;
|
||||
BooleanType.deserialize = deserialize;
|
||||
|
||||
export default BooleanType;
|
||||
@ -1,22 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const ButtonType = ({ knob, onClick }) => (
|
||||
<Form.Button type="button" name={knob.name} onClick={() => onClick(knob)}>
|
||||
{knob.name}
|
||||
</Form.Button>
|
||||
);
|
||||
|
||||
ButtonType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
}).isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
ButtonType.serialize = () => undefined;
|
||||
ButtonType.deserialize = () => undefined;
|
||||
|
||||
export default ButtonType;
|
||||
45
addons/knobs/src/components/types/Button.tsx
Normal file
45
addons/knobs/src/components/types/Button.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { FunctionComponent, Validator } from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
export interface ButtonTypeKnob {
|
||||
name: string;
|
||||
value: unknown;
|
||||
}
|
||||
|
||||
export type ButtonTypeOnClickProp = (knob: ButtonTypeKnob) => any;
|
||||
|
||||
export interface ButtonTypeProps {
|
||||
knob: ButtonTypeKnob;
|
||||
onClick: ButtonTypeOnClickProp;
|
||||
}
|
||||
|
||||
const serialize = (): undefined => undefined;
|
||||
const deserialize = (): undefined => undefined;
|
||||
|
||||
const ButtonType: FunctionComponent<ButtonTypeProps> & {
|
||||
serialize: typeof serialize;
|
||||
deserialize: typeof deserialize;
|
||||
} = ({ knob, onClick }) => (
|
||||
<Form.Button type="button" name={knob.name} onClick={() => onClick(knob)}>
|
||||
{knob.name}
|
||||
</Form.Button>
|
||||
);
|
||||
|
||||
ButtonType.defaultProps = {
|
||||
knob: {} as any,
|
||||
};
|
||||
|
||||
ButtonType.propTypes = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
}).isRequired as Validator<any>,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
ButtonType.serialize = serialize;
|
||||
ButtonType.deserialize = deserialize;
|
||||
|
||||
export default ButtonType;
|
||||
@ -1,110 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
const CheckboxesWrapper = styled.div(({ isInline }) =>
|
||||
isInline
|
||||
? {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
'> * + *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const CheckboxFieldset = styled.fieldset({
|
||||
border: 0,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
const CheckboxLabel = styled.label({
|
||||
padding: '3px 0 3px 5px',
|
||||
lineHeight: '18px',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
class CheckboxesType extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { knob } = props;
|
||||
|
||||
this.state = {
|
||||
values: knob.defaultValue || [],
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
const { onChange } = this.props;
|
||||
const currentValue = e.target.value;
|
||||
const { values } = this.state;
|
||||
|
||||
if (values.includes(currentValue)) {
|
||||
values.splice(values.indexOf(currentValue), 1);
|
||||
} else {
|
||||
values.push(currentValue);
|
||||
}
|
||||
|
||||
this.setState({ values });
|
||||
|
||||
onChange(values);
|
||||
};
|
||||
|
||||
renderCheckboxList = ({ options }) =>
|
||||
Object.keys(options).map(key => this.renderCheckbox(key, options[key]));
|
||||
|
||||
renderCheckbox = (label, value) => {
|
||||
const { knob } = this.props;
|
||||
const { name } = knob;
|
||||
const id = `${name}-${value}`;
|
||||
const { values } = this.state;
|
||||
|
||||
return (
|
||||
<div key={id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
checked={values.includes(value)}
|
||||
/>
|
||||
<CheckboxLabel htmlFor={id}>{label}</CheckboxLabel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob, isInline } = this.props;
|
||||
|
||||
return (
|
||||
<CheckboxFieldset>
|
||||
<CheckboxesWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</CheckboxesWrapper>
|
||||
</CheckboxFieldset>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CheckboxesType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
isInline: false,
|
||||
};
|
||||
|
||||
CheckboxesType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
isInline: PropTypes.bool,
|
||||
};
|
||||
|
||||
CheckboxesType.serialize = value => value;
|
||||
CheckboxesType.deserialize = value => value;
|
||||
|
||||
export default CheckboxesType;
|
||||
135
addons/knobs/src/components/types/Checkboxes.tsx
Normal file
135
addons/knobs/src/components/types/Checkboxes.tsx
Normal file
@ -0,0 +1,135 @@
|
||||
import React, { Component, ChangeEvent, WeakValidationMap } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
type CheckboxesTypeKnobValue = string[];
|
||||
|
||||
interface CheckboxesWrapperProps {
|
||||
isInline: boolean;
|
||||
}
|
||||
|
||||
export interface CheckboxesTypeKnob {
|
||||
name: string;
|
||||
value: CheckboxesTypeKnobValue;
|
||||
defaultValue: CheckboxesTypeKnobValue;
|
||||
options: {
|
||||
[key: string]: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface CheckboxesTypeProps {
|
||||
knob: CheckboxesTypeKnob;
|
||||
isInline: boolean;
|
||||
onChange: (value: CheckboxesTypeKnobValue) => CheckboxesTypeKnobValue;
|
||||
}
|
||||
|
||||
interface CheckboxesTypeState {
|
||||
values: CheckboxesTypeKnobValue;
|
||||
}
|
||||
|
||||
const CheckboxesWrapper = styled.div(({ isInline }: CheckboxesWrapperProps) =>
|
||||
isInline
|
||||
? {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
'> * + *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const CheckboxFieldset = styled.fieldset({
|
||||
border: 0,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
const CheckboxLabel = styled.label({
|
||||
padding: '3px 0 3px 5px',
|
||||
lineHeight: '18px',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
export default class CheckboxesType extends Component<CheckboxesTypeProps, CheckboxesTypeState> {
|
||||
static defaultProps: CheckboxesTypeProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
isInline: false,
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<CheckboxesTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
isInline: PropTypes.bool,
|
||||
};
|
||||
|
||||
static serialize = (value: CheckboxesTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: CheckboxesTypeKnobValue) => value;
|
||||
|
||||
constructor(props: CheckboxesTypeProps) {
|
||||
super(props);
|
||||
const { knob } = props;
|
||||
|
||||
this.state = {
|
||||
values: knob.defaultValue || [],
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { onChange } = this.props;
|
||||
const currentValue = (e.target as HTMLInputElement).value;
|
||||
const { values } = this.state;
|
||||
|
||||
if (values.includes(currentValue)) {
|
||||
values.splice(values.indexOf(currentValue), 1);
|
||||
} else {
|
||||
values.push(currentValue);
|
||||
}
|
||||
|
||||
this.setState({ values });
|
||||
|
||||
onChange(values);
|
||||
};
|
||||
|
||||
renderCheckboxList = ({ options }: CheckboxesTypeKnob) =>
|
||||
Object.keys(options).map(key => this.renderCheckbox(key, options[key]));
|
||||
|
||||
renderCheckbox = (label: string, value: string) => {
|
||||
const { knob } = this.props;
|
||||
const { name } = knob;
|
||||
const id = `${name}-${value}`;
|
||||
const { values } = this.state;
|
||||
|
||||
return (
|
||||
<div key={id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
checked={values.includes(value)}
|
||||
/>
|
||||
<CheckboxLabel htmlFor={id}>{label}</CheckboxLabel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob, isInline } = this.props;
|
||||
|
||||
return (
|
||||
<CheckboxFieldset>
|
||||
<CheckboxesWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</CheckboxesWrapper>
|
||||
</CheckboxFieldset>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,35 @@
|
||||
import { document } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import React, { Component, WeakValidationMap } from 'react';
|
||||
import { SketchPicker, ColorResult } from 'react-color';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type ColorTypeKnobValue = string;
|
||||
|
||||
export interface ColorTypeKnob {
|
||||
name: string;
|
||||
value: ColorTypeKnobValue;
|
||||
}
|
||||
|
||||
interface ColorTypeProps {
|
||||
knob: ColorTypeKnob;
|
||||
onChange: (value: ColorTypeKnobValue) => ColorTypeKnobValue;
|
||||
}
|
||||
|
||||
interface ColorTypeState {
|
||||
displayColorPicker: boolean;
|
||||
}
|
||||
|
||||
interface ColorButtonProps {
|
||||
name: string;
|
||||
type: string;
|
||||
size: string;
|
||||
active: boolean;
|
||||
onClick: () => any;
|
||||
}
|
||||
|
||||
const { Button } = Form;
|
||||
|
||||
const Swatch = styled.div(({ theme }) => ({
|
||||
@ -20,25 +43,45 @@ const Swatch = styled.div(({ theme }) => ({
|
||||
borderRadius: '1rem',
|
||||
}));
|
||||
|
||||
const ColorButton = styled(Button)(({ active }) => ({
|
||||
const ColorButton = styled(Button)(({ active }: ColorButtonProps) => ({
|
||||
zIndex: active ? 3 : 'unset',
|
||||
}));
|
||||
|
||||
const Popover = styled.div({
|
||||
position: 'absolute',
|
||||
zIndex: '2',
|
||||
zIndex: 2,
|
||||
});
|
||||
|
||||
class ColorType extends React.Component {
|
||||
state = {
|
||||
export default class ColorType extends Component<ColorTypeProps, ColorTypeState> {
|
||||
static propTypes: WeakValidationMap<ColorTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps: ColorTypeProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
static serialize = (value: ColorTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: ColorTypeKnobValue) => value;
|
||||
|
||||
state: ColorTypeState = {
|
||||
displayColorPicker: false,
|
||||
};
|
||||
|
||||
popover: HTMLDivElement;
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('mousedown', this.handleWindowMouseDown);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
shouldComponentUpdate(nextProps: ColorTypeProps, nextState: ColorTypeState) {
|
||||
const { knob } = this.props;
|
||||
const { displayColorPicker } = this.state;
|
||||
|
||||
@ -51,9 +94,9 @@ class ColorType extends React.Component {
|
||||
document.removeEventListener('mousedown', this.handleWindowMouseDown);
|
||||
}
|
||||
|
||||
handleWindowMouseDown = e => {
|
||||
handleWindowMouseDown = (e: MouseEvent) => {
|
||||
const { displayColorPicker } = this.state;
|
||||
if (!displayColorPicker || this.popover.contains(e.target)) {
|
||||
if (!displayColorPicker || this.popover.contains(e.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -70,7 +113,7 @@ class ColorType extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = color => {
|
||||
handleChange = (color: ColorResult) => {
|
||||
const { onChange } = this.props;
|
||||
|
||||
onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`);
|
||||
@ -105,20 +148,3 @@ class ColorType extends React.Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ColorType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
ColorType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
ColorType.serialize = value => value;
|
||||
ColorType.deserialize = value => value;
|
||||
|
||||
export default ColorType;
|
||||
@ -1,8 +1,24 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, ChangeEvent, WeakValidationMap } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type DateTypeKnobValue = number;
|
||||
|
||||
export interface DateTypeKnob {
|
||||
name: string;
|
||||
value: DateTypeKnobValue;
|
||||
}
|
||||
|
||||
interface DateTypeProps {
|
||||
knob: DateTypeKnob;
|
||||
onChange: (value: DateTypeKnobValue) => DateTypeKnobValue;
|
||||
}
|
||||
|
||||
interface DateTypeState {
|
||||
valid: boolean | undefined;
|
||||
}
|
||||
|
||||
const FlexSpaced = styled.div({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
@ -15,29 +31,54 @@ const FlexSpaced = styled.div({
|
||||
});
|
||||
const FlexInput = styled(Form.Input)({ flex: 1 });
|
||||
|
||||
const formatDate = date => {
|
||||
const formatDate = (date: Date) => {
|
||||
const year = `000${date.getFullYear()}`.slice(-4);
|
||||
const month = `0${date.getMonth() + 1}`.slice(-2);
|
||||
const day = `0${date.getDate()}`.slice(-2);
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
const formatTime = date => {
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const hours = `0${date.getHours()}`.slice(-2);
|
||||
const minutes = `0${date.getMinutes()}`.slice(-2);
|
||||
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
class DateType extends Component {
|
||||
export default class DateType extends Component<DateTypeProps, DateTypeState> {
|
||||
static defaultProps: DateTypeProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<DateTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
static serialize = (value: DateTypeKnobValue) =>
|
||||
new Date(value).getTime() || new Date().getTime();
|
||||
|
||||
static deserialize = (value: DateTypeKnobValue) =>
|
||||
new Date(value).getTime() || new Date().getTime();
|
||||
|
||||
static getDerivedStateFromProps() {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
state = {
|
||||
state: DateTypeState = {
|
||||
valid: undefined,
|
||||
};
|
||||
|
||||
dateInput: HTMLInputElement;
|
||||
|
||||
timeInput: HTMLInputElement;
|
||||
|
||||
componentDidUpdate() {
|
||||
const { knob } = this.props;
|
||||
const { valid } = this.state;
|
||||
@ -49,7 +90,7 @@ class DateType extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
onDateChange = e => {
|
||||
onDateChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { knob, onChange } = this.props;
|
||||
const { state } = this;
|
||||
|
||||
@ -70,7 +111,7 @@ class DateType extends Component {
|
||||
}
|
||||
};
|
||||
|
||||
onTimeChange = e => {
|
||||
onTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { knob, onChange } = this.props;
|
||||
const { state } = this;
|
||||
|
||||
@ -100,7 +141,7 @@ class DateType extends Component {
|
||||
<FlexInput
|
||||
type="date"
|
||||
max="9999-12-31" // I do this because of a rendering bug in chrome
|
||||
ref={el => {
|
||||
ref={(el: HTMLInputElement) => {
|
||||
this.dateInput = el;
|
||||
}}
|
||||
id={`${name}date`}
|
||||
@ -111,7 +152,7 @@ class DateType extends Component {
|
||||
type="time"
|
||||
id={`${name}time`}
|
||||
name={`${name}time`}
|
||||
ref={el => {
|
||||
ref={(el: HTMLInputElement) => {
|
||||
this.timeInput = el;
|
||||
}}
|
||||
onChange={this.onTimeChange}
|
||||
@ -121,21 +162,3 @@ class DateType extends Component {
|
||||
) : null;
|
||||
}
|
||||
}
|
||||
|
||||
DateType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
DateType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
DateType.serialize = value => new Date(value).getTime() || new Date().getTime();
|
||||
DateType.deserialize = value => new Date(value).getTime() || new Date().getTime();
|
||||
|
||||
export default DateType;
|
||||
@ -1,46 +0,0 @@
|
||||
import { FileReader } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const FileInput = styled(Form.Input)({
|
||||
paddingTop: 4,
|
||||
});
|
||||
|
||||
function fileReaderPromise(file) {
|
||||
return new Promise(resolve => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = e => resolve(e.currentTarget.result);
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
const FilesType = ({ knob, onChange }) => (
|
||||
<FileInput
|
||||
type="file"
|
||||
name={knob.name}
|
||||
multiple
|
||||
onChange={e => Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)}
|
||||
accept={knob.accept}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
|
||||
FilesType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
FilesType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
FilesType.serialize = () => undefined;
|
||||
FilesType.deserialize = () => undefined;
|
||||
|
||||
export default FilesType;
|
||||
68
addons/knobs/src/components/types/Files.tsx
Normal file
68
addons/knobs/src/components/types/Files.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import { FileReader } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { ChangeEvent, FunctionComponent } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type DateTypeKnobValue = string[];
|
||||
|
||||
export interface FileTypeKnob {
|
||||
name: string;
|
||||
accept: string;
|
||||
value: DateTypeKnobValue;
|
||||
}
|
||||
|
||||
export interface FilesTypeProps {
|
||||
knob: FileTypeKnob;
|
||||
onChange: (value: DateTypeKnobValue) => DateTypeKnobValue;
|
||||
}
|
||||
|
||||
const FileInput = styled(Form.Input)({
|
||||
paddingTop: 4,
|
||||
});
|
||||
|
||||
function fileReaderPromise(file: File) {
|
||||
return new Promise<string>(resolve => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = (e: Event) => resolve((e.currentTarget as FileReader).result as string);
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
const serialize = (): undefined => undefined;
|
||||
const deserialize = (): undefined => undefined;
|
||||
|
||||
const FilesType: FunctionComponent<FilesTypeProps> & {
|
||||
serialize: typeof serialize;
|
||||
deserialize: typeof deserialize;
|
||||
} = ({ knob, onChange }) => (
|
||||
<FileInput
|
||||
type="file"
|
||||
name={knob.name}
|
||||
multiple
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)
|
||||
}
|
||||
accept={knob.accept}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
|
||||
FilesType.defaultProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
FilesType.propTypes = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
FilesType.serialize = serialize;
|
||||
FilesType.deserialize = deserialize;
|
||||
|
||||
export default FilesType;
|
||||
@ -1,102 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const base = {
|
||||
boxSizing: 'border-box',
|
||||
height: '25px',
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
padding: '5px',
|
||||
color: '#444',
|
||||
};
|
||||
|
||||
const RangeInput = styled.input(base, {
|
||||
display: 'table-cell',
|
||||
flexGrow: 1,
|
||||
});
|
||||
const RangeLabel = styled.span({
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
fontSize: 12,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
const RangeWrapper = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
class NumberType extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = event => {
|
||||
const { onChange } = this.props;
|
||||
const { value } = event.target;
|
||||
|
||||
let parsedValue = Number(value);
|
||||
|
||||
if (Number.isNaN(parsedValue) || value === '') {
|
||||
parsedValue = null;
|
||||
}
|
||||
|
||||
onChange(parsedValue);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return knob.range ? (
|
||||
<RangeWrapper>
|
||||
<RangeLabel>{knob.min}</RangeLabel>
|
||||
<RangeInput
|
||||
value={knob.value}
|
||||
type="range"
|
||||
name={knob.name}
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<RangeLabel>{`${knob.value} / ${knob.max}`}</RangeLabel>
|
||||
</RangeWrapper>
|
||||
) : (
|
||||
<Form.Input
|
||||
value={knob.value}
|
||||
type="number"
|
||||
name={knob.name}
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
NumberType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
range: PropTypes.bool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
step: PropTypes.number,
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
NumberType.serialize = value => (value === null || value === undefined ? '' : String(value));
|
||||
NumberType.deserialize = value => (value === '' ? null : parseFloat(value));
|
||||
|
||||
export default NumberType;
|
||||
123
addons/knobs/src/components/types/Number.tsx
Normal file
123
addons/knobs/src/components/types/Number.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component, ChangeEvent } from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type NumberTypeKnobValue = number;
|
||||
|
||||
export interface NumberTypeKnobOptions {
|
||||
range?: boolean;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
}
|
||||
|
||||
export interface NumberTypeKnob extends NumberTypeKnobOptions {
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
interface NumberTypeProps {
|
||||
knob: NumberTypeKnob;
|
||||
onChange: (value: NumberTypeKnobValue) => NumberTypeKnobValue;
|
||||
}
|
||||
|
||||
const RangeInput = styled.input(
|
||||
{
|
||||
boxSizing: 'border-box',
|
||||
height: '25px',
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
padding: '5px',
|
||||
color: '#444',
|
||||
},
|
||||
{
|
||||
display: 'table-cell',
|
||||
flexGrow: 1,
|
||||
}
|
||||
);
|
||||
|
||||
const RangeLabel = styled.span({
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
fontSize: 12,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
const RangeWrapper = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export default class NumberType extends Component<NumberTypeProps> {
|
||||
static propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
range: PropTypes.bool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
step: PropTypes.number,
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static serialize = (value: NumberTypeKnobValue | null | undefined) =>
|
||||
value === null || value === undefined ? '' : String(value);
|
||||
|
||||
static deserialize = (value: string) => (value === '' ? null : parseFloat(value));
|
||||
|
||||
shouldComponentUpdate(nextProps: NumberTypeProps) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const { onChange } = this.props;
|
||||
const { value } = event.target;
|
||||
|
||||
let parsedValue = Number(value);
|
||||
|
||||
if (Number.isNaN(parsedValue) || value === '') {
|
||||
parsedValue = null;
|
||||
}
|
||||
|
||||
onChange(parsedValue);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return knob.range ? (
|
||||
<RangeWrapper>
|
||||
<RangeLabel>{knob.min}</RangeLabel>
|
||||
<RangeInput
|
||||
value={knob.value}
|
||||
type="range"
|
||||
name={knob.name}
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<RangeLabel>{`${knob.value} / ${knob.max}`}</RangeLabel>
|
||||
</RangeWrapper>
|
||||
) : (
|
||||
<Form.Input
|
||||
value={knob.value}
|
||||
type="number"
|
||||
name={knob.name}
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,42 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, ChangeEvent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import deepEqual from 'fast-deep-equal';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
class ObjectType extends Component {
|
||||
state = {
|
||||
value: {},
|
||||
failed: false,
|
||||
json: '',
|
||||
export interface ObjectTypeKnob<T> {
|
||||
name: string;
|
||||
value: T;
|
||||
}
|
||||
|
||||
interface ObjectTypeProps<T> {
|
||||
knob: ObjectTypeKnob<T>;
|
||||
onChange: (value: T) => T;
|
||||
}
|
||||
|
||||
interface ObjectTypeState<T> {
|
||||
value: string;
|
||||
failed: boolean;
|
||||
json?: T;
|
||||
}
|
||||
|
||||
class ObjectType<T> extends Component<ObjectTypeProps<T>> {
|
||||
static propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
static serialize: { <T>(object: T): string } = object => JSON.stringify(object);
|
||||
|
||||
static deserialize: { <T>(value: string): T } = value => (value ? JSON.parse(value) : {});
|
||||
|
||||
static getDerivedStateFromProps<T>(
|
||||
props: ObjectTypeProps<T>,
|
||||
state: ObjectTypeState<T>
|
||||
): ObjectTypeState<T> {
|
||||
if (!deepEqual(props.knob.value, state.json)) {
|
||||
try {
|
||||
return {
|
||||
@ -26,7 +51,13 @@ class ObjectType extends Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
state: ObjectTypeState<T> = {
|
||||
value: '',
|
||||
failed: false,
|
||||
json: {} as any,
|
||||
};
|
||||
|
||||
handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const { value } = e.target;
|
||||
const { json: stateJson } = this.state;
|
||||
const { knob, onChange } = this.props;
|
||||
@ -65,17 +96,6 @@ class ObjectType extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
ObjectType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
ObjectType.serialize = object => JSON.stringify(object);
|
||||
ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
|
||||
|
||||
polyfill(ObjectType);
|
||||
|
||||
export default ObjectType;
|
||||
@ -1,85 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactSelect from 'react-select';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import RadiosType from './Radio';
|
||||
import CheckboxesType from './Checkboxes';
|
||||
|
||||
// TODO: Apply the Storybook theme to react-select
|
||||
|
||||
const OptionsSelect = styled(ReactSelect)({
|
||||
width: '100%',
|
||||
maxWidth: '300px',
|
||||
color: 'black',
|
||||
});
|
||||
|
||||
const OptionsType = props => {
|
||||
const { knob, onChange } = props;
|
||||
const { display } = knob.optionsObj;
|
||||
|
||||
if (display === 'check' || display === 'inline-check') {
|
||||
const isInline = display === 'inline-check';
|
||||
return <CheckboxesType {...props} isInline={isInline} />;
|
||||
}
|
||||
|
||||
if (display === 'radio' || display === 'inline-radio') {
|
||||
const isInline = display === 'inline-radio';
|
||||
return <RadiosType {...props} isInline={isInline} />;
|
||||
}
|
||||
|
||||
if (display === 'select' || display === 'multi-select') {
|
||||
const options = Object.keys(knob.options).map(key => ({
|
||||
value: knob.options[key],
|
||||
label: key,
|
||||
}));
|
||||
|
||||
const isMulti = display === 'multi-select';
|
||||
const optionsIndex = options.findIndex(i => i.value === knob.value);
|
||||
let defaultValue = options[optionsIndex];
|
||||
let handleChange = e => onChange(e.value);
|
||||
|
||||
if (isMulti) {
|
||||
defaultValue = options.filter(i => knob.value.includes(i.value));
|
||||
handleChange = values => onChange(values.map(item => item.value));
|
||||
}
|
||||
|
||||
return (
|
||||
<OptionsSelect
|
||||
value={defaultValue}
|
||||
options={options}
|
||||
isMulti={isMulti}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
OptionsType.defaultProps = {
|
||||
knob: {},
|
||||
display: 'select',
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
OptionsType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
|
||||
options: PropTypes.object,
|
||||
}),
|
||||
display: PropTypes.oneOf([
|
||||
'check',
|
||||
'inline-check',
|
||||
'radio',
|
||||
'inline-radio',
|
||||
'select',
|
||||
'multi-select',
|
||||
]),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
OptionsType.serialize = value => value;
|
||||
OptionsType.deserialize = value => value;
|
||||
|
||||
export default OptionsType;
|
||||
134
addons/knobs/src/components/types/Options.tsx
Normal file
134
addons/knobs/src/components/types/Options.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactSelect from 'react-select';
|
||||
import { ValueType } from 'react-select/lib/types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import RadiosType from './Radio';
|
||||
import CheckboxesType from './Checkboxes';
|
||||
|
||||
// TODO: Apply the Storybook theme to react-select
|
||||
|
||||
export type OptionsKnobOptionsDisplay =
|
||||
| 'radio'
|
||||
| 'inline-radio'
|
||||
| 'check'
|
||||
| 'inline-check'
|
||||
| 'select'
|
||||
| 'multi-select';
|
||||
|
||||
export interface OptionsKnobOptions {
|
||||
display?: OptionsKnobOptionsDisplay;
|
||||
}
|
||||
|
||||
export interface OptionsTypeKnob<T> {
|
||||
name: string;
|
||||
value: T;
|
||||
defaultValue: T;
|
||||
options: OptionsTypeOptionsProp<T>;
|
||||
optionsObj: OptionsKnobOptions;
|
||||
}
|
||||
|
||||
export interface OptionsTypeOptionsProp<T> {
|
||||
[key: string]: T;
|
||||
}
|
||||
|
||||
export interface OptionsTypeProps<T> {
|
||||
knob: OptionsTypeKnob<T>;
|
||||
display: OptionsKnobOptionsDisplay;
|
||||
onChange: (value: T) => T;
|
||||
}
|
||||
|
||||
// : React.ComponentType<ReactSelectProps>
|
||||
const OptionsSelect = styled(ReactSelect)({
|
||||
width: '100%',
|
||||
maxWidth: '300px',
|
||||
color: 'black',
|
||||
});
|
||||
|
||||
type ReactSelectOnChangeFn<OptionType = OptionsSelectValueItem> = (
|
||||
value: ValueType<OptionType>
|
||||
) => void;
|
||||
|
||||
interface OptionsSelectValueItem {
|
||||
value: any;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const serialize: { <T>(value: T): T } = value => value;
|
||||
const deserialize: { <T>(value: T): T } = value => value;
|
||||
|
||||
const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
|
||||
serialize: typeof serialize;
|
||||
deserialize: typeof deserialize;
|
||||
} = props => {
|
||||
const { knob, onChange } = props;
|
||||
const { display } = knob.optionsObj;
|
||||
|
||||
if (display === 'check' || display === 'inline-check') {
|
||||
const isInline = display === 'inline-check';
|
||||
return <CheckboxesType {...props} isInline={isInline} />;
|
||||
}
|
||||
|
||||
if (display === 'radio' || display === 'inline-radio') {
|
||||
const isInline = display === 'inline-radio';
|
||||
return <RadiosType {...props} isInline={isInline} />;
|
||||
}
|
||||
|
||||
if (display === 'select' || display === 'multi-select') {
|
||||
const options: OptionsSelectValueItem[] = Object.keys(knob.options).map(key => ({
|
||||
value: knob.options[key],
|
||||
label: key,
|
||||
}));
|
||||
|
||||
const isMulti = display === 'multi-select';
|
||||
const optionsIndex = options.findIndex(i => i.value === knob.value);
|
||||
let defaultValue: typeof options | typeof options[0] = options[optionsIndex];
|
||||
let handleChange: ReactSelectOnChangeFn = (e: OptionsSelectValueItem) => onChange(e.value);
|
||||
|
||||
if (isMulti) {
|
||||
defaultValue = options.filter(i => knob.value.includes(i.value));
|
||||
handleChange = (values: OptionsSelectValueItem[]) => onChange(values.map(item => item.value));
|
||||
}
|
||||
|
||||
return (
|
||||
<OptionsSelect
|
||||
value={defaultValue}
|
||||
options={options}
|
||||
isMulti={isMulti}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
OptionsType.defaultProps = {
|
||||
knob: {} as any,
|
||||
display: 'select',
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
OptionsType.propTypes = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
|
||||
options: PropTypes.object,
|
||||
}) as any,
|
||||
display: PropTypes.oneOf<OptionsKnobOptionsDisplay>([
|
||||
'radio',
|
||||
'inline-radio',
|
||||
'check',
|
||||
'inline-check',
|
||||
'select',
|
||||
'multi-select',
|
||||
]),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
OptionsType.serialize = serialize;
|
||||
OptionsType.deserialize = deserialize;
|
||||
|
||||
export default OptionsType;
|
||||
@ -1,79 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
const RadiosWrapper = styled.div(({ isInline }) =>
|
||||
isInline
|
||||
? {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
'> * + *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const RadioLabel = styled.label({
|
||||
padding: '3px 0 3px 5px',
|
||||
lineHeight: '18px',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
class RadiosType extends Component {
|
||||
renderRadioButtonList({ options }) {
|
||||
if (Array.isArray(options)) {
|
||||
return options.map(val => this.renderRadioButton(val, val));
|
||||
}
|
||||
return Object.keys(options).map(key => this.renderRadioButton(key, options[key]));
|
||||
}
|
||||
|
||||
renderRadioButton(label, value) {
|
||||
const opts = { label, value };
|
||||
const { onChange, knob } = this.props;
|
||||
const { name } = knob;
|
||||
const id = `${name}-${opts.value}`;
|
||||
|
||||
return (
|
||||
<div key={id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={opts.value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
checked={value === knob.value}
|
||||
/>
|
||||
<RadioLabel htmlFor={id}>{label}</RadioLabel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knob, isInline } = this.props;
|
||||
|
||||
return <RadiosWrapper isInline={isInline}>{this.renderRadioButtonList(knob)}</RadiosWrapper>;
|
||||
}
|
||||
}
|
||||
|
||||
RadiosType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
isInline: false,
|
||||
};
|
||||
|
||||
RadiosType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
isInline: PropTypes.bool,
|
||||
};
|
||||
|
||||
RadiosType.serialize = value => value;
|
||||
RadiosType.deserialize = value => value;
|
||||
|
||||
export default RadiosType;
|
||||
104
addons/knobs/src/components/types/Radio.tsx
Normal file
104
addons/knobs/src/components/types/Radio.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { Component, WeakValidationMap } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
type RadiosTypeKnobValue = string;
|
||||
|
||||
export interface RadiosTypeKnob {
|
||||
name: string;
|
||||
value: RadiosTypeKnobValue;
|
||||
defaultValue: RadiosTypeKnobValue;
|
||||
options: RadiosTypeOptionsProp;
|
||||
}
|
||||
|
||||
export interface RadiosTypeOptionsProp {
|
||||
[key: string]: RadiosTypeKnobValue;
|
||||
}
|
||||
|
||||
interface RadiosTypeProps {
|
||||
knob: RadiosTypeKnob;
|
||||
isInline: boolean;
|
||||
onChange: (value: RadiosTypeKnobValue) => RadiosTypeKnobValue;
|
||||
}
|
||||
|
||||
interface RadiosWrapperProps {
|
||||
isInline: boolean;
|
||||
}
|
||||
|
||||
const RadiosWrapper = styled.div(({ isInline }: RadiosWrapperProps) =>
|
||||
isInline
|
||||
? {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
'> * + *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const RadioLabel = styled.label({
|
||||
padding: '3px 0 3px 5px',
|
||||
lineHeight: '18px',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
class RadiosType extends Component<RadiosTypeProps> {
|
||||
static defaultProps: RadiosTypeProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
isInline: false,
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<RadiosTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
isInline: PropTypes.bool,
|
||||
};
|
||||
|
||||
static serialize = (value: RadiosTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: RadiosTypeKnobValue) => value;
|
||||
|
||||
renderRadioButtonList({ options }: RadiosTypeKnob) {
|
||||
if (Array.isArray(options)) {
|
||||
return options.map(val => this.renderRadioButton(val, val));
|
||||
}
|
||||
return Object.keys(options).map(key => this.renderRadioButton(key, options[key]));
|
||||
}
|
||||
|
||||
renderRadioButton(label: string, value: RadiosTypeKnobValue) {
|
||||
const opts = { label, value };
|
||||
const { onChange, knob } = this.props;
|
||||
const { name } = knob;
|
||||
const id = `${name}-${opts.value}`;
|
||||
|
||||
return (
|
||||
<div key={id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={opts.value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
checked={value === knob.value}
|
||||
/>
|
||||
<RadioLabel htmlFor={id}>{label}</RadioLabel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knob, isInline } = this.props;
|
||||
|
||||
return <RadiosWrapper isInline={isInline}>{this.renderRadioButtonList(knob)}</RadiosWrapper>;
|
||||
}
|
||||
}
|
||||
|
||||
export default RadiosType;
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const SelectType = ({ knob, onChange }) => {
|
||||
const { options } = knob;
|
||||
const entries = Array.isArray(options)
|
||||
? options.reduce((acc, k) => Object.assign(acc, { [k]: k }), {})
|
||||
: options;
|
||||
|
||||
const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
|
||||
|
||||
return (
|
||||
<Form.Select
|
||||
value={selectedKey}
|
||||
name={knob.name}
|
||||
onChange={e => {
|
||||
onChange(entries[e.target.value]);
|
||||
}}
|
||||
size="flex"
|
||||
>
|
||||
{Object.entries(entries).map(([key]) => (
|
||||
<option key={key} value={key}>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
);
|
||||
};
|
||||
|
||||
SelectType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
SelectType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
SelectType.serialize = value => value;
|
||||
SelectType.deserialize = value => value;
|
||||
|
||||
export default SelectType;
|
||||
73
addons/knobs/src/components/types/Select.tsx
Normal file
73
addons/knobs/src/components/types/Select.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React, { FunctionComponent, ChangeEvent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type SelectTypeKnobValue = string;
|
||||
|
||||
export interface SelectTypeKnob {
|
||||
name: string;
|
||||
value: SelectTypeKnobValue;
|
||||
options: SelectTypeOptionsProp;
|
||||
}
|
||||
|
||||
export interface SelectTypeOptionsProp {
|
||||
[key: string]: SelectTypeKnobValue;
|
||||
}
|
||||
|
||||
export interface SelectTypeProps {
|
||||
knob: SelectTypeKnob;
|
||||
onChange: (value: SelectTypeKnobValue) => SelectTypeKnobValue;
|
||||
}
|
||||
|
||||
const serialize = (value: SelectTypeKnobValue) => value;
|
||||
const deserialize = (value: SelectTypeKnobValue) => value;
|
||||
|
||||
const SelectType: FunctionComponent<SelectTypeProps> & {
|
||||
serialize: typeof serialize;
|
||||
deserialize: typeof deserialize;
|
||||
} = ({ knob, onChange }) => {
|
||||
const { options } = knob;
|
||||
const entries = Array.isArray(options)
|
||||
? options.reduce((acc, k) => Object.assign(acc, { [k]: k }), {})
|
||||
: options;
|
||||
|
||||
const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
|
||||
|
||||
return (
|
||||
<Form.Select
|
||||
value={selectedKey}
|
||||
name={knob.name}
|
||||
onChange={(e: ChangeEvent<HTMLSelectElement>) => {
|
||||
onChange(entries[e.target.value]);
|
||||
}}
|
||||
size="flex"
|
||||
>
|
||||
{Object.entries(entries).map(([key]) => (
|
||||
<option key={key} value={key}>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
);
|
||||
};
|
||||
|
||||
SelectType.defaultProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
SelectType.propTypes = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
SelectType.serialize = serialize;
|
||||
SelectType.deserialize = deserialize;
|
||||
|
||||
export default SelectType;
|
||||
@ -1,51 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
class TextType extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = event => {
|
||||
const { onChange } = this.props;
|
||||
const { value } = event.target;
|
||||
|
||||
onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return (
|
||||
<Form.Textarea
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
value={knob.value}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TextType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
TextType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
TextType.serialize = value => value;
|
||||
TextType.deserialize = value => value;
|
||||
|
||||
export default TextType;
|
||||
63
addons/knobs/src/components/types/Text.tsx
Normal file
63
addons/knobs/src/components/types/Text.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component, ChangeEvent, WeakValidationMap } from 'react';
|
||||
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
type TextTypeKnobValue = string;
|
||||
|
||||
export interface TextTypeKnob {
|
||||
name: string;
|
||||
value: TextTypeKnobValue;
|
||||
}
|
||||
|
||||
interface TextTypeProps {
|
||||
knob: TextTypeKnob;
|
||||
onChange: (value: TextTypeKnobValue) => TextTypeKnobValue;
|
||||
}
|
||||
|
||||
export default class TextType extends Component<TextTypeProps> {
|
||||
static defaultProps: TextTypeProps = {
|
||||
knob: {} as any,
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
static propTypes: WeakValidationMap<TextTypeProps> = {
|
||||
// TODO: remove `any` once DefinitelyTyped/DefinitelyTyped#31280 has been resolved
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}) as any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
static serialize = (value: TextTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: TextTypeKnobValue) => value;
|
||||
|
||||
shouldComponentUpdate(nextProps: TextTypeProps) {
|
||||
const { knob } = this.props;
|
||||
|
||||
return nextProps.knob.value !== knob.value;
|
||||
}
|
||||
|
||||
handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const { onChange } = this.props;
|
||||
const { value } = event.target;
|
||||
|
||||
onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return (
|
||||
<Form.Textarea
|
||||
id={knob.name}
|
||||
name={knob.name}
|
||||
value={knob.value}
|
||||
onChange={this.handleChange}
|
||||
size="flex"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -25,3 +25,16 @@ export default {
|
||||
files: FilesType,
|
||||
options: OptionsType,
|
||||
};
|
||||
|
||||
export { TextTypeKnob } from './Text';
|
||||
export { NumberTypeKnob, NumberTypeKnobOptions } from './Number';
|
||||
export { ColorTypeKnob } from './Color';
|
||||
export { BooleanTypeKnob } from './Boolean';
|
||||
export { ObjectTypeKnob } from './Object';
|
||||
export { SelectTypeKnob, SelectTypeOptionsProp } from './Select';
|
||||
export { RadiosTypeKnob, RadiosTypeOptionsProp } from './Radio';
|
||||
export { ArrayTypeKnob } from './Array';
|
||||
export { DateTypeKnob } from './Date';
|
||||
export { ButtonTypeKnob, ButtonTypeOnClickProp } from './Button';
|
||||
export { FileTypeKnob } from './Files';
|
||||
export { OptionsTypeKnob, OptionsTypeOptionsProp, OptionsKnobOptions } from './Options';
|
||||
@ -1,21 +1,22 @@
|
||||
const unconvertable = () => undefined;
|
||||
const unconvertable = (): undefined => undefined;
|
||||
|
||||
export const converters = {
|
||||
jsonParse: value => JSON.parse(value),
|
||||
jsonStringify: value => JSON.stringify(value),
|
||||
simple: value => value,
|
||||
stringifyIfSet: value => (value === null || value === undefined ? '' : String(value)),
|
||||
stringifyIfTruthy: value => (value ? String(value) : null),
|
||||
toArray: value => {
|
||||
jsonParse: (value: any): any => JSON.parse(value),
|
||||
jsonStringify: (value: any): string => JSON.stringify(value),
|
||||
simple: (value: any): any => value,
|
||||
stringifyIfSet: (value: any): string =>
|
||||
value === null || value === undefined ? '' : String(value),
|
||||
stringifyIfTruthy: (value: any): string | null => (value ? String(value) : null),
|
||||
toArray: (value: any): any[] => {
|
||||
if (Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return value.split(',');
|
||||
},
|
||||
toBoolean: value => value === 'true',
|
||||
toDate: value => new Date(value).getTime() || new Date().getTime(),
|
||||
toFloat: value => (value === '' ? null : parseFloat(value)),
|
||||
toBoolean: (value: any): boolean => value === 'true',
|
||||
toDate: (value: any): number => new Date(value).getTime() || new Date().getTime(),
|
||||
toFloat: (value: any): number => (value === '' ? null : parseFloat(value)),
|
||||
};
|
||||
|
||||
export const serializers = {
|
||||
@ -1,22 +1,34 @@
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
import { SET_OPTIONS } from './shared';
|
||||
|
||||
import { manager, registerKnobs } from './registerKnobs';
|
||||
import {
|
||||
NumberTypeKnobOptions,
|
||||
ButtonTypeOnClickProp,
|
||||
RadiosTypeOptionsProp,
|
||||
SelectTypeOptionsProp,
|
||||
OptionsTypeOptionsProp,
|
||||
OptionsKnobOptions,
|
||||
} from './components/types';
|
||||
|
||||
export function knob(name, optionsParam) {
|
||||
export function knob(name: string, optionsParam: any) {
|
||||
return manager.knob(name, optionsParam);
|
||||
}
|
||||
|
||||
export function text(name, value, groupId) {
|
||||
export function text(name: string, value: string, groupId?: string) {
|
||||
return manager.knob(name, { type: 'text', value, groupId });
|
||||
}
|
||||
|
||||
export function boolean(name, value, groupId) {
|
||||
export function boolean(name: string, value: boolean, groupId?: string) {
|
||||
return manager.knob(name, { type: 'boolean', value, groupId });
|
||||
}
|
||||
|
||||
export function number(name, value, options = {}, groupId) {
|
||||
export function number(
|
||||
name: string,
|
||||
value: number,
|
||||
options: NumberTypeKnobOptions = {},
|
||||
groupId?: string
|
||||
) {
|
||||
const rangeDefaults = {
|
||||
min: 0,
|
||||
max: 10,
|
||||
@ -31,8 +43,8 @@ export function number(name, value, options = {}, groupId) {
|
||||
: options;
|
||||
|
||||
const finalOptions = {
|
||||
type: 'number' as 'number',
|
||||
...mergedOptions,
|
||||
type: 'number',
|
||||
value,
|
||||
groupId,
|
||||
};
|
||||
@ -40,40 +52,56 @@ export function number(name, value, options = {}, groupId) {
|
||||
return manager.knob(name, finalOptions);
|
||||
}
|
||||
|
||||
export function color(name, value, groupId) {
|
||||
export function color(name: string, value: string, groupId?: string) {
|
||||
return manager.knob(name, { type: 'color', value, groupId });
|
||||
}
|
||||
|
||||
export function object(name, value, groupId) {
|
||||
export function object<T>(name: string, value: T, groupId?: string) {
|
||||
return manager.knob(name, { type: 'object', value, groupId });
|
||||
}
|
||||
|
||||
export function select(name, options, value, groupId) {
|
||||
export function select(
|
||||
name: string,
|
||||
options: SelectTypeOptionsProp,
|
||||
value: string,
|
||||
groupId?: string
|
||||
) {
|
||||
return manager.knob(name, { type: 'select', selectV2: true, options, value, groupId });
|
||||
}
|
||||
|
||||
export function radios(name, options, value, groupId) {
|
||||
export function radios(
|
||||
name: string,
|
||||
options: RadiosTypeOptionsProp,
|
||||
value: string,
|
||||
groupId?: string
|
||||
) {
|
||||
return manager.knob(name, { type: 'radios', options, value, groupId });
|
||||
}
|
||||
|
||||
export function array(name, value, separator = ',', groupId) {
|
||||
export function array(name: string, value: string[], separator = ',', groupId?: string) {
|
||||
return manager.knob(name, { type: 'array', value, separator, groupId });
|
||||
}
|
||||
|
||||
export function date(name, value = new Date(), groupId) {
|
||||
export function date(name: string, value = new Date(), groupId?: string) {
|
||||
const proxyValue = value ? value.getTime() : null;
|
||||
return manager.knob(name, { type: 'date', value: proxyValue, groupId });
|
||||
}
|
||||
|
||||
export function button(name, callback, groupId) {
|
||||
export function button(name: string, callback: ButtonTypeOnClickProp, groupId?: string) {
|
||||
return manager.knob(name, { type: 'button', callback, hideLabel: true, groupId });
|
||||
}
|
||||
|
||||
export function files(name, accept, value = [], groupId) {
|
||||
export function files(name: string, accept: string, value: string[] = [], groupId?: string) {
|
||||
return manager.knob(name, { type: 'files', accept, value, groupId });
|
||||
}
|
||||
|
||||
export function optionsKnob(name, valuesObj, value, optionsObj, groupId) {
|
||||
export function optionsKnob<T>(
|
||||
name: string,
|
||||
valuesObj: OptionsTypeOptionsProp<T>,
|
||||
value: string,
|
||||
optionsObj: OptionsKnobOptions,
|
||||
groupId?: string
|
||||
) {
|
||||
return manager.knob(name, { type: 'options', options: valuesObj, value, optionsObj, groupId });
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
|
||||
addons.register(ADDON_ID, api => {
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Knobs',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active, key }) => <Panel api={api} key={key} active={active} />,
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
@ -4,6 +4,7 @@ import debounce from 'lodash/debounce';
|
||||
|
||||
import KnobManager from './KnobManager';
|
||||
import { CHANGE, CLICK, RESET, SET } from './shared';
|
||||
import { KnobStoreKnob } from './KnobStore';
|
||||
|
||||
export const manager = new KnobManager();
|
||||
const { knobStore } = manager;
|
||||
@ -13,7 +14,7 @@ function forceReRender() {
|
||||
addons.getChannel().emit(FORCE_RE_RENDER);
|
||||
}
|
||||
|
||||
function setPaneKnobs(timestamp = +new Date()) {
|
||||
function setPaneKnobs(timestamp: boolean | number = +new Date()) {
|
||||
const channel = addons.getChannel();
|
||||
channel.emit(SET, { knobs: knobStore.getAll(), timestamp });
|
||||
}
|
||||
@ -29,7 +30,7 @@ const debouncedResetAndForceUpdate = debounce(
|
||||
COMPONENT_FORCE_RENDER_DEBOUNCE_DELAY_MS
|
||||
);
|
||||
|
||||
function knobChanged(change) {
|
||||
function knobChanged(change: KnobStoreKnob) {
|
||||
const { name } = change;
|
||||
const { value } = change; // Update the related knob and it's value.
|
||||
const knobOptions = knobStore.get(name);
|
||||
@ -42,7 +43,7 @@ function knobChanged(change) {
|
||||
}
|
||||
}
|
||||
|
||||
function knobClicked(clicked) {
|
||||
function knobClicked(clicked: KnobStoreKnob) {
|
||||
const knobOptions = knobStore.get(clicked.name);
|
||||
if (knobOptions.callback() !== false) {
|
||||
forceReRender();
|
||||
2
addons/knobs/src/typings.d.ts
vendored
Normal file
2
addons/knobs/src/typings.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare module 'global';
|
||||
declare module '@storybook/client-api';
|
||||
9
addons/knobs/tsconfig.json
Normal file
9
addons/knobs/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/__tests__/**/*"]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
1
addons/knobs/vue.ts
Normal file
1
addons/knobs/vue.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/deprecated';
|
||||
@ -261,27 +261,20 @@
|
||||
dependencies:
|
||||
"@ndhoule/map" "^2.0.1"
|
||||
|
||||
"@storybook/client-logger@5.2.0-alpha.34":
|
||||
version "5.2.0-alpha.34"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.34.tgz#9de93faf736fb58b1f3bd04b500f40dc6231e3d9"
|
||||
integrity sha512-ukvCH+Fudey0RagrbxbVCy/ZwWfScVDFjGe8yieFCXVLRyfMERuEWgz/WBrgwFIVhzGt4JQgewolv27QLDysNg==
|
||||
"@storybook/client-logger@5.2.0-alpha.36":
|
||||
version "5.2.0-alpha.36"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.36.tgz#aff65cf246982176803e751c418d0052f507aa20"
|
||||
integrity sha512-5gTBxaASFAgXh12m5GX0cvbSrIJWXhfcOuXSD48g6PuHHRup9PaoM9PNwgnB1HolJFYl8CG6jC5I/hnaBQr/QQ==
|
||||
dependencies:
|
||||
core-js "^3.0.1"
|
||||
|
||||
"@storybook/client-logger@5.2.0-alpha.35":
|
||||
version "5.2.0-alpha.35"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.35.tgz#73ddcf2bfa5885407da580b0ffac2bcbe904e260"
|
||||
integrity sha512-/G/nmW2k4H45nl/cghbmfXraixkFAJd0NrZ5Ch9ZsCuZYYsvMLfasF6Y4FQYykzadMCsdlrpK1dVK2P9YqhyNQ==
|
||||
"@storybook/components@5.2.0-alpha.36":
|
||||
version "5.2.0-alpha.36"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.36.tgz#370e3e593923ce6e5698d560156bd84c4a3c78cd"
|
||||
integrity sha512-H/Z9wLV/ZJH73Ko1R3Anw4oVodf4z/hcQP0UK3XRIOejv1iI/2ZoRWyIkD/b5IoouHPIXlWkplTkLp2eCFDvPA==
|
||||
dependencies:
|
||||
core-js "^3.0.1"
|
||||
|
||||
"@storybook/components@5.2.0-alpha.34":
|
||||
version "5.2.0-alpha.34"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.34.tgz#397f146419d6570661d50db6e5638b98803a4b30"
|
||||
integrity sha512-LStRAgiKSlIouZiK2xtSF430gg42CHD/gwpncdJYQFLY8mWr46Ms0Fzk5YWbXi/xrjFnuX6aQxl7n28CjPmoqg==
|
||||
dependencies:
|
||||
"@storybook/client-logger" "5.2.0-alpha.34"
|
||||
"@storybook/theming" "5.2.0-alpha.34"
|
||||
"@storybook/client-logger" "5.2.0-alpha.36"
|
||||
"@storybook/theming" "5.2.0-alpha.36"
|
||||
core-js "^3.0.1"
|
||||
global "^4.3.2"
|
||||
markdown-to-jsx "^6.9.1"
|
||||
@ -299,32 +292,14 @@
|
||||
recompose "^0.30.0"
|
||||
simplebar-react "^1.0.0-alpha.6"
|
||||
|
||||
"@storybook/theming@5.2.0-alpha.34":
|
||||
version "5.2.0-alpha.34"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.34.tgz#fa65fa34af6231a5332e2bebd0f4174023f9bb4d"
|
||||
integrity sha512-F900cTk2JkwrghPr5wFZ95zhAb+Ygp8zKp9MGe0aL4c/2OJrKrNhhA7nvtskdcLg2jJoBXSkwaRqe9rxtzND/g==
|
||||
"@storybook/theming@5.2.0-alpha.36":
|
||||
version "5.2.0-alpha.36"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.36.tgz#52c963d9697740762ef1f5e14edae30885a8fce5"
|
||||
integrity sha512-nDLK6j0rR2lmNuOsvySuv2QsCbLf+u/CWsSHcIAajGIQWyVqoXAHf/bbDOPNxUPIWMj9noZ2zOxakVQ69Ksl3w==
|
||||
dependencies:
|
||||
"@emotion/core" "^10.0.9"
|
||||
"@emotion/styled" "^10.0.7"
|
||||
"@storybook/client-logger" "5.2.0-alpha.34"
|
||||
common-tags "^1.8.0"
|
||||
core-js "^3.0.1"
|
||||
deep-object-diff "^1.1.0"
|
||||
emotion-theming "^10.0.9"
|
||||
global "^4.3.2"
|
||||
memoizerific "^1.11.3"
|
||||
polished "^3.3.1"
|
||||
prop-types "^15.7.2"
|
||||
resolve-from "^5.0.0"
|
||||
|
||||
"@storybook/theming@5.2.0-alpha.35":
|
||||
version "5.2.0-alpha.35"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.35.tgz#6d97548b7c31e7b50f4e28acbbae8b04cef26111"
|
||||
integrity sha512-s+6b3BvxPs+LLsU2JIGDEId5+WNd+xkTzyKZAmf5/aS9e6j0p3tSJFiB+7gObt256yyo/SPe9Ke2szQdPfTIUg==
|
||||
dependencies:
|
||||
"@emotion/core" "^10.0.9"
|
||||
"@emotion/styled" "^10.0.7"
|
||||
"@storybook/client-logger" "5.2.0-alpha.35"
|
||||
"@storybook/client-logger" "5.2.0-alpha.36"
|
||||
common-tags "^1.8.0"
|
||||
core-js "^3.0.1"
|
||||
deep-object-diff "^1.1.0"
|
||||
|
||||
37
yarn.lock
37
yarn.lock
@ -4197,6 +4197,11 @@
|
||||
"@types/cheerio" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/escape-html@0.0.20":
|
||||
version "0.0.20"
|
||||
resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-0.0.20.tgz#cae698714dd61ebee5ab3f2aeb9a34ba1011735a"
|
||||
integrity sha512-6dhZJLbA7aOwkYB2GDGdIqJ20wmHnkDzaxV9PJXe7O02I2dSFTERzRB6JrX6cWKaS+VqhhY7cQUMCbO5kloFUw==
|
||||
|
||||
"@types/estree@*", "@types/estree@0.0.39":
|
||||
version "0.0.39"
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
|
||||
@ -4368,13 +4373,27 @@
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dom@^16.8.2":
|
||||
"@types/react-color@^3.0.1":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
|
||||
integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dom@*", "@types/react-dom@^16.8.2":
|
||||
version "16.8.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88"
|
||||
integrity sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-lifecycles-compat@^3.0.1":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.1.tgz#a0b1fe18cfb9435bd52737829a69cbe93faf32e2"
|
||||
integrity sha512-4KiU5s1Go4xRbf7t6VxUUpBeN5PGjpjpBv9VvET4uiPHC500VNYBclU13f8ehHkHoZL39b2cfwHu6RzbV3b44A==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-native@^0.57.57":
|
||||
version "0.57.60"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.60.tgz#61e97a84e2f64ed971e7d238bb30cec188898235"
|
||||
@ -4393,6 +4412,15 @@
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
redux "^4.0.0"
|
||||
|
||||
"@types/react-select@^2.0.19":
|
||||
version "2.0.19"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-2.0.19.tgz#59a80ef81a4a5cb37f59970c53a4894d15065199"
|
||||
integrity sha512-5GGBO3npQ0G/poQmEn+kI3Vn3DoJ9WjRXCeGcpwLxd5rYmjYPH235lbYPX5aclXE2RqEXyFxd96oh0wYwPXYpg==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
"@types/react-dom" "*"
|
||||
"@types/react-transition-group" "*"
|
||||
|
||||
"@types/react-syntax-highlighter@10.1.0":
|
||||
version "10.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz#9c534e29bbe05dba9beae1234f3ae944836685d4"
|
||||
@ -4407,6 +4435,13 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-transition-group@*":
|
||||
version "2.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
|
||||
integrity sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^16.8.14", "@types/react@^16.8.3":
|
||||
version "16.8.18"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.18.tgz#fe66fb748b0b6ca9709d38b87b2d1356d960a511"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user