Merge pull request #1 from iamdarshshah/feat/storybook-v7-upgrade

iamdarshshah · web-flow · commit ec62694b0632 · 2025-12-27T10:46:33.000-08:00
feat: upgrade Storybook from v5 to v7
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/stories/stories.tsx',
+  ],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};
diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
   "scripts": {
     "build": "rimraf dist && rollup -c",
     "prepublish": "yarn build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "codecov": "codecov",
     "lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "yarn lint --fix",
@@ -48,20 +48,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-info": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^7.0.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-webpack5": "^7.6.0",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/storybook__react": "^4.0.2",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "eslint": "^8",
     "eslint-config-prettier": "^10.1.8",
@@ -72,12 +71,12 @@
     "lint-staged": "^15.0.0",
     "prettier": "^2.8.0",
     "react": "^17.0.2",
-    "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",
     "rollup": "^1.26.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.25.2",
+    "storybook": "^7.6.0",
     "ts-jest": "^29.4.6",
     "typescript": "^4.9.0"
   },
diff --git a/src/stories/InfiniteScrollWithHeight.tsx b/src/stories/InfiniteScrollWithHeight.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from 'react-dom';
 import InfiniteScroll from '../index';
 
 const style = {
@@ -56,5 +55,3 @@ export default class App extends React.Component {
     );
   }
 }
-
-render(<App />, document.getElementById('root'));
diff --git a/src/stories/PullDownToRefreshInfScroll.tsx b/src/stories/PullDownToRefreshInfScroll.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from 'react-dom';
 import InfiniteScroll from '../index';
 
 const style = {
@@ -55,5 +54,3 @@ export default class App extends React.Component {
     );
   }
 }
-
-render(<App />, document.getElementById('root'));
diff --git a/src/stories/ScrollableTargetInfScroll.tsx b/src/stories/ScrollableTargetInfScroll.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from 'react-dom';
 import InfiniteScroll from '../index';
 
 const style = {
@@ -48,5 +47,3 @@ export default class App extends React.Component {
     );
   }
 }
-
-render(<App />, document.getElementById('root'));
diff --git a/src/stories/ScrolleableTop.tsx b/src/stories/ScrolleableTop.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from 'react-dom';
 import InfiniteScroll from '../index';
 
 const style = {
@@ -58,5 +57,3 @@ export default class App extends React.Component {
     );
   }
 }
-
-render(<App />, document.getElementById('root'));
diff --git a/src/stories/stories.tsx b/src/stories/stories.tsx
@@ -1,33 +1,40 @@
-import { storiesOf } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import WindowInf from './WindowInfiniteScrollComponent';
 import PullDownToRefreshInfScroll from './PullDownToRefreshInfScroll';
 import InfiniteScrollWithHeight from './InfiniteScrollWithHeight';
 import ScrollableTargetInfiniteScroll from './ScrollableTargetInfScroll';
 import ScrolleableTop from './ScrolleableTop';
 
-const stories = storiesOf('Components', module);
+const meta: Meta = {
+  title: 'Components',
+};
 
-stories.add('InfiniteScroll', () => <WindowInf />, {
-  info: { inline: true },
-});
+export default meta;
 
-stories.add('PullDownToRefresh', () => <PullDownToRefreshInfScroll />, {
-  info: { inline: true },
-});
+type Story = StoryObj;
 
-stories.add('InfiniteScrollWithHeight', () => <InfiniteScrollWithHeight />, {
-  info: { inline: true },
-});
+export const InfiniteScrollStory: Story = {
+  name: 'InfiniteScroll',
+  render: () => <WindowInf />,
+};
 
-stories.add(
-  'ScrollableTargetInfiniteScroll',
-  () => <ScrollableTargetInfiniteScroll />,
-  {
-    info: { inline: true },
-  }
-);
+export const PullDownToRefresh: Story = {
+  name: 'PullDownToRefresh',
+  render: () => <PullDownToRefreshInfScroll />,
+};
 
-stories.add('InfiniteScrollTop', () => <ScrolleableTop />, {
-  info: { inline: true },
-});
+export const InfiniteScrollWithHeightStory: Story = {
+  name: 'InfiniteScrollWithHeight',
+  render: () => <InfiniteScrollWithHeight />,
+};
+
+export const ScrollableTargetInfiniteScrollStory: Story = {
+  name: 'ScrollableTargetInfiniteScroll',
+  render: () => <ScrollableTargetInfiniteScroll />,
+};
+
+export const InfiniteScrollTop: Story = {
+  name: 'InfiniteScrollTop',
+  render: () => <ScrolleableTop />,
+};
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React from 'react';`
`2`		`-import { render } from 'react-dom';`
`3`	`2`	`import InfiniteScroll from '../index';`
`4`	`3`
`5`	`4`	`const style = {`
`@@ -56,5 +55,3 @@ export default class App extends React.Component {`
`56`	`55`	`);`
`57`	`56`	`}`
`58`	`57`	`}`
`59`		`-`
`60`		`-render(<App />, document.getElementById('root'));`