erp-pos-ecommerce-shared 0.2.2 → 0.2.5

package/dist/components.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode } from 'react';
 import { e as IField, b as IButton } from './form.interface-CO6P9ez0.js';
 import { ReactFormExtendedApi, FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
-import { UseMutationResult, UseQueryOptions } from '@tanstack/react-query';
+import { UseMutationResult, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
 import { u as TblProductsImage, q as ITableFilterConfig, i as IFilterSelectOption } from './filters.interface-glhGBJfx.js';
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -375,4 +375,40 @@ interface TablePageProps<TRow> {
 }
 declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, isLoadingExternal, onRowClick, onRowHover, emptyState, table, enableRowSelection, headerBgColor, columnActions, listMenuActions, onSelectionChange, config, CustomHeader, showSearchInput, showBottomPagination, tableHeight, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+interface FormPagePropsBase<TData, TVariables = unknown> {
+    fields: IField[];
+    buttons: IButton[];
+    mutationOptions: UseMutationOptions<TData, Error, TVariables>;
+    typeOfForm: "create" | "edit";
+    dataKey: string;
+    loading: boolean;
+    cardWidth?: number;
+    onSuccess?: (data: TData) => void;
+    setData?: (data: TData) => void;
+    navigateAway?: boolean;
+    showBackButton?: boolean;
+    /**
+     * Callback when the user clicks "Regresar". Provide your router's go-back logic here.
+     * @example React Router: () => navigate(-1)
+     * @example TanStack Router: () => router.history.back()
+     * @example TanStack Start: () => navigate({ to: '..' })
+     */
+    onGoBack?: () => void;
+    /**
+     * Optional icon for the back button. Pass your own icon component so the lib stays router/UI-agnostic.
+     * @example <ArrowLeft /> from lucide-react
+     */
+    backButtonIcon?: ReactNode;
+}
+interface FormPagePropsWithFiles<TData, TVariables = unknown> extends FormPagePropsBase<TData, TVariables> {
+    hasFiles: true;
+    buildVariables?: (values: FormData) => TVariables;
+}
+interface FormPagePropsWithoutFiles<TData, TVariables = unknown> extends FormPagePropsBase<TData, TVariables> {
+    hasFiles?: false;
+    buildVariables?: (values: Record<string, unknown>) => TVariables;
+}
+type FormPageProps<TData, TVariables = unknown> = FormPagePropsWithFiles<TData, TVariables> | FormPagePropsWithoutFiles<TData, TVariables>;
+declare const FormPage: <TData, TVariables = unknown>({ fields, buttons, mutationOptions, buildVariables, typeOfForm, dataKey, loading, cardWidth, hasFiles, onSuccess, setData, navigateAway, showBackButton, onGoBack, backButtonIcon, }: FormPageProps<TData, TVariables>) => React.ReactNode;
+
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, FormPage, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };

package/dist/components.js

@@ -2087,7 +2087,66 @@ var TablePage = ({
     )
   ] });
 };
+var FormPage = ({
+  fields,
+  buttons,
+  mutationOptions,
+  buildVariables,
+  typeOfForm,
+  dataKey,
+  loading,
+  cardWidth,
+  hasFiles,
+  onSuccess,
+  setData,
+  navigateAway = true,
+  showBackButton = true,
+  onGoBack,
+  backButtonIcon
+}) => {
+  const showBack = showBackButton && onGoBack != null;
+  const mutation = useMutation(mutationOptions);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showBack && /* @__PURE__ */ jsx(Flex, { justify: "start", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        leftSection: backButtonIcon,
+        variant: "transparent",
+        mx: 20,
+        mt: 10,
+        onClick: onGoBack,
+        children: [
+          "Regresar a ",
+          dataKey
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Container, { w: cardWidth ?? 500, my: -10, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsxs(Title, { order: 1, my: 10, children: [
+        typeOfForm === "create" ? "Crear" : "Editar",
+        " ",
+        dataKey
+      ] }),
+      /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(
+        FormGenerator,
+        {
+          typeOfForm,
+          name: dataKey,
+          loading,
+          fields,
+          buttons,
+          mutation,
+          buildVariables,
+          hasFiles,
+          onSuccess,
+          setData,
+          navigateAway
+        }
+      ) })
+    ] }) })
+  ] });
+};
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, ImageForm, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, FormPage, ImageForm, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map