Release: Patch 10.1.1

.circleci/config.yml

@@ -1172,15 +1172,15 @@ workflows:
                 requires:
                     - build
             - create-sandboxes:
-                parallelism: 38
+                parallelism: 39
                 requires:
                     - build
             - check-sandboxes:
                 parallelism: 1
                 requires:
                     - create-sandboxes
             - chromatic-sandboxes:
-                parallelism: 35
+                parallelism: 36
                 requires:
                     - create-sandboxes
             - e2e-production:
@@ -1192,7 +1192,7 @@ workflows:
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 33
+                parallelism: 34
                 requires:
                     - create-sandboxes
             - vitest-integration:
@@ -1286,11 +1286,11 @@ workflows:
                 requires:
                     - unit-tests
             - create-sandboxes:
-                parallelism: 21
+                parallelism: 22
                 requires:
                     - build
             - chromatic-sandboxes:
-                parallelism: 18
+                parallelism: 19
                 requires:
                     - create-sandboxes
             - e2e-production:
@@ -1302,7 +1302,7 @@ workflows:
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 16
+                parallelism: 17
                 requires:
                     - create-sandboxes
             - vitest-integration:

.circleci/src/workflows/daily.yml

@@ -31,7 +31,7 @@ jobs:
       requires:
         - build
   - create-sandboxes:
-      parallelism: 38
+      parallelism: 39
       requires:
         - build
   - check-sandboxes:
@@ -42,7 +42,7 @@ jobs:
   #     requires:
   #       - create-sandboxes
   - chromatic-sandboxes:
-      parallelism: 35
+      parallelism: 36
       requires:
         - create-sandboxes
   - e2e-production:
@@ -54,7 +54,7 @@ jobs:
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 33
+      parallelism: 34
       requires:
         - create-sandboxes
   - vitest-integration:

.circleci/src/workflows/merged.yml

@@ -34,11 +34,11 @@ jobs:
       requires:
         - unit-tests
   - create-sandboxes:
-      parallelism: 21
+      parallelism: 22
       requires:
         - build
   - chromatic-sandboxes:
-      parallelism: 18
+      parallelism: 19
       requires:
         - create-sandboxes
   - e2e-production:
