Skip to content

Commit 79b8a84

Browse files
arjunvegdaarjunvegda
authored
chore: update dependencies (#204)
* chore: bump jotai peer deps * chore: update storybook * chore: update non breaking deps * chore: update more deps * chore: update jest
1 parent 0dcf91b commit 79b8a84

File tree

12 files changed

+3669
-4035
lines changed

12 files changed

+3669
-4035
lines changed

‎.storybook/main.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import { StorybookConfig } from '@storybook/react-webpack5';
22
const webpack = require('webpack');
33
const config: StorybookConfig = {
44
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
5+
56
addons: [
67
'@storybook/addon-links',
7-
'@storybook/addon-essentials',
8-
'@storybook/addon-interactions',
98
'@storybook/addon-a11y',
10-
'@storybook/addon-mdx-gfm',
119
{
1210
name: '@storybook/addon-styling-webpack',
1311
options: {
@@ -36,14 +34,14 @@ const config: StorybookConfig = {
3634
},
3735
'@storybook/addon-webpack5-compiler-babel',
3836
'@chromatic-com/storybook',
37+
'@storybook/addon-docs',
3938
],
39+
4040
framework: {
4141
name: '@storybook/react-webpack5',
4242
options: {},
4343
},
44-
docs: {
45-
autodocs: true,
46-
},
44+
4745
typescript: {
4846
reactDocgen: 'react-docgen-typescript',
4947
reactDocgenTypescriptOptions: {
@@ -53,6 +51,7 @@ const config: StorybookConfig = {
5351
},
5452
},
5553
},
54+
5655
core: {
5756
disableTelemetry: true, // 👈 Disables telemetry
5857
enableCrashReports: false, // 👈 Appends the crash reports to the telemetry events

‎__tests__/devtools/__snapshots__/AtomViewer.test.tsx.snap‎

Lines changed: 132 additions & 91 deletions
Large diffs are not rendered by default.

‎__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap‎

Lines changed: 43 additions & 33 deletions
Large diffs are not rendered by default.

‎__tests__/devtools/__snapshots__/basic.test.tsx.snap‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Jest Snapshot v1, https://goo.gl/fbAQLP
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

33
exports[`DevTools - basic Error boundary should display an error boundary with message if stack is not present 1`] = `
44
<div>
@@ -21,7 +21,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
2121
data-testid="jotai-devtools-shell"
2222
data-variant="default"
2323
id="jotai-devtools-shell"
24-
style="--tabs-radius: var(--mantine-radius-default); --tabs-color: var(--mantine-color-dark-filled); max-height: 90%;"
24+
style="--tabs-radius: var(--mantine-radius-default); --tabs-color: var(--mantine-color-dark-filled); height: calc(12.5rem * var(--mantine-scale)); max-height: 90%;"
2525
>
2626
<div
2727
class=""
@@ -34,11 +34,11 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
3434
>
3535
<div
3636
class="m_8bffd616 __m__-rct"
37-
style="align-items: center; justify-content: space-between;"
37+
style="align-items: center; justify-content: space-between; padding: calc(0.625rem * var(--mantine-scale));"
3838
>
3939
<div
4040
class="m_4081bf90"
41-
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
41+
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap; margin-right: calc(0.625rem * var(--mantine-scale));"
4242
>
4343
<h1
4444
class="m_8a5d1357"
@@ -102,7 +102,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
102102
<button
103103
class="jotai-devtools-focus jotai-devtools-active m_8d3f4000 m_87cf2631"
104104
data-variant="subtle"
105-
style="--ai-radius: var(--mantine-radius-md); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
105+
style="--ai-radius: var(--mantine-radius-md); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; margin-left: calc(0.625rem * var(--mantine-scale));"
106106
title="Minimize panel"
107107
type="button"
108108
>
@@ -143,11 +143,11 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
143143
<p
144144
class="jotai-devtools-focus m_b6d8b162"
145145
data-size="md"
146-
style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md); display: flex; align-items: center; font-weight: 500;"
146+
style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md); display: flex; align-items: center; margin-bottom: calc(0.3125rem * var(--mantine-scale)); color: var(--mantine-color-red-8); font-weight: 500;"
147147
>
148148
<p
149149
class="jotai-devtools-focus m_b6d8b162"
150-
style="display: flex; align-items: center;"
150+
style="display: flex; align-items: center; margin-right: calc(0.3125rem * var(--mantine-scale));"
151151
>
152152
<svg
153153
class="tabler-icon tabler-icon-alert-circle "
@@ -177,7 +177,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
177177
<p
178178
class="jotai-devtools-focus m_b6d8b162"
179179
data-size="sm"
180-
style="--text-fz: var(--mantine-font-size-sm); --text-lh: var(--mantine-line-height-sm);"
180+
style="--text-fz: var(--mantine-font-size-sm); --text-lh: var(--mantine-line-height-sm); margin-bottom: var(--mantine-spacing-sm); color: var(--mantine-color-red-8);"
181181
>
182182
If you believe this to be a bug, please file an issue on
183183
@@ -186,7 +186,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
186186
data-underline="hover"
187187
href="https://github.com/jotaijs/jotai-devtools/issues"
188188
rel="noreferrer noopener"
189-
style="text-decoration: underline;"
189+
style="color: var(--mantine-color-red-8); text-decoration: underline;"
190190
target="_blank"
191191
>
192192
Jotai DevTool's GitHub repo
@@ -212,6 +212,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
212212
stroke-linecap="round"
213213
stroke-linejoin="round"
214214
stroke-width="2"
215+
style="width: calc(1.125rem * var(--mantine-scale)); height: calc(1.125rem * var(--mantine-scale));"
215216
viewBox="0 0 24 24"
216217
xmlns="http://www.w3.org/2000/svg"
217218
>
@@ -296,7 +297,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
296297
data-testid="jotai-devtools-shell"
297298
data-variant="default"
298299
id="jotai-devtools-shell"
299-
style="--tabs-radius: var(--mantine-radius-default); --tabs-color: var(--mantine-color-dark-filled); max-height: 90%;"
300+
style="--tabs-radius: var(--mantine-radius-default); --tabs-color: var(--mantine-color-dark-filled); height: calc(12.5rem * var(--mantine-scale)); max-height: 90%;"
300301
>
301302
<div
302303
class=""
@@ -309,11 +310,11 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
309310
>
310311
<div
311312
class="m_8bffd616 __m__-r61"
312-
style="align-items: center; justify-content: space-between;"
313+
style="align-items: center; justify-content: space-between; padding: calc(0.625rem * var(--mantine-scale));"
313314
>
314315
<div
315316
class="m_4081bf90"
316-
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
317+
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap; margin-right: calc(0.625rem * var(--mantine-scale));"
317318
>
318319
<h1
319320
class="m_8a5d1357"
@@ -377,7 +378,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
377378
<button
378379
class="jotai-devtools-focus jotai-devtools-active m_8d3f4000 m_87cf2631"
379380
data-variant="subtle"
380-
style="--ai-radius: var(--mantine-radius-md); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
381+
style="--ai-radius: var(--mantine-radius-md); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; margin-left: calc(0.625rem * var(--mantine-scale));"
381382
title="Minimize panel"
382383
type="button"
383384
>
@@ -418,11 +419,11 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
418419
<p
419420
class="jotai-devtools-focus m_b6d8b162"
420421
data-size="md"
421-
style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md); display: flex; align-items: center; font-weight: 500;"
422+
style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md); display: flex; align-items: center; margin-bottom: calc(0.3125rem * var(--mantine-scale)); color: var(--mantine-color-red-8); font-weight: 500;"
422423
>
423424
<p
424425
class="jotai-devtools-focus m_b6d8b162"
425-
style="display: flex; align-items: center;"
426+
style="display: flex; align-items: center; margin-right: calc(0.3125rem * var(--mantine-scale));"
426427
>
427428
<svg
428429
class="tabler-icon tabler-icon-alert-circle "
@@ -452,7 +453,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
452453
<p
453454
class="jotai-devtools-focus m_b6d8b162"
454455
data-size="sm"
455-
style="--text-fz: var(--mantine-font-size-sm); --text-lh: var(--mantine-line-height-sm);"
456+
style="--text-fz: var(--mantine-font-size-sm); --text-lh: var(--mantine-line-height-sm); margin-bottom: var(--mantine-spacing-sm); color: var(--mantine-color-red-8);"
456457
>
457458
If you believe this to be a bug, please file an issue on
458459
@@ -461,7 +462,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
461462
data-underline="hover"
462463
href="https://github.com/jotaijs/jotai-devtools/issues"
463464
rel="noreferrer noopener"
464-
style="text-decoration: underline;"
465+
style="color: var(--mantine-color-red-8); text-decoration: underline;"
465466
target="_blank"
466467
>
467468
Jotai DevTool's GitHub repo
@@ -487,6 +488,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
487488
stroke-linecap="round"
488489
stroke-linejoin="round"
489490
stroke-width="2"
491+
style="width: calc(1.125rem * var(--mantine-scale)); height: calc(1.125rem * var(--mantine-scale));"
490492
viewBox="0 0 24 24"
491493
xmlns="http://www.w3.org/2000/svg"
492494
>

‎__tests__/devtools/basic.test.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,13 @@ describe('DevTools - basic', () => {
3737

3838
it('should respect the position prop', async () => {
3939
customRender(<DevTools position="top-right" />);
40-
expect(screen.getByTitle('Open Jotai Devtools')).toHaveStyle({
41-
top: '0.2rem',
42-
right: '0.2rem',
43-
bottom: 'unset',
44-
left: 'unset',
45-
});
40+
const button = screen.getByTitle('Open Jotai Devtools');
41+
const style = button.getAttribute('style');
42+
43+
expect(style).toContain('top: 0.2rem');
44+
expect(style).toContain('right: 0.2rem');
45+
expect(style).toContain('left: unset');
46+
expect(style).toContain('bottom: unset');
4647
});
4748

4849
it('should resize the devtools upon dragging the resize bar', async () => {

‎__tests__/utils/useAtomDevtools.test.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ describe('useAtomDevtools', () => {
131131
<Counter />
132132
</StrictMode>,
133133
);
134-
expect(consoleWarn).not.toBeCalled();
134+
expect(consoleWarn).not.toHaveBeenCalled();
135135

136136
consoleWarn.mockRestore();
137137
});
@@ -159,13 +159,13 @@ describe('useAtomDevtools', () => {
159159
</StrictMode>,
160160
);
161161

162-
expect(extension.send).toBeCalledTimes(0);
162+
expect(extension.send).toHaveBeenCalledTimes(0);
163163
fireEvent.click(getByText('button'));
164164
await findByText('count: 1');
165-
expect(extension.send).toBeCalledTimes(1);
165+
expect(extension.send).toHaveBeenCalledTimes(1);
166166
fireEvent.click(getByText('button'));
167167
await findByText('count: 2');
168-
expect(extension.send).toBeCalledTimes(2);
168+
expect(extension.send).toHaveBeenCalledTimes(2);
169169
});
170170

171171
describe('when it receives an message of type...', () => {
@@ -193,18 +193,18 @@ describe('useAtomDevtools', () => {
193193
</StrictMode>,
194194
);
195195

196-
expect(extension.send).toBeCalledTimes(0);
196+
expect(extension.send).toHaveBeenCalledTimes(0);
197197
fireEvent.click(getByText('button'));
198198
await findByText('count: 1');
199-
expect(extension.send).toBeCalledTimes(1);
199+
expect(extension.send).toHaveBeenCalledTimes(1);
200200
act(() =>
201201
(extensionSubscriber as (message: any) => void)({
202202
type: 'ACTION',
203203
payload: JSON.stringify(0),
204204
}),
205205
);
206206
await findByText('count: 0');
207-
expect(extension.send).toBeCalledTimes(2);
207+
expect(extension.send).toHaveBeenCalledTimes(2);
208208
});
209209

210210
describe('DISPATCH and payload of type...', () => {
@@ -230,10 +230,10 @@ describe('useAtomDevtools', () => {
230230
</StrictMode>,
231231
);
232232

233-
expect(extension.send).toBeCalledTimes(0);
233+
expect(extension.send).toHaveBeenCalledTimes(0);
234234
fireEvent.click(getByText('button'));
235235
await findByText('count: 1');
236-
expect(extension.send).toBeCalledTimes(1);
236+
expect(extension.send).toHaveBeenCalledTimes(1);
237237
fireEvent.click(getByText('button'));
238238
await findByText('count: 2');
239239
act(() =>
@@ -243,7 +243,7 @@ describe('useAtomDevtools', () => {
243243
}),
244244
);
245245
await findByText('count: 2');
246-
expect(extension.init).toBeCalledWith(2);
246+
expect(extension.init).toHaveBeenCalledWith(2);
247247
});
248248

249249
it('[DEV-ONLY] dispatch & IMPORT_STATE', async () => {
@@ -271,10 +271,10 @@ describe('useAtomDevtools', () => {
271271
const nextLiftedState = {
272272
computedStates: [{ state: 5 }, { state: 6 }],
273273
};
274-
expect(extension.send).toBeCalledTimes(0);
274+
expect(extension.send).toHaveBeenCalledTimes(0);
275275
fireEvent.click(getByText('button'));
276276
await findByText('count: 1');
277-
expect(extension.send).toBeCalledTimes(1);
277+
expect(extension.send).toHaveBeenCalledTimes(1);
278278
fireEvent.click(getByText('button'));
279279
await findByText('count: 2');
280280
act(() =>
@@ -283,7 +283,7 @@ describe('useAtomDevtools', () => {
283283
payload: { type: 'IMPORT_STATE', nextLiftedState },
284284
}),
285285
);
286-
expect(extension.init).toBeCalledWith(5);
286+
expect(extension.init).toHaveBeenCalledWith(5);
287287
await findByText('count: 6');
288288
});
289289

@@ -310,10 +310,10 @@ describe('useAtomDevtools', () => {
310310
</StrictMode>,
311311
);
312312

313-
expect(extension.send).toBeCalledTimes(0);
313+
expect(extension.send).toHaveBeenCalledTimes(0);
314314
fireEvent.click(getByText('button'));
315315
await findByText('count: 1');
316-
expect(extension.send).toBeCalledTimes(1);
316+
expect(extension.send).toHaveBeenCalledTimes(1);
317317
act(() =>
318318
(extensionSubscriber as (message: any) => void)({
319319
type: 'DISPATCH',
@@ -322,12 +322,12 @@ describe('useAtomDevtools', () => {
322322
}),
323323
);
324324
await findByText('count: 0');
325-
expect(extension.send).toBeCalledTimes(1);
325+
expect(extension.send).toHaveBeenCalledTimes(1);
326326
fireEvent.click(getByText('button'));
327327
await findByText('count: 1');
328328
fireEvent.click(getByText('button'));
329329
await findByText('count: 2');
330-
expect(extension.send).toBeCalledTimes(3);
330+
expect(extension.send).toHaveBeenCalledTimes(3);
331331
});
332332
});
333333
});

0 commit comments

Comments
 (0)