Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 23f9da5

Browse files
chore: upgrade storybook
1 parent 5355d8b commit 23f9da5

File tree

8 files changed

+1847
-5271
lines changed

8 files changed

+1847
-5271
lines changed

‎.storybook/main.js

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,28 @@
11
module.exports = {
22
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
3-
addons: [
4-
{
5-
name: '@storybook/addon-postcss',
6-
options: {
7-
postcssLoaderOptions: {
8-
implementation: require('postcss'),
9-
postcssOptions: {
10-
plugins: {
11-
tailwindcss: {},
12-
autoprefixer: {},
13-
},
14-
},
15-
},
3+
4+
addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
5+
name: '@storybook/preset-scss',
6+
options: {
7+
rule: {
8+
test: /\.module\.s[ca]ss$/,
169
},
17-
},
18-
'@storybook/addon-links',
19-
'@storybook/addon-essentials',
20-
{
21-
name: '@storybook/preset-scss',
22-
options: {
23-
rule: {
24-
test: /\.module\.s[ca]ss$/,
25-
},
26-
cssLoaderOptions: {
27-
modules: {
28-
localIdentName: '[name]__[local]--[hash:base64:5]',
29-
},
10+
cssLoaderOptions: {
11+
modules: {
12+
localIdentName: '[name]__[local]--[hash:base64:5]',
3013
},
3114
},
3215
},
33-
],
16+
}, '@storybook/addon-webpack5-compiler-swc'],
17+
3418
// https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
3519
typescript: {
3620
check: true, // type-check stories during Storybook build
3721
// reactDocgen: false, // https://github.com/storybookjs/storybook/issues/15336
3822
},
23+
24+
framework: {
25+
name: '@storybook/react-webpack5',
26+
options: {}
27+
}
3928
};

‎.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import '/stories/styles.css';
33
// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
44
export const parameters = {
55
// https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
6-
actions: {argTypesRegex: '^on.*'},
6+
actions: {},
77
};

‎package.json

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"main": "dist/index.js",
2626
"typings": "dist/index.d.ts",
2727
"engines": {
28-
"node": ">=10"
28+
"node": ">=18"
2929
},
3030
"scripts": {
3131
"start": "tsdx watch",
@@ -36,8 +36,8 @@
3636
"prepare": "tsdx build",
3737
"size": "size-limit",
3838
"analyze": "size-limit --why",
39-
"storybook": "start-storybook -p 6006",
40-
"build-storybook": "build-storybook",
39+
"storybook": "storybook dev -p 6006",
40+
"build-storybook": "storybook build",
4141
"release": "np"
4242
},
4343
"jest": {
@@ -97,31 +97,33 @@
9797
"devDependencies": {
9898
"@babel/core": "^7.17.8",
9999
"@size-limit/preset-small-lib": "^6.0.4",
100-
"@storybook/addon-essentials": "^6.4.20",
101-
"@storybook/addon-links": "^6.4.20",
102-
"@storybook/addon-postcss": "^2.0.0",
103-
"@storybook/addons": "^6.4.20",
100+
"@storybook/addon-essentials": "^8.5.3",
101+
"@storybook/addon-links": "^8.5.3",
102+
"@storybook/addon-webpack5-compiler-swc": "^2.0.0",
104103
"@storybook/preset-scss": "^1.0.3",
105-
"@storybook/react": "^6.4.20",
104+
"@storybook/react": "^8.5.3",
105+
"@storybook/react-webpack5": "^8.5.3",
106106
"@testing-library/jest-dom": "^5.16.1",
107107
"@testing-library/react": "^12.1.2",
108108
"@types/jest": "^27.0.3",
109-
"@types/react": "^17.0.35",
110-
"@types/react-dom": "^17.0.11",
109+
"@types/react": "^19.0.0",
110+
"@types/react-dom": "^19.0.0",
111+
"autoprefixer": "^10.4.20",
111112
"babel-jest": "^27.5.1",
112113
"babel-loader": "^8.2.4",
113114
"css-loader": "^5.0.0",
114115
"husky": "^7.0.4",
115116
"np": "^7.7.0",
116117
"postcss": "^8",
117-
"react": "^17.0.2",
118-
"react-dom": "^17.0.2",
118+
"react": "^19.0.0",
119+
"react-dom": "^19.0.0",
119120
"react-hooks-testing-library": "^0.6.0",
120121
"react-is": "^17.0.2",
121122
"react-test-renderer": "^17.0.1",
122123
"sass": "^1.49.11",
123124
"sass-loader": "^10.1.0",
124125
"size-limit": "^6.0.4",
126+
"storybook": "^8.5.3",
125127
"style-loader": "^2.0.0",
126128
"tailwindcss": "^2.2.19",
127129
"tsdx": "^0.14.1",

‎src/components/ParallaxProvider/index.test.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* global describe, it */
22

33
import React from 'react';
4-
import ReactDOMfrom 'react-dom';
4+
import {createRoot}from 'react-dom/client';
55
import { ParallaxController } from 'parallax-controller';
66

77
import { render } from '@testing-library/react';
@@ -19,11 +19,11 @@ describe('A <ParallaxProvider>', () => {
1919
};
2020

2121
const render = () => {
22-
ReactDOM.render(
22+
const root = createRoot(node);
23+
root.render(
2324
<ParallaxProvider>
2425
<Child />
25-
</ParallaxProvider>,
26-
node
26+
</ParallaxProvider>
2727
);
2828
};
2929

@@ -161,26 +161,26 @@ describe('A <ParallaxProvider>', () => {
161161
instance = useParallaxController();
162162
return null;
163163
};
164-
ReactDOM.render(
165-
// @ts-ignore
164+
165+
const root = createRoot(node);
166+
root.render(
166167
<ParallaxProvider>
167168
<GetInstance />
168-
</ParallaxProvider>,
169-
node
169+
</ParallaxProvider>
170170
);
171-
return instance;
171+
return {instance, root };
172172
};
173173

174174
// first instance mounted
175-
const instance1 = render(node1);
175+
const {instance: instance1,root: root1} = render(node1);
176176
expect(instance1).toBeInstanceOf(ParallaxController);
177177

178178
// second instance mounted
179-
const instance2 = render(node2);
179+
const {instance: instance2} = render(node2);
180180
expect(instance2).toBeInstanceOf(ParallaxController);
181181

182182
// unmount first instance
183-
ReactDOM.unmountComponentAtNode(node1);
183+
root1.unmount();
184184

185185
// this must still be defined
186186
expect(instance2).toBeInstanceOf(ParallaxController);

‎src/testUtils/MockProvider.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1-
import React, { Component } from 'react';
1+
import React, { Component,ReactNode } from 'react';
22
import PropTypes from 'prop-types';
33
import { ParallaxContext } from '../../src/context/ParallaxContext';
44
import { ParallaxController } from 'parallax-controller';
55

6-
export class MockProvider extends Component {
6+
export class MockProvider extends Component<{
7+
children: ReactNode;
8+
controllerMock: ParallaxController;
9+
}> {
710
static propTypes = {
811
children: PropTypes.node.isRequired,
912
controllerMock: PropTypes.object.isRequired,
1013
};
1114
controller: ParallaxController;
1215

13-
constructor(props: { controllerMock: ParallaxController }) {
16+
constructor(props: {
17+
children: ReactNode;
18+
controllerMock: ParallaxController;
19+
}) {
1420
super(props);
1521
this.controller = props.controllerMock;
1622
}

‎src/testUtils/expectRenderError.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable */
22
const React = require('react');
3-
const ReactDOM= require('react-dom');
3+
const { createRoot }= require('react-dom/client');
44

55
export default function expectRenderError(
66
element: any,
@@ -32,8 +32,9 @@ export default function expectRenderError(
3232
const div = document.createElement('div');
3333
window.addEventListener('error', handleTopLevelError);
3434
try {
35+
const root = createRoot(div);
3536
// @ts-ignore
36-
ReactDOM.render(<TestBoundary>{element}</TestBoundary>, div);
37+
root.render(<TestBoundary>{element}</TestBoundary>, div);
3738
} finally {
3839
window.removeEventListener('error', handleTopLevelError);
3940
}

‎stories/styles.css

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@
22
@tailwind components;
33
@tailwind utilities;
44
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
5-
65
html {
76
height: 100%;
87
}
98
body,
10-
#root {
9+
#storybook-root {
1110
display: flex !important;
1211
min-width: 100%;
1312
min-height: 100%;
1413
}
15-
1614
body {
1715
padding: 0 !important;
1816
margin: 0;
@@ -22,7 +20,6 @@ body {
2220
background-image: url('static/bg-grid.svg');
2321
background-color: #222;
2422
}
25-
2623
.scroll-container {
2724
position: fixed;
2825
top: 50px;
@@ -52,7 +49,6 @@ body {
5249
transform: translate3d(-50%, 0, 0);
5350
top: 60px;
5451
}
55-
5652
.vertical {
5753
width: 100%;
5854
min-height: 300vh;
@@ -74,7 +70,6 @@ body {
7470
z-index: 1000;
7571
transform: translate3d(-50%, 0, 0);
7672
}
77-
7873
.horizontal {
7974
height: 100%;
8075
min-width: 300vw;
@@ -96,11 +91,9 @@ body {
9691
z-index: 1000;
9792
transform: translate3d(-50%, 0, 0);
9893
}
99-
10094
.parallax-outer {
10195
background-color: rgba(255, 255, 255, 0.05);
10296
}
103-
10497
.parallax-inner {
10598
will-change: transform;
10699
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /