Merge pull request #1 from EyeSeeTea/feature/create-main-components-a…

…nd-layout

Create UI components for Zebra

i18n/en.pot

@@ -5,23 +5,50 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-09-18T13:40:05.079Z\n"
-"PO-Revision-Date: 2023-09-18T13:40:05.079Z\n"
+"POT-Creation-Date: 2024-07-04T13:31:07.802Z\n"
+"PO-Revision-Date: 2024-07-04T13:31:07.802Z\n"
 
-msgid "Add"
+msgid "Add new option"
 msgstr ""
 
-msgid "List"
+msgid "Indicates required"
 msgstr ""
 
-msgid "Back"
+msgid "Save"
 msgstr ""
 
-msgid "Help"
+msgid "Cancel"
 msgstr ""
 
-msgid "Hello {{name}}"
+msgid "Create Event"
 msgstr ""
 
-msgid "Detail page"
+msgid "Close"
+msgstr ""
+
+msgid "Search"
+msgstr ""
+
+msgid "Last updated: "
+msgstr ""
+
+msgid "Dashboard"
+msgstr ""
+
+msgid "Respond, alert, watch"
+msgstr ""
+
+msgid "Event Tracker"
+msgstr ""
+
+msgid "Incident Action Plan"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
+msgstr ""
+
+msgid "Incident Management Team Builder"
+msgstr ""
+
+msgid "Resources"
 msgstr ""

i18n/es.po

@@ -1,27 +1,54 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2023-09-18T10:19:02.458Z\n"
+"POT-Creation-Date: 2024-07-04T13:31:07.802Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
 
-msgid "Add"
-msgstr "Añadir"
+msgid "Add new option"
+msgstr ""
+
+msgid "Indicates required"
+msgstr ""
+
+msgid "Save"
+msgstr ""
+
+msgid "Cancel"
+msgstr ""
+
+msgid "Create Event"
+msgstr ""
 
-msgid "List"
-msgstr "Listar"
+msgid "Close"
+msgstr ""
 
-msgid "Back"
-msgstr "Volver"
+msgid "Search"
+msgstr ""
 
-msgid "Help"
-msgstr "Ayuda"
+msgid "Last updated: "
+msgstr ""
 
-msgid "Hello {{name}}"
-msgstr "Hola {{name}}"
+msgid "Dashboard"
+msgstr ""
+
+msgid "Respond, alert, watch"
+msgstr ""
+
+msgid "Event Tracker"
+msgstr ""
+
+msgid "Incident Action Plan"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
+msgstr ""
+
+msgid "Incident Management Team Builder"
+msgstr ""
 
-msgid "Detail page"
+msgid "Resources"
 msgstr ""

package.json

@@ -15,13 +15,17 @@
         "@dhis2/d2-i18n-extract": "1.0.8",
         "@dhis2/d2-i18n-generate": "1.2.0",
         "@dhis2/ui": "6.12.0",
+        "@emotion/react": "11.11.4",
+        "@emotion/styled": "11.11.5",
         "@eyeseetea/d2-api": "1.14.0",
-        "@eyeseetea/d2-ui-components": "2.7.0",
+        "@eyeseetea/d2-ui-components": "v2.9.0-beta.2",
         "@eyeseetea/feedback-component": "0.0.3",
         "@material-ui/core": "4.12.4",
         "@material-ui/icons": "4.11.3",
         "@material-ui/lab": "4.0.0-alpha.60",
         "@material-ui/styles": "4.11.5",
+        "@mui/material": "5.15.19",
+        "@mui/x-date-pickers": "7.6.1",
         "classnames": "2.3.1",
         "d2": "31.10.2",
         "d2-manifest": "1.0.0",

src/types/d2-ui.d.ts

@@ -1,3 +1,16 @@
 declare module "@dhis2/ui" {
     export function HeaderBar(props: { className?: string; appName?: string }): React.ReactElement;
+    export function IconAddCircle24(props: { color?: string }): React.ReactElement;
+    export function IconEdit24(props: { color?: string }): React.ReactElement;
+    export function IconEditItems24(props: { color?: string }): React.ReactElement;
+    export function IconUpload24(props: { color?: string }): React.ReactElement;
+    export function IconUser24(props: { color?: string }): React.ReactElement;
+    export function IconDownload24(props: { color?: string }): React.ReactElement;
+    export function IconArrowRight24(props: { color?: string }): React.ReactElement;
+    export function IconCalendar24(props: { color?: string }): React.ReactElement;
+    export function IconChevronDown24(props: { color?: string }): React.ReactElement;
+    export function IconCross24(props: { color?: string }): React.ReactElement;
+    export function IconCross16(props: { color?: string }): React.ReactElement;
+    export function IconSearch24(props: { color?: string }): React.ReactElement;
+    export function IconInfo24(props: { color?: string }): React.ReactElement;
 }

src/webapp/components/add-new-option/AddNewOption.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { AddCircleOutline } from "@material-ui/icons";
+
+import i18n from "../../../utils/i18n";
+
+type AddNewOptionProps = {
+    id: string;
+    label?: string;
+    onAddNewOption: () => void;
+};
+
+export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
+    ({ id, label, onAddNewOption }) => {
+        return (
+            <Container onClick={onAddNewOption}>
+                <StyledAddIcon id={id} aria-label="Add new option" />
+                <Label htmlFor={id}>{label || i18n.t("Add new option")}</Label>
+            </Container>
+        );
+    }
+);
+
+const Container = styled.div`
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+`;
+
+const StyledAddIcon = styled(AddCircleOutline)`
+    color: ${props => props.theme.palette.icon.color};
+    &:hover {
+        color: ${props => props.theme.palette.icon.hover};
+    }
+`;
+
+const Label = styled.label`
+    display: inline-block;
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: ${props => props.theme.palette.common.black};
+    margin-inline-start: 8px;
+    cursor: pointer;
+`;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { CardContent, Card, Avatar } from "@material-ui/core";
+import styled from "styled-components";
+
+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" }) => {
+        return (
+            <StyledCard variant="outlined">
+                <AvatarContainer $size={avatarSize}>
+                    <Avatar alt={alt} src={src} />
+                </AvatarContainer>
+
+                <StyledCardContent>{children}</StyledCardContent>
+            </StyledCard>
+        );
+    }
+);
+
+const StyledCard = styled(Card)`
+    width: 100%;
+    display: flex;
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+`;
+
+const AvatarContainer = styled.div<{ $size: string }>`
+    padding-block: 20px;
+    padding-inline: 45px;
+    .MuiAvatar-root {
+        width: ${props => (props.$size === "medium" ? " 85px" : "56px")};
+        height: ${props => (props.$size === "medium" ? " 85px" : "56px")};
+    }
+`;
+
+const StyledCardContent = styled(CardContent)`
+    width: 100%;
+    color: ${props => props.theme.palette.common.black};
+    font-size: 0.875rem;
+`;

src/webapp/components/button/Button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Button as MUIButton } from "@material-ui/core";
+
+type ButtonProps = {
+    children?: React.ReactNode;
+    variant?: "contained" | "outlined";
+    color?: "primary" | "secondary";
+    disabled?: boolean;
+    startIcon?: React.ReactNode;
+    onClick: () => void;
+};
+
+export const Button: React.FC<ButtonProps> = React.memo(
+    ({
+        children,
+        variant = "contained",
+        color = "primary",
+        disabled = false,
+        startIcon,
+        onClick,
+    }) => {
+        return (
+            <MUIButton
+                variant={variant}
+                color={color}
+                disabled={disabled}
+                startIcon={startIcon}
+                disableElevation
+                onClick={onClick}
+            >
+                {children}
+            </MUIButton>
+        );
+    }
+);