chore: Remove veda dependency

app/scripts/components/common/layout-root/index.tsx

@@ -11,12 +11,12 @@ import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
 import { NavLink } from 'react-router-dom';
-
 import {
   getBannerFromVedaConfig,
   getCookieConsentFromVedaConfig,
   getSiteAlertFromVedaConfig
 } from 'veda';
+import { footerSettings } from '../page-footer/default-config';
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import PageFooterLegacy from '../page-footer-legacy';
@@ -120,6 +120,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
           hideFooter={hideFooter}
           linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
           logoSvg={<NasaLogoColor />}
+          footerSettings={footerSettings}
         />
       ) : (
         <PageFooterLegacy hideFooter={hideFooter} />

app/scripts/components/common/page-footer/footer.test.tsx

@@ -6,6 +6,18 @@ import { NavItem } from '../page-header/types.js';
 
 import PageFooter from './index';
 
+const defaultFooterSetting = {
+  secondarySection: {
+    division: 'NASA EarthData 2024',
+    version: 'BETA VERSION',
+    title: 'NASA Official',
+    name: 'Manil Maskey',
+    to: '[email protected]',
+    type: 'email'
+  },
+  returnToTop: true
+};
+
 const mockMainNavItems: NavItem[] = navItems.mainNavItems;
 const mockSubNavItems: NavItem[] = navItems.subNavItems;
 // const mockFooterSettings = footerSettings;
@@ -40,6 +52,7 @@ describe('PageFooter', () => {
         hideFooter={hideFooter}
         logoSvg={<NasaLogoColor />}
         linkProperties={mockLinkProperties}
+        footerSettings={defaultFooterSetting}
       />
     );
     const footerElement = document.querySelector('footer');
@@ -56,6 +69,7 @@ describe('PageFooter', () => {
         hideFooter={hideFooter}
         logoSvg={<NasaLogoColor />}
         linkProperties={mockLinkProperties}
+        footerSettings={defaultFooterSetting}
       />
     );
     expect(screen.getByText('Data Catalog')).toBeInTheDocument();
@@ -89,6 +103,7 @@ describe('PageFooter dynamic settings', () => {
         subNavItems={mockSubNavItems}
         hideFooter={true}
         logoSvg={<NasaLogoColor />}
+        footerSettings={defaultFooterSetting}
       />
     );
     const footerElement = document.querySelector('footer');

app/scripts/components/common/page-footer/index.tsx

@@ -4,7 +4,6 @@ import { DropdownNavLink, NavLinkItem } from '../types';
 import { ActionNavItem, NavItemType } from '../page-header/types';
 import { NavItemCTA } from '../page-header/nav/nav-item-cta';
 import ReturnToTopButton from './return-to-top-button';
-import { footerSettings } from './default-config';
 
 import { LinkProperties } from '$types/veda';
 import {
@@ -19,15 +18,26 @@ interface PageFooterProps {
   hideFooter?: boolean;
   logoSvg?: SVGElement | JSX.Element;
   linkProperties: LinkProperties;
+  footerSettings: {
+    secondarySection: {
+      division: string;
+      version: string;
+      title: string;
+      name: string;
+      to: string;
+      type: string;
+    };
+    returnToTop: boolean;
+  };
 }
 
-
 export default function PageFooter({
   mainNavItems,
   subNavItems,
   hideFooter,
   logoSvg,
-  linkProperties
+  linkProperties,
+  footerSettings
 }: PageFooterProps) {
   const { returnToTop, secondarySection } = footerSettings;
   const FooterNavItemInternalLink = (item) => {

app/scripts/components/common/page-header/index.tsx

@@ -4,6 +4,7 @@ import { NavItem } from './types';
 import LogoContainer from './logo-container';
 import useMobileMenuFix from './use-mobile-menu-fix';
 import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list';
+
 import {
   USWDSHeader,
   USWDSHeaderTitle,

app/scripts/components/common/page-header/nav/nav-item-cta.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import GoogleForm from '../../google-form';
-import { useFeedbackModal } from '../../layout-root';
 import { ActionNavItem } from '../types';
+import { useFeedbackModal } from '$utils/use-feedback-modal';
 
 interface NavItemCTAProps {
   item: ActionNavItem;

app/scripts/context/veda-ui-provider.tsx

@@ -1,6 +1,7 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import React, { createContext, ReactNode, useContext, useState } from 'react';
 import { DATASETS_PATH, STORIES_PATH } from '$utils/routes';
 import { isExternalLink } from '$utils/url';
+import { SetState } from '$types/aliases';
 
 interface EnvironmentConfig {
   envMapboxToken: string;
@@ -31,6 +32,8 @@ interface VedaUIConfig extends EnvironmentConfig {
   navigation: NavigationConfig;
   routes: RoutesConfig;
   Link: React.FC<LinkProps>;
+  feedbackModalRevealed: boolean;
+  setFeedbackModalRevealed: SetState<boolean>;
 }
 
 interface VedaUIProviderProps {
@@ -81,6 +84,9 @@ export function useVedaUI(): VedaUIConfig {
 }
 
 export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
+  const [feedbackModalRevealed, setFeedbackModalRevealed] =
+    useState<boolean>(false);
+
   const navigation = {
     ...defaultNavigation,
     ...config.navigation
@@ -115,7 +121,9 @@ export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
     ...config,
     navigation,
     routes,
-    Link
+    Link,
+    feedbackModalRevealed,
+    setFeedbackModalRevealed
   };
 
   validateConfig(fullConfig);

app/scripts/index.ts

@@ -27,7 +27,6 @@ import type {
 import type { InternalNavLink } from '$components/common/types';
 import type { DatasetData, StoryData, VedaData } from '$types/veda';
 
-
 import ExplorationAndAnalysis from '$components/exploration';
 import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';

app/scripts/utils/use-feedback-modal.tsx

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useVedaUI } from '$context/veda-ui-provider';
+/**
+ * Hook to access the feedback modal.
+ */
+export function useFeedbackModal() {
+  const { feedbackModalRevealed, setFeedbackModalRevealed } = useVedaUI();
+
+  return {
+    isRevealed: feedbackModalRevealed,
+    show: useCallback(
+      () => setFeedbackModalRevealed(true),
+      [setFeedbackModalRevealed]
+    ),
+    hide: useCallback(
+      () => setFeedbackModalRevealed(false),
+      [setFeedbackModalRevealed]
+    )
+  };
+}