Update dependencies and package structure to support ESM

.github/workflows/test.yml

@@ -33,7 +33,3 @@ jobs:
           yarn test-storybook:ci-coverage
         working-directory: examples/vite
 
-      - name: Generate code coverage
-        uses: codecov/codecov-action@v3
-        with:
-          verbose: true

examples/vite/.storybook/main.ts

@@ -1,5 +1,5 @@
 export default {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
 
   addons: [
     "@storybook/addon-essentials",

examples/vite/src/stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryFn, Meta } from "@storybook/react";
 
 import { Button } from "./Button";
+import { expect } from "@storybook/test";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -13,16 +14,20 @@ export default {
 } as Meta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: StoryFn<typeof Button> = (args) => (
-  <Button {...args} />
-);
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
   label: "Button",
 };
+Primary.play = async () => {
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Button.tsx"))
+  ).toBeTruthy();
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {

examples/vite/src/stories/Header.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryFn, Meta } from "@storybook/react";
 
 import { Header } from "./Header";
+import { expect } from "@storybook/test";
 
 export default {
   title: "Example/Header",
@@ -11,16 +12,20 @@ export default {
   },
 } as Meta<typeof Header>;
 
-const Template: StoryFn<typeof Header> = (args) => (
-  <Header {...args} />
-);
+const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   user: {
     name: "Jane Doe",
   },
 };
+LoggedIn.play = async () => {
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Header.tsx"))
+  ).toBeTruthy();
+};
 
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};

examples/vite/src/stories/Page.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryFn, Meta } from "@storybook/react";
-import { within, userEvent } from "@storybook/test";
+import { within, userEvent, expect } from "@storybook/test";
 import { Page } from "./Page";
 
 export default {
@@ -22,4 +22,9 @@ LoggedIn.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const loginButton = await canvas.getByRole("button", { name: /Log in/i });
   await userEvent.click(loginButton);
+
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Page.tsx"))
+  ).toBeTruthy();
 };

examples/vite/yarn.lock

@@ -1866,7 +1866,7 @@ __metadata:
     espree: "npm:^9.6.1"
     istanbul-lib-instrument: "npm:^6.0.1"
     test-exclude: "npm:^6.0.0"
-    vite-plugin-istanbul: "npm:^3.0.1"
+    vite-plugin-istanbul: "npm:^6.0.2"
   languageName: node
   linkType: soft
 
@@ -2748,7 +2748,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.9.0":
+"acorn@npm:^8.14.0, acorn@npm:^8.9.0":
   version: 8.14.0
   resolution: "acorn@npm:8.14.0"
   bin:
@@ -4091,6 +4091,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "eslint-visitor-keys@npm:4.2.0"
+  checksum: 10c0/2ed81c663b147ca6f578312919483eb040295bbab759e5a371953456c636c5b49a559883e2677112453728d66293c0a4c90ab11cab3428cf02a0236d2e738269
+  languageName: node
+  linkType: hard
+
+"espree@npm:^10.0.1":
+  version: 10.3.0
+  resolution: "espree@npm:10.3.0"
+  dependencies:
+    acorn: "npm:^8.14.0"
+    acorn-jsx: "npm:^5.3.2"
+    eslint-visitor-keys: "npm:^4.2.0"
+  checksum: 10c0/272beeaca70d0a1a047d61baff64db04664a33d7cfb5d144f84bc8a5c6194c6c8ebe9cc594093ca53add88baa23e59b01e69e8a0160ab32eac570482e165c462
+  languageName: node
+  linkType: hard
+
 "espree@npm:^9.6.1":
   version: 9.6.1
   resolution: "espree@npm:9.6.1"
@@ -5074,7 +5092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-instrument@npm:^5.0.4, istanbul-lib-instrument@npm:^5.1.0":
+"istanbul-lib-instrument@npm:^5.0.4":
   version: 5.2.1
   resolution: "istanbul-lib-instrument@npm:5.2.1"
   dependencies:
@@ -5087,7 +5105,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-instrument@npm:^6.0.0, istanbul-lib-instrument@npm:^6.0.1":
+"istanbul-lib-instrument@npm:^6.0.0, istanbul-lib-instrument@npm:^6.0.1, istanbul-lib-instrument@npm:^6.0.2":
   version: 6.0.3
   resolution: "istanbul-lib-instrument@npm:6.0.3"
   dependencies:
