Skip to content

Commit e4eea5f

Browse files
gpblgpbl
authored
feat: add scoped react package alias (#2970)
* feat: add scoped react package alias * docs: add changeset for scoped react alias * test: cover co-installed daypicker imports * ci: allow first publish of scoped react package * chore: align scoped react publish metadata * ci: remove scoped react publish token fallback * docs: use react package wording * docs: call calendar packages addons
1 parent 496b85f commit e4eea5f

62 files changed

Lines changed: 634 additions & 130 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/scoped-react-alias.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"react-day-picker": patch
3+
"@daypicker/react": patch
4+
"@daypicker/buddhist": patch
5+
"@daypicker/ethiopic": patch
6+
"@daypicker/hebrew": patch
7+
"@daypicker/hijri": patch
8+
"@daypicker/persian": patch
9+
---
10+
11+
Add `@daypicker/react` as the React package for DayPicker and update calendar packages to consume it.

‎apps/website/versioned_docs/version-next/localization/buddhist.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: Buddhist (Thai) Calendar
44

55
DayPicker supports the Buddhist (Thai) calendar via a dedicated build. Months and weeks remain Gregorian, while years render in Buddhist Era (BE = CE + 543) and Thai numerals by default.
66

7-
Install the core package and the Buddhist calendar package:
7+
Install the React package and the Buddhist calendar package:
88

99
```bash npm2yarn
10-
npm install react-day-picker@next @daypicker/buddhist@next
10+
npm install @daypicker/react@next @daypicker/buddhist@next
1111
```
1212

1313
Import `DayPicker` from `@daypicker/buddhist` to render Buddhist years while keeping the usual DayPicker API.

‎apps/website/versioned_docs/version-next/localization/ethiopic.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: Ethiopic Calendar
44

55
DayPicker supports the [Ethiopic calendar](https://en.wikipedia.org/wiki/Ethiopian_calendar) via a dedicated build.
66

7-
Install the core package and the Ethiopic calendar package:
7+
Install the React package and the Ethiopic calendar package:
88

99
```bash npm2yarn
10-
npm install react-day-picker@next @daypicker/ethiopic@next
10+
npm install @daypicker/react@next @daypicker/ethiopic@next
1111
```
1212

1313
Import `DayPicker` from `@daypicker/ethiopic` to display Ethiopic months, weekdays, and numerals while keeping the usual DayPicker API.

‎apps/website/versioned_docs/version-next/localization/hebrew.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: Hebrew Calendar
44

55
DayPicker supports the [Hebrew calendar](https://en.wikipedia.org/wiki/Hebrew_calendar) via a dedicated build.
66

7-
Install the core package and the Hebrew calendar package:
7+
Install the React package and the Hebrew calendar package:
88

99
```bash npm2yarn
10-
npm install react-day-picker@next @daypicker/hebrew@next
10+
npm install @daypicker/react@next @daypicker/hebrew@next
1111
```
1212

1313
Import `DayPicker` from `@daypicker/hebrew` to render Hebrew months (including Adar I/II in leap years) with RTL layout by default.

‎apps/website/versioned_docs/version-next/localization/hijri.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: Hijri Calendar
44

55
DayPicker supports the [Hijri (Umm al-Qura) calendar](https://en.wikipedia.org/wiki/Islamic_calendar) via a dedicated build.
66

7-
Install the core package and the Hijri calendar package:
7+
Install the React package and the Hijri calendar package:
88

99
```bash npm2yarn
10-
npm install react-day-picker@next @daypicker/hijri@next
10+
npm install @daypicker/react@next @daypicker/hijri@next
1111
```
1212

1313
Import `DayPicker` from `@daypicker/hijri` to render Hijri months and weekdays while keeping the usual DayPicker API.

‎apps/website/versioned_docs/version-next/localization/persian.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: Persian Calendar
44

55
DayPicker supports the Persian [Solar Hijri](<https://en.wikipedia.org/wiki/Iranian_calendars#Modern_calendar:_Solar_Hijri_(SH)>) calendar via a dedicated build.
66

7-
Install the core package and the Persian calendar package:
7+
Install the React package and the Persian calendar package:
88

99
```bash npm2yarn
10-
npm install react-day-picker@next @daypicker/persian@next
10+
npm install @daypicker/react@next @daypicker/persian@next
1111
```
1212

1313
Import `DayPicker` from `@daypicker/persian` to render Persian months and weekdays while keeping the usual DayPicker API.

‎apps/website/versioned_docs/version-next/upgrading.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,12 @@ These imports were removed in v10:
148148
`@daypicker/persian`
149149
- Deprecated aliases from `types/deprecated`
150150

151-
The calendar packages are now published separately from `react-day-picker`.
152-
Install the add-on package you use alongside `react-day-picker@next`. For
151+
The calendar packages are now published separately from the main React package.
152+
Install the add-on package you use alongside `@daypicker/react@next`. For
153153
example:
154154

155155
```bash npm2yarn
156-
npm install react-day-picker@next @daypicker/persian@next
156+
npm install @daypicker/react@next @daypicker/persian@next
157157
```
158158

159159
## 8. Review the new `navLayout` default

‎examples/ScopedReactAlias.test.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { createRequire } from "node:module";
2+
import { DayPicker as BuddhistDayPicker } from "@daypicker/buddhist";
3+
import {
4+
DayPicker,
5+
type MonthCaptionProps,
6+
useDayPicker as useScopedDayPicker,
7+
} from "@daypicker/react";
8+
import { es } from "@daypicker/react/locale";
9+
import { es as esSubpath } from "@daypicker/react/locale/es";
10+
import classNames from "@daypicker/react/style.module.css";
11+
import React from "react";
12+
import {
13+
DayPicker as LegacyDayPicker,
14+
useDayPicker as useLegacyDayPicker,
15+
} from "react-day-picker";
16+
import { render } from "@/test/render";
17+
import "@daypicker/react/style.css";
18+
19+
const requirePackage = createRequire(__filename);
20+
21+
function CoInstalledMonthCaption(props: MonthCaptionProps) {
22+
const scopedContext = useScopedDayPicker();
23+
const legacyContext = useLegacyDayPicker();
24+
25+
return (
26+
<span data-testid="co-installed-caption">
27+
{props.calendarMonth.date.getFullYear()}-{scopedContext.months.length}-
28+
{legacyContext.months.length}
29+
</span>
30+
);
31+
}
32+
33+
test("the React package mirrors the DayPicker public surface", () => {
34+
const requiredPackage = requirePackage(
35+
"@daypicker/react",
36+
) as typeof import("@daypicker/react");
37+
38+
expect(requiredPackage.DayPicker).toBeDefined();
39+
expect(DayPicker).toBeDefined();
40+
expect(esSubpath).toBe(es);
41+
expect(classNames).toBeDefined();
42+
43+
const scopedCalendar = render(
44+
<DayPicker month={new Date(2024, 0, 1)} mode="single" />,
45+
);
46+
expect(
47+
scopedCalendar.container.querySelector(".rdp-root"),
48+
).toBeInTheDocument();
49+
});
50+
51+
test("same-version scoped and legacy imports share the DayPicker implementation", () => {
52+
expect(DayPicker).toBe(LegacyDayPicker);
53+
54+
const calendar = render(
55+
<DayPicker
56+
month={new Date(2024, 0, 1)}
57+
components={{ MonthCaption: CoInstalledMonthCaption }}
58+
/>,
59+
);
60+
61+
expect(calendar.getByTestId("co-installed-caption")).toHaveTextContent(
62+
"2024-1-1",
63+
);
64+
});
65+
66+
test("calendar packages render through the React package boundary", () => {
67+
const calendar = render(
68+
<BuddhistDayPicker month={new Date(2024, 0, 1)} mode="single" />,
69+
);
70+
71+
expect(calendar.container.querySelector(".rdp-root")).toBeInTheDocument();
72+
});

‎jest.config.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,20 @@ const config: Config.InitialOptions = {
2525
roots: ["<rootDir>/packages/react-day-picker/src"],
2626
moduleNameMapper: {
2727
"@/test/(.*)": ["<rootDir>/test/$1"],
28+
"@daypicker/react/locale/(.*)\\.js": [
29+
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
30+
],
31+
"@daypicker/react/locale/(.*)": [
32+
"<rootDir>/packages/react-day-picker/src/locale/$1",
33+
],
34+
"@daypicker/react/locale": ["<rootDir>/packages/react/src/locale.ts"],
35+
"@daypicker/react/style.module.css": [
36+
"<rootDir>/packages/react-day-picker/src/style.module.css",
37+
],
38+
"@daypicker/react/style.css": [
39+
"<rootDir>/packages/react-day-picker/src/style.css",
40+
],
41+
"@daypicker/react": ["<rootDir>/packages/react/src/index.ts"],
2842
"react-day-picker/locale/(.*)\\.js": [
2943
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
3044
],
@@ -52,6 +66,20 @@ const config: Config.InitialOptions = {
5266
"@daypicker/hebrew": ["<rootDir>/packages/hebrew/src/index.tsx"],
5367
"@daypicker/hijri": ["<rootDir>/packages/hijri/src/index.tsx"],
5468
"@daypicker/persian": ["<rootDir>/packages/persian/src/index.tsx"],
69+
"@daypicker/react/locale/(.*)\\.js": [
70+
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
71+
],
72+
"@daypicker/react/locale/(.*)": [
73+
"<rootDir>/packages/react-day-picker/src/locale/$1",
74+
],
75+
"@daypicker/react/locale": ["<rootDir>/packages/react/src/locale.ts"],
76+
"@daypicker/react/style.module.css": [
77+
"<rootDir>/packages/react-day-picker/src/style.module.css",
78+
],
79+
"@daypicker/react/style.css": [
80+
"<rootDir>/packages/react-day-picker/src/style.css",
81+
],
82+
"@daypicker/react": ["<rootDir>/packages/react/src/index.ts"],
5583
"react-day-picker/locale/(.*)\\.js": [
5684
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
5785
],
@@ -76,6 +104,7 @@ const config: Config.InitialOptions = {
76104
"<rootDir>/packages/hebrew",
77105
"<rootDir>/packages/hijri",
78106
"<rootDir>/packages/persian",
107+
"<rootDir>/packages/react",
79108
],
80109
moduleNameMapper: {
81110
"@/test/(.*)": ["<rootDir>/test/$1"],
@@ -84,6 +113,20 @@ const config: Config.InitialOptions = {
84113
"@daypicker/hebrew": ["<rootDir>/packages/hebrew/src/index.tsx"],
85114
"@daypicker/hijri": ["<rootDir>/packages/hijri/src/index.tsx"],
86115
"@daypicker/persian": ["<rootDir>/packages/persian/src/index.tsx"],
116+
"@daypicker/react/locale/(.*)\\.js": [
117+
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
118+
],
119+
"@daypicker/react/locale/(.*)": [
120+
"<rootDir>/packages/react-day-picker/src/locale/$1",
121+
],
122+
"@daypicker/react/locale": ["<rootDir>/packages/react/src/locale.ts"],
123+
"@daypicker/react/style.module.css": [
124+
"<rootDir>/packages/react-day-picker/src/style.module.css",
125+
],
126+
"@daypicker/react/style.css": [
127+
"<rootDir>/packages/react-day-picker/src/style.css",
128+
],
129+
"@daypicker/react": ["<rootDir>/packages/react/src/index.ts"],
87130
"react-day-picker/locale/(.*)\\.js": [
88131
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
89132
],
@@ -107,6 +150,20 @@ const config: Config.InitialOptions = {
107150
fakeTimers: { enableGlobally: false }, // disable fake timers for timezone tests because they interfere with Intl API
108151
moduleNameMapper: {
109152
"@/test/(.*)": ["<rootDir>/test/$1"],
153+
"@daypicker/react/locale/(.*)\\.js": [
154+
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
155+
],
156+
"@daypicker/react/locale/(.*)": [
157+
"<rootDir>/packages/react-day-picker/src/locale/$1",
158+
],
159+
"@daypicker/react/locale": ["<rootDir>/packages/react/src/locale.ts"],
160+
"@daypicker/react/style.module.css": [
161+
"<rootDir>/packages/react-day-picker/src/style.module.css",
162+
],
163+
"@daypicker/react/style.css": [
164+
"<rootDir>/packages/react-day-picker/src/style.css",
165+
],
166+
"@daypicker/react": ["<rootDir>/packages/react/src/index.ts"],
110167
"react-day-picker/locale/(.*)\\.js": [
111168
"<rootDir>/packages/react-day-picker/src/locale/$1.ts",
112169
],
@@ -148,6 +205,22 @@ const config: Config.InitialOptions = {
148205
"@daypicker/hebrew": ["<rootDir>/packages/hebrew/dist/cjs/index.js"],
149206
"@daypicker/hijri": ["<rootDir>/packages/hijri/dist/cjs/index.js"],
150207
"@daypicker/persian": ["<rootDir>/packages/persian/dist/cjs/index.js"],
208+
"@daypicker/react/locale/(.*)\\.js": [
209+
"<rootDir>/packages/react/dist/cjs/locale/$1.js",
210+
],
211+
"@daypicker/react/locale/(.*)": [
212+
"<rootDir>/packages/react/dist/cjs/locale/$1",
213+
],
214+
"@daypicker/react/locale": [
215+
"<rootDir>/packages/react/dist/cjs/locale.js",
216+
],
217+
"@daypicker/react/style.module.css": [
218+
"<rootDir>/packages/react/dist/style.module.css",
219+
],
220+
"@daypicker/react/style.css": [
221+
"<rootDir>/packages/react/dist/style.css",
222+
],
223+
"@daypicker/react": ["<rootDir>/packages/react/dist/cjs/index.js"],
151224
"react-day-picker/locale/(.*)\\.js": [
152225
"<rootDir>/packages/react-day-picker/dist/cjs/locale/$1.js",
153226
],

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"scripts": {
1010
"build": "pnpm clean:dist && pnpm build:react-day-picker && pnpm build:packages",
1111
"build:react-day-picker": "pnpm --filter react-day-picker build",
12-
"build:packages": "pnpm -r --filter \"@daypicker/*\" build",
12+
"build:packages": "pnpm build:daypicker-react && pnpm build:calendar-packages",
13+
"build:daypicker-react": "pnpm --filter @daypicker/react build",
14+
"build:calendar-packages": "pnpm -r --filter \"@daypicker/*\" --filter \"!@daypicker/react\" build",
1315
"clean:dist": "rm -rf packages/*/dist",
1416
"format": "prettier -w \"**/*.{md,mdx,ts,tsx}\"",
1517
"lint": "biome check",
@@ -30,6 +32,7 @@
3032
"@changesets/cli": "^2.31.0",
3133
"@changesets/changelog-github": "^0.5.2",
3234
"@date-fns/tz": "^1.4.1",
35+
"@daypicker/react": "workspace:*",
3336
"@jest/types": "^30.3.0",
3437
"@radix-ui/react-select": "^2.2.6",
3538
"@swc/core": "^1.15.26",
@@ -61,6 +64,8 @@
6164
},
6265
"pnpm": {
6366
"overrides": {
67+
"@daypicker/react": "link:packages/react",
68+
"@daypicker/react>react-day-picker": "link:packages/react-day-picker",
6469
"@babel/runtime": "7.28.4",
6570
"ajv@6": "6.15.0",
6671
"diff": "4.0.4",

0 commit comments

Comments
 (0)