Release: Prerelease 10.3.0-alpha.14

.github/workflows/copilot-setup-steps.yml

@@ -33,4 +33,4 @@ jobs:
           install-code-deps: true
 
       - name: Compile
-        run: yarn nx run-many --targets compile
+        run: yarn nx run-many --targets compile --no-cloud

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 10.2.14
+
+- CLI: Set STORYBOOK environment variable - [#33938](https://github.com/storybookjs/storybook/pull/33938), thanks @yannbf!
+- UI: Prevent crash when tag filters contain undefined entries - [#33931](https://github.com/storybookjs/storybook/pull/33931), thanks @abhaysinh1000!
+
 ## 10.2.13
 
 - Addon Pseudo-states: Process all nested css rules - [#33605](https://github.com/storybookjs/storybook/pull/33605), thanks @hpohlmeyer!

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 10.3.0-alpha.14
+
+- CSF-Factories: Fix ConfigFile parser false warning on `definePreview({...}).type<T>()` export default - [#33885](https://github.com/storybookjs/storybook/pull/33885), thanks @copilot-swe-agent!
+- Core: Add host/origin validation to requests and websocket connections - [#33835](https://github.com/storybookjs/storybook/pull/33835), thanks @ghengeveld!
+- Core: Storybook failed to load iframe.html when publishing - [#33896](https://github.com/storybookjs/storybook/pull/33896), thanks @danielalanbates!
+- Core: Zoom tool refinements - Hide reset button when value is initial - [#33635](https://github.com/storybookjs/storybook/pull/33635), thanks @superLipbalm!
+- Docs: Edit JSON button is now accessible at 320x256 viewport (WCAG 2.1 Reflow test) - [#33707](https://github.com/storybookjs/storybook/pull/33707), thanks @TheSeydiCharyyev!
+- Manager-API: Update refs sequentially in experimental_setFilter - [#33958](https://github.com/storybookjs/storybook/pull/33958), thanks @ia319!
+- UI: Allow direct kb/mouse actions on zoom tool button - [#33496](https://github.com/storybookjs/storybook/pull/33496), thanks @Sidnioulz!
+
 ## 10.3.0-alpha.13
 
 - A11y: Add ScrollArea prop focusable for when it has static children - [#33876](https://github.com/storybookjs/storybook/pull/33876), thanks @Sidnioulz!

SECURITY.md

@@ -2,9 +2,13 @@
 
 ## Supported Versions
 
-We release patches for fixing security vulnerabilities, primarily focusing on the latest release only. 
+We release patches for security vulnerabilities, primarily focusing on the latest major version.
 
-In the event of a high-risk vulnerability, we may backport the security fixes to the minor versions of the software, starting from the latest minor version up to the latest major release. The decision to backport security fixes to older versions will be made based on a risk assessment and the feasibility of implementing the patch in those versions.
+Security fixes are backported to the previous two major versions only for vulnerabilities with High or Critical CVSS scores (7.0+). The decision to backport is made based on severity assessment and the feasibility of implementing the patch in those versions.
+
+- Latest major version: All security vulnerabilities
+- Previous two major versions: High or Critical CVSS scores only
+- Older versions: Not supported (Users should upgrade to a supported version)
 
 ## Reporting a Vulnerability
 

code/addons/docs/src/blocks/controls/Object.stories.tsx

@@ -112,3 +112,31 @@ export const ReadonlyAndUndefined: Story = {
     argType: { table: { readonly: true } },
   },
 };
+
+export const ObjectSmallViewport: Story = {
+  args: {
+    value: {
+      name: 'Michael',
+      someDate: new Date('2022-10-30T12:31:11'),
+      nested: { someBool: true, someNumber: 22 },
+    },
+  },
+  parameters: {
+    chromatic: { viewports: [320] },
+  },
+};
+
+export const ArraySmallViewport: Story = {
+  args: {
+    value: [
+      'someString',
+      22,
+      true,
+      new Date('2022-10-30T12:31:11'),
+      { someBool: true, someNumber: 22 },
+    ],
+  },
+  parameters: {
+    chromatic: { viewports: [320] },
+  },
+};

code/addons/docs/src/blocks/controls/Object.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button, Form, ToggleButton } from 'storybook/internal/components';
 
-import { AddIcon, SubtractIcon } from '@storybook/icons';
+import { AddIcon, EditIcon, SubtractIcon } from '@storybook/icons';
 
 import { cloneDeep } from 'es-toolkit/object';
 import { styled, useTheme } from 'storybook/theming';
@@ -18,8 +18,10 @@ const Wrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   isolation: 'isolate',
+  gap: 8,
 
   '.rejt-tree': {
+    flex: 1,
     marginLeft: '1rem',
     fontSize: '13px',
     listStyleType: 'none',
@@ -125,10 +127,9 @@ const Input = styled.input(({ theme, placeholder }) => ({
 }));
 
 const RawButton = styled(ToggleButton)({
-  position: 'absolute',
-  zIndex: 2,
-  top: 2,
-  right: 2,
+  alignSelf: 'flex-start',
+  order: 2,
+  marginRight: -10,
 });
 
 const RawInput = styled(Form.Textarea)(({ theme }) => ({
@@ -188,7 +189,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const onForceVisible = useCallback(() => {
     onChange({});
     setForceVisible(true);
-  }, [setForceVisible]);
+  }, [onChange, setForceVisible]);
 
   const htmlElRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
@@ -240,13 +241,16 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
         <RawButton
           disabled={readonly}
           pressed={showRaw}
-          ariaLabel={`Edit the ${name} properties in JSON format`}
+          ariaLabel={`Edit ${name} as JSON`}
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
             setShowRaw((isRaw) => !isRaw);
           }}
+          variant="ghost"
+          padding="small"
+          size="small"
         >
-          Edit JSON
+          <EditIcon />
         </RawButton>
       )}
       {!showRaw ? (

code/builders/builder-vite/src/vite-server.ts

@@ -1,8 +1,6 @@
-import { logger } from 'storybook/internal/node-logger';
 import type { Options } from 'storybook/internal/types';
 
 import type { Server } from 'http';
-import { dedent } from 'ts-dedent';
 import type { InlineConfig, ServerOptions } from 'vite';
 
 import { createViteLogger } from './logger';
@@ -13,9 +11,12 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const commonCfg = await commonConfig(options, 'development');
 
+  const { allowedHosts } = await presets.apply('core', {});
+
   const config: InlineConfig & { server: ServerOptions } = {
     ...commonCfg,
     server: {
+      allowedHosts,
       middlewareMode: true,
       hmr: {
         port: options.port,
@@ -28,18 +29,12 @@ export async function createViteServer(options: Options, devServer: Server) {
     appType: 'custom' as const,
   };
 
-  // '0.0.0.0' binds to all interfaces, which is useful for Docker and other containerized environments.
-  // but without server.allowedHosts set, requests from outside the container will be rejected.
-  if (options.host === '0.0.0.0' && !config.server.allowedHosts) {
+  // '0.0.0.0' binds to all interfaces, which is useful for Docker and other containerized environments
+  if (
+    options.host === '0.0.0.0' &&
+    (!allowedHosts || (Array.isArray(allowedHosts) && allowedHosts.length === 0))
+  ) {
     config.server.allowedHosts = true;
-    logger.warn(dedent`'host' is set to '0.0.0.0' but 'allowedHosts' is not defined.
-      Defaulting 'allowedHosts' to true, which permits all hostnames.
-      To restrict allowed hostnames, add the following to your 'viteFinal' config:
-      Example: { server: { allowedHosts: ['mydomain.com'] } }
-      See:
-      - https://vite.dev/config/server-options.html#server-allowedhosts
-      - https://storybook.js.org/docs/api/main-config/main-config-vite-final
-    `);
   }
 
   const finalConfig = await presets.apply('viteFinal', config, options);

code/core/package.json

@@ -320,6 +320,7 @@
     "get-npm-tarball-url": "^2.1.0",
     "glob": "^10.5.0",
     "globby": "^14.1.0",
+    "host-validation-middleware": "^0.1.2",
     "jiti": "^2.6.1",
     "js-yaml": "^4.1.0",
     "jsdoc-type-pratt-parser": "^4.0.0",

code/core/src/core-server/build-dev.ts

@@ -23,6 +23,7 @@ import { join, relative, resolve } from 'pathe';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
 
+import Channel from '../channels';
 import { detectPnp } from '../cli/detect';
 import { resolvePackageDir } from '../shared/utils/module';
 import { storybookDevServer } from './dev-server';
@@ -32,7 +33,7 @@ import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
 import { getServerChannel } from './utils/get-server-channel';
 import { outputStartupInformation } from './utils/output-startup-information';
 import { outputStats } from './utils/output-stats';
-import { getServerChannelUrl, getServerPort } from './utils/server-address';
+import { getServerAddresses, getServerChannelUrl, getServerPort } from './utils/server-address';
 import { getServer } from './utils/server-init';
 import { stripCommentsAndStrings } from './utils/strip-comments-and-strings';
 import { updateCheck } from './utils/update-check';
@@ -91,13 +92,23 @@ export async function buildDevStandalone(
     outputDir = cacheOutputDir;
   }
 
+  invariant(port, 'expected options to have a port');
+  const { address: localAddress, networkAddress } = getServerAddresses(
+    port,
+    options.host,
+    options.https ? 'https' : 'http',
+    options.initialPath
+  );
+
   options.port = port;
   options.versionCheck = versionCheck;
   options.configType = 'DEVELOPMENT';
   options.configDir = configDir;
   options.cacheKey = cacheKey;
   options.outputDir = outputDir;
   options.serverChannelUrl = getServerChannelUrl(port, options);
+  options.localAddress = localAddress;
+  options.networkAddress = networkAddress;
 
   // TODO: Remove in SB11
   options.pnp = await detectPnp();
@@ -111,7 +122,7 @@ export async function buildDevStandalone(
   }
 
   const config = await loadMainConfig(options);
-  const { framework } = config;
+  const { core, framework } = config;
   const corePresets = [];
 
   let frameworkName = typeof framework === 'string' ? framework : framework?.name;
@@ -146,7 +157,6 @@ export async function buildDevStandalone(
   } catch (e) {}
 
   const server = await getServer(options);
-  const channel = getServerChannel(server, getWsToken());
 
   // Load first pass: We need to determine the builder
   // We need to do this because builders might introduce 'overridePresets' which we need to take into account
@@ -158,10 +168,30 @@ export async function buildDevStandalone(
     ],
     ...options,
     isCritical: true,
-    channel,
+    channel: new Channel({
+      transports: [
+        {
+          setHandler: () => () => console.error('CHANNEL IS NOT READY YET'),
+          send: () => () => console.error('CHANNEL IS NOT READY YET'),
+        },
+      ],
+    }),
   });
 
-  const { renderer, builder, disableTelemetry } = await presets.apply('core', {});
+  const { allowedHosts, renderer, builder, disableTelemetry } = await presets.apply('core', {});
+
+  // '0.0.0.0' binds to all interfaces, which is useful for Docker and other containerized environments.
+  // By default we allow requests from all hosts in this case, but the user should be made aware of the risk.
+  if (
+    options.host === '0.0.0.0' &&
+    (!allowedHosts || (allowedHosts !== true && allowedHosts.length === 0))
+  ) {
+    logger.warn(dedent`
+      --host is set to 0.0.0.0 but no allowedHosts are defined. Allowing all hosts.
+      To restrict allowed hosts, set core.allowedHosts in your main Storybook config.
+      See: https://storybook.js.org/docs/api/main-config/main-config-core
+    `);
+  }
 
   if (!builder) {
     throw new MissingBuilderError();
@@ -202,6 +232,14 @@ export async function buildDevStandalone(
 
   const resolvedRenderer = renderer && resolveAddonName(options.configDir, renderer, options);
 
+  const channel = getServerChannel(server, {
+    token: getWsToken(),
+    host: options.host,
+    allowedHosts,
+    localAddress,
+    networkAddress,
+  });
+
   // Load second pass: all presets are applied in order
   presets = await loadAllPresets({
     corePresets: [
@@ -230,7 +268,7 @@ export async function buildDevStandalone(
     channel,
   };
 
-  const { address, networkAddress, managerResult, previewResult } = await buildOrThrow(async () =>
+  const { managerResult, previewResult } = await buildOrThrow(async () =>
     storybookDevServer(fullOptions, server)
   );
 
@@ -280,12 +318,13 @@ export async function buildDevStandalone(
         updateInfo: versionCheck,
         version: storybookVersion,
         name,
-        address,
+        address: localAddress,
         networkAddress,
+        allowedHosts,
         managerTotalTime,
         previewTotalTime,
       });
     }
   }
-  return { port, address, networkAddress };
+  return { port, address: localAddress, networkAddress };
 }