@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.
Files changed (74) hide show
  1. package/dist/cjs/ActionBar/ActionBar.js +1 -0
  2. package/dist/cjs/Button/Button.stories.js +8 -1
  3. package/dist/cjs/bar/separator.js +0 -2
  4. package/dist/cjs/blocks/ArgsTable/ArgControl.js +24 -41
  5. package/dist/cjs/blocks/ArgsTable/ArgRow.js +9 -1
  6. package/dist/cjs/blocks/ArgsTable/ArgsTable.js +1 -3
  7. package/dist/cjs/blocks/ColorPalette.js +33 -19
  8. package/dist/cjs/blocks/Preview.js +81 -8
  9. package/dist/cjs/controls/Boolean.js +2 -1
  10. package/dist/cjs/controls/Number.js +1 -0
  11. package/dist/cjs/controls/Object.js +1 -0
  12. package/dist/cjs/controls/Text.js +1 -0
  13. package/dist/cjs/controls/helpers.js +15 -2
  14. package/dist/cjs/controls/index.js +0 -14
  15. package/dist/cjs/controls/options/Options.js +22 -26
  16. package/dist/cjs/icon/icons.js +3 -0
  17. package/dist/cjs/index.js +7 -3
  18. package/dist/cjs/syntaxhighlighter/syntaxhighlighter.js +20 -14
  19. package/dist/esm/ActionBar/ActionBar.js +1 -0
  20. package/dist/esm/Button/Button.stories.js +8 -1
  21. package/dist/esm/bar/separator.js +0 -1
  22. package/dist/esm/blocks/ArgsTable/ArgControl.js +23 -41
  23. package/dist/esm/blocks/ArgsTable/ArgRow.js +8 -1
  24. package/dist/esm/blocks/ArgsTable/ArgsTable.js +1 -2
  25. package/dist/esm/blocks/ColorPalette.js +33 -19
  26. package/dist/esm/blocks/Preview.js +74 -7
  27. package/dist/esm/controls/Boolean.js +3 -2
  28. package/dist/esm/controls/Number.js +2 -1
  29. package/dist/esm/controls/Object.js +2 -1
  30. package/dist/esm/controls/Text.js +2 -1
  31. package/dist/esm/controls/helpers.js +10 -0
  32. package/dist/esm/controls/index.js +0 -1
  33. package/dist/esm/controls/options/Options.js +18 -24
  34. package/dist/esm/icon/icons.js +3 -0
  35. package/dist/esm/index.js +7 -4
  36. package/dist/esm/syntaxhighlighter/syntaxhighlighter.js +16 -13
  37. package/dist/modern/ActionBar/ActionBar.js +1 -0
  38. package/dist/modern/Button/Button.stories.js +8 -1
  39. package/dist/modern/blocks/ArgsTable/ArgControl.js +23 -41
  40. package/dist/modern/blocks/ArgsTable/ArgRow.js +7 -1
  41. package/dist/modern/blocks/ArgsTable/ArgsTable.js +1 -1
  42. package/dist/modern/blocks/ColorPalette.js +20 -7
  43. package/dist/modern/blocks/Preview.js +34 -5
  44. package/dist/modern/controls/Boolean.js +3 -2
  45. package/dist/modern/controls/Number.js +2 -1
  46. package/dist/modern/controls/Object.js +2 -1
  47. package/dist/modern/controls/Text.js +2 -1
  48. package/dist/modern/controls/helpers.js +9 -1
  49. package/dist/modern/controls/index.js +0 -1
  50. package/dist/modern/controls/options/Options.js +16 -23
  51. package/dist/modern/icon/icons.js +3 -0
  52. package/dist/modern/index.js +4 -2
  53. package/dist/modern/syntaxhighlighter/syntaxhighlighter.js +11 -8
  54. package/dist/ts3.4/Button/Button.d.ts +1 -0
  55. package/dist/ts3.4/controls/helpers.d.ts +7 -0
  56. package/dist/ts3.4/controls/index.d.ts +0 -1
  57. package/dist/ts3.4/controls/types.d.ts +1 -5
  58. package/dist/ts3.4/icon/icons.d.ts +3 -0
  59. package/dist/ts3.4/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
  60. package/dist/ts3.9/Button/Button.d.ts +1 -0
  61. package/dist/ts3.9/controls/helpers.d.ts +7 -0
  62. package/dist/ts3.9/controls/index.d.ts +0 -1
  63. package/dist/ts3.9/controls/types.d.ts +1 -5
  64. package/dist/ts3.9/icon/icons.d.ts +3 -0
  65. package/dist/ts3.9/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
  66. package/package.json +7 -7
  67. package/dist/cjs/controls/Array.js +0 -123
  68. package/dist/cjs/controls/Array.stories.js +0 -92
  69. package/dist/esm/controls/Array.js +0 -86
  70. package/dist/esm/controls/Array.stories.js +0 -55
  71. package/dist/modern/controls/Array.js +0 -55
  72. package/dist/modern/controls/Array.stories.js +0 -20
  73. package/dist/ts3.4/controls/Array.d.ts +0 -4
  74. package/dist/ts3.9/controls/Array.d.ts +0 -4
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  export * from './types';
3
- export * from './Array';
4
3
  export * from './Boolean';
5
4
  export { ColorProps } from './Color';
6
5
  declare const LazyColorControl: React.LazyExoticComponent<React.FC<import("./Color").ColorProps>>;
@@ -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 = ArrayConfig | BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
55
+ export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
60
56
  export declare type Controls = Record<string, Control>;
@@ -106,7 +106,10 @@ export declare const icons: {
106
106
  dashboard: string;
107
107
  hourglass: string;
108
108
  play: string;
109
+ playnext: string;
110
+ playback: string;
109
111
  stop: string;
112
+ stopalt: string;
110
113
  email: string;
111
114
  link: string;
112
115
  paperclip: string;
@@ -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;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  export * from './types';
3
- export * from './Array';
4
3
  export * from './Boolean';
5
4
  export type { ColorProps } from './Color';
6
5
  declare const LazyColorControl: React.LazyExoticComponent<React.FC<import("./Color").ColorProps>>;
@@ -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 = ArrayConfig | BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
55
+ export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
60
56
  export declare type Controls = Record<string, Control>;
@@ -106,7 +106,10 @@ export declare const icons: {
106
106
  dashboard: string;
107
107
  hourglass: string;
108
108
  play: string;
109
+ playnext: string;
110
+ playback: string;
109
111
  stop: string;
112
+ stopalt: string;
110
113
  email: string;
111
114
  link: string;
112
115
  paperclip: string;
@@ -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.4",
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/master/lib/components",
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.4",
45
- "@storybook/csf": "0.0.1",
46
- "@storybook/theming": "6.4.0-alpha.4",
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": "0feb4147b27a31982db054a4fc5954515d506f7d",
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);
@@ -1,4 +0,0 @@
1
- import { FC } from 'react';
2
- import { ControlProps, ArrayValue, ArrayConfig } from './types';
3
- export declare type ArrayProps = ControlProps<ArrayValue> & ArrayConfig;
4
- export declare const ArrayControl: FC<ArrayProps>;
@@ -1,4 +0,0 @@
1
- import { FC } from 'react';
2
- import { ControlProps, ArrayValue, ArrayConfig } from './types';
3
- export declare type ArrayProps = ControlProps<ArrayValue> & ArrayConfig;
4
- export declare const ArrayControl: FC<ArrayProps>;