Add calendar app

package.json

@@ -21,8 +21,10 @@
     "i18next-browser-languagedetector": "^7.2.1",
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
+    "react-big-calendar": "^1.13.0",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-full-screen": "^1.1.1",
@@ -85,6 +87,7 @@
     "@types/draft-js": "^0.11.18",
     "@types/jest": "^29.5.12",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-big-calendar": "^1.8.9",
     "@types/react-resizable": "^3.0.7",
     "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",

src/router/lazyRouting/lazy_screen/private/program/LazyCalendarScreen.tsx

@@ -0,0 +1,16 @@
+import { lazy } from 'react';
+import { LazyProvider } from '../../../component';
+
+const Calendar = lazy(
+  () => import('../../../../../screens/private/program/Calendar/Calendar'),
+);
+
+const LazyCalendarComponent = () => {
+  return (
+    <LazyProvider>
+      <Calendar />
+    </LazyProvider>
+  );
+};
+
+export { LazyCalendarComponent };

src/router/lazyRouting/lazy_screen/private/program/index.ts

@@ -7,3 +7,6 @@ export * from './LazySettingsScreen';
 export * from './LazySpotifyScreen';
 export * from './LazyTerminalScreen';
 export * from './LazyVsCodeScreen';
+
+// Other apps
+export * from './LazyCalendarScreen';

src/screens/private/Home/AppMap.tsx

@@ -9,6 +9,7 @@ import {
   LazyTerminalComponent,
   LazyVsCodeComponent,
   LazyBinComponent,
+  LazyCalendarComponent,
 } from '@router';
 
 const WindowAppMap: Record<ProgramType, JSX.Element | undefined> = {
@@ -26,7 +27,7 @@ const WindowAppMap: Record<ProgramType, JSX.Element | undefined> = {
   [ProgramType.SAFARI]: undefined,
   [ProgramType.MAILS]: undefined,
   [ProgramType.CONTACTS]: undefined,
-  [ProgramType.CALENDAR]: undefined,
+  [ProgramType.CALENDAR]: <LazyCalendarComponent />,
   [ProgramType.REMINDERS]: undefined,
   [ProgramType.FACE_TIME]: undefined,
   [ProgramType.MESSAGES]: undefined,

src/screens/private/Home/Home.tsx

@@ -1,20 +1,9 @@
-import { createContext, useContext } from 'react';
-import { Box, useBoolean } from '@chakra-ui/react';
+import { useContext } from 'react';
+import { Box } from '@chakra-ui/react';
 import { HomeProps } from './type';
 import { WallpaperComponent, Window } from '@components';
 import { settingsStore, useShallow, wallpaperSelector } from '@settingsStore';
 import { TopBar } from './TopBar';
-import {
-  LazyBinComponent,
-  LazyChromeComponent,
-  LazyFinderComponent,
-  LazyGithubComponent,
-  LazyNotesComponent,
-  LazySettingsComponent,
-  LazySpotifyComponent,
-  LazyTerminalComponent,
-  LazyVsCodeComponent,
-} from '@router';
 import { BottomBar } from './BottomBar';
 import {
   ProgramType,

src/screens/private/Home/__tests__/Home.test.tsx

@@ -54,6 +54,26 @@ describe('Home', () => {
     });
   });
 
+  it('should render correctly with calendar app to match snapshot', () => {
+    renderHook(() => settingsStore());
+    renderHook(() => uiStore());
+    renderHook(() => appStore());
+    const { result } = renderHook(() => processStore());
+
+    act(() => {
+      result.current.ActiveApp.addApp(ProgramType.CALENDAR);
+    });
+
+    const { container } = render(<Home />);
+
+    expect(container).toMatchSnapshot();
+
+    // cleanup
+    act(() => {
+      result.current.ActiveApp.removeApp(ProgramType.CALENDAR);
+    });
+  });
+
   it('should render correctly with chrome app to match snapshot', () => {
     renderHook(() => settingsStore());
     renderHook(() => uiStore());