feat: add left and right addon support to number input

saas-js · Feb 21, 2024 · 73d09d9 · 73d09d9
1 parent a733ca1
commit 73d09d9
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/.changeset/purple-geckos-nail.md b/.changeset/purple-geckos-nail.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/forms': minor
+'@saas-ui/react': minor
+---
+
+Added support for leftAddon and rightAddon on number input types
diff --git a/packages/saas-ui-forms/src/number-input/number-input.stories.tsx b/packages/saas-ui-forms/src/number-input/number-input.stories.tsx
@@ -1,11 +1,18 @@
-import { Container } from '@chakra-ui/react'
+import {
+  Container,
+  InputLeftAddon,
+  InputLeftElement,
+  InputRightAddon,
+  InputRightElement,
+} from '@chakra-ui/react'
 import * as React from 'react'
 import { Story, Meta } from '@storybook/react'
 
 import { NumberInput } from '.'
 
 export default {
   title: 'Components/Forms/NumberInput',
+  component: NumberInput,
   decorators: [
     (Story: any) => (
       <Container mt="40px">
@@ -15,25 +22,39 @@ export default {
   ],
 } as Meta
 
-const Template: Story = (args) => <NumberInput aria-label="Number" {...args} />
+export const Basic = {}
 
-export const Basic = Template.bind({})
-Basic.args = {}
+export const HideStepper = {
+  args: {
+    hideStepper: true,
+  },
+}
 
-export const HideStepper = Template.bind({})
-HideStepper.args = {
-  hideStepper: true,
+export const MinMax = {
+  args: {
+    defaultValue: 5,
+    min: 0,
+    max: 10,
+  },
+}
+export const WithFormatter = {
+  args: {
+    format: (value: any) => `$${value}`, // use any currency formatter here
+    parse: (value: any) => value.replace('$', ''),
+  },
 }
 
-export const MinMax = Template.bind({})
-MinMax.args = {
-  defaultValue: 5,
-  min: 0,
-  max: 10,
+export const WithAddons = {
+  args: {
+    leftAddon: <InputLeftAddon>$</InputLeftAddon>,
+    rightAddon: <InputRightAddon>USD</InputRightAddon>,
+    hideStepper: true,
+  },
 }
 
-export const WithFormatter = Template.bind({})
-WithFormatter.args = {
-  format: (value: any) => `$${value}`, // use any currency formatter here
-  parse: (value: any) => value.replace('$', ''),
+export const WithElements = {
+  args: {
+    leftAddon: <InputLeftElement>$</InputLeftElement>,
+    rightAddon: <InputRightElement>USD</InputRightElement>,
+  },
 }
diff --git a/packages/saas-ui-forms/src/number-input/number-input.tsx b/packages/saas-ui-forms/src/number-input/number-input.tsx
@@ -9,13 +9,18 @@ import {
   NumberDecrementStepper,
   NumberInputProps as ChakraNumberInputProps,
   NumberInputFieldProps,
+  InputGroup,
+  InputLeftAddon,
+  InputRightAddon,
+  InputLeftElement,
+  InputRightElement,
 } from '@chakra-ui/react'
 
 import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
 
 interface NumberInputOptions {
   /**
-   * Hide the stepper.
+   * Hide the stepper. This will be true when `rightAddon` is provided.
    */
   hideStepper?: boolean
   /**
@@ -34,8 +39,22 @@ interface NumberInputOptions {
    * Props to pass to the NumberInputField component.
    */
   fieldProps?: NumberInputFieldProps
+  /**
+   * Either `InputLeftAddon` or `InputLeftElement`
+   */
+  leftAddon?: React.ReactNode
+  /**
+   * Either `InputRightAddon` or `InputRightElement`
+   */
+  rightAddon?: React.ReactNode
 }
 
+const Input = forwardRef<NumberInputFieldProps, 'input'>((props, ref) => (
+  <NumberInputField ref={ref} {...props} />
+))
+Input.displayName = 'NumberInputField'
+Input.id = 'Input'
+
 export interface NumberInputProps
   extends ChakraNumberInputProps,
     NumberInputOptions {}
@@ -45,6 +64,8 @@ export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
     hideStepper = false,
     incrementIcon = <ChevronUpIcon />,
     decrementIcon = <ChevronDownIcon />,
+    leftAddon,
+    rightAddon,
     placeholder,
     fieldProps: _fieldProps,
     ...rest
@@ -54,14 +75,17 @@ export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
 
   return (
     <ChakraNumberInput {...rest} ref={ref}>
-      <NumberInputField {...fieldProps} />
-
-      {!hideStepper && (
+      <InputGroup>
+        {leftAddon}
+        <Input {...fieldProps} />
+        {rightAddon}
+      </InputGroup>
+      {!hideStepper && !rightAddon ? (
         <NumberInputStepper>
           <NumberIncrementStepper children={incrementIcon} />
           <NumberDecrementStepper children={decrementIcon} />
         </NumberInputStepper>
-      )}
+      ) : null}
     </ChakraNumberInput>
   )
 })

diff --git a/packages/saas-ui-forms/stories/field.stories.tsx b/packages/saas-ui-forms/stories/field.stories.tsx
@@ -9,7 +9,7 @@ import * as React from 'react'
 import * as yup from 'yup'
 import { z } from 'zod'
 
-import { FormLayout, SubmitButton, FormProps, createForm } from '../src'
+import { FormLayout, SubmitButton, createForm } from '../src'
 
 export default {
   title: 'Components/Forms/Field',
@@ -66,6 +66,7 @@ export const Basic = () => (
           min={1}
           max={10}
           placeholder="Number"
+          leftAddon={<InputLeftElement>$</InputLeftElement>}
         />
         <Field name="textarea" label="Textarea" type="textarea" />
         <Field name="switch" label="Switch" type="switch" />