Release: Patch 8.0.2

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 8.0.2
+
+- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+- CLI: Add yarn1 package manager fallback for init in empty directory - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+
 ## 8.0.1
 
 - Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!

code/addons/a11y/src/components/Report/index.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { Placeholder } from '@storybook/components';
+import { EmptyTabContent } from '@storybook/components';
 import type { Result } from 'axe-core';
 
 import { Item } from './Item';
@@ -18,7 +18,7 @@ export const Report: FC<ReportProps> = ({ items, empty, type }) => (
     {items && items.length ? (
       items.map((item) => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
-      <Placeholder key="placeholder">{empty}</Placeholder>
+      <EmptyTabContent title={empty} />
     )}
   </Fragment>
 );

code/addons/interactions/src/components/EmptyState.tsx

@@ -1,43 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from '@storybook/components';
+import { Link, EmptyTabContent } from '@storybook/components';
 import { DocumentIcon, VideoIcon } from '@storybook/icons';
-import { Consumer, useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 
 import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
 
-const Wrapper = styled.div(({ theme }) => ({
-  height: '100%',
-  display: 'flex',
-  padding: 0,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  gap: 15,
-  background: theme.background.content,
-}));
-
-const Content = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4,
-  maxWidth: 415,
-});
-
-const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
-  textAlign: 'center',
-  color: theme.textColor,
-}));
-
-const Description = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  fontSize: theme.typography.size.s2 - 1,
-  textAlign: 'center',
-  color: theme.textMutedColor,
-}));
-
 const Links = styled.div(({ theme }) => ({
   display: 'flex',
   fontSize: theme.typography.size.s2 - 1,
@@ -73,27 +41,25 @@ export const Empty = () => {
   if (isLoading) return null;
 
   return (
-    <Wrapper>
-      <Content>
-        <Title>Interaction testing</Title>
-        <Description>
+    <EmptyTabContent
+      title="Interaction testing"
+      description={
+        <>
           Interaction tests allow you to verify the functional aspects of UIs. Write a play function
           for your story and you&apos;ll see it run here.
-        </Description>
-      </Content>
-      <Links>
-        <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
-          <VideoIcon /> Watch 8m video
-        </Link>
-        <Divider />
-        <Consumer>
-          {({ state }) => (
-            <Link href={docsUrl} target="_blank" withArrow>
-              <DocumentIcon /> Read docs
-            </Link>
-          )}
-        </Consumer>
-      </Links>
-    </Wrapper>
+        </>
+      }
+      footer={
+        <Links>
+          <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
+            <VideoIcon /> Watch 8m video
+          </Link>
+          <Divider />
+          <Link href={docsUrl} target="_blank" withArrow>
+            <DocumentIcon /> Read docs
+          </Link>
+        </Links>
+      }
+    />
   );
 };

code/lib/cli/src/initiate.ts

@@ -242,7 +242,7 @@ export async function doInitiate(
 > {
   const { packageManager: pkgMgr } = options;
 
-  const packageManager = JsPackageManagerFactory.getPackageManager({
+  let packageManager = JsPackageManagerFactory.getPackageManager({
     force: pkgMgr,
   });
 
@@ -276,6 +276,13 @@ export async function doInitiate(
 
   // Check if the current directory is empty.
   if (options.force !== true && currentDirectoryIsEmpty(packageManager.type)) {
+    // Initializing Storybook in an empty directory with yarn1
+    // will very likely fail due to different kind of hoisting issues
+    // which doesn't get fixed anymore in yarn1.
+    // We will fallback to npm in this case.
+    if (packageManager.type === 'yarn1') {
+      packageManager = JsPackageManagerFactory.getPackageManager({ force: 'npm' });
+    }
     // Prompt the user to create a new project from our list.
     await scaffoldNewProject(packageManager.type, options);
 

code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts

@@ -176,6 +176,34 @@ describe('composeConfigs', () => {
     });
   });
 
+  it('allows single array to be written without array', () => {
+    expect(
+      composeConfigs([
+        {
+          argsEnhancers: ['1', '2'],
+          argTypesEnhancers: ['1', '2'],
+          loaders: '1',
+        },
+        {
+          argsEnhancers: '3',
+          argTypesEnhancers: '3',
+          loaders: ['2', '3'],
+        },
+      ])
+    ).toEqual({
+      parameters: {},
+      decorators: [],
+      args: {},
+      argsEnhancers: ['1', '2', '3'],
+      argTypes: {},
+      argTypesEnhancers: ['1', '2', '3'],
+      globals: {},
+      globalTypes: {},
+      loaders: ['1', '2', '3'],
+      runStep: expect.any(Function),
+    });
+  });
+
   it('combines decorators in reverse file order', () => {
     expect(
       composeConfigs([

code/lib/preview-api/src/modules/store/csf/composeConfigs.ts

@@ -3,6 +3,7 @@ import { global } from '@storybook/global';
 
 import { combineParameters } from '../parameters';
 import { composeStepRunners } from './stepRunners';
+import { normalizeArrays } from './normalizeArrays';
 
 export function getField<TFieldType = any>(
   moduleExportList: ModuleExports[],
@@ -16,10 +17,10 @@ export function getArrayField<TFieldType = any>(
   field: string,
   options: { reverseFileOrder?: boolean } = {}
 ): TFieldType[] {
-  return getField(moduleExportList, field).reduce(
-    (a: any, b: any) => (options.reverseFileOrder ? [...b, ...a] : [...a, ...b]),
-    []
-  );
+  return getField(moduleExportList, field).reduce((prev: any, cur: any) => {
+    const normalized = normalizeArrays(cur);
+    return options.reverseFileOrder ? [...normalized, ...prev] : [...prev, ...normalized];
+  }, []);
 }
 
 export function getObjectField<TFieldType = Record<string, any>>(

code/lib/theming/src/themes/dark.ts

@@ -25,7 +25,7 @@ const theme: ThemeVars = {
   textMutedColor: '#798186',
 
   // Toolbar default and active colors
-  barTextColor: '#798186',
+  barTextColor: color.mediumdark,
   barHoverColor: color.secondary,
   barSelectedColor: color.secondary,
   barBg: '#292C2E',

code/package.json

@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.2"
 }

code/renderers/react/src/docs/jsxDecorator.test.tsx

@@ -130,11 +130,22 @@ describe('renderJsx', () => {
       }
     );
 
-    expect(renderJsx(createElement(MyExoticComponentRef, {}, 'I am forwardRef!'), {}))
+    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
       .toMatchInlineSnapshot(`
-        <MyExoticComponent>
+        <React.ForwardRef>
           I am forwardRef!
-        </MyExoticComponent>
+        </React.ForwardRef>
+      `);
+
+    // if docgenInfo is present, it should use the displayName from there
+    (MyExoticComponentRef as any).__docgenInfo = {
+      displayName: 'ExoticComponent',
+    };
+    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+      .toMatchInlineSnapshot(`
+        <ExoticComponent>
+          I am forwardRef!
+        </ExoticComponent>
       `);
   });
 
@@ -143,11 +154,20 @@ describe('renderJsx', () => {
       return <div>{props.children}</div>;
     });
 
-    expect(renderJsx(createElement(MyMemoComponentRef, {}, 'I am memo!'), {}))
-      .toMatchInlineSnapshot(`
-      <MyMemoComponent>
+    expect(renderJsx(<MyMemoComponentRef>I am memo!</MyMemoComponentRef>)).toMatchInlineSnapshot(`
+      <React.Memo>
+        I am memo!
+      </React.Memo>
+    `);
+
+    // if docgenInfo is present, it should use the displayName from there
+    (MyMemoComponentRef as any).__docgenInfo = {
+      displayName: 'MyMemoComponentRef',
+    };
+    expect(renderJsx(<MyMemoComponentRef>I am memo!</MyMemoComponentRef>)).toMatchInlineSnapshot(`
+      <MyMemoComponentRef>
         I am memo!
-      </MyMemoComponent>
+      </MyMemoComponentRef>
     `);
   });
 

code/renderers/react/src/docs/jsxDecorator.tsx

@@ -29,7 +29,8 @@ const toPascalCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
  * @returns {string | null} A displayName for the Symbol in case elementType is a Symbol; otherwise, null.
  */
 export const getReactSymbolName = (elementType: any): string => {
-  const symbolDescription: string = elementType.toString().replace(/^Symbol\((.*)\)$/, '$1');
+  const elementName = elementType.$$typeof || elementType;
+  const symbolDescription: string = elementName.toString().replace(/^Symbol\((.*)\)$/, '$1');
 
   const reactComponentName = symbolDescription
     .split('.')
@@ -124,16 +125,28 @@ export const renderJsx = (code: React.ReactElement, options?: JSXOptions) => {
   } else {
     displayNameDefaults = {
       // To get exotic component names resolving properly
-      displayName: (el: any): string =>
-        el.type.displayName || typeof el.type === 'symbol'
-          ? getReactSymbolName(el.type)
-          : null ||
-            getDocgenSection(el.type, 'displayName') ||
-            (el.type.name !== '_default' ? el.type.name : null) ||
-            (typeof el.type === 'function' ? 'No Display Name' : null) ||
-            (isForwardRef(el.type) ? el.type.render.name : null) ||
-            (isMemo(el.type) ? el.type.type.name : null) ||
-            el.type,
+      displayName: (el: any): string => {
+        if (el.type.displayName) {
+          return el.type.displayName;
+        } else if (getDocgenSection(el.type, 'displayName')) {
+          return getDocgenSection(el.type, 'displayName');
+        } else if (
+          typeof el.type === 'symbol' ||
+          (el.type.$$typeof && typeof el.type.$$typeof === 'symbol')
+        ) {
+          return getReactSymbolName(el.type);
+        } else if (el.type.name && el.type.name !== '_default') {
+          return el.type.name;
+        } else if (typeof el.type === 'function') {
+          return 'No Display Name';
+        } else if (isForwardRef(el.type)) {
+          return el.type.render.name;
+        } else if (isMemo(el.type)) {
+          return el.type.type.name;
+        } else {
+          return el.type;
+        }
+      },
     };
   }
 

code/ui/.storybook/main.ts

@@ -53,7 +53,8 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
-    '@chromaui/addon-visual-tests',
+    '@storybook/addon-a11y',
+    '@chromatic-com/storybook',
   ],
   build: {
     test: {

code/ui/blocks/src/components/ArgsTable/ArgControl.tsx

@@ -65,8 +65,8 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   const onBlur = useCallback(() => setFocused(false), []);
   const onFocus = useCallback(() => setFocused(true), []);
 
-  if (!control || control.disabled) {
-    const canBeSetup = control?.disabled !== true && row?.type?.name !== 'function';
+  if (!control || control.disable) {
+    const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
     return isHovered && canBeSetup ? (
       <Link
         href="https://storybook.js.org/docs/react/essentials/controls"

code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

@@ -166,7 +166,6 @@ export const TableWrapper = styled.table<{
 }));
 
 const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
-  color: theme.barTextColor,
   margin: '-4px -12px -4px 0',
 }));