refactor(docs): date-range-picker dx

apps/docs/content/components/date-range-picker/controlled.raw.jsx

@@ -0,0 +1,36 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}

apps/docs/content/components/date-range-picker/controlled.raw.tsx

@@ -0,0 +1,40 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<RangeValue<DateValue>>({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}

apps/docs/content/components/date-range-picker/controlled.ts

@@ -1,86 +1,5 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-import {RangeValue} from "@react-types/shared";
-import {DateValue} from "@react-types/datepicker";
-
-export default function App() {
-  const [value, setValue] = React.useState<RangeValue<DateValue>>({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-range-picker/custom-styles.raw.jsx

@@ -0,0 +1,33 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      calendarProps={{
+        classNames: {
+          base: "bg-background",
+          headerWrapper: "pt-4 bg-background",
+          prevButton: "border-1 border-default-200 rounded-small",
+          nextButton: "border-1 border-default-200 rounded-small",
+          gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+          cellButton: [
+            "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+            // start (pseudo)
+            "data-[range-start=true]:before:rounded-l-small",
+            "data-[selection-start=true]:before:rounded-l-small",
+            // end (pseudo)
+            "data-[range-end=true]:before:rounded-r-small",
+            "data-[selection-end=true]:before:rounded-r-small",
+            // start (selected)
+            "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+            // end (selected)
+            "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+          ],
+        },
+      }}
+      className="max-w-xs"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}

apps/docs/content/components/date-range-picker/custom-styles.ts

@@ -1,36 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-        calendarProps={{
-          classNames: {
-            base: "bg-background",
-            headerWrapper: "pt-4 bg-background",
-            prevButton: "border-1 border-default-200 rounded-small",
-            nextButton: "border-1 border-default-200 rounded-small",
-            gridHeader: "bg-background shadow-none border-b-1 border-default-100",
-            cellButton: [
-              "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
-              // start (pseudo)
-              "data-[range-start=true]:before:rounded-l-small",
-              "data-[selection-start=true]:before:rounded-l-small",
-              // end (pseudo)
-              "data-[range-end=true]:before:rounded-r-small",
-              "data-[selection-end=true]:before:rounded-r-small",
-              // start (selected)
-              "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
-              // end (selected)
-              "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
-            ],
-          },
-      }}
-      className="max-w-xs"
-      label="Stay duration"
-      variant="bordered"
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-range-picker/description.raw.jsx

@@ -0,0 +1,11 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      className="max-w-xs"
+      description="Please enter your stay duration"
+      label="Stay duration"
+    />
+  );
+}

apps/docs/content/components/date-range-picker/description.ts

@@ -1,14 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-      label="Stay duration"
-      description="Please enter your stay duration"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-range-picker/disabled.raw.jsx

@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isDisabled
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}

apps/docs/content/components/date-range-picker/disabled.ts

@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isDisabled
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-range-picker/error-message-function.raw.jsx

@@ -0,0 +1,22 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter your stay duration";
+        }
+      }}
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}

apps/docs/content/components/date-range-picker/error-message-function.ts

@@ -1,25 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter your stay duration";
-        }
-      }}
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-range-picker/error-message.raw.jsx

@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage="Please enter your stay duration"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}

apps/docs/content/components/date-range-picker/error-message.ts

@@ -1,21 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage="Please enter your stay duration"
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,