signup component

src/components/Signup/Signup.stories.ts

@@ -0,0 +1,37 @@
+import { Signup } from './Signup';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Signup',
+  component: Signup,
+} satisfies Meta<typeof Signup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultProps = {};
+
+const disableControls = {
+  parameters: {
+    controls: {
+      disable: true,
+    },
+    actions: {
+      disable: true,
+    },
+  },
+};
+
+export const Demo: Story = {
+  args: {
+    ...defaultProps,
+  },
+  tags: ['excludeFromSidebar'],
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultProps,
+  },
+  ...disableControls,
+};

src/components/Signup/Signup.style.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+export const StyledSignup = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledModal = styled.div`
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+`;
+
+export const CloseButton = styled.button`
+  margin-top: 10px;
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const Input = styled.input`
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 300px;
+`;

src/components/Signup/Signup.test.tsx

@@ -0,0 +1,13 @@
+import { screen } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils.tsx';
+import Signup from './Signup';
+
+describe('<Signup />', () => {
+	it('renders', () => {
+		renderWithDeps(<Signup />);
+
+		const signup = screen.getByTestId('Signup');
+
+		expect(signup).toBeInTheDocument();
+	});
+});

src/components/Signup/Signup.tsx

@@ -0,0 +1,95 @@
+import { FC, useState } from 'react';
+import {
+  StyledSignup,
+  ModalOverlay,
+  StyledModal,
+  CloseButton,
+  Form,
+  Input,
+} from './Signup.style';
+
+type SignupProps = {};
+
+export const Signup: FC<SignupProps> = () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    phone: '',
+    password: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setFormData({
+      username: '',
+      email: '',
+      phone: '',
+      password: '',
+    });
+  };
+
+  return (
+    <StyledSignup data-testid="Signup">
+      <h2>Sign Up</h2>
+      <Form onSubmit={handleSubmit}>
+        <Input
+          type="text"
+          name="username"
+          placeholder="Username"
+          value={formData.username}
+          onChange={handleChange}
+          required
+        />
+        <Input
+          type="email"
+          name="email"
+          placeholder="Email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+        />
+        <Input
+          type="tel"
+          name="phone"
+          placeholder="Phone Number"
+          value={formData.phone}
+          onChange={handleChange}
+          required
+        />
+        <Input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={formData.password}
+          onChange={handleChange}
+          required
+        />
+        <button type="submit">Sign Up</button>
+      </Form>
+
+      {isModalOpen && (
+        <ModalOverlay>
+          <StyledModal>
+            <h2>Signup Successful</h2>
+            <p>Thank you for signing up!</p>
+            <CloseButton onClick={handleCloseModal}>Close</CloseButton>
+          </StyledModal>
+        </ModalOverlay>
+      )}
+    </StyledSignup>
+  );
+};