Merge branch 'next' into patch-3

Author: shilman

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 8.2.6
+
+- CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!
+
 ## 8.2.5
 
 - CPC: Add the globals export for manager - [#28650](https://github.com/storybookjs/storybook/pull/28650), thanks @ndelangen!

code/.storybook/main.ts

@@ -8,34 +8,78 @@ const managerApiPath = path.join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [
+    {
+      directory: '../core/template/stories',
+      titlePrefix: 'core',
+    },
     {
       directory: '../core/src/manager',
-      titlePrefix: '@manager',
+      titlePrefix: 'manager',
     },
     {
       directory: '../core/src/preview-api',
-      titlePrefix: '@preview',
+      titlePrefix: 'preview',
+    },
+    {
+      directory: '../core/src/components/brand',
+      titlePrefix: 'brand',
     },
     {
-      directory: '../core/src/components',
-      titlePrefix: '@components',
+      directory: '../core/src/components/components',
+      titlePrefix: 'components',
     },
     {
       directory: '../lib/blocks/src',
-      titlePrefix: '@blocks',
+      titlePrefix: 'blocks',
+    },
+    {
+      directory: '../addons/a11y/template/stories',
+      titlePrefix: 'addons/a11y',
+    },
+    {
+      directory: '../addons/actions/template/stories',
+      titlePrefix: 'addons/actions',
+    },
+    {
+      directory: '../addons/backgrounds/template/stories',
+      titlePrefix: 'addons/backgrounds',
     },
     {
       directory: '../addons/controls/src',
-      titlePrefix: '@addons/controls',
+      titlePrefix: 'addons/controls',
+    },
+    {
+      directory: '../addons/controls/template/stories',
+      titlePrefix: 'addons/controls',
+    },
+    {
+      directory: '../addons/docs/template/stories',
+      titlePrefix: 'addons/docs',
+    },
+    {
+      directory: '../addons/links/template/stories',
+      titlePrefix: 'addons/links',
+    },
+    {
+      directory: '../addons/viewport/template/stories',
+      titlePrefix: 'addons/viewport',
+    },
+    {
+      directory: '../addons/toolbars/template/stories',
+      titlePrefix: 'addons/toolbars',
     },
     {
       directory: '../addons/onboarding/src',
-      titlePrefix: '@addons/onboarding',
+      titlePrefix: 'addons/onboarding',
     },
     {
       directory: '../addons/interactions/src',
-      titlePrefix: '@addons/interactions',
+      titlePrefix: 'addons/interactions',
     },
+    // {
+    //   directory: '../addons/interactions/template/stories',
+    //   titlePrefix: 'addons/interactions',
+    // },
   ],
   addons: [
     '@storybook/addon-links',
@@ -46,6 +90,11 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],
+  previewAnnotations: [
+    './core/template/stories/preview.ts',
+    './addons/toolbars/template/stories/preview.ts',
+    './renderers/react/template/components/index.js',
+  ],
   build: {
     test: {
       // we have stories for the blocks here, we can't exclude them
@@ -58,9 +107,21 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  refs: {
+    icons: {
+      title: 'Icons',
+      url: 'https://main--64b56e737c0aeefed9d5e675.chromatic.com',
+      expanded: false,
+    },
+  },
   core: {
     disableTelemetry: true,
   },
+  features: {
+    viewportStoryGlobals: true,
+    themesStoryGlobals: true,
+    backgroundsStoryGlobals: true,
+  },
   viteFinal: (viteConfig, { configType }) =>
     mergeConfig(viteConfig, {
       resolve: {
@@ -81,7 +142,7 @@ const config: StorybookConfig = {
         sourcemap: process.env.CI !== 'true',
       },
     }),
-  logLevel: 'debug',
+  // logLevel: 'debug',
 };
 
 export default config;

code/.storybook/preview.tsx

@@ -296,20 +296,3 @@ export const parameters = {
     ],
   },
 };
-
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'circlehollow',
-      title: 'Theme',
-      items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
-        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
-        { value: 'stacked', icon: 'bottombar', title: 'stacked' },
-      ],
-    },
-  },
-};

code/addons/docs/docs/recipes.md

@@ -184,7 +184,7 @@ The Storybook UI is a workshop for developing components in isolation. Storybook
 To address this, we’ve added a CLI flag to only export the docs. This flag is also available in dev mode:
 
 ```sh
-yarn build-storybook --docs
+yarn storybook build --docs
 ```
 
 ## Disabling docs stories

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "^0.1.11",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/core/package.json

@@ -253,7 +253,7 @@
     "prep": "bun ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "^0.1.11",
     "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "browser-assert": "^1.2.1",

code/core/src/common/js-package-manager/JsPackageManager.ts

