Merge pull request #2 from bocabitlabs/fix_language_aut

Update mantine to version 7.x

.github/workflows/react.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
-          cache-dependency-path: client/package.lock.json
+          cache-dependency-path: client/package-lock.json
       - name: Install Dependencies
         run: |
           cd client && npm install

client/package.json

@@ -4,17 +4,16 @@
   "homepage": "/",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@mantine/core": "^6.0.10",
-    "@mantine/dates": "^6.0.10",
-    "@mantine/dropzone": "^6.0.10",
-    "@mantine/form": "^6.0.10",
-    "@mantine/hooks": "^6.0.10",
-    "@mantine/modals": "^6.0.10",
-    "@mantine/notifications": "^6.0.10",
-    "@mantine/nprogress": "^6.0.10",
-    "@mantine/spotlight": "^6.0.10",
-    "@mantine/tiptap": "^6.0.10",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/dropzone": "^7.0.0",
+    "@mantine/form": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/modals": "^7.0.0",
+    "@mantine/notifications": "^7.0.0",
+    "@mantine/nprogress": "^7.0.0",
+    "@mantine/spotlight": "^7.0.0",
+    "@mantine/tiptap": "^7.0.0",
     "@sentry/react": "^7.10.0",
     "@sentry/tracing": "^7.10.0",
     "@tabler/icons-react": "^2.17.0",

client/src/App.tsx

@@ -1,124 +1,61 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
-  ActionIcon,
   AppShell,
-  Button,
-  ColorScheme,
-  ColorSchemeProvider,
+  Burger,
   Group,
-  Header,
   MantineProvider,
-  Navbar,
+  ScrollArea,
 } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
-import { IconMoonStars, IconSun } from "@tabler/icons-react";
-import Brand from "components/Brand/Brand";
+import LanguageSelector from "components/LanguageSelector/LanguageSelector";
+import Logo from "components/Logo/Logo";
 import NavigationLinks from "components/NavigationLinks/NavigationLinks";
-import i18n from "i18n";
-
-function useDarkMode() {
-  return (
-    window.matchMedia &&
-    window.matchMedia("(prefers-color-scheme:dark)").matches
-  );
-}
+import ToggleThemeButton from "components/ToggleThemeButton/ToggleThemeButton";
 
 function App() {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(
-    useDarkMode() ? "dark" : "light",
-  );
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
-  const [opened, setOpened] = useState(false);
-
-  const changeLanguage = (lng: string) => {
-    console.log("Change language to", lng);
-    i18n.changeLanguage(lng);
-  };
+  const [opened, { toggle, close }] = useDisclosure();
 
   const location = useLocation();
   useEffect(() => {
-    setOpened(false);
-  }, [location]);
+    close();
+  }, [close, location]);
 
   return (
-    <ColorSchemeProvider
-      colorScheme={colorScheme}
-      toggleColorScheme={toggleColorScheme}
-    >
-      <MantineProvider
-        theme={{ colorScheme }}
-        withNormalizeCSS
-        withGlobalStyles
+    <MantineProvider defaultColorScheme="light">
+      <AppShell
+        header={{ height: 60 }}
+        navbar={{
+          width: 300,
+          breakpoint: "sm",
+          collapsed: { mobile: !opened },
+        }}
+        padding="md"
       >
-        <AppShell
-          navbarOffsetBreakpoint="sm"
-          padding="md"
-          navbar={
-            <Navbar
-              hiddenBreakpoint="sm"
-              hidden={!opened}
-              width={{ sm: 250, lg: 300 }}
-              height="calc(100vh - 105px)"
-              p="md"
-            >
-              <Navbar.Section grow mt="md">
-                <NavigationLinks />
-              </Navbar.Section>
-              <Navbar.Section>
-                <Group>
-                  <ActionIcon
-                    variant="default"
-                    onClick={() => toggleColorScheme()}
-                    size={30}
-                  >
-                    {colorScheme === "dark" ? (
-                      <IconSun size={16} />
-                    ) : (
-                      <IconMoonStars size={16} />
-                    )}
-                  </ActionIcon>
-
-                  <Button
-                    variant="subtle"
-                    compact
-                    uppercase
-                    onClick={() => changeLanguage("es")}
-                  >
-                    es
-                  </Button>
-                  <Button
-                    variant="subtle"
-                    compact
-                    uppercase
-                    onClick={() => changeLanguage("en")}
-                  >
-                    en
-                  </Button>
-                </Group>
-              </Navbar.Section>
-            </Navbar>
-          }
-          header={
-            <Header height={60} p="xs">
-              <Brand opened={opened} setOpened={setOpened} />
-            </Header>
-          }
-          styles={(theme) => ({
-            main: {
-              backgroundColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors.dark[8]
-                  : theme.colors.gray[0],
-            },
-          })}
-        >
+        <AppShell.Header>
+          <Group h="100%" px="md" justify="space-between">
+            <Group>
+              <Burger onClick={toggle} hiddenFrom="sm" size="sm" />
+              <Logo />
+            </Group>
+            <Group>
+              <LanguageSelector />
+              <ToggleThemeButton />
+            </Group>
+          </Group>
+        </AppShell.Header>
+        <AppShell.Navbar hidden={!opened} p="md">
+          <AppShell.Section my="md" component={ScrollArea}>
+            <NavigationLinks />
+          </AppShell.Section>
+        </AppShell.Navbar>
+        <AppShell.Main style={{ backgroundColor: "#fbfbfb" }}>
           <Outlet />
-        </AppShell>
-        <Notifications />
-      </MantineProvider>
-    </ColorSchemeProvider>
+        </AppShell.Main>
+      </AppShell>
+      <Notifications />
+    </MantineProvider>
   );
 }
 

