fix(storybook): update Babel configuration (#702)

* fix(storybook): update Babel configuration

The React Storybook is failing to build because when Storybook attempts
to build, it looks for a Babel configuration, and for story files it's
ascending and finding the root `babel.config.js` file and using only its
configuration. Namely, this doesn't include the React preset, and the
build fails to understand JSX syntax as a result.

Storybook offers a `babel` function for manipulating the Babel
configuration as a preferred approach, so this change moves the desired
configuration to the Storybook config and deletes the root Babel config
file, which was added mainly to appease the build earlier on.

- Also bumped Storybook + addons to the latest v7 release.
- Also added Netlify status badges to the README so these things go
  unnoticed less often.

* fix(lint): update eslint config and fix linting error

.eslintrc.js

@@ -10,10 +10,12 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
+    requireConfigFile: false,
     ecmaFeatures: {
       jsx: true,
     },
     babelOptions: {
+      plugins: ['@babel/plugin-syntax-import-assertions'],
       presets: ['@babel/preset-react'],
     },
   },

.storybook/main.ts

@@ -15,6 +15,39 @@ const config = {
   docs: {
     autodocs: true,
   },
+  async babel(config, { configType }) {
+    config = {
+      ...config,
+      configFile: false,
+      plugins: [
+        '@babel/plugin-transform-shorthand-properties',
+        '@babel/plugin-transform-block-scoping',
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        ['@babel/plugin-proposal-private-methods', { loose: true }],
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+        '@babel/plugin-proposal-export-default-from',
+        '@babel/plugin-syntax-dynamic-import',
+        ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+        '@babel/plugin-transform-classes',
+        '@babel/plugin-transform-arrow-functions',
+        '@babel/plugin-transform-parameters',
+        '@babel/plugin-transform-destructuring',
+        '@babel/plugin-transform-spread',
+        '@babel/plugin-transform-for-of',
+        'babel-plugin-macros',
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
+      ],
+      presets: [
+        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+        '@babel/preset-typescript',
+        ['@babel/preset-react', { runtime: 'automatic' }],
+      ],
+    };
+    return config;
+  },
   async viteFinal(config) {
     return mergeConfig(config, {
       esbuild: {

.tool-versions

@@ -1 +1 @@
-nodejs 18.16.0
+nodejs 18.19.1

README.md

@@ -21,16 +21,20 @@
   <a href="https://bundlephobia.com/package/@ithaka/pharos"><img src="https://img.shields.io/bundlephobia/min/@ithaka/pharos" alt="Bundlephobia stats" /></a>
 </p>
 
+## Build statuses
+
+| System     | Status                                                                                                                                                                    |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Site       | [![Site status](https://api.netlify.com/api/v1/badges/6e5ee441-5739-46e4-9a85-ea5c5a333ebb/deploy-status)](https://app.netlify.com/sites/pharos/deploys)                  |
+| Storybooks | [![Storybooks status](https://api.netlify.com/api/v1/badges/0afa82e2-f12d-4a75-933c-efedee05fe99/deploy-status)](https://app.netlify.com/sites/pharos-storybooks/deploys) |
+
 ## Getting Started
 
 - Check out the [core package](./packages/pharos) for more info about Pharos components and how to get started
 - Visit the [Pharos site](https://pharos.jstor.org) to learn about the JSTOR brand, design guidelines, and component usage guidelines
 - Explore the [web component Storybook](https://pharos.jstor.org/storybooks/wc/) or the [React Storybook](https://pharos.jstor.org/storybooks/react/) to try the live components
 - Test for visual regressions in the Pharos [Chromatic project](https://www.chromatic.com/builds?appId=60919c26122bd50039b34644)
 
-<br />
-<br />
-
 ## Packages and configuration
 
 This repository contains a number of packages related to Pharos:
@@ -43,9 +47,6 @@ This repository contains a number of packages related to Pharos:
 
 In addition to these packages, this repository contains [the configuration for Pharos Storybooks](./.storybook).
 
-<br />
-<br />
-
 ## Contributing
 
 If you'd like to learn more about contributing to Pharos, refer to [the contribution guide](./docs/README.md).
@@ -114,9 +115,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
 
-<br />
-<br />
-
 ## Work with us at ITHAKA
 
 JSTOR is part of ITHAKA, a not-for-profit dedicated to expanding access to knowledge and education worldwide. Our staff makes us who we are. We’re hiring — join us!

package.json

@@ -66,16 +66,16 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@emotion/babel-plugin": "^11.9.2",
     "@size-limit/preset-small-lib": "^7.0.4",
-    "@storybook/addon-a11y": "^7.3.2",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-styling": "^1.3.5",
-    "@storybook/blocks": "^7.3.2",
-    "@storybook/manager-api": "^7.3.2",
-    "@storybook/react-vite": "^7.3.2",
-    "@storybook/theming": "^7.3.2",
-    "@storybook/web-components": "^7.3.2",
-    "@storybook/web-components-vite": "^7.3.2",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/web-components": "^7.6.17",
+    "@storybook/web-components-vite": "^7.6.17",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -108,7 +108,7 @@
     "react-dom": "^17.0.0",
     "sass": "^1.63.6",
     "size-limit": "^7.0.4",
-    "storybook": "^7.3.2",
+    "storybook": "^7.6.17",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-scss": "^10.0.0",

packages/pharos/src/components/coach-mark/pharos-coach-mark.ts

@@ -63,7 +63,7 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
   /**
    * Text content for the coach mark header
    * @attr header
-   * @type {String}
+   * @type {string}
    */
   @property({ reflect: true })
   public header = '';

yarn.lock

@@ -7173,7 +7173,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^7.3.2":
+"@storybook/addon-a11y@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/addon-a11y@npm:7.6.17"
   dependencies:
@@ -7249,7 +7249,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^7.3.2":
+"@storybook/addon-essentials@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/addon-essentials@npm:7.6.17"
   dependencies:
@@ -7283,7 +7283,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^7.3.2":
+"@storybook/addon-links@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/addon-links@npm:7.6.17"
   dependencies:
@@ -7398,7 +7398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:7.6.17, @storybook/blocks@npm:^7.3.2":
+"@storybook/blocks@npm:7.6.17, @storybook/blocks@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/blocks@npm:7.6.17"
   dependencies:
@@ -7900,7 +7900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:7.6.17, @storybook/manager-api@npm:^7.3.2":
+"@storybook/manager-api@npm:7.6.17, @storybook/manager-api@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/manager-api@npm:7.6.17"
   dependencies:
@@ -8024,7 +8024,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-vite@npm:^7.3.2":
+"@storybook/react-vite@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/react-vite@npm:7.6.17"
   dependencies:
@@ -8135,7 +8135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.6.17, @storybook/theming@npm:^7.3.2":
+"@storybook/theming@npm:7.6.17, @storybook/theming@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/theming@npm:7.6.17"
   dependencies:
@@ -8174,7 +8174,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/web-components-vite@npm:^7.3.2":
+"@storybook/web-components-vite@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/web-components-vite@npm:7.6.17"
   dependencies:
@@ -8187,7 +8187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/web-components@npm:7.6.17, @storybook/web-components@npm:^7.3.2":
+"@storybook/web-components@npm:7.6.17, @storybook/web-components@npm:^7.6.17":
   version: 7.6.17
   resolution: "@storybook/web-components@npm:7.6.17"
   dependencies:
@@ -24579,16 +24579,16 @@ __metadata:
     "@commitlint/config-conventional": "npm:^15.0.0"
     "@emotion/babel-plugin": "npm:^11.9.2"
     "@size-limit/preset-small-lib": "npm:^7.0.4"
-    "@storybook/addon-a11y": "npm:^7.3.2"
-    "@storybook/addon-essentials": "npm:^7.3.2"
-    "@storybook/addon-links": "npm:^7.3.2"
+    "@storybook/addon-a11y": "npm:^7.6.17"
+    "@storybook/addon-essentials": "npm:^7.6.17"
+    "@storybook/addon-links": "npm:^7.6.17"
     "@storybook/addon-styling": "npm:^1.3.5"
-    "@storybook/blocks": "npm:^7.3.2"
-    "@storybook/manager-api": "npm:^7.3.2"
-    "@storybook/react-vite": "npm:^7.3.2"
-    "@storybook/theming": "npm:^7.3.2"
-    "@storybook/web-components": "npm:^7.3.2"
-    "@storybook/web-components-vite": "npm:^7.3.2"
+    "@storybook/blocks": "npm:^7.6.17"
+    "@storybook/manager-api": "npm:^7.6.17"
+    "@storybook/react-vite": "npm:^7.6.17"
+    "@storybook/theming": "npm:^7.6.17"
+    "@storybook/web-components": "npm:^7.6.17"
+    "@storybook/web-components-vite": "npm:^7.6.17"
     "@types/uuid": "npm:^9.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^6.9.0"
     "@typescript-eslint/parser": "npm:^6.9.0"
@@ -24621,7 +24621,7 @@ __metadata:
     react-dom: "npm:^17.0.0"
     sass: "npm:^1.63.6"
     size-limit: "npm:^7.0.4"
-    storybook: "npm:^7.3.2"
+    storybook: "npm:^7.6.17"
     stylelint: "npm:^15.10.1"
     stylelint-config-prettier: "npm:^9.0.5"
     stylelint-config-standard-scss: "npm:^10.0.0"
@@ -28652,7 +28652,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^7.3.2":
+"storybook@npm:^7.6.17":
   version: 7.6.17
   resolution: "storybook@npm:7.6.17"
   dependencies: