Release: Prerelease 7.4.0-alpha.1

.circleci/config.yml

@@ -195,6 +195,11 @@ jobs:
           command: |
             cd scripts
             yarn get-template --check
+      - run:
+          name: Type check
+          command: |
+            cd scripts
+            yarn check
       - run:
           name: Run tests
           command: |

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,33 @@
 Closes #
 
-<!-- Thank you for contributing to Storybook! If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
+<!-- If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
+
+<!--
+
+Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
+
+-->
+
 
 ## What I did
 
 <!-- Briefly describe what your PR does -->
 
-## How to test
+## Checklist for Contributors
+
+### Testing
+
+<!-- Please check (put an "x" inside the "[ ]") the applicable items below to communicate how to test your changes -->
+
+#### The changes in this PR are covered in the following automated tests:
+- [ ] stories
+- [ ] unit tests
+- [ ] integration tests
+- [ ] end-to-end tests
+
+#### Manual testing
+
+_This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!_
 
 <!-- Please include the steps to test your changes here. For example:
 
@@ -16,27 +37,32 @@ Closes #
 
 -->
 
-## Checklist
+### Documentation
 
-<!-- Please check (put an "x" inside the "[ ]") the applicable items below to make sure your PR is ready to be reviewed. -->
+<!-- Please check (put an "x" inside the "[ ]") the applicable items below to indicate which documentation has been updated. -->
 
-- [ ] Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
-- [ ] Make sure to add/update documentation regarding your changes
+- [ ] Add or update documentation reflecting your changes
 - [ ] If you are deprecating/removing a feature, make sure to update
       [MIGRATION.MD](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md)
 
-#### Maintainers
+## Checklist for Maintainers
 
 - [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli/src/sandbox-templates.ts`
-- [ ] Make sure this PR contains **one** of the labels below.
-
-`["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]`
-
-<!--
-
-Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
-
--->
+- [ ] Make sure this PR contains **one** of the labels below:
+   <details>
+     <summary>Available labels</summary>
+
+     - `bug`: Internal changes that fixes incorrect behavior.
+     - `maintenance`: User-facing maintenance tasks.
+     - `dependencies`: Upgrading (sometimes downgrading) dependencies.
+     - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog.
+     - `cleanup`: Minor cleanup style change. Will not show up in release changelog.
+     - `documentation`: Documentation **only** changes. Will not show up in release changelog.
+     - `feature request`: Introducing a new feature.
+     - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version.
+     - `other`: Changes that don't fit in the above categories.
+
+   </details>
 
 ### 🦋 Canary release
 

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.3.2
+
+- Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!
+
 ## 7.3.1
 
 - Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!

CHANGELOG.prerelease.md

@@ -1,3 +1,19 @@
+## 7.4.0-alpha.1
+
+- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!
+- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!
+- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!
+- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!
+- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!
+- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vue3: Add support for  Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!
+- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!
+
 ## 7.4.0-alpha.0
 
 - Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!

CONTRIBUTING.md

@@ -7,6 +7,18 @@ Storybook is developed against a specific node version. We recommend using [Volt
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
 
+## Issues
+
+If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:
+
+```sh
+>  NX   ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
+```
+
+## Forked repos
+
+If you have forked the repository, you should [disable Github Actions for your repo](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) as many of them (e.g. pushing to sandbox) will fail without proper authorization. In your Github repo, go to Settings > Actions > General > set the Actions Permissions to **Disable actions**.
+
 # Running against different sandbox templates
 
 You can also pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.

code/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
+  plugins: ['local-rules'],
   rules: {
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',
@@ -166,5 +167,18 @@ module.exports = {
         'import/no-unresolved': 'off',
       },
     },
+    {
+      files: ['**/*.ts', '!**/*.test.*', '!**/*.spec.*'],
+      rules: {
+        'local-rules/no-uncategorized-errors': 'warn',
+      },
+    },
+    {
+      files: ['**/core-events/src/**/*'],
+      excludedFiles: ['**/*.test.*'],
+      rules: {
+        'local-rules/no-duplicated-error-codes': 'error',
+      },
+    },
   ],
 };

code/addons/a11y/package.json

@@ -56,7 +56,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",

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

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { Filters } from './ColorFilters';
 
@@ -145,7 +144,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Icon.Accessibility />
+          <Icons icon="accessibility" />
         </IconButton>
       </WithTooltip>
       <Hidden>

code/addons/actions/package.json

@@ -73,7 +73,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
@@ -93,7 +94,7 @@
     "polished": "^4.2.2",
     "prop-types": "^15.7.2",
     "react-inspector": "^6.0.0",
-    "telejson": "^7.0.3",
+    "telejson": "^7.2.0",
     "ts-dedent": "^2.0.0",
     "uuid": "^9.0.0"
   },

code/addons/backgrounds/package.json

@@ -69,7 +69,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -4,8 +4,7 @@ import memoize from 'memoizerific';
 
 import { useParameter, useGlobals } from '@storybook/manager-api';
 import { logger } from '@storybook/client-logger';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
@@ -141,7 +140,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
           title="Change the background of the preview"
           active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
         >
-          <Icon.Photo />
+          <Icons icon="photo" />
         </IconButton>
       </WithTooltip>
     </Fragment>

code/addons/backgrounds/src/containers/GridSelector.tsx

@@ -2,8 +2,7 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 
 import { useGlobals, useParameter } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
@@ -31,7 +30,7 @@ export const GridSelector: FC = memo(function GridSelector() {
         })
       }
     >
-      <Icon.Grid />
+      <Icons icon="grid" />
     </IconButton>
   );
 });

code/addons/controls/package.json

@@ -61,7 +61,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",

code/addons/docs/package.json

@@ -90,7 +90,8 @@
     "lit/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",

code/addons/essentials/package.json

@@ -112,7 +112,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",

code/addons/gfm/package.json

@@ -44,7 +44,8 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",