@jylopez/reservation-grid

Reservation Grid

A modular grid that allows managing reservations for a hotel

Installation

npm install @jylopez/reservation-grid

Usage

import React, { FC, useCallback } from 'react';
import { ReservationGrid, DayType, Row } from '@jylopez/reservation-grid';

const App: FC = () => {

  const onClickTitle = useCallback((value: string) => {
    console.log(`Selected row with # ${value}`);
  }, []);

  const onClickCell = useCallback(({ value: string, date: string, dayType: DayType }) => {
    console.log('Selected cell:', { value, date, dayType });
  }, []);

  const data: Row[] = [
    value: '# 1',
    info: '4',
    periods: [
      { start: '2021-11-04', end: '2021-11-09', status: 'confirmed', displayText:'<div><p>User 1</p></div>', onHoverToolTip: '<div><p>User 1</p></div>' },
      // for empty displayText and onHoverToolTip
      { start: '2021-11-09', end: '2021-11-12', status: 'awaiting' },
    ],
  ];

  return (
    <ReservationGrid
      highlightToday
      showInfo
      showColumn3
      start="2021-11-01"
      end="2021-11-30"
      title="Number"
      info="Seats"
      locale="en"
      data={data}
      onClickTitle={onClickTitle}
      onClickCell={onClickCell}
    />
  );
};

Props

Name	Type	Required	Default	Example
start	string	*	-	'2021-11-01'
end	string	*	-	'2021-11-30'
highlightToday	boolean	-	true
showInfo	boolean	-	true
showColumn3	boolean	-	true
selectedColumns	string[]	-	[ ]	['2021-11-01', '2021-11-02']
selectedRows	string[]	-	[ ]	['# 1']
theme	Theme	-	default theme
locale	LocaleKey	-	en
title	string	-	'Number'
info	string	-	empty string
data	Row[]	*	-	see example above
displayText	html element	-	-	see example above
onHoverToolTip	html element	-	-	see example above
onClickTitle	Function	-	-	(value) => console.log(value)
onClickCell	Function	-	-	({ value, date, dayType }) => console.log({ value, date, dayType })

Data

The data is an array of the Rows:

type DateStatus = 'awaiting' | 'confirmed' | 'paid' | 'inaccessible';

interface ReservedPeriod {
  start: string;
  end: string;
  status: DateStatus;
}

interface Row {
  value: string;
  info: string;
  periods: ReservedPeriod[];
}

Example:

const data: Row[] = [
  {
    value: 'Number 1',
    info: '4 seats',
    periods: [
      { start: '2021-11-04', end: '2021-11-09', status: 'confirmed', displayText:'<div><p>User 1</p></div>', onHoverToolTip: '<div><p>User 1</p></div>' },
      { start: '2021-11-09', end: '2021-11-12', status: 'awaiting', displayText:'<div><p>User 2</p></div>', onHoverToolTip: '<div><p>User 2</p></div>' },
      { start: '2021-11-21', end: '2021-11-26', status: 'confirmed', displayText:'<div><p>User 3</p></div>', onHoverToolTip: '<div><p>User 3</p></div>' },
    ],
  },
  {
    value: 'Number 2',
    info: '3 seats',
    periods: [
      { start: '2021-11-01', end: '2021-11-02', status: 'confirmed' },
      { start: '2021-11-14', end: '2021-11-27', status: 'confirmed' },
    ],
  },
];

Locale

Locale can be either en, ua or ru:

type LocaleKey = 'en' | 'ua' | 'ru';

Theme

You can change appearance of the Reservation Grid. And you don't need to pass the entire theme: just pass keys you want to change.

Default theme:

const THEME: Theme = {
  'font.face': 'sans-serif',
  'font.size': '14px',
  'color.text': '#30424F',
  'color.background': '#FFFFFF',
  'color.border': '#DDEBF3',
  'color.free': 'transparent',
  'color.awaiting': '#DDEBF3',
  'color.confirmed': '#006490',
  'color.paid': '#009074',
  'color.inaccessible': '#759AB5',
  'color.today': '#E4FFE6',
  'color.selected': '#FFF2F2',
  'color.weekend': '#F8FAFB',
  'width.title': '50%',
  'width.info': '50%',
};

Local development

To set up dev environment:

1. Create link in root directory:

npm link

2. Go into example folder and link the package out to the root folder

cd example
npm link @jylopez/reservation-grid

That's it. You are now set up to develop. You just need to do the following steps everytime you make a change. (I know, it's annoying.)

1. Change something in the code.

2. npm run build

3. cd example

4. npm run start

Publishing

npm login
npm publish --access public

Publishing Demo to GitHub Pages

npm run deploy

It will build the demo application from /example folder and publish it via gh-pages package

License

MIT © Daminort