Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(docs): date input dx #4100

Merged
merged 1 commit into from
Nov 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions apps/docs/content/components/date-input/controlled.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
21 changes: 21 additions & 0 deletions apps/docs/content/components/date-input/controlled.raw.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
47 changes: 6 additions & 41 deletions apps/docs/content/components/date-input/controlled.ts
Original file line number Diff line number Diff line change
@@ -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,
};
14 changes: 14 additions & 0 deletions apps/docs/content/components/date-input/description.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
15 changes: 1 addition & 14 deletions apps/docs/content/components/date-input/description.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
15 changes: 15 additions & 0 deletions apps/docs/content/components/date-input/disabled.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
16 changes: 1 addition & 15 deletions apps/docs/content/components/date-input/disabled.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
18 changes: 18 additions & 0 deletions apps/docs/content/components/date-input/error-message.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
19 changes: 1 addition & 18 deletions apps/docs/content/components/date-input/error-message.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
19 changes: 19 additions & 0 deletions apps/docs/content/components/date-input/granularity.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
20 changes: 20 additions & 0 deletions apps/docs/content/components/date-input/granularity.raw.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
57 changes: 6 additions & 51 deletions apps/docs/content/components/date-input/granularity.ts
Original file line number Diff line number Diff line change
@@ -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,
};
14 changes: 14 additions & 0 deletions apps/docs/content/components/date-input/hide-timezone.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading