✨ Developed atom for home page

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>
   )
 }

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} />;

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)
+    })
+})

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

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();
+  });
+});

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

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)
+    })
+
+})

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

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
+}

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"

frontend/src/utils/styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledIcon = styled.img`
+  cursor: pointer;
+`