ezysign · Xkill119966 · Aug 19, 2020 · Aug 24, 2020 · Aug 25, 2020 · Aug 25, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+
+/node_modules
+
diff --git a/README.md b/README.md
@@ -27,3 +27,8 @@ Please provide the setup procedures or documentation if project needs some extra
 Please Fork the repo and submit PR with title in following format
 
 `NAME: FrontendTest`
+
+### Running tests
+```bash
+npm run test
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "frontendtest",
+  "version": "1.0.0",
+  "description": "- Build the basic login form using api and simple home page displaying list of resources from api  using React. - You may choose your 3rd party libraries of your choice.  - For API you may use https://reqres.in/  - For UI you may use one of the following third party libraries like    - [https://ant.design/](https://ant.design/)    - [https://material-ui.com/](https://material-ui.com/)   - [https://semantic-ui.com/](https://semantic-ui.com/)",
+  "main": "index.js",
+  "proxy": "https://reqres.in",
+  "scripts": {
+    "start": "PORT=3000 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Xkill119966/FrontEndTest.git"
+  },
+  "author": "Thu Rein",
+  "license": "ISC",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@material-ui/core": "^4.11.0",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "axios-mock-adapter": "^1.18.2",
+    "formik": "^2.1.5",
+    "history": "^5.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-masonry-css": "^1.0.14",
+    "react-notify-toast": "^0.5.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-router-last-location": "^2.0.1",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.1.3",
+    "styled-components": "^5.1.1",
+    "yup": "^0.29.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/@ui/Button.js b/src/@ui/Button.js
@@ -0,0 +1,88 @@
+import React from "react";
+import styled, { css } from "styled-components/macro";
+
+import Flex from "./Flex";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+
+const button_sizes = {
+  small: css`
+    padding: 8px 10px;
+    font-size: 12px;
+  `,
+  medium: css`
+    padding: 10px 15px;
+    font-size: 12px;
+  `
+};
+
+
+const StyledButton = styled.button`
+  width: ${p => p.width};
+  height: fit-content;
+  margin: 10px 0;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 50px;
+
+  line-height: 1;
+  font-size: 14px;
+  transition: 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.05);
+    transition: 0.2s;
+  }
+
+  &:disabled {
+    opacity: 0.8;
+  }
+
+  ${p => p.theme.variants[p.variant]}
+  ${p => button_sizes[p.size]};
+
+  @media screen and (${p => p.theme.media.mobile}) {
+    padding: 10px 25px;
+  }
+`;
+
+export const Button = ({
+  variant = "primary",
+  size,
+  width,
+  icon,
+  children,
+  type,
+  isLoading,
+  ...props
+}) => (
+  <StyledButton
+    {...props}
+    variant={variant}
+    size={size}
+    disabled={isLoading}
+    width={width}
+  >
+    {icon && (
+      <FontAwesomeIcon
+        data-testid="icon"
+        spin={isLoading}
+        icon={isLoading ? "spinner" : icon}
+      />
+    )}
+    {children}
+  </StyledButton>
+);
+
+const ButtonGroupFloat = {
+  left: `margin-right: auto;`,
+  right: `margin-left: auto;`
+};
+export const ButtonGroup = styled(Flex)`
+  width: fit-content;
+
+  ${p => ButtonGroupFloat[p.float || "right"]}
+`;
+
+export default Button;
diff --git a/src/@ui/CircleIcon.js b/src/@ui/CircleIcon.js
@@ -0,0 +1,32 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+
+export const StyledCircleIcon = styled.div`
+  font-size: 14px;
+  border-radius: 50px;
+  ${({ size = "40px" }) => css`
+    min-width: ${size};
+    min-height: ${size};
+    max-width: ${size};
+    max-height: ${size};
+  `}
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${p => p.theme.variants[p.variant]}
+`;
+
+
+export const CircleIcon = ({ icon, variant = "secondary", size, ...props }) => {
+  return (
+    <StyledCircleIcon size={size} variant={variant} {...props}>
+      <FontAwesomeIcon icon={icon} />
+    </StyledCircleIcon>
+  );
+};
+
+export default CircleIcon;
diff --git a/src/@ui/Flex.js b/src/@ui/Flex.js
@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components/macro";
+
+export const IGaps = "none" | "small" | "medium" | "large" | "xlarge" | "huge";
+
+export const Flex = styled.div(
+  ({ gap = "none", direction, justify, align, nowrap }) => css`
+    display: flex;
+    flex-direction: ${direction};
+    justify-content: ${justify};
+    align-items: ${align};
+    flex-wrap: ${nowrap ? "no-wrap" : "wrap"};
+
+    & > *:not(:last-child) {
+      ${direction === "column"
+        ? css`
+            margin-bottom: ${p => p.theme.space[gap]}px;
+          `
+        : css`
+            margin-right: ${p => p.theme.space[gap]}px;
+          `}
+    }
+  `
+);
+
+export default Flex;