dev-madhurendra · dev-madhurendra · Dec 24, 2023 · Dec 24, 2023 · Dec 24, 2023
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Madhurendra's Tech Odyssey</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,17 +27,11 @@
     "json-server": "^0.17.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "react-toggle-dark-mode": "^1.1.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
-    "@storybook/test": "^7.6.6",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",

diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,10 +1,12 @@
+import React from 'react'
 import './App.css'
+import { DarkModeSwitch } from 'react-toggle-dark-mode'
 
 function App() {
 
   return (
     <div>
-      Hi
+      <DarkModeSwitch onChange={() => {} } checked={false} />
     </div>
   )
 }

diff --git a/frontend/src/components/atoms/Avatar/index.tsx b/frontend/src/components/atoms/Avatar/index.tsx
diff --git a/frontend/src/components/atoms/Button/index.stories.tsx b/frontend/src/components/atoms/Button/index.stories.tsx
diff --git a/frontend/src/components/atoms/Button/index.tsx b/frontend/src/components/atoms/Button/index.tsx
@@ -1,8 +1,6 @@
-
 import React from "react";
-import { Button, ButtonProps } from "@mui/material";
-
-export interface IButtonProps extends ButtonProps {}
+import { Button } from "@mui/material";
+import { IButtonProps } from "../../../interfaces/types";
 
 const MuiButton = ({ ...buttonProps }: IButtonProps) => 
 <Button {...buttonProps} />;

