initial UI part

.env

@@ -0,0 +1,10 @@
+NEXT_PUBLIC_COLOR_PRIMARY=#BF3676
+NEXT_PUBLIC_COLOR_SECONDARY=#FD4047
+NEXT_PUBLIC_COLOR_TERTIARTY=#FF9112
+
+# Production
+# NEXT_PUBLIC_COLOR_PRIMARY=#1C01A9
+# NEXT_PUBLIC_COLOR_SECONDARY=#3A0185
+# NEXT_PUBLIC_COLOR_TERTIARTY=#580161
+
+

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/node_modules": true
+  },
+  "explorerExclude.backup": null,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true,
+    "source.fixAll": true
+  },
+  "workbench.editor.labelFormat": "short"
+}

Components/Layout/Auth.jsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { Flex } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
+
+const UserText = styled.span`
+  margin: 0;
+  margin-bottom: 1px;
+  padding: 0;
+  text-transform: uppercase;
+  color: #fff;
+  font-size: 0.5rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+
+  ${min('laptop')} {
+    font-size: 0.75rem;
+  }
+`;
+
+const User = () => <UserText>username</UserText>;
+
+const Logout = styled.a`
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  color: #fff;
+  font-size: 0.45rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+
+  ${min('laptop')} {
+    font-size: 0.55rem;
+  }
+`;
+
+const Auth = () => {
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems="flex-end"
+      alignSelf={['flex-start']}
+      justifyContent="space-between"
+      height="100%"
+    >
+      <User />
+      <Logout href="/logout">Выход</Logout>
+    </Flex>
+  );
+};
+
+export default Auth;

Components/Layout/Header.jsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { Flex } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
+import Auth from './Auth';
+import Logo from './Logo';
+
+const HeaderContent = styled(Flex)`
+  flex-direction: row;
+  justify-content: space-between;
+  ${'' /* align-items: flex-start; */}
+
+  background: linear-gradient(
+    90deg,
+    var(--color-primary) 0%,
+    var(--color-secondary) 50%,
+    var(--color-tertiarty) 100%
+  );
+
+  ${'' /* height: 70px; */}
+  padding: 10px 12px;
+  ${min('laptop')} {
+    padding: 10px 12px;
+    padding-left: 20px;
+  }
+`;
+
+const Wrapper = styled.header`
+  position: sticky;
+  top: 0;
+  z-index: 999999;
+`;
+
+const Header = () => (
+  <Wrapper>
+    <HeaderContent>
+      <Logo />
+      <Auth />
+    </HeaderContent>
+  </Wrapper>
+);
+
+export default Header;

Components/Layout/Logo.jsx

@@ -0,0 +1,39 @@
+import Image from 'next/image';
+import logo from 'public/assets/images/logo-long.png';
+import styled from 'styled-components';
+import { Flex } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
+
+const ImageWrapper = styled.div`
+  width: 100px;
+  ${min('laptop')} {
+    width: 135px;
+  }
+`;
+
+const LogoText = styled.h3`
+  margin: 0;
+  text-transform: uppercase;
+  color: #fff;
+  font-size: 0.95rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  ${min('laptop')} {
+    font-size: 1.2rem;
+  }
+`;
+
+const Logo = () => (
+  <Flex
+    flexDirection="column"
+    alignItems="flex-start"
+    justifyContent="space-between"
+  >
+    <ImageWrapper>
+      <Image alt="logo" src={logo} layout="responsive" objectFit="contain" />
+    </ImageWrapper>
+    <LogoText>Лизинговый Калькулятор</LogoText>
+  </Flex>
+);
+
+export default Logo;

Components/Layout/index.jsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Box, Flex } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
+import Header from './Header';
+
+const ContentWrapper = styled(Box)`
+  ${min('laptop')} {
+    margin: 3px 8px;
+  }
+  ${min('desktop')} {
+    margin: 3px 7%;
+  }
+  ${min('extra')} {
+    margin: 3px 15%;
+  }
+`;
+
+const Layout = ({ children }) => (
+  <Flex flexDirection="column">
+    <Header />
+    <ContentWrapper>{children}</ContentWrapper>
+  </Flex>
+);
+
+export default Layout;

Components/Spinner.jsx

@@ -0,0 +1,7 @@
+import LoadingOutlined from '@ant-design/icons/lib/icons/LoadingOutlined';
+import { Spin } from 'antd';
+
+export default Spin;
+
+const loadingOutlined = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+export const Outlined = <Spin indicator={loadingOutlined} />;

