The assignment has been done.

.gitignore

@@ -1 +1,27 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Temporary env files
+/public/env-config.js
+env-config.js

craco.config.js

@@ -0,0 +1,55 @@
+const CracoAntDesignPlugin = require('craco-antd')
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAntDesignPlugin,
+      options: {
+        customizeTheme: {
+          '@font-family': 'Dana !important',
+          '@blue-base': '#0c67f0',
+          '@primary-color': '#04b946',
+          '@success-color': '#04b946',
+          '@error-color': '#dd0a0a',
+          '@warning-color': '#ffb60a',
+          '@black': '#404040',
+          '@font-size-base': '16px',
+          '@text-color': '#404040',
+          '@link-color': '#04b946',
+          '@disabled-color': '#9c9c9c',
+          '@highlight-color': '#eefff2',
+          '@body-background': '#f9f9f9',
+          '@modal-mask-bg': 'fade(#404040, 40%)',
+          '@box-shadow-base': ' 0 3px 10px 0 rgba(64, 64, 64, 0.16)',
+          '@modal-header-padding': '24px',
+          '@modal-footer-padding-vertical': '24px',
+          '@modal-footer-padding-horizontal': '24px',
+          '@btn-default-color': '#404040',
+          '@btn-default-border': '#04b946',
+          '@disabled-color': '#dedede',
+          '@disabled-bg': '#f9f9f9',
+          '@breadcrumb-base-color': '#404040',
+          '@breadcrumb-font-size': '14px',
+          '@breadcrumb-link-color': '#404040',
+          '@breadcrumb-separator-color': '#404040',
+          '@menu-item-color': '#404040',
+          '@line-height-base': '1.5',
+          '@btn-font-weight': '500',
+          '@btn-font-size-lg': '16px',
+          '@btn-font-size-sm': '16px',
+          '@btn-padding-horizontal-base': '24px',
+          '@btn-padding-horizontal-lg': '40px',
+          '@btn-padding-horizontal-sm': '8px',
+          '@btn-height-base': '40px',
+          '@btn-height-lg': '56px',
+          '@btn-height-sm': '32px',
+          '@skeleton-paragraph-margin-top': '12px',
+          '@skeleton-paragraph-li-margin-top': '12px',
+          '@skeleton-paragraph-li-height': '24px',
+          '@skeleton-title-height': '24px',
+          '@skeleton-title-paragraph-margin-top': '16px',
+        },
+      },
+    },
+  ],
+}

package.json

@@ -1,22 +1,75 @@
 {
   "name": "frontend-challenge",
-  "version": "1.0.0",
-  "description": "Sheypoor frontend challenge",
-  "main": "sdk/index.js",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "craco start",
+    "build": "craco build'",
+    "pretty": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sheypoor/frontend-challenge.git"
+  "eslintConfig": {
+    "extends": "react-app"
   },
-  "author": "Pendar Safari <[email protected]>",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/sheypoor/frontend-challenge/issues"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "tslint --fix"
   },
-  "homepage": "https://github.com/sheypoor/frontend-challenge#readme",
   "dependencies": {
-    "sdk": "file:sdk"
+    "@ant-design/icons": "^4.5.0",
+    "@craco/craco": "^5.6.4",
+    "@rjsf/antd": "^2.4.2",
+    "@rjsf/core": "^2.4.2",
+    "@types/js-cookie": "^2.2.6",
+    "@types/react-helmet": "^6.1.0",
+    "antd": "^4.7.0",
+    "classnames": "2.2.6",
+    "craco-antd": "^1.18.1",
+    "craco-less": "^1.17.0",
+    "js-cookie": "^2.2.1",
+    "react": "^16.14.0",
+    "react-context-devtool": "^2.0.3",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "react-intl": "^5.8.6",
+    "react-jss": "^10.4.0",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@formatjs/cli": "^1.10.6",
+    "@testing-library/jest-dom": "5.5.0",
+    "@testing-library/react": "10.0.2",
+    "@types/classnames": "2.2.10",
+    "@types/jest": "^26.0.7",
+    "@types/node": "12",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "16.9.6",
+    "@types/react-router-dom": "5.1.5",
+    "babel-plugin-import": "1.13.0",
+    "husky": ">=4",
+    "lint-staged": ">=10",
+    "prettier": "2.0.5",
+    "react-scripts": "3.4.1",
+    "tslint": "6.1.2",
+    "tslint-config-airbnb": "5.11.2",
+    "tslint-config-prettier": "1.18.0",
+    "tslint-plugin-prettier": "2.3.0",
+    "tslint-react": "5.0.0",
+    "typescript": "^3.9.7"
   }
 }

public/index.html

@@ -0,0 +1,40 @@
+<!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="description" content="ثبت نام" />
+    <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" />
+    <!--
+      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>ثبت نام</title>
+    <script src="%PUBLIC_URL%/env-config.js"></script>
+  </head>
+  <body dir="rtl">
+    <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>

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"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

public/silent-renew.html

@@ -0,0 +1,7 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.5.1/oidc-client.js"></script>
+<script>
+    var mgr = new Oidc.UserManager();
+    mgr.signinSilentCallback().catch(function (error) {
+        console.error(error);
+    });
+</script>

src/core/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useLocalStorage";

src/core/hooks/useLocalStorage.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+
+// Hook
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error)
+      return initialValue
+    }
+  })
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  return [storedValue, setValue]
+}

src/domains/App/App.biz.ts

@@ -0,0 +1,26 @@
+import { useLocalStorage } from "core/hooks";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+
+export const useApp = () => {
+  const [userInfo, setUserInfo] = useLocalStorage<any>(
+    "userInfo",
+    JSON.parse(Cookies.get("userInfo") || "{}")
+  );
+
+  const setUserInformation = (user: any) => {
+    setUserInfo(user);
+    Cookies.set("userInfo", JSON.stringify(user), { expires: 365 });
+  };
+
+  useEffect(() => {
+    setUserInfo(JSON.parse(Cookies.get("userInfo") || "{}"));
+  }, []);
+
+  const contextValue: any = {
+    setUserInformation,
+    userInfo,
+  };
+
+  return { contextValue };
+};

src/domains/App/App.context.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, FC, useContext } from "react";
+
+interface IAppProviderProps {
+  children: any;
+  value: any;
+}
+
+const AppContext = createContext({
+  setUserInformation: (values: any) => {},
+  userInfo: {} as any,
+});
+
+export const useAppContext = () => useContext(AppContext);
+
+export const AppProvider: FC<IAppProviderProps> = ({ ...props }) => (
+  <AppContext.Provider {...{ ...props }} />
+);

src/domains/App/App.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { useApp } from './App.biz'
+import { AppProvider } from './App.context'
+import AppRoutes from './AppRoutes'
+
+const App: FC = () => {
+  const { contextValue: value } = useApp()
+
+  return (
+    <AppProvider {...{ value }}>
+      <Router>
+        <AppRoutes></AppRoutes>
+      </Router>
+    </AppProvider>
+  )
+}
+
+export default App

src/domains/App/AppRoutes.tsx

@@ -0,0 +1,22 @@
+import React, { FC, memo } from "react";
+import { Route, Switch } from "react-router-dom";
+
+import Register from "domains/Register";
+
+const AppRoutes: FC = () => {
+  return (
+    <Switch>
+      <Route path="/" exact>
+        <Register />
+      </Route>
+      <Route path="/register">
+        <Register />
+      </Route>
+      <Route path="*">
+        <h1>پیدا نشد!</h1>
+      </Route>
+    </Switch>
+  );
+};
+
+export default memo(AppRoutes);