feat(SubmitError): add component CC-1392 (#227)

Author: tenphi

.changeset/wicked-wombats-prove.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `SubmitError` component to display error that throws onSubmit callback.
+Allow to manually visualize a submit error.

src/components/forms/Form/ComplexForm.stories.tsx

@@ -1,7 +1,10 @@
 import { StoryFn } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 
 import {
+  Alert,
   Block,
   Checkbox,
   CheckboxGroup,
@@ -11,11 +14,12 @@ import {
   Item,
   PasswordInput,
   Radio,
+  RangeSlider,
   Select,
   Submit,
+  SubmitError,
   Switch,
   TextInput,
-  RangeSlider,
 } from '../../../index';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { baseProps } from '../../../stories/lists/baseProps';
@@ -28,6 +32,56 @@ export default {
   parameters: { controls: { exclude: baseProps } },
 };
 
+const CustomSubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      {...args}
+      onSubmit={(v) => {
+        console.log('onSubmit:', v);
+
+        throw <>Submission failed. Sorry for that :/</>;
+      }}
+      onValuesChange={(v) => {
+        console.log('onChange', v);
+      }}
+    >
+      <Field name="text" label="Text input">
+        <TextInput />
+      </Field>
+      <Submit>Submit</Submit>
+      {form.submitError ? <Alert>{form.submitError}</Alert> : null}
+    </Form>
+  );
+};
+
+const SubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      {...args}
+      onSubmit={(v) => {
+        console.log('onSubmit:', v);
+
+        throw <>Submission failed. Sorry for that :/</>;
+      }}
+      onValuesChange={(v) => {
+        console.log('onChange', v);
+      }}
+    >
+      <Field name="text" label="Text input">
+        <TextInput />
+      </Field>
+      <Submit>Submit</Submit>
+      <SubmitError />
+    </Form>
+  );
+};
+
 const AsyncValidationTemplate: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
 
@@ -277,3 +331,16 @@ export const Default = Template.bind({});
 export const ComplexErrorMessage = ComplexErrorTemplate.bind({});
 
 export const AsyncValidation = AsyncValidationTemplate.bind({});
+
+export const ErrorMessage = SubmitErrorTemplate.bind({});
+
+export const CustomErrorMessage = CustomSubmitErrorTemplate.bind({});
+
+ErrorMessage.play = CustomErrorMessage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = await canvas.getByRole('button');
+
+  await userEvent.click(button);
+
+  await waitFor(() => expect(canvas.getByRole('alert')).toBeInTheDocument());
+};

src/components/forms/Form/Form.tsx

@@ -3,9 +3,11 @@ import {
   createContext,
   FormHTMLAttributes,
   forwardRef,
+  ReactNode,
   useContext,
   useEffect,
   useRef,
+  useState,
 } from 'react';
 import { DOMRef } from '@react-types/shared';
 
@@ -104,6 +106,7 @@ function Form<T extends FieldTypes>(
     ...otherProps
   } = props;
   const firstRunRef = useRef(true);
+  const [submitError, setSubmitError] = useState<ReactNode>(null);
 
   ref = useCombinedRefs(ref);
 
@@ -129,6 +132,8 @@ function Form<T extends FieldTypes>(
 
       if (!form || form.isSubmitting) return;
 
+      setSubmitError(null);
+      form.submitError = null;
       form.setSubmitting(true);
 
       try {
@@ -137,10 +142,13 @@ function Form<T extends FieldTypes>(
         await onSubmit?.(form.getFormData());
       } catch (e) {
         await timeout();
+
         if (e instanceof Error) {
           throw e;
         }
         // errors are shown
+        setSubmitError(e as ReactNode);
+        form.submitError = e as ReactNode;
         // transfer errors to the callback
         onSubmitFailed?.(e);
       } finally {
@@ -172,6 +180,7 @@ function Form<T extends FieldTypes>(
     validateTrigger,
     requiredMark,
     form,
+    submitError,
     idPrefix: name,
   };
 

src/components/forms/Form/SubmitError.tsx

@@ -0,0 +1,26 @@
+import { ReactNode, useContext } from 'react';
+
+import { Alert, CubeAlertProps } from '../../content/Alert';
+
+import { FormContext } from './Form';
+
+type SubmitErrorProps = {
+  submitError?: ReactNode;
+};
+
+/**
+ * An alert that shows a form error message received from the onSubmit callback.
+ */
+export function SubmitError(props: CubeAlertProps) {
+  const { submitError } = useContext(FormContext) as SubmitErrorProps;
+
+  if (!submitError) {
+    return null;
+  }
+
+  return (
+    <Alert theme="danger" {...props}>
+      {submitError}
+    </Alert>
+  );
+}

src/components/forms/Form/index.ts

@@ -1,16 +1,21 @@
+import { CubeAlertProps } from '../../content/Alert';
+
 import { Field } from './Field';
+import { SubmitError } from './SubmitError';
 import { useForm } from './useForm';
 import { useFormProps, FormContext, Form as _Form } from './Form';
 
 const Form = Object.assign(
   _Form as typeof _Form & {
     Item: typeof Field;
+    SubmitError: typeof SubmitError;
     useForm: typeof useForm;
   },
-  { Item: Field, useForm },
+  { Item: Field, useForm, SubmitError },
 );
 
-export { useFormProps, Form, Field, useForm, FormContext };
+export { useFormProps, Form, Field, useForm, FormContext, SubmitError };
 export type { CubeFormProps } from './Form';
 export type { CubeFormInstance } from './useForm';
 export type { FieldTypes, Fields } from './types';
+export type { CubeAlertProps as CubeSubmitErrorProps };

src/components/forms/Form/useForm.tsx

@@ -34,6 +34,7 @@ export class CubeFormInstance<
   private fields: TFormData = {} as TFormData;
   public ref = {};
   public isSubmitting = false;
+  public submitError: ReactNode = null;
 
   public onValuesChange: (data: T) => void | Promise<void> = () => {};
   public onSubmit: (data: T) => void | Promise<void> = () => {};