Introduce storybooks for all profile pages

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import logger from 'app/services/logger';
 import { disable as disableMFA } from 'app/services/api/mfa';
 import { FormModel } from 'app/components/ui/form';
@@ -29,7 +29,10 @@ export default class MfaDisable extends React.Component<
         return showForm ? <MfaDisableForm onSubmit={this.onSubmit} /> : <MfaStatus onProceed={this.onProceed} />;
     }
 
-    onProceed = () => this.setState({ showForm: true });
+    onProceed: MouseEventHandler<HTMLAnchorElement> = (event) => {
+        event.preventDefault();
+        this.setState({ showForm: true });
+    };
 
     onSubmit = (form: FormModel) => {
         return this.props

packages/app/components/profile/multiFactorAuth/MfaStatus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType, MouseEventHandler } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { ScrollIntoView } from 'app/components/ui/scroll';
 import styles from 'app/components/profile/profileForm.scss';
@@ -6,45 +6,43 @@ import icons from 'app/components/ui/icons.scss';
 
 import mfaStyles from './mfa.scss';
 
-export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
-    return (
-        <div className={styles.formBody}>
-            <ScrollIntoView />
-
-            <div className={styles.formRow}>
-                <div className={mfaStyles.bigIcon}>
-                    <span className={icons.lock} />
-                </div>
-                <p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
-                    <Message
-                        key="mfaEnabledForYourAcc"
-                        defaultMessage="Two‑factor authentication for your account is active now"
-                    />
-                </p>
-            </div>
-
-            <div className={styles.formRow}>
-                <p className={styles.description}>
-                    <Message
-                        key="mfaLoginFlowDesc"
-                        defaultMessage="Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled."
-                    />
-                </p>
-            </div>
-
-            <div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
-                <p className={styles.description}>
-                    <a
-                        href="#"
-                        onClick={(event) => {
-                            event.preventDefault();
-                            onProceed();
-                        }}
-                    >
-                        <Message key="disable" defaultMessage="Disable" />
-                    </a>
-                </p>
-            </div>
-        </div>
-    );
+interface Props {
+    onProceed?: MouseEventHandler<HTMLAnchorElement>;
 }
+
+const MfaStatus: ComponentType<Props> = ({ onProceed }) => (
+    <div className={styles.formBody}>
+        <ScrollIntoView />
+
+        <div className={styles.formRow}>
+            <div className={mfaStyles.bigIcon}>
+                <span className={icons.lock} />
+            </div>
+            <p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
+                <Message
+                    key="mfaEnabledForYourAcc"
+                    defaultMessage="Two‑factor authentication for your account is active now"
+                />
+            </p>
+        </div>
+
+        <div className={styles.formRow}>
+            <p className={styles.description}>
+                <Message
+                    key="mfaLoginFlowDesc"
+                    defaultMessage="Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled."
+                />
+            </p>
+        </div>
+
+        <div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
+            <p className={styles.description}>
+                <a href="#" onClick={onProceed}>
+                    <Message key="disable" defaultMessage="Disable" />
+                </a>
+            </p>
+        </div>
+    </div>
+);
+
+export default MfaStatus;

packages/app/components/profile/multiFactorAuth/MultiFactorAuth.story.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import MultiFactorAuth from './MultiFactorAuth';
+
+storiesOf('Components/Profile/MultiFactorAuth', module)
+    .addDecorator((story) => <ProfileLayout>{story()}</ProfileLayout>)
+    .add('First step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={0}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Second step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={1}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Third step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={2}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Enabled', () => (
+        <MultiFactorAuth
+            isMfaEnabled={true}
+            step={0}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ));

packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { ImageLoader } from 'app/components/ui/loader';
@@ -7,7 +7,12 @@ import profileForm from 'app/components/profile/profileForm.scss';
 import messages from '../keyForm.intl';
 import styles from './key-form.scss';
 
-export default function KeyForm({ secret, qrCodeSrc }: { secret: string; qrCodeSrc: string }) {
+interface Props {
+    secret: string;
+    qrCodeSrc: string;
+}
+
+const KeyForm: ComponentType<Props> = ({ secret, qrCodeSrc }) => {
     const formattedSecret = formatSecret(secret || new Array(24).join('X'));
 
     return (
@@ -46,8 +51,10 @@ export default function KeyForm({ secret, qrCodeSrc }: { secret: string; qrCodeS
             </div>
         </div>
     );
-}
+};
 
 function formatSecret(secret: string): string {
     return (secret.match(/.{1,4}/g) || []).join(' ');
 }
+
+export default KeyForm;