Skip to content

S
seat-booking
Commit f86b4fe6 by Syed Abdul Rahman
Options

login screen implementation

parent 41cdcff7
Showing with 245 additions and 88 deletions
.storybook/main.js
...@@ -7,11 +7,10 @@ const config = { ...@@ -7,11 +7,10 @@ const config = {
"../src/components/**/*.stories.@(js|jsx|ts|tsx)", "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
], ],
"addons": [ "addons": [
"@storybook/addon-onboarding",
"@chromatic-com/storybook", "@chromatic-com/storybook",
"@storybook/addon-docs", "@storybook/addon-docs",
"@storybook/addon-a11y", "@storybook/addon-a11y",
"@storybook/addon-vitest" "@storybook/addon-vitest",
], ],
"framework": { "framework": {
"name": "@storybook/react-vite", "name": "@storybook/react-vite",
......
.storybook/preview.js
...@@ -3,12 +3,9 @@ import '../src/assets/fonts.css' ...@@ -3,12 +3,9 @@ import '../src/assets/fonts.css'
const preview = { const preview = {
parameters: { parameters: {
backgrounds: { backgrounds: {
default: 'myCustomBlue',
options: { options: {
// Define your custom background colors myCustomBlue: { name: 'blue', value: '#3444c5' }, // Example
light: { name: 'Light', value: '#F7F9F2' },
dark: { name: 'Dark', value: '#333' },
maroon: { name: 'Maroon', value: '#400' },
myCustomBlue: { name: 'My Custom Blue', value: '#3444c5' }, // Example
}, },
}, },
controls: { controls: {
...@@ -19,12 +16,12 @@ const preview = { ...@@ -19,12 +16,12 @@ const preview = {
}, },
a11y: { a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: "todo" test: "todo"
} }
}, },
initialGlobals: {
backgrounds: { value: 'myCustomBlue' },
},
}; };
export default preview; export default preview;
\ No newline at end of file
src/App.jsx
import './App.css' import './App.css'
import Button from './components/Base/Button/Index'; import Button from './components/Base/Button/Index';
import Login from './components/TopLevel/Login/Index'
function App() { function App() {
return ( return (
<> <>
<h3> Booking APP</h3> <h3> Booking APP</h3>
<Button>Confirm</Button> <Button>Confirm</Button>
<Login />
</> </>
) )
} }
......
src/assets/fonts.css
...@@ -6,4 +6,8 @@ ...@@ -6,4 +6,8 @@
@font-face { @font-face {
font-family: 'Poppins-Bold'; font-family: 'Poppins-Bold';
src: url('../assets/fonts/Poppins-Bold.ttf'); 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 = { ...@@ -14,23 +14,29 @@ export const Default = {
render: () => { render: () => {
return ( return (
<> <>
<h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Size</h2> <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Size</h2>
<Space> <Space>
<Button size={"sm"}>Confirm </Button> <Button size={"sm"}>Button - SM</Button>
<Button size={"md"}>Confirm</Button> <Button size={"md"}>Button - MD</Button>
<Button size={"lg"}>Confirm</Button> <Button size={"lg"}>Button - LG</Button>
</Space> </Space>
<h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Loader</h2> <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Loader</h2>
<Space> <Space>
<Button size={"sm"} loading={true}>Confirm</Button> <Button size={"sm"} loading={true}>Button</Button>
<Button size={"md"} loading={true}>Confirm</Button> <Button size={"md"} loading={true}>Button</Button>
<Button size={"lg"} loading={true}>Confirm</Button> <Button size={"lg"} loading={true}>Button</Button>
</Space> </Space>
<h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Disabled</h2> <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Disabled</h2>
<Space> <Space>
<Button size={"sm"} disabled={true}>Confirm</Button> <Button size={"sm"} disabled={true}>Button</Button>
<Button size={"md"} disabled={true}>Confirm</Button> <Button size={"md"} disabled={true}>Button</Button>
<Button size={"lg"} disabled={true}>Confirm</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> </Space>
</> </>
) )
......
src/components/Base/Button/Index.jsx
...@@ -4,14 +4,14 @@ import styles from './styles.module.css'; ...@@ -4,14 +4,14 @@ import styles from './styles.module.css';
const Button = ({ loading, size, disabled, children, ...props }) => { const Button = ({ loading, size, disabled, children, ...props }) => {
return ( 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; export default Button;
Button.PropTypes = { Button.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
disabled: PropTypes.bool, disabled: PropTypes.bool,
onClick: PropTypes.func, onClick: PropTypes.func,
......
src/components/Base/Button/styles.module.css
...@@ -39,7 +39,22 @@ ...@@ -39,7 +39,22 @@
animation: rotate 0.5s linear infinite; 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); background-color: rgb(168, 166, 166);
opacity: 0.5; opacity: 0.5;
color: white; color: white;
...@@ -54,6 +69,5 @@ ...@@ -54,6 +69,5 @@
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
\ No newline at end of file
src/components/Base/Input/Index.jsx
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './styles.module.css';
const Input = ({ ...inputPprops }) => { const Input = ({ ...inputPprops }) => {
return ( return (
<input {...inputPprops} /> <input className={styles.input} {...inputPprops} />
) )
} }
export default Input; export default Input;
Input.PropTypes = { Input.propTypes = {
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
type: PropTypes.string, type: PropTypes.string,
value: PropTypes.string.isRequired, value: PropTypes.string,
placeholder: PropTypes.string placeholder: PropTypes.string
} }
\ No newline at end of file
src/components/Base/Input/Input.stories.jsx 0 → 100644
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" }) => { ...@@ -10,7 +10,7 @@ const Legend = ({ children, type="available" }) => {
</div> </div>
) )
} }
Legend.PropTypes = { Legend.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
type: PropTypes.oneOf(["selected", "reserved", "available"]) type: PropTypes.oneOf(["selected", "reserved", "available"])
} }
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
import BookingWrapper from "./Index"; import BookingWrapper from "./Index";
export default { export default {
title: 'Component/Layout/BookingWrapper', title: 'Component/Layout/BookingWrapper',
tags: ["autodocs"], tags: ["autodocs"],
component: BookingWrapper component: BookingWrapper,
argTypes: {
onSeatClick: { action: 'Seat clicked' },
}
} }
export const Default = { export const Default = {
args: {
}
} }
\ No newline at end of file
src/components/Layout/BookingWrapper/Index.jsx
import styles from './styles.module.css'; import styles from './styles.module.css';
import Seat from './Seat';
const BookingWrapper = () => { const BookingWrapper = ({onSeatClick}) => {
const aisleIndex = 5; const aisleIndex = 5;
const seatData = Array.from({ length: 11 }, (_, index) => ({ const seatData = [
id: index + 1, { id: 1, status: 'available' },
status: 'available' { id: 2, status: 'reserved' },
})); { id: 3, status: 'available' },
{ id: 4, status: 'reserved' },
const isLeftBlock = (col) => col < aisleIndex; { id: 5, status: 'available' },
const isRightBlock = (col) => col > aisleIndex; { id: 6, status: 'selected' },
{ id: 7, status: 'available' },
return ( { id: 8, status: 'reserved' },
<div> { id: 9, status: 'available' },
<div className={styles['theatre']}> { id: 10, status: 'reserved' },
{Array.from({ length: 6 }, (_, row_index) => ( { id: 11, status: 'available' }
<div className={styles['seat-row']}> ];
{seatData.map((_, column_index) => {
const isFirstRow = row_index === 0;
const isLastRow = row_index === 6 - 1;
const isLeftBlock = (col) => col < aisleIndex;
if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) { const isRightBlock = (col) => col > aisleIndex;
return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
} // const onSeatClick = (id) => {
// console.log(id, "<<<<=============")
if ( // }
isRightBlock(column_index) &&
column_index === seatData.length - 1 && return (
(isFirstRow || isLastRow) <div>
) { <div className={styles['theatre']}>
return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />; {Array.from({ length: 6 }, (_, row_index) => (
} <div className={styles['seat-row']}>
{seatData.map((ele, column_index) => {
if (column_index == aisleIndex) { const isFirstRow = row_index === 0;
const isLastRow = row_index === 6 - 1;
if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) {
return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
}
if (
isRightBlock(column_index) &&
column_index === seatData.length - 1 &&
(isFirstRow || isLastRow)
) {
return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />;
}
if (column_index == aisleIndex) {
return (
<div className={styles['aisle']}></div>
)
}
return ( return (
<div className={styles['aisle']}></div> // <div className={`${styles.seat} ${styles[ele.status]}`}></div>
<Seat status={ele.status} onClick={()=>onSeatClick(ele.id)} />
) )
} })}
return ( </div>
<div className={styles['seat']}></div> ))}
) </div>
})}
</div>
))}
</div> </div>
</div> )
) }
}
export default BookingWrapper; export default BookingWrapper;
src/components/Layout/BookingWrapper/Seat.jsx
import styles from './styles.module.css' import styles from './styles.module.css'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const Seat = ({ status, ...rest }) => { const Seat = ({ id,status, ...rest }) => {
return ( return (
<div {...rest} className={` ${styles[status]} ${styles.seat} `}></div> <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>
) )
} }
Seat.PropTypes = { Seat.propTypes = {
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
status: PropTypes.oneOf(['available', 'reserved', 'selected']) status: PropTypes.oneOf(['available', 'reserved', 'selected'])
} }
......
src/components/Layout/BookingWrapper/Seat.stories.jsx
...@@ -7,13 +7,16 @@ export default { ...@@ -7,13 +7,16 @@ export default {
argTypes: { argTypes: {
status: { status: {
control: { type: 'select' }, control: { type: 'select' },
options: ['available', 'reserved', 'selected'], options: ['available', 'reserved', 'selected'],
}, },
onClick: {action: "clicked"} ,
}, },
}; };
export const Default = { export const Default = {
args: { args: {
id:2,
status: 'available', status: 'available',
}, },
}; };
\ No newline at end of file
src/components/Layout/BookingWrapper/styles.module.css
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
} }
.reserved { .reserved {
background-color: gray; background-color: rgba(211, 208, 208, 0.181);
pointer-events: none; pointer-events: none;
border: unset;
} }
.selected { .selected {
......
src/components/Layout/Header/Index.jsx
...@@ -37,7 +37,7 @@ const Header = ({ children }) => { ...@@ -37,7 +37,7 @@ const Header = ({ children }) => {
) )
} }
Header.PropTypes = { Header.propTypes = {
children: PropTypes.node.isRequired children: PropTypes.node.isRequired
} }
......
src/components/Layout/Header/styles.module.css
...@@ -9,5 +9,5 @@ ...@@ -9,5 +9,5 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1rem; /* gap: 0.5rem; */
} }
\ No newline at end of file
src/components/TopLevel/Login/Index.jsx 0 → 100644
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 0 → 100644
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 0 → 100644
.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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment