@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.2

package/dist/temp/src/components/forms-and-input/input-base/InputBase.d.ts

@@ -25,7 +25,7 @@ interface InputSideCustomSlot {
     placement?: 'inside' | 'outside';
 }
 type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
-type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
+type InputTrailingSlotType = InputSideButtonSlot | InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
 interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     required?: boolean;
     label?: string;

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -32,7 +32,7 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
             input.removeEventListener('input', syncFromInput);
         };
     }, [props.value]);
-    const renderOutsideSlot = (slot) => {
+    const renderOutsideSlot = (slot, position) => {
         if (slot.type === 'custom' && slot.placement !== 'outside') {
             return null;
         }
@@ -40,7 +40,7 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
             case 'button':
                 return (_jsx("button", { type: slot.isSubmit ? 'submit' : 'button', className: classNames('ncua-input__button', `ncua-input__button--${size}`), onClick: slot.onClick, children: slot.label }));
             case 'text':
-                return (_jsx("span", { className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`), children: slot.text }));
+                return (_jsx("span", { className: classNames(`ncua-input__${position}-text`, `ncua-input__${position}-text--${size}`), children: slot.text }));
             case 'custom':
                 return slot.children;
             default:
@@ -51,7 +51,10 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
         switch (slot.type) {
             case 'icon': {
                 const SlotIcon = slot.icon;
-                return (_jsx("div", { className: "ncua-input__icon-wrap", children: _jsx(SlotIcon, { className: classNames(`ncua-input__${position}-icon`, slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: slot.size ?? iconSvgSize[size], height: slot.size ?? iconSvgSize[size] }) }));
+                return (_jsx("div", { className: "ncua-input__icon-wrap", children: _jsx(SlotIcon, { className: classNames(`ncua-input__${position}-icon`, 
+                        // color 를 지정하지 않았을 때만 상태별 색(Placeholder/Filled/Focused/Disabled)을 CSS 에 맡긴다.
+                        // 지정한 경우에는 이 클래스를 붙이지 않아 지정 색이 그대로 유지된다.
+                        { 'ncua-input__slot-icon': !slot.color }, slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: slot.size ?? iconSvgSize[size], height: slot.size ?? iconSvgSize[size] }) }));
             }
             case 'custom':
                 if (slot.placement !== 'inside') {
@@ -87,8 +90,9 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
             'full-width': fullWidth,
             'ncua-input__trailing-button': trailingElement?.type === 'button',
             'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+            'ncua-input__trailing-text-wrap': trailingElement?.type === 'text',
             'has-value': hasValue,
-        }, className), children: [renderLabel(), _jsxs("div", { className: "ncua-input__content-wrap", children: [_jsxs("div", { className: "ncua-input__content", children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", { className: classNames('ncua-input__field', `ncua-input__field--${size}`), children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", { ref: (node) => {
+        }, className), children: [renderLabel(), _jsxs("div", { className: "ncua-input__content-wrap", children: [_jsxs("div", { className: "ncua-input__content", children: [leadingElement && renderOutsideSlot(leadingElement, 'leading'), _jsxs("div", { className: classNames('ncua-input__field', `ncua-input__field--${size}`), children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", { ref: (node) => {
                                             if (typeof ref === 'function') {
                                                 ref(node);
                                             }
@@ -96,6 +100,6 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
                                                 ref.current = node;
                                             }
                                             inputRef.current = node;
-                                        }, type: "text", disabled: disabled, maxLength: maxLength, ...props }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')] }), trailingElement && renderOutsideSlot(trailingElement)] }), showTextCount && maxLength && (_jsxs("div", { className: "ncua-input__field-text-count", children: [_jsx("output", { className: "ncua-input__field-text-count-current", children: textCount }), _jsxs("span", { children: ["/", maxLength] })] }))] }), hintText && (_jsx(HintText, { className: "ncua-input__hint-text", destructive: destructive, children: hintText }))] }));
+                                        }, type: "text", disabled: disabled, maxLength: maxLength, ...props }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')] }), trailingElement && renderOutsideSlot(trailingElement, 'trailing')] }), showTextCount && maxLength && (_jsxs("div", { className: "ncua-input__field-text-count", children: [_jsx("output", { className: "ncua-input__field-text-count-current", children: textCount }), _jsxs("span", { children: ["/", maxLength] })] }))] }), hintText && (_jsx(HintText, { className: "ncua-input__hint-text", destructive: destructive, children: hintText }))] }));
 });
 export { InputBase };

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -4,6 +4,7 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
 import { InputBase } from '../InputBase';
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -107,6 +108,42 @@ describe('InputBase — 아이콘 사이즈', () => {
         view.unmount();
     });
 });
+describe('InputBase — 슬롯 아이콘 상태 색상', () => {
+    // 상태별 색은 CSS 가 결정한다. jsdom 에서는 스타일시트를 로드하지 않으므로
+    // "상태 규칙을 타는 클래스가 붙었는지" 와 "지정 색이 인라인으로 남았는지" 로 검증한다.
+    const leftIconOf = (container) => container.querySelector('.ncua-input__left-icon');
+    it('color 를 지정하지 않으면 상태 색상 클래스가 붙는다', () => {
+        // Given/When: color 없이 슬롯 아이콘을 렌더하면
+        const view = mountInputBase({ leadingElement: { type: 'icon', icon: SearchLg } });
+        // Then: 상태 규칙을 타는 클래스가 붙고, 인라인 색은 지정되지 않는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(icon?.hasAttribute('color')).toBe(false);
+        view.unmount();
+    });
+    it('color 를 지정하면 상태 색상 클래스가 붙지 않고 지정 색이 유지된다', () => {
+        // Given/When: color 를 지정해 렌더하면
+        const view = mountInputBase({
+            leadingElement: { type: 'icon', icon: SearchLg, color: 'blue500' },
+        });
+        // Then: 상태 규칙에서 제외되고 지정한 색이 그대로 남는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(false);
+        expect(icon?.getAttribute('color')).toBe(COLOR.blue500);
+        view.unmount();
+    });
+    it('slot.className 을 함께 주어도 상태 색상 클래스가 유지된다', () => {
+        // Given/When: className 을 추가로 넘기면
+        const view = mountInputBase({
+            leadingElement: { type: 'icon', icon: SearchLg, className: 'my-icon' },
+        });
+        // Then: 두 클래스가 모두 붙는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(icon?.classList.contains('my-icon')).toBe(true);
+        view.unmount();
+    });
+});
 describe('InputBase — has-value 상태 클래스', () => {
     const typeInto = (container, text) => {
         const input = container.querySelector('input');
@@ -152,3 +189,45 @@ describe('InputBase — has-value 상태 클래스', () => {
         view.unmount();
     });
 });
+describe('InputBase — 텍스트 슬롯', () => {
+    it('leadingElement 텍스트는 leading 클래스와 wrap 클래스가 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            leadingElement: { type: 'text', text: 'https://' },
+        });
+        const text = container.querySelector('.ncua-input__leading-text');
+        expect(text?.textContent).toBe('https://');
+        expect(container.querySelector('.ncua-input__leading-text-wrap')).not.toBeNull();
+        unmount();
+    });
+    it('trailingElement 텍스트는 trailing 클래스와 wrap 클래스가 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        const text = container.querySelector('.ncua-input__trailing-text');
+        expect(text?.textContent).toBe('px');
+        expect(container.querySelector('.ncua-input__trailing-text-wrap')).not.toBeNull();
+        // leading 클래스가 섞이면 모서리·테두리 방향이 반대가 된다
+        expect(container.querySelector('.ncua-input__leading-text')).toBeNull();
+        unmount();
+    });
+    it('trailingElement 텍스트는 입력 필드 뒤에 온다', () => {
+        const { container, unmount } = mountInputBase({
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        const content = container.querySelector('.ncua-input__content');
+        const children = Array.from(content?.children ?? []);
+        const fieldIndex = children.findIndex((el) => el.classList.contains('ncua-input__field'));
+        const textIndex = children.findIndex((el) => el.classList.contains('ncua-input__trailing-text'));
+        expect(fieldIndex).toBeGreaterThanOrEqual(0);
+        expect(textIndex).toBeGreaterThan(fieldIndex);
+        unmount();
+    });
+    it('사이즈 modifier 가 함께 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            size: 'sm',
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        expect(container.querySelector('.ncua-input__trailing-text--sm')).not.toBeNull();
+        unmount();
+    });
+});

package/dist/temp/src/components/forms-and-input/password-input/PasswordInput.js

@@ -19,8 +19,8 @@ export const PasswordInput = forwardRef(({ size = 'xs', ...props }, ref) => {
     return (_jsx(InputBase, { ref: ref, size: size, type: isVisible ? 'text' : 'password', leadingElement: {
             type: 'icon',
             icon: Lock01,
-            // 색은 CSS가 결정한다 — 여기서 props.value로 판정하면 uncontrolled Input에서 영원히 빈 값 취급된다
-            className: 'ncua-input__password-lock-icon',
+            // color 를 넘기지 않아 슬롯 아이콘 공통 규칙(상태별 색)을 그대로 따른다.
+            // 여기서 props.value 로 판정하면 uncontrolled Input 에서 영원히 빈 값 취급된다.
         }, trailingElement: {
             type: 'custom',
             placement: 'inside',

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.js

@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { PasswordInput } from '../PasswordInput';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountPasswordInput(props = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(PasswordInput, props));
+    });
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, unmount };
+}
+describe('PasswordInput — 자물쇠 아이콘 색상', () => {
+    // 자물쇠 색은 CSS 가 결정한다. 인라인 color 를 넘기면 상태 규칙이 무시되므로,
+    // "인라인 색이 없고 슬롯 아이콘 공통 클래스를 탄다" 는 것이 색상 반영의 전제다.
+    it('자물쇠에 인라인 색을 넘기지 않고 슬롯 아이콘 공통 클래스를 탄다', () => {
+        // Given/When: 기본 상태로 렌더하면
+        const view = mountPasswordInput();
+        // Then: 상태 규칙을 타는 클래스가 붙고 인라인 색은 없다
+        const lockIcon = view.container.querySelector('.ncua-input__left-icon');
+        expect(lockIcon).not.toBeNull();
+        expect(lockIcon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(lockIcon?.hasAttribute('color')).toBe(false);
+        view.unmount();
+    });
+    // 값이 있는 채로 비활성화되면 has-value 가 살아 있어 자물쇠가 진하게 남던 문제
+    it('값이 있는 채로 disabled 여도 자물쇠가 상태 규칙 대상으로 남는다', () => {
+        // Given/When: 값이 있는 비활성화 상태로 렌더하면
+        const view = mountPasswordInput({ value: 'secret', disabled: true, onChange: vi.fn() });
+        // Then: 루트에 is-disabled 와 has-value 가 함께 붙고, 자물쇠는 공통 클래스를 유지한다
+        const root = view.container.querySelector('.ncua-input');
+        expect(root?.classList.contains('is-disabled')).toBe(true);
+        expect(root?.classList.contains('has-value')).toBe(true);
+        expect(view.container.querySelector('.ncua-input__left-icon')?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        view.unmount();
+    });
+});