From bdbf77faa29fc1bfae3bba0803d6c4ae62da9394 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 5 Nov 2023 16:31:49 +0300
Subject: [PATCH] Components refactoring and small fixes

---
 .../frontend/src/components/Common/Button.tsx | 20 ++++++-------
 .../src/components/Common/ConceptTooltip.tsx  |  9 ++++--
 .../src/components/Common/FileInput.tsx       |  3 +-
 .../src/components/Common/MiniButton.tsx      |  2 +-
 .../frontend/src/components/Common/Modal.tsx  |  2 +-
 .../src/components/Common/SelectorButton.tsx  |  6 ++--
 .../src/components/Common/TextArea.tsx        | 15 +++++-----
 .../src/components/Common/TextInput.tsx       | 28 ++++++++++---------
 .../src/components/commonInterfaces.ts        | 17 +++++++++++
 rsconcept/frontend/src/index.css              |  1 -
 rsconcept/frontend/src/pages/LoginPage.tsx    |  8 +++---
 .../pages/RSFormPage/EditorConstituenta.tsx   |  2 +-
 .../pages/RSFormPage/EditorRSExpression.tsx   |  6 ++--
 .../pages/RSFormPage/elements/RSTabsMenu.tsx  |  6 ++--
 .../pages/UserProfilePage/EditorPassword.tsx  |  4 +--
 .../pages/UserProfilePage/EditorProfile.tsx   |  2 +-
 rsconcept/frontend/src/utils/labels.ts        |  2 +-
 17 files changed, 78 insertions(+), 55 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/commonInterfaces.ts

diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx
index efb5476b..e5a95a2c 100644
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@@ -1,35 +1,35 @@
+import { IColorsProps, IControlProps } from '../commonInterfaces'
+
 interface ButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title'| 'type'> {
+extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title'| 'type'> {
   text?: string
   icon?: React.ReactNode
-  tooltip?: string
+
   dense?: boolean
   loading?: boolean
-  dimensions?: string
-  borderClass?: string
-  colorClass?: string
 }
 
 function Button({
   text, icon, tooltip,
-  dense, disabled,
-  borderClass = 'border rounded',
-  colorClass = 'clr-btn-default',
+  dense, disabled, noBorder, noOutline,
+  colors = 'clr-btn-default',
   dimensions = 'w-fit h-fit',
   loading,
   ...props
 }: ButtonProps) {
+  const borderClass = noBorder ? '' : 'border rounded';
   const padding = dense ? 'px-1' : 'px-3 py-2';
+  const outlineClass = noOutline ? 'outline-none': 'clr-outline';
   const cursor = 'disabled:cursor-not-allowed ' + (loading ? 'cursor-progress ' : 'cursor-pointer ');
   return (
     <button type='button'
       disabled={disabled ?? loading}
       title={tooltip}
-      className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${colorClass} ${dimensions} ${borderClass} ${cursor}`}
+      className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${colors} ${outlineClass} ${borderClass} ${dimensions} ${cursor}`}
       {...props}
     >
       {icon && icon}
-      {text && <span className={'font-semibold'}>{text}</span>}
+      {text && <span className='font-semibold'>{text}</span>}
     </button>
   );
 }
diff --git a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
index 1f150ff5..bc9ad207 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@@ -7,13 +7,18 @@ extends Omit<ITooltip, 'variant'> {
   layer?: string
 }
 
