@fuf-stack/megapixels 0.0.0 → 0.1.0

package/dist/chunk-XMMMIB2C.cjs

@@ -0,0 +1,620 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Filter/Filter.tsx
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _Form = require('@fuf-stack/uniform/Form'); var _Form2 = _interopRequireDefault(_Form);
+
+// src/Filter/hooks/useFilterValidation.ts
+var _react = require('react');
+var _veto = require('@fuf-stack/veto');
+var useFilterValidation = (filters2, withSearch) => {
+  return _react.useMemo.call(void 0, () => {
+    let validationObject = {};
+    let filterValidation = {};
+    filters2.forEach((f) => {
+      filterValidation = __spreadProps(__spreadValues({}, filterValidation), {
+        [f.name]: f.validation(f.config)
+      });
+    });
+    validationObject = __spreadValues({
+      filter: _veto.stringToJSON.call(void 0, ).pipe(_veto.object.call(void 0, filterValidation)).or(_veto.object.call(void 0, filterValidation)).optional()
+    }, withSearch ? { search: _veto.string.call(void 0, { min: 0 }).nullable().optional() } : {});
+    return _veto.veto.call(void 0, validationObject);
+  }, [filters2, withSearch]);
+};
+
+// src/Filter/Subcomponents/ActiveFilters.tsx
+var _Label = require('@fuf-stack/pixels/Label'); var _Label2 = _interopRequireDefault(_Label);
+
+// src/Filter/Subcomponents/FiltersContext.tsx
+
+
+
+
+
+
+
+
+
+var _hooks = require('@fuf-stack/uniform/hooks');
+var _jsxruntime = require('react/jsx-runtime');
+var FiltersContext = _react.createContext.call(void 0, 
+  void 0
+);
+var FiltersContextProvider = ({
+  children,
+  config: config3
+}) => {
+  const {
+    formState,
+    getFieldState,
+    setValue,
+    triggerSubmit,
+    unregister,
+    watch
+  } = _hooks.useFormContext.call(void 0, );
+  const [currentModalFilter, setCurrentModalFilter] = _react.useState.call(void 0, null);
+  const filterValue = watch("filter", {});
+  const getFilterFormFieldName = _react.useCallback.call(void 0, (name) => {
+    return `filter.${name}`;
+  }, []);
+  const getFilterValueByName = _react.useCallback.call(void 0, 
+    (name) => {
+      return filterValue[name];
+    },
+    [filterValue]
+  );
+  const showFilterModal = _react.useCallback.call(void 0, 
+    (name) => {
+      const prev = getFilterValueByName(name);
+      setCurrentModalFilter({
+        name,
+        hadValue: typeof prev !== "undefined",
+        previousValue: prev
+      });
+    },
+    [getFilterValueByName]
+  );
+  const closeFilterModal = _react.useCallback.call(void 0, () => {
+    if (currentModalFilter == null ? void 0 : currentModalFilter.name) {
+      const fieldName = getFilterFormFieldName(currentModalFilter.name);
+      if (currentModalFilter.hadValue) {
+        setValue(fieldName, currentModalFilter.previousValue);
+      } else {
+        unregister(fieldName);
+      }
+    }
+    setCurrentModalFilter(null);
+  }, [getFilterFormFieldName, currentModalFilter, setValue, unregister]);
+  const lastSubmitCountRef = _react.useRef.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    if (formState.submitCount !== lastSubmitCountRef.current && formState.isSubmitSuccessful) {
+      setCurrentModalFilter(null);
+    }
+    lastSubmitCountRef.current = formState.submitCount;
+  }, [
+    formState.submitCount,
+    formState.isSubmitSuccessful,
+    setCurrentModalFilter
+  ]);
+  const activeFilters = _react.useMemo.call(void 0, () => {
+    return config3.filter((f) => {
+      return Object.hasOwn(filterValue || {}, f.name);
+    }).map((f) => {
+      return f.name;
+    });
+  }, [config3, filterValue]);
+  const unusedFilters = _react.useMemo.call(void 0, () => {
+    return config3.filter((f) => {
+      return !Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
+    }).map((f) => {
+      return f.name;
+    });
+  }, [config3, filterValue]);
+  const getFilterInstanceByName = _react.useCallback.call(void 0, 
+    (name) => {
+      return config3.find((f) => {
+        return f.name === name;
+      });
+    },
+    [config3]
+  );
+  const addFilter = _react.useCallback.call(void 0, 
+    (name) => {
+      const inst = getFilterInstanceByName(name);
+      showFilterModal(name);
+      setValue(getFilterFormFieldName(name), inst.defaultValue);
+    },
+    [
+      getFilterFormFieldName,
+      getFilterInstanceByName,
+      setValue,
+      showFilterModal
+    ]
+  );
+  const removeFilter = _react.useCallback.call(void 0, 
+    (name) => {
+      unregister(getFilterFormFieldName(name));
+      if ((currentModalFilter == null ? void 0 : currentModalFilter.name) === name) {
+        setCurrentModalFilter(null);
+      }
+      triggerSubmit();
+    },
+    [
+      getFilterFormFieldName,
+      currentModalFilter,
+      setCurrentModalFilter,
+      triggerSubmit,
+      unregister
+    ]
+  );
+  const hasError = _react.useCallback.call(void 0, 
+    (name) => {
+      return getFieldState(getFilterFormFieldName(name)).invalid;
+    },
+    [getFieldState, getFilterFormFieldName]
+  );
+  const contextValue = _react.useMemo.call(void 0, () => {
+    return {
+      activeFilters,
+      addFilter,
+      closeFilterModal,
+      getFilterFormFieldName,
+      getFilterValueByName,
+      getFilterInstanceByName,
+      hasError,
+      modalFilterName: currentModalFilter == null ? void 0 : currentModalFilter.name,
+      removeFilter,
+      showFilterModal,
+      unusedFilters
+    };
+  }, [
+    activeFilters,
+    addFilter,
+    closeFilterModal,
+    getFilterFormFieldName,
+    getFilterValueByName,
+    getFilterInstanceByName,
+    hasError,
+    currentModalFilter,
+    removeFilter,
+    showFilterModal,
+    unusedFilters
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FiltersContext.Provider, { value: contextValue, children });
+};
+var useFilters = () => {
+  const ctx = _react.useContext.call(void 0, FiltersContext);
+  if (!ctx) {
+    throw new Error("useFilters must be used within FiltersContextProvider");
+  }
+  return ctx;
+};
+
+// src/Filter/Subcomponents/ActiveFilters.tsx
+
+var ActiveFilters = () => {
+  const {
+    activeFilters,
+    getFilterValueByName,
+    getFilterInstanceByName,
+    hasError,
+    removeFilter,
+    showFilterModal
+  } = useFilters();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: activeFilters.map((name) => {
+    const instance = getFilterInstanceByName(name);
+    const value = getFilterValueByName(name);
+    const DisplayComponent = instance.components.Display;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        "aria-label": `Open ${name} filter`,
+        type: "button",
+        onClick: () => {
+          return void showFilterModal(name);
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _Label2.default,
+          {
+            className: "dark:text-foreground h-8 cursor-pointer",
+            color: hasError(name) ? "danger" : "primary",
+            variant: "flat",
+            onClose: () => {
+              removeFilter(name);
+            },
+            children: [
+              instance.icon,
+              DisplayComponent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayComponent, { config: instance.config, value }) : null
+            ]
+          }
+        )
+      },
+      name
+    );
+  }) });
+};
+var ActiveFilters_default = ActiveFilters;
+
+// src/Filter/Subcomponents/AddFilterMenu.tsx
+var _fa6 = require('react-icons/fa6');
+
+var _Menu = require('@fuf-stack/pixels/Menu'); var _Menu2 = _interopRequireDefault(_Menu);
+
+var AddFilterMenu = ({ className = void 0 }) => {
+  const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();
+  const menuItems = unusedFilters.map((name) => {
+    var _a;
+    const instance = getFilterInstanceByName(name);
+    const config3 = instance.config;
+    const label = (_a = config3 == null ? void 0 : config3.text) != null ? _a : name;
+    return {
+      key: name,
+      icon: instance.icon,
+      label,
+      onClick: () => {
+        addFilter(name);
+      }
+    };
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Menu2.default,
+    {
+      className: _pixelutils.cn.call(void 0, className),
+      isDisabled: !menuItems.length,
+      items: menuItems,
+      placement: "bottom-start",
+      triggerButtonProps: {
+        "aria-label": "Add Filter",
+        size: "sm",
+        variant: "bordered"
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaSliders, {}),
+        "Filter"
+      ]
+    }
+  );
+};
+var AddFilterMenu_default = AddFilterMenu;
+
+// src/Filter/Subcomponents/FilterModal.tsx
+
+var _pi = require('react-icons/pi');
+var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
+var _Modal = require('@fuf-stack/pixels/Modal'); var _Modal2 = _interopRequireDefault(_Modal);
+var _SubmitButton = require('@fuf-stack/uniform/SubmitButton'); var _SubmitButton2 = _interopRequireDefault(_SubmitButton);
+
+var FilterModal = () => {
+  var _a, _b;
+  const {
+    closeFilterModal,
+    getFilterFormFieldName,
+    getFilterInstanceByName,
+    modalFilterName,
+    removeFilter
+  } = useFilters();
+  if (!modalFilterName) {
+    return null;
+  }
+  const instance = getFilterInstanceByName(modalFilterName);
+  const config3 = instance.config;
+  const FormComponent = instance.components.Form;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Modal2.default,
+    {
+      isOpen: true,
+      onClose: closeFilterModal,
+      className: {
+        footer: "justify-between",
+        header: "text-default-700 flex items-center gap-3"
+      },
+      footer: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Button2.default,
+          {
+            color: "danger",
+            variant: "flat",
+            onClick: () => {
+              removeFilter(modalFilterName);
+            },
+            children: "Remove"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SubmitButton2.default, { children: "Apply Filter" })
+      ] }),
+      header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        (_a = instance.icon) != null ? _a : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pi.PiSlidersHorizontalBold, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: `${(_b = config3 == null ? void 0 : config3.text) != null ? _b : modalFilterName} Filter` })
+      ] }),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Suspense, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormComponent,
+        {
+          config: config3,
+          fieldName: getFilterFormFieldName(modalFilterName)
+        }
+      ) })
+    }
+  );
+};
+var FilterModal_default = FilterModal;
+
+// src/Filter/Subcomponents/SearchInput.tsx
+
+var _fa = require('react-icons/fa');
+var _pixelmotion = require('@fuf-stack/pixel-motion');
+
+
+
+var _Input = require('@fuf-stack/uniform/Input'); var _Input2 = _interopRequireDefault(_Input);
+
+
+var SearchInput = ({ className = void 0, config: config3 }) => {
+  var _a;
+  const { formState, setFocus, triggerSubmit } = _hooks.useFormContext.call(void 0, );
+  const isInitiallyVisible = !!((_a = formState == null ? void 0 : formState.defaultValues) == null ? void 0 : _a.search);
+  const [isVisible, setIsVisible] = _react.useState.call(void 0, isInitiallyVisible);
+  const placeholder = typeof config3 === "object" ? config3.placeholder : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _pixelutils.cn.call(void 0, "flex items-center", className), children: [
+    !isVisible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Button2.default,
+      {
+        "aria-label": "Show search input",
+        icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaSearch, {}),
+        size: "sm",
+        variant: "bordered",
+        onClick: () => {
+          setIsVisible(true);
+        }
+      }
+    ),
+    isVisible ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _pixelmotion.motion.div,
+      {
+        animate: { opacity: 1 },
+        className: "flex w-72 gap-2",
+        initial: { opacity: 0.5 },
+        onAnimationComplete: () => {
+          if (!isInitiallyVisible) {
+            setFocus("search");
+          }
+        },
+        transition: {
+          // if the input was not initially visible, animate in
+          duration: isInitiallyVisible ? 0 : 0.3,
+          ease: "circOut"
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Input2.default,
+            {
+              clearable: true,
+              debounceDelay: 0,
+              name: "search",
+              placeholder,
+              size: "sm",
+              onClear: () => {
+                triggerSubmit();
+              }
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _SubmitButton2.default,
+            {
+              children: null,
+              color: "primary",
+              icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaSearch, {}),
+              size: "sm"
+            }
+          )
+        ]
+      },
+      "search-input"
+    ) : null
+  ] });
+};
+var SearchInput_default = SearchInput;
+
+// src/Filter/Filter.tsx
+
+var Filter = ({
+  children = void 0,
+  className = void 0,
+  config: config3,
+  formName = "filterComponentForm",
+  onChange,
+  values
+}) => {
+  const handleSubmit = (nextValues) => {
+    onChange(nextValues);
+  };
+  const validation = useFilterValidation(
+    config3.filters,
+    Boolean(config3.search)
+  );
+  const { data: valuesValidated } = validation.validate(values);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Form2.default,
+      {
+        className: _pixelutils.cn.call(void 0, "mb-3 flex flex-wrap gap-3", className),
+        debug: { disable: true },
+        initialValues: valuesValidated != null ? valuesValidated : {},
+        name: formName,
+        onSubmit: handleSubmit,
+        validation,
+        children: [
+          config3.search ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput_default, { config: config3.search }) : null,
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FiltersContextProvider, { config: config3.filters, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActiveFilters_default, {}),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddFilterMenu_default, {}),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterModal_default, {})
+          ] })
+        ]
+      }
+    ),
+    children == null ? void 0 : children(valuesValidated != null ? valuesValidated : {})
+  ] });
+};
+var Filter_default = Filter;
+
+// src/Filter/filters/createFilter.ts
+var createFilter = (definition) => {
+  return ({ name, icon, config: config3 }) => {
+    return {
+      components: definition.components,
+      config: __spreadValues(__spreadValues({}, definition.defaults.config), config3 != null ? config3 : {}),
+      defaultValue: definition.defaults.value,
+      icon,
+      name,
+      validation: definition.validation
+    };
+  };
+};
+var createFilter_default = createFilter;
+
+// src/Filter/filters/boolean/Display.tsx
+
+var Display = ({
+  value,
+  config: { text, textPrefix, textNoWord }
+}) => {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      value ? textPrefix : `${textPrefix} ${textNoWord != null ? textNoWord : "no"}`,
+      " ",
+      text
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: `${text}...` });
+};
+var Display_default = Display;
+
+// src/Filter/filters/boolean/Form.tsx
+var _Switch = require('@fuf-stack/uniform/Switch'); var _Switch2 = _interopRequireDefault(_Switch);
+
+var Form2 = ({
+  fieldName,
+  config: { text, textPrefix }
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Switch2.default, { label: `${textPrefix} ${text}`, name: fieldName });
+};
+var Form_default = Form2;
+
+// src/Filter/filters/boolean/schema.ts
+
+var config = _veto.object.call(void 0, {
+  /** TODO... */
+  text: _veto.string.call(void 0, ),
+  /** TODO... */
+  textPrefix: _veto.string.call(void 0, ).optional(),
+  /** TODO... */
+  textNoWord: _veto.string.call(void 0, ).optional()
+});
+var validate = (_config) => {
+  return _veto.boolean.call(void 0, ).optional();
+};
+
+// src/Filter/filters/boolean/boolean.ts
+var boolean2 = createFilter_default({
+  components: { Display: Display_default, Form: Form_default },
+  defaults: {
+    value: true,
+    config: { text: "Active", textPrefix: "is", textNoWord: "no" }
+  },
+  validation: validate
+});
+
+// src/Filter/filters/checkboxgroup/Display.tsx
+var Display2 = ({
+  value,
+  config: { text, options }
+}) => {
+  if (value && value.length > 0) {
+    const labels = value.map((val) => {
+      var _a, _b;
+      return (_b = (_a = options.find((op) => {
+        return op.value === val;
+      })) == null ? void 0 : _a.label) != null ? _b : val;
+    }).join(", ");
+    return `${text} is ${labels}`;
+  }
+  return `${text} is ...`;
+};
+var Display_default2 = Display2;
+
+// src/Filter/filters/checkboxgroup/Form.tsx
+var _CheckboxGroup = require('@fuf-stack/uniform/CheckboxGroup'); var _CheckboxGroup2 = _interopRequireDefault(_CheckboxGroup);
+
+var Form3 = ({ fieldName, config: config3 }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckboxGroup2.default, { name: fieldName, options: config3.options });
+};
+var Form_default2 = Form3;
+
+// src/Filter/filters/checkboxgroup/schema.ts
+
+var config2 = _veto.object.call(void 0, {
+  /** TODO... */
+  text: _veto.string.call(void 0, ),
+  /** options... */
+  options: _veto.array.call(void 0, _veto.object.call(void 0, { label: _veto.string.call(void 0, ), value: _veto.string.call(void 0, ) }))
+});
+var validate2 = (cfg) => {
+  return _veto.refineArray.call(void 0, _veto.array.call(void 0, _veto.string.call(void 0, )).optional())({
+    unique: true,
+    custom: (values, ctx) => {
+      if (!cfg) {
+        return;
+      }
+      values.forEach((value) => {
+        if (!cfg.options.find((option) => {
+          return (option == null ? void 0 : option.value) === value;
+        })) {
+          ctx.addIssue({
+            code: "custom",
+            message: `Invalid value: ${value}`
+          });
+        }
+      });
+    }
+  });
+};
+
+// src/Filter/filters/checkboxgroup/checkboxgroup.ts
+var checkboxgroup = createFilter_default({
+  components: { Display: Display_default2, Form: Form_default2 },
+  defaults: { value: [], config: { text: "Options", options: [] } },
+  validation: validate2
+});
+
+// src/Filter/index.ts
+var filters = {
+  boolean: boolean2,
+  checkboxgroup
+};
+var Filter_default2 = Filter_default;
+
+
+
+
+
+exports.createFilter_default = createFilter_default; exports.filters = filters; exports.Filter_default = Filter_default2;
+//# sourceMappingURL=chunk-XMMMIB2C.cjs.map