@saas-ui/forms 0.3.3 → 0.5.0

package/dist/step-form.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { HTMLChakraProps } from '@chakra-ui/system';
+import { StepperStepsProps } from '@saas-ui/stepper';
+import { ButtonProps } from '@saas-ui/button';
+import { FormProps } from '.';
+import { UseStepFormProps } from './use-step-form';
+export interface StepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepFormProps<TFieldValues>, FormProps<TFieldValues> {
+}
+export declare const StepForm: <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues, object>> | undefined;
+}) => React.ReactElement;
+export interface FormStepOptions {
+    /**
+     * The step name
+     */
+    name: string;
+    /**
+     * Schema
+     */
+    schema?: any;
+}
+export declare const FormStepper: React.FC<StepperStepsProps>;
+export interface FormStepProps extends FormStepOptions, HTMLChakraProps<'div'> {
+}
+export declare const FormStep: React.FC<FormStepProps>;
+export declare const PrevButton: React.FC<ButtonProps>;
+export interface NextButtonProps extends ButtonProps {
+    submitLabel?: string;
+}
+export declare const NextButton: React.FC<NextButtonProps>;
+//# sourceMappingURL=step-form.d.ts.map

package/dist/step-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAgB,MAAM,GAAG,CAAA;AAEjD,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}

package/dist/use-step-form.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+import { UseStepperProps, UseStepperReturn } from '@saas-ui/stepper';
+export interface StepState {
+    name: string;
+    schema?: any;
+    isActive?: boolean;
+    isCompleted?: boolean;
+}
+export interface StepFormContext extends UseStepperReturn {
+    updateStep(state: StepState): void;
+    steps: Record<string, StepState>;
+}
+export declare const StepFormProvider: React.Provider<StepFormContext>, useStepFormContext: () => StepFormContext;
+import { FormProps } from './form';
+export interface UseStepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepperProps, FormProps<TFieldValues> {
+}
+export declare function useStepForm<TFieldValues extends FieldValues = FieldValues>(props: UseStepFormProps<TFieldValues>): {
+    stepsRef: React.MutableRefObject<string[]>;
+    activeStep: string;
+    activeIndex: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isCompleted: boolean;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setStep: (name: string) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    registerStep: (name: string) => void;
+    unregisterStep: (name: string) => void;
+    getFormProps: (props: any) => {
+        onSubmit: SubmitHandler<TFieldValues>;
+        schema: any;
+    };
+    updateStep: (step: any) => void;
+    steps: {};
+};
+export declare type UseStepFormReturn = ReturnType<typeof useStepForm>;
+export interface UseFormStepProps {
+    name: string;
+    schema?: any;
+}
+export declare function useFormStep(props: UseFormStepProps): StepState;
+//# sourceMappingURL=use-step-form.d.ts.map

package/dist/use-step-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-step-form.d.ts","sourceRoot":"","sources":["../src/use-step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAGL,eAAe,EACf,gBAAgB,EACjB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CACjC;AAED,eAAO,MAAO,gBAAgB,mCAAE,kBAAkB,uBAK9C,CAAA;AAEJ,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,gBAAgB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,eAAe,EACrB,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,wBAAgB,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACxE,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;EAyDtC;AAED,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAc9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -65,13 +65,14 @@
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react-utils": "^1.2.1",
     "@hookform/resolvers": "^2.8.3",
-    "@saas-ui/button": "0.2.1",
-    "@saas-ui/input-right-button": "0.2.1",
-    "@saas-ui/number-input": "0.2.2",
-    "@saas-ui/password-input": "0.2.1",
-    "@saas-ui/pin-input": "0.2.1",
-    "@saas-ui/radio": "0.2.1",
-    "@saas-ui/select": "0.2.2",
+    "@saas-ui/button": "0.3.0",
+    "@saas-ui/input-right-button": "0.3.0",
+    "@saas-ui/number-input": "0.3.0",
+    "@saas-ui/password-input": "0.3.0",
+    "@saas-ui/pin-input": "0.3.0",
+    "@saas-ui/radio": "0.3.0",
+    "@saas-ui/react-utils": "0.1.0",
+    "@saas-ui/select": "0.3.0",
     "react-hook-form": "^7.22.0"
   },
   "peerDependencies": {

package/src/display-field.tsx

@@ -20,12 +20,17 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
   placeholder,
   ...props
 }) => {
-  const { getValues } = useFormContext()
-
   return (
     <FormControl {...props}>
       {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}
-      <Text fontSize="md">{getValues(name)}</Text>
+      <Text fontSize="md">
+        <FormValue name={name} />
+      </Text>
     </FormControl>
   )
 }
+
+export const FormValue: React.FC<{ name: string }> = ({ name }) => {
+  const { getValues } = useFormContext()
+  return getValues(name) || null
+}

package/src/index.ts

@@ -9,6 +9,8 @@ export * from './array-field'
 export * from './use-array-field'
 export * from './object-field'
 export * from './display-if'
+export * from './step-form'
+export * from './use-step-form'
 
 export * from '@saas-ui/input-right-button'
 

package/src/step-form.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react'
+
+import { FieldValues, UseFormReturn } from 'react-hook-form'
+
+import {
+  chakra,
+  HTMLChakraProps,
+  useMultiStyleConfig,
+  StylesProvider,
+} from '@chakra-ui/system'
+
+import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
+
+import {
+  StepperProvider,
+  StepperSteps,
+  StepperStepsProps,
+  StepperStep,
+  useStepperContext,
+} from '@saas-ui/stepper'
+import { Button, ButtonProps } from '@saas-ui/button'
+
+import { Form, FormProps, SubmitButton } from '.'
+
+import {
+  useStepForm,
+  useFormStep,
+  StepFormProvider,
+  UseStepFormProps,
+} from './use-step-form'
+
+export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
+  extends UseStepFormProps<TFieldValues>,
+    FormProps<TFieldValues> {}
+
+export const StepForm = React.forwardRef(
+  <TFieldValues extends FieldValues = FieldValues>(
+    props: StepFormProps<TFieldValues>,
+    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  ) => {
+    const { children, onSubmit, ...rest } = props
+
+    const stepper = useStepForm<TFieldValues>(props)
+
+    const { getFormProps, ...ctx } = stepper
+
+    const context = React.useMemo(() => ctx, [ctx])
+
+    return (
+      <StepperProvider value={context}>
+        <StepFormProvider value={context}>
+          <Form ref={ref} {...rest} {...getFormProps(props)}>
+            {runIfFn(children, stepper)}
+          </Form>
+        </StepFormProvider>
+      </StepperProvider>
+    )
+  }
+) as <TFieldValues extends FieldValues>(
+  props: FormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  }
+) => React.ReactElement
+
+export interface FormStepOptions {
+  /**
+   * The step name
+   */
+  name: string
+  /**
+   * Schema
+   */
+  schema?: any
+}
+
+export const FormStepper: React.FC<StepperStepsProps> = (props) => {
+  const styles = useMultiStyleConfig('Stepper', props)
+
+  const { children } = props
+
+  const elements = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child?.type === FormStep) {
+      const { isCompleted } = useFormStep(child.props) // Register this step
+      return (
+        <StepperStep
+          name={child.props.name}
+          title={child.props.title}
+          isCompleted={isCompleted}
+        >
+          {child.props.children}
+        </StepperStep>
+      )
+    }
+    return child
+  })
+
+  return (
+    <StylesProvider value={styles}>
+      <StepperSteps mb="4" {...props}>
+        {elements}
+      </StepperSteps>
+    </StylesProvider>
+  )
+}
+
+export interface FormStepProps
+  extends FormStepOptions,
+    HTMLChakraProps<'div'> {}
+
+export const FormStep: React.FC<FormStepProps> = (props) => {
+  const { name, schema, children, className, ...rest } = props
+  const step = useFormStep({ name, schema })
+
+  const { isActive } = step
+
+  return isActive ? (
+    <chakra.div {...rest} className={cx('saas-form__step', className)}>
+      {children}
+    </chakra.div>
+  ) : null
+}
+
+if (__DEV__) {
+  FormStep.displayName = 'FormStep'
+}
+
+export const PrevButton: React.FC<ButtonProps> = (props) => {
+  const { isFirstStep, isCompleted, prevStep } = useStepperContext()
+
+  return (
+    <Button
+      isDisabled={isFirstStep || isCompleted}
+      label="Back"
+      {...props}
+      className={cx('saas-form__prev-button', props.className)}
+      onClick={callAllHandlers(props.onClick, prevStep)}
+    />
+  )
+}
+
+if (__DEV__) {
+  PrevButton.displayName = 'PrevButton'
+}
+
+export interface NextButtonProps extends ButtonProps {
+  submitLabel?: string
+}
+
+export const NextButton: React.FC<NextButtonProps> = (props) => {
+  const { label = 'Next', submitLabel = 'Complete', ...rest } = props
+  const { isLastStep, isCompleted } = useStepperContext()
+
+  return (
+    <SubmitButton
+      isDisabled={isCompleted}
+      label={isLastStep || isCompleted ? submitLabel : label}
+      {...rest}
+      className={cx('saas-form__next-button', props.className)}
+    />
+  )
+}
+
+if (__DEV__) {
+  NextButton.displayName = 'NextButton'
+}

