chore: update Storybook from v5 to v6

opentripplanner · May 27, 2021 · 423c8fa · 423c8fa
1 parent 77eb527
commit 423c8fa
Show file tree

Hide file tree

Showing 52 changed files with 9,489 additions and 8,125 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,29 @@
+const path = require("path");
+
+module.exports = {
+  "stories": [
+    "../packages/**/*.story.mdx",
+    "../packages/**/*.story.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-a11y",
+    "@storybook/addon-actions",
+    "@storybook/addon-docs",
+    "@storybook/addon-essentials",
+    "@storybook/addon-knobs",
+    "@storybook/addon-links",
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          // test: [/\.stories\.jsx?$/], This is default
+          include: [path.resolve(__dirname, './src')],
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        }
+      }
+    },
+    "@storybook/addon-viewport"
+  ]
+}
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: false
+  }
+})
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   plugins: [
-    "@babel/plugin-proposal-class-properties",
+    ["@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-styled-components"
   ],
   presets: [

diff --git a/package.json b/package.json
@@ -12,21 +12,23 @@
     "@babel/cli": "^7.10",
     "@babel/core": "^7.10",
     "@babel/plugin-proposal-class-properties": "^7.10",
+    "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
     "@babel/preset-env": "^7.10",
     "@babel/preset-react": "^7.10",
     "@babel/preset-typescript": "^7.13.0",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-a11y": "^5.2.8",
-    "@storybook/addon-actions": "^5.2.8",
-    "@storybook/addon-info": "^5.2.8",
-    "@storybook/addon-knobs": "^5.2.8",
-    "@storybook/addon-storysource": "^5.1.9",
-    "@storybook/addon-viewport": "^5.2.8",
-    "@storybook/react": "^5.1.3",
-    "@storybook/storybook-deployer": "^2.8.1",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-docs": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addon-storysource": "^6.2.9",
+    "@storybook/addon-viewport": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@storybook/storybook-deployer": "^2.8.8",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.0",
-    "@types/storybook__addon-info": "^5.2.3",
     "@types/styled-components": "^5.1.9",
     "@types/vfile-message": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -37,10 +39,10 @@
     "babel-plugin-styled-components": "^1.10.0",
     "core-js": "2",
     "eslint": "6.1.0",
-    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^4.3.0",
     "eslint-import-resolver-webpack": "^0.11.1",
-    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-import": "2.23.3",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -92,13 +94,16 @@
   },
   "eslintConfig": {
     "extends": [
-      "airbnb",
+      "airbnb-typescript",
       "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
       "plugin:prettier/recommended",
       "prettier/react"
     ],
     "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./tsconfig.eslint.json"
+    },
     "plugins": [
       "@typescript-eslint"
     ],
@@ -109,9 +114,28 @@
       "no-param-reassign": 0,
       "no-plusplus": 0,
       "no-use-before-define": "off",
+      "@typescript-eslint/comma-dangle": "off",
+      "@typescript-eslint/indent": "off",
       "@typescript-eslint/no-empty-function": 0,
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        {
+          "allowShortCircuit": true,
+          "allowTernary": true
+        }
+      ],
+      "@typescript-eslint/no-unused-vars": "error",
       "@typescript-eslint/no-use-before-define": "error",
       "@typescript-eslint/no-var-requires": 0,
