Merge remote-tracking branch 'origin/feature/create-main-components-a…

…nd-layout' into feature/create-basic-table-component
EyeSeeTea · Jun 27, 2024 · fa36fca · fa36fca
2 parents c286b0c + 2338b34
commit fa36fca
Show file tree

Hide file tree

Showing 25 changed files with 56 additions and 73 deletions.
diff --git a/src/webapp/components/add-new-option/AddNewOption.tsx b/src/webapp/components/add-new-option/AddNewOption.tsx
@@ -4,11 +4,11 @@ import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../utils/i18n";
 
-interface AddNewOptionProps {
+type AddNewOptionProps = {
     id: string;
     label?: string;
     onAddNewOption: () => void;
-}
+};
 
 export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
     ({ id, label = "", onAddNewOption }) => {

diff --git a/src/webapp/components/avatar-card/AvatarCard.tsx b/src/webapp/components/avatar-card/AvatarCard.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import { CardContent, Card, Avatar } from "@material-ui/core";
 import styled from "styled-components";
 
-interface AvatarCardProps {
+type AvatarCardProps = {
     children: React.ReactNode;
     avatarSize?: "small" | "medium";
     alt?: string;
     src?: string;
-}
+};
 
 export const AvatarCard: React.FC<AvatarCardProps> = React.memo(
     ({ children, src, alt, avatarSize = "small" }) => {

diff --git a/src/webapp/components/button/Button.tsx b/src/webapp/components/button/Button.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import { Button as MUIButton } from "@material-ui/core";
 import styled from "styled-components";
 
-interface ButtonProps {
+type ButtonProps = {
     children?: React.ReactNode;
     variant?: "contained" | "outlined";
     color?: "primary" | "secondary" | "dark-secondary";
     disabled?: boolean;
     startIcon?: React.ReactNode;
     onClick: () => void;
-}
+};
 
 export const Button: React.FC<ButtonProps> = React.memo(
     ({

diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
@@ -6,7 +6,7 @@ import { DatePicker as DatePickerMUI } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { IconCalendar24 } from "@dhis2/ui";
 
-interface DatePickerProps {
+type DatePickerProps = {
     id: string;
     label?: string;
     value: Date | null;
@@ -15,7 +15,7 @@ interface DatePickerProps {
     errorText?: string;
     disabled?: boolean;
     error?: boolean;
-}
+};
 
 export const DatePicker: React.FC<DatePickerProps> = React.memo(
     ({

diff --git a/src/webapp/components/form-page/FormPage.tsx b/src/webapp/components/form-page/FormPage.tsx
@@ -5,15 +5,15 @@ import i18n from "../../../utils/i18n";
 import { Button } from "../button/Button";
 import { Separator } from "../separator/Separator";
 
-interface FormPageProps {
+type FormPageProps = {
     title?: string;
     subtitle?: string;
     saveLabel?: string;
     cancelLabel?: string;
     children: React.ReactNode;
     onSave: () => void;
-    onCancel: () => void;
-}
+    onCancel?: () => void;
+};
 
 export const FormPage: React.FC<FormPageProps> = React.memo(
     ({ title, subtitle = "", saveLabel = "", cancelLabel = "", children, onSave, onCancel }) => {
@@ -31,9 +31,11 @@ export const FormPage: React.FC<FormPageProps> = React.memo(
                     <Separator margin="12px" />
                     <ButtonsFooter>
                         <Button onClick={onSave}>{saveLabel || i18n.t("Save")}</Button>
-                        <Button onClick={onCancel} variant="outlined" color="secondary">
-                            {cancelLabel || i18n.t("Cancel")}
-                        </Button>
+                        {onCancel && (
+                            <Button onClick={onCancel} variant="outlined" color="secondary">
+                                {cancelLabel || i18n.t("Cancel")}
+                            </Button>
+                        )}
                     </ButtonsFooter>
                 </Footer>
             </StyledFormPage>

diff --git a/src/webapp/components/form-section/FormSection.tsx b/src/webapp/components/form-section/FormSection.tsx
@@ -5,13 +5,13 @@ import { IconInfo24 } from "@dhis2/ui";
 import { Separator } from "../separator/Separator";
 import { IconButton } from "../icon-button/IconButton";
 
-interface FormSectionProps {
+type FormSectionProps = {
     title: string;
     children: React.ReactNode;
     hasSeparator?: boolean;
     onClickInfo?: () => void;
     direction?: "row" | "column";
-}
+};
 
 export const FormSection: React.FC<FormSectionProps> = React.memo(
     ({ title, hasSeparator = false, children, onClickInfo, direction = "row" }) => {

diff --git a/src/webapp/components/icon-button/IconButton.tsx b/src/webapp/components/icon-button/IconButton.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { IconButton as MUIIconButton } from "@material-ui/core";
 import styled from "styled-components";
 
-interface IconButtonProps {
+type IconButtonProps = {
     icon: React.ReactNode;
     disabled?: boolean;
     onClick: () => void;
-}
+};
 
 export const IconButton: React.FC<IconButtonProps> = React.memo(
     ({ icon, disabled = false, onClick }) => {

diff --git a/src/webapp/components/input-field/InputField.tsx b/src/webapp/components/input-field/InputField.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { TextField, InputLabel } from "@material-ui/core";
 import styled from "styled-components";
 
-interface InputFieldProps {
+type InputFieldProps = {
     id: string;
     label?: string;
     value: string;
@@ -12,7 +12,7 @@ interface InputFieldProps {
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
-}
+};
 
 export const InputField: React.FC<InputFieldProps> = React.memo(
     ({

diff --git a/src/webapp/components/layout/Layout.tsx b/src/webapp/components/layout/Layout.tsx
@@ -5,13 +5,14 @@ import { Menu } from "@material-ui/icons";
 
 import { MainContent } from "./main-content/MainContent";
 import { Button } from "../button/Button";
-interface LayoutProps {
+
+type LayoutProps = {
     children?: React.ReactNode;
     title?: string;
     subtitle?: string;
     hideSideBarOptions?: boolean;
     showCreateEvent?: boolean;
-}
+};
 
 export const Layout: React.FC<LayoutProps> = React.memo(
     ({

diff --git a/src/webapp/components/layout/header-bar/HeaderBar.tsx b/src/webapp/components/layout/header-bar/HeaderBar.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { HeaderBar as D2HeaderBar } from "@dhis2/ui";
 
-interface HeaderBarProps {
+type HeaderBarProps = {
     name: string;
-}
+};
 
 export const HeaderBar: React.FC<HeaderBarProps> = React.memo(({ name }) => {
     return (

diff --git a/src/webapp/components/layout/main-content/MainContent.tsx b/src/webapp/components/layout/main-content/MainContent.tsx
@@ -3,15 +3,15 @@ import styled from "styled-components";
 
 import { SideBar } from "../side-bar/SideBar";
 
-interface MainContentProps {
+type MainContentProps = {
     children?: React.ReactNode;
     title?: string;
     subtitle?: string;
     hideSideBarOptions?: boolean;
     sideBarOpen: boolean;
     toggleSideBar: (isOpen: boolean) => void;
     showCreateEvent?: boolean;
-}
+};
 
 export const MainContent: React.FC<MainContentProps> = React.memo(
     ({

diff --git a/src/webapp/components/layout/side-bar/SideBar.tsx b/src/webapp/components/layout/side-bar/SideBar.tsx
@@ -4,13 +4,13 @@ import styled from "styled-components";
 
 import { SideBarContent } from "./SideBarContent";
 
-interface SideBarProps {
+type SideBarProps = {
     children?: React.ReactNode;
     hideOptions?: boolean;
     open: boolean;
     toggleSideBar: (isOpen: boolean) => void;
     showCreateEvent?: boolean;
-}
+};
 
 export const SideBar: React.FC<SideBarProps> = React.memo(
     ({ children, hideOptions = false, toggleSideBar, open = false, showCreateEvent = false }) => {

diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -7,11 +7,11 @@ import { AddCircleOutline } from "@material-ui/icons";
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
 
-interface SideBarContentProps {
+type SideBarContentProps = {
     children?: React.ReactNode;
     hideOptions?: boolean;
     showCreateEvent?: boolean;
-}
+};
 
 type SideBarOption = {
     text: string;

diff --git a/src/webapp/components/multiple-selector/MultipleSelector.tsx b/src/webapp/components/multiple-selector/MultipleSelector.tsx
@@ -9,7 +9,7 @@ export type MultipleSelectorOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface MultipleSelectorProps<T extends string = string> {
+type MultipleSelectorProps<T extends string = string> = {
     id: string;
     selected: T[];
     onChange: (value: MultipleSelectorOption["value"][]) => void;
@@ -20,7 +20,7 @@ interface MultipleSelectorProps<T extends string = string> {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
     ({

diff --git a/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx b/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx
@@ -4,15 +4,15 @@ import styled from "styled-components";
 
 import i18n from "../../../utils/i18n";
 
-interface NACheckboxProps {
+type NACheckboxProps = {
     id: string;
     label?: string;
     checked: boolean;
     onChange: (isChecked: boolean) => void;
     helperText?: string;
     disabled?: boolean;
     indeterminate?: boolean;
-}
+};
 
 export const NACheckbox: React.FC<NACheckboxProps> = React.memo(
     ({

diff --git a/src/webapp/components/notice-box/NoticeBox.tsx b/src/webapp/components/notice-box/NoticeBox.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { IconInfo24 } from "@dhis2/ui";
 import styled from "styled-components";
 
-interface NoticeBoxProps {
+type NoticeBoxProps = {
     title: string;
     children: React.ReactNode;
-}
+};
 
 export const NoticeBox: React.FC<NoticeBoxProps> = React.memo(({ title, children }) => {
     return (

diff --git a/src/webapp/components/profile-modal/ProfileModal.tsx b/src/webapp/components/profile-modal/ProfileModal.tsx
@@ -5,15 +5,15 @@ import styled from "styled-components";
 import i18n from "../../../utils/i18n";
 import { Button } from "../button/Button";
 
-interface ProfileModalProps {
+type ProfileModalProps = {
     name: string;
     children: React.ReactNode;
     avatarSize?: "small" | "medium";
     alt?: string;
     src?: string;
     open: boolean;
     onClose: () => void;
-}
+};
 
 export const ProfileModal: React.FC<ProfileModalProps> = React.memo(
     ({ children, src, alt, open = false, onClose, name }) => {

diff --git a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
@@ -8,7 +8,7 @@ export type RadioOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface RadioButtonsGroupProps {
+type RadioButtonsGroupProps = {
     id: string;
     selected: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -17,7 +17,7 @@ interface RadioButtonsGroupProps {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = React.memo(
     ({

diff --git a/src/webapp/components/search-input/SearchInput.tsx b/src/webapp/components/search-input/SearchInput.tsx
@@ -6,12 +6,12 @@ import _ from "lodash";
 
 import i18n from "../../../utils/i18n";
 
-interface SearchInputProps {
+type SearchInputProps = {
     value: string;
     onChange: (event: string) => void;
     placeholder?: string;
     disabled?: boolean;
-}
+};
 
 export const SearchInput: React.FC<SearchInputProps> = React.memo(
     ({ value, onChange, placeholder = "", disabled = false }) => {

diff --git a/src/webapp/components/section/Section.tsx b/src/webapp/components/section/Section.tsx
@@ -4,14 +4,14 @@ import styled from "styled-components";
 import i18n from "../../../utils/i18n";
 import { Separator } from "../separator/Separator";
 
-interface SectionProps {
+type SectionProps = {
     title?: string;
     lastUpdated?: string;
     children: React.ReactNode;
     headerButtom?: React.ReactNode;
     hasSeparator?: boolean;
     titleVariant?: "primary" | "secondary";
-}
+};
 
 export const Section: React.FC<SectionProps> = React.memo(
     ({

diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx
@@ -9,7 +9,7 @@ export type SelectorOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface SelectorProps<T extends string = string> {
+type SelectorProps<T extends string = string> = {
     id: string;
     selected: T;
     onChange: (value: SelectorOption["value"]) => void;
@@ -20,7 +20,7 @@ interface SelectorProps<T extends string = string> {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const Selector: React.FC<SelectorProps> = React.memo(
     ({

diff --git a/src/webapp/components/separator/Separator.tsx b/src/webapp/components/separator/Separator.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-interface SeparatorProps {
+type SeparatorProps = {
     margin?: string;
-}
+};
 
 export const Separator: React.FC<SeparatorProps> = React.memo(({ margin = "" }) => {
     return <StyledSeparator margin={margin} />;

diff --git a/src/webapp/components/stats-card/StatsCard.tsx b/src/webapp/components/stats-card/StatsCard.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { CardContent, Card } from "@material-ui/core";
 import styled from "styled-components";
 
-interface StatsCardProps {
+type StatsCardProps = {
     color?: "normal" | "green" | "red";
     stat: string;
     pretitle?: string;
     title: string;
     subtitle?: string;
     isPercentage?: boolean;
     error?: boolean;
-}
+};
 
 export const StatsCard: React.FC<StatsCardProps> = React.memo(
     ({