diff --git a/frontend/src/components/atoms/Icon/index.test.tsx b/frontend/src/components/atoms/Icon/index.test.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Icon from ".";
+import { screen, render } from "@testing-library/react";
+import "@testing-library/jest-dom"
+import { ICON_ALT, ICON_COMPONENT } from "../../../utils/constants";
+
+describe("Icon Tests", () => {
+    it("should render icon with src", () => {
+        render(<Icon src="../public/assets/png/icon.png" />)
+        const iconElement = screen.getByTestId(ICON_COMPONENT)
+        expect(iconElement).toBeDefined()
+    })
+    it("should render with alt text", () => {
+        render(<Icon src="../public/assets/png/icon.png" />)
+        const iconElement = screen.getByAltText(ICON_ALT)
+        expect(iconElement).toBeInTheDocument()
+    })
+    it("should render with custom style", () => {
+        const CustomStyle = {
+            color: "red",
+            fontSize:"20px"
+        }
+        render(<Icon src="../public/assets/png/icon.png" sx={CustomStyle} />)
+        const iconElement = screen.getByTestId(ICON_COMPONENT)
+        expect(iconElement).toHaveStyle(CustomStyle)        
+    })
+    it("should click on icon", () => {
+        const mockClick = jest.fn()
+        render(<Icon src="../public/assets/png/icon.png" onClick={mockClick} />)
+        const iconElement = screen.getByTestId(ICON_COMPONENT)
+        iconElement.click()
+        expect(mockClick).toHaveBeenCalledTimes(1)
+    })
+})
diff --git a/frontend/src/components/atoms/Icon/index.tsx b/frontend/src/components/atoms/Icon/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { StyledIcon } from '../../../utils/styled'
+import { IIconProps } from '../../../interfaces/types'
+import { ICON_ALT, ICON_COMPONENT } from '../../../utils/constants'
+
+const Icon = ({ src, width, height, onClick, sx}: IIconProps) => {
+  return (
+    <StyledIcon
+      data-testid={ICON_COMPONENT}
+      style={sx}    
+      src={src}
+      width={width}
+      height={height}
+      alt={ICON_ALT}
+      onClick={onClick}
+    />
+  )
+}
+
+export default Icon
diff --git a/frontend/src/components/atoms/Toggle/index.test.tsx b/frontend/src/components/atoms/Toggle/index.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DarkModeToggle from '.';            
+import { IDarkModeToggle } from '../../../interfaces/types';
+import { DARK_MODE_TOGGLE_COMPONENT } from '../../../utils/constants';
+
+describe('DarkModeToggle Component Tests', () => {
+  const defaultProps: IDarkModeToggle = {
+    checked: false,
+    onChange: jest.fn(),
+  };
+
+  it('renders the DarkModeToggle component with default props', () => {
+    const { getByTestId } = render(<DarkModeToggle {...defaultProps} />);
+    const darkModeToggle = getByTestId(DARK_MODE_TOGGLE_COMPONENT);
+
+    expect(darkModeToggle).toBeInTheDocument();
+    expect(darkModeToggle).not.toBeChecked()
+  });
+
+  it('renders the DarkModeToggle component with custom props', () => {
+    const customProps: IDarkModeToggle = {
+      ...defaultProps,
+      checked: true,
+      size: 150,
+      styles: { backgroundColor: 'red' },
+    };
+
+    const { getByTestId } = render(<DarkModeToggle {...customProps} />);
+    const darkModeToggle = getByTestId(DARK_MODE_TOGGLE_COMPONENT);
+
+    expect(darkModeToggle).toBeInTheDocument();
+    expect(darkModeToggle).toHaveStyle({ backgroundColor: 'red' });
+  });
+
+  it('invokes the onChange callback when toggled', () => {
+    const { getByTestId } = render(<DarkModeToggle {...defaultProps} />);
+    const darkModeToggle = getByTestId(DARK_MODE_TOGGLE_COMPONENT);
+
+    fireEvent.click(darkModeToggle);
+
+    expect(defaultProps.onChange).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/components/atoms/Toggle/index.tsx b/frontend/src/components/atoms/Toggle/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { DarkModeSwitch } from 'react-toggle-dark-mode';
+import { IDarkModeToggle } from '../../../interfaces/types';
+import { DARK_MODE_TOGGLE_COMPONENT } from '../../../utils/constants';
+
+
+const DarkModeToggle = (props: IDarkModeToggle) => {
+
+  return (
+    <DarkModeSwitch
+        data-testid = {DARK_MODE_TOGGLE_COMPONENT}      
+        style={props.styles}
+        checked={props.checked}
+        onChange={props.onChange}
+        size={props.size}
+    />
+  )
+}
+
+export default DarkModeToggle
diff --git a/frontend/src/components/atoms/Typography/index.test.tsx b/frontend/src/components/atoms/Typography/index.test.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import '@testing-library/jest-dom';
+import Typography from "."
+
+
+describe("Typography Tests", () => {
+    it("should render typography with text", () => {
+        render(<Typography text="Hello" />)
+        const typographyElement = screen.getByText("Hello")
+        expect(typographyElement).toBeInTheDocument()
+    })
+
+    it("should render typography with text", () => {
+        const CustomStyle = {
+            color: "red",
+            fontSize:"20px"
+        }
+        render(<Typography text="Styled Text" sx={CustomStyle} />)
+        const typographyElement = screen.getByText("Styled Text")
+        expect(typographyElement).toHaveStyle(CustomStyle)
+    })
+
+})
diff --git a/frontend/src/components/atoms/Typography/index.tsx b/frontend/src/components/atoms/Typography/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Typography as MuiTypography } from '@mui/material'
+import { ITypgraphyProps } from '../../../interfaces/types'
+
+const Typography = ({text,...props}: ITypgraphyProps) => <MuiTypography {...props}>{text}</MuiTypography>
+
+export default Typography
diff --git a/frontend/src/interfaces/types.ts b/frontend/src/interfaces/types.ts
@@ -0,0 +1,20 @@
+import { ButtonProps, TypographyProps } from "@mui/material";
+import { CSSProperties } from "react";
+
+export interface IButtonProps extends ButtonProps {}
+export interface ITypgraphyProps extends TypographyProps {
+  text: string
+}
+export interface IIconProps {
+  sx?:CSSProperties
+  width?: string
+  height?: string
+  src: string
+  onClick?: () => void
+}
+export interface IDarkModeToggle {
+  styles?: CSSProperties
+  checked: boolean
+  onChange: () => void
+  size?: number
+}
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -0,0 +1,3 @@
+export const ICON_ALT = "icon"
+export const ICON_COMPONENT = "icon-component"
+export const DARK_MODE_TOGGLE_COMPONENT = "dark-mode-toggle"
diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts
@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledIcon = styled.img`
+  cursor: pointer;
+`
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react()]
+})