Merge pull request #48 from literalpie/sb-7

Storybook 7 support

.storybook/main.js

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

jest.config.js

@@ -15,8 +15,10 @@ module.exports = {
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.js'],
   coverageReporters: ['lcov'],
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
   testEnvironment: 'jest-environment-jsdom',
   setupFiles: [],
-  testURL: 'http://localhost',
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
 };

package.json

@@ -23,59 +23,63 @@
     "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist",
     "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "prerelease": "node check-metadata.js",
     "release": "npm run build && auto shipit"
   },
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
-    "core-js": "^3.8.2",
+    "copy-to-clipboard": "^3.3.3",
+    "core-js": "^3.29.0",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
-    "lodash": "^4.17.20",
-    "prop-types": "^15.7.2",
-    "qs": "^6.10.0",
-    "react-colorful": "^5.1.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.8.1",
+    "qs": "^6.11.1",
+    "react-colorful": "^5.6.1",
     "react-lifecycles-compat": "^3.0.4",
-    "react-select": "^3.2.0"
+    "react-select": "^5.7.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@emotion/jest": "^11.3.0",
-    "@storybook/react": "^6.4.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/escape-html": "^1.0.1",
-    "@types/lodash": "^4.14.168",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@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",
+    "@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/react-lifecycles-compat": "^3.0.1",
     "@types/react-select": "^3.1.2",
