WIP 5

apps/leafcutter/app/(login)/login/_components/Login.tsx

@@ -9,7 +9,7 @@ import { useTranslate } from "react-polyglot";
 import { LanguageSelect } from "app/_components/LanguageSelect";
 import LeafcutterLogoLarge from "images/leafcutter-logo-large.png";
 import { signIn } from "next-auth/react";
-import { useAppContext } from "app/_components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui";
 
 type LoginProps = {
   session: any;
@@ -20,7 +20,7 @@ export const Login: FC<LoginProps> = ({ session }) => {
   const {
     colors: { leafcutterElectricBlue, lightGray },
     typography: { h1, h4 },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const buttonStyles = {
     backgroundColor: lightGray,
     borderRadius: 500,

apps/leafcutter/app/(main)/about/page.tsx

@@ -1,4 +1,4 @@
-import { About } from "leafcutter-common";
+import { About } from "leafcutter-ui";
 
 export default function Page() {
   return <About />;

apps/leafcutter/app/(main)/create/page.tsx

@@ -1,5 +1,5 @@
 import { getTemplates } from "app/_lib/opensearch";
-import { Create } from "leafcutter-common";
+import { Create } from "leafcutter-ui";
 
 export default async function Page() {
   const templates = await getTemplates(100);

apps/leafcutter/app/(main)/faq/page.tsx

@@ -1,4 +1,4 @@
-import { FAQ } from "leafcutter-common";
+import { FAQ } from "leafcutter-ui";
 
 export default function Page() {
   return <FAQ />;

apps/leafcutter/app/(main)/layout.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from "react";
 import "app/_styles/global.css";
-// import getConfig from "next/config";
-// import { LicenseInfo } from "@mui/x-data-grid-pro";
 import { InternalLayout } from "../_components/InternalLayout";
 
 type LayoutProps = {

apps/leafcutter/app/(main)/page.tsx

@@ -1,7 +1,7 @@
 import { getServerSession } from "next-auth";
 import { authOptions } from "app/_lib/auth";
 import { getUserVisualizations } from "app/_lib/opensearch";
-import { Home } from "leafcutter-common";
+import { Home } from "leafcutter-ui";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);

apps/leafcutter/app/(main)/preview/[...visualizationID]/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 // import { Client } from "@opensearch-project/opensearch";
-import { Preview } from "leafcutter-common";
+import { Preview } from "leafcutter-ui";
 // import { createVisualization } from "lib/opensearch";
 
 export default function Page() {

apps/leafcutter/app/(main)/setup/_components/Setup.tsx

@@ -5,12 +5,12 @@ import { useLayoutEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Grid, CircularProgress } from "@mui/material";
 import Iframe from "react-iframe";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const Setup: FC = () => {
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const router = useRouter();
   useLayoutEffect(() => {
     setTimeout(() => router.push("/"), 4000);

apps/leafcutter/app/(main)/trends/page.tsx

@@ -1,5 +1,5 @@
 import { getTrends } from "app/_lib/opensearch";
-import { Trends } from "leafcutter-common";
+import { Trends } from "leafcutter-ui";
 
 export default async function Page() {
   const visualizations = await getTrends(25);

apps/leafcutter/app/(main)/visualizations/[...visualizationID]/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { Client } from "@opensearch-project/opensearch";
-import { VisualizationDetail } from "leafcutter-common";
+import { VisualizationDetail } from "leafcutter-ui";
 
 const getVisualization = async (visualizationID: string) => {
   const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;

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