скрипты компонента подсветкие ошибок валидации формы, по аналогии с тем, как в текущем magic с помощью comm_form подсвечиваются ошибки валидации формы. Состояние сырое, пока готов только каркас. Возможно, стоит посмотреть на компонент\библиотеку UseForm, но кажется это будет более заморный вариант

resources/css/components/formValidErr.css

@@ -0,0 +1,15 @@
+@import url('./../variables.css');
+
+#form-valid-err-container{
+
+  background: red;
+  padding: 5px;
+  border-radius: 5px;
+
+  &.form-valid-err--hide{
+    display: none;
+  }
+  &.form-valid-err--visible{
+    display: block;
+  }
+}

resources/js/components/formValidErr/FormValidErr.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+/**
+ * Объект с данными для отображения в блоке с ошибками
+ */
+export interface FormValidErrObject
+{
+  fieldName: string | null,
+  fieldErrors: string[] | []
+}
+
+export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} ) 
+{
+  const [blockVisible, setBlockVisible] = useState<boolean>(false);
+  useEffect ( () => {
+    setBlockVisible(visible)
+  }, [visible]);
+  return (
+    <div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
+      <ul>
+      { validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
+        <li key={index}>
+          <b>{ validErrObj.fieldName }</b>: 
+          <span>{ validErrObj.fieldErrors }</span>
+        </li>
+      )) }
+      </ul>
+    </div>
+  )
+}

resources/js/components/header/Header.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button } from '@SharePoint/rencredit_uikit';
-
-export default function Header(){
-  const[appName, setAppName] = useState<string>('');
-  useEffect( () => {
-    setAppName(document.getElementById('page__header-block')?.dataset.app_name || '');
-  }, [])
-
-  return (
-    <div className="header-block__header-container">
-      <div className="header-container__block">
-        <div>
-          <Button 
-            type = 'button'
-            onClick = {() => document.location.href='/public/menu'}
-            text = 'ЛОГОТИП ТУТ' 
-            ui = 'secondaryPurple'
-          />
-        </div>
-        <div>
-          <Button 
-            type = 'button'
-            onClick = {() => document.location.href='/public/menu'}
-            text = 'Меню' 
-            ui = 'secondaryPurple'
-          />
-        </div>
-        <div className="header-container__block__app-name">{appName}</div>
-      </div>
-      <div className="header-container__block">
-        <div>
-          <Button 
-            type = 'button'
-            onClick = {() => document.location.href='/public/request_access'}
-            text = 'Заказать доступ' 
-            ui = 'secondaryPurple'
-          />
-        </div>
-        <div>
-          <Button 
-            type = 'button'
-            onClick = {() => document.location.href='/public/logout'}
-            text = 'Выход' 
-            ui = 'secondaryPurple'
-          />
-        </div> 
-      </div>
-    </div>
-  )
-}