@storybook/components 6.4.0-beta.20 → 6.4.0-beta.24

package/dist/modern/controls/options/Select.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { logger } from '@storybook/client-logger';
-import { selectedKey, selectedKeys, selectedValues } from './helpers';
-import { Icons } from '../../icon/icon';
-import { getControlId } from '../helpers';
-const styleResets = {
-  // resets
-  appearance: 'none',
-  border: '0 none',
-  boxSizing: 'inherit',
-  display: ' block',
-  margin: ' 0',
-  background: 'transparent',
-  padding: 0,
-  fontSize: 'inherit',
-  position: 'relative'
-};
-const OptionsSelect = styled.select(({
-  theme
-}) => Object.assign({}, styleResets, {
-  boxSizing: 'border-box',
-  position: 'relative',
-  padding: '6px 10px',
-  width: '100%',
-  color: theme.input.color || 'inherit',
-  background: theme.input.background,
-  borderRadius: theme.input.borderRadius,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '20px',
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none'
-  },
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5
-  },
-  '::placeholder': {
-    color: theme.color.mediumdark
-  },
-  '&[multiple]': {
-    overflow: 'auto',
-    padding: 0,
-    option: {
-      display: 'block',
-      padding: '6px 10px',
-      marginLeft: 1,
-      marginRight: 1
-    }
-  }
-}));
-const SelectWrapper = styled.span`
-  display: inline-block;
-  line-height: normal;
-  overflow: hidden;
-  position: relative;
-  vertical-align: top;
-  width: 100%;
-
-  svg {
-    position: absolute;
-    z-index: 1;
-    pointer-events: none;
-    height: 12px;
-    margin-top: -6px;
-    right: 12px;
-    top: 50%;
-
-    path {
-      fill: currentColor;
-    }
-  }
-`;
-const NO_SELECTION = 'Choose option...';
-
-const SingleSelect = ({
-  name,
-  value,
-  options,
-  onChange
-}) => {
-  const handleChange = e => {
-    onChange(options[e.currentTarget.value]);
-  };
-
-  const selection = selectedKey(value, options) || NO_SELECTION;
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(SelectWrapper, null, /*#__PURE__*/React.createElement(Icons, {
-    icon: "arrowdown"
-  }), /*#__PURE__*/React.createElement(OptionsSelect, {
-    id: controlId,
-    value: selection,
-    onChange: handleChange
-  }, /*#__PURE__*/React.createElement("option", {
-    key: "no-selection",
-    disabled: true
-  }, NO_SELECTION), Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
-    key: key
-  }, key))));
-};
-
-SingleSelect.displayName = "SingleSelect";
-
-const MultiSelect = ({
-  name,
-  value,
-  options,
-  onChange
-}) => {
-  const handleChange = e => {
-    const selection = Array.from(e.currentTarget.options).filter(option => option.selected).map(option => option.value);
-    onChange(selectedValues(selection, options));
-  };
-
-  const selection = selectedKeys(value, options);
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(SelectWrapper, null, /*#__PURE__*/React.createElement(OptionsSelect, {
-    id: controlId,
-    multiple: true,
-    value: selection,
-    onChange: handleChange
-  }, Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
-    key: key
-  }, key))));
-};
-
-MultiSelect.displayName = "MultiSelect";
-export const SelectControl = props => {
-  const {
-    name,
-    options
-  } = props;
-
-  if (!options) {
-    logger.warn(`Select with no options: ${name}`);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
-  } // eslint-disable-next-line react/destructuring-assignment
-
-
-  return props.isMulti ? /*#__PURE__*/React.createElement(MultiSelect, props) : /*#__PURE__*/React.createElement(SingleSelect, props);
-};

package/dist/modern/controls/options/helpers.js

@@ -1,6 +0,0 @@
-export const selectedKey = (value, options) => {
-  const entry = options && Object.entries(options).find(([_key, val]) => val === value);
-  return entry ? entry[0] : undefined;
-};
-export const selectedKeys = (value, options) => value && options ? Object.entries(options).filter(entry => value.includes(entry[1])).map(entry => entry[0]) : [];
-export const selectedValues = (keys, options) => keys && options && keys.map(key => options[key]);

