From 8a1f6997eabdec686190d1b5ef12e1e005e771bc Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 3 May 2024 13:38:17 +0300
Subject: [PATCH] apps/web: remove elements components define global elements
 css

---
 apps/web/components/Form.jsx                         | 10 ++++------
 apps/web/elements/Button.tsx                         | 12 ------------
 apps/web/elements/Error.jsx                          |  5 -----
 apps/web/elements/H.jsx                              |  5 -----
 apps/web/elements/Input.tsx                          |  7 -------
 apps/web/elements/index.js                           |  4 ----
 .../Button.module.css => styles/button.css}          |  2 +-
 .../{elements/Error.module.css => styles/error.css}  |  0
 apps/web/styles/globals.css                          |  4 ++++
 apps/web/{elements/H.module.css => styles/h.css}     |  2 +-
 .../{elements/Input.module.css => styles/input.css}  |  6 +++---
 11 files changed, 13 insertions(+), 44 deletions(-)
 delete mode 100644 apps/web/elements/Button.tsx
 delete mode 100644 apps/web/elements/Error.jsx
 delete mode 100644 apps/web/elements/H.jsx
 delete mode 100644 apps/web/elements/Input.tsx
 rename apps/web/{elements/Button.module.css => styles/button.css} (97%)
 rename apps/web/{elements/Error.module.css => styles/error.css} (100%)
 rename apps/web/{elements/H.module.css => styles/h.css} (95%)
 rename apps/web/{elements/Input.module.css => styles/input.css} (77%)

diff --git a/apps/web/components/Form.jsx b/apps/web/components/Form.jsx
index 47a2a1a..0271d5f 100644
--- a/apps/web/components/Form.jsx
+++ b/apps/web/components/Form.jsx
@@ -1,6 +1,5 @@
 import styles from './Form.module.scss';
 import { publicRuntimeConfig } from '@/config/runtime';
-import { Button, Error, Input } from '@/elements';
 import axios from 'axios';
 import { useState } from 'react';
 
@@ -8,7 +7,6 @@ const { APP_BASE_PATH } = publicRuntimeConfig;
 
 export function Form() {
   const [hasError, setHasError] = useState(false);
-  const error = hasError ? <Error>Неверный логин или пароль</Error> : null;
 
   return (
     <form
@@ -34,10 +32,10 @@ export function Form() {
           });
       }}
     >
-      <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
-      <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
-      {error}
-      <Button>Войти</Button>
+      <input name="login" type="text" placeholder="Логин" required autoComplete="on" />
+      <input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
+      {hasError ? <span className="error">Неверный логин или пароль</span> : null}
+      <button type="submit">Войти</button>
     </form>
   );
 }
diff --git a/apps/web/elements/Button.tsx b/apps/web/elements/Button.tsx
deleted file mode 100644
index d156cce..0000000
--- a/apps/web/elements/Button.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable react/button-has-type */
-import styles from './Button.module.css';
-
-type ButtonProps = JSX.IntrinsicElements['button'];
-
-export function Button({ children, ...props }: ButtonProps) {
-  return (
-    <button className={styles.btn} {...props}>
-      {children}
-    </button>
-  );
-}
diff --git a/apps/web/elements/Error.jsx b/apps/web/elements/Error.jsx
deleted file mode 100644
index d1f5668..0000000
--- a/apps/web/elements/Error.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styles from './Error.module.css';
-
-export function Error({ children }) {
-  return <span className={styles.error}>{children}</span>;
-}
diff --git a/apps/web/elements/H.jsx b/apps/web/elements/H.jsx
deleted file mode 100644
index db91642..0000000
--- a/apps/web/elements/H.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styles from './H.module.css';
-
-export function H3({ children }) {
-  return <h3 className={styles.h3}>{children}</h3>;
-}
diff --git a/apps/web/elements/Input.tsx b/apps/web/elements/Input.tsx
deleted file mode 100644
index fa47346..0000000
--- a/apps/web/elements/Input.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from './Input.module.css';
-
-type InputProps = JSX.IntrinsicElements['input'];
-
-export function Input(props: InputProps) {
-  return <input className={styles.input} {...props} />;
-}
diff --git a/apps/web/elements/index.js b/apps/web/elements/index.js
index 9336413..d97c695 100644
--- a/apps/web/elements/index.js
+++ b/apps/web/elements/index.js
@@ -1,5 +1 @@
-export * from './Button';
-export * from './Error';
-export * from './H';
-export * from './Input';
 export * from './Logo';
diff --git a/apps/web/elements/Button.module.css b/apps/web/styles/button.css
similarity index 97%
rename from apps/web/elements/Button.module.css
rename to apps/web/styles/button.css
index 419bcd3..37fcaa6 100644
--- a/apps/web/elements/Button.module.css
+++ b/apps/web/styles/button.css
@@ -1,4 +1,4 @@
-.btn {
+button {
   background-color: var(--color-primary);
   font-family: Montserrat;
   border: 0;
diff --git a/apps/web/elements/Error.module.css b/apps/web/styles/error.css
similarity index 100%
rename from apps/web/elements/Error.module.css
rename to apps/web/styles/error.css
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 4336cef..0dba46a 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1 +1,5 @@
 @import 'node_modules/modern-normalize/modern-normalize.css';
+@import './button.css';
+@import './input.css';
+@import './h.css';
+@import './error.css';
diff --git a/apps/web/elements/H.module.css b/apps/web/styles/h.css
similarity index 95%
rename from apps/web/elements/H.module.css
rename to apps/web/styles/h.css
index f244fec..421ea52 100644
--- a/apps/web/elements/H.module.css
+++ b/apps/web/styles/h.css
@@ -1,4 +1,4 @@
-.h3 {
+h3 {
   color: var(--color-primary);
   font-family: Montserrat;
   font-weight: 700;
diff --git a/apps/web/elements/Input.module.css b/apps/web/styles/input.css
similarity index 77%
rename from apps/web/elements/Input.module.css
rename to apps/web/styles/input.css
index 4b15105..b6d7e72 100644
--- a/apps/web/elements/Input.module.css
+++ b/apps/web/styles/input.css
@@ -1,6 +1,6 @@
-.input {
+input {
   font-family: Montserrat;
-  border: 1px solid rgba(0,16,61,.12);
+  border: 1px solid rgba(0, 16, 61, 0.12);
   box-sizing: border-box;
   height: 40px;
   background: #fff;
@@ -10,7 +10,7 @@
   /* font-size: 15px; */
 }
 
-.input::placeholder {
+input::placeholder {
   color: var(--color-primary);
   filter: brightness(0.25);
   opacity: 0.9;