@fuf-stack/megapixels 0.0.1 → 0.2.0

package/dist/chunk-3ZL7ZLSU.js

@@ -0,0 +1,709 @@
+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
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import Form from "@fuf-stack/uniform/Form";
+
+// src/Filter/hooks/useFilterValidation.ts
+import { useMemo } from "react";
+import { object, string, stringToJSON, veto } from "@fuf-stack/veto";
+var useFilterValidation = (filters2, withSearch) => {
+  return useMemo(() => {
+    let validationObject = {};
+    let filterValidation = {};
+    filters2.forEach((f) => {
+      filterValidation = __spreadProps(__spreadValues({}, filterValidation), {
+        [f.name]: f.validation(f.config)
+      });
+    });
+    validationObject = __spreadValues({
+      filter: stringToJSON().pipe(object(filterValidation)).or(object(filterValidation)).optional()
+    }, withSearch ? { search: string({ min: 0 }).nullable().optional() } : {});
+    return veto(validationObject);
+  }, [filters2, withSearch]);
+};
+
+// src/Filter/Subcomponents/ActiveFilters.tsx
+import Label from "@fuf-stack/pixels/Label";
+
+// src/Filter/Subcomponents/FiltersContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import { useFormContext } from "@fuf-stack/uniform/hooks";
+import { jsx } from "react/jsx-runtime";
+var FiltersContext = createContext(
+  void 0
+);
+var FiltersContextProvider = ({
+  children,
+  config: config3
+}) => {
+  const {
+    formState,
+    getFieldState,
+    setValue,
+    triggerSubmit,
+    unregister,
+    watch
+  } = useFormContext();
+  const [currentModalFilter, setCurrentModalFilter] = useState(null);
+  const filterValue = watch("filter", {});
+  const getFilterFormFieldName = useCallback((name) => {
+    return `filter.${name}`;
+  }, []);
+  const getFilterValueByName = useCallback(
+    (name) => {
+      return filterValue[name];
+    },
+    [filterValue]
+  );
+  const showFilterModal = useCallback(
+    (name) => {
+      const prev = getFilterValueByName(name);
+      setCurrentModalFilter({
+        name,
+        hadValue: typeof prev !== "undefined",
+        previousValue: prev
+      });
+    },
+    [getFilterValueByName]
+  );
+  const closeFilterModal = useCallback(() => {
+    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 = useRef(0);
+  useEffect(() => {
+    if (formState.submitCount !== lastSubmitCountRef.current && formState.isSubmitSuccessful) {
+      setCurrentModalFilter(null);
+    }
+    lastSubmitCountRef.current = formState.submitCount;
+  }, [
+    formState.submitCount,
+    formState.isSubmitSuccessful,
+    setCurrentModalFilter
+  ]);
+  const activeFilters = useMemo2(() => {
+    return config3.filter((f) => {
+      return Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
+    }).map((f) => {
+      return f.name;
+    });
+  }, [config3, filterValue]);
+  const unusedFilters = useMemo2(() => {
+    return config3.filter((f) => {
+      return !Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
+    }).map((f) => {
+      return f.name;
+    });
+  }, [config3, filterValue]);
+  const getFilterInstanceByName = useCallback(
+    (name) => {
+      return config3.find((f) => {
+        return f.name === name;
+      });
+    },
+    [config3]
+  );
+  const addFilter = useCallback(
+    (name) => {
+      const inst = getFilterInstanceByName(name);
+      showFilterModal(name);
+      setValue(getFilterFormFieldName(name), inst.defaultValue);
+    },
+    [
+      getFilterFormFieldName,
+      getFilterInstanceByName,
+      setValue,
+      showFilterModal
+    ]
+  );
+  const removeFilter = useCallback(
+    (name) => {
+      unregister(getFilterFormFieldName(name));
+      if ((currentModalFilter == null ? void 0 : currentModalFilter.name) === name) {
+        setCurrentModalFilter(null);
+      }
+      triggerSubmit();
+    },
+    [
+      getFilterFormFieldName,
+      currentModalFilter,
+      setCurrentModalFilter,
+      triggerSubmit,
+      unregister
+    ]
+  );
+  const hasError = useCallback(
+    (name) => {
+      return getFieldState(getFilterFormFieldName(name)).invalid;
+    },
+    [getFieldState, getFilterFormFieldName]
+  );
+  const contextValue = useMemo2(() => {
+    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__ */ jsx(FiltersContext.Provider, { value: contextValue, children });
+};
+var useFilters = () => {
+  const ctx = useContext(FiltersContext);
+  if (!ctx) {
+    throw new Error("useFilters must be used within FiltersContextProvider");
+  }
+  return ctx;
+};
+
+// src/Filter/Subcomponents/ActiveFilters.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ActiveFilters = ({ className = void 0 }) => {
+  const {
+    activeFilters,
+    getFilterValueByName,
+    getFilterInstanceByName,
+    hasError,
+    removeFilter,
+    showFilterModal
+  } = useFilters();
+  return /* @__PURE__ */ jsx2(Fragment, { children: activeFilters.map((name) => {
+    const instance = getFilterInstanceByName(name);
+    const value = getFilterValueByName(name);
+    const DisplayComponent = instance.components.Display;
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        "aria-label": `Open ${name} filter`,
+        type: "button",
+        onClick: () => {
+          showFilterModal(name);
+        },
+        children: /* @__PURE__ */ jsxs(
+          Label,
+          {
+            className,
+            color: hasError(name) ? "danger" : "primary",
+            variant: "flat",
+            onClose: () => {
+              removeFilter(name);
+            },
+            children: [
+              instance.icon,
+              /* @__PURE__ */ jsx2(DisplayComponent, { config: instance.config, value })
+            ]
+          }
+        )
+      },
+      name
+    );
+  }) });
+};
+var ActiveFilters_default = ActiveFilters;
+
+// src/Filter/Subcomponents/AddFilterMenu.tsx
+import { FaSliders } from "react-icons/fa6";
+import Menu from "@fuf-stack/pixels/Menu";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AddFilterMenu = ({ classNames = {} }) => {
+  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__ */ jsxs2(
+    Menu,
+    {
+      isDisabled: !menuItems.length,
+      items: menuItems,
+      placement: "bottom-start",
+      className: {
+        item: classNames.addFilterMenuItem,
+        trigger: classNames.addFilterMenuButton
+      },
+      triggerButtonProps: {
+        "aria-label": "Add Filter",
+        disableRipple: true,
+        size: "sm",
+        variant: "bordered"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(FaSliders, {}),
+        "Filter"
+      ]
+    }
+  );
+};
+var AddFilterMenu_default = AddFilterMenu;
+
+// src/Filter/Subcomponents/FilterModal.tsx
+import { Suspense } from "react";
+import { PiSlidersHorizontalBold } from "react-icons/pi";
+import Button from "@fuf-stack/pixels/Button";
+import Modal from "@fuf-stack/pixels/Modal";
+import SubmitButton from "@fuf-stack/uniform/SubmitButton";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FilterModal = ({ classNames = {} }) => {
+  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__ */ jsx4(
+    Modal,
+    {
+      isOpen: true,
+      onClose: closeFilterModal,
+      className: {
+        body: classNames.body,
+        footer: classNames.footer,
+        header: classNames.header
+      },
+      footer: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx4(
+          Button,
+          {
+            color: "danger",
+            variant: "flat",
+            onClick: () => {
+              removeFilter(modalFilterName);
+            },
+            children: "Remove"
+          }
+        ),
+        /* @__PURE__ */ jsx4(SubmitButton, { children: "Apply Filter" })
+      ] }),
+      header: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        (_a = instance.icon) != null ? _a : /* @__PURE__ */ jsx4(PiSlidersHorizontalBold, {}),
+        /* @__PURE__ */ jsx4("div", { children: `${(_b = config3 == null ? void 0 : config3.text) != null ? _b : modalFilterName} Filter` })
+      ] }),
+      children: /* @__PURE__ */ jsx4(Suspense, { children: /* @__PURE__ */ jsx4(
+        FormComponent,
+        {
+          config: config3,
+          fieldName: getFilterFormFieldName(modalFilterName)
+        }
+      ) })
+    }
+  );
+};
+var FilterModal_default = FilterModal;
+
+// src/Filter/Subcomponents/SearchInput.tsx
+import { useState as useState2 } from "react";
+import { FaSearch } from "react-icons/fa";
+import { motion } from "@fuf-stack/pixel-motion";
+import Button2 from "@fuf-stack/pixels/Button";
+import { useFormContext as useFormContext2 } from "@fuf-stack/uniform/hooks";
+import Input from "@fuf-stack/uniform/Input";
+import SubmitButton2 from "@fuf-stack/uniform/SubmitButton";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SearchInput = ({ classNames = {}, config: config3 }) => {
+  var _a;
+  const { formState, setFocus, triggerSubmit } = useFormContext2();
+  const isInitiallyVisible = !!((_a = formState == null ? void 0 : formState.defaultValues) == null ? void 0 : _a.search);
+  const [isVisible, setIsVisible] = useState2(isInitiallyVisible);
+  const placeholder = typeof config3 === "object" ? config3.placeholder : void 0;
+  return /* @__PURE__ */ jsxs4("div", { className: classNames.searchWrapper, children: [
+    !isVisible && /* @__PURE__ */ jsx5(
+      Button2,
+      {
+        ariaLabel: "Show search input",
+        className: classNames.searchShowButton,
+        icon: /* @__PURE__ */ jsx5(FaSearch, {}),
+        size: "sm",
+        variant: "bordered",
+        onClick: () => {
+          setIsVisible(true);
+        }
+      }
+    ),
+    isVisible ? /* @__PURE__ */ jsxs4(
+      motion.div,
+      {
+        animate: { opacity: 1 },
+        className: classNames.searchMotionDiv,
+        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__ */ jsx5(
+            Input,
+            {
+              clearable: true,
+              debounceDelay: 0,
+              name: "search",
+              placeholder,
+              size: "sm",
+              className: {
+                input: classNames.searchInput,
+                inputWrapper: classNames.searchInputWrapper
+              },
+              onClear: () => {
+                triggerSubmit();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            SubmitButton2,
+            {
+              ariaLabel: "Trigger search",
+              children: null,
+              className: classNames.searchSubmitButton,
+              color: "primary",
+              icon: /* @__PURE__ */ jsx5(FaSearch, {}),
+              size: "sm"
+            }
+          )
+        ]
+      },
+      "search-input"
+    ) : null
+  ] });
+};
+var SearchInput_default = SearchInput;
+
+// src/Filter/Filter.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var filterVariants = tv({
+  slots: {
+    // outer wrapper
+    base: "",
+    // add filter menu trigger button
+    addFilterMenuButton: "",
+    // add filter menu item
+    addFilterMenuItem: "",
+    // active filter label
+    activeFilterLabel: "dark:text-foreground h-8 cursor-pointer rounded-md",
+    // filter modal body
+    filterModalBody: "",
+    // filter modal header
+    filterModalHeader: "text-default-700 flex items-center gap-3",
+    // filter modal footer
+    filterModalFooter: "justify-between",
+    // form element
+    form: "mb-3 flex flex-wrap gap-3",
+    // search input field
+    searchInput: "",
+    // search input wrapper (inner control)
+    searchInputWrapper: "",
+    // search motion container
+    searchMotionDiv: "flex w-72 gap-2",
+    // search show button
+    searchShowButton: "",
+    // search submit button
+    searchSubmitButton: "",
+    // search wrapper
+    searchWrapper: "flex items-center"
+  }
+});
+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);
+  const variants = filterVariants();
+  const classNames = variantsToClassNames(variants, className, "base");
+  return /* @__PURE__ */ jsxs5("div", { className: classNames.base, children: [
+    /* @__PURE__ */ jsxs5(
+      Form,
+      {
+        className: classNames.form,
+        debug: { disable: true },
+        initialValues: valuesValidated != null ? valuesValidated : {},
+        name: formName,
+        onSubmit: handleSubmit,
+        validation,
+        children: [
+          config3.search ? /* @__PURE__ */ jsx6(
+            SearchInput_default,
+            {
+              config: config3.search,
+              classNames: {
+                searchInput: classNames.searchInput,
+                searchInputWrapper: classNames.searchInputWrapper,
+                searchMotionDiv: classNames.searchMotionDiv,
+                searchShowButton: classNames.searchShowButton,
+                searchSubmitButton: classNames.searchSubmitButton,
+                searchWrapper: classNames.searchWrapper
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs5(FiltersContextProvider, { config: config3.filters, children: [
+            /* @__PURE__ */ jsx6(ActiveFilters_default, { className: classNames.activeFilterLabel }),
+            /* @__PURE__ */ jsx6(
+              AddFilterMenu_default,
+              {
+                classNames: {
+                  addFilterMenuButton: classNames.addFilterMenuButton,
+                  addFilterMenuItem: classNames.addFilterMenuItem
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              FilterModal_default,
+              {
+                classNames: {
+                  body: classNames.filterModalBody,
+                  footer: classNames.filterModalFooter,
+                  header: classNames.filterModalHeader
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    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
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Display = ({
+  value,
+  config: { text, textPrefix, textNoWord }
+}) => {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      value ? textPrefix : `${textPrefix} ${textNoWord != null ? textNoWord : "no"}`,
+      " ",
+      text
+    ] });
+  }
+  return /* @__PURE__ */ jsx7(Fragment3, { children: `${text}...` });
+};
+var Display_default = Display;
+
+// src/Filter/filters/boolean/Form.tsx
+import Switch from "@fuf-stack/uniform/Switch";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Form2 = ({
+  fieldName,
+  config: { text, textPrefix }
+}) => {
+  return /* @__PURE__ */ jsx8(Switch, { label: `${textPrefix} ${text}`, name: fieldName });
+};
+var Form_default = Form2;
+
+// src/Filter/filters/boolean/schema.ts
+import { boolean, object as object2, string as string2 } from "@fuf-stack/veto";
+var config = object2({
+  /**
+   * Human‑readable label used in the UI (e.g. in the chip and modal header).
+   * Examples: "Magical", "Haunted"
+   */
+  text: string2(),
+  /**
+   * Optional word shown before the label when building sentence‑like chips.
+   * Examples: "is" → "is Magical"
+   */
+  textPrefix: string2().optional(),
+  /**
+   * Optional negation word used when a boolean value is false.
+   * Examples: "not" → "is not Magical"
+   */
+  textNoWord: string2().optional()
+});
+var validate = (_config) => {
+  return boolean().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
+import CheckboxGroup from "@fuf-stack/uniform/CheckboxGroup";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Form3 = ({ fieldName, config: config3 }) => {
+  return /* @__PURE__ */ jsx9(CheckboxGroup, { name: fieldName, options: config3.options });
+};
+var Form_default2 = Form3;
+
+// src/Filter/filters/checkboxgroup/schema.ts
+import { array, object as object3, refineArray, string as string3 } from "@fuf-stack/veto";
+var config2 = object3({
+  /**
+   * Human‑readable label used in the UI (e.g. label and modal header).
+   * Example: "Snacks", "Mood"
+   */
+  text: string3(),
+  /**
+   * Options rendered as multiple checkboxes. Each option needs a `label`
+   * (what the user sees) and a `value` (what is written into the form state).
+   */
+  options: array(object3({ label: string3(), value: string3() }))
+});
+var validate2 = (cfg) => {
+  return refineArray(array(string3()).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;
+
+export {
+  createFilter_default,
+  filters,
+  Filter_default2 as Filter_default
+};
+//# sourceMappingURL=chunk-3ZL7ZLSU.js.map