WIP 5

apps/leafcutter/app/_components/AccountButton.tsx

@@ -11,13 +11,13 @@ import {
   bindTrigger,
   bindMenu,
 } from "material-ui-popup-state/hooks";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const AccountButton: FC = () => {
   const t = useTranslate();
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const popupState = usePopupState({ variant: "popover", popupId: "account" });
 
   return (

apps/leafcutter/app/_components/AppProvider.tsx

@@ -8,7 +8,7 @@ import {
   useState,
   PropsWithChildren,
 } from "react";
-import { colors, typography } from "leafcutter-common/styles/theme";
+import { colors, typography } from "leafcutter-ui/styles/theme";
 
 const basePath = process.env.GITLAB_CI
   ? "/link/link-stack/apps/leafcutter"
@@ -29,7 +29,7 @@ const AppContext = createContext({
   setFoundCount: null as any,
 });
 
-export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
+export const LeafcutterProvider: FC<PropsWithChildren> = ({ children }) => {
   const initialState = {
     incidentType: {
       display: "Incident Type",
@@ -156,6 +156,6 @@ export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export function useAppContext() {
+export function useLeafcutterContext() {
   return useContext(AppContext);
 }

apps/leafcutter/app/_components/HelpButton.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { Button } from "@mui/material";
 import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const HelpButton: FC = () => {
   const router = useRouter();
@@ -12,7 +12,7 @@ export const HelpButton: FC = () => {
   const [helpActive, setHelpActive] = useState(false);
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const onClick = () => {
     if (helpActive) {
       router.push(pathname);

apps/leafcutter/app/_components/InternalLayout.tsx

@@ -7,8 +7,8 @@ import CookieConsent from "react-cookie-consent";
 import { useCookies } from "react-cookie";
 import { TopNav } from "./TopNav";
 import { Sidebar } from "./Sidebar";
-import { GettingStartedDialog } from "leafcutter-common";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { GettingStartedDialog } from "leafcutter-ui";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { Footer } from "./Footer";
 
 type LayoutProps = PropsWithChildren<{
@@ -29,7 +29,7 @@ export const InternalLayout: FC<LayoutProps> = ({
       cdrLinkOrange,
       helpYellow,
     },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <>

apps/leafcutter/app/_components/LanguageSelect.tsx

@@ -8,13 +8,13 @@ import {
   bindTrigger,
   bindMenu,
 } from "material-ui-popup-state/hooks";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { Tooltip } from "./Tooltip";
 
 export const LanguageSelect = () => {
   const {
     colors: { white, leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const router = useRouter();
   const locales: any = { en: "English", fr: "Français" };
   const locale = "en";

apps/leafcutter/app/_components/MultiProvider.tsx

@@ -8,10 +8,10 @@ import { CookiesProvider } from "react-cookie";
 import { I18n } from "react-polyglot";
 import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
 import { LocalizationProvider } from "@mui/x-date-pickers-pro";
-import { AppProvider } from "leafcutter-common/components/AppProvider";
+import { LeafcutterProvider } from "leafcutter-ui/components/LeafcutterProvider";
 import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
-import en from "leafcutter-common/locales/en.json";
-import fr from "leafcutter-common/locales/fr.json";
+import en from "leafcutter-ui/locales/en.json";
+import fr from "leafcutter-ui/locales/fr.json";
 import { LicenseInfo } from "@mui/x-date-pickers-pro";
 
 LicenseInfo.setLicenseKey(
@@ -29,13 +29,13 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }: any) => {
       <SessionProvider>
         <CookiesProvider>
           <CssBaseline />
-          <AppProvider>
+          <LeafcutterProvider>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <I18n locale={locale} messages={messages[locale]}>
                 {children}
               </I18n>
             </LocalizationProvider>
-          </AppProvider>
+          </LeafcutterProvider>
         </CookiesProvider>
       </SessionProvider>
     </NextAppDirEmotionCacheProvider>

apps/leafcutter/app/_components/Sidebar.tsx

@@ -20,8 +20,8 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useTranslate } from "react-polyglot";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
-import { Tooltip } from "leafcutter-common";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
+import { Tooltip } from "leafcutter-ui";
 // import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material";
 
 const MenuItem = ({
@@ -43,7 +43,7 @@ const MenuItem = ({
 }) => {
   const {
     colors: { leafcutterLightBlue, black },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <Link href={href} passHref>
@@ -105,7 +105,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
   const section = pathname?.split("/")[1];
   const {
     colors: { white }, //  leafcutterElectricBlue, leafcutterLightBlue,
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   // const [recentUpdates, setRecentUpdates] = useState([]);
 

apps/leafcutter/app/_components/TopNav.tsx

@@ -8,8 +8,8 @@ import { useTranslate } from "react-polyglot";
 import LeafcutterLogo from "images/leafcutter-logo.png";
 import { AccountButton } from "./AccountButton";
 import { HelpButton } from "./HelpButton";
-import { Tooltip } from "leafcutter-common";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { Tooltip } from "leafcutter-ui";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { LanguageSelect } from "./LanguageSelect";
 
 export const TopNav: FC = () => {
@@ -17,7 +17,7 @@ export const TopNav: FC = () => {
   const {
     colors: { white, leafcutterElectricBlue, cdrLinkOrange },
     typography: { h5, h6 },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <AppBar