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.

Sign up for GitHub

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): calendar dx #4022

Merged
merged 2 commits into from
Nov 13, 2024
Merged

refactor(docs): calendar dx #4022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
617ce8e
refactor(docs): calendar dx
wingkwong Nov 10, 2024
03abdbd
fix(docs): incorrect import path
wingkwong Nov 10, 2024
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
16 changes: 16 additions & 0 deletions apps/docs/content/components/calendar/controlled-focused-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
let defaultDate = today(getLocalTimeZone());
let [focusedDate, setFocusedDate] = React.useState(defaultDate);

return (
<Calendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
value={defaultDate}
onFocusChange={setFocusedDate}
/>
);
}
19 changes: 19 additions & 0 deletions apps/docs/content/components/calendar/controlled-focused-value.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type {DateValue} from "@react-types/calendar";

import React from "react";
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
let defaultDate = today(getLocalTimeZone());
let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);

return (
<Calendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
value={defaultDate}
onFocusChange={setFocusedDate}
/>
);
}
40 changes: 6 additions & 34 deletions apps/docs/content/components/calendar/controlled-focused-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,15 @@
const App = `import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
let defaultDate = today(getLocalTimeZone());
let [focusedDate, setFocusedDate] = React.useState(defaultDate);

return (
<Calendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
value={defaultDate}
onFocusChange={setFocusedDate}
/>
);
}`;

const AppTs = `import {Calendar} from "@nextui-org/react";
import type {DateValue} from "@react-types/calendar";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
let defaultDate = today(getLocalTimeZone());
let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);

return (
<Calendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
value={defaultDate}
onFocusChange={setFocusedDate}
/>
);
}`;
import App from "./controlled-focused-value.raw.jsx?raw";
import AppTs from "./controlled-focused-value.raw.tsx?raw";

const react = {
"/App.jsx": App,
};

const reactTs = {
"/App.tsx": AppTs,
};

export default {
...react,
...reactTs,
};
8 changes: 8 additions & 0 deletions apps/docs/content/components/calendar/controlled.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {Calendar} from "@nextui-org/react";
import {parseDate} from "@internationalized/date";

export default function App() {
let [value, setValue] = React.useState(parseDate("2024-03-07"));

return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
}
11 changes: 11 additions & 0 deletions apps/docs/content/components/calendar/controlled.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type {DateValue} from "@react-types/calendar";

import React from "react";
import {Calendar} from "@nextui-org/react";
import {parseDate} from "@internationalized/date";

export default function App() {
let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));

return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
}
36 changes: 6 additions & 30 deletions apps/docs/content/components/calendar/controlled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,15 @@
const App = `import {Calendar} from "@nextui-org/react";
import {parseDate} from "@internationalized/date";

export default function App() {
let [value, setValue] = React.useState(parseDate("2024-03-07"));

return (
<Calendar
aria-label="Date (Controlled)"
value={value}
onChange={setValue}
/>
);
}`;

const AppTs = `import {Calendar} from "@nextui-org/react";
import type {DateValue} from "@react-types/calendar";
import {parseDate} from "@internationalized/date";

export default function App() {
let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));

return (
<Calendar
aria-label="Date (Controlled)"
value={value}
onChange={setValue}
/>
);
}`;
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,
};
5 changes: 5 additions & 0 deletions apps/docs/content/components/calendar/disabled.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {Calendar} from "@nextui-org/react";

export default function App() {
return <Calendar isDisabled aria-label="Date (Disabled)" />;
}
8 changes: 1 addition & 7 deletions apps/docs/content/components/calendar/disabled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
const App = `import {Calendar} from "@nextui-org/react";

export default function App() {
return (
<Calendar aria-label="Date (Disabled)" isDisabled />
);
}`;
import App from "./disabled.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
10 changes: 10 additions & 0 deletions apps/docs/content/components/calendar/international-calendars.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {Calendar} from "@nextui-org/react";
import {I18nProvider} from "@react-aria/i18n";

export default function App() {
return (
<I18nProvider locale="zh-CN-u-ca-chinese">
<Calendar aria-label="Date (International Calendar)" />
</I18nProvider>
);
}
11 changes: 1 addition & 10 deletions apps/docs/content/components/calendar/international-calendars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
const App = `import {Calendar} from "@nextui-org/react";
import {I18nProvider} from "@react-aria/i18n";

export default function App() {
return (
<I18nProvider locale="zh-CN-u-ca-chinese">
<Calendar aria-label="Date (International Calendar)" />
</I18nProvider>
);
}`;
import App from "./international-calendars.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
19 changes: 19 additions & 0 deletions apps/docs/content/components/calendar/invalid-date.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";

export default function App() {
let [date, setDate] = React.useState(today(getLocalTimeZone()));
let {locale} = useLocale();
let isInvalid = isWeekend(date, locale);

return (
<Calendar
aria-label="Date (Invalid on weekends)"
errorMessage={isInvalid ? "We are closed on weekends" : undefined}
isInvalid={isInvalid}
value={date}
onChange={setDate}
/>
);
}
22 changes: 22 additions & 0 deletions apps/docs/content/components/calendar/invalid-date.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type {DateValue} from "@react-types/calendar";

import React from "react";
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";

export default function App() {
let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
let {locale} = useLocale();
let isInvalid = isWeekend(date, locale);

return (
<Calendar
aria-label="Date (Invalid on weekends)"
errorMessage={isInvalid ? "We are closed on weekends" : undefined}
isInvalid={isInvalid}
value={date}
onChange={setDate}
/>
);
}
48 changes: 6 additions & 42 deletions apps/docs/content/components/calendar/invalid-date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,15 @@
const App = `import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";


export default function App() {
let [date, setDate] = React.useState(today(getLocalTimeZone()));
let {locale} = useLocale();
let isInvalid = isWeekend(date, locale);

return (
<Calendar
aria-label="Date (Invalid on weekends)"
errorMessage={isInvalid ? "We are closed on weekends" : undefined}
isInvalid={isInvalid}
value={date}
onChange={setDate}
/>
);
}`;

const AppTs = `import {Calendar} from "@nextui-org/react";
import type {DateValue} from "@react-types/calendar";
import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";


export default function App() {
let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
let {locale} = useLocale();
let isInvalid = isWeekend(date, locale);

return (
<Calendar
aria-label="Date (Invalid on weekends)"
errorMessage={isInvalid ? "We are closed on weekends" : undefined}
isInvalid={isInvalid}
value={date}
onChange={setDate}
/>
);
}`;
import App from "./invalid-date.raw.jsx?raw";
import AppTs from "./invalid-date.raw.tsx?raw";

const react = {
"/App.jsx": App,
};

const reactTs = {
"/App.tsx": AppTs,
};

export default {
...react,
...reactTs,
};
12 changes: 12 additions & 0 deletions apps/docs/content/components/calendar/max-date-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
return (
<Calendar
aria-label="Date (Max Date Value)"
defaultValue={today(getLocalTimeZone())}
maxValue={today(getLocalTimeZone())}
/>
);
}
13 changes: 1 addition & 12 deletions apps/docs/content/components/calendar/max-date-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
const App = `import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
return (
<Calendar
aria-label="Date (Max Date Value)"
defaultValue={today(getLocalTimeZone())}
maxValue={today(getLocalTimeZone())}
/>
);
}`;
import App from "./max-date-value.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
12 changes: 12 additions & 0 deletions apps/docs/content/components/calendar/min-date-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
return (
<Calendar
aria-label="Date (Min Date Value)"
defaultValue={today(getLocalTimeZone())}
minValue={today(getLocalTimeZone())}
/>
);
}
13 changes: 1 addition & 12 deletions apps/docs/content/components/calendar/min-date-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
const App = `import {Calendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

export default function App() {
return (
<Calendar
aria-label="Date (Min Date Value)"
defaultValue={today(getLocalTimeZone())}
minValue={today(getLocalTimeZone())}
/>
);
}`;
import App from "./min-date-value.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
5 changes: 5 additions & 0 deletions apps/docs/content/components/calendar/page-behaviour.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {Calendar} from "@nextui-org/react";

export default function App() {
return <Calendar aria-label="Date (Page Behaviour)" pageBehavior="single" />;
}
11 changes: 1 addition & 10 deletions apps/docs/content/components/calendar/page-behaviour.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
const App = `import {Calendar} from "@nextui-org/react";

export default function App() {
return (
<Calendar
aria-label="Date (Page Behaviour)"
pageBehavior="single"
/>
);
}`;
import App from "./page-behaviour.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
Loading