dirk-cfx-react 1.0.38 → 1.0.41

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { InitialFetch, InternalEvent, SkillSettings, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useProfanityStore } from './utils/index.cjs';
-export { TornEdgeSVGFilter, useNuiEvent, useTornEdges } from './hooks/index.cjs';
+export { FormProvider, FormState, TornEdgeSVGFilter, ValidationRules, createFormStore, useForm, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.cjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SkillSettings, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useProfanityStore } from './utils/index.js';
-export { TornEdgeSVGFilter, useNuiEvent, useTornEdges } from './hooks/index.js';
+export { FormProvider, FormState, TornEdgeSVGFilter, ValidationRules, createFormStore, useForm, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -1,6 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme, alpha } from '@mantine/core';
-import { createContext, useRef, useEffect, useMemo, useState, useContext } from 'react';
+import { createContext, useRef, useEffect, useContext, useMemo, useState } from 'react';
+import { create, createStore, useStore } from 'zustand';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/fonts.css';
@@ -10,8 +12,6 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { create, useStore } from 'zustand';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
@@ -235,6 +235,197 @@ var useNuiEvent = (action, handler) => {
     return () => window.removeEventListener("message", eventListener);
   }, [action]);
 };
+function getNested(obj, path) {
+  return path.split(".").reduce((acc, key) => acc ? acc[key] : void 0, obj);
+}
+function setNested(obj, path, value) {
+  const keys = path.split(".");
+  const newObj = { ...obj };
+  let current = newObj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    current[key] = { ...current[key] || {} };
+    current = current[key];
+  }
+  current[keys[keys.length - 1]] = value;
+  return newObj;
+}
+function deleteNested(obj, path) {
+  const keys = path.split(".");
+  const newObj = { ...obj };
+  let current = newObj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!current[key]) return obj;
+    current[key] = { ...current[key] };
+    current = current[key];
+  }
+  delete current[keys[keys.length - 1]];
+  return newObj;
+}
+function flattenRules(rules, prefix = "") {
+  const result = {};
+  for (const key in rules) {
+    const fullPath = prefix ? `${prefix}.${key}` : key;
+    const val = rules[key];
+    if (typeof val === "function") result[fullPath] = val;
+    else if (typeof val === "object")
+      Object.assign(result, flattenRules(val, fullPath));
+  }
+  return result;
+}
+function createFormStore(initialValues, validationRules, onSubmit) {
+  const flatRules = validationRules ? flattenRules(validationRules) : {};
+  const history = [];
+  const future = [];
+  const changed = /* @__PURE__ */ new Set();
+  return createStore((set, get) => ({
+    initialValues,
+    values: initialValues,
+    errors: {},
+    canBack: false,
+    canForward: false,
+    changedFields: [],
+    changedCount: 0,
+    onSubmit,
+    submit: () => {
+      const state = get();
+      const isValid = state.validate();
+      if (isValid && state.onSubmit) state.onSubmit(get());
+    },
+    resetChangeCount: () => {
+      changed.clear();
+      set(() => ({
+        changedFields: [],
+        changedCount: 0
+      }));
+    },
+    setInitialValues: (newInitialValues) => set({ initialValues: newInitialValues }),
+    setValue: (path, value) => {
+      const currentValues = get().values;
+      const newValues = setNested(currentValues, path, value);
+      const oldValue = getNested(get().initialValues, path);
+      history.push(currentValues);
+      future.length = 0;
+      if (value !== oldValue) changed.add(path);
+      else changed.delete(path);
+      set({
+        values: newValues,
+        canBack: history.length > 0,
+        canForward: false,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+      const rule = flatRules[path];
+      if (rule) {
+        const error = rule(value, newValues);
+        if (error)
+          set((state) => ({ errors: setNested(state.errors, path, error) }));
+        else set((state) => ({ errors: deleteNested(state.errors, path) }));
+      }
+    },
+    setError: (path, message) => set((state) => ({ errors: setNested(state.errors, path, message) })),
+    clearError: (path) => set((state) => ({ errors: deleteNested(state.errors, path) })),
+    validateField: (path) => {
+      const state = get();
+      const rule = flatRules[path];
+      if (!rule) return true;
+      const value = getNested(state.values, path);
+      const error = rule(value, state.values);
+      if (error) {
+        set((state2) => ({ errors: setNested(state2.errors, path, error) }));
+        return false;
+      } else {
+        set((state2) => ({ errors: deleteNested(state2.errors, path) }));
+        return true;
+      }
+    },
+    validate: () => {
+      const state = get();
+      let isValid = true;
+      let newErrors = {};
+      for (const path in flatRules) {
+        const rule = flatRules[path];
+        const value = getNested(state.values, path);
+        const error = rule(value, state.values);
+        if (error) {
+          isValid = false;
+          newErrors = setNested(newErrors, path, error);
+        }
+      }
+      set({ errors: newErrors });
+      return isValid;
+    },
+    reset: () => {
+      history.length = 0;
+      future.length = 0;
+      changed.clear();
+      set({
+        values: initialValues,
+        errors: {},
+        canBack: false,
+        canForward: false,
+        changedFields: [],
+        changedCount: 0
+      });
+    },
+    back: () => {
+      const state = get();
+      if (history.length === 0) return;
+      const prev = history.pop();
+      future.push(state.values);
+      changed.clear();
+      const current = prev;
+      const initial = get().initialValues;
+      for (const key in current) {
+        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+          changed.add(key);
+      }
+      set({
+        values: prev,
+        canBack: history.length > 0,
+        canForward: true,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+    },
+    forward: () => {
+      const state = get();
+      if (future.length === 0) return;
+      const next = future.pop();
+      history.push(state.values);
+      changed.clear();
+      const current = next;
+      const initial = get().initialValues;
+      for (const key in current) {
+        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+          changed.add(key);
+      }
+      set({
+        values: next,
+        canBack: true,
+        canForward: future.length > 0,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+    }
+  }));
+}
+var FormContext = createContext(null);
+function FormProvider({
+  initialValues,
+  validate,
+  onSubmit,
+  children
+}) {
+  const storeRef = useRef(createFormStore(initialValues, validate, onSubmit));
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children });
+}
+function useForm() {
+  const store = useContext(FormContext);
+  if (!store) throw new Error("useForm must be used inside a <FormProvider>");
+  return useStore(store);
+}
 async function fetchNui(eventName, data, mockData) {
   const options = {
     method: "post",
@@ -715,7 +906,7 @@ function getLevelFromXP(xp, levelMap, settings) {
   return settings.maxLevel;
 }
 function createSkill(defaultSettings) {
-  const useStore3 = create((set) => ({
+  const useStore4 = create((set) => ({
     settings: defaultSettings,
     levelMap: generateLevelMap(defaultSettings),
     setSettings: (updater) => set((state) => {
@@ -727,7 +918,7 @@ function createSkill(defaultSettings) {
     })
   }));
   const useSkill = (xp) => {
-    const { settings, levelMap } = useStore3();
+    const { settings, levelMap } = useStore4();
     return useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
@@ -749,12 +940,12 @@ function createSkill(defaultSettings) {
   };
   const skill = {
     get settings() {
-      return useStore3.getState().settings;
+      return useStore4.getState().settings;
     },
     setSettings: (updater) => {
-      useStore3.getState().setSettings(updater);
+      useStore4.getState().setSettings(updater);
     },
-    useSettings: () => useStore3((state) => state.settings)
+    useSettings: () => useStore4((state) => state.settings)
   };
   return {
     skill,
@@ -1750,6 +1941,36 @@ function Title(props) {
     }
   );
 }
+var ModalContext = createContext(null);
+function useModal(selector) {
+  const modal = useContext(ModalContext);
+  if (!modal) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return useStore(modal, selector);
+}
+function ModalProvider({ children, defaultPage }) {
+  const storeRef = useRef(
+    create(() => ({
+      active: null
+    }))
+  );
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: storeRef.current, children: [
+    /* @__PURE__ */ jsx(Modal, {}),
+    children
+  ] });
+}
+function useModalActions() {
+  const modal = useContext(ModalContext);
+  if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
+  const showModal = (openModal) => {
+    modal.setState({ active: openModal });
+  };
+  const hideModal = () => {
+    modal.setState({ active: null });
+  };
+  return { showModal, hideModal };
+}
 function Modal() {
   const active = useModal((state) => state.active);
   const { hideModal } = useModalActions();
@@ -1869,37 +2090,7 @@ function Modal() {
     }
   ) });
 }
-var ModalContext = createContext(null);
-function useModal(selector) {
-  const modal = useContext(ModalContext);
-  if (!modal) {
-    throw new Error("useModal must be used within a ModalProvider");
-  }
-  return useStore(modal, selector);
-}
-function ModalProvider({ children, defaultPage }) {
-  const storeRef = useRef(
-    create(() => ({
-      active: null
-    }))
-  );
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: storeRef.current, children: [
-    /* @__PURE__ */ jsx(Modal, {}),
-    children
-  ] });
-}
-function useModalActions() {
-  const modal = useContext(ModalContext);
-  if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
-  const showModal = (openModal) => {
-    modal.setState({ active: openModal });
-  };
-  const hideModal = () => {
-    modal.setState({ active: null });
-  };
-  return { showModal, hideModal };
-}
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map