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

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

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
+import { selectedKeys, selectedValues } from './helpers';
+import { getControlId } from '../helpers';
+const Wrapper = styled.div(({
+  isInline
+}) => isInline ? {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  label: {
+    display: 'inline-flex',
+    marginRight: 15
+  }
+} : {
+  label: {
+    display: 'flex'
+  }
+});
+const Text = styled.span({});
+const Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+  '&:last-child': {
+    marginBottom: 0
+  },
+  input: {
+    margin: 0,
+    marginRight: 6
+  }
+});
+export const CheckboxControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  isInline
+}) => {
+  if (!options) {
+    logger.warn(`Checkbox with no options: ${name}`);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
+  }
+
+  const initial = selectedKeys(value, options);
+  const [selected, setSelected] = useState(initial);
+
+  const handleChange = e => {
+    const option = e.target.value;
+    const updated = [...selected];
+
+    if (updated !== null && updated !== void 0 && updated.includes(option)) {
+      updated.splice(updated.indexOf(option), 1);
+    } else {
+      updated.push(option);
+    }
+
+    onChange(selectedValues(updated, options));
+    setSelected(updated);
+  };
+
+  const controlId = getControlId(name);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    isInline: isInline
+  }, Object.keys(options).map((key, index) => {
+    const id = `${controlId}-${index}`;
+    return /*#__PURE__*/React.createElement(Label, {
+      key: id,
+      htmlFor: id
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      id: id,
+      name: id,
+      value: key,
+      onChange: handleChange,
+      checked: selected === null || selected === void 0 ? void 0 : selected.includes(key)
+    }), /*#__PURE__*/React.createElement(Text, null, key));
+  }));
+};
+CheckboxControl.displayName = "CheckboxControl";

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

@@ -0,0 +1,67 @@
+import "core-js/modules/es.array.reduce.js";
+import React from 'react';
+import dedent from 'ts-dedent';
+import { once } from '@storybook/client-logger';
+import { CheckboxControl } from './Checkbox';
+import { RadioControl } from './Radio';
+import { SelectControl } from './Select';
+
+/**
+ * Options can accept `options` in two formats:
+ * - array: ['a', 'b', 'c'] OR
+ * - object: { a: 1, b: 2, c: 3 } (deprecated)
+ *
+ * We always normalize to the more generalized object format and ONLY handle
+ * the object format in the underlying control implementations.
+ *
+ * While non-primitive values are deprecated, they might still not be valid
+ * object keys, so the resulting object is a Label -> Value mapping.
+ */
+const normalizeOptions = (options, labels) => {
+  if (Array.isArray(options)) {
+    return options.reduce((acc, item) => {
+      acc[(labels === null || labels === void 0 ? void 0 : labels[item]) || String(item)] = item;
+      return acc;
+    }, {});
+  }
+
+  return options;
+};
+
+const Controls = {
+  check: CheckboxControl,
+  'inline-check': CheckboxControl,
+  radio: RadioControl,
+  'inline-radio': RadioControl,
+  select: SelectControl,
+  'multi-select': SelectControl
+};
+export const OptionsControl = props => {
+  const {
+    type = 'select',
+    options,
+    labels,
+    argType
+  } = props;
+  const normalized = Object.assign({}, props, {
+    options: normalizeOptions(options || argType.options, labels),
+    isInline: type.includes('inline'),
+    isMulti: type.includes('multi')
+  });
+
+  if (options) {
+    once.warn(dedent`
+      'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.
+
+      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions
+    `);
+  }
+
+  const Control = Controls[type];
+
+  if (Control) {
+    return /*#__PURE__*/React.createElement(Control, normalized);
+  }
+
+  throw new Error(`Unknown options type: ${type}`);
+};

package/dist/modern/controls/options/Options.stories.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { OptionsControl } from './Options';
+export default {
+  title: 'Controls/Options',
+  component: OptionsControl
+};
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const objectOptions = {
+  A: {
+    id: 'Aardvark'
+  },
+  B: {
+    id: 'Bat'
+  },
+  C: {
+    id: 'Cat'
+  }
+};
+
+const rawOptionsHelper = (options, type, isMulti, initial) => {
+  const [value, setValue] = useState(isMulti ? [initial] : initial);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionsControl, {
+    name: "options",
+    options: options,
+    value: value,
+    type: type,
+    onChange: newVal => setValue(newVal)
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+const optionsHelper = (options, type, isMulti) => rawOptionsHelper(options, type, isMulti, Array.isArray(options) ? options[1] : options.B); // Check
+
+
+export const ArrayCheck = () => optionsHelper(arrayOptions, 'check', true);
+export const ArrayInlineCheck = () => optionsHelper(arrayOptions, 'inline-check', true);
+export const ObjectCheck = () => optionsHelper(objectOptions, 'check', true);
+export const ObjectInlineCheck = () => optionsHelper(objectOptions, 'inline-check', true);
+export const ArrayCheckUndefined = () => rawOptionsHelper(arrayOptions, 'check', false, undefined);
+export const ObjectCheckUndefined = () => rawOptionsHelper(objectOptions, 'check', false, undefined); // Radio
+
+export const ArrayRadio = () => optionsHelper(arrayOptions, 'radio', false);
+export const ArrayInlineRadio = () => optionsHelper(arrayOptions, 'inline-radio', false);
+export const ObjectRadio = () => optionsHelper(objectOptions, 'radio', false);
+export const ObjectInlineRadio = () => optionsHelper(objectOptions, 'inline-radio', false);
+export const ArrayRadioUndefined = () => rawOptionsHelper(arrayOptions, 'radio', false, undefined);
+export const ObjectRadioUndefined = () => rawOptionsHelper(objectOptions, 'radio', false, undefined); // Select
+
+export const ArraySelect = () => optionsHelper(arrayOptions, 'select', false);
+export const ArrayMultiSelect = () => optionsHelper(arrayOptions, 'multi-select', true);
+export const ObjectSelect = () => optionsHelper(objectOptions, 'select', false);
+export const ObjectMultiSelect = () => optionsHelper(objectOptions, 'multi-select', true);
+export const ArraySelectUndefined = () => rawOptionsHelper(arrayOptions, 'select', false, undefined);
+export const ObjectSelectUndefined = () => rawOptionsHelper(objectOptions, 'select', false, undefined);
+export const ArrayMultiSelectUndefined = () => rawOptionsHelper(arrayOptions, 'multi-select', false, undefined);
+export const ObjectMultiSelectUndefined = () => rawOptionsHelper(objectOptions, 'multi-select', false, undefined);

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
+import { selectedKey } from './helpers';
+import { getControlId } from '../helpers';
+const Wrapper = styled.div(({
+  isInline
+}) => isInline ? {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  label: {
+    display: 'inline-flex',
+    marginRight: 15
+  }
+} : {
+  label: {
+    display: 'flex'
+  }
+});
+const Fieldset = styled.fieldset({
+  border: 0,
+  padding: 0,
+  margin: 0
+});
+const Text = styled.span({});
+const Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+  '&:last-child': {
+    marginBottom: 0
+  },
+  input: {
+    margin: 0,
+    marginRight: 6
+  }
+});
+export const RadioControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  isInline
+}) => {
+  if (!options) {
+    logger.warn(`Radio with no options: ${name}`);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
+  }
+
+  const selection = selectedKey(value, options);
+  const controlId = getControlId(name);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    isInline: isInline
+  }, Object.keys(options).map((key, index) => {
+    const id = `${controlId}-${index}`;
+    return /*#__PURE__*/React.createElement(Label, {
+      key: id,
+      htmlFor: id
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      id: id,
+      name: id,
+      value: key,
+      onChange: e => onChange(options[e.currentTarget.value]),
+      checked: key === selection
+    }), /*#__PURE__*/React.createElement(Text, null, key));
+  }));
+};
+RadioControl.displayName = "RadioControl";

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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,148 @@
+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;