@saas-ui/forms 2.0.0-next.5 → 2.0.0-next.7

package/src/form.tsx

@@ -5,7 +5,6 @@ import { cx, runIfFn } from '@chakra-ui/utils'
 
 import {
   useForm,
-  FormProvider,
   UseFormProps,
   UseFormReturn,
   FieldValues,
@@ -15,14 +14,21 @@ import {
   ResolverResult,
   WatchObserver,
 } from 'react-hook-form'
-import { objectFieldResolver, FieldResolver } from './field-resolver'
+import { FormProvider } from './form-context'
+import { FieldResolver } from './field-resolver'
 import { MaybeRenderProp } from '@chakra-ui/react-utils'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 
-import { FieldProps } from './types'
+import { FieldProps, DefaultFieldOverrides } from './types'
 
 import { Field as DefaultField } from './field'
+import { FormLayout } from './layout'
+import { AutoFields } from './fields'
+import { SubmitButton } from './submit-button'
+import { DisplayIf, DisplayIfProps } from './display-if'
+import { ArrayField, ArrayFieldProps } from './array-field'
+import { ObjectField, ObjectFieldProps } from './object-field'
 
 export interface FormRenderContext<
   TFieldValues extends FieldValues = FieldValues,
@@ -30,6 +36,9 @@ export interface FormRenderContext<
   TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormReturn<TFieldValues, TContext> {
   Field: React.FC<TFieldTypes>
+  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
+  ArrayField: React.FC<ArrayFieldProps<TFieldValues>>
+  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
 }
 
 interface FormOptions<
@@ -39,7 +48,7 @@ interface FormOptions<
   TFieldTypes = FieldProps<TFieldValues>
 > {
   /**
-   * The form schema, supports Yup, Zod, and AJV.
+   * The form schema.
    */
   schema?: TSchema
   /**
@@ -64,6 +73,14 @@ interface FormOptions<
   children?: MaybeRenderProp<
     FormRenderContext<TFieldValues, TContext, TFieldTypes>
   >
+  /**
+   * The field resolver, used to resolve the fields from schemas.
+   */
+  fieldResolver?: FieldResolver
+  /**
+   * Field overrides
+   */
+  fields?: DefaultFieldOverrides
 }
 
 export interface FormProps<
@@ -90,12 +107,14 @@ export const Form = forwardRef(
     TSchema = any,
     TFieldTypes = FieldProps<TFieldValues>
   >(
-    props: FormProps<TFieldValues, TContext, TSchema>,
+    props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
     ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
       mode = 'all',
       resolver,
+      fieldResolver,
+      fields,
       reValidateMode,
       shouldFocusError,
       shouldUnregister,
@@ -130,10 +149,6 @@ export const Form = forwardRef(
       resetOptions,
     }
 
-    if (schema && !resolver) {
-      form.resolver = Form.getResolver?.(schema)
-    }
-
     const methods = useForm<TFieldValues, TContext>(form)
     const { handleSubmit } = methods
 
@@ -148,16 +163,34 @@ export const Form = forwardRef(
       return () => subscription?.unsubscribe()
     }, [methods, onChange])
 
+    let _children = children
+    if (!_children && fieldResolver) {
+      _children = (
+        <FormLayout>
+          <AutoFields />
+          <SubmitButton {...fields?.submit} />
+        </FormLayout>
+      )
+    }
+
     return (
-      <FormProvider {...methods}>
+      <FormProvider
+        {...methods}
+        schema={schema}
+        fieldResolver={fieldResolver}
+        fields={fields}
+      >
         <chakra.form
           ref={ref}
           onSubmit={handleSubmit(onSubmit, onError)}
           {...rest}
           className={cx('sui-form', props.className)}
         >
-          {runIfFn(children, {
+          {runIfFn(_children, {
             Field: DefaultField as any,
+            DisplayIf: DisplayIf,
+            ArrayField: ArrayField as any,
+            ObjectField: ObjectField as any,
             ...methods,
           })}
         </chakra.form>
@@ -175,12 +208,8 @@ export const Form = forwardRef(
   }
 ) => React.ReactElement) & {
   displayName?: string
-  getResolver?: GetResolver
-  getFieldResolver: GetFieldResolver
 }
 
-Form.getFieldResolver = objectFieldResolver
-
 Form.displayName = 'Form'
 
 export type GetResolver = <
@@ -193,5 +222,3 @@ export type GetResolver = <
   context: TContext | undefined,
   options: ResolverOptions<TFieldValues>
 ) => Promise<ResolverResult<TFieldValues>>
-
-export type GetFieldResolver = (schema: any) => FieldResolver

package/src/index.ts

@@ -2,8 +2,7 @@ export * from './display-field'
 export * from './field'
 export * from './fields'
 export * from './fields-context'
-export * from './form'
-export * from './auto-form'
+// export * from './auto-form'
 export * from './layout'
 export * from './submit-button'
 export * from './array-field'
@@ -33,13 +32,10 @@ export {
   SwitchField,
   TextareaField,
   defaultFieldTypes,
-} from './default-fields'
-
-export type {
-  DefaultFields,
-  InputFieldProps,
-  NumberInputFieldProps,
-  PinFieldProps,
+  type DefaultFields,
+  type InputFieldProps,
+  type NumberInputFieldProps,
+  type PinFieldProps,
 } from './default-fields'
 
 export type {
@@ -49,11 +45,19 @@ export type {
   FieldOptions,
 } from './types'
 
-export { createForm } from './create-form'
-export type { CreateFormProps } from './create-form'
+export { createForm, type CreateFormProps } from './create-form'
+export { createField, type CreateFieldOptions } from './create-field'
+
+export {
+  Form as BaseForm,
+  type FormProps,
+  type FormRenderContext,
+} from './form'
+
+export { FormProvider, useFormContext } from './form-context'
 
-export { createField } from './create-field'
-export type { CreateFieldOptions } from './create-field'
+import { createForm } from './create-form'
+export const Form = createForm()
 
 export type {
   BatchFieldArrayUpdate,
@@ -158,9 +162,7 @@ export {
   useController,
   useFieldArray,
   useForm,
-  useFormContext,
   useFormState,
   useWatch,
   Controller,
-  FormProvider,
 } from 'react-hook-form'

package/src/object-field.tsx

@@ -11,9 +11,13 @@ import { FormLayout } from './layout'
 import { BaseFieldProps } from './types'
 
 import { mapNestedFields } from './utils'
+import { FieldPath, FieldValues } from 'react-hook-form'
 
-export interface ObjectFieldProps extends BaseFieldProps {
-  name: string
+export interface ObjectFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends BaseFieldProps {
+  name: TName
   children: React.ReactNode
   columns?: ResponsiveValue<number>
   spacing?: ResponsiveValue<string | number>

package/src/password-input/password-input.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import { forwardRef, InputGroup, Input, InputProps } from '@chakra-ui/react'
 
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+import { ViewIcon, ViewOffIcon } from '@saas-ui/core/icons'
 
 import { InputRightButton } from '../input-right-button'
 

package/src/select/select-context.tsx

@@ -0,0 +1,130 @@
+import {
+  HTMLChakraProps,
+  useControllableState,
+  useFormControl,
+} from '@chakra-ui/react'
+import { createContext } from '@chakra-ui/react-utils'
+import React from 'react'
+import { FieldOptions } from '../types'
+import { mapOptions } from '../utils'
+import { SelectOption } from './select'
+
+export const [SelectProvider, useSelectContext] = createContext<
+  ReturnType<typeof useSelect>
+>({
+  strict: true,
+})
+
+export interface SelectOptions {
+  /**
+   * The name of the input field in a native form.
+   */
+  name: string
+  /**
+   * The value of the select field.
+   */
+  value?: string | string[]
+  /**
+   * The initial value of the select field.
+   */
+  defaultValue?: string | string[]
+  /**
+   * The callback invoked when the value of the select field changes.
+   * @param value The value of the select field.
+   */
+  onChange?: (value: string | string[]) => void
+  /**
+   * The placeholder text when there's no value.
+   */
+  placeholder?: string
+  /**
+   * If `true`, the select will be disabled.
+   */
+  isDisabled?: boolean
+  /**
+   * An array of options
+   * If you leave this empty the children prop will be rendered.
+   */
+  options?: FieldOptions<SelectOption>
+  /**
+   * Enable multiple select.
+   */
+  multiple?: boolean
+  /**
+   * The function used to render the value of the select field.
+   * @param value The value of the select field.
+   * @returns The rendered value.
+   */
+  renderValue?: (value: string | string[]) => React.ReactNode
+}
+
+export const useSelect = (props: SelectOptions) => {
+  const {
+    name,
+    value,
+    defaultValue,
+    onChange,
+    multiple,
+    placeholder,
+    options: optionsProp,
+    isDisabled,
+    renderValue = (value) =>
+      typeof value === 'string' ? value : value?.join(', '),
+  } = props
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange,
+  })
+
+  const controlProps = useFormControl({ name } as HTMLChakraProps<'input'>)
+
+  const options = React.useMemo(
+    () => optionsProp && mapOptions(optionsProp),
+    [optionsProp]
+  )
+
+  const handleChange = (value: string | string[]) => {
+    setCurrentValue(value)
+  }
+
+  const getDisplayValue = React.useCallback(
+    (value: string) => {
+      if (!options) {
+        return value
+      }
+
+      for (const option of options) {
+        if (option.value === value) {
+          return option.label || option.value
+        }
+      }
+
+      return value
+    },
+    [options]
+  )
+
+  const displayValue = React.useMemo(
+    () =>
+      currentValue
+        ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+            getDisplayValue
+          )
+        : [],
+    [currentValue, getDisplayValue]
+  )
+
+  return {
+    defaultValue,
+    value: currentValue,
+    displayValue,
+    renderValue,
+    onChange: handleChange,
+    options,
+    multiple,
+    controlProps,
+    placeholder,
+    isDisabled,
+  }
+}

package/src/select/select.stories.tsx

@@ -8,15 +8,23 @@ import {
 } from '@chakra-ui/react'
 import * as React from 'react'
 
-import { ComponentStory } from '@storybook/react'
+import { StoryFn } from '@storybook/react'
 
-import { Select } from './select'
+import { Select, SelectButton, SelectList, SelectOption } from './select'
 import { NativeSelect } from './native-select'
 
 import { FiSmile } from 'react-icons/fi'
 
+const Template: StoryFn<typeof Select> = (args) => (
+  <Select placeholder="Select an option..." {...args}>
+    <SelectButton />
+    <SelectList />
+  </Select>
+)
+
 export default {
   title: 'Components/Forms/Select',
+  component: Template,
   decorators: [
     (Story: any) => (
       <Container mt="40px" maxW="320px">
@@ -34,111 +42,134 @@ const getOptions = (length = 6) =>
 
 const options = getOptions()
 
-const Template: ComponentStory<typeof Select> = (args) => (
-  <Select placeholder="Select an option..." {...args} />
-)
-
-export const Basic = Template.bind({})
-Basic.args = {
-  name: 'select',
-  options,
+export const Basic = {
+  args: {
+    name: 'select',
+    options,
+  },
 }
 
-export const DefaultValue = Template.bind({})
-DefaultValue.args = {
-  name: 'select',
-  options,
-  defaultValue: 1,
+export const DefaultValue = {
+  args: {
+    name: 'select',
+    options,
+    defaultValue: '1',
+  },
 }
 
-export const Placeholder = Template.bind({})
-Placeholder.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select an option...',
+export const Placeholder = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select an option...',
+  },
 }
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  name: 'select',
-  options,
-  placeholder: 'Disabled.',
-  isDisabled: true,
+export const Disabled = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Disabled.',
+    isDisabled: true,
+  },
 }
 
-export const Multi = Template.bind({})
-Multi.args = {
-  name: 'select',
-  options,
-  placeholder: 'Multiple.',
-  multiple: true,
+export const Multi = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Multiple.',
+    multiple: true,
+  },
 }
 
-export const MultiWithDefaultValue = Template.bind({})
-MultiWithDefaultValue.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select an option...',
-  multiple: true,
-  defaultValue: ['1'],
+export const MultiWithDefaultValue = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select an option...',
+    multiple: true,
+    defaultValue: ['1'],
+  },
 }
 
-export const MultiWithTags = Template.bind({})
-MultiWithTags.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select options...',
-  multiple: true,
-  renderValue: (selected) => {
-    if (selected?.length) {
-      return (
-        <Wrap py="1">
-          {selected.map((value) => (
-            <WrapItem>
-              <Tag>{value}</Tag>
-            </WrapItem>
-          ))}
-        </Wrap>
-      )
-    }
+export const MultiWithTags = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select options...',
+    multiple: true,
+    renderValue: (selected) => {
+      if (selected?.length) {
+        return (
+          <Wrap py="1">
+            {selected.map((value) => (
+              <WrapItem>
+                <Tag variant="solid">{value}</Tag>
+              </WrapItem>
+            ))}
+          </Wrap>
+        )
+      }
+    },
   },
 }
 
-export const WithIcons = Template.bind({})
-WithIcons.args = {
-  name: 'select',
-  options,
-  value: 1,
-  leftIcon: <Icon as={FiSmile} />,
+export const Test = {
+  render: () => (
+    <Tag variant="outline" colorScheme="teal">
+      Test
+    </Tag>
+  ),
 }
 
-export const MaxHeight = Template.bind({})
-MaxHeight.args = {
-  name: 'select',
-  options: getOptions(100),
+export const WithIcons = {
+  render: (args) => (
+    <Select placeholder="Select an option..." {...args}>
+      <SelectButton leftIcon={<Icon as={FiSmile} />} />
+      <SelectList />
+    </Select>
+  ),
+  args: {
+    name: 'select',
+    options,
+    value: '1',
+  },
 }
 
-export const WithChildren = () => {
-  return (
-    <Select name="select" value="1">
-      <MenuItemOption value="1">Option 1</MenuItemOption>
-      <MenuItemOption value="2">Option 1</MenuItemOption>
+export const MaxHeight = {
+  args: {
+    name: 'select',
+    options: getOptions(100),
+  },
+}
+
+export const WithChildren = {
+  render: () => (
+    <Select name="select" defaultValue="1">
+      <SelectButton />
+      <SelectList>
+        <SelectOption value="1">Option 1</SelectOption>
+        <SelectOption value="2">Option 2</SelectOption>
+      </SelectList>
     </Select>
-  )
+  ),
 }
 
-export const WithEmptyOption = () => {
-  return (
-    <Select name="select" value="1">
-      <MenuItemOption value="">None</MenuItemOption>
-      <MenuItemOption value="1">Option 1</MenuItemOption>
-      <MenuItemOption value="2">Option 1</MenuItemOption>
+export const WithEmptyOption = {
+  render: () => (
+    <Select name="select" defaultValue="1">
+      <SelectButton />
+      <SelectList>
+        <SelectOption value="">None</SelectOption>
+        <SelectOption value="1">Option 1</SelectOption>
+        <SelectOption value="2">Option 2</SelectOption>
+      </SelectList>
     </Select>
-  )
+  ),
 }
 
-export const WithNativeSelect = () => (
-  <>
+export const WithNativeSelect = {
+  render: () => (
     <NativeSelect name="select" options={options} aria-label="Select" />
-  </>
-)
+  ),
+}