From 94c26196d16a6d4bbf69a31f60bd02193513a2b8 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 20 Mar 2025 14:42:01 +0300
Subject: [PATCH] R: Improve ValueIcon component

---
 .../src/components/view/value-icon.tsx        | 17 ++--------
 .../src/components/view/value-stats.tsx       | 29 ++++++++++++----
 .../components/editor-library-item.tsx        |  6 ++--
 .../oss-page/editor-oss-card/oss-stats.tsx    | 10 +++---
 .../editor-rsform-card/rsform-stats.tsx       | 34 +++++++++----------
 5 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/rsconcept/frontend/src/components/view/value-icon.tsx b/rsconcept/frontend/src/components/view/value-icon.tsx
index 0dace74f..021dddc4 100644
--- a/rsconcept/frontend/src/components/view/value-icon.tsx
+++ b/rsconcept/frontend/src/components/view/value-icon.tsx
@@ -15,15 +15,9 @@ interface ValueIconProps extends Styling, Titled {
   /** Icon to display. */
   icon: React.ReactNode;
 
-  /** Classname for the text. */
-  textClassName?: string;
-
   /** Callback to be called when the component is clicked. */
   onClick?: (event: React.MouseEvent<Element>) => void;
 
-  /** Number of symbols to display in a small size. */
-  smallThreshold?: number;
-
   /** Indicates that padding should be minimal. */
   dense?: boolean;
 
@@ -39,19 +33,15 @@ export function ValueIcon({
   dense,
   icon,
   value,
-  textClassName,
   disabled = true,
   title,
   titleHtml,
   hideTitle,
   className,
-  smallThreshold,
   onClick,
   ...restProps
 }: ValueIconProps) {
-  // TODO: use CSS instead of threshold
   // TODO: do not add button if onClick is disabled
-  const isSmall = !smallThreshold || String(value).length < smallThreshold;
   return (
     <div
       className={clsx(
@@ -66,11 +56,10 @@ export function ValueIcon({
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}
+      aria-label={title}
     >
-      <MiniButton noHover noPadding icon={icon} onClick={onClick} disabled={disabled} />
-      <span id={id} className={clsx({ 'text-xs': !isSmall }, textClassName)}>
-        {value}
-      </span>
+      {onClick ? <MiniButton noHover noPadding icon={icon} onClick={onClick} disabled={disabled} /> : icon}
+      <span id={id}>{value}</span>
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/components/view/value-stats.tsx b/rsconcept/frontend/src/components/view/value-stats.tsx
index da92b417..021539ea 100644
--- a/rsconcept/frontend/src/components/view/value-stats.tsx
+++ b/rsconcept/frontend/src/components/view/value-stats.tsx
@@ -1,6 +1,7 @@
-import { type Styling, type Titled } from '@/components/props';
+import clsx from 'clsx';
 
-import { ValueIcon } from './value-icon';
+import { type Styling, type Titled } from '@/components/props';
+import { globalIDs } from '@/utils/constants';
 
 // characters - threshold for small labels - small font
 const SMALL_THRESHOLD = 3;
@@ -16,9 +17,23 @@ interface ValueStatsProps extends Styling, Titled {
   value: string | number;
 }
 
-/**
- * Displays statistics value with an icon.
- */
-export function ValueStats(props: ValueStatsProps) {
-  return <ValueIcon dense smallThreshold={SMALL_THRESHOLD} textClassName='min-w-5' {...props} />;
+/** Displays statistics value with an icon. */
+export function ValueStats({ id, icon, value, className, title, titleHtml, hideTitle, ...restProps }: ValueStatsProps) {
+  const isSmall = String(value).length < SMALL_THRESHOLD;
+  return (
+    <div
+      className={clsx('flex items-center gap-1', 'text-right', 'hover:cursor-default', className)}
+      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-html={titleHtml}
+      data-tooltip-content={title}
+      data-tooltip-hidden={hideTitle}
+      aria-label={title}
+      {...restProps}
+    >
+      {icon}
+      <span id={id} className={clsx(!isSmall && 'text-xs', 'min-w-5')}>
+        {value}
+      </span>
+    </div>
+  );
 }
diff --git a/rsconcept/frontend/src/features/library/components/editor-library-item.tsx b/rsconcept/frontend/src/features/library/components/editor-library-item.tsx
index a87e85ca..d83f49f1 100644
--- a/rsconcept/frontend/src/features/library/components/editor-library-item.tsx
+++ b/rsconcept/frontend/src/features/library/components/editor-library-item.tsx
@@ -133,23 +133,21 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
         </Tooltip>
 
         <ValueIcon
+          title='Дата обновления'
           dense
-          disabled
           icon={<IconDateUpdate size='1.25rem' className='text-ok-600' />}
           value={new Date(schema.time_update).toLocaleString(intl.locale)}
-          title='Дата обновления'
         />
 
         <ValueIcon
+          title='Дата создания'
           dense
-          disabled
           icon={<IconDateCreate size='1.25rem' className='text-ok-600' />}
           value={new Date(schema.time_create).toLocaleString(intl.locale, {
             year: '2-digit',
             month: '2-digit',
             day: '2-digit'
           })}
-          title='Дата создания'
         />
       </div>
     </div>
diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-card/oss-stats.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-card/oss-stats.tsx
index d4ed2c51..56acc70f 100644
--- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-card/oss-stats.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-card/oss-stats.tsx
@@ -19,34 +19,34 @@ export function OssStats({ className, stats }: OssStatsProps) {
       </div>
       <ValueStats
         id='count_inputs'
+        title='Загрузка'
         icon={<IconDownload size='1.25rem' className='text-sec-600' />}
         value={stats.count_inputs}
-        title='Загрузка'
       />
       <ValueStats
         id='count_synthesis'
+        title='Синтез'
         icon={<IconSynthesis size='1.25rem' className='text-sec-600' />}
         value={stats.count_synthesis}
-        title='Синтез'
       />
 
       <ValueStats
         id='count_schemas'
+        title='Прикрепленные схемы'
         icon={<IconRSForm size='1.25rem' className='text-sec-600' />}
         value={stats.count_schemas}
-        title='Прикрепленные схемы'
       />
       <ValueStats
         id='count_owned'
+        title='Собственные'
         icon={<IconRSFormOwned size='1.25rem' className='text-sec-600' />}
         value={stats.count_owned}
-        title='Собственные'
       />
       <ValueStats
         id='count_imported'
+        title='Внешние'
         icon={<IconRSFormImported size='1.25rem' className='text-sec-600' />}
         value={stats.count_schemas - stats.count_owned}
-        title='Внешние'
       />
     </div>
   );
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsform-card/rsform-stats.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsform-card/rsform-stats.tsx
index f8fe13b8..943544ce 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsform-card/rsform-stats.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsform-card/rsform-stats.tsx
@@ -38,9 +38,9 @@ export function RSFormStats({ className, stats, isArchive }: RSFormStatsProps) {
       </div>
       <ValueStats
         id='count_owned'
+        title='Собственные'
         icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
         value={stats.count_all - stats.count_inherited}
-        title='Собственные'
       />
       <ValueStats
         id='count_inherited'
@@ -50,98 +50,98 @@ export function RSFormStats({ className, stats, isArchive }: RSFormStatsProps) {
       />
 
       <ValueStats
-        className='col-start-1'
         id='count_ok'
+        title='Корректные'
+        className='col-start-1'
         icon={<IconStatusOK size='1.25rem' className='text-ok-600' />}
         value={stats.count_all - stats.count_errors - stats.count_property - stats.count_incalculable}
-        title='Корректные'
       />
       <ValueStats
         id='count_property'
+        title='Неразмерные'
         icon={<IconStatusProperty size='1.25rem' className='text-sec-600' />}
         value={stats.count_errors}
-        title='Неразмерные'
       />
       <ValueStats
         id='count_incalculable'
+        title='Невычислимые'
         icon={<IconStatusIncalculable size='1.25rem' className='text-warn-600' />}
         value={stats.count_incalculable}
-        title='Невычислимые'
       />
       <ValueStats
         id='count_errors'
+        title='Некорректные'
         icon={<IconStatusError size='1.25rem' className='text-warn-600' />}
         value={stats.count_errors}
-        title='Некорректные'
       />
 
       <ValueStats
         id='count_base'
+        title='Базисные множества'
         icon={<IconCstBaseSet size='1.25rem' className='clr-text-controls' />}
         value={stats.count_base}
-        title='Базисные множества'
       />
       <ValueStats
         id='count_constant'
+        title='Константные множества'
         icon={<IconCstConstSet size='1.25rem' className='clr-text-controls' />}
         value={stats.count_constant}
-        title='Константные множества'
       />
       <ValueStats
         id='count_structured'
+        title='Родовые структуры'
         icon={<IconCstStructured size='1.25rem' className='clr-text-controls' />}
         value={stats.count_structured}
-        title='Родовые структуры'
       />
       <ValueStats
         id='count_axiom'
+        title='Аксиомы'
         icon={<IconCstAxiom size='1.25rem' className='clr-text-controls' />}
         value={stats.count_axiom}
-        title='Аксиомы'
       />
 
       <ValueStats
         id='count_term'
+        title='Термы'
         icon={<IconCstTerm size='1.25rem' className='clr-text-controls' />}
         value={stats.count_term}
-        title='Термы'
       />
       <ValueStats
         id='count_function'
+        title='Терм-функции'
         icon={<IconCstFunction size='1.25rem' className='clr-text-controls' />}
         value={stats.count_function}
-        title='Терм-функции'
       />
       <ValueStats
         id='count_predicate'
+        title='Предикат-функции'
         icon={<IconCstPredicate size='1.25rem' className='clr-text-controls' />}
         value={stats.count_predicate}
-        title='Предикат-функции'
       />
       <ValueStats
         id='count_theorem'
+        title='Теоремы'
         icon={<IconCstTheorem size='1.25rem' className='clr-text-controls' />}
         value={stats.count_theorem}
-        title='Теоремы'
       />
 
       <ValueStats
         id='count_text_term'
+        title='Термины'
         icon={<IconTerminology size='1.25rem' className='text-sec-600' />}
         value={stats.count_text_term}
-        title='Термины'
       />
       <ValueStats
         id='count_definition'
+        title='Определения'
         icon={<IconDefinition size='1.25rem' className='text-sec-600' />}
         value={stats.count_definition}
-        title='Определения'
       />
       <ValueStats
         id='count_convention'
+        title='Конвенции'
         icon={<IconConvention size='1.25rem' className='text-sec-600' />}
         value={stats.count_convention}
-        title='Конвенции'
       />
     </div>
   );