goodchuck-utils 1.10.0 → 1.12.2

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.
Files changed (9) hide show
  1. package/README.md +31 -0
  2. package/dist/components/dev/FormDevTools/FormDevTools.d.ts +74 -77
  3. package/dist/components/dev/FormDevTools/FormDevTools.d.ts.map +1 -1
  4. package/dist/components/dev/FormDevTools/FormDevTools.js +55 -57
  5. package/dist/components/dev/FormDevTools/index.d.ts +1 -1
  6. package/dist/components/dev/FormDevTools/index.d.ts.map +1 -1
  7. package/dist/components/dev/index.d.ts +1 -1
  8. package/dist/components/dev/index.d.ts.map +1 -1
  9. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,31 @@
1
+ # goodchuck-utils (Deprecated)
2
+
3
+ > ⚠️ **이 패키지는 더 이상 유지보수되지 않습니다.**
4
+
5
+ 이 패키지는 [`@blastlabs/utils`](https://www.npmjs.com/package/@blastlabs/utils)로 이전되었습니다.
6
+
7
+ ## 마이그레이션
8
+
9
+ 기존 패키지를 제거하고 새 패키지를 설치해주세요:
10
+
11
+ ```bash
12
+ # 기존 패키지 제거
13
+ npm uninstall goodchuck-utils
14
+
15
+ # 새 패키지 설치
16
+ npm install @blastlabs/utils
17
+ ```
18
+
19
+ ## 임포트 경로 변경
20
+
21
+ ```diff
22
+ - import { useDebounce, useToggle } from 'goodchuck-utils/hooks';
23
+ + import { useDebounce, useToggle } from '@blastlabs/utils/hooks';
24
+
25
+ - import { DevPanel, FormDevTools } from 'goodchuck-utils/components/dev';
26
+ + import { DevPanel, FormDevTools } from '@blastlabs/utils/components/dev';
27
+ ```
28
+
29
+ ## 라이선스
30
+
31
+ ISC
package/dist/components/dev/FormDevTools/FormDevTools.d.ts CHANGED
@@ -1,39 +1,37 @@
1
1
  import React from 'react';
2
- export type FormState = {
3
- values?: Record<string, any>;
4
- errors?: Record<string, any>;
5
- dirtyFields?: Record<string, any>;
6
- touchedFields?: Record<string, any>;
7
- isValid?: boolean;
8
- isSubmitting?: boolean;
9
- submitCount?: number;
10
- };
11
- export type Props = {
12
- /** react-hook-form의 formState */
13
- formState: FormState;
14
- /** 현재 폼 values (watch() 결과) */
15
- values?: Record<string, any>;
16
- /** 초기값 (defaultValues 또는 reset()으로 설정한 원본 값, changedFields 계산에 사용) */
17
- originalValues?: Record<string, any>;
18
- /** Validation 스키마 정보 (zod, yup 등) - refine 조건 표시에 사용 */
19
- validationSchema?: Record<string, any>;
20
- /** react-hook-form의 setValue 함수 (mock 데이터 생성 후 폼에 채우기 위해 필요)
21
- * useForm에서 받은 setValue를 그대로 전달하면 됩니다.
22
- * 타입: UseFormSetValue<TFieldValues> (react-hook-form에서 제공)
23
- */
24
- setValue?: <TFieldValues = Record<string, any>>(name: string | any, value: any, options?: {
2
+ export type UseFormReturn<TFieldValues extends Record<string, any> = Record<string, any>> = {
3
+ watch: (name?: any) => any;
4
+ getValues: (name?: any) => any;
5
+ setValue: (name: any, value: any, options?: {
25
6
  shouldValidate?: boolean;
26
7
  shouldDirty?: boolean;
27
8
  shouldTouch?: boolean;
28
9
  }) => void;
29
- /** react-hook-form의 trigger 함수 (validation 실행을 위해 필요, 선택사항) */
30
- trigger?: (name?: string | string[]) => Promise<boolean>;
10
+ trigger?: (name?: any) => Promise<boolean>;
11
+ formState: {
12
+ errors?: Record<string, any>;
13
+ dirtyFields?: Record<string, any>;
14
+ touchedFields?: Record<string, any>;
15
+ isValid?: boolean;
16
+ isSubmitting?: boolean;
17
+ submitCount?: number;
18
+ defaultValues?: TFieldValues;
19
+ };
20
+ handleSubmit?: (...args: any[]) => any;
21
+ register?: (...args: any[]) => any;
22
+ reset?: (...args: any[]) => any;
23
+ [key: string]: any;
24
+ };
25
+ export type Props = {
26
+ /** react-hook-form의 useForm() 반환값을 그대로 전달 */
27
+ form: UseFormReturn;
31
28
  /** Mock 데이터 생성 함수 (비동기 가능) */
32
29
  generateMock?: (params: {
33
30
  values?: Record<string, any>;
34
31
  originalValues?: Record<string, any>;
35
- validationSchema?: Record<string, any>;
36
32
  }) => Promise<Record<string, any>> | Record<string, any>;
33
+ /** Validation 스키마 정보 (zod, yup 등) - 선택사항 */
34
+ validationSchema?: Record<string, any>;
37
35
  /** 표시 위치 (기본값: 'bottom-left') */
38
36
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
39
37
  /** 패널 제목 (기본값: 'Form DevTools') */
@@ -45,55 +43,59 @@ export type Props = {
45
43
  *
46
44
  * @example
47
45
  * ```tsx
48
- * // Vite 프로젝트
46
+ * // Vite 프로젝트 - 간단한 사용법
49
47
  * import { useForm } from 'react-hook-form';
50
48
  * import { FormDevTools } from 'goodchuck-utils/components/dev';
51
49
  *
52
50
  * function MyForm() {
53
- * // 신규 폼: defaultValues 사용
54
- * const defaultValues = {
55
- * username: '',
56
- * email: '',
57
- * age: 0,
58
- * };
59
- *
60
- * const { register, handleSubmit, formState, watch, setValue, trigger } = useForm({
61
- * defaultValues,
51
+ * const form = useForm({
52
+ * defaultValues: {
53
+ * username: '',
54
+ * email: '',
55
+ * age: 0,
56
+ * }
62
57
  * });
63
58
  *
64
- * const values = watch();
59
+ * return (
60
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
61
+ * <input {...form.register('username')} />
62
+ * <input {...form.register('email')} />
63
+ * <button type="submit">Submit</button>
64
+ *
65
+ * {import.meta.env.DEV && <FormDevTools form={form} />}
66
+ * </form>
67
+ * );
68
+ * }
69
+ * ```
70
+ *
71
+ * @example
72
+ * ```tsx
73
+ * // Mock 데이터 생성 기능 포함
74
+ * function MyForm() {
75
+ * const form = useForm({
76
+ * defaultValues: {
77
+ * username: '',
78
+ * email: '',
79
+ * age: 0,
80
+ * }
81
+ * });
65
82
  *
66
83
  * return (
67
- * <form onSubmit={handleSubmit(onSubmit)}>
68
- * <input {...register('username')} />
69
- * <input {...register('email')} />
84
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
85
+ * <input {...form.register('username')} />
86
+ * <input {...form.register('email')} />
70
87
  * <button type="submit">Submit</button>
71
88
  *
72
89
  * {import.meta.env.DEV && (
73
90
  * <FormDevTools
74
- * formState={formState}
75
- * values={values}
76
- * originalValues={defaultValues}
77
- * setValue={setValue} // mock 데이터 생성 후 폼에 채우기 위해 필요 (changedFields 정확성을 위해 권장)
78
- * trigger={trigger} // validation 실행을 위해 (선택사항)
79
- * generateMock={async ({ values, validationSchema }) => {
80
- * // AI를 사용한 mock 데이터 생성 (예시)
81
- * const response = await fetch('https://api.openai.com/v1/chat/completions', {
82
- * method: 'POST',
83
- * headers: {
84
- * 'Content-Type': 'application/json',
85
- * 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
86
- * },
87
- * body: JSON.stringify({
88
- * model: 'gpt-3.5-turbo',
89
- * messages: [{
90
- * role: 'user',
91
- * content: `다음 폼 필드에 맞는 mock 데이터를 생성해주세요: ${JSON.stringify(values)}`
92
- * }],
93
- * }),
94
- * });
95
- * const data = await response.json();
96
- * return JSON.parse(data.choices[0].message.content);
91
+ * form={form}
92
+ * generateMock={async ({ values, originalValues }) => {
93
+ * // Mock 데이터 생성 로직
94
+ * return {
95
+ * username: 'test_user',
96
+ * email: 'test@example.com',
97
+ * age: 25,
98
+ * };
97
99
  * }}
98
100
  * />
99
101
  * )}
@@ -104,28 +106,23 @@ export type Props = {
104
106
  *
105
107
  * @example
106
108
  * ```tsx
107
- * // 수정 폼: reset()으로 초기값 설정
109
+ * // 수정 폼 예시
108
110
  * function EditForm({ userData }) {
109
- * const { register, handleSubmit, formState, watch, reset } = useForm();
111
+ * const form = useForm();
110
112
  *
111
113
  * useEffect(() => {
112
- * // 서버에서 가져온 데이터로 폼 초기화
113
- * reset(userData);
114
- * }, [userData, reset]);
115
- *
116
- * const values = watch();
114
+ * form.reset(userData);
115
+ * }, [userData]);
117
116
  *
118
117
  * return (
119
- * <form onSubmit={handleSubmit(onSubmit)}>
120
- * <input {...register('username')} />
121
- * <input {...register('email')} />
118
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
119
+ * <input {...form.register('username')} />
120
+ * <input {...form.register('email')} />
122
121
  * <button type="submit">Update</button>
123
122
  *
124
123
  * {process.env.NODE_ENV === 'development' && (
125
124
  * <FormDevTools
126
- * formState={formState}
127
- * values={values}
128
- * originalValues={userData} // reset()으로 설정한 원본 값
125
+ * form={form}
129
126
  * position="top-right"
130
127
  * title="Edit Form Debug"
131
128
  * />
@@ -135,5 +132,5 @@ export type Props = {
135
132
  * }
136
133
  * ```
137
134
  */
138
- export default function FormDevTools({ formState, values, originalValues, validationSchema, setValue, trigger, generateMock, position, title }: Props): React.JSX.Element;
135
+ export default function FormDevTools({ form, validationSchema, generateMock, position, title }: Props): React.JSX.Element;
139
136
  //# sourceMappingURL=FormDevTools.d.ts.map
package/dist/components/dev/FormDevTools/FormDevTools.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA0B3D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5C,IAAI,EAAE,MAAM,GAAG,GAAG,EAClB,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACxC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAsgBtL"}
1
+ {"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,MAAM,MAAM,aAAa,CAAC,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1F,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,YAAY,CAAC;KAC9B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,6CAA6C;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAqgBtI"}
package/dist/components/dev/FormDevTools/FormDevTools.js CHANGED
@@ -7,55 +7,59 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
7
7
  *
8
8
  * @example
9
9
  * ```tsx
10
- * // Vite 프로젝트
10
+ * // Vite 프로젝트 - 간단한 사용법
11
11
  * import { useForm } from 'react-hook-form';
12
12
  * import { FormDevTools } from 'goodchuck-utils/components/dev';
13
13
  *
14
14
  * function MyForm() {
15
- * // 신규 폼: defaultValues 사용
16
- * const defaultValues = {
17
- * username: '',
18
- * email: '',
19
- * age: 0,
20
- * };
21
- *
22
- * const { register, handleSubmit, formState, watch, setValue, trigger } = useForm({
23
- * defaultValues,
15
+ * const form = useForm({
16
+ * defaultValues: {
17
+ * username: '',
18
+ * email: '',
19
+ * age: 0,
20
+ * }
24
21
  * });
25
22
  *
26
- * const values = watch();
23
+ * return (
24
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
25
+ * <input {...form.register('username')} />
26
+ * <input {...form.register('email')} />
27
+ * <button type="submit">Submit</button>
28
+ *
29
+ * {import.meta.env.DEV && <FormDevTools form={form} />}
30
+ * </form>
31
+ * );
32
+ * }
33
+ * ```
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * // Mock 데이터 생성 기능 포함
38
+ * function MyForm() {
39
+ * const form = useForm({
40
+ * defaultValues: {
41
+ * username: '',
42
+ * email: '',
43
+ * age: 0,
44
+ * }
45
+ * });
27
46
  *
28
47
  * return (
29
- * <form onSubmit={handleSubmit(onSubmit)}>
30
- * <input {...register('username')} />
31
- * <input {...register('email')} />
48
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
49
+ * <input {...form.register('username')} />
50
+ * <input {...form.register('email')} />
32
51
  * <button type="submit">Submit</button>
33
52
  *
34
53
  * {import.meta.env.DEV && (
35
54
  * <FormDevTools
36
- * formState={formState}
37
- * values={values}
38
- * originalValues={defaultValues}
39
- * setValue={setValue} // mock 데이터 생성 후 폼에 채우기 위해 필요 (changedFields 정확성을 위해 권장)
40
- * trigger={trigger} // validation 실행을 위해 (선택사항)
41
- * generateMock={async ({ values, validationSchema }) => {
42
- * // AI를 사용한 mock 데이터 생성 (예시)
43
- * const response = await fetch('https://api.openai.com/v1/chat/completions', {
44
- * method: 'POST',
45
- * headers: {
46
- * 'Content-Type': 'application/json',
47
- * 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
48
- * },
49
- * body: JSON.stringify({
50
- * model: 'gpt-3.5-turbo',
51
- * messages: [{
52
- * role: 'user',
53
- * content: `다음 폼 필드에 맞는 mock 데이터를 생성해주세요: ${JSON.stringify(values)}`
54
- * }],
55
- * }),
56
- * });
57
- * const data = await response.json();
58
- * return JSON.parse(data.choices[0].message.content);
55
+ * form={form}
56
+ * generateMock={async ({ values, originalValues }) => {
57
+ * // Mock 데이터 생성 로직
58
+ * return {
59
+ * username: 'test_user',
60
+ * email: 'test@example.com',
61
+ * age: 25,
62
+ * };
59
63
  * }}
60
64
  * />
61
65
  * )}
@@ -66,28 +70,23 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
66
70
  *
67
71
  * @example
68
72
  * ```tsx
69
- * // 수정 폼: reset()으로 초기값 설정
73
+ * // 수정 폼 예시
70
74
  * function EditForm({ userData }) {
71
- * const { register, handleSubmit, formState, watch, reset } = useForm();
75
+ * const form = useForm();
72
76
  *
73
77
  * useEffect(() => {
74
- * // 서버에서 가져온 데이터로 폼 초기화
75
- * reset(userData);
76
- * }, [userData, reset]);
77
- *
78
- * const values = watch();
78
+ * form.reset(userData);
79
+ * }, [userData]);
79
80
  *
80
81
  * return (
81
- * <form onSubmit={handleSubmit(onSubmit)}>
82
- * <input {...register('username')} />
83
- * <input {...register('email')} />
82
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
83
+ * <input {...form.register('username')} />
84
+ * <input {...form.register('email')} />
84
85
  * <button type="submit">Update</button>
85
86
  *
86
87
  * {process.env.NODE_ENV === 'development' && (
87
88
  * <FormDevTools
88
- * formState={formState}
89
- * values={values}
90
- * originalValues={userData} // reset()으로 설정한 원본 값
89
+ * form={form}
91
90
  * position="top-right"
92
91
  * title="Edit Form Debug"
93
92
  * />
@@ -97,7 +96,11 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
97
96
  * }
98
97
  * ```
99
98
  */
100
- export default function FormDevTools({ formState, values, originalValues, validationSchema, setValue, trigger, generateMock, position = 'bottom-left', title = 'Form DevTools' }) {
99
+ export default function FormDevTools({ form, validationSchema, generateMock, position = 'bottom-left', title = 'Form DevTools' }) {
100
+ // form 객체에서 필요한 값들 추출
101
+ const { formState, watch, setValue, trigger } = form;
102
+ const values = watch(); // 모든 값을 watch
103
+ const originalValues = formState.defaultValues; // defaultValues를 원본 값으로 사용
101
104
  const [isOpen, setIsOpen] = useState(false);
102
105
  const [activeTab, setActiveTab] = useState('all');
103
106
  const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
@@ -234,10 +237,6 @@ export default function FormDevTools({ formState, values, originalValues, valida
234
237
  setGenerateError('generateMock 함수가 필요합니다');
235
238
  return;
236
239
  }
237
- if (!setValue) {
238
- setGenerateError('setValue 함수가 필요합니다');
239
- return;
240
- }
241
240
  setIsGenerating(true);
242
241
  setGenerateError(null);
243
242
  try {
@@ -245,7 +244,6 @@ export default function FormDevTools({ formState, values, originalValues, valida
245
244
  const mockData = await generateMock({
246
245
  values,
247
246
  originalValues,
248
- validationSchema,
249
247
  });
250
248
  // setValue를 사용하여 각 필드를 설정
251
249
  // reset을 사용하면 defaultValues가 업데이트되어 changedFields 계산이 부정확해짐
@@ -290,7 +288,7 @@ export default function FormDevTools({ formState, values, originalValues, valida
290
288
  title),
291
289
  React.createElement("div", { style: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
292
290
  React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
293
- setValue && generateMock && (React.createElement("button", { onClick: handleGenerateMock, disabled: isGenerating, style: {
291
+ generateMock && (React.createElement("button", { onClick: handleGenerateMock, disabled: isGenerating, style: {
294
292
  ...getCopyButtonStyle(false),
295
293
  backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
296
294
  opacity: isGenerating ? 0.6 : 1,
package/dist/components/dev/FormDevTools/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default } from './FormDevTools';
2
- export type { Props as FormDevToolsProps, FormState } from './FormDevTools';
2
+ export type { Props as FormDevToolsProps, UseFormReturn } from './FormDevTools';
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/components/dev/FormDevTools/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
package/dist/components/dev/index.d.ts CHANGED
@@ -10,6 +10,6 @@ export { default as DevPanel } from './DevPanel';
10
10
  export { default as ZIndexDebugger } from './ZIndexDebugger';
11
11
  export { default as ApiLogger, addApiLog, clearApiLogs } from './ApiLogger';
12
12
  export { default as FormDevTools } from './FormDevTools';
13
- export type { FormDevToolsProps, FormState as FormDevToolsFormState } from './FormDevTools';
13
+ export type { FormDevToolsProps, UseFormReturn as FormDevToolsUseFormReturn } from './FormDevTools';
14
14
  export type { ApiLogEntry } from './ApiLogger';
15
15
  //# sourceMappingURL=index.d.ts.map
package/dist/components/dev/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,SAAS,IAAI,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5F,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,aAAa,IAAI,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "goodchuck-utils",
3
- "version": "1.10.0",
3
+ "version": "1.12.2",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",