package/src/use-step-form.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react'
+import { FieldValues, SubmitHandler } from 'react-hook-form'
+import { createContext } from '@chakra-ui/react-utils'
+import {
+  useStepper,
+  useStep,
+  UseStepperProps,
+  UseStepperReturn,
+} from '@saas-ui/stepper'
+
+export interface StepState {
+  name: string
+  schema?: any
+  isActive?: boolean
+  isCompleted?: boolean
+}
+
+export interface StepFormContext extends UseStepperReturn {
+  updateStep(state: StepState): void
+  steps: Record<string, StepState>
+}
+
+export const [StepFormProvider, useStepFormContext] =
+  createContext<StepFormContext>({
+    name: 'StepFormContext',
+    errorMessage:
+      'useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`',
+  })
+
+import { FormProps } from './form'
+
+export interface UseStepFormProps<
+  TFieldValues extends FieldValues = FieldValues
+> extends UseStepperProps,
+    FormProps<TFieldValues> {}
+
+export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
+  props: UseStepFormProps<TFieldValues>
+) {
+  const stepper = useStepper(props)
+
+  const { activeStep, isLastStep, nextStep } = stepper
+
+  const [steps, updateSteps] = React.useState({})
+
+  const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
+    async (data) => {
+      if (isLastStep) {
+        return props
+          .onSubmit?.(data)
+          .then(() => {
+            const step = steps[activeStep]
+            updateStep({
+              ...step,
+              isCompleted: true,
+            })
+          })
+          .then(nextStep) // Show completed step
+      }
+
+      nextStep()
+    },
+    [activeStep, isLastStep]
+  )
+
+  const getFormProps = React.useCallback(
+    (props) => {
+      const step = steps[activeStep]
+      return {
+        onSubmit: onSubmitStep,
+        schema: step?.schema,
+      }
+    },
+    [steps, onSubmitStep, activeStep]
+  )
+
+  const updateStep = React.useCallback(
+    (step) => {
+      updateSteps((steps) => {
+        return {
+          ...steps,
+          [step.name]: step,
+        }
+      })
+    },
+    [steps]
+  )
+
+  return {
+    getFormProps,
+    updateStep,
+    steps,
+    ...stepper,
+  }
+}
+
+export type UseStepFormReturn = ReturnType<typeof useStepForm>
+
+export interface UseFormStepProps {
+  name: string
+  schema?: any
+}
+
+export function useFormStep(props: UseFormStepProps): StepState {
+  const { name, schema } = props
+  const step = useStep({ name })
+
+  const { steps, updateStep } = useStepFormContext()
+
+  React.useEffect(() => {
+    updateStep({ name, schema })
+  }, [name, schema])
+
+  return {
+    ...step,
+    ...(steps[name] || {}),
+  }
+}