+      "@typescript-eslint/quotes": [
+        "error",
+        "double",
+        {
+          "avoidEscape": true,
+          "allowTemplateLiterals": true
+        }
+      ],
+      "@typescript-eslint/space-before-function-paren": "off",
       "prefer-destructuring": 0,
       "prettier/prettier": [
         "error"

diff --git a/packages/base-map/src/index.js b/packages/base-map/src/index.js
@@ -41,13 +41,15 @@ L.Evented.include({
     // This timeout is key to workaround an issue where double-click events
     // are fired in this order on some touch browsers: ['click', 'dblclick', 'click']
     // instead of ['click', 'click', 'dblclick']
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     setTimeout(this.clearSingleClickTimeout.bind(this), 0);
   },
 
   scheduleSingleClick(e) {
     this.clearSingleClickTimeout();
 
     this.singleClickTimeout = setTimeout(
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
       this.fireSingleClick.bind(this, e),
       this.options.singleClickTimeout || 500
     );
@@ -69,7 +71,16 @@ L.Evented.include({
 });
 
 /**
- * The base OpenTripPlanner map on which everything else is rendered.
+ * The BaseMap component renders a Leaflet map with overlays and other ad-hoc
+ * markers that are declared as child elements of the BaseMap element.
+ *
+ * Overlays are groups of similar React-Leaflet markers, e.g. vehicle location
+ * markers, bus stop markers, etc.
+ * Overlays are automatically added to the overlay control displayed by the
+ * BaseMap. The user uses that control to turn overlays on or off.
+ * See the
+ * [Two Overlays From TriMet Transit Components](./?path=/story/basemap--with-two-overlays-from-trimet-transit-components)
+ * example for more information on overlays.
  */
 class BaseMap extends Component {
   overlays = [];

diff --git a/packages/base-map/src/index.story.js b/packages/base-map/src/index.story.js
@@ -1,8 +1,7 @@
 import React from "react";
 import { Marker, CircleMarker } from "react-leaflet";
 import { action } from "@storybook/addon-actions";
-import { withInfo } from "@storybook/addon-info";
-import { text, withKnobs } from "@storybook/addon-knobs";
+import { text } from "@storybook/addon-knobs";
 
 import BaseMap from ".";
 import SelectVehicles from "../__mocks__/SelectVehicles";
@@ -14,20 +13,7 @@ import "../__mocks__/mapbox-wordmark.css";
 
 export default {
   title: "BaseMap",
-  component: BaseMap,
-  decorators: [withInfo, withKnobs],
-  parameters: {
-    info: {
-      text: `
-      The BaseMap component renders a Leaflet map with overlays and other ad-hoc markers
-      that are declared as child elements of the BaseMap element.
-
-      Overlays are groups of similar React-Leaflet markers, e.g. vehicle location markers, bus stop markers, etc.
-      Overlays are automatically added to the overlay control displayed by the BaseMap. The user uses that control to turn overlays on or off.
-      See the [Two Overlays From TriMet Transit Components](./?path=/story/basemap--with-two-overlays-from-trimet-transit-components) example for more information on overlays.
-      `
-    }
-  }
+  component: BaseMap
 };
 
 const center = [45.522862, -122.667837];

diff --git a/packages/endpoints-overlay/src/EndpointsOverlay.story.js b/packages/endpoints-overlay/src/EndpointsOverlay.story.js
@@ -2,9 +2,6 @@ import BaseMap from "@opentripplanner/base-map";
 import PropTypes from "prop-types";
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import { withA11y } from "@storybook/addon-a11y";
-import { withInfo } from "@storybook/addon-info";
-import { storiesOf } from "@storybook/react";
 import { Cat, Dog } from "styled-icons/fa-solid";
 
 import EndpointsOverlay from ".";
@@ -42,60 +39,65 @@ CatDogIcon.propTypes = {
   type: PropTypes.string.isRequired
 };
 
-storiesOf("EndpointsOverlay", module)
-  .addDecorator(withA11y)
-  .addDecorator(withInfo)
-  .add("EndpointsOverlay", () => (
-    <BaseMap center={center} zoom={zoom}>
-      <EndpointsOverlay
-        fromLocation={fromLocation}
-        setLocation={setLocation}
-        toLocation={toLocation}
-        visible
-      />
-    </BaseMap>
-  ))
-  .add("EndpointsOverlay with user settings", () => (
-    <BaseMap center={center} zoom={zoom}>
-      <EndpointsOverlay
-        clearLocation={clearLocation}
-        forgetPlace={forgetPlace}
-        fromLocation={fromLocation}
-        locations={locations}
-        rememberPlace={rememberPlace}
-        setLocation={setLocation}
-        showUserSettings
-        toLocation={toLocation}
-        visible
-      />
-    </BaseMap>
-  ))
-  .add("EndpointsOverlay with custom map markers", () => (
-    <BaseMap center={center} zoom={zoom}>
-      <EndpointsOverlay
-        fromLocation={fromLocation}
-        MapMarkerIcon={CatDogIcon}
-        setLocation={setLocation}
-        toLocation={toLocation}
-        visible
-      />
-    </BaseMap>
-  ))
-  .add("EndpointsOverlay with intermediate place", () => (
-    <BaseMap center={center} zoom={zoom}>
-      <EndpointsOverlay
-        fromLocation={fromLocation}
-        intermediatePlaces={[
-          {
-            lat: 45.523193,
-            lon: -122.681538,
-            name: "Powell's City of Books",
-            type: "intermediate-place-1"
-          }
-        ]}
-        setLocation={setLocation}
-        toLocation={toLocation}
-        visible
-      />
-    </BaseMap>
-  ));
+export default {
+  title: "EndpointsOverlay",
+  component: EndpointsOverlay
+};
+
+export const EndpointsOverlayWithoutUserSettings = () => (
+  <BaseMap center={center} zoom={zoom}>
+    <EndpointsOverlay
+      fromLocation={fromLocation}
+      setLocation={setLocation}
+      toLocation={toLocation}
+      visible
+    />
+  </BaseMap>
+);
+
+export const EndpointsOverlayWithUserSettings = () => (
+  <BaseMap center={center} zoom={zoom}>
+    <EndpointsOverlay
+      clearLocation={clearLocation}
+      forgetPlace={forgetPlace}
+      fromLocation={fromLocation}
+      locations={locations}
+      rememberPlace={rememberPlace}
+      setLocation={setLocation}
+      showUserSettings
+      toLocation={toLocation}
+      visible
+    />
+  </BaseMap>
+);
+
+export const EndpointsOverlayWithCustomMapMarkers = () => (
+  <BaseMap center={center} zoom={zoom}>
+    <EndpointsOverlay
+      fromLocation={fromLocation}
+      MapMarkerIcon={CatDogIcon}
+      setLocation={setLocation}
+      toLocation={toLocation}
+      visible
+    />
+  </BaseMap>
+);
+
+export const EndpointsOverlayWithIntermediatePlace = () => (
+  <BaseMap center={center} zoom={zoom}>
+    <EndpointsOverlay
+      fromLocation={fromLocation}
+      intermediatePlaces={[
+        {
+          lat: 45.523193,
+          lon: -122.681538,
+          name: "Powell's City of Books",
+          type: "intermediate-place-1"
+        }
+      ]}
+      setLocation={setLocation}
+      toLocation={toLocation}
+      visible
+    />
+  </BaseMap>
+);