-    "@types/webpack-env": "^1.16.0",
-    "auto": "^10.3.0",
-    "babel-loader": "^8.1.0",
-    "chalk": "^2.4.2",
-    "concurrently": "^5.3.0",
-    "jest": "^27.0.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^3.9.7"
+    "@types/webpack-env": "^1.18.0",
+    "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": "^7.0.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.4.0",
-    "@storybook/api": "^6.4.0",
-    "@storybook/components": "^6.4.0",
-    "@storybook/core-events": "^6.4.0",
-    "@storybook/theming": "^6.4.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.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"
   },
   "peerDependenciesMeta": {
     "react": {

scripts/jest.init.js

@@ -6,6 +6,10 @@ import '@testing-library/jest-dom';
  */
 const consoleError = global.console.error;
 global.console.error = (...args) => {
+  const reactDomError = (args[0].toString()).includes('ReactDOM.render');
+  if (reactDomError) {
+    return;
+  }
   consoleError(...args);
   throw new Error(JSON.stringify(args));
 }

src/KnobManager.ts

@@ -1,8 +1,9 @@
 /* eslint no-underscore-dangle: 0 */
 
-import { navigator } from 'global';
+// 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/client-api';
+import { getQueryParams } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 
 import KnobStore, { KnobStoreKnob } from './KnobStore';
@@ -11,6 +12,8 @@ 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-')) {

src/KnobStore.ts

@@ -36,7 +36,7 @@ export default class KnobStore {
     if (this.timer) {
       clearTimeout(this.timer);
     }
-    this.timer = setTimeout(callAll, 50, this.callbacks) as number;
+    this.timer = setTimeout(callAll, 50, this.callbacks) as unknown as number;
   }
 
   update(key: string, options: Partial<KnobStoreKnob>) {

src/components/Panel.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { TabsState } from '@storybook/components';
 
@@ -13,7 +13,9 @@ type CreateMocked<Type> = {
   [Property in keyof Type]: jest.Mock & Type[Property];
 };
 
-const createTestApi = (): CreateMocked<Pick<API, 'on' | 'off' | 'emit' | 'getQueryParam' | 'setQueryParams'>> => ({
+const createTestApi = (): CreateMocked<
+  Pick<API, 'on' | 'off' | 'emit' | 'getQueryParam' | 'setQueryParams'>
+> => ({
   on: jest.fn(() => () => {}),
   off: jest.fn(),
   emit: jest.fn(),
@@ -47,12 +49,10 @@ describe('Panel', () => {
   describe('setKnobs handler', () => {
     it('should read url params and set values for existing knobs', () => {
       const handlers = {};
-
       const testQueryParams = {
         'knob-foo': 'test string',
         bar: 'some other string',
       };
-
       const testApi = {
         on: (e, handler) => {
           handlers[e] = handler;
@@ -63,14 +63,12 @@ describe('Panel', () => {
         getQueryParam: (key) => testQueryParams[key],
         setQueryParams: jest.fn(),
       };
-
       render(
         <ThemeProvider theme={convert(themes.light)}>
           <Panel api={testApi} active />
         </ThemeProvider>
       );
       const setKnobsHandler = handlers[SET];
-
       const knobs = {
         foo: {
           name: 'foo',
@@ -83,8 +81,9 @@ describe('Panel', () => {
           type: 'text',
         },
       };
-
-      setKnobsHandler({ knobs, timestamp: +new Date() });
+      act(() => {
+        setKnobsHandler({ knobs, timestamp: +new Date() });
+      });
       const knobFromUrl = {
         name: 'foo',
         value: testQueryParams['knob-foo'],

src/components/Panel.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, Fragment, Validator } from 'react';
+import React, { PureComponent, Fragment, Validator, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import qs from 'qs';
 import { document } from 'global';
@@ -25,11 +25,13 @@ const getTimestamp = () => +new Date();
 
 export const DEFAULT_GROUP_ID = 'Other';
 
-const PanelWrapper = styled(({ children, className }) => (
-  <ScrollArea horizontal vertical className={className}>
-    {children}
-  </ScrollArea>
-))({
+const PanelWrapper = styled(
+  ({ children, className }: { children: ReactNode; className?: string }) => (
+    <ScrollArea horizontal vertical className={className}>
+      {children}
+    </ScrollArea>
+  )
+)({
   height: '100%',
   width: '100%',
 });

src/components/types/Array.test.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ThemeProvider, themes, convert } from '@storybook/theming';
 import ArrayType from './Array';
 
 describe('Array', () => {
-  it('should subscribe to setKnobs event of channel', () => {
+  // copied from https://github.com/Andarist/react-textarea-autosize/blob/ab4c1ec20b41ea35f7962da13eb086fdc4832a81/src/__tests__/index.test.js
+  beforeAll(() => {
+    Object.defineProperty(document, 'fonts', {
+      value: { addEventListener() {}, removeEventListener() {} },
+    });
+  });
+
+  it('should subscribe to setKnobs event of channel', async () => {
     const onChange = jest.fn();
     render(
       <ThemeProvider theme={convert(themes.light)}>
@@ -17,7 +24,9 @@ describe('Array', () => {
     );
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('Fishing,Skiing');
-    userEvent.type(input, ',');
+    await act(async () => {
+      await userEvent.type(input, ',');
+    });
     expect(onChange).toHaveBeenLastCalledWith(['Fishing', 'Skiing', '']);
   });
 

src/components/types/Files.tsx

@@ -57,7 +57,7 @@ FilesType.defaultProps = {
 FilesType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-  }) as Validator<FilesTypeProps['knob']>,
+  }) as unknown as Validator<FilesTypeProps['knob']>,
   onChange: PropTypes.func as Validator<FilesTypeProps['onChange']>,
 };
 

src/components/types/Options.tsx

@@ -105,7 +105,7 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
         value={defaultValue}
         options={options}
         isMulti={isMulti}
-        onChange={handleChange}
+        onChange={handleChange as any}
       />
     );
   }
@@ -124,7 +124,7 @@ OptionsType.propTypes = {
     name: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     options: PropTypes.object,
-  }) as Validator<OptionsTypeProps<any>['knob']>,
+  }) as unknown as Validator<OptionsTypeProps<any>['knob']>,
   display: PropTypes.oneOf<OptionsKnobOptionsDisplay>([
     'radio',
     'inline-radio',

src/index.ts

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

src/register.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/addons';
 import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 import { createTitleListener } from './title';

src/registerKnobs.ts

@@ -1,5 +1,5 @@
-import addons from '@storybook/addons';
-import { useEffect } from '@storybook/client-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';
 

tsconfig.json

@@ -22,4 +22,4 @@
   "exclude": [
     "src/**/*.test.*"
   ]
-}
+}