@storybook/components 6.4.0-alpha.4 → 6.4.0-alpha.40
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/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/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/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/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/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/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
|
@@ -8,10 +8,6 @@ export interface ControlProps<T> {
|
|
|
8
8
|
onFocus?: (evt: any) => void;
|
|
9
9
|
onBlur?: (evt: any) => void;
|
|
10
10
|
}
|
|
11
|
-
export declare type ArrayValue = string[] | readonly string[];
|
|
12
|
-
export interface ArrayConfig {
|
|
13
|
-
separator?: string;
|
|
14
|
-
}
|
|
15
11
|
export declare type BooleanValue = boolean;
|
|
16
12
|
export interface BooleanConfig {
|
|
17
13
|
}
|
|
@@ -56,5 +52,5 @@ export declare type TextValue = string;
|
|
|
56
52
|
export interface TextConfig {
|
|
57
53
|
}
|
|
58
54
|
export declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
|
|
59
|
-
export declare type Control =
|
|
55
|
+
export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
|
|
60
56
|
export declare type Controls = Record<string, Control>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentProps, FunctionComponent } from 'react';
|
|
2
2
|
import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
|
3
3
|
import { SyntaxHighlighterProps } from './syntaxhighlighter-types';
|
|
4
|
+
export declare function createCopyToClipboardFunction(): (text: string) => any;
|
|
4
5
|
export interface WrapperProps {
|
|
5
6
|
bordered?: boolean;
|
|
6
7
|
padded?: boolean;
|
|
@@ -11,6 +11,7 @@ export interface ButtonProps {
|
|
|
11
11
|
outline?: boolean;
|
|
12
12
|
containsIcon?: boolean;
|
|
13
13
|
children?: React.ReactNode;
|
|
14
|
+
href?: string;
|
|
14
15
|
}
|
|
15
16
|
declare const ButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps, import("@storybook/theming").Theme>;
|
|
16
17
|
export declare const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>>;
|
|
@@ -5,3 +5,10 @@
|
|
|
5
5
|
* @example getControlId('my prop name') -> 'control-my-prop-name'
|
|
6
6
|
*/
|
|
7
7
|
export declare const getControlId: (value: string) => string;
|
|
8
|
+
/**
|
|
9
|
+
* Adds `set` prefix to make ID attribute more specific.
|
|
10
|
+
* Removes spaces because spaces are not allowed in ID attributes
|
|
11
|
+
* @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
|
|
12
|
+
* @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
|
|
13
|
+
*/
|
|
14
|
+
export declare const getControlSetterButtonId: (value: string) => string;
|
|
@@ -8,10 +8,6 @@ export interface ControlProps<T> {
|
|
|
8
8
|
onFocus?: (evt: any) => void;
|
|
9
9
|
onBlur?: (evt: any) => void;
|
|
10
10
|
}
|
|
11
|
-
export declare type ArrayValue = string[] | readonly string[];
|
|
12
|
-
export interface ArrayConfig {
|
|
13
|
-
separator?: string;
|
|
14
|
-
}
|
|
15
11
|
export declare type BooleanValue = boolean;
|
|
16
12
|
export interface BooleanConfig {
|
|
17
13
|
}
|
|
@@ -56,5 +52,5 @@ export declare type TextValue = string;
|
|
|
56
52
|
export interface TextConfig {
|
|
57
53
|
}
|
|
58
54
|
export declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
|
|
59
|
-
export declare type Control =
|
|
55
|
+
export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
|
|
60
56
|
export declare type Controls = Record<string, Control>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentProps, FunctionComponent } from 'react';
|
|
2
2
|
import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
|
3
3
|
import type { SyntaxHighlighterProps } from './syntaxhighlighter-types';
|
|
4
|
+
export declare function createCopyToClipboardFunction(): (text: string) => any;
|
|
4
5
|
export interface WrapperProps {
|
|
5
6
|
bordered?: boolean;
|
|
6
7
|
padded?: boolean;
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/components",
|
|
3
|
-
"version": "6.4.0-alpha.
|
|
3
|
+
"version": "6.4.0-alpha.40",
|
|
4
4
|
"description": "Core Storybook Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
7
7
|
],
|
|
8
|
-
"homepage": "https://github.com/storybookjs/storybook/tree/
|
|
8
|
+
"homepage": "https://github.com/storybookjs/storybook/tree/main/lib/components",
|
|
9
9
|
"bugs": {
|
|
10
10
|
"url": "https://github.com/storybookjs/storybook/issues"
|
|
11
11
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"types": "dist/ts3.9/index.d.ts",
|
|
26
26
|
"typesVersions": {
|
|
27
27
|
"<3.8": {
|
|
28
|
-
"
|
|
28
|
+
"dist/ts3.9/*": [
|
|
29
29
|
"dist/ts3.4/*"
|
|
30
30
|
]
|
|
31
31
|
}
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@popperjs/core": "^2.6.0",
|
|
44
|
-
"@storybook/client-logger": "6.4.0-alpha.
|
|
45
|
-
"@storybook/csf": "0.0.
|
|
46
|
-
"@storybook/theming": "6.4.0-alpha.
|
|
44
|
+
"@storybook/client-logger": "6.4.0-alpha.40",
|
|
45
|
+
"@storybook/csf": "0.0.2--canary.6aca495.0",
|
|
46
|
+
"@storybook/theming": "6.4.0-alpha.40",
|
|
47
47
|
"@types/color-convert": "^2.0.0",
|
|
48
48
|
"@types/overlayscrollbars": "^1.12.0",
|
|
49
49
|
"@types/react-syntax-highlighter": "11.0.5",
|
|
@@ -76,6 +76,6 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "6b767d7c8f81b45cccd89a224223963fa751ad91",
|
|
80
80
|
"sbmodern": "dist/modern/index.js"
|
|
81
81
|
}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.symbol.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.symbol.description.js");
|
|
8
|
-
|
|
9
|
-
require("core-js/modules/es.object.to-string.js");
|
|
10
|
-
|
|
11
|
-
require("core-js/modules/es.symbol.iterator.js");
|
|
12
|
-
|
|
13
|
-
require("core-js/modules/es.string.iterator.js");
|
|
14
|
-
|
|
15
|
-
require("core-js/modules/es.array.iterator.js");
|
|
16
|
-
|
|
17
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
18
|
-
|
|
19
|
-
require("core-js/modules/es.array.slice.js");
|
|
20
|
-
|
|
21
|
-
require("core-js/modules/es.array.from.js");
|
|
22
|
-
|
|
23
|
-
require("core-js/modules/es.weak-map.js");
|
|
24
|
-
|
|
25
|
-
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
26
|
-
|
|
27
|
-
Object.defineProperty(exports, "__esModule", {
|
|
28
|
-
value: true
|
|
29
|
-
});
|
|
30
|
-
exports.ArrayControl = void 0;
|
|
31
|
-
|
|
32
|
-
require("core-js/modules/es.string.trim.js");
|
|
33
|
-
|
|
34
|
-
require("core-js/modules/es.string.split.js");
|
|
35
|
-
|
|
36
|
-
require("core-js/modules/es.regexp.exec.js");
|
|
37
|
-
|
|
38
|
-
require("core-js/modules/es.array.join.js");
|
|
39
|
-
|
|
40
|
-
require("core-js/modules/es.function.name.js");
|
|
41
|
-
|
|
42
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
43
|
-
|
|
44
|
-
var _theming = require("@storybook/theming");
|
|
45
|
-
|
|
46
|
-
var _form = require("../form");
|
|
47
|
-
|
|
48
|
-
var _helpers = require("./helpers");
|
|
49
|
-
|
|
50
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
51
|
-
|
|
52
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
53
|
-
|
|
54
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
55
|
-
|
|
56
|
-
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."); }
|
|
57
|
-
|
|
58
|
-
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); }
|
|
59
|
-
|
|
60
|
-
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; }
|
|
61
|
-
|
|
62
|
-
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; }
|
|
63
|
-
|
|
64
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
65
|
-
|
|
66
|
-
var parse = function parse(value, separator) {
|
|
67
|
-
return !value || value.trim() === '' ? [] : value.split(separator);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
var format = function format(value, separator) {
|
|
71
|
-
return value && Array.isArray(value) ? value.join(separator) : '';
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
var Wrapper = _theming.styled.label({
|
|
75
|
-
display: 'flex'
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
var ArrayControl = function ArrayControl(_ref) {
|
|
79
|
-
var name = _ref.name,
|
|
80
|
-
value = _ref.value,
|
|
81
|
-
onChange = _ref.onChange,
|
|
82
|
-
_ref$separator = _ref.separator,
|
|
83
|
-
separator = _ref$separator === void 0 ? ',' : _ref$separator,
|
|
84
|
-
onBlur = _ref.onBlur,
|
|
85
|
-
onFocus = _ref.onFocus;
|
|
86
|
-
var handleChange = (0, _react.useCallback)(function (e) {
|
|
87
|
-
var newVal = e.target.value;
|
|
88
|
-
onChange(parse(newVal, separator));
|
|
89
|
-
}, [onChange]);
|
|
90
|
-
|
|
91
|
-
var _useState = (0, _react.useState)(false),
|
|
92
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
93
|
-
forceVisible = _useState2[0],
|
|
94
|
-
setForceVisible = _useState2[1];
|
|
95
|
-
|
|
96
|
-
var onForceVisible = (0, _react.useCallback)(function () {
|
|
97
|
-
onChange([]);
|
|
98
|
-
setForceVisible(true);
|
|
99
|
-
}, [setForceVisible]);
|
|
100
|
-
|
|
101
|
-
if (value === undefined) {
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
|
|
103
|
-
onClick: onForceVisible
|
|
104
|
-
}, "Set array");
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
var isValid = Array.isArray(value);
|
|
108
|
-
return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_form.Form.Textarea, {
|
|
109
|
-
id: (0, _helpers.getControlId)(name),
|
|
110
|
-
value: format(value, separator),
|
|
111
|
-
onChange: handleChange,
|
|
112
|
-
size: "flex",
|
|
113
|
-
placeholder: "Edit array...",
|
|
114
|
-
valid: isValid ? null : 'error',
|
|
115
|
-
autoFocus: forceVisible,
|
|
116
|
-
name: name,
|
|
117
|
-
onBlur: onBlur,
|
|
118
|
-
onFocus: onFocus
|
|
119
|
-
}));
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
exports.ArrayControl = ArrayControl;
|
|
123
|
-
ArrayControl.displayName = "ArrayControl";
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.symbol.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.symbol.description.js");
|
|
8
|
-
|
|
9
|
-
require("core-js/modules/es.object.to-string.js");
|
|
10
|
-
|
|
11
|
-
require("core-js/modules/es.symbol.iterator.js");
|
|
12
|
-
|
|
13
|
-
require("core-js/modules/es.string.iterator.js");
|
|
14
|
-
|
|
15
|
-
require("core-js/modules/es.array.iterator.js");
|
|
16
|
-
|
|
17
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
18
|
-
|
|
19
|
-
require("core-js/modules/es.array.slice.js");
|
|
20
|
-
|
|
21
|
-
require("core-js/modules/es.function.name.js");
|
|
22
|
-
|
|
23
|
-
require("core-js/modules/es.array.from.js");
|
|
24
|
-
|
|
25
|
-
require("core-js/modules/es.weak-map.js");
|
|
26
|
-
|
|
27
|
-
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
28
|
-
|
|
29
|
-
Object.defineProperty(exports, "__esModule", {
|
|
30
|
-
value: true
|
|
31
|
-
});
|
|
32
|
-
exports.Undefined = exports.Empty = exports.Basic = exports.default = void 0;
|
|
33
|
-
|
|
34
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
35
|
-
|
|
36
|
-
var _Array = require("./Array");
|
|
37
|
-
|
|
38
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
39
|
-
|
|
40
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
41
|
-
|
|
42
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
43
|
-
|
|
44
|
-
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."); }
|
|
45
|
-
|
|
46
|
-
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); }
|
|
47
|
-
|
|
48
|
-
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; }
|
|
49
|
-
|
|
50
|
-
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; }
|
|
51
|
-
|
|
52
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
53
|
-
|
|
54
|
-
var _default = {
|
|
55
|
-
title: 'Controls/Array',
|
|
56
|
-
component: _Array.ArrayControl
|
|
57
|
-
};
|
|
58
|
-
exports.default = _default;
|
|
59
|
-
|
|
60
|
-
var Template = function Template(initialValue) {
|
|
61
|
-
var _useState = (0, _react.useState)(initialValue),
|
|
62
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
63
|
-
value = _useState2[0],
|
|
64
|
-
setValue = _useState2[1];
|
|
65
|
-
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Array.ArrayControl, {
|
|
67
|
-
name: "array",
|
|
68
|
-
value: value,
|
|
69
|
-
onChange: function onChange(newVal) {
|
|
70
|
-
return setValue(newVal);
|
|
71
|
-
},
|
|
72
|
-
separator: ","
|
|
73
|
-
}), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(value) || 'undefined'));
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
var Basic = function Basic() {
|
|
77
|
-
return Template(['Bat', 'Cat', 'Rat']);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
exports.Basic = Basic;
|
|
81
|
-
|
|
82
|
-
var Empty = function Empty() {
|
|
83
|
-
return Template([]);
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
exports.Empty = Empty;
|
|
87
|
-
|
|
88
|
-
var Undefined = function Undefined() {
|
|
89
|
-
return Template(undefined);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
exports.Undefined = Undefined;
|
|
@@ -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);
|