@blastlabs/utils 1.21.0 → 2.1.0

package/dist/components/dev/DevToolsProvider/DevToolsProvider.test.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DevToolsProvider, { useDevTools } from './DevToolsProvider';
+// Test helper component
+function TestConsumer() {
+    const { tools, isMenuOpen, toggleTool, toggleMenu } = useDevTools();
+    return (React.createElement("div", null,
+        React.createElement("div", { "data-testid": "form-devtools" }, tools.formDevTools ? 'on' : 'off'),
+        React.createElement("div", { "data-testid": "timezone-devtools" }, tools.timezoneDevTools ? 'on' : 'off'),
+        React.createElement("div", { "data-testid": "menu-open" }, isMenuOpen ? 'open' : 'closed'),
+        React.createElement("button", { onClick: () => toggleTool('formDevTools') }, "Toggle Form"),
+        React.createElement("button", { onClick: () => toggleTool('timezoneDevTools') }, "Toggle Timezone"),
+        React.createElement("button", { onClick: toggleMenu }, "Toggle Menu")));
+}
+describe('DevToolsProvider', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('기본 동작', () => {
+        it('Provider 내부에서 context를 제공한다', () => {
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestConsumer, null)));
+            expect(screen.getByTestId('form-devtools').textContent).toBe('off');
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('off');
+            expect(screen.getByTestId('menu-open').textContent).toBe('closed');
+        });
+        it('Provider 외부에서는 기본값을 반환한다', () => {
+            function TestComponent() {
+                const { tools, isMenuOpen } = useDevTools();
+                return (React.createElement("div", null,
+                    React.createElement("div", { "data-testid": "form-devtools" }, tools.formDevTools ? 'on' : 'off'),
+                    React.createElement("div", { "data-testid": "menu-open" }, isMenuOpen ? 'open' : 'closed')));
+            }
+            render(React.createElement(TestComponent, null));
+            expect(screen.getByTestId('form-devtools').textContent).toBe('off');
+            expect(screen.getByTestId('menu-open').textContent).toBe('closed');
+        });
+    });
+    describe('툴 토글', () => {
+        it('toggleTool로 formDevTools를 토글할 수 있다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestConsumer, null)));
+            expect(screen.getByTestId('form-devtools').textContent).toBe('off');
+            const toggleButton = screen.getByRole('button', { name: 'Toggle Form' });
+            await user.click(toggleButton);
+            expect(screen.getByTestId('form-devtools').textContent).toBe('on');
+            await user.click(toggleButton);
+            expect(screen.getByTestId('form-devtools').textContent).toBe('off');
+        });
+        it('toggleTool로 timezoneDevTools를 토글할 수 있다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestConsumer, null)));
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('off');
+            const toggleButton = screen.getByRole('button', { name: 'Toggle Timezone' });
+            await user.click(toggleButton);
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('on');
+            await user.click(toggleButton);
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('off');
+        });
+        it('각 툴이 독립적으로 토글된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestConsumer, null)));
+            const formButton = screen.getByRole('button', { name: 'Toggle Form' });
+            const timezoneButton = screen.getByRole('button', { name: 'Toggle Timezone' });
+            await user.click(formButton);
+            await user.click(timezoneButton);
+            expect(screen.getByTestId('form-devtools').textContent).toBe('on');
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('on');
+            await user.click(formButton);
+            expect(screen.getByTestId('form-devtools').textContent).toBe('off');
+            expect(screen.getByTestId('timezone-devtools').textContent).toBe('on');
+        });
+    });
+    describe('메뉴 토글', () => {
+        it('toggleMenu로 메뉴를 토글할 수 있다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestConsumer, null)));
+            expect(screen.getByTestId('menu-open').textContent).toBe('closed');
+            const toggleButton = screen.getByRole('button', { name: 'Toggle Menu' });
+            await user.click(toggleButton);
+            expect(screen.getByTestId('menu-open').textContent).toBe('open');
+            await user.click(toggleButton);
+            expect(screen.getByTestId('menu-open').textContent).toBe('closed');
+        });
+    });
+    describe('useRegisterForm', () => {
+        it('form이 등록되지 않으면 getForm은 null을 반환한다', () => {
+            function TestGetForm() {
+                const { getForm } = useDevTools();
+                const form = getForm();
+                return React.createElement("div", null, form ? 'Form exists' : 'No form');
+            }
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestGetForm, null)));
+            expect(screen.getByText('No form')).toBeTruthy();
+        });
+    });
+});

