Refactoring: props naming

Use props to name ALL props and restProps to name partials props

rsconcept/frontend/src/components/Common/Button.tsx

@@ -15,7 +15,7 @@ function Button({
   colors = 'clr-btn-default',
   dimensions = 'w-fit h-fit',
   loading,
-  ...props
+  ...restProps
 }: ButtonProps) {
   const borderClass = noBorder ? '' : 'border rounded';
   const padding = dense ? 'px-1' : 'px-3 py-2';
@@ -26,7 +26,7 @@ function Button({
       disabled={disabled ?? loading}
       title={tooltip}
       className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${colors} ${outlineClass} ${borderClass} ${dimensions} ${cursor}`}
-      {...props}
+      {...restProps}
     >
       {icon ? icon : null}
       {text ? <span className='font-semibold'>{text}</span> : null}

rsconcept/frontend/src/components/Common/Checkbox.tsx

@@ -16,7 +16,7 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'child
 
 function Checkbox({
   id, disabled, tooltip, label, 
-  dimensions = 'w-fit', value, setValue, ...props
+  dimensions = 'w-fit', value, setValue, ...restProps
 }: CheckboxProps) {
   const cursor = useMemo(
   () => {
@@ -47,7 +47,7 @@ function Checkbox({
       title={tooltip}
       disabled={disabled}
       onClick={handleClick}
-      {...props}
+      {...restProps}
     >
       <div className={`max-w-[1rem] min-w-[1rem] h-4 mt-0.5 border rounded-sm ${bgColor} ${cursor}`} >
         {value ?

rsconcept/frontend/src/components/Common/ConceptTooltip.tsx

@@ -12,7 +12,7 @@ function ConceptTooltip({
   layer='z-tooltip',
   place='bottom',
   style,
-  ...props
+  ...restProps
 }: ConceptTooltipProps) {
   const { darkMode } = useConceptTheme();
 
@@ -23,7 +23,7 @@ function ConceptTooltip({
     className={`overflow-auto border shadow-md ${layer} ${className}`}
     variant={(darkMode ? 'dark' : 'light')}
     place={place}
-    {...props}
+    {...restProps}
   />
   );
 }

rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx

@@ -8,7 +8,7 @@ interface DropdownCheckboxProps {
   setValue?: (newValue: boolean) => void
 }
 
-function DropdownCheckbox({ tooltip, setValue, disabled, ...props }: DropdownCheckboxProps) {
+function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
   const behavior = (setValue && !disabled) ? 'clr-hover' : '';
   return (
     <div
@@ -19,7 +19,7 @@ function DropdownCheckbox({ tooltip, setValue, disabled, ...props }: DropdownChe
         dimensions='w-full'
         disabled={disabled}
         setValue={setValue}
-        {...props}
+        {...restProps}
       /> 
     </div>
   );

rsconcept/frontend/src/components/Common/FileInput.tsx

@@ -17,7 +17,7 @@ extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'
 function FileInput({
   label, acceptType, tooltip,
   dimensions = 'w-fit', onChange,
-  ...props 
+  ...restProps 
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [fileName, setFileName] = useState('');
@@ -44,7 +44,7 @@ function FileInput({
         style={{ display: 'none' }}
         accept={acceptType}
         onChange={handleFileChange}
-        {...props}
+        {...restProps}
       />
       <Button
         text={label}

rsconcept/frontend/src/components/Common/Label.tsx

@@ -6,12 +6,12 @@ extends Omit<React.DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTML
   tooltip?: string
 }
 
-function Label({ text, tooltip, className, ...props }: LabelProps) {
+function Label({ text, tooltip, className, ...restProps }: LabelProps) {
   return (
     <label
       className={`text-sm font-semibold ${className}`}
       title={tooltip}
-      {...props}
+      {...restProps}
     >
       {text}
     </label>

rsconcept/frontend/src/components/Common/MiniButton.tsx

@@ -9,14 +9,14 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title
 function MiniButton({
   icon, tooltip, noHover, tabIndex,
   dimensions='w-fit h-fit',
-  ...props
+  ...restProps
 }: MiniButtonProps) {
   return (
     <button type='button'
       title={tooltip}
       tabIndex={tabIndex ?? -1}
       className={`px-1 py-1 rounded-full cursor-pointer disabled:cursor-not-allowed clr-btn-clear ${noHover ? 'outline-none' : 'clr-hover'} ${dimensions}`}
-      {...props}
+      {...restProps}
     >
       {icon}
     </button>

rsconcept/frontend/src/components/Common/SelectMulti.tsx

@@ -14,7 +14,7 @@ extends Omit<Props<Option, true, Group>, 'theme'> {
 function SelectMulti<
   Option,
   Group extends GroupBase<Option> = GroupBase<Option>
-> ({ ...props }: SelectMultiProps<Option, Group>) {
+> (props: SelectMultiProps<Option, Group>) {
   const { darkMode, colors } = useConceptTheme();
   const themeColors = useMemo(
     () => !darkMode ? selectLightT : selectDarkT

rsconcept/frontend/src/components/Common/SelectSingle.tsx

@@ -14,7 +14,7 @@ extends Omit<Props<Option, false, Group>, 'theme'> {
 function SelectSingle<
   Option,
   Group extends GroupBase<Option> = GroupBase<Option>
-> ({ ...props }: SelectSingleProps<Option, Group>) {
+> (props: SelectSingleProps<Option, Group>) {
   const { darkMode, colors } = useConceptTheme();
   const themeColors = useMemo(
     () => !darkMode ? selectLightT : selectDarkT

rsconcept/frontend/src/components/Common/SelectorButton.tsx

@@ -15,7 +15,7 @@ function SelectorButton({
   colors = 'clr-btn-default',
   dimensions = 'w-fit h-fit',
   transparent,
-  ...props
+  ...restProps
 }: SelectorButtonProps) {
   const cursor = 'disabled:cursor-not-allowed cursor-pointer';
   const position = `px-1 flex flex-start items-center gap-1 ${dimensions}`;
@@ -24,7 +24,7 @@ function SelectorButton({
     <button type='button'
       className={`text-sm small-caps select-none ${cursor} ${position} ${design}`}
       title={tooltip}
-      {...props}
+      {...restProps}
     >
       {icon ? icon : null}
       {text ? <div className={'font-semibold whitespace-nowrap pb-1'}>{text}</div> : null}

rsconcept/frontend/src/components/Common/SwitchButton.tsx

@@ -13,14 +13,14 @@ interface SwitchButtonProps<ValueType> {
 function SwitchButton<ValueType>({
   value, icon, label, tooltip,
   dimensions='w-fit h-fit',
-  isSelected, onSelect, ...props
+  isSelected, onSelect, ...restProps
 }: SwitchButtonProps<ValueType>) {
   return (
   <button type='button' tabIndex={-1}
     title={tooltip}
     onClick={() => onSelect(value)}
     className={`px-2 py-1 border font-semibold small-caps rounded-none cursor-pointer clr-btn-clear clr-hover ${dimensions} ${isSelected ? 'clr-selected': ''}`}
-    {...props}
+    {...restProps}
   >
     {icon ? icon : null}
     {label}

rsconcept/frontend/src/components/Common/TextArea.tsx

@@ -13,7 +13,7 @@ function TextArea({
   dense, noBorder, noOutline,
   dimensions = 'w-full',
   colors = 'clr-input',
-  ...props
+  ...restProps
 }: TextAreaProps) {
   const borderClass = noBorder ? '': 'border';
   const outlineClass = noOutline ? '': 'clr-outline';
@@ -29,7 +29,7 @@ function TextArea({
         className={`px-3 py-2 leading-tight ${outlineClass} ${borderClass} ${colors} ${dense ? 'w-full' : dimensions}`}
         rows={rows}
         required={required}
-        {...props}
+        {...restProps}
       />
     </div>
   );

rsconcept/frontend/src/components/Common/TextInput.tsx

@@ -17,7 +17,7 @@ function TextInput({
   id, label, dense, tooltip, noBorder, noOutline, allowEnter, onKeyDown,
   dimensions = 'w-full',
   colors = 'clr-input',
-  ...props
+  ...restProps
 }: TextInputProps) {
   const borderClass = noBorder ? '' : 'border';
   const outlineClass = noOutline ? '' : 'clr-outline';
@@ -32,7 +32,7 @@ function TextInput({
         title={tooltip}
         onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture : onKeyDown}
         className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
-        {...props}
+        {...restProps}
       />
     </div>
   );

rsconcept/frontend/src/components/Common/Tristate.tsx

@@ -13,7 +13,9 @@ extends Omit<CheckboxProps, 'value' | 'setValue'> {
 
 function Tristate({
   id, disabled, tooltip, label, 
-  dimensions = 'w-fit', value, setValue, ...props
+  dimensions = 'w-fit',
+  value, setValue,
+  ...restProps
 }: TristateProps) {
   const cursor = useMemo(
   () => {
@@ -50,7 +52,7 @@ function Tristate({
       title={tooltip}
       disabled={disabled}
       onClick={handleClick}
-      {...props}
+      {...restProps}
     >
       <div className={`w-4 h-4 shrink-0 mt-0.5 border rounded-sm ${bgColor} ${cursor}`} >
         {value ? <div className='mt-[1px] ml-[1px]'><CheckboxCheckedIcon /></div> : null}

rsconcept/frontend/src/components/ConceptToaster.tsx

@@ -4,7 +4,7 @@ import { useConceptTheme } from '../context/ThemeContext';
 
 interface ToasterThemedProps extends Omit<ToastContainerProps, 'theme'>{}
 
-function ToasterThemed({ ...props }: ToasterThemedProps) {
+function ToasterThemed(props: ToasterThemedProps) {
   const { darkMode } = useConceptTheme();
 
   return (

rsconcept/frontend/src/components/Help/InfoConstituenta.tsx

@@ -6,9 +6,9 @@ extends React.HTMLAttributes<HTMLDivElement> {
   data: IConstituenta
 }
 
-function InfoConstituenta({ data, ...props }: InfoConstituentaProps) {
+function InfoConstituenta({ data, ...restProps }: InfoConstituentaProps) {
   return (
-  <div {...props}>
+  <div {...restProps}>
     <h1>Конституента {data.alias}</h1>
     <p>
       <b>Типизация: </b>

rsconcept/frontend/src/components/RSInput/RSInput.tsx

@@ -59,7 +59,7 @@ function RSInput({
   id, label, innerref, onChange,
   disabled, noTooltip,
   dimensions = 'w-full',
-  ...props 
+  ...restProps 
 }: RSInputProps) {
   const { darkMode, colors } = useConceptTheme();
   const { schema } = useRSForm();
@@ -167,7 +167,7 @@ function RSInput({
       onChange={onChange}
       editable={!disabled}
       onKeyDown={handleInput}
-      {...props}
+      {...restProps}
     />
     </div>
   );

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -67,7 +67,7 @@ function RefsInput({
   id, label, innerref, disabled, items,
   initialValue, value, resolved,
   onFocus, onBlur, onChange,
-  ...props 
+  ...restProps 
 }: RefsInputInputProps) {
   const { darkMode, colors } = useConceptTheme();
   const { schema } = useRSForm();
@@ -221,7 +221,7 @@ function RefsInput({
       onBlur={handleFocusOut}
       spellCheck
       // spellCheck= // TODO: figure out while automatic spellcheck doesnt work or implement with extension
-      {...props}
+      {...restProps}
     />
     </div>
   </>);

rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx

@@ -8,12 +8,12 @@ interface WordformButtonProps {
   onSelectGrams: (grams: Grammeme[]) => void
 }
 
-function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...props }: WordformButtonProps) {
+function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...restProps }: WordformButtonProps) {
   return (
     <button type='button' tabIndex={-1}
       onClick={() => onSelectGrams(grams)}
       className={`min-w-[6rem] p-1 border rounded-none cursor-pointer clr-btn-clear clr-hover ${isSelected ? 'clr-selected': ''}`}
-      {...props}
+      {...restProps}
     >
       <p className='font-semibold'>{text}</p>
       <p>{example}</p>

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

@@ -34,7 +34,7 @@ interface EditorRSExpressionProps {
 
 function EditorRSExpression({
   activeCst, disabled, value, onShowAST, toggleReset,
-  setTypification, onChange, ...props
+  setTypification, onChange, ...restProps
 }: EditorRSExpressionProps) {
   const { schema } = useRSForm();
 
@@ -133,7 +133,7 @@ function EditorRSExpression({
       minHeight='3.8rem'
       disabled={disabled}
       onChange={handleChange}
-      {...props}
+      {...restProps}
     />
     <RSEditorControls 
       disabled={disabled}