docs: move examples to subdirectory

react-day-picker.code-workspace

@@ -33,9 +33,9 @@
     "search.exclude": {
       "**/node_modules": true,
       "**/bower_components": true,
-      "**/*.code-search": true,
-      "**/versioned_docs": true,
-      "**/examples/**/*": true
+      "**/*.code-search": true
+      // "**/versioned_docs": true,
+      // "**/examples/**/*": true
     }
   }
 }

website/examples-v8/Range.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+import { format } from "date-fns";
+
+import { DateRange, DayPicker } from "./react-day-picker-v8";
+
+export function Range() {
+  const [range, setRange] = useState<DateRange | undefined>();
+
+  let footer = <p>Please pick the first day.</p>;
+  if (range?.from) {
+    if (!range.to) {
+      footer = <p>{format(range.from, "PPP")}</p>;
+    } else if (range.to) {
+      footer = (
+        <p>
+          {format(range.from, "PPP")}–{format(range.to, "PPP")}
+        </p>
+      );
+    }
+  }
+
+  return (
+    <DayPicker
+      defaultMonth={new Date(2022, 8)}
+      mode="range"
+      selected={range}
+      onSelect={setRange}
+      footer={footer}
+    />
+  );
+}

website/examples-v8/index.ts

@@ -0,0 +1,55 @@
+export * from "./Controlled";
+export * from "./CssVariables";
+export * from "./CustomCaption";
+export * from "./CustomDayContent";
+export * from "./CustomMultiple";
+export * from "./CustomSingle";
+export * from "./CustomWeek";
+export * from "./DefaultMonth";
+export * from "./Dialog";
+export * from "./DisableNavigation";
+export * from "./Disabled";
+export * from "./Dropdown";
+export * from "./DropdownMultipleMonths";
+export * from "./Fixedweeks";
+export * from "./Formatters";
+export * from "./FromToMonth";
+export * from "./FromToYear";
+export * from "./HideNavigation";
+export * from "./Input";
+export * from "./InputRange";
+export * from "./InputTime";
+export * from "./Keyboard";
+export * from "./ModifiersClassnames";
+export * from "./ModifiersCustom";
+export * from "./ModifiersDisabled";
+export * from "./ModifiersHidden";
+export * from "./ModifiersSelected";
+export * from "./ModifiersStyle";
+export * from "./ModifiersToday";
+export * from "./Multiple";
+export * from "./MultipleMinMax";
+export * from "./MultipleMonths";
+export * from "./MultipleMonthsId";
+export * from "./MultipleMonthsPaged";
+export * from "./None";
+export * from "./NumberingSystem";
+export * from "./OutsideDays";
+export * from "./Range";
+export * from "./RangeMinMax";
+export * from "./RangeShiftKey";
+export * from "./Rtl";
+export * from "./Single";
+export * from "./SingleRequired";
+export * from "./Spanish";
+export * from "./SpanishWeekStartsOn";
+export * from "./Start";
+export * from "./StylingCss";
+export * from "./StylingCssModules";
+export * from "./StylingInline";
+export * from "./StylingModifiers";
+export * from "./WeekIso";
+export * from "./Weeknumber";
+export * from "./WeeknumberCustom";
+export * from "./WeeknumberIso";
+export * from "./react-day-picker-v8";

website/src/theme/MDXComponents.ts

@@ -2,7 +2,7 @@
 import MDXComponents from "@theme-original/MDXComponents";
 import * as Examples from "react-day-picker/examples";
 
-import * as ExamplesV8 from "../../../examples";
+import * as ExamplesV8 from "../../examples-v8";
 import { BrowserWindow } from "../components/BrowserWindow";
 
 export default {

website/tsconfig.json

@@ -12,5 +12,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "examples"]
+  "include": ["src", "examples-v8"]
 }