Merge branch 'jeppe/react-prerelease-sandboxes' of github.com:storybo…

…okjs/storybook into jeppe/temp-gen-react-prerelease-sandboxes
storybookjs · May 3, 2024 · 78e3758 · 78e3758
2 parents 40cda2f + ea2f38c
commit 78e3758
Show file tree

Hide file tree

Showing 207 changed files with 13,238 additions and 3,273 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -124,7 +124,7 @@ jobs:
             yarn docs:prettier:check
   build:
     executor:
-      class: large
+      class: xlarge
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,10 +1,12 @@
 <h1>Migration</h1>
 
-- [From version 8.0 to 8.1.0](#from-version-80-to-810)
+- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
   - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
       - [Title block](#title-block)
-- [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Portable stories](#portable-stories)
+    - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
+- [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Portable stories](#portable-stories-1)
     - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
     - [Type change in `composeStories` API](#type-change-in-composestories-api)
     - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
@@ -406,7 +408,27 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
-## From version 8.0 to 8.1.0
+## From version 8.0.x to 8.1.x
+
+### Portable stories
+
+#### @storybook/nextjs requires specific path aliases to be setup
+
+In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
+
+```js
+const nextJest = require("next/jest.js");
+const { getPackageAliases } = require("@storybook/nextjs/export-mocks");
+const createJestConfig = nextJest();
+const customJestConfig = {
+  moduleNameMapper: {
+    ...getPackageAliases(), // Add aliases for @storybook/nextjs mocks
+  },
+};
+module.exports = createJestConfig(customJestConfig);
+```
+
+This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
 
 ### Subtitle block and `parameters.componentSubtitle`
 
@@ -5066,7 +5088,7 @@ SB 5.1.0 added [support for project root `babel.config.js` files](https://github
 
 ### React native server
 
-Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
+Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
 
 5.1 refactors both pieces:
 

diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx
@@ -1,22 +1,23 @@
-import type { FC, PropsWithChildren } from 'react';
-import React, { Fragment } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import type { ElementRef, ReactNode } from 'react';
+import React, { forwardRef, Fragment, useEffect, useRef } from 'react';
 import type { Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
 
 import { Inspector } from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
 
-import { Action, InspectorContainer, Counter } from './style';
+import { Action, Counter, InspectorContainer } from './style';
 import type { ActionDisplay } from '../../models';
 
-const UnstyledWrapped: FC<PropsWithChildren<{ className?: string }>> = ({
-  children,
-  className,
-}) => (
-  <ScrollArea horizontal vertical className={className}>
-    {children}
-  </ScrollArea>
+const UnstyledWrapped = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
+  ({ children, className }, ref) => (
+    <ScrollArea ref={ref} horizontal vertical className={className}>
+      {children}
+    </ScrollArea>
+  )
 );
+UnstyledWrapped.displayName = 'UnstyledWrapped';
+
 export const Wrapper = styled(UnstyledWrapped)({
   margin: 0,
   padding: '10px 5px 20px',
@@ -39,24 +40,34 @@ interface ActionLoggerProps {
   onClear: () => void;
 }
 
-export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
-  <Fragment>
-    <Wrapper>
-      {actions.map((action: ActionDisplay) => (
-        <Action key={action.id}>
-          {action.count > 1 && <Counter>{action.count}</Counter>}
-          <InspectorContainer>
-            <ThemedInspector
-              sortObjectKeys
-              showNonenumerable={false}
-              name={action.data.name}
-              data={action.data.args || action.data}
-            />
-          </InspectorContainer>
-        </Action>
-      ))}
-    </Wrapper>
-
-    <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
-  </Fragment>
-);
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => {
+  const wrapperRef = useRef<ElementRef<typeof Wrapper>>(null);
+  const wrapper = wrapperRef.current;
+  const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
+
+  useEffect(() => {
+    // Scroll to bottom, when the action panel was already scrolled down
+    if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+  }, [wasAtBottom, actions.length]);
+
+  return (
+    <Fragment>
+      <Wrapper ref={wrapperRef}>
+        {actions.map((action: ActionDisplay) => (
+          <Action key={action.id}>
+            {action.count > 1 && <Counter>{action.count}</Counter>}
+            <InspectorContainer>
+              <ThemedInspector
+                sortObjectKeys
+                showNonenumerable={false}
+                name={action.data.name}
+                data={action.data.args ?? action.data}
+              />
+            </InspectorContainer>
+          </Action>
+        ))}
+      </Wrapper>
+      <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
+    </Fragment>
+  );
+};
diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx
@@ -63,12 +63,12 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
   addAction = (action: ActionDisplay) => {
     this.setState((prevState: ActionLoggerState) => {
       const actions = [...prevState.actions];
-      const previous = actions.length && actions[0];
+      const previous = actions.length && actions[actions.length - 1];
       if (previous && safeDeepEqual(previous.data, action.data)) {
         previous.count++;
       } else {
         action.count = 1;
-        actions.unshift(action);
+        actions.push(action);
       }
       return { actions: actions.slice(0, action.options.limit) };
     });

diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts
@@ -18,7 +18,26 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
     typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function'
   ) {
     const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
-    onMockCall((mock, args) => action(mock.getMockName())(args));
+    onMockCall((mock, args) => {
+      const name = mock.getMockName();
+
+      // TODO: Make this a configurable API in 8.2
+      if (
+        !/^next\/.*::/.test(name) ||
+        [
+          'next/router::useRouter()',
+          'next/navigation::useRouter()',
+          'next/navigation::redirect',
+          'next/cache::',
+          'next/headers::cookies().set',
+          'next/headers::cookies().delete',
+          'next/headers::headers().set',
+          'next/headers::headers().delete',
+        ].some((prefix) => name.startsWith(prefix))
+      ) {
+        action(name)(args);
+      }
+    });
     subscribed = true;
   }
 };

diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts
@@ -1,24 +1,27 @@
 import { global as globalThis } from '@storybook/global';
 import { spyOn } from '@storybook/test';
 
-export default {
+const meta = {
   component: globalThis.Components.Button,
-  loaders() {
+  beforeEach() {
     spyOn(console, 'log').mockName('console.log');
-  },
-  args: {
-    label: 'Button',
-  },
-  parameters: {
-    chromatic: { disable: true },
+    console.log('first');
   },
 };
 
+export default meta;
+
 export const ShowSpyOnInActions = {
+  parameters: {
+    chromatic: { disable: true },
+  },
+  beforeEach() {
+    console.log('second');
+  },
   args: {
+    label: 'Button',
     onClick: () => {
-      console.log('first');
-      console.log('second');
+      console.log('third');
     },
   },
 };
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -52,13 +52,15 @@
   },
   "dependencies": {
     "@storybook/blocks": "workspace:*",
+    "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview-api": "workspace:*",

diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx
@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import { dequal as deepEqual } from 'dequal';
+import React, { useEffect, useMemo, useState } from 'react';
+import { global } from '@storybook/global';
 import {
   useArgs,
   useGlobals,
@@ -8,19 +9,41 @@ import {
   useStorybookState,
 } from '@storybook/manager-api';
 import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
-
+import { styled } from '@storybook/theming';
 import type { ArgTypes } from '@storybook/types';
+
 import { PARAM_KEY } from './constants';
+import { SaveStory } from './SaveStory';
+
+// Remove undefined values (top-level only)
+const clean = (obj: { [key: string]: any }) =>
+  Object.entries(obj).reduce(
+    (acc, [key, value]) => (value !== undefined ? Object.assign(acc, { [key]: value }) : acc),
+    {} as typeof obj
+  );
+
+const AddonWrapper = styled.div({
+  display: 'grid',
+  gridTemplateRows: '1fr 39px',
+  height: '100%',
+  maxHeight: '100vh',
+  overflowY: 'auto',
+});
 
 interface ControlsParameters {
   sort?: SortType;
   expanded?: boolean;
   presetColors?: PresetColor[];
 }
 
-export const ControlsPanel: FC = () => {
+interface ControlsPanelProps {
+  saveStory: () => Promise<unknown>;
+  createStory: (storyName: string) => Promise<unknown>;
+}
+
+export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => {
   const [isLoading, setIsLoading] = useState(true);
-  const [args, updateArgs, resetArgs] = useArgs();
+  const [args, updateArgs, resetArgs, initialArgs] = useArgs();
   const [globals] = useGlobals();
   const rows = useArgTypes();
   const { expanded, sort, presetColors } = useParameter<ControlsParameters>(PARAM_KEY, {});
@@ -42,18 +65,28 @@ export const ControlsPanel: FC = () => {
     return acc;
   }, {} as ArgTypes);
 
+  const hasUpdatedArgs = useMemo(
+    () => !!args && !!initialArgs && !deepEqual(clean(args), clean(initialArgs)),
+    [args, initialArgs]
+  );
+
   return (
-    <ArgsTable
-      key={path} // resets state when switching stories
-      compact={!expanded && hasControls}
-      rows={withPresetColors}
-      args={args}
-      globals={globals}
-      updateArgs={updateArgs}
-      resetArgs={resetArgs}
-      inAddonPanel
-      sort={sort}
-      isLoading={isLoading}
-    />
+    <AddonWrapper>
+      <ArgsTable
+        key={path} // resets state when switching stories
+        compact={!expanded && hasControls}
+        rows={withPresetColors}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+        inAddonPanel
+        sort={sort}
+        isLoading={isLoading}
+      />
+      {hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && (
+        <SaveStory {...{ resetArgs, saveStory, createStory }} />
+      )}
+    </AddonWrapper>
   );
 };