Merge branch 'next' into text_slot

.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
 

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/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

@@ -94,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/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/highlight/README.md

@@ -4,61 +4,143 @@ Storybook addon allows for highlighting specific DOM nodes within your story.
 
 Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
 
-![](https://user-images.githubusercontent.com/42671/160146801-179eaa79-fff8-4bff-b17c-9262fdc94918.png)
+![Story with highlight](./docs/highlight.png)
 
 ## Usage
 
-This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
+
+yarn:
+
+```sh
+yarn add --dev @storybook/addon-highlight
+```
+
+npm:
 
 ```sh
-npm i -D @storybook/addon-highlight
+npm install @storybook/addon-highlight --save-dev
 ```
 
-Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
+pnpm:
+
+```sh
+pnpm add --save-dev @storybook/addon-highlight
+```
+
+Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js|ts`:
+
+```ts
+// .storybook/main.ts
 
-```js
-export default {
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
   addons: ['@storybook/addon-highlight'],
 };
+
+export default config;
 ```
 
-### Apply or clear highlights
+### Highlighting DOM Elements
 
-Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
+Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight.
 
-```js
-import React, { useEffect } from 'react';
-import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { MyComponent } from './MyComponent';
+```ts
+// MyComponent.stories.ts
 
-export default { component: MyComponent };
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-export const MyStory = () => {
-  const emit = useChannel({});
+import { MyComponent } from './MyComponent';
 
-  useEffect(() => {
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-  }, []);
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
 
-  return <MyComponent />;
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Highlighted: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['.title', '.subtitle'],
+      });
+      return storyFn();
+    },
+  ],
 };
 ```
 
+### Reset highlighted elements
+
 Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
 
-```js
-emit(RESET_HIGHLIGHT);
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+};
 ```
 
 ### Customize style
 
-```js
-emit(HIGHLIGHT, {
-  elements: ['.title', '.subtitle'],
-  color: 'red',
-  style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
-});
+The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
+
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['.title', '.subtitle'],
+        color: 'red',
+        style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+};
 ```

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -175,7 +174,7 @@ export const Interaction = ({
               tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
             >
               <StyledIconButton containsIcon onClick={toggleCollapsed}>
-                <Icon.ListUnordered />
+                <Icons icon="listunordered" />
               </StyledIconButton>
             </WithTooltip>
           )}