AlertModal: Added atomic alert modal component

.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { CssBaseline } from "@mui/material";
+import type { Preview } from "@storybook/react";
+import { themes } from "@storybook/theming";
+import ThemeProvider from "../src/components/theme/theme-provider";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider>
+          <CssBaseline />
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    },
+  },
+};
+
+export default preview;

playwright-tests/Login/login.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("should have home title", async ({ page }) => {
+  //TODO: will remove this
+  await page.goto("/en");
+  const title = await page.title();
+  expect(title).toBe("Home");
+});

src/components/AlertModal/alertModal.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AlertModal from "./alertModal";
+import { AlertModalProps } from "./types";
+
+// Define the metadata for the component
+const meta: Meta<AlertModalProps> = {
+  title: "Components/AlertModal",
+  component: AlertModal, // The component itself
+  argTypes: {
+    // Define controls for the props
+    severity: {
+      control: {
+        type: "select",
+        options: ["success", "info", "warning", "error"],
+      },
+      description:
+        "The severity of the alert modal, indicating its purpose or importance.",
+    },
+    horizontal: {
+      control: {
+        type: "select",
+        options: ["center", "left", "right"],
+      },
+      description: "The horizontal placement of the alert modal.",
+    },
+    vertical: {
+      control: {
+        type: "select",
+        options: ["bottom", "top"],
+      },
+      description: "The vertical placement of the alert modal.",
+    },
+    errorMessage: {
+      control: {
+        type: "text",
+      },
+      description: "The message displayed inside the alert modal.",
+    },
+    handleCloseAlertModal: {
+      control: false, // Disable the control as this is a function
+      description:
+        "Callback function triggered when the alert modal is closed.",
+    },
+  },
+};
+
+export default meta;
+
+// Define the template for the stories
+type Story = StoryObj<AlertModalProps>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    handleCloseAlertModal: () => {},
+  },
+};
+
+// Story with custom message
+export const CustomMessage: Story = {
+  args: {
+    ...Default.args,
+    errorMessage: "This is custom message",
+  },
+};
+
+// Story with custom severity
+export const CustomSeverity: Story = {
+  args: {
+    ...Default.args,
+    errorMessage: "Login succesfully",
+    severity: "success",
+  },
+};
+
+// Story with custom placement
+export const CustomPlacement: Story = {
+  args: {
+    ...Default.args,
+    horizontal: "center",
+    vertical: "top",
+  },
+};

src/components/AlertModal/alertModal.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import Snackbar from "@mui/material/Snackbar";
+import { AlertModalProps } from "./types";
+import { AlertContainer } from "./styled";
+
+const AlertModal: FC<AlertModalProps> = ({
+  handleCloseAlertModal,
+  errorMessage = "Something wrong happened",
+  vertical = "top",
+  horizontal = "right",
+  severity = "error",
+}) => {
+  return (
+    <Snackbar
+      open={!!errorMessage}
+      autoHideDuration={6000}
+      onClose={handleCloseAlertModal}
+      anchorOrigin={{ vertical: vertical, horizontal: horizontal }}
+    >
+      <AlertContainer onClose={handleCloseAlertModal} severity={severity}>
+        {errorMessage}
+      </AlertContainer>
+    </Snackbar>
+  );
+};
+
+export default AlertModal;

src/components/AlertModal/index.ts

@@ -0,0 +1,3 @@
+import AlertModal from "./alertModal";
+
+export default AlertModal;

src/components/AlertModal/styled.tsx

@@ -0,0 +1,10 @@
+import Alert from "@mui/material/Alert";
+import { styled, css } from "@mui/material/styles";
+
+export const AlertContainer = styled(Alert, {
+  name: "AlertContainer",
+})(
+  () => css`
+    width: 100%;
+  `
+);

src/components/AlertModal/types.ts

@@ -0,0 +1,7 @@
+export type AlertModalProps = {
+  handleCloseAlertModal: () => void;
+  errorMessage?: string;
+  vertical?: "bottom" | "top";
+  horizontal?: "center" | "left" | "right";
+  severity?: "success" | "info" | "warning" | "error";
+};

src/components/theme/theme-provider.tsx

@@ -3,19 +3,24 @@
 import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
+  Shadows,
+  useTheme,
 } from "@mui/material/styles";
 import { useMemo, PropsWithChildren } from "react";
 
 function ThemeProvider(props: PropsWithChildren<{}>) {
+  const defaultTheme = useTheme();
+
   const theme = useMemo(
     () =>
       createTheme({
         cssVariables: {
           colorSchemeSelector: "class",
         },
         colorSchemes: { light: true, dark: true },
+        shadows: [...defaultTheme.shadows].map(() => "none") as Shadows,
       }),
-    []
+    [defaultTheme.shadows]
   );
 
   return <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>;