npm install
npm start
- React
- Context
- Provider
- Hooks
- useReducer
- useContext
- useState
grommet
- component library- DateInput
- Select
- CheckBox
- Box
- Icons
date-fns
- date utilityuuid
- unique id utilityclassnames
- className utility
- v1 - show special hours in a separate table
- v2 - show special hours in the same table
- Option 1 - Special hours are listed at the bottom for user to check at their own discretion.
- Option 2 - User only views Special Hours on the week’s they occur.
- Option 3 - User is alerted when the hours may differ this week.
- Tested for on mobile and desktop
- Tested for accessibility using keyboard and mouse
- Tested for color accessibility
const regularHours = [
{
id: 0,
name: 'Sunday',
isOpen: true,
open24Hrs: false,
times: [
{
opensTime: 'time',
closeTime: 'time',
}
]
}
]
const specialHours = [
{
id: 0,
date: new Date(),
isOpen: true,
open24Hrs: false,
times: [
{
opensTime: 'time',
closeTime: 'time',
}
]
},
]
- Base app
- Create a store
- Add reducers
- Edit hours
- Show hours
- Populate default hours
- Add ability to add special hours
- Show special hours separate from regular hours
- Show special hours blended with regular hours
- Mobile layout
- Add date sensitive taglines e.g. closed today, closing soon, opening soon
- Add calendar view
- Add a name field to Special hours
- Add ability to search in the time select box
- Allow adding multiple times per day or date
- Add prop-types validation
- Models in TypeScript
- Write unit tests
- Write component and snapshot tests
- Write E2E tests
Joe Seifi