Merge pull request #117 from openinfradev/bugfix

Bugfix. Resolve TStepBox and TTabBox onChange not working in Storybook

Author: Siyeop

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.9.1",
+    "version": "0.9.2",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",

src/components/data-container/step-box/TStepBox.tsx

@@ -12,6 +12,7 @@ const TStepBox = ({
     nextButtonLabel = 'Next',
     completeButtonLabel = 'Complete',
     value,
+    onChange,
     children,
     style,
     className,
@@ -24,6 +25,7 @@ const TStepBox = ({
         nextButtonLabel,
         completeButtonLabel,
         value,
+        onChange,
         children,
         style,
         className,
@@ -43,11 +45,12 @@ const TStepBox = ({
         let content = null;
 
         if (children?.length === undefined) {
+            // children 안 들어옴
             if (!children) {
-                // children 안들어옴
                 return null;
             }
-            content = children; // children 1개
+            // children 1개
+            content = children;
         } else {
             // children 2개 이상
             content = children[value - 1];

src/components/data-container/step-box/TStepBoxContext.ts

@@ -16,7 +16,7 @@ type stepBoxContext = {
 export const tabBoxContext = createContext<stepBoxContext>({
     totalStep: 0,
     currentStep: 0,
-    onChangeCurrentStep: null,
+    onChangeCurrentStep: () => {},
     prevButtonLabel: '',
     nextButtonLabel: '',
     completeButtonLabel: '',

stories/components/data-container/step-box/TStepBox.stories.tsx

@@ -16,8 +16,12 @@ type Story = StoryObj<typeof TStepBox>;
 const Template = (args) => {
     const [stepNumber, setStepNumber] = useState<number>(1);
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {onChange, ...restArgs} = args;
+
     return (
         <>
+            {stepNumber}
             <TStepBox
                 value={stepNumber}
                 onChange={setStepNumber}
@@ -29,7 +33,7 @@ const Template = (args) => {
                     '정책 선택',
                     '확인 및 생성',
                 ]}
-                {...args}
+                {...restArgs}
             >
                 <TStepBoxItem contentDirection={'top-bottom'}>
                     <div>Step 1-1 Content</div>
@@ -68,7 +72,7 @@ const Template = (args) => {
                     '정책 선택',
                     '확인 및 생성',
                 ]}
-                {...args}
+                {...restArgs}
             >
                 <TStepBoxItem contentDirection={'left-right'}>
                     <div>Step 1-1 Content</div>

stories/components/data-container/tab-box/TTabBox.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
 
-import useInputState from '@/common/hook/UseInputState';
 import TTabBox from '@/components/data-container/tab-box/TTabBox';
 import type {TTabBoxValue} from '@/components/data-container/tab-box/TTabBox.interface';
 import TTabItem from '@/components/data-container/tab-box/TTabItem';
@@ -15,11 +15,14 @@ export default meta;
 type Story = StoryObj<typeof TTabBox>;
 
 const Template = (args) => {
-    const tab = useInputState<TTabBoxValue>(0);
+    const [tab, setTab] = useState<TTabBoxValue>(0);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {onChange, ...restArgs} = args;
 
     return (
         <>
-            <TTabBox {...tab} {...args}>
+            <TTabBox value={tab} onChange={setTab} {...restArgs}>
                 <TTabItem label={'One'} content={<div>Tab One</div>} />
                 <TTabItem label={'Two'} content={<div>Tab Two</div>} />
                 <TTabItem label={'Three'} content={<div>Tab Three</div>} />