Merge pull request #465 from dev-five-git/fix-props-warning-components

Fix Stepper component warning

Author: owjs3901

.changeset/light-things-see.md

@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Fix component warning

.github/workflows/publish.yml

@@ -70,8 +70,8 @@ jobs:
           node-version: 22
           cache: 'pnpm'
       - run: pnpm i
+      - run: pnpm build
       - run: |
-          pnpm build
           pnpm lint
           # rust coverage issue
           echo 'max_width = 100000' > .rustfmt.toml
@@ -83,8 +83,8 @@ jobs:
           echo 'merge_derives = true' >> .rustfmt.toml
           echo 'use_small_heuristics = "Default"' >> .rustfmt.toml
           cargo fmt
-          pnpm test
           rm -rf .rustfmt.toml
+      - run: pnpm test
       - name: Build Landing
         run: |
           pnpm -F components build-storybook

packages/components/src/components/Stepper/__tests__/index.browser.test.tsx

@@ -14,7 +14,7 @@ describe('Stepper', () => {
       <Stepper>
         <StepperContainer>
           <StepperDecreaseButton />
-          <StepperInput editable={false} />
+          <StepperInput />
           <StepperIncreaseButton />
         </StepperContainer>
       </Stepper>,
@@ -24,7 +24,7 @@ describe('Stepper', () => {
 
   it('should throw error if children are used outside of StepperProvider', () => {
     expect(() => {
-      render(<StepperInput editable={false} />)
+      render(<StepperInput />)
     }).toThrow('useStepper must be used within a StepperProvider')
   })
 

packages/components/src/components/Stepper/index.tsx

@@ -131,9 +131,7 @@ function StepperIncreaseButton({ ...props }: ComponentProps<typeof Button>) {
   )
 }
 
-interface StepperInputProps extends ComponentProps<typeof Input> {
-  editable?: boolean
-}
+type StepperInputProps = ComponentProps<typeof Input>
 
 function StepperInput({ className, ...props }: StepperInputProps) {
   const { value, setValue, type } = useStepper()
@@ -144,12 +142,15 @@ function StepperInput({ className, ...props }: StepperInputProps) {
     h: 'fit-content',
     styleOrder: 3,
   })
-  const editable = type === 'input'
-  const Comp = editable ? Input : 'div'
+  const isInput = type === 'input'
+  const Comp = isInput ? Input : 'div'
+  if (isInput) {
+    // div tag doesn't support allowClear prop
+    Object.assign(props, { allowClear: false })
+  }
 
   return (
     <Comp
-      allowClear={false}
       aria-label="Stepper value"
       className={clsx(
         css({
@@ -163,17 +164,20 @@ function StepperInput({ className, ...props }: StepperInputProps) {
             },
           },
         }),
-        !editable && notEditableClass,
+        !isInput && notEditableClass,
         className,
       )}
       dangerouslySetInnerHTML={
-        editable ? undefined : { __html: Number(value).toString() }
+        isInput ? undefined : { __html: Number(value).toString() }
       }
       data-value={value}
-      onChange={(e) => setValue(Number(e.target.value))}
-      readOnly={!editable}
+      onChange={(e) => {
+        setValue(Number(e.target.value))
+      }}
+      readOnly={!isInput}
       type="number"
-      value={value}
+      // Fix prefix 0 issue
+      value={value.toString()}
       {...props}
     />
   )