overridable: add dynamicParametrize function

* Added a function to 'dynamically' parametrize a component, based on
values from the context. Currently, this includes the field values
stored in Formik, but we can easily add more values from the React
context as needed.

* The user can implement a function that receives these input values and
returns the override props for a given `Overridable` component. They
need to import the `dynamicParametrize` function from the top level of
this module, as well as the component they want to override.

* `dynamicParametrize` might currently throw an error if used on a
component that's rendered outside of the Formik context

Author: palkerecsenyi

src/lib/utils/fieldComponents.js

@@ -0,0 +1,22 @@
+import { useFormikContext } from "formik";
+import * as React from "react";
+
+export function dynamicParametrize(Component, propsFactory) {
+  const ParametrizedComponent = (props) => {
+    const { values } = useFormikContext();
+    const extraProps = propsFactory({ formValues: values });
+
+    // Store the original component in an attribute
+    if (Component.originalComponent) {
+      Component = Component.originalComponent;
+    }
+
+    // overrideProps override props if there is a name collision
+    const { children, ...attrProps } = { ...props, ...extraProps };
+    return React.createElement(Component, attrProps, children);
+  };
+
+  const name = Component.displayName || Component.name;
+  ParametrizedComponent.displayName = `Parametrized(${name})`;
+  return ParametrizedComponent;
+}

src/lib/utils/index.js

@@ -1,2 +1,3 @@
 export { humanReadableBytes } from "./humanReadableBytes";
 export { dropdownOptionsGenerator } from "./dropdownOptionsGenerator";
+export { dynamicParametrize } from "./fieldComponents";