UIKit/colors.js

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+:root {
+    --color-background: rgb(240, 240, 240);
+    --color-primary: ${process.env.NEXT_PUBLIC_COLOR_PRIMARY};
+    --color-secondary: ${process.env.NEXT_PUBLIC_COLOR_SECONDARY};
+    --color-tertiarty: ${process.env.NEXT_PUBLIC_COLOR_TERTIARTY};
+    } 
+`;

UIKit/grid.js

@@ -0,0 +1,2 @@
+import { Box, Flex } from 'rebass/styled-components';
+export { Box, Flex };

UIKit/mq.ts

@@ -0,0 +1,20 @@
+const screens = {
+  tablet: 768,
+  laptop: 1024,
+  laptopHD: 1366,
+  desktop: 1680,
+  extra: 2560,
+};
+
+const threshold = 0;
+
+export function min(breakpoint: keyof typeof screens) {
+  return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
+}
+export function max(breakpoint: keyof typeof screens) {
+  return `@media (max-width: calc(${screens[breakpoint]}px))`;
+}
+
+export const mediaQuery = {
+  breakpoints: Object.values(screens).map(value => value + threshold + 'px'),
+};

UIKit/theme.js

@@ -0,0 +1,5 @@
+import { mediaQuery } from './mq';
+
+const theme = { ...mediaQuery };
+
+export default theme;

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  compiler: {
+    styledComponents: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evocalculator.client2",
-  "version": "0.1.0",
+  "version": "2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,14 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "antd": "^4.19.5",
     "next": "12.1.5",
     "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "rebass": "^4.0.7",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@types/node": "17.0.25",
     "@types/react": "18.0.5",
     "@types/react-dom": "18.0.1",
+    "@types/rebass": "^4.0.10",
+    "@types/styled-components": "^5.1.25",
     "eslint": "8.13.0",
     "eslint-config-next": "12.1.5",
     "typescript": "4.6.3"

pages/404.jsx

@@ -0,0 +1,5 @@
+import { Result } from 'antd';
+
+export default function NotFound() {
+  return <Result status="404" title="404" subTitle="Ой! Тут ничего нет." />;
+}

pages/500.jsx

@@ -0,0 +1,12 @@
+import { Result } from 'antd';
+
+export default function NotFound(props) {
+  return (
+    <Result
+      status="500"
+      title=""
+      subTitle={'Ой! Что-то сломалось.'}
+      {...props}
+    />
+  );
+}

pages/_app.tsx

@@ -1,8 +1,19 @@
-import '../styles/globals.css'
+import Layout from 'Components/Layout';
-import type { AppProps } from 'next/app'
+import type { AppProps } from 'next/app';
+import { ThemeProvider } from 'styled-components';
+import { GlobalStyle } from 'UIKit/colors';
+import theme from 'UIKit/theme';
+import '../styles/globals.css';
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </ThemeProvider>
+  );
 }
 
-export default MyApp
+export default App;

pages/_document.jsx

@@ -0,0 +1,58 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="ru" translate="no">
+        <Head>
+          <meta charSet="utf-8" />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossOrigin="true"
+          />
+          <link
+            rel="preconnect"
+            href="https://cdnjs.cloudflare.com"
+            crossOrigin="true"
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+          />
+
+          <link
+            rel="icon"
+            href={
+              process.env.NODE_ENV === 'production'
+                ? 'favicon.prod.ico'
+                : 'favicon.ico'
+            }
+            crossOrigin="use-credentials"
+          />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
+          />
+          <meta name="theme-color" content="#000000" />
+          <meta name="description" content="Лизинговый калькулятор Эволюция" />
+          <link
+            rel="apple-touch-icon"
+            href="logo-100.png"
+            crossOrigin="use-credentials"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

pages/api/health.ts

@@ -0,0 +1,6 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).send('Works!');
+}

pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

pages/index.tsx

@@ -1,72 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
 
 const Home: NextPage = () => {
-  return (
+  return <div>Home</div>;
-    <div className={styles.container}>
+};
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
 
-      <main className={styles.main}>
+export default Home;
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}
-
-export default Home

public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

styles/Home.module.css

@@ -1,116 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

styles/globals.css

@@ -1,5 +1,6 @@
 html,
 body {
+  background-color: var(--color-background);
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,