@catho/quantum-storybook-ui/dist/components/AutoProps/AutoProps.js

A **Design System** is the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards. Over time, these 'systems' are growing in popularity - a very popular one is [Q

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _quantum = require("@catho/quantum");

var _Title = _interopRequireDefault(require("../Title"));

var _Colors = _interopRequireDefault(require("../../ui/Colors"));

var _shared = require("../shared");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  padding: 15px 15px;\n  border: 0;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  white-space: pre;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 3px;\n  display: inline-block;\n  font-size: 85%;\n  margin-top: 0;\n  padding: 2px 5px;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0 0 25px 0;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  padding: 0px 25px 25px 25px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var PropertiesWrapper = _styledComponents["default"].div(_templateObject());

var MainTitle = (0, _styledComponents["default"])(_Title["default"])(_templateObject2());

var CodeBlock = _styledComponents["default"].pre(_templateObject3(), _Colors["default"].grey.light);

var IndentSpan = _styledComponents["default"].span(_templateObject4());

var PropsRow = _styledComponents["default"].tr(_templateObject5());

var PropsData = _styledComponents["default"].td(_templateObject6());

var removeQuotes = function removeQuotes(str) {
  return str.replace(/'/g, '');
};

function changePropValue(obj, path, value) {
  var prop;

  if (!path.length) {
    return obj;
  }

  for (var i = 0, iLen = path.length - 1; i < iLen; i += 1) {
    prop = path[i];
    var candidate = obj[prop];

    if (candidate !== undefined) {
      obj = candidate;
    } else {
      break;
    }
  }

  return value ? obj[path[i]] = value : obj[path[i]];
}

var NotImplementedType = _styledComponents["default"].code(_templateObject7(), _Colors["default"].pink.amaranth);

var AutoProps = /*#__PURE__*/function (_React$Component) {
  _inherits(AutoProps, _React$Component);

  var _super = _createSuper(AutoProps);

  function AutoProps(_props) {
    var _this;

    _classCallCheck(this, AutoProps);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e, props) {
      var _props$type = props.type,
          type = _props$type === void 0 ? 'default' : _props$type;
      var value = props.value || props.checked;
      var parsedValue = {
        number: function number(value) {
          return Number.isNaN(value) ? 0 : Number(value);
        },
        text: function text(value) {
          return value ? String(value) : '';
        },
        checkbox: function checkbox(value) {
          return Boolean(value);
        },
        "default": function _default(value) {
          return value;
        }
      };
      value = parsedValue[type](value);

      if (props.path && props.path.length > 0) {
        var message = Object.assign({}, _this.state[props.path[0]]);
        var paths = props.path.slice(1);
        paths.push(props.name);
        changePropValue(message, paths, value);

        _this.setState({
          message: message
        }, function () {
          _this.props.changeState(_this.state);
        });
      } else {
        _this.setState(_defineProperty({}, props.name, value), function () {
          _this.props.changeState(_defineProperty({}, props.name, value));
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getPropController", function (propPath, propName, propValue, propKey) {
      var propControllers = [{
        type: ['enum'],
        controller: function controller(propPath, propName, _ref) {
          var name = _ref.name,
              value = _ref.value;
          var options = [];
          value.map(function (v, i) {
            var str = removeQuotes(v.value);
            options.push({
              key: i,
              value: str,
              label: str
            });
            return options;
          });
          return /*#__PURE__*/_react["default"].createElement(_quantum.Dropdown, {
            selectedItem: propValue,
            items: options,
            name: propName,
            path: propPath,
            onChange: function onChange(e) {
              return _this.handleChange(e, {
                name: propName,
                value: e.value
              });
            }
          });
        }
      }, {
        type: ['bool'],
        controller: function controller(propPath, propName, _ref2) {
          var name = _ref2.name;
          return /*#__PURE__*/_react["default"].createElement(_quantum.Checkbox, {
            checked: propValue ? propValue : false,
            onChange: function onChange(e) {
              return _this.handleChange(e, {
                name: propName,
                value: e.target.checked
              });
            },
            name: propName,
            path: propPath
          });
        }
      }, {
        type: ['string', 'number'],
        controller: function controller(propPath, propName, _ref3) {
          var name = _ref3.name;
          return /*#__PURE__*/_react["default"].createElement(_quantum.Input, {
            type: name == 'string' ? 'text' : name,
            onChange: function onChange(e) {
              return _this.handleChange(e, {
                name: propName,
                value: e.target.value
              });
            },
            name: propName,
            path: propPath,
            value: propValue
          });
        }
      }, {
        type: ['shape'],
        controller: function controller(propPath, propName, _ref4) {
          var name = _ref4.name,
              value = _ref4.value;
          var component = "{ ";
          Object.entries(value).map(function (_ref5) {
            var _ref6 = _slicedToArray(_ref5, 2),
                name = _ref6[0],
                value = _ref6[1];

            component += "".concat(name, ": ").concat(value.name, ", \n");
          });
          component = component.substring(0, component.length - 2) + " }";
          return _shared.FORBIDDEN_PROPS.includes(propName) ? /*#__PURE__*/_react["default"].createElement(NotImplementedType, null, name) : component;
        }
      }, {
        type: ['default'],
        controller: function controller(propPath, propName, _ref7) {
          var name = _ref7.name,
              value = _ref7.value;
          return /*#__PURE__*/_react["default"].createElement(NotImplementedType, null, name);
        }
      }];
      var componentType = propControllers.find(function (item) {
        return item.type.some(function (t) {
          return t === propKey.name;
        }) ? item.type : item.type == 'default';
      }).controller(propPath, propName, propKey);
      return componentType;
    });

    _defineProperty(_assertThisInitialized(_this), "renderComponentByType", function (propPath, propName, propKey) {
      var _changePropValue = changePropValue(_this.props.state, propPath),
          propValue = _changePropValue[propName];

      return _this.getPropController(propPath, propName, propValue, propKey);
    });

    _defineProperty(_assertThisInitialized(_this), "getPropRowTemplate", function (propPath, propName, propObject, level) {
      var indentation = new Array(3 * propPath.length).join(' ');
      return /*#__PURE__*/_react["default"].createElement(PropsRow, {
        key: "".concat(propName, "=").concat(propObject)
      }, /*#__PURE__*/_react["default"].createElement(PropsData, null, /*#__PURE__*/_react["default"].createElement(IndentSpan, null, indentation, propPath.length > 0 ? "\u2514" : ""), /*#__PURE__*/_react["default"].createElement(CodeBlock, null, propName)), /*#__PURE__*/_react["default"].createElement(PropsData, null, _this.renderComponentByType(propPath, propName, propObject)));
    });

    _defineProperty(_assertThisInitialized(_this), "parseShapes", function (propPath, propName, _ref8) {
      var propType = _ref8.name,
          _ref8$value = _ref8.value,
          value = _ref8$value === void 0 ? null : _ref8$value;
      var propRows = [];

      if (propType == 'shape' && !_shared.FORBIDDEN_PROPS.includes(propName)) {
        var path = Array.from(propPath);
        path.push(propName);
        Object.entries(value).map(function (_ref9) {
          var _ref10 = _slicedToArray(_ref9, 2),
              name = _ref10[0],
              value = _ref10[1];

          propRows.push(_this.getPropRowTemplate(path, name, value));
          propRows.push(_this.parseShapes(path, name, value));
        });
      } else {
        return;
      }

      return propRows;
    });

    _defineProperty(_assertThisInitialized(_this), "generateRows", function (props) {
      var propRows = [];
      Object.entries(props).map(function (_ref11) {
        var _ref12 = _slicedToArray(_ref11, 2),
            name = _ref12[0],
            value = _ref12[1];

        propRows.push(_this.getPropRowTemplate([], name, value.type));
        propRows.push(_this.parseShapes([], name, value.type));
      });
      return propRows;
    });

    var state = _props.state;
    _this.state = state;
    return _this;
  }

  _createClass(AutoProps, [{
    key: "render",
    value: function render() {
      var props = this.props.component.type.__docgenInfo.props;
      var propRows = this.generateRows(props);
      return /*#__PURE__*/_react["default"].createElement(PropertiesWrapper, null, /*#__PURE__*/_react["default"].createElement(MainTitle, {
        as: "h2"
      }, "Properties"), /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", null, propRows.map(function (row) {
        return row;
      }))));
    }
  }]);

  return AutoProps;
}(_react["default"].Component);

AutoProps.propTypes = {
  component: _propTypes["default"].instanceOf(Object).isRequired,
  changeState: _propTypes["default"].func.isRequired
};
var _default2 = AutoProps;
exports["default"] = _default2;