Created: Datepicker Component

[rikgirbes]

I created a Datepicker component working with DaisyUI.

All vanilla typescript, although it does use date-fns and floating-ui.

Of course this is both not "css only" and uses 2 libraries.

Thus the question can this be of any use for the project?
Or should I release it separately?

[saadeghi]

That's amazing! Many people asked for this.

Yes, I think you should release it as a separate package.
If the npm package is ready for production and the docs is straightforward, I will add a link to it on daisyUI docs as well. I'm thinking about adding a "plugins" section on the sidebar of daisyUI document website.

Let me know if you have any questions ✌️

[rsessine]

Hi @saadeghi any news on the plugin section?

[saadeghi]

Yes: #1004 (comment)

[tonyYo00]

I would like a plugin based on daisyUI and more headless combinations like react-table + daisyUI. Or some common components like rc-component + daisyUI

[tonyYo00]

1. Core: Tailwind + DaisyUI Config
2. Plugin:
   1. Headless : react-table, react-hot-toast, react-modal
   2. Other: rc-component/tree rc-component/date-picker rc-component/cascader react-select or rc-component/select ....

@saadeghi Do we have some plugin schedules?

[saadeghi]

@tonyYo00 daisyUI only provides the style. So any UI library that is "headless" (only provides functionality + does not provide design decisions or it's optional) can work well with daisyUI.
There could be wrapper packages to include 2 in 1 but of course those should be separate project with their own npm package.

[rikgirbes]

@tonyYo00 as for the schedule: will probably release the date-picker in 1-2 weeks (lots of work on daily job 😄 )

[tonyYo00]

@rikgirbes i found a headless lib about date: https://github.com/its-danny/use-lilius , I think we can build a daisyUI-exentention with headless:
table: react-table
select: downshift
date-picker: use-lilius
toast: react-hot-toast

[rikgirbes]

@tonyYo00 not really that headless though..

Also would be React-only.

And uses date-fns in the background, and popperjs for floating.

I made a Vanilla-Ts version, that uses Datefns also, and floating-ui for the floating functionality (which is a treeshakeable version of popper you could say)

I think that would more fit daisyui as it can be injected in all frameworks (e.g. react/vue/svelte etc), or just in vanilla js/ts.

I haven't found the time yet to make a release-able package, although the code is done and functional. (apart from some small refactoring maybe)

[rikgirbes]

Also toast are now in DaisyUI (atleast the styles for it), making a js lib for handling toast is easy enough, no need to only support react.

[ThatXliner]

I haven't found the time yet to make a release-able package, although the code is done and functional. (apart from some small refactoring maybe)

I'm eager to try it. Publishing a GitHub repo is a good start.

Also, this issue should be made into a discussion

[saadeghi]

I moved this issue to discussions. thank you

[tonyYo00]

We say extention or plugin is to target some specific areas, if the scope and daisy exactly the same, then why daisy not directly implement it? If some components have some complex state logic, in order to adapt to all the framework, I worry that it is not conducive to style modification

[saadeghi]

daisyUI only provides the UI design, not functionality.
I wish there was a way to apply design decisions to browser's native date picker input but it's not possible. Therefore, there are JS packages to simulate the date picker functionality using divs and buttons.

[wuarmin]

In my opinion it is the only right decision to let daisyUI be a pure design framework.

[rikgirbes]

Yeah well, all styles for the date-picker are written in .scss using the tailwind @apply functionality.
E.g. uses all the available daisyUI classes (btn / bg / etc.)

Thats why it goes along with the Themes daisyUI provides.

If @saadeghi would allow JS etc in the daisyui framework, it would get bloated, and not easily maintainable.
Thus the idea with Plugins is probably the best way to go.
Keep daisyUI design only; use plugins for functionality but using the daisyUI classes etc.

Although it might be a good idea to write some doc/guidelines/rules for how plugins should be made.
E.g.: vanilla only, using only tailwind/daisyUI classes, not interfering with other basic styling, etc etc.

[rikgirbes]

For reference, this is current (un-refactored) scss:

@layer components {
    .datepicker,
    .datepicker-from,
    .datepicker-to {
        &.dp {
            @apply hidden z-10 bg-base-200 p-2 shadow text-base-content absolute top-0 left-0;
            border-radius: var(--rounded-box);
            [data-dp-arrow] {
                @apply absolute bg-inherit rotate-45 w-2 h-2;
            }
            .datepicker-header {
                @apply flex gap-1 border-b border-base-300 pb-1 mb-1;
                > div {
                    @apply flex-1 flex items-center justify-center;
                }
                > button {
                    @apply btn btn-sm btn-ghost;
                }
            }
            .datepicker-week-days {
                @apply grid grid-cols-7 border-b border-base-300 pb-1 mb-1;
                > div {
                    @apply text-center font-bold text-xs;
                }
            }
            .datepicker-days {
                @apply grid grid-cols-7;
                .datepicker-day {
                    @apply btn btn-xs btn-ghost;
                    &.datepicker-day-other-month {
                        @apply opacity-60;
                    }
                    &.datepicker-day-disabled {
                        @apply opacity-60 bg-transparent;
                    }
                    &.datepicker-day-selected {
                        @apply btn-primary;
                    }
                    &.datepicker-day-today:not(.datepicker-day-selected) {
                        @apply text-accent;
                    }
                }
            }
        }
        &[data-open] {
            &.dp {
                @apply block;
            }
        }
    }
}

[tonyYo00]

I also think daisyUI should be a pure design framework, JS should in Plugins is the best way to go (vanilla only, using only tailwind/daisyUI classes, not interfering with other basic styling). We need to make plugins have components that enable more out-of-the-box use.For now, in order to adapt the theme of daisyUI, I need to make additional changes to components like select ,Table,Tree,Cascader, etc. (because the logic of these components is more complex, I refer to some other libraries such as, react-table, react-select,rc-tree..), I agree with @rikgirbes 's point that we need to set a doc/guidelines/rules for plugins.
In the rules of the plugin, these are the questions we need to think about: when to allow separate support for a particular framework(like react/vue..). Whether to allow the same different implementation, but similar component of the plugins (because the plugin can contain JS).

[ThatXliner]

Plugins are a good idea. I'd like them to be vanilla JS please (so I can easily adapt them in a framework like Svelte)

[tonyYo00]

vanillajs is the best, but if you want to use vanillajs for more complex components, you may not be able to rely on other communities. Or the plugin must be vanilla-js and other framework-specific for future use as extention.

[rikgirbes]

Maybe we should open a new discussion regarding the guidelines for plugins, as this discussion is really only for the Datepicker Component/Plugin. (Created: #1014)

Yes vanillajs/ts is definitely the best choice I'd think here.

Whether to "allow" framework-specific plugins? Well.. Nobody will stop anyone from doing so! 😄
But they wouldn't follow the guidelines, thus would not be in the documentation listed as a plugin (what do you think @saadeghi)

I'd say the best approach would be to write the plugin in vanilla, and write custom wrappers for special framework support.
(optional though)

As this would continue to follow the spirit and ways of DaisyUI 👍🏽

[rikgirbes]

Created #1014 for further discussion and creation of plugin-guidelines 😊

[boxcc]

I try rc-select/rc-picker + daisyUI

[saadeghi]

Good news 🤫

daisyUI 5 (coming next month) will include styles for 3 calendar libraries:

• Cally (Web component - works everywhere) https://wicky.nillia.ms/cally/
• DayPicker (React) https://daypicker.dev/
• Pikaday (JS - Works everywhere) https://pikaday.com/

All styles are ready to use which means you can just add the JS file and daisyUI will do the styling.

It's available in the alpha version.
The changelogs and examples will be on https://v5.daisyui.com in 1~2 weeks.

[rsessine]

Amazing news, a long-expected feature, thank you!