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

Jump to bottom

refactor(docs): range-calendar dx #4089

Open
wants to merge 2 commits into
base: refactor/overall-dx
Choose a base branch
from
Open

refactor(docs): range-calendar dx #4089

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
d836eff
refactor(docs): range-calendar dx
wingkwong Nov 16, 2024
e4676a1
fix(docs): import path
wingkwong Nov 16, 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
15 changes: 15 additions & 0 deletions apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {RangeCalendar} 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 (
<RangeCalendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
onFocusChange={setFocusedDate}
/>
);
}
16 changes: 1 addition & 15 deletions apps/docs/content/components/range-calendar/controlled-focused-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,4 @@
const App = `import {RangeCalendar} 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 (
<RangeCalendar
aria-label="Date (Controlled Focused Value)"
focusedValue={focusedDate}
onFocusChange={setFocusedDate}
/>
);
}`;
import App from "./controlled-focused-value.raw.jsx?raw";

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

export default function App() {
let [value, setValue] = React.useState({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});

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

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

export default function App() {
let [value, setValue] = React.useState<RangeValue<DateValue>>({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});

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

export default function App() {
let [value, setValue] = React.useState({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});

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

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

export default function App() {
let [value, setValue] = React.useState<RangeValue<DateValue>>({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});

return (
<RangeCalendar
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/range-calendar/disabled.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {RangeCalendar} from "@nextui-org/react";

export default function App() {
return <RangeCalendar isDisabled aria-label="Date (Disabled)" />;
}
8 changes: 1 addition & 7 deletions apps/docs/content/components/range-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 {RangeCalendar} from "@nextui-org/react";

export default function App() {
return (
<RangeCalendar 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/range-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 {RangeCalendar} from "@nextui-org/react";
import {I18nProvider} from "@react-aria/i18n";

export default function App() {
return (
<I18nProvider locale="zh-CN-u-ca-chinese">
<RangeCalendar aria-label="Date (International RangeCalendar)" />
</I18nProvider>
);
}
11 changes: 1 addition & 10 deletions apps/docs/content/components/range-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 {RangeCalendar} from "@nextui-org/react";
import {I18nProvider} from "@react-aria/i18n";

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

const react = {
"/App.jsx": App,
Expand Down
22 changes: 22 additions & 0 deletions apps/docs/content/components/range-calendar/invalid-date.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {RangeCalendar} 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({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});
let {locale} = useLocale();
let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);

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

import {RangeCalendar} 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<RangeValue<DateValue>>({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});
let {locale} = useLocale();
let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);

return (
<RangeCalendar
aria-label="Date (Invalid on weekends)"
errorMessage={isInvalid ? "We are closed on weekends" : undefined}
isInvalid={isInvalid}
value={date}
onChange={setDate}
/>
);
}
55 changes: 6 additions & 49 deletions apps/docs/content/components/range-calendar/invalid-date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,15 @@
const App = `import {RangeCalendar} 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({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});
let {locale} = useLocale();
let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);

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

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


export default function App() {
let [date, setDate] = React.useState<RangeValue<DateValue>>({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({weeks: 1}),
});
let {locale} = useLocale();
let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);

return (
<RangeCalendar
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,
};
6 changes: 6 additions & 0 deletions apps/docs/content/components/range-calendar/max-date-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {RangeCalendar} from "@nextui-org/react";
import {today, getLocalTimeZone} from "@internationalized/date";

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

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

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

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

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

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

export default function App() {
let {locale} = useLocale();

return (
<RangeCalendar
allowsNonContiguousRanges
aria-label="Time off request"
isDateUnavailable={(date) => isWeekend(date, locale)}
/>
);
}
16 changes: 1 addition & 15 deletions apps/docs/content/components/range-calendar/non-contiguous-ranges.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,4 @@
const App = `import {RangeCalendar} from "@nextui-org/react";
import {isWeekend} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";

export default function App() {
let {locale} = useLocale();

return (
<RangeCalendar
allowsNonContiguousRanges
aria-label="Time off request"
isDateUnavailable={(date) => isWeekend(date, locale)}
/>
);
}`;
import App from "./non-contiguous-ranges.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
5 changes: 5 additions & 0 deletions apps/docs/content/components/range-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 {RangeCalendar} from "@nextui-org/react";

export default function App() {
return <RangeCalendar aria-label="Date (Page Behaviour)" pageBehavior="single" />;
}
11 changes: 1 addition & 10 deletions apps/docs/content/components/range-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 {RangeCalendar} from "@nextui-org/react";

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

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