login screen implementation

.storybook/main.js

@@ -7,11 +7,10 @@ const config = {
     "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   "addons": [
-    "@storybook/addon-onboarding",
     "@chromatic-com/storybook",
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
+    "@storybook/addon-vitest",
   ],
   "framework": {
     "name": "@storybook/react-vite",

.storybook/preview.js

@@ -3,12 +3,9 @@ import '../src/assets/fonts.css'
 const preview = {
   parameters: {
     backgrounds: {
+      default: 'myCustomBlue',
       options: {
-        // Define your custom background colors
-        light: { name: 'Light', value: '#F7F9F2' },
-        dark: { name: 'Dark', value: '#333' },
-        maroon: { name: 'Maroon', value: '#400' },
-        myCustomBlue: { name: 'My Custom Blue', value: '#3444c5' }, // Example
+        myCustomBlue: { name: 'blue', value: '#3444c5' }, // Example
       },
     },
     controls: {
@@ -19,12 +16,12 @@ const preview = {
     },
 
     a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
       test: "todo"
     }
   },
+  initialGlobals: {
+    backgrounds: { value: 'myCustomBlue' },
+  },
 };
 
 export default preview;
\ No newline at end of file

src/App.jsx

 import './App.css'
 import Button from './components/Base/Button/Index';
-
+import Login from './components/TopLevel/Login/Index'
 function App() {
 
   return (
     <>
      <h3> Booking APP</h3>
       <Button>Confirm</Button> 
+      <Login />
     </>
   )
 }

src/assets/fonts.css

@@ -7,3 +7,7 @@
     font-family: 'Poppins-Bold';
     src: url('../assets/fonts/Poppins-Bold.ttf');
 }
+@font-face {
+    font-family: 'Pacifico';
+    src: url('../assets/fonts/Pacifico-Regular.ttf');
+}
\ No newline at end of file

src/components/Base/Button/Button.stories.jsx