package/dist/modern/controls/options/index.js

@@ -1 +0,0 @@
-export * from './Options';

package/dist/modern/controls/react-editable-json-tree/LICENSE.md

@@ -1,14 +0,0 @@
-Copyright (c) 2016 Oxyno-zeta (Havrileck Alexandre)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
-documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 
-rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
-persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 
-Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/modern/controls/react-editable-json-tree/components/JsonAddValue.js

@@ -1,148 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import inputUsageTypes from '../types/inputUsageTypes';
-
-class JsonAddValue extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      inputRefKey: null,
-      inputRefValue: null
-    }; // Bind
-
-    this.refInputValue = this.refInputValue.bind(this);
-    this.refInputKey = this.refInputKey.bind(this);
-    this.onKeydown = this.onKeydown.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  componentDidMount() {
-    const {
-      inputRefKey,
-      inputRefValue
-    } = this.state;
-    const {
-      onlyValue
-    } = this.props;
-
-    if (inputRefKey && typeof inputRefKey.focus === 'function') {
-      inputRefKey.focus();
-    }
-
-    if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') {
-      inputRefValue.focus();
-    }
-
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
-  }
-
-  onKeydown(event) {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
-
-    if (event.code === 'Enter' || event.key === 'Enter') {
-      event.preventDefault();
-      this.onSubmit();
-    }
-
-    if (event.code === 'Escape' || event.key === 'Escape') {
-      event.preventDefault();
-      this.props.handleCancel();
-    }
-  }
-
-  onSubmit() {
-    const {
-      handleAdd,
-      onlyValue,
-      onSubmitValueParser,
-      keyPath,
-      deep
-    } = this.props;
-    const {
-      inputRefKey,
-      inputRefValue
-    } = this.state;
-    const result = {}; // Check if we have the key
-
-    if (!onlyValue) {
-      // Check that there is a key
-      if (!inputRefKey.value) {
-        // Empty key => Not authorized
-        return;
-      }
-
-      result.key = inputRefKey.value;
-    }
-
-    result.newValue = onSubmitValueParser(false, keyPath, deep, result.key, inputRefValue.value);
-    handleAdd(result);
-  }
-
-  refInputKey(node) {
-    this.state.inputRefKey = node;
-  }
-
-  refInputValue(node) {
-    this.state.inputRefValue = node;
-  }
-
-  render() {
-    const {
-      handleCancel,
-      onlyValue,
-      addButtonElement,
-      cancelButtonElement,
-      inputElementGenerator,
-      keyPath,
-      deep
-    } = this.props;
-    const addButtonElementLayout = /*#__PURE__*/React.cloneElement(addButtonElement, {
-      onClick: this.onSubmit
-    });
-    const cancelButtonElementLayout = /*#__PURE__*/React.cloneElement(cancelButtonElement, {
-      onClick: handleCancel
-    });
-    const inputElementValue = inputElementGenerator(inputUsageTypes.VALUE, keyPath, deep);
-    const inputElementValueLayout = /*#__PURE__*/React.cloneElement(inputElementValue, {
-      placeholder: 'Value',
-      ref: this.refInputValue
-    });
-    let inputElementKeyLayout = null;
-
-    if (!onlyValue) {
-      const inputElementKey = inputElementGenerator(inputUsageTypes.KEY, keyPath, deep);
-      inputElementKeyLayout = /*#__PURE__*/React.cloneElement(inputElementKey, {
-        placeholder: 'Key',
-        ref: this.refInputKey
-      });
-    }
-
-    return /*#__PURE__*/React.createElement("span", {
-      className: "rejt-add-value-node"
-    }, inputElementKeyLayout, inputElementValueLayout, cancelButtonElementLayout, addButtonElementLayout);
-  }
-
-}
-
-JsonAddValue.displayName = "JsonAddValue";
-JsonAddValue.propTypes = {
-  handleAdd: PropTypes.func.isRequired,
-  handleCancel: PropTypes.func.isRequired,
-  onlyValue: PropTypes.bool,
-  addButtonElement: PropTypes.element,
-  cancelButtonElement: PropTypes.element,
-  inputElementGenerator: PropTypes.func.isRequired,
-  keyPath: PropTypes.array,
-  deep: PropTypes.number,
-  onSubmitValueParser: PropTypes.func.isRequired
-};
-JsonAddValue.defaultProps = {
-  onlyValue: false,
-  addButtonElement: /*#__PURE__*/React.createElement("button", null, "+"),
-  cancelButtonElement: /*#__PURE__*/React.createElement("button", null, "c")
-};
-export default JsonAddValue;