-function ConceptTooltip({ className, layer, place='bottom', ...props }: ConceptTooltipProps) {
+function ConceptTooltip({
+  className,
+  layer='z-tooltip',
+  place='bottom',
+  ...props
+}: ConceptTooltipProps) {
   const { darkMode } = useConceptTheme();
 
   return (
   <Tooltip
     opacity={0.97}
-    className={`overflow-auto border shadow-md ${layer ?? 'z-tooltip'} ${className}`}
+    className={`overflow-auto border shadow-md ${layer} ${className}`}
     variant={(darkMode ? 'dark' : 'light')}
     place={place}
     {...props}
diff --git a/rsconcept/frontend/src/components/Common/FileInput.tsx b/rsconcept/frontend/src/components/Common/FileInput.tsx
index 96b6f2a4..053347d9 100644
--- a/rsconcept/frontend/src/components/Common/FileInput.tsx
+++ b/rsconcept/frontend/src/components/Common/FileInput.tsx
@@ -8,8 +8,9 @@ interface FileInputProps
 extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title' | 'style' | 'accept' | 'type'> {
   label: string
   tooltip?: string
-  acceptType?: string
   dimensions?: string
+  
+  acceptType?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
diff --git a/rsconcept/frontend/src/components/Common/MiniButton.tsx b/rsconcept/frontend/src/components/Common/MiniButton.tsx
index 7fdafc78..aaf09909 100644
--- a/rsconcept/frontend/src/components/Common/MiniButton.tsx
+++ b/rsconcept/frontend/src/components/Common/MiniButton.tsx
@@ -1,5 +1,5 @@
 interface MiniButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' |'children' > {
+extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' | 'children' > {
   icon: React.ReactNode
   tooltip?: string
   noHover?: boolean
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index 8be6bc10..d6fdbce7 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -52,7 +52,7 @@ function Modal({
           text={submitText}
           tooltip={!canSubmit ? submitInvalidTooltip: ''}
           dimensions='min-w-[6rem] min-h-[2.6rem] w-fit h-fit'
-          colorClass='clr-btn-primary'
+          colors='clr-btn-primary'
           disabled={!canSubmit}
           onClick={handleSubmit}
           autoFocus
diff --git a/rsconcept/frontend/src/components/Common/SelectorButton.tsx b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
index 41b62735..1b3de957 100644
--- a/rsconcept/frontend/src/components/Common/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
@@ -5,14 +5,14 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'child
   tooltip?: string
   dimensions?: string
   borderClass?: string
-  colorClass?: string
+  colors?: string
   transparent?: boolean
 }
 
 
 function SelectorButton({
   text, icon, tooltip,
-  colorClass = 'clr-btn-default',
+  colors = 'clr-btn-default',
   dimensions = 'w-fit h-fit',
   transparent,
   ...props
@@ -21,7 +21,7 @@ function SelectorButton({
   const position = `px-1 flex flex-start items-center gap-1 ${dimensions}`
   return (
     <button type='button'
-      className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls select-none ${transparent ? 'clr-hover' : colorClass}`}
+      className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls select-none ${transparent ? 'clr-hover' : colors}`}
       title={tooltip}
       {...props}
     >
diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index 4ca8799f..2d7fc8fd 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -1,23 +1,22 @@
 import { TextareaHTMLAttributes } from 'react';
 
+import { IColorsProps, IEditorProps } from '../commonInterfaces';
 import Label from './Label';
 
 export interface TextAreaProps 
-extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
-  label?: string
-  tooltip?: string
-  dimensions?: string
+extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
   dense?: boolean
-  colorClass?: string
 }
 
 function TextArea({
-  id, label, required, tooltip, dense,
+  id, label, required, tooltip, dense, noBorder, noOutline,
   dimensions = 'w-full',
-  colorClass = 'clr-input',
+  colors = 'clr-input',
   rows = 4,
   ...props
 }: TextAreaProps) {
+  const borderClass = noBorder ? '': 'border';
+  const outlineClass = noOutline ? '': 'clr-outline';
   return (
     <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
       {label && 
@@ -27,7 +26,7 @@ function TextArea({
       />}
       <textarea id={id}
         title={tooltip}
-        className={`px-3 py-2 leading-tight border clr-outline ${colorClass} ${dense ? 'w-full' : dimensions}`}
+        className={`px-3 py-2 leading-tight ${outlineClass} ${borderClass} ${colors} ${dense ? 'w-full' : dimensions}`}
         rows={rows}
         required={required}
         {...props}
diff --git a/rsconcept/frontend/src/components/Common/TextInput.tsx b/rsconcept/frontend/src/components/Common/TextInput.tsx
index 82ec6449..5e72fde5 100644
--- a/rsconcept/frontend/src/components/Common/TextInput.tsx
+++ b/rsconcept/frontend/src/components/Common/TextInput.tsx
@@ -1,21 +1,22 @@
+import { IColorsProps, IEditorProps } from '../commonInterfaces';
 import Label from './Label';
 
-interface TextInputProps
-extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'> {
-  id?: string
-  label?: string
-  tooltip?: string
-  dimensions?: string
-  colorClass?: string
+interface TextInputProps 
+extends IEditorProps, IColorsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'> {
   dense?: boolean
-  noBorder?: boolean
-  noOutline?: boolean
+  allowEnter?: boolean
+}
+
+function preventEnterCapture(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
 }
 
 function TextInput({
-  id, required, label, dense, tooltip, noBorder, noOutline,
+  id, label, dense, tooltip, noBorder, noOutline, allowEnter, onKeyDown,
   dimensions = 'w-full',
-  colorClass = 'clr-input',
+  colors = 'clr-input',
   ...props
 }: TextInputProps) {
   const borderClass = noBorder ? '': 'border';
@@ -29,8 +30,9 @@ function TextInput({
       />}
       <input id={id}
         title={tooltip}
-        className={`px-3 py-2 leading-tight truncate hover:text-clip ${outlineClass} ${borderClass} ${colorClass} ${dense ? 'w-full' : dimensions}`}
-        required={required}
+        
+        onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture: onKeyDown}
+        className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
         {...props}
       />
     </div>
diff --git a/rsconcept/frontend/src/components/commonInterfaces.ts b/rsconcept/frontend/src/components/commonInterfaces.ts
new file mode 100644
index 00000000..45a962c9
--- /dev/null
+++ b/rsconcept/frontend/src/components/commonInterfaces.ts
@@ -0,0 +1,17 @@
+// =========== Module contains interfaces for common UI elements. ==========
+export interface IControlProps {
+  tooltip?: string
+  dimensions?: string
+  
+  disabled?: boolean
+  noBorder?: boolean
+  noOutline?: boolean
+}
+
+export interface IEditorProps extends IControlProps {
+  label?: string
+}
+
+export interface IColorsProps {
+  colors?: string
+}
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index 79e828a0..8b8b605d 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -243,7 +243,6 @@
   }
 
   :is(.clr-outline,
-    .clr-btn-default,
     .clr-btn-primary
   ):focus {
     outline-width: 2px;
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index 2f06e6f2..eb219726 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -91,18 +91,18 @@ function LoginPage() {
       onSubmit={handleSubmit}
       dimensions='w-[24rem]'
     >
-      <TextInput id='username'
+      <TextInput id='username' type='text'
         label='Имя пользователя'
         required
-        type='text'
+        allowEnter
         value={username}
         autoFocus
         onChange={event => setUsername(event.target.value)}
       />
-      <TextInput id='password'
+      <TextInput id='password' type='password'
         label='Пароль'
         required
-        type='password'
+        allowEnter
         value={password}
         onChange={event => setPassword(event.target.value)}
       />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index a29f8363..09d781e9 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -226,7 +226,7 @@ function EditorConstituenta({
           dense
           rows={1}
           value={typification}
-          colorClass='clr-app'
+          colors='clr-app'
           disabled
         />
         <EditorRSExpression id='expression' label='Формальное определение'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
index b5e89a08..bc078f58 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
@@ -143,9 +143,9 @@ function EditorRSExpression({
         <Button
           tooltip='Проверить формальное определение'
           text='Проверить'
-          dimensions='w-fit h-[3rem] z-pop'
-          colorClass='clr-btn-default'
-          borderClass='rounded-none border'
+          dimensions='w-fit h-[3rem] z-pop rounded-none'
+          colors='clr-btn-default'
+          noOutline
           onClick={() => handleCheckExpression()}
         />
         <StatusBar
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
index 91ad22e3..96948c1a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
@@ -81,9 +81,9 @@ function RSTabsMenu({
       <Button
         tooltip='Действия'
         icon={<MenuIcon color='text-controls' size={5}/>}
-        borderClass=''
         dimensions='h-full w-fit pl-2'
         style={{outlineColor: 'transparent'}}
+        noBorder
         dense
         onClick={schemaMenu.toggle}
         tabIndex={-1}
@@ -137,11 +137,11 @@ function RSTabsMenu({
     <div ref={editMenu.ref}>
       <Button
         tooltip={'измнение: ' + (isEditable ? '[доступно]' : '[запрещено]')}
-        borderClass=''
         dimensions='h-full w-fit'
         style={{outlineColor: 'transparent'}}
         icon={<EditIcon size={5} color={isEditable ? 'text-success' : 'text-warning'}/>}
         dense
+        noBorder
         onClick={editMenu.toggle}
         tabIndex={-1}
       />
@@ -185,9 +185,9 @@ function RSTabsMenu({
           : <NotSubscribedIcon color='text-controls' size={5}/>
         }
         dimensions='h-full w-fit pr-2'
-        borderClass=''
         style={{outlineColor: 'transparent'}}
         dense
+        noBorder
         onClick={onToggleSubscribe}
         tabIndex={-1}
         />
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
index 1999b128..ff5d5ec1 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@@ -70,7 +70,7 @@ function EditorPassword() {
             onChange={event => setOldPassword(event.target.value)}
           />
           <TextInput id='new_password' type='password' 
-            colorClass={passwordColor}
+            colors={passwordColor}
             label='Новый пароль'
             value={newPassword}
             onChange={event => {
@@ -78,7 +78,7 @@ function EditorPassword() {
             }}
           />
           <TextInput id='new_password_repeat' type='password' 
-            colorClass={passwordColor}
+            colors={passwordColor}
             label='Повторите новый'
             value={newPasswordRepeat}
             onChange={event => {
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
index 6cc2094c..1de38658 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
@@ -52,7 +52,7 @@ function EditorProfile() {
   return (
     <form onSubmit={handleSubmit} className='px-6 py-2 flex flex-col gap-8 min-w-[18rem]'>
       <div className='flex flex-col gap-3'>
-        <TextInput id='username' 
+        <TextInput id='username'
           label='Логин'
           tooltip='Логин изменить нельзя'
           disabled={true}
diff --git a/rsconcept/frontend/src/utils/labels.ts b/rsconcept/frontend/src/utils/labels.ts
index 1e62a651..12138325 100644
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@@ -1,4 +1,4 @@
-// =========== Modules contains all text descriptors ==========
+// =========== Module contains all text descriptors. ==========
 
 import { GramData,Grammeme, ReferenceType } from '../models/language';
 import { CstMatchMode, DependencyMode, HelpTopic, LibraryFilterStrategy } from '../models/miscelanious';