Storybook 8

.github/workflows/push.yml

@@ -11,10 +11,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 16
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: npm install, build, and lint
         run: |
           yarn

.github/workflows/release.yml

@@ -15,10 +15,10 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Create Release
         env:

package.json

@@ -35,12 +35,12 @@
     "release": "auto shipit"
   },
   "dependencies": {
-    "@storybook/addons": "^7.0.0",
-    "@storybook/manager-api": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/core-events": "^7.0.0",
+    "@storybook/components": "^8.0.0",
+    "@storybook/core-events": "^8.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/theming": "^7.0.0",
+    "@storybook/icons": "^1.2.5",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "fast-deep-equal": "^3.1.3",
     "memoizerific": "^1.11.3"
   },
@@ -50,9 +50,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/builder-vite": "7.0.0",
-    "@storybook/react": "7.0.0",
-    "@storybook/react-vite": "7.0.0",
+    "@storybook/builder-vite": "8.0.0",
+    "@storybook/react": "8.0.0",
+    "@storybook/react-vite": "8.0.0",
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "5.45.1",
@@ -72,22 +72,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "storybook": "7.0.0",
+    "storybook": "8.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
-    "vite": "^4.1.4"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
+    "vite": "^5.1.3"
   },
   "auto": {
     "extends": "hipstersmoothie"

src/Tool.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { global } from '@storybook/global';
 import { themes, ThemeVars } from '@storybook/theming';
 import { IconButton } from '@storybook/components';
+import { MoonIcon, SunIcon } from '@storybook/icons';
 import {
   STORY_CHANGED,
   SET_STORIES,
@@ -11,9 +12,6 @@ import { API, useParameter } from '@storybook/manager-api';
 import equal from 'fast-deep-equal';
 import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from './constants';
 
-import { Sun } from './icons/Sun';
-import { Moon } from './icons/Moon';
-
 const { document, window } = global as { document: Document; window: Window };
 const modes = ['light', 'dark'] as const;
 type Mode = typeof modes[number];
@@ -260,7 +258,7 @@ export function DarkMode({ api }: DarkModeProps) {
       }
       onClick={handleIconClick}
     >
-      {isDark ? <Sun /> : <Moon />}
+      {isDark ? <SunIcon aria-hidden="true" /> : <MoonIcon aria-hidden="true" />}
     </IconButton>
   );
 }

src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { DARK_MODE_EVENT_NAME } from './constants';
 import { store } from './Tool';
 

src/preset/manager.tsx

@@ -1,4 +1,5 @@
-import { addons, types } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
+import { Addon_TypesEnum } from '@storybook/types';
 import { themes } from '@storybook/theming';
 import * as React from 'react';
 
@@ -18,7 +19,7 @@ addons.setConfig({
 addons.register('storybook/dark-mode', (api) => {
   addons.add('storybook/dark-mode', {
     title: 'dark mode',
-    type: types.TOOL,
+    type: Addon_TypesEnum.TOOL,
     match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
     render: () => <Tool api={api} />,
   });

tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src/**/*", "typings/**/*"]
+  "include": ["src/**/*"]
 }