Skip to content

Commit 27209f3

Browse files
paanSinghCoderpaanSinghCoder
authored
feat: add new calendar (#193)
* feat: add new calendar * chore: move files * fix: correct import path for Spinner component * fix: import * chore: remove unwanted imports * style: contain width * chore: add export * chore: add assets usage * Merge branch 'main' into feat/calendar-v1-new * fix: rangepicker width issue
1 parent 325d5af commit 27209f3

File tree

24 files changed

+1327
-31
lines changed

24 files changed

+1327
-31
lines changed

‎apps/www/content/primitives/components/calendar.mdx

Lines changed: 146 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Calendar
3+
description: A calendar component for selecting dates and date ranges.
34
links:
45
- label: React DayPicker
56
link: https://react-day-picker.js.org/
@@ -8,32 +9,157 @@ links:
89
## Preview
910

1011
<Preview>
11-
<Calendar numberOfMonths={2} />
12+
<Flex direction="column" gap="medium">
13+
<Calendar numberOfMonths={2} />
14+
<RangePicker textFieldProps={{ size: "medium" }} />
15+
<DatePicker textFieldProps={{ size: "medium" }} />
16+
</Flex>
1217
</Preview>
1318

14-
## Dropdown
19+
## Usage
1520

16-
<Preview>
17-
<Flex gap="medium">
18-
<Calendar captionLayout="dropdown" />
19-
<Calendar captionLayout="dropdown-years" />
20-
</Flex>
21-
</Preview>
21+
The Calendar components provide flexible date selection functionality with support for single dates, date ranges, and custom triggers.
2222

23-
## DatePicker
23+
## Installation
2424

25-
<Preview>
26-
<Flex direction="column" gap="medium">
27-
28-
<DatePicker textFieldProps={{ size: "medium" }} />
25+
Install the component from your command line.
2926

30-
<RangePicker textFieldProps={{ size: "medium" }} calendarProps={{ captionLayout: "dropdown-years" }}/>
27+
<LiveProvider>
28+
<LiveEditor code={`npm install @raystack/apsara`} border language="shell" />
29+
</LiveProvider>
3130

32-
</Flex>
33-
</Preview>
31+
<LiveProvider>
32+
<LiveEditor code={`import { Calendar, RangePicker, DatePicker } from '@raystack/apsara'
3433
35-
## Loader
34+
// Basic Calendar
35+
<Calendar numberOfMonths={2} />
3636
37-
<Preview>
38-
<Calendar loadingData={true} />
39-
</Preview>
37+
// Range Picker with custom trigger
38+
<RangePicker>
39+
{({ startDate, endDate }) => (
40+
<button>
41+
{startDate} - {endDate}
42+
</button>
43+
)}
44+
</RangePicker>
45+
46+
// Date Picker with custom trigger
47+
<DatePicker>
48+
{({ selectedDate }) => (
49+
<button>
50+
Selected: {selectedDate}
51+
</button>
52+
)}
53+
</DatePicker>
54+
`} border/>
55+
</LiveProvider>
56+
57+
## Calendar Props
58+
59+
The `Calendar` component accepts the following props:
60+
61+
- `numberOfMonths`: Number of months to display
62+
- `captionLayout`: Layout for the month caption (e.g., "dropdown")
63+
- `loadingData`: Boolean to show loading state
64+
- `dateInfo`: Object containing date-specific information like icons and text
65+
- `showOutsideDays`: Boolean to show days from previous/next months
66+
- `className`: Additional CSS class names
67+
68+
## RangePicker Props
69+
70+
The `RangePicker` component accepts the following props:
71+
72+
- `dateFormat`: Format for displaying the date (e.g., "DD/MM/YYYY")
73+
- `onSelect`: Callback function when date range is selected
74+
- `value`: Initial date range value
75+
- `calendarProps`: Props for customizing the calendar
76+
- `textFieldProps`: Props for customizing the text field
77+
- `children`: Render prop for custom trigger
78+
79+
## DatePicker Props
80+
81+
The `DatePicker` component accepts the following props:
82+
83+
- `textFieldProps`: Props for customizing the text field
84+
- `children`: Render prop for custom trigger
85+
86+
## Examples
87+
88+
### Basic Calendar
89+
90+
<Playground
91+
scope={{ Calendar }}
92+
tabs={[
93+
{
94+
name: "Basic",
95+
code: `<Calendar numberOfMonths={2} />`,
96+
},
97+
{
98+
name: "With Loading",
99+
code: `<Calendar loadingData={true} numberOfMonths={2} />`,
100+
}
101+
]}
102+
/>
103+
104+
### Range Picker
105+
106+
<Playground
107+
scope={{ RangePicker, Flex }}
108+
tabs={[
109+
{
110+
name: "Basic",
111+
code: `<RangePicker textFieldProps={{ size: "medium" }} />`,
112+
},
113+
{
114+
name: "Custom Trigger",
115+
code: `
116+
<RangePicker
117+
dateFormat="DD/MM/YYYY"
118+
onSelect={(range) => console.log('Date range:', range)}
119+
value={{
120+
from: new Date(2024, 0, 1),
121+
to: new Date(2024, 0, 15)
122+
}}
123+
calendarProps={{
124+
mode: "range",
125+
required: true,
126+
selected: {
127+
from: new Date(2024, 0, 1),
128+
to: new Date(2024, 0, 15)
129+
},
130+
fromMonth: new Date(2024, 0, 1),
131+
toMonth: new Date(2024, 11, 31),
132+
}}
133+
>
134+
{({ startDate, endDate }) => (
135+
<button>
136+
{startDate} - {endDate}
137+
</button>
138+
)}
139+
</RangePicker>`,
140+
}
141+
]}
142+
/>
143+
144+
### Date Picker
145+
146+
<Playground
147+
scope={{ DatePicker, Flex }}
148+
tabs={[
149+
{
150+
name: "Basic",
151+
code: `<DatePicker textFieldProps={{ size: "medium" }} />`,
152+
},
153+
{
154+
name: "Custom Trigger",
155+
code: `
156+
<DatePicker>
157+
{({ selectedDate }) => (
158+
<button>
159+
Selected: {selectedDate}
160+
</button>
161+
)}
162+
</DatePicker>`,
163+
}
164+
]}
165+
/>

‎apps/www/examples/shield-ts/assets.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
useTable
88
} from "@raystack/apsara";
99

