jolbol1/jolly-ui

getting error with date range picker

newbeelearn opened this issue · 4 comments

  • error ./components/jolly-ui/date-picker.tsx:18:0
    Module not found: Can't resolve '@/registry/default/ui/button'
    16 |
    17 | import { cn } from "@/lib/utils"

18 | import { Button } from "@/registry/default/ui/button"
19 | import { Popover } from "@/registry/default/ui/popover"

i have installed jollyui in /components/jolly-ui folder and all the jolly-ui components are here
shadcn components are in /components/ui folder.

what is this @/registry/default ? referring to shadcn dependency or jollyui dependency?
also there are other dependencies like date-fns these were not installed when installing the component with sly is this expected?

Hi, Those are other components that need to be installed. The imports need to be changed to the directory you would install those components in.

I need to look in to if there is a way to fix this using the CLI, as I'm not sure there is at the moment unless I go with a custom solution.

If I cant find a way I will try to add better documentation. Date-fns should be installed and is missing from the registry so will fix that. Cheers for the report.

Thanks for responding i have few more suggestions for improvement, please think about them as well.
i think since we are using react-aria it would be better to use https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html instead of date-fns it will also avoid unnecessary dependency since we are already installing react-aria.
Also i had to remove fixed px and modify the component just to override the size of datebutton , if fixed sizes are not used it would improve the reusability of components.

I see what you mean on the button sizing, will look at modifying that behaviour.

In terms of removing date-fns, I left it this way as its the only way to get the date format the same as shadcn/ui, the closest DateFormatter can get you is June 6, 2024, so without the suffixes (th, st) etc.

All that being said however, I am planning on redoing the date picker component a bit to better support react-arias features. This will mean instead of being a button it will offer an input as well. This in my opinion is a better UX. I will plan on providing shadcn clone code examples though.

All that being said however, I am planning on redoing the date picker component a bit to better support react-arias features

that would be great
Right now i have moved date related formatting out of component as i need different formatting i.e. if its same year than year need not be depicted like jun 1-jun 18, etc. these are specific to application in hand. This is just one data point but my guess is other users would also have similar needs may be have an option to override these when you are redoing it.