fix: refactor stories

src/components/Form/Form.tsx

@@ -28,7 +28,7 @@ import { useSnackbar } from '../SnackbarProvider';
 import { useSafeSetState } from '../../hooks/useSafeSetState';
 
 export interface FormProps {
-  onSubmit: (values: any) => Promise<string>;
+  onSubmit?: (values: any) => Promise<string>;
   onSubmitResult?: (values: any) => Promise<void>;
   title?: string;
   titleAlign?: PropTypes.Alignment;
@@ -94,15 +94,18 @@ export const Form: FC<FormProps> = ({
 
   const handleOnSubmit = useCallback((values) => {
     setInternalLoading(true);
-    return onSubmit(values)
-      .then(async (message) => {
-        setInternalLoading(false);
-        showSnackbar({ message, severity: 'success' });
-      })
-      .catch(({ message }: CognitoError) => {
-        setInternalLoading(false);
-        showSnackbar({ message, severity: 'error' });
-      });
+    return (
+      onSubmit &&
+      onSubmit(values)
+        .then(async (message) => {
+          setInternalLoading(false);
+          showSnackbar({ message, severity: 'success' });
+        })
+        .catch(({ message }: CognitoError) => {
+          setInternalLoading(false);
+          showSnackbar({ message, severity: 'error' });
+        })
+    );
   }, []);
 
   const defaultValidate = useCallback(

src/components/FormInput/MuiFormTextField.tsx

@@ -46,7 +46,7 @@ export const MuiFormTextField: FC<MuiFormTextFieldProps> = ({
                 onClick={togglePasswordMask}
                 onMouseDown={handleMouseDownPassword}
               >
-                {passwordIsMasked ? <Visibility /> : <VisibilityOff />}
+                {passwordIsMasked ? <Visibility /> : <VisibilityOff color="primary" />}
               </IconButton>
             </InputAdornment>
           ),

src/components/SnackbarProvider.tsx

@@ -22,7 +22,7 @@ const getDisplayDuration = (message: string): number => {
   return min(max(msgLength * 50, 2000), 7000);
 };
 
-interface ShowSnackbarProps {
+export interface ShowSnackbarProps {
   message: string;
   severity?: Color;
   position?: SnackbarOrigin;
@@ -45,12 +45,16 @@ export const SnackbarContextProvider: FC = ({ children }) => {
     message,
     severity = 'info',
     position = initPosition,
-    duration = getDisplayDuration(message),
+    duration,
   }: ShowSnackbarProps) => {
     setMessageInternal(message);
     setSeverityInternal(severity);
     setPositionInternal(position);
-    setDurationInternal(duration);
+    if (duration) {
+      setDurationInternal(duration);
+    } else {
+      setDurationInternal(getDisplayDuration(message));
+    }
     setOpen(true);
   };
 

src/stories/buttons/FormButton.stories.tsx

@@ -7,9 +7,21 @@ export default {
   component: FormButton,
 } as Meta;
 
-const Template: Story<FormButtonProps> = (args) => <FormButton {...args}>Click me!</FormButton>;
+export const Default: Story<FormButtonProps> = (args) => (
+  <FormButton {...args}>Click me!</FormButton>
+);
 
-export const Primary = Template.bind({});
-Primary.args = {
-  color: 'primary',
+export const Color = Default.bind({});
+Color.args = {
+  color: 'inherit',
+};
+
+export const Loading = Default.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const Disabled = Default.bind({});
+Disabled.args = {
+  disabled: true,
 };

src/stories/forms/ConfirmSignUp.stories.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { ConfirmSignUpProps, ConfirmSignUp } from '../../containers/ConfirmSignUp/ConfirmSignUp';
+import { ConfirmSignUp } from '../../containers/ConfirmSignUp/ConfirmSignUp';
+import { FormWithDefaultsProps } from '../../components/Form/Form';
 
 export default {
   title: 'Forms/Confirm Sign Up',
   component: ConfirmSignUp,
 } as Meta;
 
-const Template: Story<ConfirmSignUpProps> = (args) => (
-  <ConfirmSignUp {...args} onSubmit={args.onSubmit} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  onSubmit: async (values) => {
-    alert(values.email + values.password);
-  },
-};
+export const Default: Story<FormWithDefaultsProps> = (args) => <ConfirmSignUp {...args} />;

src/stories/forms/ResetPassword.stories.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { ResetPassword, ResetPasswordProps } from '../../containers/ResetPassword/ResetPassword';
+import { ResetPassword } from '../../containers/ResetPassword/ResetPassword';
+import { FormWithDefaultsProps } from '../../components/Form/Form';
 
 export default {
   title: 'Forms/Reset password',
   component: ResetPassword,
 } as Meta;
 
-const Template: Story<ResetPasswordProps> = (args) => (
-  <ResetPassword {...args} onSubmit={args.onSubmit} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  onSubmit: async (values) => {
-    alert(values.email + values.password);
-  },
-};
+export const Default: Story<FormWithDefaultsProps> = (args) => <ResetPassword {...args} />;

src/stories/forms/SignIn.stories.tsx

@@ -7,6 +7,4 @@ export default {
   component: SignIn,
 } as Meta;
 
-const Template: Story<SignInProps> = (args) => <SignIn {...args} />;
-
-export const Default = Template.bind({});
+export const Default: Story<SignInProps> = (args) => <SignIn {...args} />;

src/stories/forms/SignUp.stories.tsx

@@ -8,21 +8,11 @@ export default {
   component: SignUp,
 } as Meta;
 
-const Template: Story<SignUpProps> = (args) => <SignUp {...args} onSubmit={args.onSubmit} />;
+export const Default: Story<SignUpProps> = (args) => <SignUp {...args} onSubmit={args.onSubmit} />;
 
-export const Default = Template.bind({});
-Default.args = {
-  onSubmit: async (values) => console.log(values),
-};
-
-const TemplateCustomFields: Story<SignUpProps> = (args) => (
+export const CustomFields: Story<SignUpProps> = (args) => (
   <SignUp {...args} onSubmit={args.onSubmit}>
     <FormInput source="firstName" />
     <FormInput source="lastName" required />
   </SignUp>
 );
-
-export const CustomFields = TemplateCustomFields.bind({});
-CustomFields.args = {
-  onSubmit: async (values) => console.log(values),
-};

src/stories/hooks/Snackbar.stories.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { Button } from '@material-ui/core';
+import { ShowSnackbarProps, useSnackbar } from '../../components/SnackbarProvider';
+
+const SnackbarMock: FC<ShowSnackbarProps> = (props) => {
+  const showSnackbar = useSnackbar();
+
+  const show = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    showSnackbar(props);
+  };
+
+  return (
+    <Button color="primary" variant="contained" onClick={show}>
+      Show snackbar
+    </Button>
+  );
+};
+
+export default {
+  title: 'Hooks/Snackbar',
+  component: SnackbarMock,
+  argTypes: {
+    severity: {
+      control: {
+        type: 'select',
+        options: ['success', 'info', 'warning', 'error'],
+      },
+    },
+    duration: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 10000,
+        step: 1000,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<ShowSnackbarProps> = (args) => <SnackbarMock {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  message: 'Mock snackbar message',
+  severity: 'success',
+  duration: undefined,
+  position: {
+    vertical: 'top',
+    horizontal: 'center',
+  },
+};

src/stories/inputs/FormInput.stories.tsx

@@ -28,16 +28,12 @@ const Template: Story<TemplateProps> = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  id: 'email',
-  name: 'email',
-  label: 'Email',
+  source: 'email',
 };
 
 export const InitialValue = Template.bind({});
 InitialValue.args = {
-  id: 'email',
-  name: 'email',
-  label: 'Email',
+  source: 'email',
   form: {
     initialValues: {
       email: 'joe.doe@gmail.com',
@@ -47,10 +43,9 @@ InitialValue.args = {
 
 export const PasswordType = Template.bind({});
 PasswordType.args = {
-  id: 'password',
-  name: 'password',
-  label: 'Password',
-  type: 'password',
+  source: 'password',
+  repeat: true,
+  passwordPreview: true,
   form: {
     initialValues: {
       password: '123456m#',