@@ -14,23 +14,29 @@ export const Default = {
   render: () => {
     return (
       <>
-        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Size</h2>
+        <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Size</h2>
         <Space>
-          <Button size={"sm"}>Confirm </Button>
-          <Button size={"md"}>Confirm</Button>
-          <Button size={"lg"}>Confirm</Button>
+          <Button size={"sm"}>Button - SM</Button>
+          <Button size={"md"}>Button - MD</Button>
+          <Button size={"lg"}>Button - LG</Button>
         </Space>
-        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Loader</h2>
+        <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Loader</h2>
         <Space>
-          <Button size={"sm"} loading={true}>Confirm</Button>
-          <Button size={"md"} loading={true}>Confirm</Button>
-          <Button size={"lg"} loading={true}>Confirm</Button>
+          <Button size={"sm"} loading={true}>Button</Button>
+          <Button size={"md"} loading={true}>Button</Button>
+          <Button size={"lg"} loading={true}>Button</Button>
         </Space>
-        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Disabled</h2>
+        <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Disabled</h2>
         <Space>
-          <Button size={"sm"} disabled={true}>Confirm</Button>
-          <Button size={"md"} disabled={true}>Confirm</Button>
-          <Button size={"lg"} disabled={true}>Confirm</Button>
+          <Button size={"sm"} disabled={true}>Button</Button>
+          <Button size={"md"} disabled={true}>Button</Button>
+          <Button size={"lg"} disabled={true}>Button</Button>
+        </Space>
+        <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Loading & Disabled</h2>
+        <Space>
+          <Button size={"sm"} disabled={true} loading={true}>Button</Button>
+          <Button size={"md"} disabled={true} loading={true}>Button</Button>
+          <Button size={"lg"} disabled={true} loading={true}>Button</Button>
         </Space>
       </>
     )

src/components/Base/Button/Index.jsx

@@ -4,14 +4,14 @@ import styles from './styles.module.css';
 const Button = ({ loading, size, disabled, children, ...props }) => {
 
     return (
-        <button className={`${styles.button} ${styles[size]} ${disabled ? styles['disabled'] : ''}`} {...props}>{loading ? <div className={styles.loader}></div> : null}{children}</button>
+        <button className={`${styles.button} ${styles[size]} ${disabled ? styles['disabled'] : ''}`} {...props}>{loading && <div className={`${styles.loader} ${styles[`loader-${size}`]}`}></div>}{children}</button>
     )
 }
 
 export default Button;
 
 
-Button.PropTypes = {
+Button.propTypes = {
     children: PropTypes.node.isRequired,
     disabled: PropTypes.bool,
     onClick: PropTypes.func,

src/components/Base/Button/styles.module.css

@@ -39,7 +39,22 @@
     animation: rotate 0.5s linear infinite;
 }
 
-.disabled{
+.loader-sm {
+    width: 10px;
+    height: 10px;
+}
+
+.loader-md {
+    width: 15px;
+    height: 15px;
+}
+
+.loader-lg {
+    width: 20px;
+    height: 20px;
+}
+
+.disabled {
     background-color: rgb(168, 166, 166);
     opacity: 0.5;
     color: white;
@@ -54,6 +69,5 @@
 
     100% {
         transform: rotate(360deg);
-
     }
 }
\ No newline at end of file

src/components/Base/Input/Index.jsx

 import PropTypes from 'prop-types';
-
+import styles from './styles.module.css';
 const Input = ({ ...inputPprops }) => {
 
 
     return (
-        <input {...inputPprops} />
+        <input className={styles.input} {...inputPprops} />
     )
 }
 
 export default Input;
 
 
-Input.PropTypes = {
+Input.propTypes = {
     onChange: PropTypes.func.isRequired,
     type: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     placeholder: PropTypes.string
 }
\ No newline at end of file

src/components/Base/Input/Input.stories.jsx

+import Input from './Index';
+export default {
+    title: "component/Base/Input",
+    tags: ["autodocs"],
+    component: Input,
+    argTypes: {
+        onChange: { action: "changing" },
+        type: {
+            control: {
+                type: 'select'
+            },
+            options: ["text", "number"]
+        }
+    }
+}
+
+export const Default = {
+    args: {
+        placeholder: "Placeholder",
+
+    }
+}
\ No newline at end of file

src/components/Base/Input/styles.module.css

+.input{
+        border-color: aqua;
+        outline: none;
+        padding: 0.5rem 1rem;
+        border-radius: 10px;
+}
\ No newline at end of file

src/components/Base/Legend/Index.jsx

@@ -10,7 +10,7 @@ const Legend = ({ children, type="available" }) => {
     </div>
   )
 }
-Legend.PropTypes = {
+Legend.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.oneOf(["selected", "reserved", "available"])
 }

src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx

 import BookingWrapper from "./Index";
-
 export default {
     title: 'Component/Layout/BookingWrapper',
     tags: ["autodocs"],
-    component: BookingWrapper
+    component: BookingWrapper,
+    argTypes: {
+        onSeatClick: { action: 'Seat clicked' },
+    }
 }
 
 export const Default = {
+    args: {
 
+    }
 }
\ No newline at end of file

src/components/Layout/BookingWrapper/Index.jsx

-import styles from './styles.module.css';
-
-const BookingWrapper = () => {
+    import styles from './styles.module.css';
+    import Seat from './Seat';
+    const BookingWrapper = ({onSeatClick}) => {
         const aisleIndex = 5;
-    const seatData = Array.from({ length: 11 }, (_, index) => ({
-        id: index + 1,
-        status: 'available'
-    }));
+        const seatData = [
+            { id: 1, status: 'available' },
+            { id: 2, status: 'reserved' },
+            { id: 3, status: 'available' },
+            { id: 4, status: 'reserved' },
+            { id: 5, status: 'available' },
+            { id: 6, status: 'selected' },
+            { id: 7, status: 'available' },
+            { id: 8, status: 'reserved' },
+            { id: 9, status: 'available' },
+            { id: 10, status: 'reserved' },
+            { id: 11, status: 'available' }
+        ];
+
+
 
         const isLeftBlock = (col) => col < aisleIndex;
         const isRightBlock = (col) => col > aisleIndex;
 
+        // const onSeatClick = (id) => {
+        //     console.log(id, "<<<<=============")
+        // }
+        
         return (
             <div>
                 <div className={styles['theatre']}>
                     {Array.from({ length: 6 }, (_, row_index) => (
                         <div className={styles['seat-row']}>
-                        {seatData.map((_, column_index) => {
+                            {seatData.map((ele, column_index) => {
                                 const isFirstRow = row_index === 0;
                                 const isLastRow = row_index === 6 - 1;
 
@@ -37,7 +52,8 @@ const BookingWrapper = () => {
                                     )
                                 }
                                 return (
-                                <div className={styles['seat']}></div>
+                                    // <div className={`${styles.seat} ${styles[ele.status]}`}></div>
+                                    <Seat status={ele.status} onClick={()=>onSeatClick(ele.id)} />
                                 )
                             })}
                         </div>
@@ -45,7 +61,7 @@ const BookingWrapper = () => {
                 </div>
             </div>
         )
-}
+    }
 
-export default BookingWrapper;
+    export default BookingWrapper;
 

src/components/Layout/BookingWrapper/Seat.jsx

 import styles from './styles.module.css'
 import PropTypes from 'prop-types';
 
-const Seat = ({ status, ...rest }) => {
+const Seat = ({ id,status, ...rest }) => {
 
     return (
         <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>
     )
 }
 
-Seat.PropTypes = {
+Seat.propTypes = {
     onClick: PropTypes.func.isRequired,
     status: PropTypes.oneOf(['available', 'reserved', 'selected'])
 }

src/components/Layout/BookingWrapper/Seat.stories.jsx

@@ -9,11 +9,14 @@ export default {
             control: { type: 'select' },
             options: ['available', 'reserved', 'selected'],
         },
+        onClick:  {action: "clicked"} , 
+       
     },
 };
 
 export const Default = {
     args: {
+        id:2,
         status: 'available',
     },
 };
\ No newline at end of file

src/components/Layout/BookingWrapper/styles.module.css

@@ -13,9 +13,9 @@
 }
 
 .reserved {
-    background-color: gray;
+    background-color: rgba(211, 208, 208, 0.181);
     pointer-events: none;
-
+    border: unset;
 }
 
 .selected {

src/components/Layout/Header/Index.jsx

@@ -37,7 +37,7 @@ const Header = ({ children }) => {
     )
 }
 
-Header.PropTypes = {
+Header.propTypes = {
     children: PropTypes.node.isRequired
 }
 

src/components/Layout/Header/styles.module.css

@@ -9,5 +9,5 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
+    /* gap: 0.5rem; */
 }
\ No newline at end of file

src/components/TopLevel/Login/Index.jsx

+import styles from './styles.module.css'
+import img from '../../../assets/images/background.png'
+const Login = () => {
+    return (
+        <div className={styles.bg}>
+            <section className={styles.container}>
+                <form action="/login" method="POST">
+                    <div className={styles.title}>Login</div>
+                    <label for="username">Username:</label><br />
+                    <input type="text" id="username" name="username" /><br /><br />
+
+                    <label for="password">Password:</label><br />
+                    <input type="password" id="password" name="password" /><br /><br />
+
+                    <button type="submit">Confirm</button>
+                </form>
+
+            </section>
+        </div>
+
+
+    )
+}
+
+export default Login
\ No newline at end of file

src/components/TopLevel/Login/Login.stories.jsx

+import Login from './Index';
+
+export default {
+    title: "component/TopLevel/login",
+    tags: ["autodocs"],
+    component: Login
+}
+
+export const Screen = {
+    
+}
\ No newline at end of file

src/components/TopLevel/Login/styles.module.css

+.bg {
+  position: relative;
+  width: 100%;
+  height: 95vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url('/src/assets/images/background.png'); /* Make sure path is correct */
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(3px);
+  z-index: -1;
+}
+
+.container {
+  position: relative;
+  background-color: rgb(4, 3, 57); 
+  border-radius: 10px;
+  height: 70vh;
+  padding: 1rem 3rem;
+  box-sizing: border-box;
+  width: 30vw;
+  z-index: 1;
+  color: white;
+}
+
+.title{
+    font-family: 'Pacifico';
+    font-size: 26px;
+}
\ No newline at end of file