Skip to content

Commit 8472924

Browse files
aprendendofelipeaprendendofelipe
committed
chore: add support for React 19
1 parent 603259b commit 8472924

11 files changed

Lines changed: 1971 additions & 950 deletions

File tree

‎examples/form/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"@primer/octicons-react": "19.15.2",
1313
"@barso/forms": "0.4.1",
1414
"@barso/ui": "0.6.2",
15-
"next": "15.3.2",
16-
"react": "18.3.1",
17-
"react-dom": "18.3.1",
15+
"next": "15.5.9",
16+
"react": "19.2.3",
17+
"react-dom": "19.2.3",
1818
"react-icons": "5.5.0"
1919
}
2020
}

‎examples/markdown/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"dependencies": {
1111
"@barso/helpers": "0.4.1",
1212
"@barso/ui": "0.6.2",
13-
"next": "15.3.2",
14-
"react": "18.3.1",
15-
"react-dom": "18.3.1"
13+
"next": "15.5.9",
14+
"react": "19.2.3",
15+
"react-dom": "19.2.3"
1616
}
1717
}

‎package-lock.json‎

Lines changed: 1895 additions & 859 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,18 @@
2929
"@commitlint/cli": "19.8.1",
3030
"@commitlint/config-conventional": "19.8.1",
3131
"@tabnews/config": "0.6.0",
32-
"@testing-library/dom": "10.4.0",
33-
"@testing-library/jest-dom": "6.6.3",
34-
"@testing-library/react": "16.3.0",
32+
"@testing-library/dom": "10.4.1",
33+
"@testing-library/jest-dom": "6.9.1",
34+
"@testing-library/react": "16.3.1",
3535
"@testing-library/user-event": "14.6.1",
36-
"@vitejs/plugin-react-swc": "3.9.0",
36+
"@vitejs/plugin-react-swc": "4.2.2",
3737
"commitizen": "4.3.1",
3838
"cz-conventional-changelog": "3.3.0",
3939
"husky": "9.1.7",
4040
"lerna": "9.0.3",
4141
"lint-staged": "16.0.0",
4242
"rollup-plugin-preserve-directives": "0.4.0",
43-
"vite": "6.3.5"
43+
"vite": "7.3.0"
4444
},
4545
"repository": "aprendendofelipe/react-stack",
4646
"workspaces": [

‎packages/forms/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"validation-br": "^1.5.2"
2222
},
2323
"peerDependencies": {
24-
"react": "^18.2.0"
24+
"react": ">=18.2.0"
2525
},
2626
"author": "aprendendofelipe",
2727
"repository": {

‎packages/hooks/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@barso/helpers": "^0.4.1"
2020
},
2121
"peerDependencies": {
22-
"react": "^18.2.0"
22+
"react": ">=18.2.0"
2323
},
2424
"author": "aprendendofelipe",
2525
"repository": {

‎packages/ui/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@
5050
"styled-components": "^5.3.11"
5151
},
5252
"devDependencies": {
53-
"next": "15.3.2",
54-
"react": "18.3.1",
55-
"react-dom": "18.3.1"
53+
"next": "15.5.9",
54+
"react": "19.2.3",
55+
"react-dom": "19.2.3"
5656
},
5757
"peerDependencies": {
5858
"next": ">=15.2.2",
59-
"react": "^18.2.0",
60-
"react-dom": "^18.2.0"
59+
"react": ">=18.2.0",
60+
"react-dom": ">=18.2.0"
6161
},
6262
"author": "aprendendofelipe",
6363
"repository": {

‎packages/ui/src/Notifications/NotificationList.test.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('ui/Notifications', () => {
2727
describe('getItemIcon', () => {
2828
it('renders notification icon', () => {
2929
const notifications = createNotificationList(1);
30-
const getItemIcon = () => <span data-testid="mock-icon">📣</span>;
30+
const getItemIcon = () => <MockIcon />;
3131

3232
renderWithContext(<NotificationList />, { notifications, getItemIcon });
3333

@@ -256,7 +256,7 @@ describe('ui/Notifications', () => {
256256

257257
it('renders static action icon', () => {
258258
const notification = createMockNotification();
259-
const action = createMockAction({ label: 'Mock Action', icon: <span data-testid="mock-icon">🔔</span> });
259+
const action = createMockAction({ label: 'Mock Action', icon: MockIcon });
260260

261261
const { container } = renderWithContext(<NotificationList />, {
262262
notifications: [notification],
@@ -268,7 +268,7 @@ describe('ui/Notifications', () => {
268268
});
269269

270270
it('renders icon from action.getIcon(item)', () => {
271-
const getIcon = vi.fn(() => <span data-testid="mock-icon">🔔</span>);
271+
const getIcon = vi.fn(() => MockIcon);
272272
const notification = createMockNotification();
273273
const action = createMockAction({ label: 'Mock Action', getIcon });
274274

@@ -684,3 +684,6 @@ function getTrailingButton(container, notification) {
684684
const trailingAction = container.querySelector(`[${selectors.notificationTrailingAction}]`);
685685
return trailingAction;
686686
}
687+
688+
const MockIcon = () => <span data-testid="mock-icon">🔔</span>;
689+
MockIcon.displayName = 'MockIcon';

‎packages/ui/src/PrimerRoot/PrimerRoot.test.jsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ describe('ui', () => {
4040
it('renders core HTML structure', async () => {
4141
const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
4242

43-
const { container, getByTestId } = await renderServerComponent(PrimerRoot, {
43+
const { getByTestId } = await renderServerComponent(PrimerRoot, {
4444
...defaultProps,
4545
lang: 'en',
4646
});
4747

4848
consoleErrorSpy.mockRestore();
4949

50-
const html = container.querySelector('html');
51-
const body = container.querySelector('body');
50+
const html = document.documentElement;
51+
const body = document.body;
5252
const children = getByTestId('test-children');
5353

5454
expect(html).toBeInTheDocument();
@@ -69,44 +69,44 @@ describe('ui', () => {
6969
});
7070

7171
it('renders with default light theme when no color mode is provided', async () => {
72-
const { container, getByTestId } = await renderServerComponent(PrimerRoot, defaultProps);
72+
const { getByTestId } = await renderServerComponent(PrimerRoot, defaultProps);
7373

7474
const autoThemeProvider = getByTestId('auto-theme-provider');
7575

76-
expect(container.querySelector('html')).toHaveAttribute('data-color-mode', 'light');
76+
expect(document.documentElement).toHaveAttribute('data-color-mode', 'light');
7777
expect(autoThemeProvider).toHaveAttribute('data-default-color-mode', 'light');
7878
});
7979

8080
it('uses dark theme when colorMode prop is "dark"', async () => {
8181
mockCookieStore.get.mockResolvedValueOnce({ value: 'light' });
8282

83-
const { container } = await renderServerComponent(PrimerRoot, {
83+
await renderServerComponent(PrimerRoot, {
8484
...defaultProps,
8585
colorMode: 'dark',
8686
defaultColorMode: 'light',
8787
});
8888

89-
expect(container.querySelector('html')).toHaveAttribute('data-color-mode', 'dark');
89+
expect(document.documentElement).toHaveAttribute('data-color-mode', 'dark');
9090
});
9191

9292
it('uses cookie value for color mode when available', async () => {
9393
mockCookieStore.get.mockResolvedValueOnce({ value: 'dark' });
9494

95-
const { container } = await renderServerComponent(PrimerRoot, {
95+
await renderServerComponent(PrimerRoot, {
9696
...defaultProps,
9797
defaultColorMode: 'light',
9898
});
9999

100-
expect(container.querySelector('html')).toHaveAttribute('data-color-mode', 'dark');
100+
expect(document.documentElement).toHaveAttribute('data-color-mode', 'dark');
101101
});
102102

103103
it('uses defaultColorMode when no cookie or colorMode prop is provided', async () => {
104-
const { container } = await renderServerComponent(PrimerRoot, {
104+
await renderServerComponent(PrimerRoot, {
105105
...defaultProps,
106106
defaultColorMode: 'dark',
107107
});
108108

109-
expect(container.querySelector('html')).toHaveAttribute('data-color-mode', 'dark');
109+
expect(document.documentElement).toHaveAttribute('data-color-mode', 'dark');
110110
});
111111

112112
it('passes preventSSRMismatch prop to AutoThemeProvider', async () => {
@@ -120,25 +120,23 @@ describe('ui', () => {
120120
});
121121

122122
it('passes additional props to the HTML element', async () => {
123-
const { container } = await renderServerComponent(PrimerRoot, {
123+
await renderServerComponent(PrimerRoot, {
124124
...defaultProps,
125125
htmlProps: {
126126
'data-custom-attribute': 'customValue',
127127
},
128128
});
129129

130-
const html = container.querySelector('html');
131-
expect(html).toHaveAttribute('data-custom-attribute', 'customValue');
130+
expect(document.documentElement).toHaveAttribute('data-custom-attribute', 'customValue');
132131
});
133132

134-
it('renders headChildren in the head', async () => {
135-
const { container } = await renderServerComponent(PrimerRoot, {
133+
it('injects headChildren in the head', async () => {
134+
await renderServerComponent(PrimerRoot, {
136135
...defaultProps,
137136
headChildren: <meta name="description" content="Test description" />,
138137
});
139138

140-
const head = container.querySelector('head');
141-
const meta = head.querySelector('meta[name="description"]');
139+
const meta = document.head.querySelector('meta[name="description"]');
142140

143141
expect(meta).toBeInTheDocument();
144142
expect(meta).toHaveAttribute('content', 'Test description');
@@ -155,5 +153,7 @@ describe('ui', () => {
155153
async function renderServerComponent(asyncComponent, props) {
156154
const componentPromise = typeof asyncComponent === 'function' ? asyncComponent(props) : asyncComponent;
157155
const resolvedComponent = await componentPromise;
158-
return render(resolvedComponent);
156+
return render(resolvedComponent, {
157+
document: global.document,
158+
});
159159
}

‎packages/ui/src/__snapshots__/_document.test.js.snap‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`ui > _document > renders correctly 1`] = `
4-
<mockroot>
5-
<html
6-
data-testid="Next Html"
7-
lang="next-i18n"
4+
<html
5+
data-testid="Next Html"
6+
lang="next-i18n"
7+
>
8+
<head
9+
data-testid="Next Head"
810
>
9-
<head
10-
data-testid="Next Head"
11+
<link
12+
crossorigin="anonymous"
13+
href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
14+
integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP"
15+
rel="stylesheet"
16+
/>
17+
</head>
18+
<body>
19+
<main
20+
data-testid="Next App Content"
21+
/>
22+
<script
23+
id="theme"
24+
strategy="beforeInteractive"
1125
>
12-
<link
13-
crossorigin="anonymous"
14-
href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
15-
integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP"
16-
rel="stylesheet"
17-
/>
18-
</head>
19-
<body>
20-
<main
21-
data-testid="Next App Content"
22-
/>
23-
<script
24-
id="theme"
25-
strategy="beforeInteractive"
26-
>
27-
if (['auto','night','dark','day','light'].includes(localStorage.getItem('colorMode')))
26+
if (['auto','night','dark','day','light'].includes(localStorage.getItem('colorMode')))
2827
document.documentElement.setAttribute('data-no-flash', true)
29-
</script>
30-
<script
31-
data-testid="Next Scripts"
32-
/>
33-
</body>
34-
</html>
35-
</mockroot>
28+
</script>
29+
<script
30+
data-testid="Next Scripts"
31+
/>
32+
</body>
33+
</html>
3634
`;

0 commit comments

Comments
 (0)