update shadcn components, calendar

update nextjs 15
2025-03-04 20:27:55 +01:00 · 2025-03-04 19:23:38 +01:00
5 changed files with 1159 additions and 907 deletions
--- a/app/sign-up-form.tsx
+++ b/app/sign-up-form.tsx
@ -5,7 +5,15 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";

 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
@ -14,6 +22,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { signupFormSubmit } from "@/lib/actions";
 import { useState } from "react";
+import { before } from "node:test";

 export const signupFormSchema = z.object({
  name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
@ -51,7 +60,9 @@ export default function SignUp() {
                <FormControl>
                  <Input placeholder="name@example.com" {...field} />
                </FormControl>
-                <FormDescription>We will contact you here with information about events.</FormDescription>
+                <FormDescription>
+                  We will contact you here with information about events.
+                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
@ -81,7 +92,10 @@ export default function SignUp() {
                    <FormControl>
                      <Button
                        variant={"outline"}
-                        className={cn("w-[240px] pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                        className={cn(
+                          "w-[240px] pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground"
+                        )}
                      >
                        {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
@ -95,11 +109,12 @@ export default function SignUp() {
                      showOutsideDays={false}
                      selected={field.value}
                      onSelect={field.onChange}
-                      disabled={(date) => date > youngestDate}
                      defaultMonth={field.value}
-                      fromDate={oldestDate}
-                      toDate={youngestDate}
+                      startMonth={oldestDate}
+                      endMonth={youngestDate}
+                      disabled={[{ before: oldestDate }, { after: youngestDate }]}
                      captionLayout="dropdown"
+                      hideNavigation
                    />
                  </PopoverContent>
                </Popover>
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@ -2,7 +2,7 @@

 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { ChevronProps, DayPicker, DropdownProps } from "react-day-picker";

 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
@ -16,6 +16,41 @@ import {

 export type CalendarProps = React.ComponentProps<typeof DayPicker>;

+export function CustomChevron(props: ChevronProps) {
+  if (props.orientation === "left") {
+    return <ChevronLeft className="h-4 w-4" {...props} />;
+  }
+  return <ChevronRight className="h-4 w-4" {...props} />;
+}
+
+export function CustomSelectDropdown(props: DropdownProps) {
+  const { options, value, onChange } = props;
+
+  const handleChange = (value: string) => {
+    if (onChange) {
+      const changeEvent = {
+        target: { value: value },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      onChange(changeEvent);
+    }
+  };
+
+  return (
+    <Select value={value?.toString()} onValueChange={handleChange}>
+      <SelectTrigger className="inline-flex w-2/5 mx-2 mt-2">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent position="popper">
+        {options?.map((option) => (
+          <SelectItem key={option.value} value={option.value.toString()} disabled={option.disabled}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
@ -24,67 +59,40 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
-        caption: "flex flex-col justify-center pt-1 relative items-stretch space-x-4 w-full",
+        month_caption: "flex flex-col justify-center pt-1 relative items-stretch space-x-4 w-full",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        button_previous: cn(
          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1"
        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50  first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative rounded-md font-normal text-[0.8rem] [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50  first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day_button: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
-        day_range_end: "day-range-end",
-        day_selected:
+        range_end: "day-range-end",
+        selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
+        today: "bg-accent text-accent-foreground",
+        outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        hidden: "invisible",
        ...classNames,
      }}
      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-        Dropdown: ({ children, value, onChange, ...props }) => {
-          const options = React.Children.toArray(children) as React.ReactElement<
-            React.HTMLProps<HTMLOptionElement>
-          >[];
-          const selected = options.find((child) => child.props.value === value);
-          const handleChange = (value: string) => {
-            const changeEvent = {
-              target: { value },
-            } as React.ChangeEvent<HTMLSelectElement>;
-            onChange?.(changeEvent);
-          };
-          return (
-            <Select value={value?.toString()} onValueChange={(v) => handleChange(v)}>
-              <SelectTrigger className="inline-flex w-2/5 mx-2 mt-2">
-                <SelectValue>{selected?.props?.children}</SelectValue>
-              </SelectTrigger>
-              <SelectContent position="popper">
-                {options?.map((option, id: number) => (
-                  <SelectItem
-                    key={`${option.props.value}-${id}`}
-                    value={option.props.value?.toString() ?? ""}
-                  >
-                    {option.props.children}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          );
-        },
+        Chevron: CustomChevron,
+        Dropdown: CustomSelectDropdown,
      }}
      {...props}
    />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,45 +3,49 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
    "autoprefixer": "^10.4.19",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cssnano": "^7.0.1",
    "date-fns": "^3.6.0",
    "lucide-react": "^0.452.0",
-    "next": "14.2.15",
+    "next": "15.2.1",
    "next-plausible": "^3.12.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^10.0.0",
-    "react": "^18",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^18",
-    "react-hook-form": "^7.53.0",
+    "react": "19.0.0",
+    "react-day-picker": "^9.5.1",
+    "react-dom": "19.0.0",
+    "react-hook-form": "^7.54.2",
    "sharp": "^0.33.4",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
    "eslint": "8.57.1",
-    "eslint-config-next": "14.2.15",
+    "eslint-config-next": "15.2.1",
    "postcss": "8.4.47",
    "tailwindcss": "3.4.13",
    "turbo": "2.1.3",
    "typescript": "5.6.3"
+  },
+  "overrides": {
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4"
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,7 +19,8 @@
    ],
    "paths": {
      "@/*": ["./*"]
-    }
+    },
+    "target": "ES2023"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
Author	SHA1	Message	Date
Felix Schulze	27c012f589	update shadcn components, calendar All checks were successful Lint / Lint (push) Successful in 45s Details	2025-03-04 20:27:55 +01:00
Felix Schulze	5274b2e1c2	update nextjs 15	2025-03-04 19:23:38 +01:00