@@ -50,7 +50,7 @@ jobs:
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 16
+      parallelism: 17
       requires:
         - create-sandboxes
   - vitest-integration:

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 10.1.1
+
+- Core: Improve globbing using dynamic CWD (REVERT) - [#33201](https://github.com/storybookjs/storybook/pull/33201), thanks @ndelangen!
+- Solid: Add Solid to the list of supported frameworks for addon-vitest - [#33084](https://github.com/storybookjs/storybook/pull/33084), thanks @valentinpalkovic!
+- UI: Fix excessive height in TabbedArgsTable - [#33205](https://github.com/storybookjs/storybook/pull/33205), thanks @Sidnioulz!
+
 ## 10.1.0
 
 > _Easier to setup, more accessible to use_

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx

@@ -1,11 +1,20 @@
+import { TabsView } from 'storybook/internal/components';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ArgsTable } from './ArgsTable';
 import { Compact, Normal, Sections } from './ArgsTable.stories';
 import { TabbedArgsTable } from './TabbedArgsTable';
 
-export default {
+const meta = {
   component: TabbedArgsTable,
-};
+  tags: ['autodocs'],
+  subcomponents: { TabbedArgsTable: TabbedArgsTable, ArgsTable, TabsView },
+} satisfies Meta<typeof TabbedArgsTable>;
+
+export default meta;
 
-export const Tabs = {
+export const Tabs: StoryObj<typeof meta> = {
   args: {
     tabs: {
       Normal: Normal.args,
@@ -15,7 +24,7 @@ export const Tabs = {
   },
 };
 
-export const TabsInAddonPanel = {
+export const TabsInAddonPanel: StoryObj<typeof meta> = {
   args: {
     tabs: {
       Normal: Normal.args,
@@ -26,8 +35,25 @@ export const TabsInAddonPanel = {
   },
 };
 
-export const Empty = {
+export const Empty: StoryObj<typeof meta> = {
   args: {
     tabs: {},
   },
 };
+
+export const WithContentAround: StoryObj<typeof meta> = {
+  args: {
+    tabs: {
+      Normal: Normal.args,
+      Compact: Compact.args,
+      Sections: Sections.args,
+    },
+  },
+  render: (args) => (
+    <>
+      <p>This is some content above the TabbedArgsTable.</p>
+      <TabbedArgsTable {...args} />
+      <p>This is some content below the TabbedArgsTable.</p>
+    </>
+  ),
+};

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 
 import { TabsView } from 'storybook/internal/components';
 
+import { styled } from 'storybook/theming';
+
 import type { ArgsTableProps } from './ArgsTable';
 import { ArgsTable } from './ArgsTable';
 
@@ -12,6 +14,10 @@ export type TabbedArgsTableProps = DistributiveOmit<ArgsTableProps, 'rows'> & {
   tabs: Record<string, ArgsTableProps>;
 };
 
+const StyledTabsView = styled(TabsView)({
+  height: 'fit-content',
+});
+
 export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) => {
   const entries = Object.entries(tabs);
 
@@ -34,5 +40,5 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
     },
   }));
 
-  return <TabsView tabs={tabsFromEntries} />;
+  return <StyledTabsView tabs={tabsFromEntries} />;
 };

code/core/src/cli/AddonVitestService.constants.ts

@@ -6,6 +6,7 @@ export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
   SupportedFramework.PREACT_VITE,
   SupportedFramework.REACT_NATIVE_WEB_VITE,
   SupportedFramework.REACT_VITE,
+  SupportedFramework.SOLID,
   SupportedFramework.SVELTE_VITE,
   SupportedFramework.SVELTEKIT,
   SupportedFramework.VUE3_VITE,

code/core/src/cli/dirs.ts

@@ -4,39 +4,22 @@ import { pipeline } from 'node:stream/promises';
 import type { ReadableStream } from 'node:stream/web';
 import { createGunzip } from 'node:zlib';
 
-import { temporaryDirectory, versions } from 'storybook/internal/common';
+import {
+  frameworkPackages,
+  rendererPackages,
+  temporaryDirectory,
+  versions,
+} from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
-import { SupportedFramework, type SupportedRenderer } from 'storybook/internal/types';
+import type { SupportedFramework } from 'storybook/internal/types';
+import { type SupportedRenderer } from 'storybook/internal/types';
 
 import getNpmTarballUrlDefault from 'get-npm-tarball-url';
 import { unpackTar } from 'modern-tar/fs';
 import invariant from 'tiny-invariant';
 
 import { resolvePackageDir } from '../shared/utils/module';
 
-type ExternalFramework = {
-  name: SupportedFramework;
-  packageName?: string;
-  frameworks?: string[];
-  renderer?: string;
-};
-
-const externalFrameworks: ExternalFramework[] = [
-  { name: SupportedFramework.QWIK, packageName: 'storybook-framework-qwik' },
-  {
-    name: SupportedFramework.SOLID,
-    packageName: 'storybook-solidjs-vite',
-    frameworks: ['storybook-solidjs-vite'],
-    renderer: 'storybook-solidjs-vite',
-  },
-  {
-    name: SupportedFramework.NUXT,
-    packageName: '@storybook-vue/nuxt',
-    frameworks: ['@storybook-vue/nuxt'],
-    renderer: '@storybook/vue3',
-  },
-];
-
 const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
   const tempDirectory = await temporaryDirectory();
   const name = request as keyof typeof versions;
@@ -71,23 +54,28 @@ export async function getRendererDir(
   packageManager: JsPackageManager,
   renderer: SupportedFramework | SupportedRenderer
 ) {
-  const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
-  const frameworkPackageName =
-    externalFramework?.packageName || externalFramework?.renderer || `@storybook/${renderer}`;
+  const [externalFramework] =
+    Object.entries({ ...frameworkPackages, ...rendererPackages }).find(
+      ([key, value]) => value === renderer
+    ) ?? [];
+
+  if (!externalFramework) {
+    return null;
+  }
 
-  const packageJsonPath = join(frameworkPackageName, 'package.json');
+  const packageJsonPath = join(externalFramework, 'package.json');
 
   const errors: Error[] = [];
 
   try {
-    return resolvePackageDir(frameworkPackageName, process.cwd());
+    return resolvePackageDir(externalFramework, process.cwd());
   } catch (e) {
     invariant(e instanceof Error);
     errors.push(e);
   }
 
   try {
-    return await resolveUsingBranchInstall(packageManager, frameworkPackageName);
+    return await resolveUsingBranchInstall(packageManager, externalFramework);
   } catch (e) {
     invariant(e instanceof Error);
     errors.push(e);

code/core/src/cli/helpers.ts

@@ -179,6 +179,11 @@ export async function copyTemplateFiles({
   };
   const templatePath = async () => {
     const baseDir = await getRendererDir(packageManager, templateLocation);
+
+    if (!baseDir) {
+      return null;
+    }
+
     const assetsDir = join(baseDir, 'template', 'cli');
 
     const assetsLanguage = join(assetsDir, languageFolderMapping[language]);
@@ -209,7 +214,11 @@ export async function copyTemplateFiles({
   if (commonAssetsDir) {
     await cp(commonAssetsDir, destinationPath, { recursive: true, filter });
   }
-  await cp(await templatePath(), destinationPath, { recursive: true, filter });
+  const tmpPath = await templatePath();
+
+  if (tmpPath) {
+    await cp(tmpPath, destinationPath, { recursive: true, filter });
+  }
 
   if (commonAssetsDir && features.has(Feature.DOCS)) {
     const rendererType = frameworkToRenderer[templateLocation] || 'react';

code/core/src/core-server/utils/StoryIndexGenerator.ts

@@ -161,19 +161,16 @@ export class StoryIndexGenerator {
 
     const pathToSubIndex = {} as SpecifierStoriesCache;
 
-    // Calculate a new CWD for each glob to handle paths that go above the workingDir.
-    const globCwd = slash(resolve(workingDir, specifier.directory));
-    const globPattern = specifier.files;
+    const fullGlob = slash(join(specifier.directory, specifier.files));
 
     // Dynamically import globby because it is a pure ESM module
     // eslint-disable-next-line depend/ban-dependencies
     const { globby } = await import('globby');
 
-    // Execute globby within the new CWD to ensure `ignore` patterns work correctly.
-    const files = await globby(globPattern, {
+    const files = await globby(fullGlob, {
       absolute: true,
-      cwd: globCwd,
-      ...commonGlobOptions(globPattern),
+      cwd: workingDir,
+      ...commonGlobOptions(fullGlob),
     });
 
     if (files.length === 0 && !ignoreWarnings) {

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -247,8 +247,10 @@ export const baseTemplates = {
   },
   'nextjs/prerelease': {
     name: 'Next.js Prerelease (Webpack | TypeScript)',
+    // TODO: use @canary once the issue with NPM is fixed.
+    // Nextjs 16.1.0-canary.5 is a bad release.
     script:
-      'npx create-next-app@canary {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'npx create-next-app@16.1.0-canary.4 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
@@ -502,25 +504,15 @@ export const baseTemplates = {
     },
     skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'],
   },
-  'solid-vite/default-js': {
-    name: 'SolidJS Latest (Vite | JavaScript)',
-    script: 'npx degit solidjs/templates/js {{beforeDir}}',
-    expected: {
-      framework: 'storybook-solidjs-vite',
-      renderer: 'storybook-solidjs-vite',
-      builder: '@storybook/builder-vite',
-    },
-    skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
-  },
   'solid-vite/default-ts': {
     name: 'SolidJS Latest (Vite | TypeScript)',
-    script: 'npx degit solidjs/templates/ts {{beforeDir}}',
+    script: 'yarn create solid {{beforeDir}} --vanilla --ts --template=with-vitest',
     expected: {
       framework: 'storybook-solidjs-vite',
       renderer: 'storybook-solidjs-vite',
       builder: '@storybook/builder-vite',
     },
-    skipTasks: ['e2e-tests', 'bench'],
+    skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'vue3-vite/default-js': {
     name: 'Vue v3 (Vite | JavaScript)',
@@ -639,9 +631,7 @@ export const baseTemplates = {
     script:
       'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr',
     modifications: {
-      // Angular 21 has introduced a peer dependency requirement on standard-schema via @angular/forms`
-      // TODO: use @angular/forms@next as soon as @angular/cli@next points to the same version
-      extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@^21.0.0'],
+      extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@next'],
     },
     expected: {
       framework: '@storybook/angular',
@@ -1020,6 +1010,7 @@ export const merged: TemplateKey[] = [
   'nextjs-vite/15-ts',
   'preact-vite/default-ts',
   'html-vite/default-ts',
+  'solid-vite/default-ts',
   'vue3-rsbuild/default-ts',
 ];