dirk-cfx-react 1.1.9 → 1.1.11

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { InitialFetch, InternalEvent, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, gameToMap, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore, useSettings } from './utils/index.cjs';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.cjs';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps } 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, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, gameToMap, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore, useSettings } from './utils/index.js';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.js';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps } from './providers/index.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -2012,6 +2012,10 @@ function flattenRules(rules, prefix = "") {
   }
   return result;
 }
+async function runRule(rule, value, values) {
+  const result = rule(value, values);
+  return result instanceof Promise ? await result : result;
+}
 function createFormStore(initialValues, validationRules, onSubmit) {
   const flatRules = validationRules ? flattenRules(validationRules) : {};
   const history = [];
@@ -2026,17 +2030,16 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     changedFields: [],
     changedCount: 0,
     onSubmit,
-    submit: () => {
+    submit: async () => {
       const state = get();
-      const isValid = state.validate();
-      if (isValid && state.onSubmit) state.onSubmit(get());
+      const isValid = await state.validate();
+      if (isValid && state.onSubmit) {
+        state.onSubmit(get());
+      }
     },
     resetChangeCount: () => {
       changed.clear();
-      set(() => ({
-        changedFields: [],
-        changedCount: 0
-      }));
+      set({ changedFields: [], changedCount: 0 });
     },
     setInitialValues: (newInitialValues) => set({ initialValues: newInitialValues }),
     setValue: (path, value) => {
@@ -2055,37 +2058,37 @@ function createFormStore(initialValues, validationRules, onSubmit) {
         changedCount: changed.size
       });
       const rule = flatRules[path];
-      if (rule) {
-        const error2 = rule(value, newValues);
+      if (!rule) return;
+      Promise.resolve(runRule(rule, value, newValues)).then((error2) => {
         if (error2)
-          set((state) => ({ errors: setNested(state.errors, path, error2) }));
-        else set((state) => ({ errors: deleteNested(state.errors, path) }));
-      }
+          set((s) => ({ errors: setNested(s.errors, path, error2) }));
+        else
+          set((s) => ({ errors: deleteNested(s.errors, path) }));
+      });
     },
-    setError: (path, message) => set((state) => ({ errors: setNested(state.errors, path, message) })),
-    clearError: (path) => set((state) => ({ errors: deleteNested(state.errors, path) })),
-    validateField: (path) => {
+    setError: (path, message) => set((s) => ({ errors: setNested(s.errors, path, message) })),
+    clearError: (path) => set((s) => ({ errors: deleteNested(s.errors, path) })),
+    validateField: async (path) => {
       const state = get();
       const rule = flatRules[path];
       if (!rule) return true;
       const value = getNested(state.values, path);
-      const error2 = rule(value, state.values);
+      const error2 = await runRule(rule, value, state.values);
       if (error2) {
-        set((state2) => ({ errors: setNested(state2.errors, path, error2) }));
+        set((s) => ({ errors: setNested(s.errors, path, error2) }));
         return false;
-      } else {
-        set((state2) => ({ errors: deleteNested(state2.errors, path) }));
-        return true;
       }
+      set((s) => ({ errors: deleteNested(s.errors, path) }));
+      return true;
     },
-    validate: () => {
+    validate: async () => {
       const state = get();
       let isValid = true;
       let newErrors = {};
       for (const path in flatRules) {
         const rule = flatRules[path];
         const value = getNested(state.values, path);
-        const error2 = rule(value, state.values);
+        const error2 = await runRule(rule, value, state.values);
         if (error2) {
           isValid = false;
           newErrors = setNested(newErrors, path, error2);
@@ -2108,15 +2111,13 @@ function createFormStore(initialValues, validationRules, onSubmit) {
       });
     },
     back: () => {
-      const state = get();
-      if (history.length === 0) return;
+      if (!history.length) return;
       const prev = history.pop();
-      future.push(state.values);
+      future.push(get().values);
       changed.clear();
-      const current = prev;
       const initial = get().initialValues;
-      for (const key in current) {
-        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+      for (const key in prev) {
+        if (JSON.stringify(prev[key]) !== JSON.stringify(initial[key]))
           changed.add(key);
       }
       set({
@@ -2128,15 +2129,13 @@ function createFormStore(initialValues, validationRules, onSubmit) {
       });
     },
     forward: () => {
-      const state = get();
-      if (future.length === 0) return;
+      if (!future.length) return;
       const next = future.pop();
-      history.push(state.values);
+      history.push(get().values);
       changed.clear();
-      const current = next;
       const initial = get().initialValues;
-      for (const key in current) {
-        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+      for (const key in next) {
+        if (JSON.stringify(next[key]) !== JSON.stringify(initial[key]))
           changed.add(key);
       }
       set({
@@ -2156,12 +2155,16 @@ function FormProvider({
   onSubmit,
   children
 }) {
-  const storeRef = useRef(createFormStore(initialValues, validate, onSubmit));
+  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>");
+  if (!store) {
+    throw new Error("useForm must be used inside <FormProvider>");
+  }
   return useStore(store);
 }
 function useTornEdges() {
@@ -2238,6 +2241,20 @@ var error = {
   fontSize: "var(--mantine-font-size-xs)",
   fontFamily: "Akrobat Regular"
 };
+var description = {
+  fontSize: "var(--mantine-font-size-xs)"
+};
+var genericInputStyles = {
+  styles: {
+    label,
+    error,
+    description,
+    input: {
+      backgroundColor: "rgba(76, 76, 76, 0.3)",
+      minHeight: "4vh"
+    }
+  }
+};
 var theme = createTheme({
   primaryColor: "dirk",
   primaryShade: 9,
@@ -2291,27 +2308,14 @@ var theme = createTheme({
         }
       }
     },
-    Textarea: {
-      styles: {
-        label,
-        error
-      }
-    },
-    Button: {
-      styles: {
-        root: {
-          fontSize: "var(--mantine-font-size-xs)"
-        }
-      }
-    },
-    Select: {
-      styles: {
-        label,
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
+    Input: genericInputStyles,
+    TextInput: genericInputStyles,
+    NumberInput: genericInputStyles,
+    Select: genericInputStyles,
+    MultiSelect: genericInputStyles,
+    Textarea: genericInputStyles,
+    ColorInput: genericInputStyles,
+    DateInput: genericInputStyles,
     Pill: {
       styles: (theme2) => ({
         root: {
@@ -2323,52 +2327,12 @@ var theme = createTheme({
           textTransform: "uppercase",
           letterSpacing: "0.05em",
           fontFamily: "Akrobat Bold",
-          fontSize: theme2.fontSizes.xs,
+          fontSize: "1.25vh",
           borderRadius: theme2.defaultRadius,
-          padding: `${theme2.spacing.xs} ${theme2.spacing.sm}`
+          paddingBottom: "0.5vh",
+          paddingTop: "0.5vh"
         }
       })
-    },
-    Input: {
-      styles: {
-        label,
-        error,
-        input: {
-          padding: "var(--mantine-spacing-sm)",
-          backgroundColor: "rgba(76, 76, 76, 0.3)"
-        }
-      }
-    },
-    ColorInput: {
-      styles: {
-        label,
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
-    TextInput: {
-      styles: {
-        label,
-        wrapper: {},
-        section: {
-          marginRight: "0.2vh"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
-    NumberInput: {
-      styles: {
-        label,
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        },
-        section: {
-          pointerEvents: "all"
-        }
-      }
     }
   },
   colors: {