@storybook/components 6.5.0-alpha.34 → 6.5.0-alpha.39

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

@@ -1,153 +0,0 @@
-import React, { Component } from 'react';
-import { JsonNode } from './JsonNodes';
-import { value, object, array } from './utils/styles';
-import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from './types/deltaTypes';
-import { getObjectType } from './utils/objectTypes';
-import * as DATA_TYPES from './types/dataTypes';
-import * as INPUT_USAGE_TYPES from './types/inputUsageTypes';
-import { parse } from './utils/parse';
-export class JsonTree extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: props.data,
-      rootName: props.rootName
-    }; // Bind
-
-    this.onUpdate = this.onUpdate.bind(this);
-    this.removeRoot = this.removeRoot.bind(this);
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (props.data !== state.data || props.rootName !== state.rootName) {
-      return {
-        data: props.data,
-        rootName: props.rootName
-      };
-    }
-
-    return null;
-  }
-
-  onUpdate(key, data) {
-    this.setState({
-      data
-    });
-    this.props.onFullyUpdate(data);
-  }
-
-  removeRoot() {
-    this.onUpdate(null, null);
-  }
-
-  render() {
-    const {
-      data,
-      rootName
-    } = this.state;
-    const {
-      isCollapsed,
-      onDeltaUpdate,
-      readOnly,
-      getStyle,
-      addButtonElement,
-      cancelButtonElement,
-      editButtonElement,
-      inputElement,
-      textareaElement,
-      minusMenuElement,
-      plusMenuElement,
-      beforeRemoveAction,
-      beforeAddAction,
-      beforeUpdateAction,
-      logger,
-      onSubmitValueParser,
-      fallback = null
-    } = this.props; // Node type
-
-    const dataType = getObjectType(data);
-    let readOnlyFunction = readOnly;
-
-    if (getObjectType(readOnly) === 'Boolean') {
-      readOnlyFunction = () => readOnly;
-    }
-
-    let inputElementFunction = inputElement;
-
-    if (inputElement && getObjectType(inputElement) !== 'Function') {
-      // @ts-ignore
-      inputElementFunction = () => inputElement;
-    }
-
-    let textareaElementFunction = textareaElement;
-
-    if (textareaElement && getObjectType(textareaElement) !== 'Function') {
-      // @ts-ignore
-      textareaElementFunction = () => textareaElement;
-    }
-
-    if (dataType === 'Object' || dataType === 'Array') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "rejt-tree"
-      }, /*#__PURE__*/React.createElement(JsonNode, {
-        data: data,
-        name: rootName,
-        deep: -1,
-        isCollapsed: isCollapsed,
-        onUpdate: this.onUpdate,
-        onDeltaUpdate: onDeltaUpdate,
-        readOnly: readOnlyFunction,
-        getStyle: getStyle,
-        addButtonElement: addButtonElement,
-        cancelButtonElement: cancelButtonElement,
-        editButtonElement: editButtonElement,
-        inputElementGenerator: inputElementFunction,
-        textareaElementGenerator: textareaElementFunction,
-        minusMenuElement: minusMenuElement,
-        plusMenuElement: plusMenuElement,
-        handleRemove: this.removeRoot,
-        beforeRemoveAction: beforeRemoveAction,
-        beforeAddAction: beforeAddAction,
-        beforeUpdateAction: beforeUpdateAction,
-        logger: logger,
-        onSubmitValueParser: onSubmitValueParser
-      }));
-    }
-
-    return fallback;
-  }
-
-}
-JsonTree.displayName = "JsonTree";
-// @ts-ignore
-JsonTree.defaultProps = {
-  rootName: 'root',
-  isCollapsed: (keyPath, deep) => deep !== -1,
-  getStyle: (keyName, data, keyPath, deep, dataType) => {
-    switch (dataType) {
-      case 'Object':
-      case 'Error':
-        return object;
-
-      case 'Array':
-        return array;
-
-      default:
-        return value;
-    }
-  },
-  readOnly: () => false,
-  onFullyUpdate: () => {},
-  onDeltaUpdate: () => {},
-  beforeRemoveAction: () => Promise.resolve(),
-  beforeAddAction: () => Promise.resolve(),
-  beforeUpdateAction: () => Promise.resolve(),
-  logger: {
-    error: () => {}
-  },
-  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) => parse(rawValue),
-  inputElement: () => /*#__PURE__*/React.createElement("input", null),
-  textareaElement: () => /*#__PURE__*/React.createElement("textarea", null),
-  fallback: null
-};
-export { getObjectType, ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE, DATA_TYPES, INPUT_USAGE_TYPES };

