Storybook upgrade to 6.4 final

change/@ni-nimble-components-1321520f-f51f-4230-8f4a-7a6cb3c33cd7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "upgrade to 6.4 final",
+  "packageName": "@ni/nimble-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}

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

@@ -13,7 +13,8 @@ module.exports = {
             }
         },
         'storybook-addon-xd-designs',
-        '@storybook/addon-a11y'
+        '@storybook/addon-a11y',
+        '@storybook/addon-interactions'
     ],
     features: {
         previewCsfV3: true

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

@@ -6,7 +6,6 @@ import { backgroundStates } from '../dist/esm/utilities/tests/matrix';
 const [defaultBackground] = backgroundStates;
 
 export const parameters = {
-    layout: 'fullscreen',
     backgrounds: {
         default: defaultBackground.name,
         values: backgroundStates.map(({ name, value }) => ({ name, value }))

packages/nimble-components/package.json

@@ -52,16 +52,19 @@
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.13.15",
     "@ni/eslint-config-typescript": "^3.0.0",
-    "@storybook/addon-a11y": "^6.4.0-alpha.28",
-    "@storybook/addon-actions": "^6.4.0-alpha.28",
-    "@storybook/addon-docs": "^6.4.0-alpha.28",
-    "@storybook/addon-essentials": "^6.4.0-alpha.28",
-    "@storybook/addon-links": "^6.4.0-alpha.28",
-    "@storybook/addons": "^6.4.0-alpha.28",
-    "@storybook/builder-webpack5": "^6.4.0-alpha.28",
-    "@storybook/html": "^6.4.0-alpha.28",
-    "@storybook/manager-webpack5": "^6.4.0-alpha.28",
-    "@storybook/theming": "^6.4.0-alpha.28",
+    "@storybook/addon-a11y": "^6.4.0",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-interactions": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addons": "^6.4.0",
+    "@storybook/builder-webpack5": "^6.4.0",
+    "@storybook/html": "^6.4.0",
+    "@storybook/jest": "^0.0.5",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/testing-library": "^0.0.7",
+    "@storybook/theming": "^6.4.0",
     "@types/jasmine": "^3.6.0",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^8.2.2",
@@ -70,6 +73,7 @@
     "css-loader": "^6.2.0",
     "dotenv-webpack": "^7.0.2",
     "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-storybook": "^0.5.1",
     "html-webpack-plugin": "^5.3.1",
     "jasmine-core": "^3.7.0",
     "karma": "^6.3.0",

packages/nimble-components/src/.eslintrc.js

@@ -35,7 +35,10 @@ module.exports = {
         '@typescript-eslint/no-non-null-assertion': 'off',
 
         // Improves readability of templates to avoid return types in template expressions
-        '@typescript-eslint/explicit-function-return-type': ['error', {allowExpressions: true}],
+        '@typescript-eslint/explicit-function-return-type': [
+            'error',
+            { allowExpressions: true }
+        ],
 
         'no-restricted-imports': [
             'error',
@@ -55,13 +58,15 @@ module.exports = {
     overrides: [
         {
             files: ['*.stories.ts'],
+            extends: ['plugin:storybook/recommended'],
             rules: {
                 // Storybook files will not be in published package and are allowed to use devDependencies
                 'import/no-extraneous-dependencies': [
                     'error',
                     { devDependencies: true }
                 ],
-                'import/no-default-export': 'off'
+                'import/no-default-export': 'off',
+                'storybook/prefer-pascal-case': 'off'
             }
         },
         {

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

@@ -29,7 +29,7 @@ const metadata: Meta = {
 
 export default metadata;
 
-export const defaultButton = createRenderer(
+export const defaultButton: Story = createRenderer(
     html`<nimble-button>Default Button</nimble-button>`
 );
 const noContent = 'NO_CONTENT';
@@ -58,6 +58,6 @@ export const buttonThemeMatrix: Story = createRenderer(
     )
 );
 
-export const hiddenButton = createRenderer(
+export const hiddenButton: Story = createRenderer(
     hiddenWrapper(html`<nimble-button hidden>Hidden Button</nimble-button>`)
 );

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

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { html, when } from '@microsoft/fast-element';
 import { ButtonAppearance } from '../types';
@@ -58,12 +58,13 @@ const metadata: Meta<ButtonArgs> = {
 
 export default metadata;
 
-export const outlineButton: Story<ButtonArgs> = {
+export const outlineButton = {
     args: { label: 'Outline Button', appearance: ButtonAppearance.Outline }
 };
-export const ghostButton: Story<ButtonArgs> = {
+
+export const ghostButton = {
     args: { label: 'Ghost Button', appearance: ButtonAppearance.Ghost }
 };
-export const blockButton: Story<ButtonArgs> = {
+export const blockButton = {
     args: { label: 'Block Button', appearance: ButtonAppearance.Block }
 };

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

@@ -45,7 +45,7 @@ export const checkboxThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [disabledStates, checkedStates]))
 );
 
-export const hiddenCheckbox = createRenderer(
+export const hiddenCheckbox: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-checkbox hidden>Hidden Checkbox</nimble-checkbox>`
     )

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

@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../index';
@@ -45,4 +45,4 @@ const metadata: Meta<CheckboxArgs> = {
 
 export default metadata;
 
-export const checkbox: Story<CheckboxArgs> = {};
+export const checkbox = {};

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

@@ -1,5 +1,5 @@
 import { html, ViewTemplate } from '@microsoft/fast-element';
-import type { Meta, Story } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../../button/index';
@@ -129,4 +129,4 @@ const metadata: Meta<DrawerArgs> = {
 
 export default metadata;
 
-export const drawer: Story<DrawerArgs> = {};
+export const drawer = {};

packages/nimble-components/src/icon-base/tests/icon-matrix.stories.ts

@@ -36,7 +36,7 @@ export const iconThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [iconStatusStates]))
 );
 
-export const hiddenIcon = createRenderer(
+export const hiddenIcon: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-check-icon class="pass" hidden></nimble-check-icon>`
     )

packages/nimble-components/src/icon-base/tests/icons.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import * as nimbleIconsMap from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { withXD } from 'storybook-addon-xd-designs';
 import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
@@ -50,7 +50,7 @@ const metadata: Meta<IconArgs> = {
 export default metadata;
 
 // prettier-ignore
-export const rawIcons: Story<IconArgs> = {
+export const rawIcons = {
     parameters: {
         controls: { hideNoControlsWarning: true }
     },
@@ -86,7 +86,7 @@ const iconTemplate = html<IconClass, IconArgs>`
 `;
 
 // prettier-ignore
-export const componentIcons: Story<IconArgs> = {
+export const componentIcons = {
     args: { status: IconStatus.Regular },
     argTypes: {
         status: {

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

@@ -46,7 +46,7 @@ export const menuThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [iconVisibleStates]))
 );
 
-export const hiddenMenu = createRenderer(
+export const hiddenMenu: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-menu hidden>
             <nimble-menu-item>Item 1</nimble-menu-item>

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

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { html, repeat, when } from '@microsoft/fast-element';
 import { createRenderer } from '../../utilities/tests/storybook';
@@ -45,7 +45,7 @@ const metadata: Meta<MenuArgs> = {
 
 export default metadata;
 
-export const menu: Story<MenuArgs> = {
+export const menu = {
     parameters: {
         docs: {
             description: {
@@ -134,7 +134,7 @@ export const menu: Story<MenuArgs> = {
     }
 };
 
-export const customMenu: Story = {
+export const customMenu = {
     parameters: {
         docs: {
             description: {

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

@@ -47,7 +47,7 @@ export const numberFieldThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [disabledStates, valueStates]))
 );
 
-export const hiddenNumberField = createRenderer(
+export const hiddenNumberField: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-number-field hidden
             >Hidden number field</nimble-number-field

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

@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../index';
@@ -46,6 +46,6 @@ const metadata: Meta<NumberFieldArgs> = {
 
 export default metadata;
 
-export const numberField: Story<NumberFieldArgs> = {
+export const numberField = {
     args: { label: 'Number Field' }
 };

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

@@ -39,7 +39,7 @@ export const selectThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [disabledStates]))
 );
 
-export const hiddenSelect = createRenderer(
+export const hiddenSelect: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-select hidden>
             <nimble-listbox-option value="1">Option 1</nimble-listbox-option>

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

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import '../index';
 import '../../listbox-option/index';
@@ -64,4 +64,4 @@ const metadata: Meta<SelectArgs> = {
 
 export default metadata;
 
-export const select: Story<SelectArgs> = {};
+export const select = {};

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

@@ -58,7 +58,7 @@ export const tabsThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [tabsToolbarState, disabledStates]))
 );
 
-export const hiddenTabs = createRenderer(
+export const hiddenTabs: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-tabs hidden>
             <nimble-tab>Tab One</nimble-tab>

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

@@ -1,5 +1,5 @@
 import { html, repeat, when } from '@microsoft/fast-element';
-import type { Meta, Story } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../index';
@@ -73,9 +73,9 @@ const metadata: Meta<TabsArgs> = {
 
 export default metadata;
 
-export const tabs: Story<TabsArgs> = {};
+export const tabs = {};
 
-export const toolbar: Story<TabsArgs> = {
+export const toolbar = {
     args: {
         toolbar:
             '<nimble-button appearance="ghost">Toolbar Button</nimble-button>'

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

@@ -74,7 +74,7 @@ export const textFieldThemeMatrix: Story = createRenderer(
     )
 );
 
-export const hiddenTextField = createRenderer(
+export const hiddenTextField: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-text-field hidden>Hidden text field</nimble-text-field>`
     )

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

@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../index';
@@ -60,10 +60,10 @@ const metadata: Meta<TextFieldArgs> = {
 
 export default metadata;
 
-export const textField: Story<TextFieldArgs> = {
+export const textField = {
     args: { label: 'Text Field' }
 };
 
-export const passwordField: Story<TextFieldArgs> = {
+export const passwordField = {
     args: { label: 'Password Field', type: 'password' }
 };

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

@@ -80,7 +80,7 @@ export const treeViewThemeMatrix: Story = createRenderer(
     )
 );
 
-export const hiddenTreeView = createRenderer(
+export const hiddenTreeView: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-tree-view hidden>
             <nimble-tree-item>Item 1</nimble-tree-item>

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

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import '../index';
 import '../../tree-item/index';
@@ -113,4 +113,4 @@ const metadata: Meta<TreeArgs> = {
 
 export default metadata;
 
-export const treeView: Story<TreeArgs> = {};
+export const treeView = {};

packages/nimble-components/tsconfig.json

@@ -13,7 +13,8 @@
         "importHelpers": true,
         "resolveJsonModule": true,
         "sourceMap": true,
-        "skipLibCheck": false,
+        // Set to True to workaround – https://github.com/storybookjs/storybook/issues/16839
+        "skipLibCheck": true,
         "lib": ["DOM", "ES2015", "ES2016.Array.Include", "ES2017.Object"],
         // Whitelist imported @types instead of using them all
         "types": ["jasmine", "webpack-env"],