chore: keep prop-types if mode is not production

[montezume]

Summary

@tdeekens made a good write up about the problem here.

TL;DR: It will be easier for our consumers to use ui-kit if they get prop-types warnings during development.

Approach

Use mode wrap from babel-plugin-transform-react-remove-prop-types.

Which transforms our propTypes into

var nonEmptyString = process.env.NODE_ENV !== "production" ? function (props, propName, componentName) {
  var value = props[propName];
  if (typeof value === 'string' && !value) return new Error("Invalid prop '".concat(propName, "' supplied to '").concat(componentName, "'. Expected it to be nonempty string, but it was empty."));
  return null;
} : {};
// more stuff
Headline.propTypes = process.env.NODE_ENV !== "production" ? {
  elementType: PropTypes.oneOf(['h1', 'h2', 'h3']).isRequired,
  children: PropTypes.node.isRequired,
  title: nonEmptyString,
  truncate: PropTypes.bool
} : {};

Why not unsafe-wrap? There's an open issue with using unsafe wrap when you use propTypes from variables, as we do in Text.Headline and (I believe?) some other components.

Another possible approach

Use unsafe-wrap but stop using variables as propTypes. IE, copy paste nonEmptyString into the propType declarations in each other Text components.

This gives the output of

process.env.NODE_ENV !== "production" ? Headline.propTypes = {
  elementType: PropTypes.oneOf(['h1', 'h2', 'h3']).isRequired,
  children: PropTypes.node.isRequired,
  title: function title(props, propName, componentName) {
    var value = props[propName];
    if (typeof value === 'string' && !value) return new Error("Invalid prop '".concat(propName, "' supplied to '").concat(componentName, "'. Expected it to be nonempty string, but it was empty."));
    return null;
  },
  truncate: PropTypes.bool
} : void 0;

If we go with this approach, perhaps we can create a custom linter rule that doesn't allow variables for proptypes? 🤔

TL;DR

The second approach will produce a nicer production bundle, at the expense of having to duplicate custom propTypes, and without some sort of custom linter rule, it would be difficult to explain to developers why their code is breaking when they are using variables as proptypes...

WDYT?

[emmenko]

Can't we do it like in commercetools/merchant-center-application-kit#229?

[montezume]

@emmenko I'm not sure I see the advantage? UI-Kit only exists as a library, not an application. The MC-preset has to have that code because sometimes it's used to build an application, and sometimes a library. UI-Kit only ever builds libraries.

[emmenko]

Of course, I got confused sorry 🙈

[tdeekens]

Thanks a bunch for spreading the fix!