@stery-app/datepicker v0.0.5

Objective

To create an unstyled datepicker component for react implementing the example below

<Datepicker
    open
    id="datepicker"
    name="name"
    i18n="en"
    className="hello class"
    asRange={true}
    useRange={true}
    startAt={new Date}
    endAt={new Date}
    onChange={(e, date | dateRange) => {
        console.log(e, date | dateRange);
    }}
    onBlur={(e, date | dateRange) => {
        console.log(e, date | dateRange);
    }}
    onFocus={(e, date | dateRange) => {
        console.log(e, date | dateRange);
    }}
    onToggle={(e, open, date | dateRange) => {
        console.log(e, open, date | dateRange);
    }}
>
    <div className="relative">
        <Datepicker.Input readOnly disabled className="input-class" />
        {({ open }) => (
            <Datepicker.Button onClick={(e) => {e.toggle()}}>
                <Datepicker.ToggleIcon open={open} />
            </Datepicker.Button>
        )}
    </div>
    {({ open }) => (
        // Calendar Container
        <Datepicker.Calendar className="border p-2">
            {/* Months render */}
            <Datepicker.Months>
                {({open, previous, current, next, month, selectMonth}) => (
                    <div className="w-full flex items-center justify-between">
                        <Datepicker.Button onClick={(e) => { selectMonth(previous)}}>
                            <Datepicker.PreviousIcon />
                        </Datepicker.Button>
                        <div>{current}</div>
                        <Datepicker.Button onClick={(e) => { selectMonth(next)}}>
                            <Datepicker.NextIcon />
                        </Datepicker.Button>
                    </div>
                )}
            </Datepicker.Months>

            {/* Days render */}
            <Datepicker.Days className="grid">
                {({ previous, current, next, day }) => {
                    previous ? (
                        <Datepicker.DayButton className="previous">
                            {day}
                        </Datepicker.DayButton>
                    ) : null;
                    current ? (
                        <Datepicker.DayButton className="current">
                            {day}
                        </Datepicker.DayButton>
                    ) : null;
                    next ? (
                        <Datepicker.DayButton className="next">
                            {day}
                        </Datepicker.DayButton>
                    ) : null;
                }}
            </Datepicker.Days>

            {/* Custom shortcut */}
            <Datepicker.Button className="shortcut" onClick={(e) => {
                e.selectDate(new Date, new Date | null)
            }}>Go To Date</Datepicker.Button>
        </Datepicker.Calendar>
    )}
</Datepicker>