package/dist/modern/controls/react-editable-json-tree/types/dataTypes.js

@@ -1,12 +0,0 @@
-const ERROR = 'Error';
-const OBJECT = 'Object';
-const ARRAY = 'Array';
-const STRING = 'String';
-const NUMBER = 'Number';
-const BOOLEAN = 'Boolean';
-const DATE = 'Date';
-const NULL = 'Null';
-const UNDEFINED = 'Undefined';
-const FUNCTION = 'Function';
-const SYMBOL = 'Symbol';
-export { ERROR, OBJECT, ARRAY, STRING, NUMBER, BOOLEAN, DATE, NULL, UNDEFINED, FUNCTION, SYMBOL };

package/dist/modern/controls/react-editable-json-tree/types/deltaTypes.js

@@ -1,4 +0,0 @@
-const ADD_DELTA_TYPE = 'ADD_DELTA_TYPE';
-const REMOVE_DELTA_TYPE = 'REMOVE_DELTA_TYPE';
-const UPDATE_DELTA_TYPE = 'UPDATE_DELTA_TYPE';
-export { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE };

package/dist/modern/controls/react-editable-json-tree/types/inputUsageTypes.js

@@ -1,3 +0,0 @@
-const VALUE = 'value';
-const KEY = 'key';
-export { KEY, VALUE };

package/dist/modern/controls/react-editable-json-tree/utils/objectTypes.js

@@ -1,24 +0,0 @@
-/**
- * Get Object type.
- * @param obj {*} object to get type
- * @returns {*}
- */
-export function getObjectType(obj) {
-  if (obj !== null && typeof obj === 'object' && !Array.isArray(obj) && typeof obj[Symbol.iterator] === 'function') {
-    return 'Iterable';
-  }
-
-  return Object.prototype.toString.call(obj).slice(8, -1);
-}
-/**
- * Is Component will change ?
- * @param oldValue {*} old value
- * @param newValue {*} new value
- * @returns {boolean} result
- */
-
-export function isComponentWillChange(oldValue, newValue) {
-  const oldType = getObjectType(oldValue);
-  const newType = getObjectType(newValue);
-  return (oldType === 'Function' || newType === 'Function') && newType !== oldType;
-}

package/dist/modern/controls/react-editable-json-tree/utils/parse.js

@@ -1,19 +0,0 @@
-/**
- * Parse.
- * @param string {String} string to parse
- * @returns {*}
- */
-export function parse(string) {
-  let result = string; // Check if string contains 'function' and start with it to eval it
-
-  if (result.indexOf('function') === 0) {
-    return eval(`(${result})`); // eslint-disable-line no-eval
-  }
-
-  try {
-    result = JSON.parse(string);
-  } catch (e) {// Error
-  }
-
-  return result;
-}

package/dist/modern/controls/react-editable-json-tree/utils/styles.js

@@ -1,59 +0,0 @@
-export const object = {
-  minus: {
-    color: 'red'
-  },
-  plus: {
-    color: 'green'
-  },
-  collapsed: {
-    color: 'grey'
-  },
-  delimiter: {},
-  ul: {
-    padding: '0px',
-    margin: '0 0 0 25px',
-    listStyle: 'none'
-  },
-  name: {
-    color: '#2287CD'
-  },
-  addForm: {}
-};
-export const array = {
-  minus: {
-    color: 'red'
-  },
-  plus: {
-    color: 'green'
-  },
-  collapsed: {
-    color: 'grey'
-  },
-  delimiter: {},
-  ul: {
-    padding: '0px',
-    margin: '0 0 0 25px',
-    listStyle: 'none'
-  },
-  name: {
-    color: '#2287CD'
-  },
-  addForm: {}
-};
-export const value = {
-  minus: {
-    color: 'red'
-  },
-  editForm: {},
-  value: {
-    color: '#7bba3d'
-  },
-  li: {
-    minHeight: '22px',
-    lineHeight: '22px',
-    outline: '0px'
-  },
-  name: {
-    color: '#2287CD'
-  }
-};

package/dist/modern/controls/types.js

@@ -1 +0,0 @@
-export {};

package/dist/modern/form/field/field.js

@@ -1,41 +0,0 @@
-const _excluded = ["label", "children"];
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React from 'react';
-import { styled } from '@storybook/theming';
-const Wrapper = styled.label(({
-  theme
-}) => ({
-  display: 'flex',
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  margin: '0 15px',
-  padding: '8px 0',
-  '&:last-child': {
-    marginBottom: '3rem'
-  }
-}));
-const Label = styled.span(({
-  theme
-}) => ({
-  minWidth: 100,
-  fontWeight: theme.typography.weight.bold,
-  marginRight: 15,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  lineHeight: '16px'
-}));
-export const Field = _ref => {
-  let {
-    label,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Wrapper, props, label ? /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement("span", null, label)) : null, children);
-};
-Field.displayName = "Field";
-Field.defaultProps = {
-  label: undefined
-};

package/dist/modern/form/form.stories.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { Input, Button, Select, Textarea } from './input/input';
-import { Field } from './field/field';
-import { Spaced } from '../spaced/Spaced';
-const Flexed = styled(Field)({
-  display: 'flex'
-});
-storiesOf('Basics/Form/Field', module).add('field', () => /*#__PURE__*/React.createElement(Field, {
-  key: "key",
-  label: "label"
-}, /*#__PURE__*/React.createElement(Select, {
-  value: "val2",
-  onChange: action('onChange'),
-  size: 1
-}, /*#__PURE__*/React.createElement("option", {
-  value: "val1"
-}, "Value 1"), /*#__PURE__*/React.createElement("option", {
-  value: "val2"
-}, "Value 2"), /*#__PURE__*/React.createElement("option", {
-  value: "val3"
-}, "Value 3"))));
-storiesOf('Basics/Form/Select', module).add('sizes', () => /*#__PURE__*/React.createElement(Spaced, null, ['auto', 'flex', '100%'].map(size => /*#__PURE__*/React.createElement(Flexed, {
-  key: size,
-  label: size
-}, /*#__PURE__*/React.createElement(Select, {
-  value: "val2",
-  onChange: action('onChange'),
-  size: size
-}, /*#__PURE__*/React.createElement("option", {
-  value: "val1"
-}, "Value 1"), /*#__PURE__*/React.createElement("option", {
-  value: "val2"
-}, "Value 2"), /*#__PURE__*/React.createElement("option", {
-  value: "val3"
-}, "Value 3")))))).add('validations', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Spaced, null, ['error', 'warn', 'valid', null].map(valid => /*#__PURE__*/React.createElement(Field, {
-  label: String(valid)
-}, /*#__PURE__*/React.createElement(Select, {
-  key: valid,
-  value: "val2",
-  onChange: action('onChange'),
-  size: "100%",
-  valid: valid
-}, /*#__PURE__*/React.createElement("option", {
-  value: "val1"
-}, "Value 1"), /*#__PURE__*/React.createElement("option", {
-  value: "val2"
-}, "Value 2"), /*#__PURE__*/React.createElement("option", {
-  value: "val3"
-}, "Value 3"))))), /*#__PURE__*/React.createElement(Field, {
-  label: "select"
-}, /*#__PURE__*/React.createElement(Select, {
-  value: "val2",
-  onChange: action('onChange'),
-  size: "100%",
-  disabled: true
-}, /*#__PURE__*/React.createElement("option", {
-  value: "val1"
-}, "Value 1"), /*#__PURE__*/React.createElement("option", {
-  value: "val2"
-}, "Value 2"), /*#__PURE__*/React.createElement("option", {
-  value: "val3"
-}, "Value 3")))));
-storiesOf('Basics/Form/Button', module).add('sizes', () => /*#__PURE__*/React.createElement(Spaced, null, ['auto', 'flex', '100%'].map(size => /*#__PURE__*/React.createElement(Flexed, {
-  key: size,
-  label: size
-}, /*#__PURE__*/React.createElement(Button, {
-  size: size
-}, "click this button"))))).add('validations', () => /*#__PURE__*/React.createElement(Spaced, null, ['error', 'warn', 'valid', null].map(valid => /*#__PURE__*/React.createElement(Flexed, {
-  key: valid,
-  label: String(valid)
-}, /*#__PURE__*/React.createElement(Button, {
-  size: "100%",
-  valid: valid
-}, "click this button")))));
-storiesOf('Basics/Form/Textarea', module).add('sizes', () => /*#__PURE__*/React.createElement(Spaced, null, ['auto', 'flex', '100%'].map(size => /*#__PURE__*/React.createElement(Flexed, {
-  key: size,
-  label: size
-}, /*#__PURE__*/React.createElement(Textarea, {
-  defaultValue: "textarea",
-  size: size
-}))))).add('validations', () => /*#__PURE__*/React.createElement(Spaced, null, ['error', 'warn', 'valid', null].map(valid => /*#__PURE__*/React.createElement(Flexed, {
-  key: valid,
-  label: String(valid)
-}, /*#__PURE__*/React.createElement(Textarea, {
-  defaultValue: "textarea",
-  size: "100%",
-  valid: valid
-}))))).add('alignment', () => /*#__PURE__*/React.createElement(Spaced, null, ['end', 'center', 'start'].map(align => /*#__PURE__*/React.createElement(Flexed, {
-  key: align,
-  label: align
-}, /*#__PURE__*/React.createElement(Textarea, {
-  defaultValue: "textarea",
-  size: "100%",
-  align: align
-}))))).add('height', () => /*#__PURE__*/React.createElement(Spaced, null, [100, 200, undefined].map(height => /*#__PURE__*/React.createElement(Flexed, {
-  key: (height || 'undefined').toString(),
-  label: (height || 'undefined').toString()
-}, /*#__PURE__*/React.createElement(Textarea, {
-  defaultValue: [...new Array(650)].fill('textarea textvalue').join(' '),
-  size: "100%",
-  height: height
-})))));
-storiesOf('Basics/Form/Input', module).add('sizes', () => /*#__PURE__*/React.createElement(Spaced, null, ['auto', 'flex', '100%'].map(size => /*#__PURE__*/React.createElement(Flexed, {
-  key: size,
-  label: size
-}, /*#__PURE__*/React.createElement(Input, {
-  defaultValue: "text",
-  size: size
-}))))).add('validations', () => /*#__PURE__*/React.createElement(Spaced, null, ['error', 'warn', 'valid', null].map(valid => /*#__PURE__*/React.createElement(Flexed, {
-  key: valid,
-  label: String(valid)
-}, /*#__PURE__*/React.createElement(Input, {
-  defaultValue: "text",
-  size: "100%",
-  valid: valid
-}))))).add('alignment', () => /*#__PURE__*/React.createElement(Spaced, null, ['end', 'center', 'start'].map(align => /*#__PURE__*/React.createElement(Flexed, {
-  key: align,
-  label: align
-}, /*#__PURE__*/React.createElement(Input, {
-  defaultValue: "text",
-  size: "100%",
-  align: align
-})))));

