Skip to content

S
seat-booking
Commit f7dac3cd by Syed Abdul Rahman
Options

story book completed

parent e24cd69d
Showing with 135 additions and 140 deletions
db.json
......@@ -23,7 +23,7 @@
"selected": [
{
"row": 8,
"seat": 1
"seat": 3
},
{
"row": 8,
......@@ -31,7 +31,7 @@
},
{
"row": 8,
"seat": 3
"seat": 1
}
]
},
......@@ -40,19 +40,19 @@
"userid": "5ebc",
"selected": [
{
"row": 2,
"row": 6,
"seat": 5
},
{
"row": 2,
"row": 6,
"seat": 6
},
{
"row": 2,
"row": 6,
"seat": 7
},
{
"row": 2,
"row": 6,
"seat": 8
}
]
......
src/components/Base/Button/styles.module.css
......@@ -11,6 +11,7 @@
justify-content: center;
font-size: 1rem;
box-sizing: border-box;
/* flex: 1; */
}
.primary {
......@@ -19,7 +20,7 @@
}
.secondary {
background-color: rgb(155, 17, 17);
background-color: rgb(189, 45, 45);
color: white;
}
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
......@@ -4,7 +4,8 @@ export default {
tags: ['autodocs'],
component: BookingWrapper,
argTypes: {
onSeatClick: { action: 'Seat clicked' }
onSeatAdd: { action: 'Seat Add' },
onSeatRemove: { action: 'Seat Remove' }
}
};
......
src/components/Layout/BookingWrapper/Index.jsx
import Seat from './Seat';
import PropTypes from 'prop-types';
import styles from './styles.module.css';
const BookingWrapper = ({
......@@ -78,3 +79,25 @@ const BookingWrapper = ({
};
export default BookingWrapper;
BookingWrapper.propTypes = {
selectedSeats: PropTypes.arrayOf(
PropTypes.shape({
row: PropTypes.number,
seat: PropTypes.number
})
),
seatData: PropTypes.arrayOf(
PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['*'])])
)
).isRequired,
currentSeats: PropTypes.arrayOf(
PropTypes.shape({
row: PropTypes.number,
seat: PropTypes.number
})
),
onSeatAdd: PropTypes.func.isRequired,
onSeatRemove: PropTypes.func.isRequired
};
src/components/Layout/BookingWrapper/Seat.jsx
......@@ -2,17 +2,11 @@ import styles from './styles.module.css';
import PropTypes from 'prop-types';
const Seat = ({ id, status, ...rest }) => {
return (
<div
{...rest}
// onClick={() => onClick(status)}
className={` ${styles[status]} ${styles.seat} `}></div>
);
return <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>;
};
Seat.propTypes = {
onClick: PropTypes.func.isRequired
// status: PropTypes.oneOf(['available', 'reserved', 'selected'])
status: PropTypes.oneOf(['current-selected', 'selected-by-other', 'seat'])
};
export default Seat;
src/components/Layout/BookingWrapper/Seat.stories.jsx
......@@ -7,15 +7,14 @@ export default {
argTypes: {
status: {
control: { type: 'select' },
options: ['available', 'reserved', 'selected']
},
onClick: { action: 'clicked' }
options: ['current-selected', 'selected-by-other', 'seat']
}
}
};
export const Default = {
args: {
id: 2,
status: 'available'
status: 'seat'
}
};
src/components/Layout/BookingWrapper/styles.module.css
.seat {
width: 1.5em;
height: 1.5em;
border: 1.5px solid rgba(255, 255, 255, 0.825);
border-radius: 5px;
cursor: pointer;
}
.seat:hover {
background-color: aqua;
}
.reserved {
background-color: rgba(211, 208, 208, 0.181);
pointer-events: none;
border: unset;
}
.selected {
background-color: aqua;
}
.theatre {
display: flex;
justify-content: center;
......@@ -33,8 +11,16 @@
gap: 10px;
}
.aisle {
width: 1em;
.seat {
width: 1.5em;
height: 1.5em;
border: 1.5px solid rgba(255, 255, 255, 0.825);
border-radius: 5px;
cursor: pointer;
}
.seat:hover {
background-color: aqua;
}
.seat-gap {
......@@ -44,20 +30,14 @@
visibility: hidden;
}
.selected-by-me {
background-color: aqua;
border: 1px solid aqua;
}
.current-selected {
background-color: aqua !important;
border: 1px solid aqua;
border: 1.5px solid rgba(255, 255, 255, 0.825);
}
.selected-by-other {
background-color: #bec0c26d !important;
border: 1px solid #bec0c26d;
border: 1.5px solid rgba(255, 255, 255, 0.825);
pointer-events: none;
}
......@@ -71,10 +51,6 @@
height: 1.8em;
}
.aisle {
width: 2em;
}
.seat-row {
gap: 15px;
}
......
src/components/Layout/Header/Header.stories.jsx
import Header from './Index'
import Header from './Index';
export default {
title: "Component/Layout/Header",
tags: ["autodocs"],
component: Header
}
export const Default = {
args: {
},
render: () => {
return <Header>Choose Seats</Header>
title: 'Component/Layout/Header',
tags: ['autodocs'],
component: Header,
argTypes: {
children: {
control: 'text',
description: 'Content inside the Header (usually a title)'
}
}
\ No newline at end of file
}
};
const Template = (args) => <Header {...args} />;
export const Default = Template.bind({});
Default.args = {
children: 'Choose Seats'
};
src/components/Layout/Header/Index.jsx
......@@ -6,53 +6,6 @@ const Header = ({ children }) => {
<section className={styles['header-wrapper']}>
<div className={styles.title}>{children}</div>
<div className={styles.screenWrapper}>
{/* <svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 30 70 Q 240 20 450 70"
stroke="white"
stroke-width="3"
fill="none"
/>
<defs>
<linearGradient
id="glowGradient"
x1="0"
y1="80"
x2="0"
y2="130"
gradientUnits="userSpaceOnUse"
>
<stop offset="0%" stop-color="#9c6ad5d4" stop-opacity="0.3" />
<stop offset="30%" stop-color="#9c6ad5d4" stop-opacity="0.2" />
<stop offset="60%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="70%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="80%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="90%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="100%" stop-color="#9c6ad5d4" stop-opacity="0" />
</linearGradient>
<clipPath id="glowClip">
<path
d="
M 30 70
Q 240 20 450 70
L 470 130
L 10 130
Z"
/>
</clipPath>
</defs>
<rect
x="0"
y="0"
width="480"
height="900"
fill="url(#glowGradient)"
clip-path="url(#glowClip)"
/>
</svg> */}
<svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
<path
d="M 30 70 Q 240 20 450 70"
......
src/components/Shared/Modal/Index.jsx
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import PropTypes from 'prop-types';
import styles from './styles.module.css';
const Modal = ({ children }) => {
......@@ -11,5 +10,7 @@ const Modal = ({ children }) => {
</div>
);
};
export default Modal;
Modal.propTypes = {
children: PropTypes.node.isRequired
};
src/components/Shared/Modal/Modal.stories.jsx
import Modal from './Index';
export default {
tags: ['autodocs'],
title: 'component/Shared/Modal',
tags: ['autodocs'],
component: Modal,
argTypes: {}
argTypes: {
children: {
control: 'text',
description: 'Content inside the Modal'
}
}
};
const Template = (args) => <Modal {...args} />;
export const Default = () => {
return (
<Modal>
<p>This is the Modal Title</p>
<p>
Integer suscipit eros sit amet mi auctor, vitae hendrerit orci pretium.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc.</p>
</Modal>
);
export const Default = Template.bind({});
Default.args = {
children:
'lroem jkasd kshfdlkasjf oasdhflaksdfjCurabitur bibendum, elit nec efficitur vulputate, massa nulla bibendum augue, quis pharetra odio arcu id lacus. Nam semper turpis sit amet magna auctor, non commodo tortor pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Maecenas volutpat quam sed erat consectetur, ac tincidunt orci laoreet. Etiam interdum vitae nulla ac scelerisque. '
};
src/components/Shared/Modal/styles.module.css
......@@ -21,8 +21,8 @@
box-sizing: border-box;
min-width: 300px;
min-height: 150px;
/* height: max(150px, 300px); */
/* height: fit-content; */
max-width: 40%;
white-space: wrap;
height: auto;
}
......
src/components/TopLevel/ConfirmSeatContent/ConfirmSeatContent.stories.jsx
......@@ -5,7 +5,8 @@ export default {
tags: ['autodocs'],
component: SeatConfirmationContent,
argTypes: {
onConfirm: { action: 'onConfirm' }
onConfirm: { action: 'onConfirm' },
onCancel: { action: 'onCancel' }
}
};
......
src/components/TopLevel/ConfirmSeatContent/Index.jsx
import PropTypes from 'prop-types';
import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';
......@@ -10,10 +11,18 @@ const Index = ({ onConfirm, onCancel }) => {
Please confirm to proceed with your booking.
</p>
<div className={styles['btn-wrapper']}>
<Button size="md" variant="secondary" onClick={onCancel}>
<Button
style={{ flex: 1 }}
size="md"
variant="secondary"
onClick={onCancel}>
Cancel
</Button>
<Button size="md" variant="primary" onClick={onConfirm}>
<Button
style={{ flex: 1 }}
size="md"
variant="primary"
onClick={onConfirm}>
Confirm
</Button>
</div>
......@@ -22,3 +31,7 @@ const Index = ({ onConfirm, onCancel }) => {
};
export default Index;
Index.propTypes = {
onConfirm: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired
};
src/components/TopLevel/SeatSelectionContent/Index.jsx
......@@ -2,6 +2,7 @@ import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';
import PropTypes from 'prop-types';
const Index = ({ onChange, onConfirm, disabled }) => {
return (
......@@ -28,3 +29,8 @@ const Index = ({ onChange, onConfirm, disabled }) => {
};
export default Index;
Index.propTypes = {
onChange: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired,
disabled: PropTypes.bool
};
src/components/TopLevel/SeatSelectionContent/SeatSelectionContent.stories.jsx
......@@ -6,8 +6,18 @@ export default {
component: SeatSelectionContent,
argTypes: {
onChange: { action: 'onChange' },
onConfirm: { action: 'onConfirm' }
onConfirm: { action: 'onConfirm' },
disabled: {
control: {
type: 'select'
},
options: [true, false]
}
}
};
export const SelectSeatContent = {};
export const SelectSeatContent = {
args: {
disabled: true
}
};
src/components/TopLevel/SuccessModal/Index.jsx
import PropTypes from 'prop-types';
import Lottie from 'lottie-react';
import animationData from '../../../successSvg.json';
import Modal from '../../Shared/Modal/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
import { useEffect, useState } from 'react';
const SuccessModal = ({ onConfirm }) => {
const [showMessage, setShowMessage] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setShowMessage(true);
}, 1000);
return () => clearTimeout(timer);
}, []);
return (
<Modal>
<div className={styles['content-wrapper']}>
<div className={styles['btn-wrapper']}>
<p>Booked Successfully</p>
{showMessage && <p>Booked Successfully</p>}
</div>
<Lottie
className={styles.lottieSvg}
......@@ -27,3 +38,7 @@ const SuccessModal = ({ onConfirm }) => {
};
export default SuccessModal;
SuccessModal.propTypes = {
onConfirm: PropTypes.func.isRequired
};
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