@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

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

@@ -1,192 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import JsonNode from './components/JsonNode';
-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 DATA_TYPES from './types/dataTypes';
-import INPUT_USAGE_TYPES from './types/inputUsageTypes';
-import parse from './utils/parse';
-
-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
-    } = 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') {
-      inputElementFunction = () => inputElement;
-    }
-
-    let textareaElementFunction = textareaElement;
-
-    if (textareaElement && getObjectType(textareaElement) !== 'Function') {
-      textareaElementFunction = () => textareaElement;
-    }
-
-    if (dataType === 'Object' || dataType === 'Array') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "rejt-tree"
-      }, /*#__PURE__*/React.createElement(JsonNode, {
-        data: data,
-        name: rootName,
-        collapsed: false,
-        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";
-JsonTree.propTypes = {
-  data: PropTypes.any.isRequired,
-  rootName: PropTypes.string,
-  isCollapsed: PropTypes.func,
-  onFullyUpdate: PropTypes.func,
-  onDeltaUpdate: PropTypes.func,
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  getStyle: PropTypes.func,
-  addButtonElement: PropTypes.element,
-  cancelButtonElement: PropTypes.element,
-  editButtonElement: PropTypes.element,
-  inputElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  textareaElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  minusMenuElement: PropTypes.element,
-  plusMenuElement: PropTypes.element,
-  beforeRemoveAction: PropTypes.func,
-  beforeAddAction: PropTypes.func,
-  beforeUpdateAction: PropTypes.func,
-  logger: PropTypes.object,
-  onSubmitValueParser: PropTypes.func
-};
-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;
-    }
-  },
-
-  /* eslint-disable no-unused-vars */
-  readOnly: (keyName, data, keyPath, deep, dataType) => false,
-  onFullyUpdate: data => {},
-  onDeltaUpdate: ({
-    type,
-    keyPath,
-    deep,
-    key,
-    newValue,
-    oldValue
-  }) => {},
-  beforeRemoveAction: (key, keyPath, deep, oldValue) => new Promise(resolve => resolve()),
-  beforeAddAction: (key, keyPath, deep, newValue) => new Promise(resolve => resolve()),
-  beforeUpdateAction: (key, keyPath, deep, oldValue, newValue) => new Promise(resolve => resolve()),
-  logger: {
-    error: () => {}
-  },
-  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) => parse(rawValue),
-  inputElement: (usage, keyPath, deep, keyName, data, dataType) => /*#__PURE__*/React.createElement("input", null),
-  textareaElement: (usage, keyPath, deep, keyName, data, dataType) => /*#__PURE__*/React.createElement("textarea", null),
-
-  /* eslint-enable */
-  fallback: null
-};
-export { JsonTree };
-export { getObjectType };
-export { ADD_DELTA_TYPE };
-export { REMOVE_DELTA_TYPE };
-export { UPDATE_DELTA_TYPE };
-export { DATA_TYPES };
-export { INPUT_USAGE_TYPES };

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

@@ -1,24 +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 default {
-  ERROR,
-  OBJECT,
-  ARRAY,
-  STRING,
-  NUMBER,
-  BOOLEAN,
-  DATE,
-  NULL,
-  UNDEFINED,
-  FUNCTION,
-  SYMBOL
-};

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

@@ -1,6 +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 };
-export { REMOVE_DELTA_TYPE };
-export { UPDATE_DELTA_TYPE };

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

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

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

@@ -1,28 +0,0 @@
-/**
- * Get Object type.
- * @param obj {*} object to get type
- * @returns {*}
- */
-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
- */
-
-
-function isComponentWillChange(oldValue, newValue) {
-  const oldType = getObjectType(oldValue);
-  const newType = getObjectType(newValue);
-  return (oldType === 'Function' || newType === 'Function') && newType !== oldType;
-}
-
-export { getObjectType };
-export { isComponentWillChange };

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

@@ -1,21 +0,0 @@
-/**
- * Parse.
- * @param string {String} string to parse
- * @returns {*}
- */
-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;
-}
-
-export default parse;

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

@@ -1,62 +0,0 @@
-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: {}
-};
-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: {}
-};
-const value = {
-  minus: {
-    color: 'red'
-  },
-  editForm: {},
-  value: {
-    color: '#7bba3d'
-  },
-  li: {
-    minHeight: '22px',
-    lineHeight: '22px',
-    outline: '0px'
-  },
-  name: {
-    color: '#2287CD'
-  }
-};
-export { object };
-export { array };
-export { value };

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

@@ -1,39 +0,0 @@
-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, ["label", "children"]);
-
-  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
-});