@@ -64,22 +64,6 @@ export abstract class JsPackageManager {
     return packageJSON ? packageJSON.version ?? null : null;
   }
 
-  // NOTE: for some reason yarn prefers the npm registry in
-  // local development, so always use npm
-  async setRegistryURL(url: string) {
-    if (url) {
-      await this.executeCommand({ command: 'npm', args: ['config', 'set', 'registry', url] });
-    } else {
-      await this.executeCommand({ command: 'npm', args: ['config', 'delete', 'registry'] });
-    }
-  }
-
-  async getRegistryURL() {
-    const res = await this.executeCommand({ command: 'npm', args: ['config', 'get', 'registry'] });
-    const url = res.trim();
-    return url === 'undefined' ? undefined : url;
-  }
-
   constructor(options?: JsPackageManagerOptions) {
     this.cwd = options?.cwd || process.cwd();
   }
@@ -487,6 +471,8 @@ export abstract class JsPackageManager {
   ): // Use generic and conditional type to force `string[]` if fetchAllVersions is true and `string` if false
   Promise<T extends true ? string[] : string>;
 
+  public abstract getRegistryURL(): Promise<string | undefined>;
+
   public abstract runPackageCommand(
     command: string,
     args: string[],

code/core/src/common/js-package-manager/NPMProxy.test.ts

@@ -34,21 +34,6 @@ describe('NPM Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `npm config set registry https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(npmProxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await npmProxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('installDependencies', () => {
     describe('npm6', () => {
       it('should run `npm install`', async () => {

code/core/src/common/js-package-manager/NPMProxy.ts

@@ -181,6 +181,17 @@ export class NPMProxy extends JsPackageManager {
     });
   }
 
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'npm',
+      // "npm config" commands are not allowed in workspaces per default
+      // https://github.com/npm/cli/issues/6099#issuecomment-1847584792
+      args: ['config', 'get', 'registry', '-ws=false', '-iwr'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
   protected async runAddDeps(dependencies: string[], installAsDevDependencies: boolean) {
     const { logStream, readLogFile, moveLogFile, removeLogFile } = await createLogStream();
     let args = [...dependencies];

code/core/src/common/js-package-manager/PNPMProxy.test.ts

@@ -24,21 +24,6 @@ describe('PNPM Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `npm config set registry https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(pnpmProxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await pnpmProxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('installDependencies', () => {
     it('should run `pnpm install`', async () => {
       const executeCommandSpy = vi

code/core/src/common/js-package-manager/PNPMProxy.ts

@@ -90,6 +90,15 @@ export class PNPMProxy extends JsPackageManager {
     });
   }
 
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'pnpm',
+      args: ['config', 'get', 'registry'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
   async runPackageCommand(command: string, args: string[], cwd?: string): Promise<string> {
     return this.executeCommand({
       command: 'pnpm',

code/core/src/common/js-package-manager/Yarn1Proxy.test.ts

@@ -25,21 +25,6 @@ describe('Yarn 1 Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `yarn config set npmRegistryServer https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(yarn1Proxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await yarn1Proxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('installDependencies', () => {
     it('should run `yarn`', async () => {
       const executeCommandSpy = vi.spyOn(yarn1Proxy, 'executeCommand').mockResolvedValueOnce('');

code/core/src/common/js-package-manager/Yarn1Proxy.ts

@@ -83,6 +83,15 @@ export class Yarn1Proxy extends JsPackageManager {
     return JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as Record<string, any>;
   }
 
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'yarn',
+      args: ['config', 'get', 'registry'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
   public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
     const yarnArgs = ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--json'];
 

code/core/src/common/js-package-manager/Yarn2Proxy.test.ts

@@ -53,21 +53,6 @@ describe('Yarn 2 Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `yarn config set npmRegistryServer https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(yarn2Proxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await yarn2Proxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('addDependencies', () => {
     it('with devDep it should run `yarn install -D @storybook/core`', async () => {
       const executeCommandSpy = vi.spyOn(yarn2Proxy, 'executeCommand').mockResolvedValueOnce('');

code/core/src/common/js-package-manager/Yarn2Proxy.ts

@@ -239,6 +239,15 @@ export class Yarn2Proxy extends JsPackageManager {
     await removeLogFile();
   }
 
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'yarn',
+      args: ['config', 'get', 'npmRegistryServer'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
   protected async runRemoveDeps(dependencies: string[]) {
     const args = [...dependencies];
 

code/core/src/core-server/README.md

@@ -6,8 +6,8 @@ It contains:
 
 - CLI arg parsing
 - Storybook UI "manager" webpack configuration
-- `start-storybook` dev server
-- `build-storybook` static builder
+- `storybook dev` dev server
+- `storybook build` static builder
 - presets handling
 
 The "preview" (aka iframe) side is implemented in pluggable builders: