feat!: upgrade to Storybook 7 (#7)

.github/workflows/deploy-storybook.yml

@@ -16,15 +16,18 @@ jobs:
         with:
           node-version: 16
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
       - name: Install & Build
         run: |
-          yarn install
-          yarn build
-          yarn build-storybook
+          pnpm install
+          pnpm build
+          pnpm build-storybook
 
       - name: Deploy with gh-pages
         run: |
           git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-          yarn publish-storybook -u "github-actions-bot <support+actions@github.com>"
+          pnpm run publish-storybook -u "github-actions-bot <support+actions@github.com>"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -12,17 +12,20 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 16.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: pnpm install
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          pnpm run release

.storybook/Example.stories.js → .storybook/Example.stories.tsx

@@ -34,7 +34,7 @@ export function Both() {
 }
 
 export function ShadowDOM() {
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement>(null);
   const [isVisible, toggleVisible] = useReducer((s) => !s, false);
 
   const element = useMemo(() => {
@@ -45,16 +45,16 @@ export function ShadowDOM() {
 
   function toggle() {
     if (isVisible) {
-      ref.current.shadowRoot.removeChild(element);
+      ref.current!.shadowRoot!.removeChild(element);
     } else {
-      ref.current.shadowRoot.appendChild(element);
+      ref.current!.shadowRoot!.appendChild(element);
     }
 
     toggleVisible();
   }
 
   useLayoutEffect(() => {
-    ref.current.attachShadow({ mode: 'open' });
+    ref.current!.attachShadow({ mode: 'open' });
   }, []);
 
   return (
@@ -65,7 +65,11 @@ export function ShadowDOM() {
   );
 }
 
-function Toggle({ children }) {
+function Toggle({
+  children,
+}: {
+  children: (isVisible: boolean) => React.ReactNode;
+}) {
   const [isVisible, toggle] = useReducer((s) => !s, false);
 
   return (

.storybook/local-preset.js

@@ -0,0 +1,15 @@
+/**
+ * to load the built addon in this test Storybook
+ */
+function previewAnnotations(entry = []) {
+  return [...entry, require.resolve('../dist/preview.mjs')];
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('../dist/manager.mjs')];
+}
+
+module.exports = {
+  managerEntries,
+  previewAnnotations,
+};

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['./Example.stories.tsx'],
+  addons: ['./local-preset.js', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.light,
+});

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,7 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: { 'aria-live': { includeShadowDom: true } },
+};
+
+export default preview;

README.md

@@ -13,22 +13,22 @@
 `storybook-addon-aria-live` should be included in development dependencies.
 
 ```bash
-yarn add --dev storybook-addon-aria-live
+npm install --dev storybook-addon-aria-live
 ```
 
-In your `.storybook/main.js`:
+In your `.storybook/main.ts`:
 
-```js
-module.exports = {
-  addons: ['storybook-addon-aria-live'],
-};
+```ts
+const config: StorybookConfig = {
+  addons: ['storybook-addon-aria-live']
+}
 ```
 
 Use [Storybook parameters](https://storybook.js.org/docs/react/writing-stories/parameters) to set global or story specific options:
 
-In your `.storybook/preview.js`:
+In your `.storybook/preview.ts`:
 
-```js
+```ts
 export const parameters = {
   'aria-live': {
     /** Indicates whether live regions inside `ShadowRoot`s should be tracked. Defaults to false. */

manager.js

@@ -0,0 +1 @@
+export * from './dist/manager';

package.json

@@ -14,61 +14,83 @@
   },
   "author": "Ari Perkkio <ari.perkkio@gmail.com>",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "packageManager": "pnpm@8.6.12",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "clean": "rimraf ./dist",
-    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
-    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
-    "prebuild": "yarn clean",
-    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
-    "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
+    "build": "rm -rf ./dist && tsup",
+    "build:watch": "pnpm run build --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
-    "build-storybook": "build-storybook --quiet --loglevel error --output-dir docs",
-    "publish-storybook": "gh-pages -d docs",
-    "release": "yarn build && auto shipit"
+    "start": "run-p build:watch 'storybook --quiet'",
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "release": "pnpm run build && auto shipit",
+    "eject-ts": "zx scripts/eject-typescript.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir docs",
+    "publish-storybook": "touch docs/.nojekyll && gh-pages --dist docs --dotfiles true"
   },
   "dependencies": {
-    "aria-live-capture": "^0.5.1"
+    "aria-live-capture": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-essentials": "^6.4.0",
-    "@storybook/react": "^6.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/manager-api": "^7.4.2",
+    "@storybook/preview-api": "^7.4.2",
+    "@storybook/react-vite": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/theming": "^7.4.2",
+    "@storybook/types": "^7.4.2",
+    "@types/react": "^18.2.21",
+    "@vitejs/plugin-react": "^4.0.4",
     "auto": "^10.3.0",
-    "babel-loader": "^8.1.0",
-    "concurrently": "^6.2.0",
+    "boxen": "^5.0.1",
+    "dedent": "^0.7.0",
     "gh-pages": "^3.2.3",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.2.4"
+    "react-dom": "^18",
+    "react": "^18",
+    "storybook": "^7.4.0",
+    "tsup": "^6.6.3",
+    "typescript": "^4.2.4",
+    "vite": "^4.4.9",
+    "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.4.0",
-    "@storybook/api": "^6.4.0",
-    "@storybook/components": "^6.4.0",
-    "@storybook/core-events": "^6.4.0",
-    "@storybook/theming": "^6.4.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "@storybook/addons": "^7",
+    "@storybook/components": "^7",
+    "@storybook/core-events": "^7",
+    "@storybook/manager-api": "^7.0.0",
+    "@storybook/preview-api": "^7.0.0",
+    "@storybook/theming": "^7",
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^16.8 || ^17 || ^18"
   },
   "peerDependenciesMeta": {
     "react": {