Revert 8.0 changes (#59)

These were released as a 7.1 version when they should have been released as 8.0. We need to revert so we can release a fixed 7.1.1 version (like 7.0.2). After that, we'll do another attempt at 8.0.

.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@v4
+      - uses: actions/checkout@v2
 
       - 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 20.x
-        uses: actions/setup-node@v4
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 20.x
+          node-version: 16.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@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          node-version: '20.x'
+          node-version: "16.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", "@storybook/addon-webpack5-compiler-babel"],
+  addons: ["../preset"],
   framework: {
     name: "@storybook/react-webpack5",
     options: {}

package.json

@@ -24,13 +24,10 @@
     "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
-    "start": "concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"",
+    "start": "concurrently \"npm run storybook -- --no-manager-cache --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",
@@ -51,36 +48,35 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@emotion/jest": "^11.10.5",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/react": "^8.0.0",
-    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-webpack5": "^7.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": "^20.12.12",
+    "@types/node": "^18.15.11",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-select": "^3.1.2",
     "@types/webpack-env": "^1.18.0",
-    "auto": "^11.1.6",
+    "auto": "^10.43.0",
     "chalk": "^5.2.0",
     "concurrently": "^7.6.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
-    "storybook": "^8.0.0",
+    "storybook": "^7.0.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@storybook/api": "^8.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/core-events": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
+    "@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",
     "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,14 +3,27 @@
 // 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;
 
@@ -92,7 +105,16 @@ export default class KnobManager {
       label: name,
     };
 
-    knobInfo.defaultValue = options.value;
+    if (knobValuesFromUrl[knobName]) {
+      const value = deserializers[options.type](knobValuesFromUrl[knobName]);
+
+      knobInfo.defaultValue = value;
+      knobInfo.value = value;
+
+      delete knobValuesFromUrl[knobName];
+    } else {
+      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/manager-api';
+import { API } from '@storybook/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 as unknown as ReactNode}
+                  {v.render}
                 </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 = {} as any, onChange = (value)=>value }) => (
+} = ({ knob, onChange }) => (
   <Input
     id={knob.name}
     name={knob.name}
@@ -39,6 +39,11 @@ 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,12 +19,17 @@ const deserialize = (): undefined => undefined;
 const ButtonType: FunctionComponent<ButtonTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob = {} as any, onClick = ()=>{} }) => (
+} = ({ knob, 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 { Button } from '@storybook/components';
+import { Form } from '@storybook/components';
 import { KnobControlConfig, KnobControlProps } from './types';
 
 type ColorTypeKnobValue = string;
@@ -23,6 +23,8 @@ interface ColorButtonProps {
   onClick: () => any;
 }
 
+const { Button } = Form;
+
 const Swatch = styled.div<{}>(({ theme }) => ({
   position: 'absolute',
   top: '50%',
@@ -121,7 +123,7 @@ export default class ColorType extends Component<ColorTypeProps, ColorTypeState>
         type="button"
         name={knob.name}
         onClick={this.handleClick}
-        size="small"
+        size="flex"
       >
         {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 = {} as any, onChange = (value)=>value }) => (
+} = ({ knob, onChange }) => (
   <FileInput
     type="file"
     name={knob.name}
@@ -49,6 +49,11 @@ 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 = {} as any, onChange = (value)=>value } = props;
+  const { knob, onChange } = props;
   const { display } = knob.optionsObj;
 
   if (display === 'check' || display === 'inline-check') {
@@ -113,6 +113,11 @@ 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 = {} as any, onChange = (value)=>value }) => {
+} = ({ knob, onChange }) => {
   const { options } = knob;
 
   const callbackReduceArrayOptions = (acc: any, option: any, i: number) => {
@@ -67,6 +67,11 @@ 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/preview-api';
+import { makeDecorator, addons } from '@storybook/addons';
 
 import { SET_OPTIONS } from './shared';
 import { manager, registerKnobs } from './registerKnobs';

src/register.tsx

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

src/registerKnobs.ts

@@ -1,4 +1,5 @@
-import { useEffect, addons } from '@storybook/preview-api';
+import { addons } from '@storybook/addons';
+import { useEffect } 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/manager-api';
+import { API } from '@storybook/api';
 import { SET } from './shared';
 import { KnobStoreKnob } from './KnobStore';