Storybook upgrade to 6.4 final (#215)

# Pull Request ## 🤨 Rationale We've been running Storybook 6.4 beta for awhile, but Storybook 6.4 [recently](storybookjs/storybook#15355) went final. ## 👩‍💻 Implementation 1. Updated to 6.4 final packages 2. Installed new [Interactions add-on](https://www.npmjs.com/package/@storybook/addon-interactions) 3. Installed new [Storybook eslint rules](https://github.com/storybookjs/eslint-plugin-storybook) 4. Fixed `Story` typing within the stories. Using `StoryObj` for CSF 3 stories. 5. Removed the `layout: 'fullscreen'` parameter, to restore default Storybook padding around each control. Also, removed non-functional `preview-head.html` styling. ## 🧪 Testing 1. Local build, lint, test 2. Run Storybook and review all pages, add-ons, etc. 3. Reviewed Chromatic to confirm all changes related only to padding change ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
ni · Dec 6, 2021 · 2f623ef · 2f623ef
1 parent 3969021
commit 2f623ef
Show file tree

Hide file tree

Showing 27 changed files with 4,397 additions and 2,302 deletions.
diff --git a/change/@ni-nimble-components-1321520f-f51f-4230-8f4a-7a6cb3c33cd7.json b/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"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nimble-components/.storybook/main.js b/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

diff --git a/packages/nimble-components/.storybook/preview-head.html b/packages/nimble-components/.storybook/preview-head.html
diff --git a/packages/nimble-components/.storybook/preview.js b/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 }))

diff --git a/packages/nimble-components/package.json b/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",

diff --git a/packages/nimble-components/src/.eslintrc.js b/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'
             }
         },
         {

diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/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>`)
 );
diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts
@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta, StoryObj } 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: StoryObj<ButtonArgs> = {
     args: { label: 'Outline Button', appearance: ButtonAppearance.Outline }
 };
-export const ghostButton: Story<ButtonArgs> = {
+
+export const ghostButton: StoryObj<ButtonArgs> = {
     args: { label: 'Ghost Button', appearance: ButtonAppearance.Ghost }
 };
-export const blockButton: Story<ButtonArgs> = {
+export const blockButton: StoryObj<ButtonArgs> = {
     args: { label: 'Block Button', appearance: ButtonAppearance.Block }
 };
diff --git a/packages/nimble-components/src/checkbox/tests/checkbox-matrix.stories.ts b/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>`
     )

diff --git a/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts b/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, StoryObj } 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: StoryObj<CheckboxArgs> = {};
diff --git a/packages/nimble-components/src/drawer/tests/drawer.stories.ts b/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, StoryObj } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../utilities/tests/storybook';
 import '../../button/index';
@@ -167,4 +167,4 @@ const metadata: Meta<DrawerArgs> = {
 
 export default metadata;
 
-export const drawer: Story<DrawerArgs> = {};
+export const drawer: StoryObj<DrawerArgs> = {};
diff --git a/packages/nimble-components/src/icon-base/tests/icon-matrix.stories.ts b/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>`
     )

diff --git a/packages/nimble-components/src/icon-base/tests/icons.stories.ts b/packages/nimble-components/src/icon-base/tests/icons.stories.ts
@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta, StoryObj } 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: StoryObj<IconArgs> = {
     parameters: {
         controls: { hideNoControlsWarning: true }
     },
@@ -86,7 +86,7 @@ const iconTemplate = html<IconClass, IconArgs>`
 `;
 
 // prettier-ignore
-export const componentIcons: Story<IconArgs> = {
+export const componentIcons: StoryObj<IconArgs> = {
     args: { status: IconStatus.Regular },
     argTypes: {
         status: {

diff --git a/packages/nimble-components/src/menu/tests/menu-matrix.stories.ts b/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>

diff --git a/packages/nimble-components/src/menu/tests/menu.stories.ts b/packages/nimble-components/src/menu/tests/menu.stories.ts
@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta, StoryObj } 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: StoryObj<MenuArgs> = {
     parameters: {
         docs: {
             description: {
@@ -134,7 +134,7 @@ export const menu: Story<MenuArgs> = {
     }
 };
 
-export const customMenu: Story = {
+export const customMenu: StoryObj<MenuArgs> = {
     parameters: {
         docs: {
             description: {

diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/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

diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/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, StoryObj } 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: StoryObj<NumberFieldArgs> = {
     args: { label: 'Number Field' }
 };
diff --git a/packages/nimble-components/src/select/tests/select-matrix.stories.ts b/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>

diff --git a/packages/nimble-components/src/select/tests/select.stories.ts b/packages/nimble-components/src/select/tests/select.stories.ts
@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta, StoryObj } 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: StoryObj<SelectArgs> = {};
diff --git a/packages/nimble-components/src/tabs/tests/tabs-matrix.stories.ts b/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>

diff --git a/packages/nimble-components/src/tabs/tests/tabs.stories.ts b/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, StoryObj } 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: StoryObj<TabsArgs> = {};
 
-export const toolbar: Story<TabsArgs> = {
+export const toolbar: StoryObj<TabsArgs> = {
     args: {
         toolbar:
             '<nimble-button appearance="ghost">Toolbar Button</nimble-button>'

diff --git a/packages/nimble-components/src/text-field/tests/text-field-matrix.stories.ts b/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>`
     )

diff --git a/packages/nimble-components/src/text-field/tests/text-field.stories.ts b/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, StoryObj } 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: StoryObj<TextFieldArgs> = {
     args: { label: 'Text Field' }
 };
 
-export const passwordField: Story<TextFieldArgs> = {
+export const passwordField: StoryObj<TextFieldArgs> = {
     args: { label: 'Password Field', type: 'password' }
 };
diff --git a/packages/nimble-components/src/tree-view/tests/tree-view-matrix.stories.ts b/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>

diff --git a/packages/nimble-components/src/tree-view/tests/tree-view.stories.ts b/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, StoryObj } 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: StoryObj<TreeArgs> = {};
diff --git a/packages/nimble-components/tsconfig.json b/packages/nimble-components/tsconfig.json
@@ -13,7 +13,8 @@
         "importHelpers": true,
         "resolveJsonModule": true,
         "sourceMap": true,
-        "skipLibCheck": false,
+        // Set to 'true' to work around – https://github.com/ni/nimble/issues/219
+        "skipLibCheck": true,
         "lib": ["DOM", "ES2015", "ES2016.Array.Include", "ES2017.Object"],
         // Whitelist imported @types instead of using them all
         "types": ["jasmine", "webpack-env"],