Separate components at same level for more redeability and avoid re-r…

…ender because inputProps object

src/webapp/components/avatar-card/AvatarCard.tsx

@@ -16,6 +16,7 @@ export const AvatarCard: React.FC<AvatarCardProps> = React.memo(
                 <AvatarContainer $size={avatarSize}>
                     <Avatar alt={alt} src={src} />
                 </AvatarContainer>
+
                 <StyledCardContent>{children}</StyledCardContent>
             </StyledCard>
         );

src/webapp/components/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Checkbox as MUICheckbox, InputLabel, FormHelperText } from "@material-ui/core";
 import styled from "styled-components";
 
@@ -32,6 +32,8 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
             [onChange]
         );
 
+        const inputProps = useMemo(() => ({ "aria-label": label || `${id}-label` }), [id, label]);
+
         return (
             <Container>
                 <CheckboxWrapper>
@@ -42,12 +44,14 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
                         onChange={handleChange}
                         disabled={disabled}
                         size="small"
-                        inputProps={{ "aria-label": label || `${id}-label` }}
+                        inputProps={inputProps}
                     />
+
                     <Label htmlFor={id} disabled={disabled}>
                         {label}
                     </Label>
                 </CheckboxWrapper>
+
                 <StyledFormHelperText id={`${id}-helper-text`}>{helperText}</StyledFormHelperText>
             </Container>
         );

src/webapp/components/date-picker/DatePicker.tsx

@@ -37,6 +37,7 @@ export const DatePicker: React.FC<DatePickerProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <StyledDatePicker
                         value={value}

src/webapp/components/form/FormLayout.tsx

