Create storybooks for developers’ pages (#28)

* Create storybooks for developers' pages

* Fix ‘ApplicationForm/Create Minecraft server’ story

* Clean up the code

* Concretize the types and behaviour

packages/app/components/dev/apps/ApplicationsIndex.story.tsx

@@ -0,0 +1,53 @@
+import React, { ComponentType, ComponentProps } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import ApplicationsIndex from './ApplicationsIndex';
+import { TYPE_APPLICATION } from 'app/components/dev/apps';
+
+import { OauthAppResponse } from 'app/services/api/oauth';
+import rootStyles from 'app/pages/root/root.scss';
+import devStyles from 'app/pages/dev/dev.scss';
+
+export const DevLayout: ComponentType = ({ children }) => (
+    <div className={rootStyles.wrapper}>
+        <div className={devStyles.container}>{children}</div>
+    </div>
+);
+
+export const sampleApp: OauthAppResponse = {
+    clientId: 'my-application',
+    clientSecret: 'cL1eNtS3cRE7xNJqfWQdqrMRKURfW1ssP4kiX6JDW0_szM-n-q',
+    type: TYPE_APPLICATION,
+    name: 'My Application',
+    websiteUrl: '',
+    createdAt: 0,
+    countUsers: 0,
+};
+
+const commonProps: Omit<ComponentProps<typeof ApplicationsIndex>, 'isLoading' | 'displayForGuest' | 'applications'> = {
+    clientId: null,
+    resetClientId: action('resetClientId'),
+    resetApp: async (...args) => action('resetApp')(...args),
+    deleteApp: async (clientId) => action('deleteApp')(clientId),
+};
+
+storiesOf('Components/Dev/Apps/ApplicationsIndex', module)
+    .addDecorator((storyFn) => <DevLayout>{storyFn()}</DevLayout>)
+    .add('Guest', () => <ApplicationsIndex isLoading={false} displayForGuest applications={[]} {...commonProps} />)
+    .add('Loading', () => <ApplicationsIndex isLoading displayForGuest={false} applications={[]} {...commonProps} />)
+    .add('Empty', () => (
+        <ApplicationsIndex isLoading={false} displayForGuest={false} applications={[]} {...commonProps} />
+    ))
+    .add('With apps', () => (
+        <ApplicationsIndex
+            isLoading={false}
+            displayForGuest={false}
+            applications={[
+                sampleApp,
+                { ...sampleApp, clientId: 'my-application1', countUsers: 10 },
+                { ...sampleApp, clientId: 'my-application2', countUsers: 1 },
+            ]}
+            {...commonProps}
+        />
+    ));

packages/app/components/dev/apps/applicationForm/ApplicationForm.story.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { OauthAppResponse } from 'app/services/api/oauth';
+import { FormModel } from 'app/components/ui/form';
+import { ApplicationType, TYPE_APPLICATION, TYPE_MINECRAFT_SERVER } from 'app/components/dev/apps';
+import ApplicationForm from './ApplicationForm';
+import { DevLayout } from '../ApplicationsIndex.story';
+
+const blankApp: OauthAppResponse = {
+    clientId: '',
+    clientSecret: '',
+    type: TYPE_APPLICATION,
+    name: '',
+    websiteUrl: '',
+    createdAt: 0,
+    countUsers: 0,
+    description: '',
+    redirectUri: '',
+    minecraftServerIp: '',
+};
+
+const onSubmit = async (form: FormModel) => action('onSubmit')(form);
+
+storiesOf('Components/Dev/Apps/ApplicationForm', module)
+    .addDecorator((storyFn) => <DevLayout>{storyFn()}</DevLayout>)
+    .add('Create', () => {
+        const [currentType, setType] = useState<ApplicationType | null>(null);
+
+        return (
+            <ApplicationForm
+                form={new FormModel()}
+                onSubmit={onSubmit}
+                displayTypeSwitcher
+                type={currentType}
+                setType={(type) => {
+                    action('setType')(type);
+                    setType(type);
+                }}
+                app={blankApp}
+            />
+        );
+    })
+    .add('Create website', () => (
+        <ApplicationForm
+            form={new FormModel()}
+            onSubmit={onSubmit}
+            displayTypeSwitcher
+            type={TYPE_APPLICATION}
+            setType={action('setType')}
+            app={blankApp}
+        />
+    ))
+    .add('Create Minecraft server', () => (
+        <ApplicationForm
+            form={new FormModel()}
+            onSubmit={onSubmit}
+            displayTypeSwitcher
+            type={TYPE_MINECRAFT_SERVER}
+            setType={action('setType')}
+            app={{
+                ...blankApp,
+                type: TYPE_MINECRAFT_SERVER,
+            }}
+        />
+    ))
+    .add('Update website', () => (
+        <ApplicationForm
+            form={new FormModel()}
+            onSubmit={onSubmit}
+            type={TYPE_APPLICATION}
+            app={{
+                ...blankApp,
+                clientId: 'already-registered',
+            }}
+        />
+    ))
+    .add('Update Minecraft server', () => (
+        <ApplicationForm
+            form={new FormModel()}
+            onSubmit={onSubmit}
+            type={TYPE_MINECRAFT_SERVER}
+            app={{
+                ...blankApp,
+                type: TYPE_MINECRAFT_SERVER,
+                clientId: 'already-registered',
+            }}
+        />
+    ));