@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.
Files changed (80) 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/Color.js +2 -2
  11. package/dist/cjs/controls/Number.js +1 -0
  12. package/dist/cjs/controls/Object.js +1 -0
  13. package/dist/cjs/controls/Text.js +1 -0
  14. package/dist/cjs/controls/helpers.js +15 -2
  15. package/dist/cjs/controls/index.js +0 -14
  16. package/dist/cjs/controls/options/Options.js +22 -26
  17. package/dist/cjs/icon/icons.js +3 -0
  18. package/dist/cjs/index.js +7 -3
  19. package/dist/cjs/syntaxhighlighter/syntaxhighlighter.js +20 -14
  20. package/dist/cjs/typography/DocumentFormatting.js +15 -4
  21. package/dist/esm/ActionBar/ActionBar.js +1 -0
  22. package/dist/esm/Button/Button.stories.js +8 -1
  23. package/dist/esm/bar/separator.js +0 -1
  24. package/dist/esm/blocks/ArgsTable/ArgControl.js +23 -41
  25. package/dist/esm/blocks/ArgsTable/ArgRow.js +8 -1
  26. package/dist/esm/blocks/ArgsTable/ArgsTable.js +1 -2
  27. package/dist/esm/blocks/ColorPalette.js +33 -19
  28. package/dist/esm/blocks/Preview.js +74 -7
  29. package/dist/esm/controls/Boolean.js +3 -2
  30. package/dist/esm/controls/Color.js +2 -2
  31. package/dist/esm/controls/Number.js +2 -1
  32. package/dist/esm/controls/Object.js +2 -1
  33. package/dist/esm/controls/Text.js +2 -1
  34. package/dist/esm/controls/helpers.js +10 -0
  35. package/dist/esm/controls/index.js +0 -1
  36. package/dist/esm/controls/options/Options.js +18 -24
  37. package/dist/esm/icon/icons.js +3 -0
  38. package/dist/esm/index.js +7 -4
  39. package/dist/esm/syntaxhighlighter/syntaxhighlighter.js +16 -13
  40. package/dist/esm/typography/DocumentFormatting.js +12 -3
  41. package/dist/modern/ActionBar/ActionBar.js +1 -0
  42. package/dist/modern/Button/Button.stories.js +8 -1
  43. package/dist/modern/blocks/ArgsTable/ArgControl.js +23 -41
  44. package/dist/modern/blocks/ArgsTable/ArgRow.js +7 -1
  45. package/dist/modern/blocks/ArgsTable/ArgsTable.js +1 -1
  46. package/dist/modern/blocks/ColorPalette.js +20 -7
  47. package/dist/modern/blocks/Preview.js +34 -5
  48. package/dist/modern/controls/Boolean.js +3 -2
  49. package/dist/modern/controls/Color.js +2 -2
  50. package/dist/modern/controls/Number.js +2 -1
  51. package/dist/modern/controls/Object.js +2 -1
  52. package/dist/modern/controls/Text.js +2 -1
  53. package/dist/modern/controls/helpers.js +9 -1
  54. package/dist/modern/controls/index.js +0 -1
  55. package/dist/modern/controls/options/Options.js +16 -23
  56. package/dist/modern/icon/icons.js +3 -0
  57. package/dist/modern/index.js +4 -2
  58. package/dist/modern/syntaxhighlighter/syntaxhighlighter.js +11 -8
  59. package/dist/modern/typography/DocumentFormatting.js +7 -2
  60. package/dist/ts3.4/Button/Button.d.ts +1 -0
  61. package/dist/ts3.4/controls/helpers.d.ts +7 -0
  62. package/dist/ts3.4/controls/index.d.ts +0 -1
  63. package/dist/ts3.4/controls/types.d.ts +1 -5
  64. package/dist/ts3.4/icon/icons.d.ts +3 -0
  65. package/dist/ts3.4/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
  66. package/dist/ts3.9/Button/Button.d.ts +1 -0
  67. package/dist/ts3.9/controls/helpers.d.ts +7 -0
  68. package/dist/ts3.9/controls/index.d.ts +0 -1
  69. package/dist/ts3.9/controls/types.d.ts +1 -5
  70. package/dist/ts3.9/icon/icons.d.ts +3 -0
  71. package/dist/ts3.9/syntaxhighlighter/syntaxhighlighter.d.ts +1 -0
  72. package/package.json +7 -7
  73. package/dist/cjs/controls/Array.js +0 -123
  74. package/dist/cjs/controls/Array.stories.js +0 -92
  75. package/dist/esm/controls/Array.js +0 -86
  76. package/dist/esm/controls/Array.stories.js +0 -55
  77. package/dist/modern/controls/Array.js +0 -55
  78. package/dist/modern/controls/Array.stories.js +0 -20
  79. package/dist/ts3.4/controls/Array.d.ts +0 -4
  80. 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);
@@ -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>;