client/src/components/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import i18n from "i18n";
+
+const languages = ["es", "en"];
+
+export default function LanguageSelector() {
+  const changeLanguage = (lng: string) => {
+    console.log("Change language to", lng);
+    i18n.changeLanguage(lng);
+  };
+
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [value, setValue] = useState<string | null>(null);
+
+  const options = languages.map((item) => (
+    <Combobox.Option value={item} key={item}>
+      {item}
+    </Combobox.Option>
+  ));
+
+  return (
+    <Combobox
+      store={combobox}
+      onOptionSubmit={(val) => {
+        setValue(val);
+        combobox.closeDropdown();
+        changeLanguage(val);
+      }}
+    >
+      <Combobox.Target>
+        <InputBase
+          component="button"
+          type="button"
+          pointer
+          rightSection={<Combobox.Chevron />}
+          rightSectionPointerEvents="none"
+          onClick={() => combobox.toggleDropdown()}
+        >
+          {value || <Input.Placeholder>{i18n.language}</Input.Placeholder>}
+        </InputBase>
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Options>{options}</Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+}

client/src/components/Logo/Logo.tsx

@@ -1,12 +1,18 @@
-import { Group, ColorScheme, Text, Image } from "@mantine/core";
+import { Group, Image, Title } from "@mantine/core";
 
-export default function Logo({ colorScheme }: { colorScheme: ColorScheme }) {
+export default function Logo() {
   return (
     <Group>
-      <Image src="/icons/favicon-192.png" width={40} height={40} />
-      <Text color={colorScheme === "dark" ? "#fff" : "#000"}>
-        <strong>Cociplan</strong>{" "}
-      </Text>
+      <Image
+        fit="contain"
+        src="/icons/favicon-192.png"
+        width="auto"
+        height={40}
+        style={{ width: "auto" }}
+      />
+      <Title order={1} size="1.5rem">
+        Cociplan
+      </Title>
     </Group>
   );
 }

client/src/components/NavigationLinks/NavigationLink.tsx

@@ -1,14 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
-import {
-  Group,
-  ThemeIcon,
-  Text,
-  useMantineTheme,
-  MantineTheme,
-} from "@mantine/core";
-import styled from "styled-components";
+import { NavLink as RouterNavLink } from "react-router-dom";
+import { ThemeIcon, NavLink } from "@mantine/core";
 
 interface NavigationLinkProps {
   icon: React.ReactNode;
@@ -17,46 +10,24 @@ interface NavigationLinkProps {
   to: string;
 }
 
-const StyledNavLink = styled(NavLink)<{ theme: MantineTheme }>`
-  &:hover {
-    background-color: ${({ theme }) =>
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[6]
-        : theme.colors.gray[0]};
-  }
-  &.active {
-    background-color: ${({ theme }) =>
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[6]
-        : theme.colors.gray[0]};
-  }
-`;
-
 export default function NavigationLink({
   icon,
   color,
   label,
   to,
 }: NavigationLinkProps) {
-  const theme = useMantineTheme();
-  const linkStyle = {
-    display: "block",
-    width: "95%",
-    textDecoration: "none",
-    padding: `${theme.spacing.xs}`,
-    borderRadius: `${theme.radius.sm}`,
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-  };
   const { t } = useTranslation();
 
   return (
-    <StyledNavLink theme={theme} to={to} className="navLink" style={linkStyle}>
-      <Group>
+    <NavLink
+      label={t<string>(label)}
+      leftSection={
         <ThemeIcon color={color} variant="light">
           {icon}
         </ThemeIcon>
-        <Text size="sm">{t(label)}</Text>
-      </Group>
-    </StyledNavLink>
+      }
+      to={to}
+      component={RouterNavLink}
+    />
   );
 }