feat: storybook 8 support (#60)

BREAKING CHANGE: Storybook 8 is now required

.github/workflows/release.yml

@@ -7,18 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Prepare repository
         run: |
           git fetch --unshallow --tags
           git config user.name "GitHub Actions Bot"
           git config user.email "[email protected]"
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.github/workflows/tests-unit.yml

@@ -7,10 +7,10 @@ jobs:
     name: Core Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "16.x"
+          node-version: '20.x'
           cache: yarn
       - name: install
         run: |

.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

@@ -24,10 +24,13 @@
     "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
-    "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
+    "start": "concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"",
     "build-storybook": "storybook build",
     "release": "npm run build && auto shipit"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.29.0",
@@ -48,15 +51,17 @@
     "@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",
     "@testing-library/user-event": "^14.4.3",
     "@types/escape-html": "^1.0.2",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.12.12",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-select": "^3.1.2",
     "@types/webpack-env": "^1.18.0",
@@ -68,15 +73,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';
@@ -283,7 +283,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
             <TabsState>
               {entries.map(([k, v]) => (
                 <div id={k} key={k} title={v.title}>
-                  {v.render}
+                  {v.render as unknown as ReactNode}
                 </div>
               ))}
             </TabsState>

src/components/types/Boolean.tsx

@@ -29,7 +29,7 @@ const deserialize = (value: string | null) => value === 'true';
 const BooleanType: FunctionComponent<BooleanTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => (
+} = ({ knob = {} as any, onChange = (value)=>value }) => (
   <Input
     id={knob.name}
     name={knob.name}
@@ -39,11 +39,6 @@ const BooleanType: FunctionComponent<BooleanTypeProps> & {
   />
 );
 
-BooleanType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 BooleanType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

src/components/types/Button.tsx

@@ -19,17 +19,12 @@ const deserialize = (): undefined => undefined;
 const ButtonType: FunctionComponent<ButtonTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onClick }) => (
+} = ({ knob = {} as any, onClick = ()=>{} }) => (
   <Form.Button type="button" name={knob.name} onClick={() => onClick(knob)}>
     {knob.name}
   </Form.Button>
 );
 
-ButtonType.defaultProps = {
-  knob: {} as any,
-  onClick: () => {},
-};
-
 ButtonType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

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/components/types/Files.tsx

@@ -34,7 +34,7 @@ const deserialize = (): undefined => undefined;
 const FilesType: FunctionComponent<FilesTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => (
+} = ({ knob = {} as any, onChange = (value)=>value }) => (
   <FileInput
     type="file"
     name={knob.name}
@@ -49,11 +49,6 @@ const FilesType: FunctionComponent<FilesTypeProps> & {
   />
 );
 
-FilesType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 FilesType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

src/components/types/Options.tsx

@@ -70,7 +70,7 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
 } = (props) => {
-  const { knob, onChange } = props;
+  const { knob = {} as any, onChange = (value)=>value } = props;
   const { display } = knob.optionsObj;
 
   if (display === 'check' || display === 'inline-check') {
@@ -113,11 +113,6 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   return null;
 };
 
-OptionsType.defaultProps = {
-  knob: {} as any,
-  display: 'select',
-  onChange: (value) => value,
-};
 
 OptionsType.propTypes = {
   knob: PropTypes.shape({

src/components/types/Select.tsx

@@ -28,7 +28,7 @@ const deserialize = (value: SelectTypeKnobValue) => value;
 const SelectType: FunctionComponent<SelectTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => {
+} = ({ knob = {} as any, onChange = (value)=>value }) => {
   const { options } = knob;
 
   const callbackReduceArrayOptions = (acc: any, option: any, i: number) => {
@@ -67,11 +67,6 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
   );
 };
 
-SelectType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 SelectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

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';