Skip to content

S
seat-booking
Commit f86b4fe6 by Syed Abdul Rahman
Options

login screen implementation

parent 41cdcff7
Showing with 209 additions and 52 deletions
.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 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" }) => {
</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 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