Merge pull request #1049 from Open-Earth-Foundation/WIP/migrate-to-ch…

…akra-ui-v3 Migrate to Chakra UI v3
Open-Earth-Foundation · Feb 11, 2025 · c873d83 · c873d83
2 parents cbe69a4 + 99715ea
commit c873d83
Show file tree

Hide file tree

Showing 170 changed files with 9,570 additions and 7,728 deletions.
diff --git a/app/next.config.mjs b/app/next.config.mjs
@@ -10,6 +10,7 @@ const nextConfig = {
   trailingSlash: true,
   experimental: {
     serverComponentsExternalPackages: ["sequelize"],
+    optimizePackageImports: ['@chakra-ui/react']
   },
   env: {
     APP_VERSION: packageInfo.version,

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -31,13 +31,14 @@
     "ci:test": "tsx --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info tests/**/*.test.ts & npm run jest",
     "prettier": "npx prettier . --write",
     "email": "email dev --dir src/lib/emails",
-    "create-admin": "tsx scripts/create-admin.ts"
+    "create-admin": "tsx scripts/create-admin.ts",
+    "upgrade:ui": "npm uninstall @emotion/styled framer-motion && npm install @chakra-ui/react@latest @emotion/react@latest"
   },
   "dependencies": {
     "@ai-sdk/openai": "^1.0.8",
-    "@chakra-ui/icons": "^2.1.0",
-    "@chakra-ui/next-js": "^2.2.0",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^3.5.1",
+    "@emotion/react": "^11.14.0",
+    "@hookform/resolvers": "^3.10.0",
     "@huggingface/inference": "^2.8.0",
     "@next/env": "^14.2.5",
     "@nivo/bar": "^0.88.0",
@@ -79,7 +80,6 @@
     "exceljs": "^4.4.0",
     "fetch-blob": "^4.0.0",
     "fetch-mock": "^11.1.5",
-    "framer-motion": "^11.11.17",
     "geojson": "^0.5.0",
     "http-errors": "^2.0.0",
     "i18next": "^23.13.0",
@@ -93,6 +93,7 @@
     "lodash.uniqby": "^4.7.0",
     "next": "^14.2.17",
     "next-auth": "^4.24.10",
+    "next-themes": "^0.4.4",
     "nodemailer": "^6.9.13",
     "openai": "^4.68.1",
     "pg": "^8.13.0",
@@ -106,7 +107,7 @@
     "react-email": "^3.0.2",
     "react-hook-form": "^7.53.0",
     "react-i18next": "^15.0.1",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-intersection-observer": "^9.8.2",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",

diff --git a/app/src/app/[...not_found]/page.tsx b/app/src/app/[...not_found]/page.tsx
@@ -1,12 +1,13 @@
 "use client";
+import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/i18n/client";
 import { api } from "@/services/api";
-import { ArrowForwardIcon } from "@chakra-ui/icons";
-import { Box, Text } from "@chakra-ui/layout";
-import { Button, IconButton } from "@chakra-ui/react";
+
+import { Text, Box, Icon } from "@chakra-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React from "react";
+import { MdArrowForward } from "react-icons/md";
 
 const NotFound = ({ params: { lng } }: { params: { lng: string } }) => {
   const { data: userInfo, isLoading: isUserInfoLoading } =
@@ -58,10 +59,10 @@ const NotFound = ({ params: { lng } }: { params: { lng: string } }) => {
           h="48px"
           px="24px"
           fontSize="body.md"
-          isLoading={isUserInfoLoading}
-          rightIcon={<ArrowForwardIcon />}
+          loading={isUserInfoLoading}
         >
           {t("goto-dashboard")}
+          <Icon as={MdArrowForward} />
         </Button>
       </Box>
     </Box>

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/ByActivityView.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/ByActivityView.tsx
@@ -1,19 +1,15 @@
 import React from "react";
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Heading,
-  HStack,
-  Text,
-} from "@chakra-ui/react";
+import { Box, Heading, HStack, Text } from "@chakra-ui/react";
 import { capitalizeFirstLetter, convertKgToTonnes } from "@/util/helpers";
 import ByActivityViewTable from "@/app/[lng]/[inventory]/InventoryResultTab/ByActivityViewTable";
 import type { TFunction } from "i18next";
 import type { SectorBreakdownResponse } from "@/util/types";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from "@/components/ui/accordion";
 
 interface EmissionsBreakdownByActivityProps {
   tData: TFunction;
@@ -29,7 +25,7 @@ export const ByActivityView: React.FC<EmissionsBreakdownByActivityProps> = ({
   sectorBreakdown,
 }) => {
   return (
-    <Accordion>
+    <AccordionRoot>
       {Object.entries(sectorBreakdown!.byActivity || {}).map(
         ([subSector, values]) => {
           const consumptions = Object.entries(
@@ -39,15 +35,15 @@ export const ByActivityView: React.FC<EmissionsBreakdownByActivityProps> = ({
           const consumptionOrMassOfWasteTitle =
             sectorName !== "waste" ? "consumption" : "mass-of-waste";
           return (
-            <AccordionItem key={subSector}>
-              <AccordionButton
-                sx={{
+            <AccordionItem key={subSector} value={subSector}>
+              <AccordionItemTrigger
+                style={{
                   display: "flex",
                   justifyContent: "space-between",
                 }}
               >
                 <HStack
-                  sx={{
+                  style={{
                     width: "100%",
                     display: "flex",
                     justifyContent: "space-between",
@@ -59,9 +55,9 @@ export const ByActivityView: React.FC<EmissionsBreakdownByActivityProps> = ({
                     justifyContent="space-between"
                     width="100%"
                   >
-                    <Heading size="title.sm">{tData(subSector)} </Heading>
-                    <HStack alignItems="flex-start" spacing={4}>
-                      <Heading size="title.sm">
+                    <Heading size="sm">{tData(subSector)} </Heading>
+                    <HStack alignItems="flex-start" gap={4}>
+                      <Heading size="sm">
                         {capitalizeFirstLetter(
                           tDashboard(consumptionOrMassOfWasteTitle),
                         )}
@@ -78,7 +74,7 @@ export const ByActivityView: React.FC<EmissionsBreakdownByActivityProps> = ({
                           ))
                         )}
                       </Box>
-                      <Heading size="title.sm">
+                      <Heading size="sm">
                         {capitalizeFirstLetter(tDashboard("emissions"))}:{" "}
                       </Heading>
                       <Text>
@@ -89,20 +85,19 @@ export const ByActivityView: React.FC<EmissionsBreakdownByActivityProps> = ({
                     </HStack>
                   </Box>
                 </HStack>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel>
+              </AccordionItemTrigger>
+              <AccordionItemContent>
                 <ByActivityViewTable
                   data={values}
                   tData={tData}
                   tDashboard={tDashboard}
                   sectorName={sectorName}
                 />
-              </AccordionPanel>
+              </AccordionItemContent>
             </AccordionItem>
           );
         },
       )}
-    </Accordion>
+    </AccordionRoot>
   );
 };
diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/ByActivityViewTable.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/ByActivityViewTable.tsx
@@ -1,14 +1,5 @@
 import React from "react";
-import {
-  Box,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
+import { Box, Table } from "@chakra-ui/react";
 import type { TFunction } from "i18next";
 import { ActivityBreakdown } from "@/util/types";
 import { convertKgToTonnes } from "@/util/helpers";
@@ -41,16 +32,16 @@ const ByActivityViewTable: React.FC<ByActivityViewTableProps> = ({
           totalEmissionsPercentage,
         } = details;
         rows.push(
-          <Tr key={`${subSector}-${activity}-${activityUnits}`}>
-            <Td>{tData(subSector)}</Td>
-            <Td>
+          <Table.Row key={`${subSector}-${activity}-${activityUnits}`}>
+            <Table.Cell>{tData(subSector)}</Table.Cell>
+            <Table.Cell>
               {activityValue === "N/A"
                 ? "N/A"
                 : `${activityValue} ${tData(activityUnits)}`}
-            </Td>
-            <Td>{convertKgToTonnes(totalActivityEmissions)}</Td>
-            <Td>{totalEmissionsPercentage}%</Td>
-          </Tr>,
+            </Table.Cell>
+            <Table.Cell>{convertKgToTonnes(totalActivityEmissions)}</Table.Cell>
+            <Table.Cell>{totalEmissionsPercentage}%</Table.Cell>
+          </Table.Row>,
         );
       });
     });
@@ -61,19 +52,23 @@ const ByActivityViewTable: React.FC<ByActivityViewTableProps> = ({
     sectorName !== "waste" ? "consumption" : "mass-of-waste";
   return (
     <Box p={4}>
-      <TableContainer>
-        <Table variant="simple">
-          <Thead>
-            <Tr>
-              <Th>{tDashboard("activity-type")}</Th>
-              <Th>{tDashboard(consumptionOrMassTitle)}</Th>
-              <Th>{tDashboard("emissions")}</Th>
-              <Th>{tDashboard("%-of-sub-sector-emissions")}</Th>
-            </Tr>
-          </Thead>
-          <Tbody>{renderRows(data)}</Tbody>
-        </Table>
-      </TableContainer>
+      <Table.Root unstyled>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader>
+              {tDashboard("activity-type")}
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>
+              {tDashboard(consumptionOrMassTitle)}
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>{tDashboard("emissions")}</Table.ColumnHeader>
+            <Table.ColumnHeader>
+              {tDashboard("%-of-sub-sector-emissions")}
+            </Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>{renderRows(data)}</Table.Body>
+      </Table.Root>
     </Box>
   );
 };

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/ByScopeView.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/ByScopeView.tsx
@@ -1,14 +1,5 @@
 import React from "react";
-import {
-  Box,
-  ChakraProvider,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
+import { Box, Table } from "@chakra-ui/react";
 import { ActivityDataByScope } from "@/util/types";
 import type { TFunction } from "i18next";
 import { convertKgToTonnes, toKebabCase } from "@/util/helpers";
@@ -33,36 +24,40 @@ const ByScopeView: React.FC<ByScopeViewProps> = ({
     inventoryType
   ].scopes;
   return (
-    <ChakraProvider>
-      <Box p={4}>
-        <Table variant="simple">
-          <Thead>
-            <Tr>
-              <Th>{tData("subsector")}</Th>
-              <Th>{tDashboard("total-emissions")}</Th>
-              <Th>{tDashboard("%-of-sector-emissions")}</Th>
+    <Box p={4}>
+      <Table.Root unstyled variant="line">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader>{tData("subsector")}</Table.ColumnHeader>
+            <Table.ColumnHeader>
+              {tDashboard("total-emissions")}
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>
+              {tDashboard("%-of-sector-emissions")}
+            </Table.ColumnHeader>
+            {scopes.map((s) => (
+              <Table.ColumnHeader key={s}>
+                {tDashboard("emissions-scope")} {s}
+              </Table.ColumnHeader>
+            ))}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {data.map((item, index) => (
+            <Table.Row key={index}>
+              <Table.Cell>{tData(toKebabCase(item.activityTitle))}</Table.Cell>
+              <Table.Cell>{convertKgToTonnes(item.totalEmissions)}</Table.Cell>
+              <Table.Cell>{item.percentage}%</Table.Cell>
               {scopes.map((s) => (
-                <Th key={s}>
-                  {tDashboard("emissions-scope")} {s}
-                </Th>
+                <Table.Cell key={s}>
+                  {convertKgToTonnes(item.scopes[s] || 0)}
+                </Table.Cell>
               ))}
-            </Tr>
-          </Thead>
-          <Tbody>
-            {data.map((item, index) => (
-              <Tr key={index}>
-                <Td>{tData(toKebabCase(item.activityTitle))}</Td>
-                <Td>{convertKgToTonnes(item.totalEmissions)}</Td>
-                <Td>{item.percentage}%</Td>
-                {scopes.map((s) => (
-                  <Td key={s}>{convertKgToTonnes(item.scopes[s] || 0)}</Td>
-                ))}
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      </Box>
-    </ChakraProvider>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Box>
   );
 };
 

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx
@@ -4,7 +4,7 @@ import { allSectorColors, SECTORS } from "@/util/constants";
 import { convertKgToTonnes } from "@/util/helpers";
 import { useTranslation } from "@/i18n/client";
 import { toKebabCaseModified } from "@/app/[lng]/[inventory]/InventoryResultTab/index";
-import { Box, Text } from "@chakra-ui/react";
+import { Badge, Box, Card, HStack, Text } from "@chakra-ui/react";
 import { useTooltip } from "@nivo/tooltip";
 import { useMemo, useState } from "react";
 
@@ -350,6 +350,23 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
           layout={"vertical"}
           margin={margin}
           padding={0.3}
+          tooltip={({ id, value, color }) => (
+            <Card.Root py={2} px={2}>
+              <HStack>
+                <Badge
+                  colorScheme="gray"
+                  boxSize="16px"
+                  bg={color}
+                  marginRight="8px"
+                />
+                <Text>
+                  {tData(id as string)}
+                  {" - "}
+                  {convertKgToTonnes(value)}
+                </Text>
+              </HStack>
+            </Card.Root>
+          )}
           valueScale={{ type: "linear", min: 0, max: "auto" }}
           indexScale={{ type: "band", round: true }}
           colors={allSectorColors}