@saas-ui/forms 2.3.12 → 2.4.0

package/dist/yup/index.d.ts

@@ -19,7 +19,7 @@ export { yupResolver } from '@hookform/resolvers/yup';
 
 interface NumberInputOptions {
     /**
-     * Hide the stepper.
+     * Hide the stepper. This will be true when `rightAddon` is provided.
      */
     hideStepper?: boolean;
     /**
@@ -38,6 +38,14 @@ interface NumberInputOptions {
      * Props to pass to the NumberInputField component.
      */
     fieldProps?: NumberInputFieldProps$1;
+    /**
+     * Either `InputLeftAddon` or `InputLeftElement`
+     */
+    leftAddon?: React$1.ReactNode;
+    /**
+     * Either `InputRightAddon` or `InputRightElement`
+     */
+    rightAddon?: React$1.ReactNode;
 }
 interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
 }

package/dist/zod/index.d.ts

@@ -19,7 +19,7 @@ export { zodResolver } from '@hookform/resolvers/zod';
 
 interface NumberInputOptions {
     /**
-     * Hide the stepper.
+     * Hide the stepper. This will be true when `rightAddon` is provided.
      */
     hideStepper?: boolean;
     /**
@@ -38,6 +38,14 @@ interface NumberInputOptions {
      * Props to pass to the NumberInputField component.
      */
     fieldProps?: NumberInputFieldProps$1;
+    /**
+     * Either `InputLeftAddon` or `InputLeftElement`
+     */
+    leftAddon?: React$1.ReactNode;
+    /**
+     * Either `InputRightAddon` or `InputRightElement`
+     */
+    rightAddon?: React$1.ReactNode;
 }
 interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.3.12",
+  "version": "2.4.0",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -104,7 +104,7 @@
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
     "@hookform/resolvers": "^3.3.4",
-    "@saas-ui/core": "2.3.6",
+    "@saas-ui/core": "2.4.0",
     "react-hook-form": "^7.50.1"
   },
   "peerDependencies": {

package/src/auto-form.tsx

@@ -27,8 +27,11 @@ interface AutoFormOptions {
 
 export interface AutoFormProps<
   TFieldValues extends FieldValues,
-  TContext extends object = object
-> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>,
+  TContext extends object = object,
+> extends Omit<
+      FormProps<TFieldValues, TContext>,
+      'schema' | 'children' | 'fieldResolver'
+    >,
     AutoFormOptions {
   children?: React.ReactNode
 }
@@ -40,7 +43,7 @@ export interface AutoFormProps<
 export const AutoForm = forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
+    TContext extends object = object,
   >(
     props: AutoFormProps<TFieldValues, TContext>,
     ref: React.ForwardedRef<HTMLFormElement>

package/src/default-fields.tsx

@@ -31,9 +31,11 @@ import {
   NativeSelectProps,
   SelectButtonProps,
   SelectListProps,
+  SelectOption,
 } from './select'
 
 import { createField } from './create-field'
+import { FieldOption, FieldOptions } from './types'
 
 export interface InputFieldProps extends InputProps {
   type?: string
@@ -95,6 +97,7 @@ export interface SelectFieldProps extends SelectProps {
 export const SelectField = createField<SelectFieldProps>(
   forwardRef((props, ref) => {
     const { buttonProps, listProps, ...rest } = props
+
     return (
       <Select ref={ref} {...rest}>
         <SelectButton {...buttonProps} />

package/src/field-resolver.ts

@@ -1,6 +1,9 @@
-import { BaseFieldProps } from './types'
+import { BaseFieldProps, ValueOf } from './types'
 
 import { get } from '@chakra-ui/utils'
+import { ArrayFieldProps } from './array-field'
+import { ObjectFieldProps } from './object-field'
+import { DefaultFields } from './default-fields'
 
 export type FieldResolver = {
   getFields(): BaseFieldProps[]
@@ -9,16 +12,32 @@ export type FieldResolver = {
 
 export type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver
 
-interface SchemaField extends BaseFieldProps {
-  items?: SchemaField[]
-  properties?: Record<string, SchemaField>
-}
+type FieldTypes<FieldDefs = DefaultFields> = ValueOf<{
+  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
+    ? { type?: K } & Omit<Props, 'name'>
+    : never
+}>
+
+type SchemaField<FieldDefs = DefaultFields> =
+  | FieldTypes<FieldDefs>
+  | (Omit<ObjectFieldProps, 'name' | 'children'> & {
+      type: 'object'
+      properties?: Record<string, SchemaField<FieldDefs>>
+    })
+  | (Omit<ArrayFieldProps, 'name' | 'children'> & {
+      type: 'array'
+      items?: SchemaField<FieldDefs>
+    })
 
-export type ObjectSchema = Record<string, SchemaField>
+export type ObjectSchema<FieldDefs = DefaultFields> = Record<
+  string,
+  SchemaField<FieldDefs>
+>
 
 const mapFields = (schema: ObjectSchema): BaseFieldProps[] =>
   schema &&
-  Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
+  Object.entries(schema).map(([name, props]) => {
+    const { items, label, title, ...field } = props as any
     return {
       ...field,
       name,

package/src/number-input/number-input.stories.tsx

@@ -1,4 +1,10 @@
-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'
 
@@ -6,6 +12,7 @@ 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>,
+  },
 }

package/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>
   )
 })