@visiion/forms-library 1.1.6 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Forms/GenericForm.d.ts +1 -0
- package/dist/contexts/MiDtContext.d.ts +5 -10
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +66 -55
- package/dist/index.js +65 -55
- package/package.json +3 -2
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Region, Comuna } from "../utils/Common";
|
|
3
2
|
interface MiDtData {
|
|
4
3
|
allData: {
|
|
@@ -8,14 +7,10 @@ interface MiDtData {
|
|
|
8
7
|
};
|
|
9
8
|
};
|
|
10
9
|
}
|
|
11
|
-
interface
|
|
10
|
+
interface MiDtStore {
|
|
12
11
|
miDtData: MiDtData;
|
|
12
|
+
setMiDtData: (data: MiDtData) => void;
|
|
13
|
+
resetMiDtData: () => void;
|
|
13
14
|
}
|
|
14
|
-
declare const
|
|
15
|
-
export
|
|
16
|
-
children: React.ReactNode;
|
|
17
|
-
regiones?: Region[];
|
|
18
|
-
comunas?: Comuna[];
|
|
19
|
-
}>;
|
|
20
|
-
export declare const useMiDt: () => MiDtContextType;
|
|
21
|
-
export default MiDtContext;
|
|
15
|
+
export declare const useMiDt: import("zustand").UseBoundStore<import("zustand").StoreApi<MiDtStore>>;
|
|
16
|
+
export default useMiDt;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { GenericForm } from "./components/Forms";
|
|
|
2
2
|
export { TextInput, SelectInput, RadioInput, CheckboxInput, TextareaInput, RutInput, AddressInput, Alert, DynamicInput, InputWrapper, StatusScreen, SwornDeclaration, DatePicker, SubtitleInput, } from "./components/Inputs";
|
|
3
3
|
export { NavigationButton, TextInputField, RadioOption, } from "./components/Common";
|
|
4
4
|
export { GoogleMaps } from "./components/Inputs/GoogleMaps";
|
|
5
|
-
export {
|
|
5
|
+
export { useMiDt } from "./contexts/MiDtContext";
|
|
6
6
|
export { Flowbite } from "flowbite-react";
|
|
7
7
|
export type { CustomFlowbiteTheme } from "flowbite-react";
|
|
8
8
|
export type { IFormField, IFormConfig, IStepProps, ResponseOnSearch, NavigationButtonProps, DynamicInputProps, InputWrapperProps, StepperContextType, ValidationRule, CommonValidations, } from "./types";
|
package/dist/index.esm.js
CHANGED
|
@@ -34004,63 +34004,60 @@ _defineProperty(Autocomplete, "defaultProps", {
|
|
|
34004
34004
|
});
|
|
34005
34005
|
_defineProperty(Autocomplete, "contextType", MapContext);
|
|
34006
34006
|
|
|
34007
|
-
|
|
34008
|
-
|
|
34009
|
-
|
|
34010
|
-
|
|
34011
|
-
|
|
34012
|
-
|
|
34013
|
-
|
|
34014
|
-
|
|
34015
|
-
|
|
34016
|
-
|
|
34017
|
-
|
|
34018
|
-
|
|
34019
|
-
|
|
34020
|
-
|
|
34021
|
-
|
|
34022
|
-
|
|
34023
|
-
|
|
34024
|
-
|
|
34025
|
-
|
|
34026
|
-
|
|
34027
|
-
|
|
34028
|
-
|
|
34029
|
-
|
|
34030
|
-
|
|
34031
|
-
|
|
34032
|
-
|
|
34033
|
-
|
|
34007
|
+
const createStoreImpl = (createState) => {
|
|
34008
|
+
let state;
|
|
34009
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
34010
|
+
const setState = (partial, replace) => {
|
|
34011
|
+
const nextState = typeof partial === "function" ? partial(state) : partial;
|
|
34012
|
+
if (!Object.is(nextState, state)) {
|
|
34013
|
+
const previousState = state;
|
|
34014
|
+
state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
|
|
34015
|
+
listeners.forEach((listener) => listener(state, previousState));
|
|
34016
|
+
}
|
|
34017
|
+
};
|
|
34018
|
+
const getState = () => state;
|
|
34019
|
+
const getInitialState = () => initialState;
|
|
34020
|
+
const subscribe = (listener) => {
|
|
34021
|
+
listeners.add(listener);
|
|
34022
|
+
return () => listeners.delete(listener);
|
|
34023
|
+
};
|
|
34024
|
+
const api = { setState, getState, getInitialState, subscribe };
|
|
34025
|
+
const initialState = state = createState(setState, getState, api);
|
|
34026
|
+
return api;
|
|
34027
|
+
};
|
|
34028
|
+
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
|
34029
|
+
|
|
34030
|
+
const identity = (arg) => arg;
|
|
34031
|
+
function useStore(api, selector = identity) {
|
|
34032
|
+
const slice = React__default.useSyncExternalStore(
|
|
34033
|
+
api.subscribe,
|
|
34034
|
+
() => selector(api.getState()),
|
|
34035
|
+
() => selector(api.getInitialState())
|
|
34036
|
+
);
|
|
34037
|
+
React__default.useDebugValue(slice);
|
|
34038
|
+
return slice;
|
|
34039
|
+
}
|
|
34040
|
+
const createImpl = (createState) => {
|
|
34041
|
+
const api = createStore(createState);
|
|
34042
|
+
const useBoundStore = (selector) => useStore(api, selector);
|
|
34043
|
+
Object.assign(useBoundStore, api);
|
|
34044
|
+
return useBoundStore;
|
|
34045
|
+
};
|
|
34046
|
+
const create = (createState) => createState ? createImpl(createState) : createImpl;
|
|
34047
|
+
|
|
34034
34048
|
var defaultMiDtData = {
|
|
34035
34049
|
allData: {
|
|
34036
34050
|
metadata: {
|
|
34037
|
-
Regiones:
|
|
34038
|
-
Comunas:
|
|
34051
|
+
Regiones: [],
|
|
34052
|
+
Comunas: [],
|
|
34039
34053
|
},
|
|
34040
34054
|
},
|
|
34041
34055
|
};
|
|
34042
|
-
var
|
|
34056
|
+
var useMiDt = create(function (set) { return ({
|
|
34043
34057
|
miDtData: defaultMiDtData,
|
|
34044
|
-
});
|
|
34045
|
-
|
|
34046
|
-
|
|
34047
|
-
var miDtData = {
|
|
34048
|
-
allData: {
|
|
34049
|
-
metadata: {
|
|
34050
|
-
Regiones: regiones || defaultRegiones,
|
|
34051
|
-
Comunas: comunas || defaultComunas,
|
|
34052
|
-
},
|
|
34053
|
-
},
|
|
34054
|
-
};
|
|
34055
|
-
return (jsx(MiDtContext.Provider, { value: { miDtData: miDtData }, children: children }));
|
|
34056
|
-
};
|
|
34057
|
-
var useMiDt = function () {
|
|
34058
|
-
var context = useContext(MiDtContext);
|
|
34059
|
-
if (!context) {
|
|
34060
|
-
throw new Error("useMiDt must be used within a MiDtProvider");
|
|
34061
|
-
}
|
|
34062
|
-
return context;
|
|
34063
|
-
};
|
|
34058
|
+
setMiDtData: function (data) { return set({ miDtData: data }); },
|
|
34059
|
+
resetMiDtData: function () { return set({ miDtData: defaultMiDtData }); },
|
|
34060
|
+
}); });
|
|
34064
34061
|
|
|
34065
34062
|
var Common = /** @class */ (function () {
|
|
34066
34063
|
function Common() {
|
|
@@ -34112,7 +34109,7 @@ var center = {
|
|
|
34112
34109
|
};
|
|
34113
34110
|
var AddressInput = function (_a) {
|
|
34114
34111
|
var field = _a.field, value = _a.value, onChange = _a.onChange, error = _a.error, onSearch = _a.onSearch, _b = _a.showMap, showMap = _b === void 0 ? true : _b, _c = _a.mapHeight, mapHeight = _c === void 0 ? "h-80" : _c;
|
|
34115
|
-
var miDtData =
|
|
34112
|
+
var miDtData = useMiDt().miDtData;
|
|
34116
34113
|
var _d = useState(null), autocomplete = _d[0], setAutocomplete = _d[1];
|
|
34117
34114
|
var _e = useState(center), location = _e[0], setLocation = _e[1];
|
|
34118
34115
|
var mapRef = useRef(null);
|
|
@@ -36673,7 +36670,9 @@ var FormStepper = function (_a) {
|
|
|
36673
36670
|
|
|
36674
36671
|
var GenericForm = function (_a) {
|
|
36675
36672
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
36676
|
-
var config = _a.config, _o = _a.stepperData, stepperData = _o === void 0 ? {} : _o, onStepComplete = _a.onStepComplete, _p = _a.loading, loading = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? "" : _q, stepperDataKey = _a.stepperDataKey, flowbiteTheme = _a.flowbiteTheme
|
|
36673
|
+
var config = _a.config, _o = _a.stepperData, stepperData = _o === void 0 ? {} : _o, onStepComplete = _a.onStepComplete, _p = _a.loading, loading = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? "" : _q, stepperDataKey = _a.stepperDataKey, flowbiteTheme = _a.flowbiteTheme, // Nuevo prop
|
|
36674
|
+
allData = _a.allData;
|
|
36675
|
+
var _r = useMiDt(); _r.miDtData; var setMiDtData = _r.setMiDtData;
|
|
36677
36676
|
// Función para obtener datos del stepper o valores por defecto
|
|
36678
36677
|
var getFieldValue = function (field) {
|
|
36679
36678
|
// Prioridad 1: Valor por defecto del campo (máxima prioridad)
|
|
@@ -36706,8 +36705,20 @@ var GenericForm = function (_a) {
|
|
|
36706
36705
|
}
|
|
36707
36706
|
return initialData;
|
|
36708
36707
|
};
|
|
36709
|
-
var
|
|
36710
|
-
var
|
|
36708
|
+
var _s = useState(getInitialFormData), formData = _s[0], setFormData = _s[1];
|
|
36709
|
+
var _t = useState({}), errors = _t[0], setErrors = _t[1];
|
|
36710
|
+
useEffect(function () {
|
|
36711
|
+
if (allData) {
|
|
36712
|
+
setMiDtData({
|
|
36713
|
+
allData: {
|
|
36714
|
+
metadata: {
|
|
36715
|
+
Regiones: allData.metadata.Regiones,
|
|
36716
|
+
Comunas: allData.metadata.Comunas,
|
|
36717
|
+
},
|
|
36718
|
+
},
|
|
36719
|
+
});
|
|
36720
|
+
}
|
|
36721
|
+
}, [allData]);
|
|
36711
36722
|
// Sincronizar formData cuando cambie stepperData
|
|
36712
36723
|
useEffect(function () {
|
|
36713
36724
|
if (stepperData && Array.isArray(config.fields)) {
|
|
@@ -36847,4 +36858,4 @@ var GenericForm = function (_a) {
|
|
|
36847
36858
|
return formContent;
|
|
36848
36859
|
};
|
|
36849
36860
|
|
|
36850
|
-
export { AddressInput, Alert, CheckboxInput, Common, DatePicker, DynamicInput, Flowbite, GenericForm, GoogleMaps, InputWrapper,
|
|
36861
|
+
export { AddressInput, Alert, CheckboxInput, Common, DatePicker, DynamicInput, Flowbite, GenericForm, GoogleMaps, InputWrapper, NavigationButton, RadioInput, RadioOption, RutInput, SelectInput, StatusScreen, SubtitleInput, SwornDeclaration, TextInput, TextInputField, TextareaInput, clean as cleanRut, commonValidations, createValidationSchema, formatRut, maskRut, useMiDt, validateOnlyNumbersAndLetters, validate as validateRut };
|
package/dist/index.js
CHANGED
|
@@ -34024,63 +34024,60 @@ _defineProperty(Autocomplete, "defaultProps", {
|
|
|
34024
34024
|
});
|
|
34025
34025
|
_defineProperty(Autocomplete, "contextType", MapContext);
|
|
34026
34026
|
|
|
34027
|
-
|
|
34028
|
-
|
|
34029
|
-
|
|
34030
|
-
|
|
34031
|
-
|
|
34032
|
-
|
|
34033
|
-
|
|
34034
|
-
|
|
34035
|
-
|
|
34036
|
-
|
|
34037
|
-
|
|
34038
|
-
|
|
34039
|
-
|
|
34040
|
-
|
|
34041
|
-
|
|
34042
|
-
|
|
34043
|
-
|
|
34044
|
-
|
|
34045
|
-
|
|
34046
|
-
|
|
34047
|
-
|
|
34048
|
-
|
|
34049
|
-
|
|
34050
|
-
|
|
34051
|
-
|
|
34052
|
-
|
|
34053
|
-
|
|
34027
|
+
const createStoreImpl = (createState) => {
|
|
34028
|
+
let state;
|
|
34029
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
34030
|
+
const setState = (partial, replace) => {
|
|
34031
|
+
const nextState = typeof partial === "function" ? partial(state) : partial;
|
|
34032
|
+
if (!Object.is(nextState, state)) {
|
|
34033
|
+
const previousState = state;
|
|
34034
|
+
state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
|
|
34035
|
+
listeners.forEach((listener) => listener(state, previousState));
|
|
34036
|
+
}
|
|
34037
|
+
};
|
|
34038
|
+
const getState = () => state;
|
|
34039
|
+
const getInitialState = () => initialState;
|
|
34040
|
+
const subscribe = (listener) => {
|
|
34041
|
+
listeners.add(listener);
|
|
34042
|
+
return () => listeners.delete(listener);
|
|
34043
|
+
};
|
|
34044
|
+
const api = { setState, getState, getInitialState, subscribe };
|
|
34045
|
+
const initialState = state = createState(setState, getState, api);
|
|
34046
|
+
return api;
|
|
34047
|
+
};
|
|
34048
|
+
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
|
34049
|
+
|
|
34050
|
+
const identity = (arg) => arg;
|
|
34051
|
+
function useStore(api, selector = identity) {
|
|
34052
|
+
const slice = React.useSyncExternalStore(
|
|
34053
|
+
api.subscribe,
|
|
34054
|
+
() => selector(api.getState()),
|
|
34055
|
+
() => selector(api.getInitialState())
|
|
34056
|
+
);
|
|
34057
|
+
React.useDebugValue(slice);
|
|
34058
|
+
return slice;
|
|
34059
|
+
}
|
|
34060
|
+
const createImpl = (createState) => {
|
|
34061
|
+
const api = createStore(createState);
|
|
34062
|
+
const useBoundStore = (selector) => useStore(api, selector);
|
|
34063
|
+
Object.assign(useBoundStore, api);
|
|
34064
|
+
return useBoundStore;
|
|
34065
|
+
};
|
|
34066
|
+
const create = (createState) => createState ? createImpl(createState) : createImpl;
|
|
34067
|
+
|
|
34054
34068
|
var defaultMiDtData = {
|
|
34055
34069
|
allData: {
|
|
34056
34070
|
metadata: {
|
|
34057
|
-
Regiones:
|
|
34058
|
-
Comunas:
|
|
34071
|
+
Regiones: [],
|
|
34072
|
+
Comunas: [],
|
|
34059
34073
|
},
|
|
34060
34074
|
},
|
|
34061
34075
|
};
|
|
34062
|
-
var
|
|
34076
|
+
var useMiDt = create(function (set) { return ({
|
|
34063
34077
|
miDtData: defaultMiDtData,
|
|
34064
|
-
});
|
|
34065
|
-
|
|
34066
|
-
|
|
34067
|
-
var miDtData = {
|
|
34068
|
-
allData: {
|
|
34069
|
-
metadata: {
|
|
34070
|
-
Regiones: regiones || defaultRegiones,
|
|
34071
|
-
Comunas: comunas || defaultComunas,
|
|
34072
|
-
},
|
|
34073
|
-
},
|
|
34074
|
-
};
|
|
34075
|
-
return (jsxRuntime.jsx(MiDtContext.Provider, { value: { miDtData: miDtData }, children: children }));
|
|
34076
|
-
};
|
|
34077
|
-
var useMiDt = function () {
|
|
34078
|
-
var context = React.useContext(MiDtContext);
|
|
34079
|
-
if (!context) {
|
|
34080
|
-
throw new Error("useMiDt must be used within a MiDtProvider");
|
|
34081
|
-
}
|
|
34082
|
-
return context;
|
|
34083
|
-
};
|
|
34078
|
+
setMiDtData: function (data) { return set({ miDtData: data }); },
|
|
34079
|
+
resetMiDtData: function () { return set({ miDtData: defaultMiDtData }); },
|
|
34080
|
+
}); });
|
|
34084
34081
|
|
|
34085
34082
|
var Common = /** @class */ (function () {
|
|
34086
34083
|
function Common() {
|
|
@@ -34132,7 +34129,7 @@ var center = {
|
|
|
34132
34129
|
};
|
|
34133
34130
|
var AddressInput = function (_a) {
|
|
34134
34131
|
var field = _a.field, value = _a.value, onChange = _a.onChange, error = _a.error, onSearch = _a.onSearch, _b = _a.showMap, showMap = _b === void 0 ? true : _b, _c = _a.mapHeight, mapHeight = _c === void 0 ? "h-80" : _c;
|
|
34135
|
-
var miDtData =
|
|
34132
|
+
var miDtData = useMiDt().miDtData;
|
|
34136
34133
|
var _d = React.useState(null), autocomplete = _d[0], setAutocomplete = _d[1];
|
|
34137
34134
|
var _e = React.useState(center), location = _e[0], setLocation = _e[1];
|
|
34138
34135
|
var mapRef = React.useRef(null);
|
|
@@ -36693,7 +36690,9 @@ var FormStepper = function (_a) {
|
|
|
36693
36690
|
|
|
36694
36691
|
var GenericForm = function (_a) {
|
|
36695
36692
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
36696
|
-
var config = _a.config, _o = _a.stepperData, stepperData = _o === void 0 ? {} : _o, onStepComplete = _a.onStepComplete, _p = _a.loading, loading = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? "" : _q, stepperDataKey = _a.stepperDataKey, flowbiteTheme = _a.flowbiteTheme
|
|
36693
|
+
var config = _a.config, _o = _a.stepperData, stepperData = _o === void 0 ? {} : _o, onStepComplete = _a.onStepComplete, _p = _a.loading, loading = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? "" : _q, stepperDataKey = _a.stepperDataKey, flowbiteTheme = _a.flowbiteTheme, // Nuevo prop
|
|
36694
|
+
allData = _a.allData;
|
|
36695
|
+
var _r = useMiDt(); _r.miDtData; var setMiDtData = _r.setMiDtData;
|
|
36697
36696
|
// Función para obtener datos del stepper o valores por defecto
|
|
36698
36697
|
var getFieldValue = function (field) {
|
|
36699
36698
|
// Prioridad 1: Valor por defecto del campo (máxima prioridad)
|
|
@@ -36726,8 +36725,20 @@ var GenericForm = function (_a) {
|
|
|
36726
36725
|
}
|
|
36727
36726
|
return initialData;
|
|
36728
36727
|
};
|
|
36729
|
-
var
|
|
36730
|
-
var
|
|
36728
|
+
var _s = React.useState(getInitialFormData), formData = _s[0], setFormData = _s[1];
|
|
36729
|
+
var _t = React.useState({}), errors = _t[0], setErrors = _t[1];
|
|
36730
|
+
React.useEffect(function () {
|
|
36731
|
+
if (allData) {
|
|
36732
|
+
setMiDtData({
|
|
36733
|
+
allData: {
|
|
36734
|
+
metadata: {
|
|
36735
|
+
Regiones: allData.metadata.Regiones,
|
|
36736
|
+
Comunas: allData.metadata.Comunas,
|
|
36737
|
+
},
|
|
36738
|
+
},
|
|
36739
|
+
});
|
|
36740
|
+
}
|
|
36741
|
+
}, [allData]);
|
|
36731
36742
|
// Sincronizar formData cuando cambie stepperData
|
|
36732
36743
|
React.useEffect(function () {
|
|
36733
36744
|
if (stepperData && Array.isArray(config.fields)) {
|
|
@@ -36877,7 +36888,6 @@ exports.Flowbite = Flowbite;
|
|
|
36877
36888
|
exports.GenericForm = GenericForm;
|
|
36878
36889
|
exports.GoogleMaps = GoogleMaps;
|
|
36879
36890
|
exports.InputWrapper = InputWrapper;
|
|
36880
|
-
exports.MiDtProvider = MiDtProvider;
|
|
36881
36891
|
exports.NavigationButton = NavigationButton;
|
|
36882
36892
|
exports.RadioInput = RadioInput;
|
|
36883
36893
|
exports.RadioOption = RadioOption;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visiion/forms-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Librería de componentes de formularios reutilizables",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
"flowbite-react": "0.10.1",
|
|
41
41
|
"framer-motion": "^11.3.8",
|
|
42
42
|
"react-icons": "^5.5.0",
|
|
43
|
-
"yup": "^1.6.1"
|
|
43
|
+
"yup": "^1.6.1",
|
|
44
|
+
"zustand": "^5.0.6"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"@rollup/plugin-commonjs": "^25.0.7",
|