Merge pull request #56 from literalpie/storybook-8

Storybook 8 support

.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["../preset"],
+  addons: ["../preset", "@storybook/addon-webpack5-compiler-babel"],
   framework: {
     name: "@storybook/react-webpack5",
     options: {}

package.json

@@ -48,8 +48,10 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@emotion/jest": "^11.10.5",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-webpack5": "^7.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.0",
+    "@storybook/components": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -68,15 +70,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
-    "storybook": "^7.0.0",
+    "storybook": "^8.0.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@storybook/addons": "^7.0.0",
-    "@storybook/api": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/core-events": "^7.0.0",
-    "@storybook/theming": "^7.0.0",
+    "@storybook/api": "^8.0.0",
+    "@storybook/components": "^8.0.0",
+    "@storybook/core-events": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

src/KnobManager.ts

@@ -3,27 +3,14 @@
 // navigator exists in Jest but not the browser. global exists in the browser but not Jest
 import { navigator as gNavigator, global } from 'global';
 import escape from 'escape-html';
-import { getQueryParams } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 
 import KnobStore, { KnobStoreKnob } from './KnobStore';
 import { Knob, KnobType, Mutable } from './type-defs';
 import { SET } from './shared';
 
-import { deserializers } from './converters';
-
 const navigator: Navigator = gNavigator || global.navigator;
 
-const knobValuesFromUrl: Record<string, string> = Object.entries(getQueryParams()).reduce(
-  (acc, [k, v]) => {
-    if (k.includes('knob-')) {
-      return { ...acc, [k.replace('knob-', '')]: v };
-    }
-    return acc;
-  },
-  {}
-);
-
 // This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
 const PANEL_UPDATE_INTERVAL = 400;
 
@@ -105,16 +92,7 @@ export default class KnobManager {
       label: name,
     };
 
-    if (knobValuesFromUrl[knobName]) {
-      const value = deserializers[options.type](knobValuesFromUrl[knobName]);
-
-      knobInfo.defaultValue = value;
-      knobInfo.value = value;
-
-      delete knobValuesFromUrl[knobName];
-    } else {
-      knobInfo.defaultValue = options.value;
-    }
+    knobInfo.defaultValue = options.value;
 
     knobStore.set(knobName, knobInfo as KnobStoreKnob);
     return this.getKnobValue(knobStore.get(knobName));

src/components/Panel.tsx

@@ -14,7 +14,7 @@ import {
   Link,
   ScrollArea,
 } from '@storybook/components';
-import { API } from '@storybook/api';
+import { API } from '@storybook/manager-api';
 import { RESET, SET, CHANGE, SET_OPTIONS, CLICK } from '../shared';
 
 import { getKnobControl } from './types';

src/components/types/Color.tsx

@@ -4,7 +4,7 @@ import React, { Component, Validator } from 'react';
 import { RgbaStringColorPicker } from 'react-colorful';
 
 import { styled } from '@storybook/theming';
-import { Form } from '@storybook/components';
+import { Button } from '@storybook/components';
 import { KnobControlConfig, KnobControlProps } from './types';
 
 type ColorTypeKnobValue = string;
@@ -23,8 +23,6 @@ interface ColorButtonProps {
   onClick: () => any;
 }
 
-const { Button } = Form;
-
 const Swatch = styled.div<{}>(({ theme }) => ({
   position: 'absolute',
   top: '50%',
@@ -123,7 +121,7 @@ export default class ColorType extends Component<ColorTypeProps, ColorTypeState>
         type="button"
         name={knob.name}
         onClick={this.handleClick}
-        size="flex"
+        size="small"
       >
         {knob.value && knob.value.toUpperCase()}
         <Swatch style={colorStyle} />

src/index.ts

@@ -1,4 +1,4 @@
-import { makeDecorator, addons } from '@storybook/addons';
+import { makeDecorator, addons } from '@storybook/preview-api';
 
 import { SET_OPTIONS } from './shared';
 import { manager, registerKnobs } from './registerKnobs';

src/register.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { addons } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 import { createTitleListener } from './title';
 
 addons.register(ADDON_ID, (api) => {
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
     title: createTitleListener(api),
-    render: ({ active, key }) => <Panel api={api} key={key} active={active} />,
+    render: ({ active }) => <Panel api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
 });

src/registerKnobs.ts

@@ -1,5 +1,4 @@
-import { addons } from '@storybook/addons';
-import { useEffect } from '@storybook/preview-api';
+import { useEffect, addons } from '@storybook/preview-api';
 import { STORY_CHANGED, FORCE_RE_RENDER } from '@storybook/core-events';
 import debounce from 'lodash/debounce';
 

src/title.ts

@@ -1,4 +1,4 @@
-import { API } from '@storybook/api';
+import { API } from '@storybook/manager-api';
 import { SET } from './shared';
 import { KnobStoreKnob } from './KnobStore';