Merge branch 'docz' into 'dev'

Docz installation

See merge request !9

.gitignore

@@ -138,3 +138,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+.docz/
\ No newline at end of file

README.md

@@ -32,7 +32,7 @@ npm install --global yarn
 # Install dependencies
 yarn install
 # Run project
-yarn run
+yarn start
 
 # Further commands are in the package.json under "scripts"
 ```

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "docz": "^2.3.1",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -24,7 +25,10 @@
     "eject": "react-scripts eject",
     "format": "prettier --write .",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "docz:serve": "docz build && docz serve"
   },
   "browserslist": {
     "production": [

src/App.tsx

 import React from 'react';
-import { LoginForm } from './components/LoginForm/LoginForm';
+import { AuthUser } from './components/AuthUser/AuthUser';
 
 export const App: React.FC = () => (
   <div className="App" data-testid="App">
     <header className="App-header">
-      <LoginForm />
+      <AuthUser />
     </header>
   </div>
 );

src/components/AuthUser/AuthUser.tsx

+import React from 'react';
+import Container from '@material-ui/core/Container';
+import { LoginForm } from './LoginForm/LoginForm';
+
+export const AuthUser: React.FC = () => (
+  <Container maxWidth="sm">
+    <LoginForm />
+  </Container>
+);

src/components/AuthUser/LoginForm/LoginForm.mdx

+---
+name: LoginForm
+---
+
+import { LoginForm } from './LoginForm.tsx';
+
+# LoginForm
+Lets registered user authenticate
+
+<LoginForm />
\ No newline at end of file

src/components/LoginForm/LoginForm.tsx → src/components/AuthUser/LoginForm/LoginForm.tsx

@@ -38,12 +38,7 @@ export const LoginForm: React.FC = () => {
   const handleSubmit = (event: React.FormEvent): void => {
     event.preventDefault();
     const errors: Array<string> = [];
-    if (!isEmailValid(formValues.email)) {
-      errors.push('email');
-      console.log('Email address not valid');
-    } else {
-      console.log(formValues);
-    }
+    if (!isEmailValid(formValues.email)) errors.push('email');
   };
 
   const classes = useStyles();