refactor(docs): time-input dx

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

@@ -0,0 +1,26 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2024-04-08T18:45:22Z"),
+  );
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}

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

@@ -1,63 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (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/time-input/disabled.raw.jsx

@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput isDisabled defaultValue={new Time(11, 45)} label="Event Time" />;
+}

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

@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isDisabled 
-      label="Event Time" 
-      defaultValue={new Time(11, 45)} 
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/time-input/end-content.raw.jsx

@@ -0,0 +1,35 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export const ClockCircleLinearIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={new Time(11, 45)}
+      endContent={
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      }
+      label="Event Time"
+      labelPlacement="outside"
+    />
+  );
+}

apps/docs/content/components/time-input/end-content.ts

@@ -1,41 +1,7 @@
-const ClockCircleLinearIcon = `export const ClockCircleLinearIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {TimeInput} from "@nextui-org/react";
-import {ClockCircleLinearIcon} from './ClockCircleLinearIcon';
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time" 
-      labelPlacement="outside" 
-      defaultValue={new Time(11, 45)} 
-      endContent={(
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-      )}
-    />
-  );
-}`;
+import App from "./end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ClockCircleLinearIcon.jsx": ClockCircleLinearIcon,
 };
 
 export default {

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

@@ -0,0 +1,15 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput
+      isInvalid
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter a valid time";
+        }
+      }}
+      label="Event Time"
+    />
+  );
+}

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

@@ -1,18 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter a valid time";
-        }
-      }}
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput isInvalid errorMessage="Please enter a valid time" label="Event Time" />;
+}

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

@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage="Please enter a valid time"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,14 @@
+import {TimeInput} from "@nextui-org/react";
+import {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">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}

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

@@ -1,39 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, 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">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {Time, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </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/time-input/hide-timezone.raw.jsx

@@ -0,0 +1,12 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <TimeInput
+      hideTimeZone
+      defaultValue={parseZonedDateTime("2022-11-07T10:45[America/Los_Angeles]")}
+      label="Meeting time"
+    />
+  );
+}