@storybook/components 6.4.0-alpha.8 → 6.4.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ActionBar/ActionBar.js +1 -0
- package/dist/cjs/Button/Button.stories.js +8 -1
- package/dist/cjs/bar/separator.js +0 -2
- package/dist/cjs/blocks/ArgsTable/ArgControl.js +24 -41
- package/dist/cjs/blocks/ArgsTable/ArgRow.js +9 -1
- package/dist/cjs/blocks/ArgsTable/ArgsTable.js +1 -3
- package/dist/cjs/blocks/ColorPalette.js +33 -19
- package/dist/cjs/blocks/Preview.js +81 -8
- package/dist/cjs/controls/Boolean.js +2 -1
- package/dist/cjs/controls/Color.js +2 -2
- package/dist/cjs/controls/Number.js +1 -0
- package/dist/cjs/controls/Object.js +1 -0
- package/dist/cjs/controls/Text.js +1 -0
- package/dist/cjs/controls/helpers.js +15 -2
- package/dist/cjs/controls/index.js +0 -14
- package/dist/cjs/controls/options/Options.js +22 -26
- package/dist/cjs/icon/icons.js +3 -0
- package/dist/cjs/index.js +7 -3
- package/dist/cjs/syntaxhighlighter/syntaxhighlighter.js +20 -14
- package/dist/cjs/typography/DocumentFormatting.js +15 -4
- package/dist/esm/ActionBar/ActionBar.js +1 -0
- package/dist/esm/Button/Button.stories.js +8 -1
- package/dist/esm/bar/separator.js +0 -1
- package/dist/esm/blocks/ArgsTable/ArgControl.js +23 -41
- package/dist/esm/blocks/ArgsTable/ArgRow.js +8 -1
- package/dist/esm/blocks/ArgsTable/ArgsTable.js +1 -2
- package/dist/esm/blocks/ColorPalette.js +33 -19
- package/dist/esm/blocks/Preview.js +74 -7
- package/dist/esm/controls/Boolean.js +3 -2
- package/dist/esm/controls/Color.js +2 -2
- package/dist/esm/controls/Number.js +2 -1
- package/dist/esm/controls/Object.js +2 -1
- package/dist/esm/controls/Text.js +2 -1
- package/dist/esm/controls/helpers.js +10 -0
- package/dist/esm/controls/index.js +0 -1
- package/dist/esm/controls/options/Options.js +18 -24
- package/dist/esm/icon/icons.js +3 -0
- package/dist/esm/index.js +7 -4
- package/dist/esm/syntaxhighlighter/syntaxhighlighter.js +16 -13
- package/dist/esm/typography/DocumentFormatting.js +12 -3
- package/dist/modern/ActionBar/ActionBar.js +1 -0
- package/dist/modern/Button/Button.stories.js +8 -1
- package/dist/modern/blocks/ArgsTable/ArgControl.js +23 -41
- package/dist/modern/blocks/ArgsTable/ArgRow.js +7 -1
- package/dist/modern/blocks/ArgsTable/ArgsTable.js +1 -1
- package/dist/modern/blocks/ColorPalette.js +20 -7
- package/dist/modern/blocks/Preview.js +34 -5
- package/dist/modern/controls/Boolean.js +3 -2
- package/dist/modern/controls/Color.js +2 -2
- package/dist/modern/controls/Number.js +2 -1
- package/dist/modern/controls/Object.js +2 -1
- package/dist/modern/controls/Text.js +2 -1
- package/dist/modern/controls/helpers.js +9 -1
- package/dist/modern/controls/index.js +0 -1
- package/dist/modern/controls/options/Options.js +16 -23
- package/dist/modern/icon/icons.js +3 -0
- package/dist/modern/index.js +4 -2
- package/dist/modern/syntaxhighlighter/syntaxhighlighter.js +11 -8
- package/dist/modern/typography/DocumentFormatting.js +7 -2
- package/dist/ts3.4/Button/Button.d.ts +1 -0
- package/dist/ts3.4/controls/helpers.d.ts +7 -0
- package/dist/ts3.4/controls/index.d.ts +0 -1
- package/dist/ts3.4/controls/types.d.ts +1 -5
- package/dist/ts3.4/icon/icons.d.ts +3 -0
- package/dist/ts3.4/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
- package/dist/ts3.9/Button/Button.d.ts +1 -0
- package/dist/ts3.9/controls/helpers.d.ts +7 -0
- package/dist/ts3.9/controls/index.d.ts +0 -1
- package/dist/ts3.9/controls/types.d.ts +1 -5
- package/dist/ts3.9/icon/icons.d.ts +3 -0
- package/dist/ts3.9/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
- package/package.json +7 -7
- package/dist/cjs/controls/Array.js +0 -123
- package/dist/cjs/controls/Array.stories.js +0 -92
- package/dist/esm/controls/Array.js +0 -86
- package/dist/esm/controls/Array.stories.js +0 -55
- package/dist/modern/controls/Array.js +0 -55
- package/dist/modern/controls/Array.stories.js +0 -20
- package/dist/ts3.4/controls/Array.d.ts +0 -4
- package/dist/ts3.9/controls/Array.d.ts +0 -4
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
|
-
import "core-js/modules/es.string.trim.js";
|
|
14
|
-
import "core-js/modules/es.string.split.js";
|
|
15
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
16
|
-
import "core-js/modules/es.array.join.js";
|
|
17
|
-
import "core-js/modules/es.function.name.js";
|
|
18
|
-
import "core-js/modules/es.symbol.js";
|
|
19
|
-
import "core-js/modules/es.symbol.description.js";
|
|
20
|
-
import "core-js/modules/es.object.to-string.js";
|
|
21
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
22
|
-
import "core-js/modules/es.string.iterator.js";
|
|
23
|
-
import "core-js/modules/es.array.iterator.js";
|
|
24
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
25
|
-
import "core-js/modules/es.array.slice.js";
|
|
26
|
-
import "core-js/modules/es.array.from.js";
|
|
27
|
-
import React, { useCallback, useState } from 'react';
|
|
28
|
-
import { styled } from '@storybook/theming';
|
|
29
|
-
import { Form } from '../form';
|
|
30
|
-
import { getControlId } from './helpers';
|
|
31
|
-
|
|
32
|
-
var parse = function parse(value, separator) {
|
|
33
|
-
return !value || value.trim() === '' ? [] : value.split(separator);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
var format = function format(value, separator) {
|
|
37
|
-
return value && Array.isArray(value) ? value.join(separator) : '';
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
var Wrapper = styled.label({
|
|
41
|
-
display: 'flex'
|
|
42
|
-
});
|
|
43
|
-
export var ArrayControl = function ArrayControl(_ref) {
|
|
44
|
-
var name = _ref.name,
|
|
45
|
-
value = _ref.value,
|
|
46
|
-
onChange = _ref.onChange,
|
|
47
|
-
_ref$separator = _ref.separator,
|
|
48
|
-
separator = _ref$separator === void 0 ? ',' : _ref$separator,
|
|
49
|
-
onBlur = _ref.onBlur,
|
|
50
|
-
onFocus = _ref.onFocus;
|
|
51
|
-
var handleChange = useCallback(function (e) {
|
|
52
|
-
var newVal = e.target.value;
|
|
53
|
-
onChange(parse(newVal, separator));
|
|
54
|
-
}, [onChange]);
|
|
55
|
-
|
|
56
|
-
var _useState = useState(false),
|
|
57
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
58
|
-
forceVisible = _useState2[0],
|
|
59
|
-
setForceVisible = _useState2[1];
|
|
60
|
-
|
|
61
|
-
var onForceVisible = useCallback(function () {
|
|
62
|
-
onChange([]);
|
|
63
|
-
setForceVisible(true);
|
|
64
|
-
}, [setForceVisible]);
|
|
65
|
-
|
|
66
|
-
if (value === undefined) {
|
|
67
|
-
return /*#__PURE__*/React.createElement(Form.Button, {
|
|
68
|
-
onClick: onForceVisible
|
|
69
|
-
}, "Set array");
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
var isValid = Array.isArray(value);
|
|
73
|
-
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Form.Textarea, {
|
|
74
|
-
id: getControlId(name),
|
|
75
|
-
value: format(value, separator),
|
|
76
|
-
onChange: handleChange,
|
|
77
|
-
size: "flex",
|
|
78
|
-
placeholder: "Edit array...",
|
|
79
|
-
valid: isValid ? null : 'error',
|
|
80
|
-
autoFocus: forceVisible,
|
|
81
|
-
name: name,
|
|
82
|
-
onBlur: onBlur,
|
|
83
|
-
onFocus: onFocus
|
|
84
|
-
}));
|
|
85
|
-
};
|
|
86
|
-
ArrayControl.displayName = "ArrayControl";
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import "core-js/modules/es.symbol.js";
|
|
2
|
-
import "core-js/modules/es.symbol.description.js";
|
|
3
|
-
import "core-js/modules/es.object.to-string.js";
|
|
4
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
5
|
-
import "core-js/modules/es.string.iterator.js";
|
|
6
|
-
import "core-js/modules/es.array.iterator.js";
|
|
7
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
8
|
-
import "core-js/modules/es.array.slice.js";
|
|
9
|
-
import "core-js/modules/es.function.name.js";
|
|
10
|
-
import "core-js/modules/es.array.from.js";
|
|
11
|
-
|
|
12
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
13
|
-
|
|
14
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
-
|
|
16
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
-
|
|
18
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
19
|
-
|
|
20
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
21
|
-
|
|
22
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
-
|
|
24
|
-
import React, { useState } from 'react';
|
|
25
|
-
import { ArrayControl } from './Array';
|
|
26
|
-
export default {
|
|
27
|
-
title: 'Controls/Array',
|
|
28
|
-
component: ArrayControl
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
var Template = function Template(initialValue) {
|
|
32
|
-
var _useState = useState(initialValue),
|
|
33
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
-
value = _useState2[0],
|
|
35
|
-
setValue = _useState2[1];
|
|
36
|
-
|
|
37
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrayControl, {
|
|
38
|
-
name: "array",
|
|
39
|
-
value: value,
|
|
40
|
-
onChange: function onChange(newVal) {
|
|
41
|
-
return setValue(newVal);
|
|
42
|
-
},
|
|
43
|
-
separator: ","
|
|
44
|
-
}), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export var Basic = function Basic() {
|
|
48
|
-
return Template(['Bat', 'Cat', 'Rat']);
|
|
49
|
-
};
|
|
50
|
-
export var Empty = function Empty() {
|
|
51
|
-
return Template([]);
|
|
52
|
-
};
|
|
53
|
-
export var Undefined = function Undefined() {
|
|
54
|
-
return Template(undefined);
|
|
55
|
-
};
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useState } from 'react';
|
|
2
|
-
import { styled } from '@storybook/theming';
|
|
3
|
-
import { Form } from '../form';
|
|
4
|
-
import { getControlId } from './helpers';
|
|
5
|
-
|
|
6
|
-
const parse = (value, separator) => !value || value.trim() === '' ? [] : value.split(separator);
|
|
7
|
-
|
|
8
|
-
const format = (value, separator) => {
|
|
9
|
-
return value && Array.isArray(value) ? value.join(separator) : '';
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const Wrapper = styled.label({
|
|
13
|
-
display: 'flex'
|
|
14
|
-
});
|
|
15
|
-
export const ArrayControl = ({
|
|
16
|
-
name,
|
|
17
|
-
value,
|
|
18
|
-
onChange,
|
|
19
|
-
separator = ',',
|
|
20
|
-
onBlur,
|
|
21
|
-
onFocus
|
|
22
|
-
}) => {
|
|
23
|
-
const handleChange = useCallback(e => {
|
|
24
|
-
const {
|
|
25
|
-
value: newVal
|
|
26
|
-
} = e.target;
|
|
27
|
-
onChange(parse(newVal, separator));
|
|
28
|
-
}, [onChange]);
|
|
29
|
-
const [forceVisible, setForceVisible] = useState(false);
|
|
30
|
-
const onForceVisible = useCallback(() => {
|
|
31
|
-
onChange([]);
|
|
32
|
-
setForceVisible(true);
|
|
33
|
-
}, [setForceVisible]);
|
|
34
|
-
|
|
35
|
-
if (value === undefined) {
|
|
36
|
-
return /*#__PURE__*/React.createElement(Form.Button, {
|
|
37
|
-
onClick: onForceVisible
|
|
38
|
-
}, "Set array");
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const isValid = Array.isArray(value);
|
|
42
|
-
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Form.Textarea, {
|
|
43
|
-
id: getControlId(name),
|
|
44
|
-
value: format(value, separator),
|
|
45
|
-
onChange: handleChange,
|
|
46
|
-
size: "flex",
|
|
47
|
-
placeholder: "Edit array...",
|
|
48
|
-
valid: isValid ? null : 'error',
|
|
49
|
-
autoFocus: forceVisible,
|
|
50
|
-
name,
|
|
51
|
-
onBlur,
|
|
52
|
-
onFocus
|
|
53
|
-
}));
|
|
54
|
-
};
|
|
55
|
-
ArrayControl.displayName = "ArrayControl";
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { ArrayControl } from './Array';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Controls/Array',
|
|
5
|
-
component: ArrayControl
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
const Template = initialValue => {
|
|
9
|
-
const [value, setValue] = useState(initialValue);
|
|
10
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrayControl, {
|
|
11
|
-
name: "array",
|
|
12
|
-
value: value,
|
|
13
|
-
onChange: newVal => setValue(newVal),
|
|
14
|
-
separator: ","
|
|
15
|
-
}), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export const Basic = () => Template(['Bat', 'Cat', 'Rat']);
|
|
19
|
-
export const Empty = () => Template([]);
|
|
20
|
-
export const Undefined = () => Template(undefined);
|