@@ -7320,6 +7338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.7.4":
+  version: 0.7.4
+  resolution: "source-map@npm:0.7.4"
+  checksum: 10c0/dc0cf3768fe23c345ea8760487f8c97ef6fca8a73c83cd7c9bf2fde8bc2c34adb9c0824d6feb14bc4f9e37fb522e18af621543f1289038a66ac7586da29aa7dc
+  languageName: node
+  linkType: hard
+
 "spawn-wrap@npm:^2.0.0":
   version: 2.0.0
   resolution: "spawn-wrap@npm:2.0.0"
@@ -7890,15 +7915,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-istanbul@npm:^3.0.1":
-  version: 3.0.4
-  resolution: "vite-plugin-istanbul@npm:3.0.4"
+"vite-plugin-istanbul@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "vite-plugin-istanbul@npm:6.0.2"
   dependencies:
     "@istanbuljs/load-nyc-config": "npm:^1.1.0"
-    istanbul-lib-instrument: "npm:^5.1.0"
+    espree: "npm:^10.0.1"
+    istanbul-lib-instrument: "npm:^6.0.2"
     picocolors: "npm:^1.0.0"
+    source-map: "npm:^0.7.4"
     test-exclude: "npm:^6.0.0"
-  checksum: 10c0/1bf7c51ba10bb68c89cc1abbd7e7c1be985c60ae8af8fa5f1fc8586a76b01fef2b44615934395970d7e9951d2e170141dff094366b9e8f6c28aadda21e39dbea
+  peerDependencies:
+    vite: ">=4 <=6"
+  checksum: 10c0/120d84cd44af99ec7cce298768d8504ad4481439322d3ec724d7e8313e87fc5b214cbeaf827ba94fa145bb2367067b6f1d65c7387e30cced43658df9f7fc5fe8
   languageName: node
   linkType: hard
 

examples/webpack5/.storybook/main.ts

@@ -1,11 +1,11 @@
 export default {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
 
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-babel",
     "@storybook/addon-coverage",
-    "@storybook/addon-webpack5-compiler-babel"
   ],
 
   framework: {

examples/webpack5/stories/Button.stories.tsx

@@ -1,15 +1,16 @@
-import React from 'react';
-import type { StoryFn, Meta } from '@storybook/react';
+import React from "react";
+import type { StoryFn, Meta } from "@storybook/react";
 
-import { Button } from './Button';
+import { Button } from "./Button";
+import { expect } from "@storybook/test";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
   },
 } as Meta<typeof Button>;
 
@@ -20,22 +21,28 @@ export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
-  label: 'Button',
+  label: "Button",
+};
+Primary.play = async () => {
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Button.tsx"))
+  ).toBeTruthy();
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'Button',
+  label: "Button",
 };
 
 export const Large = Template.bind({});
 Large.args = {
-  size: 'large',
-  label: 'Button',
+  size: "large",
+  label: "Button",
 };
 
 export const Small = Template.bind({});
 Small.args = {
-  size: 'small',
-  label: 'Button',
+  size: "small",
+  label: "Button",
 };

examples/webpack5/stories/Header.stories.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
-import type { StoryFn, Meta } from '@storybook/react';
+import React from "react";
+import type { StoryFn, Meta } from "@storybook/react";
+import { expect } from "@storybook/test";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 export default {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } as Meta<typeof Header>;
 
@@ -17,9 +18,15 @@ const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   user: {
-    name: 'Jane Doe',
+    name: "Jane Doe",
   },
 };
+LoggedIn.play = async () => {
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Header.tsx"))
+  ).toBeTruthy();
+};
 
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};

examples/webpack5/stories/Page.stories.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import type { StoryFn, Meta } from '@storybook/react';
-import { within, userEvent } from '@storybook/test';
-import { Page } from './Page';
+import React from "react";
+import type { StoryFn, Meta } from "@storybook/react";
+import { within, userEvent, expect } from "@storybook/test";
+import { Page } from "./Page";
 
 export default {
-  title: 'Example/Page',
+  title: "Example/Page",
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } as Meta<typeof Page>;
 
@@ -21,6 +21,11 @@ export const LoggedIn = Template.bind({});
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 LoggedIn.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  const loginButton = await canvas.getByRole("button", { name: /Log in/i });
   await userEvent.click(loginButton);
+
+  const coverage = (globalThis as any).__coverage__;
+  await expect(
+    Object.keys(coverage).find((cvg) => cvg.endsWith("Page.tsx"))
+  ).toBeTruthy();
 };