package/dist/modern/controls/react-editable-json-tree/components/JsonArray.js

@@ -1,392 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import JsonNode from './JsonNode';
-import JsonAddValue from './JsonAddValue';
-import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../types/deltaTypes';
-
-class JsonArray extends Component {
-  constructor(props) {
-    super(props);
-    const keyPath = [...props.keyPath, props.name];
-    this.state = {
-      data: props.data,
-      name: props.name,
-      keyPath,
-      deep: props.deep,
-      nextDeep: props.deep + 1,
-      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
-      addFormVisible: false
-    }; // Bind
-
-    this.handleCollapseMode = this.handleCollapseMode.bind(this);
-    this.handleRemoveItem = this.handleRemoveItem.bind(this);
-    this.handleAddMode = this.handleAddMode.bind(this);
-    this.handleAddValueAdd = this.handleAddValueAdd.bind(this);
-    this.handleAddValueCancel = this.handleAddValueCancel.bind(this);
-    this.handleEditValue = this.handleEditValue.bind(this);
-    this.onChildUpdate = this.onChildUpdate.bind(this);
-    this.renderCollapsed = this.renderCollapsed.bind(this);
-    this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    return props.data !== state.data ? {
-      data: props.data
-    } : null;
-  }
-
-  onChildUpdate(childKey, childData) {
-    const {
-      data,
-      keyPath
-    } = this.state; // Update data
-
-    data[childKey] = childData; // Put new data
-
-    this.setState({
-      data
-    }); // Spread
-
-    const {
-      onUpdate
-    } = this.props;
-    const size = keyPath.length;
-    onUpdate(keyPath[size - 1], data);
-  }
-
-  handleAddMode() {
-    this.setState({
-      addFormVisible: true
-    });
-  }
-
-  handleCollapseMode() {
-    this.setState(state => ({
-      collapsed: !state.collapsed
-    }));
-  }
-
-  handleRemoveItem(index) {
-    return () => {
-      const {
-        beforeRemoveAction,
-        logger
-      } = this.props;
-      const {
-        data,
-        keyPath,
-        nextDeep: deep
-      } = this.state;
-      const oldValue = data[index]; // Before Remove Action
-
-      beforeRemoveAction(index, keyPath, deep, oldValue).then(() => {
-        const deltaUpdateResult = {
-          keyPath,
-          deep,
-          key: index,
-          oldValue,
-          type: REMOVE_DELTA_TYPE
-        };
-        data.splice(index, 1);
-        this.setState({
-          data
-        }); // Spread new update
-
-        const {
-          onUpdate,
-          onDeltaUpdate
-        } = this.props;
-        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
-
-        onDeltaUpdate(deltaUpdateResult);
-      }).catch(logger.error);
-    };
-  }
-
-  handleAddValueAdd({
-    newValue
-  }) {
-    const {
-      data,
-      keyPath,
-      nextDeep: deep
-    } = this.state;
-    const {
-      beforeAddAction,
-      logger
-    } = this.props;
-    beforeAddAction(data.length, keyPath, deep, newValue).then(() => {
-      // Update data
-      const newData = [...data, newValue];
-      this.setState({
-        data: newData
-      }); // Cancel add to close
-
-      this.handleAddValueCancel(); // Spread new update
-
-      const {
-        onUpdate,
-        onDeltaUpdate
-      } = this.props;
-      onUpdate(keyPath[keyPath.length - 1], newData); // Spread delta update
-
-      onDeltaUpdate({
-        type: ADD_DELTA_TYPE,
-        keyPath,
-        deep,
-        key: newData.length - 1,
-        newValue
-      });
-    }).catch(logger.error);
-  }
-
-  handleAddValueCancel() {
-    this.setState({
-      addFormVisible: false
-    });
-  }
-
-  handleEditValue({
-    key,
-    value
-  }) {
-    return new Promise((resolve, reject) => {
-      const {
-        beforeUpdateAction
-      } = this.props;
-      const {
-        data,
-        keyPath,
-        nextDeep: deep
-      } = this.state; // Old value
-
-      const oldValue = data[key]; // Before update action
-
-      beforeUpdateAction(key, keyPath, deep, oldValue, value).then(() => {
-        // Update value
-        data[key] = value; // Set state
-
-        this.setState({
-          data
-        }); // Spread new update
-
-        const {
-          onUpdate,
-          onDeltaUpdate
-        } = this.props;
-        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
-
-        onDeltaUpdate({
-          type: UPDATE_DELTA_TYPE,
-          keyPath,
-          deep,
-          key,
-          newValue: value,
-          oldValue
-        }); // Resolve
-
-        resolve();
-      }).catch(reject);
-    });
-  }
-
-  renderCollapsed() {
-    const {
-      name,
-      data,
-      keyPath,
-      deep
-    } = this.state;
-    const {
-      handleRemove,
-      readOnly,
-      getStyle,
-      dataType,
-      minusMenuElement
-    } = this.props;
-    const {
-      minus,
-      collapsed
-    } = getStyle(name, data, keyPath, deep, dataType);
-    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
-    const removeItemButton = /*#__PURE__*/React.cloneElement(minusMenuElement, {
-      onClick: handleRemove,
-      className: 'rejt-minus-menu',
-      style: minus
-    });
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-    return /*#__PURE__*/React.createElement("span", {
-      className: "rejt-collapsed"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "rejt-collapsed-text",
-      style: collapsed,
-      onClick: this.handleCollapseMode
-    }, "[...] ", data.length, " ", data.length === 1 ? 'item' : 'items'), !isReadOnly && removeItemButton);
-    /* eslint-enable */
-  }
-
-  renderNotCollapsed() {
-    const {
-      name,
-      data,
-      keyPath,
-      deep,
-      addFormVisible,
-      nextDeep
-    } = this.state;
-    const {
-      isCollapsed,
-      handleRemove,
-      onDeltaUpdate,
-      readOnly,
-      getStyle,
-      dataType,
-      addButtonElement,
-      cancelButtonElement,
-      editButtonElement,
-      inputElementGenerator,
-      textareaElementGenerator,
-      minusMenuElement,
-      plusMenuElement,
-      beforeRemoveAction,
-      beforeAddAction,
-      beforeUpdateAction,
-      logger,
-      onSubmitValueParser
-    } = this.props;
-    const {
-      minus,
-      plus,
-      delimiter,
-      ul,
-      addForm
-    } = getStyle(name, data, keyPath, deep, dataType);
-    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
-    const addItemButton = /*#__PURE__*/React.cloneElement(plusMenuElement, {
-      onClick: this.handleAddMode,
-      className: 'rejt-plus-menu',
-      style: plus
-    });
-    const removeItemButton = /*#__PURE__*/React.cloneElement(minusMenuElement, {
-      onClick: handleRemove,
-      className: 'rejt-minus-menu',
-      style: minus
-    });
-    const onlyValue = true;
-    const startObject = '[';
-    const endObject = ']';
-    return /*#__PURE__*/React.createElement("span", {
-      className: "rejt-not-collapsed"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "rejt-not-collapsed-delimiter",
-      style: delimiter
-    }, startObject), !addFormVisible && addItemButton, /*#__PURE__*/React.createElement("ul", {
-      className: "rejt-not-collapsed-list",
-      style: ul
-    }, data.map((item, index) => /*#__PURE__*/React.createElement(JsonNode, {
-      key: index,
-      name: `${index}`,
-      data: item,
-      keyPath: keyPath,
-      deep: nextDeep,
-      isCollapsed: isCollapsed,
-      handleRemove: this.handleRemoveItem(index),
-      handleUpdateValue: this.handleEditValue,
-      onUpdate: this.onChildUpdate,
-      onDeltaUpdate: onDeltaUpdate,
-      readOnly: readOnly,
-      getStyle: getStyle,
-      addButtonElement: addButtonElement,
-      cancelButtonElement: cancelButtonElement,
-      editButtonElement: editButtonElement,
-      inputElementGenerator: inputElementGenerator,
-      textareaElementGenerator: textareaElementGenerator,
-      minusMenuElement: minusMenuElement,
-      plusMenuElement: plusMenuElement,
-      beforeRemoveAction: beforeRemoveAction,
-      beforeAddAction: beforeAddAction,
-      beforeUpdateAction: beforeUpdateAction,
-      logger: logger,
-      onSubmitValueParser: onSubmitValueParser
-    }))), !isReadOnly && addFormVisible && /*#__PURE__*/React.createElement("div", {
-      className: "rejt-add-form",
-      style: addForm
-    }, /*#__PURE__*/React.createElement(JsonAddValue, {
-      handleAdd: this.handleAddValueAdd,
-      handleCancel: this.handleAddValueCancel,
-      onlyValue: onlyValue,
-      addButtonElement: addButtonElement,
-      cancelButtonElement: cancelButtonElement,
-      inputElementGenerator: inputElementGenerator,
-      keyPath: keyPath,
-      deep: deep,
-      onSubmitValueParser: onSubmitValueParser
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "rejt-not-collapsed-delimiter",
-      style: delimiter
-    }, endObject), !isReadOnly && removeItemButton);
-  }
-
-  render() {
-    const {
-      name,
-      collapsed,
-      data,
-      keyPath,
-      deep
-    } = this.state;
-    const {
-      dataType,
-      getStyle
-    } = this.props;
-    const value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
-    const style = getStyle(name, data, keyPath, deep, dataType);
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "rejt-array-node"
-    }, /*#__PURE__*/React.createElement("span", {
-      onClick: this.handleCollapseMode
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "rejt-name",
-      style: style.name
-    }, name, " :", ' ')), value);
-    /* eslint-enable */
-  }
-
-}
-
-JsonArray.displayName = "JsonArray";
-JsonArray.propTypes = {
-  data: PropTypes.array.isRequired,
-  name: PropTypes.string.isRequired,
-  isCollapsed: PropTypes.func.isRequired,
-  keyPath: PropTypes.array,
-  deep: PropTypes.number,
-  handleRemove: PropTypes.func,
-  onUpdate: PropTypes.func.isRequired,
-  onDeltaUpdate: PropTypes.func.isRequired,
-  readOnly: PropTypes.func.isRequired,
-  dataType: PropTypes.string,
-  getStyle: PropTypes.func.isRequired,
-  addButtonElement: PropTypes.element,
-  cancelButtonElement: PropTypes.element,
-  editButtonElement: PropTypes.element,
-  inputElementGenerator: PropTypes.func.isRequired,
-  textareaElementGenerator: PropTypes.func.isRequired,
-  minusMenuElement: PropTypes.element,
-  plusMenuElement: PropTypes.element,
-  beforeRemoveAction: PropTypes.func,
-  beforeAddAction: PropTypes.func,
-  beforeUpdateAction: PropTypes.func,
-  logger: PropTypes.object.isRequired,
-  onSubmitValueParser: PropTypes.func.isRequired
-};
-JsonArray.defaultProps = {
-  keyPath: [],
-  deep: 0,
-  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - "),
-  plusMenuElement: /*#__PURE__*/React.createElement("span", null, " + ")
-};
-export default JsonArray;