fix: set locale on demos

Author: feelixe

apps/www/src/components/demos.tsx

@@ -0,0 +1,45 @@
+import { Calendar } from "./ui/calendar.tsx";
+import "dayjs/locale/en-gb.js";
+import { MultiViewCalendar } from "./ui/calendar-multi-view.tsx";
+import { DatePicker } from "./ui/date-picker.tsx";
+import { CalendarStartEndSeparate } from "./ui/calendar-start-end-separate.tsx";
+
+export function DemoCalendar() {
+  return (
+    <Calendar
+      mode="single"
+      locale="en-gb"
+      className="grow rounded-md border border-border"
+    />
+  );
+}
+
+export function DemoDatePicker() {
+  return (
+    <DatePicker
+      mode="single"
+      locale="en-gb"
+      className="grow rounded-md border border-border"
+    />
+  );
+}
+
+export function DemoMultiView() {
+  return (
+    <MultiViewCalendar
+      locale="en-gb"
+      mode="range"
+      className="grow rounded-md border border-border"
+    />
+  );
+}
+
+export function DemoSeparateViews() {
+  return (
+    <CalendarStartEndSeparate
+      locale="en-gb"
+      mode="range"
+      className="grow rounded-md border border-border"
+    />
+  );
+}

apps/www/src/components/ui/calendar-start-end-separate.tsx

@@ -1,38 +1,35 @@
 "use client";
 
 import { cn } from "@/lib/utils.ts";
+import dayjs from "dayjs";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import * as CalendarPrimitive from "react-composable-calendar";
-import {
-  selectStartDateStrategy,
-  selectEndDateStrategy,
-} from "react-composable-calendar/select-day-strategy";
+import { changeAtIndexStrategy } from "react-composable-calendar/select-day-strategy";
 import { Button } from "./button.tsx";
 
-import dayjs from "dayjs";
-import "dayjs/locale/en-gb";
-
-dayjs.locale("en-gb");
-
-export type CalendarProps = CalendarPrimitive.RootProps;
-
 export function range(length: number) {
   return [...new Array(length)].map((_, i) => i);
 }
 
