Build: Maintenance

.yarnrc.yml

@@ -3,9 +3,8 @@ compressionLevel: mixed
 enableGlobalCache: false
 
 installStatePath: ./.yarn/root-install-state.gz
+yarnPath: .yarn/releases/yarn-4.5.1.cjs
 
 nodeLinker: node-modules
 
 npmPublishAccess: public
-
-yarnPath: .yarn/releases/yarn-4.3.0.cjs

code/.eslintrc.js

@@ -99,6 +99,7 @@ module.exports = {
       ],
       rules: {
         'import/no-extraneous-dependencies': 'off',
+        'react/prop-types': 'off',
       },
     },
     {

code/.yarnrc.yml

@@ -3,6 +3,7 @@ compressionLevel: 0
 enableGlobalCache: true
 
 installStatePath: ../.yarn/code-install-state.gz
+yarnPath: ../.yarn/releases/yarn-4.5.1.cjs
 
 logFilters:
   - code: YN0005
@@ -35,7 +36,5 @@ supportedArchitectures:
 
 unsafeHttpWhitelist:
   - localhost
-
-yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
 # Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
 # checksumBehavior: 'update'

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/backgrounds/src/components/Tool.tsx

@@ -9,8 +9,6 @@ import { PARAM_KEY as KEY } from '../constants';
 import { DEFAULT_BACKGROUNDS } from '../defaults';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
 
-type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
-
 export const BackgroundTool = memo(function BackgroundSelector() {
   const config = useParameter<Config>(KEY);
   const [globals, updateGlobals, storyGlobals] = useGlobals();
@@ -114,7 +112,7 @@ const Pure = memo(function PureTool(props: PureProps) {
                         },
                       ]
                     : []),
-                  ...Object.entries(backgroundMap).map<Link>(([k, value]) => ({
+                  ...Object.entries(backgroundMap).map(([k, value]) => ({
                     id: k,
                     title: value.name,
                     icon: <CircleIcon color={value?.value || 'grey'} />,

code/addons/docs/package.json

@@ -114,7 +114,7 @@
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "typescript": "^5.3.2",
-    "vite": "^4.0.4"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "storybook": "workspace:^"

code/addons/docs/src/compiler/index.test.ts

@@ -36,9 +36,9 @@ describe('mdx3', () => {
       function _createMdxContent(props) {
         return _jsx("style", {
           children: \`
-        h1 {
-          color: blue;
-        }
+      h1 {
+        color: blue;
+      }
       \`
         });
       }
@@ -645,23 +645,23 @@ describe('docs-mdx-compiler-plugin', () => {
             title: "Example/Introduction"
           }), "\\n", _jsx("style", {
             children: \`
-        .subheading {
-          --mediumdark: '#999999';
-          font-weight: 900;
-          font-size: 13px;
-          color: #999;
-          letter-spacing: 6px;
-          line-height: 24px;
-          text-transform: uppercase;
-          margin-bottom: 12px;
-          margin-top: 40px;
-        }
-        .link-list {
-          display: grid;
-          grid-template-columns: 1fr;
-          grid-template-rows: 1fr 1fr;
-          row-gap: 10px;
-        }
+      .subheading {
+        --mediumdark: '#999999';
+        font-weight: 900;
+        font-size: 13px;
+        color: #999;
+        letter-spacing: 6px;
+        line-height: 24px;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+        margin-top: 40px;
+      }
+      .link-list {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        row-gap: 10px;
+      }
       \`
           })]
         });

code/addons/interactions/package.json

@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.12",
     "@types/node": "^22.0.0",
     "ansi-to-html": "^0.7.2",
     "formik": "^2.2.9",

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

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,9 +1,9 @@
 import { styled } from 'storybook/internal/theming';
 
-export const ListWrapper = styled.ul(() => ({
+export const ListWrapper = styled.ul({
   display: 'flex',
   flexDirection: 'column',
   rowGap: 16,
   padding: 0,
   margin: 0,
-}));
+});

code/addons/test/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/test/src/utils.ts

@@ -1,6 +1,7 @@
 import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
 
 import Filter from 'ansi-to-html';
+// eslint-disable-next-line depend/ban-dependencies
 import stripAnsi from 'strip-ansi';
 
 export function isTestAssertionError(error: unknown) {

code/addons/viewport/src/components/Tool.tsx

@@ -1,6 +1,6 @@
 import React, { type FC, Fragment, useCallback, useEffect, useState } from 'react';
 
-import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { IconButton, type Link, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { type API, useGlobals, useParameter } from 'storybook/internal/manager-api';
 import { Global } from 'storybook/internal/theming';
 
@@ -32,8 +32,6 @@ interface PureProps {
   height: string;
 }
 
-type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
-
 export const ViewportTool: FC<{ api: API }> = ({ api }) => {
   const config = useParameter<Config>(KEY);
   const [globals, updateGlobals, storyGlobals] = useGlobals();
@@ -116,29 +114,31 @@ const Pure = React.memo(function PureTool(props: PureProps) {
         tooltip={({ onHide }) => (
           <TooltipLinkList
             links={[
-              ...(length > 0 && item !== responsiveViewport
-                ? [
-                    {
-                      id: 'reset',
-                      title: 'Reset viewport',
-                      icon: <RefreshIcon />,
-                      onClick: () => {
-                        update({ value: undefined, isRotated: false });
-                        onHide();
+              [
+                ...(length > 0 && item !== responsiveViewport
+                  ? [
+                      {
+                        id: 'reset',
+                        title: 'Reset viewport',
+                        icon: <RefreshIcon />,
+                        onClick: () => {
+                          update({ value: undefined, isRotated: false });
+                          onHide();
+                        },
                       },
-                    },
-                  ]
-                : []),
-              ...Object.entries(viewportMap).map<Link>(([k, value]) => ({
-                id: k,
-                title: value.name,
-                icon: iconsMap[value.type],
-                active: k === viewportName,
-                onClick: () => {
-                  update({ value: k, isRotated: false });
-                  onHide();
-                },
-              })),
+                    ]
+                  : []),
+                ...Object.entries(viewportMap).map(([k, value]) => ({
+                  id: k,
+                  title: value.name,
+                  icon: iconsMap[value.type],
+                  active: k === viewportName,
+                  onClick: () => {
+                    update({ value: k, isRotated: false });
+                    onHide();
+                  },
+                })),
+              ],
             ]}
           />
         )}

code/builders/builder-vite/package.json

@@ -57,7 +57,7 @@
     "polka": "^1.0.0-next.28",
     "sirv": "^2.0.4",
     "slash": "^5.0.0",
-    "vite": "^4.0.4"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "storybook": "workspace:^",

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

@@ -32,13 +32,13 @@ export type PluginConfigType = 'build' | 'development';
 const configEnvServe: ConfigEnv = {
   mode: 'development',
   command: 'serve',
-  ssrBuild: false,
+  isSsrBuild: false,
 };
 
 const configEnvBuild: ConfigEnv = {
   mode: 'production',
   command: 'build',
-  ssrBuild: false,
+  isSsrBuild: false,
 };
 
 // Vite config that is common to development and production mode

code/core/package.json

@@ -367,7 +367,7 @@
     "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",
     "globby": "^14.0.1",
-    "jiti": "^1.21.6",
+    "jiti": "^2.4.0",
     "js-yaml": "^4.1.0",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
@@ -382,7 +382,7 @@
     "picoquery": "^1.4.0",
     "polished": "^4.2.2",
     "polka": "^1.0.0-next.28",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
     "react": "^18.2.0",

code/core/scripts/helpers/sourcefiles.ts

@@ -30,10 +30,10 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 
   const versions = JSON.stringify(
     workspace
-      .sort((a, b) => a.path.localeCompare(b.path))
+      .sort((a, b) => a!.path.localeCompare(b!.path))
       .reduce<Record<string, string>>((acc, i) => {
-        if (i.publishConfig && i.publishConfig.access === 'public') {
-          acc[i.name] = i.version;
+        if (i!.publishConfig && i!.publishConfig.access === 'public') {
+          acc[i!.name] = i!.version;
         }
         return acc;
       }, {})

code/core/src/cli/detect.test.ts

@@ -13,19 +13,25 @@ vi.mock('./helpers', () => ({
   isNxProject: vi.fn(),
 }));
 
-vi.mock('fs', () => ({
-  existsSync: vi.fn(),
-  stat: vi.fn(),
-  lstat: vi.fn(),
-  access: vi.fn(),
-  realpathSync: vi.fn(),
-  lstatSync: vi.fn(),
-  readdir: vi.fn(),
-  readdirSync: vi.fn(),
-  readlinkSync: vi.fn(),
-  default: vi.fn(),
-  mkdirSync: vi.fn(),
-}));
+vi.mock('fs', async (importOriginal) => {
+  const actual = await importOriginal<any>();
+
+  const exported = {
+    ...actual,
+    existsSync: vi.fn(),
+    stat: vi.fn(),
+    lstat: vi.fn(),
+    access: vi.fn(),
+    realpathSync: vi.fn(),
+    lstatSync: vi.fn(),
+    readdir: vi.fn(),
+    readdirSync: vi.fn(),
+    readlinkSync: vi.fn(),
+    default: vi.fn(),
+    mkdirSync: vi.fn(),
+  };
+  return { default: { ...actual.default, ...exported }, ...exported };
+});
 
 vi.mock('@storybook/core/node-logger');
 

code/core/src/manager-api/modules/stories.ts

@@ -338,7 +338,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         return undefined;
       }
       if (refId) {
-        // @ts-expect-error (possibly undefined)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore-error (possibly undefined)
         return refs[refId].index ? refs[refId].index[storyId] : undefined;
       }
       return index ? index[storyId] : undefined;

code/core/src/manager/globals/exports.ts

@@ -12,6 +12,7 @@ export default {
     'StrictMode',
     'Suspense',
     '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
+    'act',
     'cloneElement',
     'createContext',
     'createElement',

code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { Rubik_Puddles } from 'next/font/google';

code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 import Link from 'next/link';

code/frameworks/preact-vite/package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "typescript": "^5.3.2",
-    "vite": "^4.0.0"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "preact": ">=10",