feat: add new mui formik color picker component

src/components/index.js

@@ -84,6 +84,7 @@ export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow} from './mui/table/extr
 export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'
 export {default as MuiFormikCheckboxGroup} from './mui/formik-inputs/mui-formik-checkbox-group'
 export {default as MuiFormikCheckbox} from './mui/formik-inputs/mui-formik-checkbox'
+export {default as MuiFormikColorInput} from './mui/formik-inputs/mui-formik-color-input'
 export {default as MuiFormikDatepicker} from './mui/formik-inputs/mui-formik-datepicker'
 export {default as MuiFormikDiscountField} from './mui/formik-inputs/mui-formik-discountfield'
 export {default as MuiFormikDropdownCheckbox} from './mui/formik-inputs/mui-formik-dropdown-checkbox'

src/components/mui/formik-inputs/mui-formik-async-select.js

@@ -20,7 +20,15 @@ import {
 } from "@mui/material";
 import { useField } from "formik";
 import { DEBOUNCE_WAIT_250 } from "../../../utils/constants";
+import PropTypes from "prop-types";
 
+/**
+ * Async Autocomplete with two modes:
+ * - Remote (default): fetches options from API on each user input (debounced).
+ * - Local (localFilter=true): fetches once on mount and filters options client-side.
+ * Note: localFilter mode assumes stable queryParams (set once on mount).
+ * If queryParams need to change, remount the component instead.
+ */
 const MuiFormikAsyncAutocomplete = ({
   name,
   queryFunction,
@@ -31,7 +39,8 @@ const MuiFormikAsyncAutocomplete = ({
   formatOption = (item) => ({ value: item.id.toString(), label: item.name }),
   formatSelectedValue = null,
   queryParams = [],
-  isMulti = false
+  isMulti = false,
+  localFilter = false
 }) => {
   const [field, meta, helpers] = useField(name);
   const [options, setOptions] = useState([]);
@@ -58,7 +67,7 @@ const MuiFormikAsyncAutocomplete = ({
   };
 
   useEffect(() => {
-    if (searchTerm) {
+    if (!localFilter && searchTerm) {
       const delayDebounce = setTimeout(() => {
         fetchOptions(searchTerm);
       }, DEBOUNCE_WAIT_250);
@@ -99,7 +108,16 @@ const MuiFormikAsyncAutocomplete = ({
       fullWidth
       getOptionLabel={(option) => option.label || ""}
       isOptionEqualToValue={(option, value) => option.value === value.value}
-      onInputChange={(e, newInput) => setSearchTerm(newInput)}
+      onInputChange={!localFilter ? (e, newInput) => setSearchTerm(newInput) : undefined}
+      filterOptions={
+        // only apply filterOptions for "local" search
+        localFilter
+          ? (options, { inputValue }) =>
+            options.filter((opt) =>
+              opt.label.toLowerCase().includes(inputValue.toLowerCase())
+            )
+          : undefined
+      }
       renderInput={(params) => (
         <TextField
           {...params}
@@ -137,4 +155,12 @@ const MuiFormikAsyncAutocomplete = ({
   );
 };
 
+MuiFormikAsyncAutocomplete.propTypes = {
+  name: PropTypes.string.isRequired,
+  queryFunction: PropTypes.func.isRequired,
+  formatOption: PropTypes.func,
+  queryParams: PropTypes.array,
+  localFilter: PropTypes.bool,
+};
+
 export default MuiFormikAsyncAutocomplete;

src/components/mui/formik-inputs/mui-formik-color-input.js

@@ -0,0 +1,56 @@
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { TextField } from "@mui/material";
+import { useField } from "formik";
+import { DEBOUNCE_WAIT_150 } from "../../../utils/constants";
+
+const MuiFormikColorInput = ({ name, ...rest }) => {
+  const [field, meta, helpers] = useField(name);
+  const [localValue, setLocalValue] = useState(field.value || "#000000");
+  const debounceRef = useRef(null);
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setLocalValue(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      helpers.setValue(value);
+      debounceRef.current = null;
+    }, DEBOUNCE_WAIT_150);
+  };
+
+  const handleBlur = (e) => {
+    field.onBlur(e);
+    helpers.setTouched(true);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+      helpers.setValue(localValue);
+    }
+  };
+
+  return (
+    <TextField
+      type="color"
+      name={field.name}
+      value={localValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      error={meta.touched && Boolean(meta.error)}
+      helperText={meta.touched && meta.error}
+      fullWidth
+      sx={{
+        "& input[type='color']::-webkit-color-swatch-wrapper": {
+          padding: "2px"
+        }
+      }}
+      {...rest}
+    />
+  );
+};
+
+MuiFormikColorInput.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default MuiFormikColorInput;

src/utils/constants.js

@@ -6,6 +6,7 @@ export const ZERO_INT = 0;
 
 export const CODE_200 = 200;
 
+export const DEBOUNCE_WAIT_150 = 150;
 export const DEBOUNCE_WAIT_250 = 250;
 export const DEBOUNCE_WAIT = 500;
 

webpack.common.js

@@ -107,6 +107,7 @@ module.exports = {
         'components/mui/formik-inputs/async-select': './src/components/mui/formik-inputs/mui-formik-async-select.js',
         'components/mui/formik-inputs/checkbox-group': './src/components/mui/formik-inputs/mui-formik-checkbox-group.js',
         'components/mui/formik-inputs/checkbox': './src/components/mui/formik-inputs/mui-formik-checkbox.js',
+        'components/mui/formik-inputs/color-input': './src/components/mui/formik-inputs/mui-formik-color-input.js',
         'components/mui/formik-inputs/datepicker': './src/components/mui/formik-inputs/mui-formik-datepicker.js',
         'components/mui/formik-inputs/discount-field': './src/components/mui/formik-inputs/mui-formik-discountfield.js',
         'components/mui/formik-inputs/dropdown-checkbox': './src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js',