refactor(docs): date input dx (#4100)

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

@@ -0,0 +1,20 @@
+import {DateInput} 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="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import {DateInput} 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="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -1,50 +1,15 @@
-const App = `import {DateInput} 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="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} 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="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </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-input/description.raw.jsx

@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        description={"This is my birth date."}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}

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

@@ -1,17 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isDisabled
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}

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

@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isDisabled
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,22 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}

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

@@ -1,25 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,18 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage="Please enter a valid date."
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}

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

@@ -1,21 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-        isInvalid
-        errorMessage="Please enter a valid date."
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,19 @@
+import {DateInput} 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">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import {DateInput} 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">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}

apps/docs/content/components/date-input/granularity.ts

@@ -1,60 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-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">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-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">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };

apps/docs/content/components/date-input/hide-timezone.raw.jsx

@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateInput
+        hideTimeZone
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label="Appointment time"
+      />
+    </div>
+  );
+}