@@ -24,11 +24,15 @@ export const FormLayout: React.FC<FormLayoutProps> = React.memo(
                         {title && <Title>{title}</Title>}
                         {subtitle && <Subtitle>{subtitle}</Subtitle>}
                     </TitleContainer>
+
                     <RequiredText>{i18n.t("Indicates required")}</RequiredText>
                 </Header>
+
                 <Content>{children}</Content>
+
                 <Footer>
                     <Separator margin="12px" />
+
                     <ButtonsFooter>
                         <Button onClick={onSave}>{saveLabel || i18n.t("Save")}</Button>
                         {onCancel && (

src/webapp/components/form/FormSection.tsx

@@ -26,17 +26,20 @@ export const FormSection: React.FC<FormSectionProps> = React.memo(
         return (
             <FormSectionContainer>
                 {hasSeparator && <Separator margin="12px" />}
+
                 <Container direction={direction}>
                     {title && (
                         <TitleContainer direction={direction}>
                             <RequiredText className={required ? "required" : ""}>
                                 {title}
                             </RequiredText>
+
                             {onClickInfo && (
                                 <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />
                             )}
                         </TitleContainer>
                     )}
+
                     <FormContainer fulWidth={!title}>{children}</FormContainer>
                 </Container>
             </FormSectionContainer>

src/webapp/components/layout/Layout.tsx

@@ -33,6 +33,7 @@ export const Layout: React.FC<LayoutProps> = React.memo(
                         <Button onClick={() => setSideBarOpen(!sideBarOpen)} startIcon={<Menu />} />
                     </OpenMenuContainer>
                 ) : null}
+
                 <MainContent
                     sideBarOpen={sideBarOpen}
                     toggleSideBar={setSideBarOpen}

src/webapp/components/layout/header-bar/HeaderBar.tsx

@@ -10,9 +10,13 @@ export const HeaderBar: React.FC<HeaderBarProps> = React.memo(({ name }) => {
     return (
         <Container>
             <FlagBar color="red" />
+
             <FlagBar color="black" />
+
             <FlagBar color="orange" />
+
             <AppName>{name}</AppName>
+
             <StyledHeaderBar className="app-header" appName="ZEBRA App" />
         </Container>
     );

src/webapp/components/layout/main-content/MainContent.tsx

@@ -31,9 +31,12 @@ export const MainContent: React.FC<MainContentProps> = React.memo(
                     toggleSideBar={toggleSideBar}
                     showCreateEvent={showCreateEvent}
                 />
+
                 <Main>
                     {title && <Title>{title}</Title>}
+
                     {subtitle && <SubTitle>{subtitle}</SubTitle>}
+
                     <PageContent>{children}</PageContent>
                 </Main>
             </Container>

src/webapp/components/notice-box/NoticeBox.tsx

@@ -14,6 +14,7 @@ export const NoticeBox: React.FC<NoticeBoxProps> = React.memo(({ title, children
                 <IconInfo24 />
                 {title}
             </TitleContainer>
+
             <Content>{children}</Content>
         </Container>
     );

src/webapp/components/profile-modal/ProfileModal.tsx

@@ -27,12 +27,15 @@ export const ProfileModal: React.FC<ProfileModalProps> = React.memo(
             >
                 <StyledCard variant="outlined">
                     <Name>{name}</Name>
+
                     <Content>
                         <AvatarContainer>
                             <Avatar alt={alt} src={src} />
                         </AvatarContainer>
+
                         <StyledCardContent>{children}</StyledCardContent>
                     </Content>
+
                     <Footer>
                         <Button onClick={onClose}>{i18n.t("Close")}</Button>
                     </Footer>

src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx

@@ -38,6 +38,7 @@ export function RadioButtonsGroup<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledRadioGroup
                 aria-label={id}
                 name={id}
@@ -56,6 +57,7 @@ export function RadioButtonsGroup<Value extends string>({
                     />
                 ))}
             </StyledRadioGroup>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>

src/webapp/components/search-input/SearchInput.tsx

@@ -12,17 +12,19 @@ type SearchInputProps = {
     disabled?: boolean;
 };
 
+const INPUT_PROPS = { "aria-label": "search" };
+
 export const SearchInput: React.FC<SearchInputProps> = React.memo(
     ({ value, onChange, placeholder = "", disabled = false }) => {
         const [stateValue, updateStateValue] = useState(value);
 
         useEffect(() => updateStateValue(value), [value]);
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        const onChangeDebounced = useCallback(
-            debounce((value: string) => {
-                if (onChange) onChange(value);
-            }, 400),
+        const onChangeDebounced = React.useMemo(
+            () =>
+                debounce((value: string) => {
+                    if (onChange) onChange(value);
+                }, 400),
             [onChange]
         );
 
@@ -44,6 +46,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
                 <IconContainer $disabled={disabled}>
                     <IconSearch24 />
                 </IconContainer>
+
                 <StyledTextField
                     onChange={handleChange}
                     placeholder={placeholder || i18n.t("Search")}
@@ -52,7 +55,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
                     onKeyDown={handleKeydown}
                     disabled={disabled}
                     variant="outlined"
-                    inputProps={{ "aria-label": "search" }}
+                    inputProps={INPUT_PROPS}
                 />
             </Container>
         );

src/webapp/components/section/Section.tsx

@@ -25,9 +25,11 @@ export const Section: React.FC<SectionProps> = React.memo(
         return (
             <SectionContainer $hasSeparator={hasSeparator}>
                 {hasSeparator && <Separator />}
+
                 <Header>
                     <TitleContainer>
                         {title ? <Title $titleVariant={titleVariant}>{title}</Title> : null}
+
                         {lastUpdated ? (
                             <LastUpdatedContainer>
                                 <LastUpdatedTitle>
@@ -37,8 +39,10 @@ export const Section: React.FC<SectionProps> = React.memo(
                             </LastUpdatedContainer>
                         ) : null}
                     </TitleContainer>
+
                     {headerButtom ? <div>{headerButtom}</div> : null}
                 </Header>
+
                 <Content>{children}</Content>
             </SectionContainer>
         );

src/webapp/components/selector/MultipleSelector.tsx

@@ -60,6 +60,7 @@ export function MultipleSelector<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledSelect
                 labelId={label || `${id}-label`}
                 id={id}
@@ -95,6 +96,7 @@ export function MultipleSelector<Value extends string>({
                     </MenuItem>
                 ))}
             </StyledSelect>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>

src/webapp/components/selector/Selector.tsx

@@ -52,6 +52,7 @@ export function Selector<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledSelect
                 labelId={label || `${id}-label`}
                 id={id}
@@ -72,6 +73,7 @@ export function Selector<Value extends string>({
                     </MenuItem>
                 ))}
             </StyledSelect>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>

src/webapp/components/stats-card/StatsCard.tsx

@@ -26,8 +26,11 @@ export const StatsCard: React.FC<StatsCardProps> = React.memo(
             <StyledCard $error={error}>
                 <StyledCardContent>
                     <Stat color={color}>{`${stat}${isPercentage ? " %" : ""}`}</Stat>
+
                     <PreTitle>{pretitle}</PreTitle>
+
                     <Title>{title}</Title>
+
                     <SubTitle>{subtitle}</SubTitle>
                 </StyledCardContent>
             </StyledCard>

src/webapp/components/text-input/TextArea.tsx

@@ -40,6 +40,7 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <StyledTextareaAutosize
                     id={id}
                     aria-label={label || `${id}-label`}
@@ -49,6 +50,7 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
                     disabled={disabled}
                     $hasError={error}
                 />
+
                 <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                     {error && !!errorText ? errorText : helperText}
                 </StyledFormHelperText>

src/webapp/components/text-input/TextInput.tsx

@@ -33,6 +33,7 @@ export const TextInput: React.FC<TextInputProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <StyledTextField
                     id={id}
                     value={value}