-export function CalendarStartEndSeparate(props: CalendarProps) {
+export function CalendarStartEndSeparate(props: CalendarPrimitive.RootProps) {
   const { className, ...rest } = props;
 
   return (
     <CalendarPrimitive.Root className={cn("max-w-lg p-3", className)} {...rest}>
       <div className="mb-2 flex items-center justify-end gap-2">
         <div className="grow" />
-        <CalendarPrimitive.ValueLabel className="text-muted-foreground text-sm " />
+        <CalendarPrimitive.ValueLabel
+          fallback="No date selected"
+          className="text-muted-foreground text-sm "
+        />
       </div>
 
       <div className="grid grid-cols-2 gap-6">
         {range(2).map((index) => (
-          <CalendarPrimitive.View key={index}>
+          <CalendarPrimitive.View
+            defaultValue={dayjs().add(index, "month")}
+            key={index}
+          >
             <div className="mb-4 flex items-center justify-between">
               <CalendarPrimitive.OffsetViewButton asChild offset={-1}>
                 <Button size="icon" variant="outline" className="size-8">
@@ -52,9 +49,7 @@ export function CalendarStartEndSeparate(props: CalendarProps) {
 
             <CalendarPrimitive.Days className="mb-1 grid grid-cols-7 gap-y-1">
               <CalendarPrimitive.Day
-                selectDayStrategy={
-                  index === 0 ? selectStartDateStrategy : selectEndDateStrategy
-                }
+                selectDayStrategy={changeAtIndexStrategy(index)}
                 className="group relative aspect-square w-full cursor-pointer data-[neighboring]:invisible"
               >
                 <CalendarPrimitive.DayInRange className="absolute top-0 right-0 bottom-0 left-0 bg-foreground/10 data-end:rounded-r-lg data-start:rounded-l-lg" />

apps/www/src/docs/separate-views.mdx

@@ -0,0 +1,13 @@
+import { CodeBlock } from "@/components/ui/code-block.tsx"
+import { ExternalLink } from "@/components/ui/external-link"
+import { markdownComponents } from "@/components/markdown/components"
+import { separateViews } from "@/examples/code-examples.ts";
+
+export const components = markdownComponents;
+
+## Installation
+* Setup <ExternalLink text="shadcn/ui" href="https://ui.shadcn.com/docs/installation" />.
+* Add <ExternalLink text="Button" href="https://ui.shadcn.com/docs/components/button" />.
+* Copy paste this code block into `src/components/ui/calendar.tsx`.
+
+<CodeBlock client:load code={separateViews} />

apps/www/src/pages/index.astro

@@ -1,8 +1,9 @@
 ---
 import { ExternalLink } from "@/components/ui/external-link.tsx";
-import * as MultipleViewsDocs from "@/docs/multiple-views.mdx";
 import * as BasicCalendarDocs from "@/docs/basic-calendar.mdx";
 import * as DatePickerDocs from "@/docs/date-picker.mdx";
+import * as MultipleViewsDocs from "@/docs/multiple-views.mdx";
+import * as SeparateViewsDocs from "@/docs/separate-views.mdx";
 import * as codeExamples from "@/examples/code-examples.ts";
 import {
   ExampleSection,
@@ -18,6 +19,7 @@ import { Container } from "../components/ui/container.tsx";
 import { DatePicker } from "../components/ui/date-picker.tsx";
 import { Typography } from "../components/ui/typography.tsx";
 import Layout from "../layouts/Layout.astro";
+import * as Demos from "@/components/demos.tsx";
 ---
 
 <Layout>
@@ -80,11 +82,7 @@ import Layout from "../layouts/Layout.astro";
       description="A simple calendar that accepts a single date or a range."
     >
       <ExampleSectionPreview>
-        <Calendar
-          mode="single"
-          className="grow border border-border rounded-md"
-          client:load
-        />
+        <Demos.DemoCalendar client:load />
       </ExampleSectionPreview>
       <ExampleSectionCode>
         <BasicCalendarDocs.Content />
@@ -98,7 +96,7 @@ import Layout from "../layouts/Layout.astro";
       description="A Date Picker input that utilizes shadcn/ui's Button and Popover."
     >
       <ExampleSectionPreview>
-        <DatePicker mode="single" client:load />
+        <Demos.DemoDatePicker client:load />
       </ExampleSectionPreview>
       <ExampleSectionCode>
         <DatePickerDocs.Content />
@@ -112,11 +110,7 @@ import Layout from "../layouts/Layout.astro";
       description="You can have multiple views under the same calendar root."
     >
       <ExampleSectionPreview>
-        <MultiViewCalendar
-          mode="range"
-          className="grow border border-border rounded-md"
-          client:load
-        />
+        <Demos.DemoMultiView client:load />
       </ExampleSectionPreview>
       <ExampleSectionCode>
         <MultipleViewsDocs.Content />
@@ -130,14 +124,10 @@ import Layout from "../layouts/Layout.astro";
       description="You can even have two views that work independently of each other."
     >
       <ExampleSectionPreview>
-        <CalendarStartEndSeparate
-          mode="range"
-          className="grow border border-border rounded-md"
-          client:load
-        />
+        <Demos.DemoSeparateViews client:load />
       </ExampleSectionPreview>
       <ExampleSectionCode>
-        <CodeBlock code={codeExamples.datePicker} />
+        <SeparateViewsDocs.Content />
       </ExampleSectionCode>
     </ExampleSection>
   </div>

packages/react-composable-calendar/src/select-day-strategy.ts

@@ -38,6 +38,20 @@ export const closestStrategy: SelectDayStrategy = (args) => {
   return [currentValue[0], clickedDate];
 };
 
+export function changeAtIndexStrategy(index: number): SelectDayStrategy {
+  return (args: SelectDayStrategyParams) => {
+    const { currentValue, clickedDate, mode } = args;
+    if (mode === "single") {
+      return [clickedDate, null];
+    }
+    const [start, end] = currentValue;
+    if (index === 0) {
+      return [clickedDate, end];
+    }
+    return [start, clickedDate];
+  };
+}
+
 export const selectStartDateStrategy: SelectDayStrategy = (args) => {
   const { currentValue, clickedDate } = args;
   const [, endDate] = currentValue;