package/dist/modern/form/index.js

@@ -1,14 +0,0 @@
-import { styled } from '@storybook/theming';
-import { Field } from './field/field'; // InputStyleProps import is for TS
-
-import { Input, Select, Textarea, Button } from './input/input';
-export const Form = Object.assign(styled.form({
-  boxSizing: 'border-box',
-  width: '100%'
-}), {
-  Field,
-  Input,
-  Select,
-  Textarea,
-  Button
-});

package/dist/modern/form/input/input.js

@@ -1,208 +0,0 @@
-const _excluded = ["size", "valid", "align"],
-      _excluded2 = ["size", "valid", "align"],
-      _excluded3 = ["size", "valid", "align"],
-      _excluded4 = ["size", "valid", "align"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import TextareaAutoResize from 'react-textarea-autosize';
-import { Button as StyledButton } from '../../Button/Button';
-const styleResets = {
-  // resets
-  appearance: 'none',
-  border: '0 none',
-  boxSizing: 'inherit',
-  display: ' block',
-  margin: ' 0',
-  background: 'transparent',
-  padding: 0,
-  fontSize: 'inherit',
-  position: 'relative'
-};
-
-const styles = ({
-  theme
-}) => Object.assign({}, styleResets, {
-  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
-  color: theme.input.color || 'inherit',
-  background: theme.input.background,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '20px',
-  padding: '6px 10px',
-  // 32
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none'
-  },
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5
-  },
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`
-  },
-  '::placeholder': {
-    color: theme.color.mediumdark
-  }
-});
-
-const sizes = ({
-  size
-}) => {
-  switch (size) {
-    case '100%':
-      {
-        return {
-          width: '100%'
-        };
-      }
-
-    case 'flex':
-      {
-        return {
-          flex: 1
-        };
-      }
-
-    case 'auto':
-    default:
-      {
-        return {
-          display: 'inline'
-        };
-      }
-  }
-};
-
-const alignment = ({
-  align
-}) => {
-  switch (align) {
-    case 'end':
-      {
-        return {
-          textAlign: 'right'
-        };
-      }
-
-    case 'center':
-      {
-        return {
-          textAlign: 'center'
-        };
-      }
-
-    case 'start':
-    default:
-      {
-        return {
-          textAlign: 'left'
-        };
-      }
-  }
-};
-
-const validation = ({
-  valid,
-  theme
-}) => {
-  switch (valid) {
-    case 'valid':
-      {
-        return {
-          boxShadow: `${theme.color.positive} 0 0 0 1px inset !important`
-        };
-      }
-
-    case 'error':
-      {
-        return {
-          boxShadow: `${theme.color.negative} 0 0 0 1px inset !important`
-        };
-      }
-
-    case 'warn':
-      {
-        return {
-          boxShadow: `${theme.color.warning} 0 0 0 1px inset`
-        };
-      }
-
-    case undefined:
-    case null:
-    default:
-      {
-        return {};
-      }
-  }
-};
-
-export const Input = Object.assign(styled( /*#__PURE__*/forwardRef((_ref, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement("input", _extends({}, props, {
-    ref: ref
-  }));
-}))(styles, sizes, alignment, validation, {
-  minHeight: 32
-}), {
-  displayName: 'Input'
-});
-export const Select = Object.assign(styled( /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return /*#__PURE__*/React.createElement("select", _extends({}, props, {
-    ref: ref
-  }));
-}))(styles, sizes, validation, {
-  height: 32,
-  userSelect: 'none',
-  paddingRight: 20,
-  appearance: 'menulist'
-}), {
-  displayName: 'Select'
-});
-export const Textarea = Object.assign(styled( /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
-  return /*#__PURE__*/React.createElement(TextareaAutoResize, _extends({}, props, {
-    ref: ref
-  }));
-}))(styles, sizes, alignment, validation, ({
-  height = 400
-}) => ({
-  overflow: 'visible',
-  maxHeight: height
-})), {
-  displayName: 'Textarea'
-});
-const ButtonStyled = styled( /*#__PURE__*/forwardRef((_ref4, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
-    ref: ref
-  }));
-}))(sizes, validation, {
-  // Custom styling for color widget nested in buttons
-  userSelect: 'none',
-  overflow: 'visible',
-  zIndex: 2,
-  // overrides the default hover from Button
-  '&:hover': {
-    transform: 'none'
-  }
-});
-export const Button = Object.assign( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(ButtonStyled, _extends({}, props, {
-  tertiary: true,
-  small: true,
-  inForm: true,
-  ref: ref
-}))), {
-  displayName: 'Button'
-});

package/dist/modern/html.js

@@ -1,10 +0,0 @@
-import dedent from 'ts-dedent';
-import deprecate from 'util-deprecate';
-const deprecatedHtmlEndpoint = deprecate(() => {}, dedent`
-    The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.
-
-    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point
-  `);
-deprecatedHtmlEndpoint();
-export * from './typography/DocumentFormatting';
-export { components, resetComponents } from './index';