Fix Actions tab in Storybook (#1154)

# Pull Request

## 🤨 Rationale

After #1134, the Actions tab in Storybook was no longer displaying
events fired by components. This is one of the issues tracked in #1146.

As described in the [Storybook 7 migration
guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-auto-injection-of-storybookaddon-actions-decorator),
the actions addon is no longer enabled by default and it must be enabled
by configuring the story with `decorators: [withActions]`. However, the
`withActions` decorator wasn't exported from Storybook in a way that we
could import it (see
storybookjs/storybook#21887). A Storybook dev
commented on that issue with a workaround that we can use until they fix
that bug.

## 👩‍💻 Implementation

1. Add a [TypeScript shorthand ambient module
declaration](https://www.typescriptlang.org/docs/handbook/modules.html#shorthand-ambient-modules)
for the import URL that contains `withActions`. See
`/utilities/tests/storybook-declarations.d.ts`.
2. Update all stories that expose an action to import `withActions` and
configure it as a decorator (also reordered a few imports to group them
by package)

## 🧪 Testing

Manually verified many of the stories that have actions are now firing
them.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

change/@ni-nimble-components-7612f990-8c7c-49a4-bfa2-53d913115c1d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix Actions tab in Storybook",
+  "packageName": "@ni/nimble-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/preview.js

@@ -26,5 +26,5 @@ export const parameters = {
 // be quite large, such as in a table with a lot of records. Therefore, the serialization depth
 // should be limited to avoid poor performance.
 configureActions({
-    depth: 6
+    depth: 1
 });

packages/nimble-components/src/banner/tests/banner.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { BannerSeverity } from '../types';
 import { bannerGapSize } from '../../theme-provider/design-tokens';
@@ -42,6 +43,7 @@ should be spaced apart using the \`${bannerGapSize.cssCustomProperty}\` design t
 const metadata: Meta<BannerArgs> = {
     title: 'Banner',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/button/tests/button.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { ButtonAppearance, ButtonAppearanceVariant } from '../types';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import {
@@ -32,6 +33,7 @@ If you want a button that triggers navigation to a URL, use the \`nimble-anchor-
 const metadata: Meta<ButtonArgs> = {
     title: 'Button',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/card-button/tests/card-button.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { cardButtonTag } from '..';
@@ -18,6 +19,7 @@ Note: The styling for the "Color" theme is not complete.`;
 const metadata: Meta<CardButtonArgs> = {
     title: 'Card Button',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/checkbox/tests/checkbox.stories.ts

@@ -1,4 +1,5 @@
 import { html } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { checkboxTag } from '..';
@@ -13,6 +14,7 @@ interface CheckboxArgs {
 const metadata: Meta<CheckboxArgs> = {
     title: 'Checkbox',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/combobox/tests/combobox.stories.ts

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { ComboboxAutocomplete } from '@microsoft/fast-foundation';
 import { html, repeat } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { listOptionTag } from '../../list-option';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import {
@@ -29,6 +30,7 @@ interface OptionArgs {
 const metadata: Meta<ComboboxArgs> = {
     title: 'Combobox',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/drawer/tests/drawer.stories.ts

@@ -1,4 +1,5 @@
 import { html, ref } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { DrawerWidthOptions, ExampleContentType } from './types';
 import {
@@ -115,6 +116,7 @@ ${overrideWarning('Drawer Width', widthDescriptionOverride)}
 const metadata: Meta<DrawerArgs> = {
     title: 'Drawer',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/menu-button/tests/menu-button.stories.ts

@@ -1,4 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { ButtonAppearance, MenuButtonPosition } from '../types';
@@ -30,6 +31,7 @@ This icon will be hidden when \`contentHidden\` is set to \`true\`
 const metadata: Meta<MenuButtonArgs> = {
     title: 'Menu Button',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/menu/tests/menu.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html, repeat, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { menuTag } from '..';
 import { iconArrowLeftFromLineTag } from '../../icons/arrow-left-from-line';
@@ -40,6 +41,7 @@ and will format them and any Nimble icons added as children of \`<nimble-menu-it
 const metadata: Meta<MenuArgs> = {
     title: 'Menu',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/number-field/tests/number-field.stories.ts

@@ -1,4 +1,5 @@
 import { html } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { NumberFieldAppearance } from '../types';
@@ -19,6 +20,7 @@ interface NumberFieldArgs {
 const metadata: Meta<NumberFieldArgs> = {
     title: 'Number Field',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/radio-group/tests/radio-group.stories.ts

@@ -1,5 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { radioGroupTag } from '..';
@@ -16,6 +17,7 @@ interface RadioGroupArgs {
 const metadata: Meta<RadioGroupArgs> = {
     title: 'Radio Group',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/select/tests/select.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html, repeat } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { DropdownAppearance } from '../../patterns/dropdown/types';
 import { selectTag } from '..';
@@ -23,6 +24,7 @@ interface OptionArgs {
 const metadata: Meta<SelectArgs> = {
     title: 'Select',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/switch/tests/switch.stories.ts

@@ -1,4 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { switchTag } from '..';
@@ -21,6 +22,7 @@ pressed or not pressed and can optionally allow for a partially pressed state.`;
 const metadata: Meta<SwitchArgs> = {
     title: 'Switch',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/table/tests/table.stories.ts

@@ -1,4 +1,5 @@
 import { html, ref } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import {
     createUserSelectedThemeStory,
@@ -108,6 +109,7 @@ The object's type is \`TableValidityState\`, and it contains the following boole
 const metadata: Meta<TableArgs> = {
     title: 'Table',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/tabs/tests/tabs.stories.ts

@@ -1,4 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { tabsTag } from '..';
@@ -26,6 +27,7 @@ If you want a sequence of tabs that navigate to different URLs, use the Anchor T
 const metadata: Meta<TabsArgs> = {
     title: 'Tabs',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/text-area/tests/text-area.stories.ts

@@ -1,4 +1,5 @@
 import { html } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { TextAreaAppearance, TextAreaResize } from '../types';
@@ -30,6 +31,7 @@ If you configure your text area to be resizable (with the \`resize\` attribute)
 const metadata: Meta<TextAreaArgs> = {
     title: 'Text Area',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/text-field/tests/text-field.stories.ts

@@ -1,4 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { TextFieldAppearance, TextFieldType } from '../types';
@@ -33,6 +34,7 @@ consuming application must implement that functionality.
 const metadata: Meta<TextFieldArgs> = {
     title: 'Text Field',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts

@@ -1,4 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { ButtonAppearance } from '../types';
@@ -30,6 +31,7 @@ screen reader would say something like "Mute toggle button pressed".`;
 const metadata: Meta<ToggleButtonArgs> = {
     title: 'Toggle Button',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/tooltip/tests/tooltip.stories.ts

@@ -1,6 +1,7 @@
 import { html, ref } from '@microsoft/fast-element';
-import type { Meta, StoryObj } from '@storybook/html';
 import type { AutoUpdateMode } from '@microsoft/fast-foundation';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import {
     borderColor,
@@ -92,6 +93,7 @@ const complexContent = html<TooltipArgs>`
 const metadata: Meta<TooltipArgs> = {
     title: 'Tooltip',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/tree-view/tests/tree-view.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html';
 import { html, repeat, when } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { TreeViewSelectionMode } from '../types';
 import { treeViewTag } from '..';
@@ -37,6 +38,7 @@ Note: Changing the selection mode does not affect which items can be selected pr
 const metadata: Meta<TreeArgs> = {
     title: 'Tree View',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {

packages/nimble-components/src/utilities/tests/storybook-declarations.d.ts

@@ -0,0 +1,3 @@
+// This file is a workaround to allow Nimble to import types that Storybook doesn't export correctly
+// https://github.com/storybookjs/storybook/issues/21887#issuecomment-1495427769
+declare module '@storybook/addon-actions/decorator';

packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts

@@ -1,4 +1,5 @@
 import { html } from '@microsoft/fast-element';
+import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/html';
 import {
     createUserSelectedThemeStory,
@@ -85,6 +86,7 @@ const getHighLightedValueSets = (
 const metadata: Meta<WaferMapArgs> = {
     title: 'WaferMap',
     tags: ['autodocs'],
+    decorators: [withActions],
     parameters: {
         docs: {
             description: {