cogsbox-state 0.5.11 → 0.5.13
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/README.md +0 -53
- package/dist/CogsState.d.ts +3 -6
- package/dist/CogsState.jsx +318 -307
- package/dist/CogsState.jsx.map +1 -1
- package/dist/index.js +19 -18
- package/dist/utility.js.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -173,59 +173,6 @@ return (
|
|
|
173
173
|
);
|
|
174
174
|
```
|
|
175
175
|
|
|
176
|
-
## Form Integration
|
|
177
|
-
|
|
178
|
-
Cogsbox State provides a form system with Zod schema validation.
|
|
179
|
-
|
|
180
|
-
```typescript
|
|
181
|
-
import { z } from 'zod';
|
|
182
|
-
import { createCogsState } from 'cogsbox-state';
|
|
183
|
-
|
|
184
|
-
// 1. Define your schema and initial state
|
|
185
|
-
const userSchema = z.object({
|
|
186
|
-
firstName: z.string().min(1, "First name is required"),
|
|
187
|
-
lastName: z.string().min(1, "Last name is required"),
|
|
188
|
-
email: z.string().email("Please enter a valid email"),
|
|
189
|
-
address: z.object({
|
|
190
|
-
street: z.string().min(1, "Street is required"),
|
|
191
|
-
city: z.string().min(1, "City is required"),
|
|
192
|
-
zipCode: z.string().min(5, "Zip code must be at least 5 characters")
|
|
193
|
-
})
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
// 2. Create the state hook with validation and global form elements
|
|
197
|
-
export const { useCogsState } = createCogsState({
|
|
198
|
-
user: {
|
|
199
|
-
initialState: {
|
|
200
|
-
firstName: "",
|
|
201
|
-
lastName: "",
|
|
202
|
-
email: "",
|
|
203
|
-
address: {
|
|
204
|
-
street: "",
|
|
205
|
-
city: "",
|
|
206
|
-
zipCode: ""
|
|
207
|
-
}
|
|
208
|
-
},
|
|
209
|
-
validation: {
|
|
210
|
-
key: "userForm",
|
|
211
|
-
zodSchema: userSchema,
|
|
212
|
-
onBlur: true
|
|
213
|
-
},
|
|
214
|
-
formElements: {
|
|
215
|
-
validation: ({ children, active, message, path }) => (
|
|
216
|
-
<div className={`form-field ${active ? 'has-error' : ''}`}>
|
|
217
|
-
{children}
|
|
218
|
-
{active && message && (
|
|
219
|
-
<p className="text-red-500 text-sm mt-1">{message}</p>
|
|
220
|
-
)}
|
|
221
|
-
</div>
|
|
222
|
-
) // Inline validation wrapper
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
|
|
227
|
-
```
|
|
228
|
-
|
|
229
176
|
# Cogsbox State: Simple Form Example
|
|
230
177
|
|
|
231
178
|
The main benefit of Cogsbox State's form handling is its simplicity. Using `formElement` with the included `inputProps` makes creating forms incredibly easy:
|
package/dist/CogsState.d.ts
CHANGED
|
@@ -253,10 +253,6 @@ export type InitialStateInnerType<T extends unknown = unknown> = {
|
|
|
253
253
|
export type InitialStateType<T> = {
|
|
254
254
|
[key: string]: InitialStateInnerType<T>;
|
|
255
255
|
};
|
|
256
|
-
export type FunctionsToPassDownType = {
|
|
257
|
-
getValidationErrors: (pathArray: string) => string[];
|
|
258
|
-
removeValidationError: (path: string) => void;
|
|
259
|
-
};
|
|
260
256
|
export type AllStateTypes<T extends unknown> = Record<string, T>;
|
|
261
257
|
export type CogsInitialState<T> = {
|
|
262
258
|
initialState: T;
|
|
@@ -265,8 +261,9 @@ export type CogsInitialState<T> = {
|
|
|
265
261
|
export type TransformedStateType<T> = {
|
|
266
262
|
[P in keyof T]: T[P] extends CogsInitialState<infer U> ? U : T[P];
|
|
267
263
|
};
|
|
268
|
-
export declare
|
|
269
|
-
|
|
264
|
+
export declare function addStateOptions<T extends unknown>(initialState: T, { formElements }: OptionsType<T>): T;
|
|
265
|
+
export declare const createCogsState: <State extends Record<string, unknown>>(initialState: State, opt?: {
|
|
266
|
+
formElements?: FormsElementsType;
|
|
270
267
|
}) => {
|
|
271
268
|
useCogsState: <StateKey extends keyof State>(stateKey: StateKey, options?: OptionsType<TransformedStateType<State>[StateKey]>) => StateObject<TransformedStateType<State>[StateKey]>;
|
|
272
269
|
setCogsOptions: <StateKey extends keyof State>(stateKey: StateKey, options: OptionsType<TransformedStateType<State>[StateKey]>) => void;
|