its-danny / use-lilius

📅 A headless calendar hook for React.

use-lilius's Issues

Setting initial selected date does not ignore time, causing `isSelected(day)` to incorrectly return false

Describe the bug
Setting a default selected day, does not ignore the time portion of the date, meaning isSelected(day) returns false

To Reproduce

When setting the default selected date using -

const {...} = useLilius({ selected: new Date()})

then rendering out days as per the chakra example -

{calendar[0].map((week) => (
        <Box key={`week-${week[0]}`} sx={styles.calendarMatrixContainer}>
          {week.map((day) => (
              <Box
                data-in-range={inRange(day, startOfMonth(viewing), endOfMonth(viewing))}
                data-selected={isSelected(day)}
               ....

when it comes to the isSelected(day) for the box that represents 'today', it returns false, as day has its time set to 0, however the selected argument in the useLilius({ selected: [ new Date() ]}) keeps the timestamp.

console output for 'selected' from Returns -

console output for day from calendar map

However, manually stripping the time off before setting the initial selected date, seems to solve the issue -

const {...} = useLilius({ selected: [ new Date(new Date().toDateString()) ]})

Expected behavior
Setting the default selected date using new Date() should ignore the time so it can accurately be compared with dates from the calendar

Potential React Context implementation.

Is your feature request related to a problem? Please describe.

My team is building a custom date picker and we didn't want to build the calendar into the component because there are many edge cases that a design system team is not responsible for (one off requests that would waste our time and slow us down). To solve the problem of these one offs on our date picker, we made the calendar component a render prop to allow other teams to replace the default calendar we built. The issue is, without using the context api we are using an anti-pattern called prop drilling because the values the calendar needs is in the DatePicker component, and without context, we cannot pull them into the calendar using a hook.

Describe the solution you'd like

I think all React.setState and other state values could be moved to a context provider so that we may pull values from any component wrapped within it. This would remove the prop drilling anti pattern.

Describe alternatives you've considered

Not many alternatives to consider.

`calendar` starts as an empty array

Describe the bug

The current behavior of the useLililus hook causes an extraneous commit because calendar is set via an effect.

To Reproduce

Don't need a reproduction, just look at how calendar is set from an effect:

use-lilius/src/use-lilius.ts

Lines 250 to 260 in 9b77611

	useEffect(() => {
	const matrix = eachWeekOfInterval({ start: startOfMonth(viewing), end: endOfMonth(viewing) }, { weekStartsOn }).map(
	(week) =>
	eachDayOfInterval({
	start: startOfWeek(week, { weekStartsOn }),
	end: endOfWeek(week, { weekStartsOn }),
	}),
	);
	setCalendar(matrix);
	}, [viewing]);

Proposed fix

Replace useEffect with useMemo so that calendar is immediately available. I'm willing to submit a PR

setup codecov

update date-fns to v3

Thanks for the great package, I've been using it for a while on various projects. It would be great to update date-fns to the latest v3 version or set it as peer-dependency to stay compatible.

I would have liked to provide a PR, but the husky precommit prevents me from doing so.

Picking dates in MultiSelect example component leads to "Maximum update depth exceeded"

Describe the bug
I tried out the multi select example component and found it breaks after clicking a few dates

To Reproduce
Click a few dates in multi select on the storybook to get a minified react error or copy the code into your own app to see the full "Maximum update depth exceeded" error

Expected behavior
Not crash

Additional context
I'll see if I can fix it and make a PR

remove chakra components from storybook

not sure why, but all of a sudden all of chakras internal stories are included in this storybook. gotta find out how to make it not do that.

add events

You should be able to store and get events tied to dates. Something like:

Event<T = { [key: string]: any }> {
    start: Date;
    end: Date;
    meta?: T;
}

addEvent(event: Event) => void
eventsFor(date: Date) => Event[]
hasEvents(date: Date) => boolean
// etc

So you'd just draw the calendar like this, and use eventsFor to list events for each hour block?

---

I'm not totally sure this is really a necessary feature, you could still use use-lilius for an event calendar without this.

Where can I find configuration (Default Component styles) useMultiStyleConfig('Datepicker', {})

Describe the bug
styles not applied by Default

Failed to install using node 16 and 18 (probably > 14)

Describe the bug
When using node v14, I could install the package without an error. But I got this error related to husky when I used node v16 and v18.

npm ERR! code 1
npm ERR! path C:\...\node_modules\use-lilius
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\SNB_L_~1\AppData\Local\Temp\postinstall-797181eb.cmd
npm ERR! husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)

To Reproduce
Steps to reproduce the behavior:

• Install node v16 (16.17.0) or v18 (18.15.0)

• Enter npm i use-lilius command

Expected behavior
Package installed successfully without an error related to husky.