10+
1011
import { toast, ToastContainer, Avatar, AvatarGroup, Button, Spinner, DropdownMenu, Breadcrumb, Chip, Flex, Text, Checkbox, InputField, Badge, Radio, Tabs } from "@raystack/apsara/v1";
1112

1213
import { getData, Payment } from "./data";
@@ -95,6 +96,11 @@ export const Assets = () => {
9596
const [page, setPage] = useState(1);
9697
const [hasMoreData, setHasMoreData] = useState(true);
9798
const [data, setData] = useState<Payment[]>([]);
99+
const [selectedDate, setSelectedDate] = useState<Date>();
100+
const [dateRange, setDateRange] = useState({
101+
from: new Date(),
102+
to: new Date(),
103+
});
98104

99105
const loadMoreData = useCallback(() => {
100106
if (!isLoading && hasMoreData) {
@@ -300,6 +306,7 @@ const AssetsHeader = () => {
300306
/>
301307
</AvatarGroup> */}
302308

309+
303310
{/* Add Chip examples */}
304311
<Flex gap="small" align="center">
305312
{/* <Chip isDismissible variant="filled" size="small" style="accent" leadingIcon={<HomeIcon />} trailingIcon={<CheckIcon />}>Default</Chip> */}

‎apps/www/utils/routes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const primitivesRoutes = [
3838
newBadge: true,
3939
},
4040
{ title: "Callout", slug: "docs/primitives/components/callout", newBadge: true },
41-
{ title: "Calendar", slug: "docs/primitives/components/calendar" },
41+
{ title: "Calendar", slug: "docs/primitives/components/calendar", newBadge: true },
4242
{ title: "Command", slug: "docs/primitives/components/command" },
4343
{
4444
title: "Checkbox",

‎packages/raystack/calendar/calendar.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,4 +191,4 @@
191191
.disabled {
192192
color: var(--foreground-subtle);
193193
opacity: 0.8;
194-
}
194+
}

‎packages/raystack/calendar/calendar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import {
1212
ChevronDownIcon,
1313
} from '@radix-ui/react-icons';
1414
import styles from './calendar.module.css';
15-
import { Select } from '~/select';
15+
import { Select } from '../select';
1616
import { ChangeEvent, useEffect, useState } from 'react';
17-
import { Flex } from '~/flex/flex';
18-
import { Tooltip } from '~/tooltip';
17+
import { Flex } from '../flex/flex';
18+
import { Tooltip } from '../tooltip';
1919
import Skeleton from 'react-loading-skeleton';
2020

2121
interface OnDropdownOpen {
@@ -176,4 +176,4 @@ export const Calendar = function ({
176176
{...props}
177177
/>
178178
);
179-
};
179+
};

‎packages/raystack/calendar/date-picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,4 @@ export function DatePicker({
170170
</Popover.Content>
171171
</Popover>
172172
);
173-
}
173+
}

‎packages/raystack/calendar/range-picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,4 +93,4 @@ export function RangePicker({
9393
</Popover.Content>
9494
</Popover>
9595
);
96-
}
96+
}

0 commit comments

Comments
 (0)