feat: abstruct exchange rate input group component.

src/components/Forms/FFormGroup.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { FieldMetaProps, FieldInputProps, useField } from 'formik';
+import {
+  FormGroup as PBFormGroup,
+  Intent,
+  FormGroupProps as PBFormGroupProps,
+} from '@blueprintjs/core';
+
+export interface FormGroupProps extends PBFormGroupProps {
+  name: string;
+  children: React.ReactElement;
+}
+
+/**
+ * Transformes field props to form group.
+ * @param   {Omit<FormGroupProps, "children">} props
+ * @param   {FieldInputProps<any>} field
+ * @param   {FieldMetaProps<any>} meta
+ * @returns {PBFormGroupProps}
+ */
+const fieldToFormGroup = (
+  props: Omit<FormGroupProps, 'children'>,
+  field: FieldInputProps<any>,
+  meta: FieldMetaProps<any>
+): PBFormGroupProps => {
+  const showError = meta.touched && meta.error;
+
+  return {
+    intent: showError ? Intent.DANGER : Intent.NONE,
+    helperText: showError ? meta.error : '',
+    ...props,
+  };
+};
+
+/**
+ * Form group.
+ * @param   {FormGroupProps}
+ * @returns {React.JSX}
+ */
+export function FFormGroup({ children, ...props }: FormGroupProps): JSX.Element {
+  const [field, meta] = useField(props.name);
+
+  return (
+    <PBFormGroup
+      {...fieldToFormGroup(props, field, meta)}
+      children={children}
+    />
+  );
+}

src/components/Forms/FMoneyInputGroup.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { Field, getIn } from 'formik';
+import { CurrencyInput } from './MoneyInputGroup';
+
+const fieldToMoneyInputGroup = ({
+  field: { onBlur: onFieldBlur, ...field },
+  form: { setFieldValue, touched, errors },
+  onBlur,
+  ...props
+}) => {
+  const fieldError = getIn(errors, field.name);
+  const showError = getIn(touched, field.name) && !!fieldError;
+
+  return {
+    intent: showError ? Intent.DANGER : Intent.NONE,
+    onBlurValue:
+      onBlur ??
+      function (e) {
+        onFieldBlur(e ?? field.name);
+      },
+    ...field,
+    onChange: (value) => {
+      setFieldValue(field.name, value);
+    },
+    ...props,
+  };
+};
+
+function FieldToMoneyInputGroup({ ...props }) {
+  return <CurrencyInput {...fieldToMoneyInputGroup(props)} />;
+}
+
+export function FMoneyInputGroup({ ...props }) {
+  return <Field {...props} component={FieldToMoneyInputGroup} />;
+}

src/components/Forms/index.js

@@ -1,2 +1,4 @@
 export * from './FormObserver';
-export * from './FormikObserver';
+export * from './FormikObserver';
+export * from './FMoneyInputGroup'
+export * from './FFormGroup'