Components refactoring and small fixes

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,
+  dense, disabled, noBorder, noOutline,
-  borderClass = 'border rounded',
+  colors = 'clr-btn-default',
-  colorClass = '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>
   );
 }

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}

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
 }
 

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

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

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'> {
+extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
-  label?: string
-  tooltip?: string
-  dimensions?: string
   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}

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'> {
+extends IEditorProps, IColorsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'> {
-  id?: string
-  label?: string
-  tooltip?: string
-  dimensions?: string
-  colorClass?: string
   dense?: boolean
-  noBorder?: boolean
+  allowEnter?: boolean
-  noOutline?: 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>

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

rsconcept/frontend/src/index.css

@@ -243,7 +243,6 @@
   }
 
   :is(.clr-outline,
-    .clr-btn-default,
     .clr-btn-primary
   ):focus {
     outline-width: 2px;

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)}
       />

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='Формальное определение'

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx

@@ -143,9 +143,9 @@ function EditorRSExpression({
         <Button
           tooltip='Проверить формальное определение'
           text='Проверить'
-          dimensions='w-fit h-[3rem] z-pop'
+          dimensions='w-fit h-[3rem] z-pop rounded-none'
-          colorClass='clr-btn-default'
+          colors='clr-btn-default'
-          borderClass='rounded-none border'
+          noOutline
           onClick={() => handleCheckExpression()}
         />
         <StatusBar

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}
         />

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 => {

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';