✨ feat : implemented typographyWithTextField

frontend/src/components/molecules/TypographyWithTextField/index.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TypographyWithTextField from "./index";
+
+const meta: Meta<typeof TypographyWithTextField> = {
+  title: "molecules/TypographyWithTextField",
+  component: TypographyWithTextField,
+  argTypes: {
+    label: { control: 'text' },
+    color: { control: 'color' },
+    placeholder: { control: 'text' },
+    value: { control: 'text' },
+    onChange: { action: 'onChange' },
+    isPassword: { control: 'boolean' },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    size: { control: 'select', options: ['small', 'medium'] },
+    borderRadius: { control: 'text' },
+  },
+};
+
+export const Default: StoryObj<typeof TypographyWithTextField> = {
+  args: {
+    label: "Password",
+    color: "#344054",
+    placeholder: "Enter your Password",
+    value: "",
+    onChange: () => console.log("onChange triggered"),
+    isPassword: true,
+    width: "50%",
+    height: "40px", 
+    size: "small",
+    borderRadius: "8px",
+  },
+};
+
+export default meta;

frontend/src/components/molecules/TypographyWithTextField/index.test.tsx

@@ -0,0 +1,44 @@
+import { render, fireEvent } from "@testing-library/react";
+import TypographyWithTextField from "./index";
+
+describe("TypographyWithTextField", () => {
+  const label = "Label";
+  const color = "red";
+  const placeholder = "Placeholder";
+  let value = "";
+  const onChange = jest.fn();
+  const isPassword = false;
+  const width = "200px";
+  const height = 40;
+  const size = "medium";
+  const borderRadius = "8px";
+  const variant = "body1";
+
+  beforeEach(() => {
+    onChange.mockClear();
+    value = "";
+  });
+
+  it("calls onChange when input value changes", () => {
+    const { getByPlaceholderText } = render(
+      <TypographyWithTextField
+        label={label}
+        color={color}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        isPassword={isPassword}
+        width={width}
+        height={height}
+        size={size}
+        borderRadius={borderRadius}
+        variant={variant}
+      />
+    );
+    const textFieldElement = getByPlaceholderText(placeholder);
+    fireEvent.change(textFieldElement, { target: { value: "New Value" } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("New Value");
+  });
+
+});

frontend/src/components/molecules/TypographyWithTextField/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import MuiTypography from "../../atoms/typography";
+import CustomTextField from "../../atoms/textfield";
+
+
+interface TypographyWithTextFieldProps {
+  label: string;
+  color: string;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+  isPassword: boolean;
+  width?: string;
+  height?: string | number;
+  size?: "small" | "medium";
+  borderRadius?: string | number;
+  variant:any
+}
+
+const TypographyWithTextField: React.FC<TypographyWithTextFieldProps> = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  isPassword,
+  color,
+  width,
+  height,
+  size,
+  borderRadius,
+  variant
+}) => {
+  return (
+    <>
+      <MuiTypography
+        variant={variant}
+        text={label}
+        color={color}
+        sx={{ marginBottom: "-10px" }}
+      />
+        <CustomTextField
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          isPassword={isPassword}
+          width={width}
+          height={height}
+          size={size}
+          borderRadius={borderRadius}
+        />
+  </>
+  );
+};
+
+export default TypographyWithTextField;