package/dist/components/dev/DevToolsProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DevToolsProvider, useRegisterForm, useDevTools } from './DevToolsProvider';
+export type { DevToolForm } from './DevToolsProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dev/DevToolsProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/DevToolsProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC/F,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/dev/DevToolsProvider/index.js

@@ -0,0 +1 @@
+export { default as DevToolsProvider, useRegisterForm, useDevTools } from './DevToolsProvider';

package/dist/components/dev/FormDevTools/FormDevTools.d.ts

@@ -32,8 +32,6 @@ export type Props = {
     }) => Promise<Record<string, any>> | Record<string, any>;
     /** Validation 스키마 정보 (zod, yup 등) - 선택사항 */
     validationSchema?: Record<string, any>;
-    /** 표시 위치 (기본값: 'bottom-left') */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** 패널 제목 (기본값: 'Form DevTools') */
     title?: string;
 };
@@ -43,9 +41,9 @@ export type Props = {
  *
  * @example
  * ```tsx
- * // Vite 프로젝트 - 간단한 사용법
  * import { useForm } from 'react-hook-form';
- * import { FormDevTools } from '@blastlabs/utils/components/dev';
+ * import { useRegisterForm } from '@blastlabs/utils/components/dev';
+ * import FormDevTools from '@blastlabs/utils/components/dev';
  *
  * function MyForm() {
  *   const form = useForm({
@@ -56,81 +54,18 @@ export type Props = {
  *     }
  *   });
  *
- *   return (
- *     <form onSubmit={form.handleSubmit(onSubmit)}>
- *       <input {...form.register('username')} />
- *       <input {...form.register('email')} />
- *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && <FormDevTools form={form} />}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Mock 데이터 생성 기능 포함
- * function MyForm() {
- *   const form = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
- *   });
+ *   // 페이지에서 form 주입
+ *   useRegisterForm(form);
  *
  *   return (
  *     <form onSubmit={form.handleSubmit(onSubmit)}>
  *       <input {...form.register('username')} />
  *       <input {...form.register('email')} />
  *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && (
- *         <FormDevTools
- *           form={form}
- *           generateMock={async ({ values, originalValues }) => {
- *             // Mock 데이터 생성 로직
- *             return {
- *               username: 'test_user',
- *               email: 'test@example.com',
- *               age: 25,
- *             };
- *           }}
- *         />
- *       )}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // 수정 폼 예시
- * function EditForm({ userData }) {
- *   const form = useForm();
- *
- *   useEffect(() => {
- *     form.reset(userData);
- *   }, [userData]);
- *
- *   return (
- *     <form onSubmit={form.handleSubmit(onSubmit)}>
- *       <input {...form.register('username')} />
- *       <input {...form.register('email')} />
- *       <button type="submit">Update</button>
- *
- *       {process.env.NODE_ENV === 'development' && (
- *         <FormDevTools
- *           form={form}
- *           position="top-right"
- *           title="Edit Form Debug"
- *         />
- *       )}
  *     </form>
  *   );
  * }
  * ```
  */
-export default function FormDevTools({ form, validationSchema, generateMock, position, title }: Props): React.JSX.Element;
+export default function FormDevTools({ form, validationSchema, generateMock, title }: Props): React.JSX.Element;
 //# sourceMappingURL=FormDevTools.d.ts.map

package/dist/components/dev/FormDevTools/FormDevTools.d.ts.map

@@ -1 +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,qBA8gBtI"}
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAyB3D,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,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAme5G"}