refactor(docs): date-picker dx

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

@@ -0,0 +1,30 @@
+import {DatePicker} 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(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DatePicker
+          className="max-w-[284px]"
+          label="Date (controlled)"
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+      <DatePicker
+        className="max-w-[284px]"
+        defaultValue={parseDate("2024-04-04")}
+        label="Date (uncontrolled)"
+      />
+    </div>
+  );
+}

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

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

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

@@ -1,52 +1,15 @@
-const App = `import {DatePicker} 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(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };

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

@@ -0,0 +1,13 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        className="max-w-[284px]"
+        description={"This is my birth date."}
+        label="Birth date"
+      />
+    </div>
+  );
+}

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

@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        description={"This is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isDisabled className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}

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

@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isDisabled
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,18 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label="Birth date"
+      />
+    </div>
+  );
+}

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

@@ -1,21 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,14 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage="Please enter a valid date."
+        label="Birth date"
+      />
+    </div>
+  );
+}

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

@@ -1,17 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage="Please enter a valid date."
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/date-picker/granularity.raw.jsx

@@ -0,0 +1,32 @@
+import {DatePicker} from "@nextui-org/react";
+import {now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}

apps/docs/content/components/date-picker/granularity.raw.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}

apps/docs/content/components/date-picker/international-calendar.raw.jsx

@@ -0,0 +1,22 @@
+import {DatePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}

apps/docs/content/components/date-picker/international-calendar.raw.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}