feat: add blueprint-formik package.

package.json

@@ -31,6 +31,7 @@
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.1",
     "basscss": "^8.0.2",
+    "blueprint-formik": "^0.1.4",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "cross-env": "^7.0.2",

src/components/Forms/BlueprintFormik.js

@@ -0,0 +1,17 @@
+import {
+  FormGroup,
+  InputGroup,
+  NumericInput,
+  Checkbox,
+  RadioGroup,
+  Select,
+} from 'blueprint-formik';
+
+export {
+  FormGroup as FFormGroup,
+  InputGroup as FInputGroup,
+  NumericInput as FNumericInput,
+  Checkbox as FCheckbox,
+  RadioGroup as FRadioGroup,
+  Select as FSelect,
+};

src/components/Forms/FFormGroup.tsx

@@ -1,49 +0,0 @@
-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/FSelect.tsx

@@ -1,85 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  Select as BPSelect,
-  SelectProps as BPSelectProps,
-} from '@blueprintjs/select';
-import { Field, FieldProps, FieldConfig, isFunction } from 'formik';
-import { get } from 'lodash';
-
-interface SelectProps
-  extends Omit<FieldConfig, 'children' | 'as' | 'component'>,
-    BPSelectProps<any> {
-  valueAccessor: string;
-  labelAccessor: string;
-  input: () => JSX.Element;
-}
-
-interface FieldToSelectProps
-  extends Omit<BPSelectProps<any>, 'onItemSelect'>,
-    FieldProps {
-  onItemSelect?: (item: any, event?: React.SyntheticEvent<HTMLElement>) => void;
-  valueAccessor: string;
-  labelAccessor: string;
-  input: (props: { activeItem: any; label: any }) => JSX.Element;
-  children: JSX.Element;
-}
-
-const getAccessor = (accessor: any, activeItem: any) => {
-  return isFunction(accessor)
-    ? accessor(activeItem)
-    : get(activeItem, accessor);
-};
-
-/**
- * Transform field props to select props.
- * @param   {FieldToSelectProps}
- * @returns {BPSelectProps<any> }
- */
-function transformSelectToFieldProps({
-  field: { onBlur: onFieldBlur, ...field },
-  form: { touched, errors, ...form },
-  meta,
-  input,
-  valueAccessor,
-  labelAccessor,
-  ...props
-}: FieldToSelectProps): BPSelectProps<any> {
-  const activeItem = props.items.find(
-    (item) => getAccessor(valueAccessor, item) === field.value
-  );
-  const children = input
-    ? input({
-        activeItem,
-        label: getAccessor(labelAccessor, activeItem),
-      })
-    : props.children;
-
-  return {
-    onItemSelect: (item) => {
-      const value = getAccessor(valueAccessor, item);
-      form.setFieldValue(field.name, value);
-    },
-    activeItem,
-    ...props,
-    children,
-  };
-}
-
-/**
- *
- * @param   {FieldToSelectProps}
- * @returns {JSX.Element}
- */
-function FieldToSelect({ ...props }: FieldToSelectProps): JSX.Element {
-  return <BPSelect {...transformSelectToFieldProps(props)} />;
-}
-
-/**
- * Select binded with formik.
- * @param   {JSX.Element}
- * @returns {SelectProps}
- */
-export function FSelect({ ...props }: SelectProps): JSX.Element {
-  return <Field {...props} component={FieldToSelect} />;
-}

src/components/Forms/index.js

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

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js

@@ -36,9 +36,7 @@ export default function InvoiceFormTopBar() {
             name={'branch_id'}
             branches={branches}
             input={InvoiceBranchSelectButton}
-            popoverProps={{
+            popoverProps={{ minimal: true }}
-              minimal: true,
-            }}
           />
         </FeatureCan>
 
@@ -50,9 +48,7 @@ export default function InvoiceFormTopBar() {
             name={'warehouse_id'}
             warehouses={warehouses}
             input={InvoiceWarehouseSelectButton}
-            popoverProps={{
+            popoverProps={{ minimal: true }}
-              minimal: true,
-            }}
           />
         </FeatureCan>
       </NavbarGroup>