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-head.html

@@ -1,13 +0,0 @@
-<style>
-    html,
-    body {
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        color: var(--neutral-foreground-rest);
-    }
-    #root {
-        padding: 20px;
-    }
-</style>

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,7 +73,9 @@
     "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",
+    "i": "^0.3.7",
     "jasmine-core": "^3.7.0",
     "karma": "^6.3.0",
     "karma-chrome-launcher": "^3.1.0",
@@ -81,6 +86,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "^5.0.0",
+    "npm": "^8.1.4",
     "prettier": "^2.0.0",
     "prettier-eslint": "^13.0.0",
     "prettier-eslint-cli": "^5.0.1",

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

@@ -3,7 +3,8 @@ module.exports = {
     plugins: ['jsdoc'],
     extends: [
         '@ni/eslint-config-typescript',
-        '@ni/eslint-config-typescript/requiring-type-checking'
+        '@ni/eslint-config-typescript/requiring-type-checking',
+        'plugin:storybook/recommended'
     ],
     parserOptions: {
         project: '../tsconfig.json',
@@ -35,7 +36,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',
@@ -61,7 +65,15 @@ module.exports = {
                     'error',
                     { devDependencies: true }
                 ],
-                'import/no-default-export': 'off'
+                'import/no-default-export': 'off',
+                '@typescript-eslint/naming-convention': [
+                    'error',
+                    {
+                        selector: 'variable',
+                        modifiers: ['exported'],
+                        format: null
+                    }
+                ]
             }
         },
         {

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';
@@ -48,7 +48,7 @@ const component = (
     </nimble-button>
 `;
 
-export const buttonThemeMatrix: Story = createRenderer(
+export const ButtonThemeMatrix: Story = createRenderer(
     themeWrapper(
         createMatrix(component, [
             disabledStates,
@@ -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

@@ -41,11 +41,11 @@ const component = (
     ${checkedName} ${disabledName}
 </nimble-checkbox>`;
 
-export const checkboxThemeMatrix: Story = createRenderer(
+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-matrix.stories.ts

@@ -62,22 +62,22 @@ if (remaining.length > 0) {
     throw new Error('New backgrounds need to be supported');
 }
 
-export const drawerLightThemeWhiteBackground: Story = createRenderer(
+export const DrawerLightThemeWhiteBackground: Story = createRenderer(
     singleThemeWrapper(component, lightThemeWhiteBackground)
 );
 
-export const drawerColorThemeGreenBackground: Story = createRenderer(
+export const DrawerColorThemeGreenBackground: Story = createRenderer(
     singleThemeWrapper(component, colorThemeGreenBackground)
 );
 
-export const drawerColorThemeDarkGreenBackground: Story = createRenderer(
+export const DrawerColorThemeDarkGreenBackground: Story = createRenderer(
     singleThemeWrapper(component, colorThemeDarkGreenBackground)
 );
 
-export const drawerDarkThemeBlackBackground: Story = createRenderer(
+export const DrawerDarkThemeBlackBackground: Story = createRenderer(
     singleThemeWrapper(component, darkThemeBlackBackground)
 );
 
-export const drawerLegacyBlueThemeWhiteBackground: Story = createRenderer(
+export const DrawerLegacyBlueThemeWhiteBackground: Story = createRenderer(
     singleThemeWrapper(component, legacyBlueThemeWhiteBackground)
 );

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

@@ -32,11 +32,11 @@ const component = ([stateName, state]: IconStatusState): ViewTemplate => html`
     <nimble-check-icon class="${state}"></nimble-check-icon>
 `;
 
-export const iconThemeMatrix: Story = createRenderer(
+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

@@ -42,11 +42,11 @@ const component = (
     </span>
 `;
 
-export const menuThemeMatrix: Story = createRenderer(
+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

@@ -43,11 +43,11 @@ const component = (
     </nimble-number-field>
 `;
 
-export const numberFieldThemeMatrix: Story = createRenderer(
+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

@@ -35,11 +35,11 @@ const component = ([_, disabled]: DisabledState): ViewTemplate => html`
     </nimble-select>
 `;
 
-export const selectThemeMatrix: Story = createRenderer(
+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-opened-matrix.stories.ts

@@ -38,6 +38,6 @@ const component = ([
     </nimble-select>
 `;
 
-export const selectOpenedThemeMatrix: Story = createRenderer(
+export const SelectOpenedThemeMatrix: Story = createRenderer(
     themeWrapper(createMatrix(component, [positionStates]))
 );

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

@@ -54,11 +54,11 @@ const component = (
     </nimble-tabs>
 `;
 
-export const tabsThemeMatrix: Story = createRenderer(
+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>