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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

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

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

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

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