Upgrade to Storybook 7

.storybook/main.js

@@ -1,13 +1,13 @@
+import { dirname, join } from "path";
 const path = require("path");
 
 module.exports = {
   addons: [
-    "@storybook/addon-a11y",
-    "@storybook/addon-actions",
-    "@storybook/addon-docs",
-    "@storybook/addon-essentials",
-    "@storybook/addon-knobs",
-    "@storybook/addon-links",
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-actions"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
     {
       name: '@storybook/addon-storysource',
       options: {
@@ -20,20 +20,22 @@ module.exports = {
         }
       }
     },
-    "@storybook/addon-viewport",
-    "storybook-react-intl"
+    getAbsolutePath("@storybook/addon-viewport"),
+    getAbsolutePath("storybook-react-intl")
   ],
+
   stories: [
     "../packages/**/*.story.mdx",
     "../packages/**/*.story.@(js|jsx|ts|tsx)"
   ],
+
   webpackFinal: async (config, { configType }) => {
     // This method is for altering Storybook's webpack configuration.
 
     // Add support for importing YAML files.
     config.module.rules.push({
       test: /\.(yml|yaml)$/,
-      loader: ["json-loader", "yaml-loader"]
+      loader: "yaml-loader"
     });
 
     config.module.rules.push({
@@ -44,17 +46,28 @@ module.exports = {
 
     config.module.rules.push({
       test: /uFuzzy/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            ['@babel/preset-env', { targets: 'defaults' }]
-          ]
-        }
+      loader: 'babel-loader',
+      options: {
+        presets: [
+          ['@babel/preset-env', { targets: 'defaults' }]
+        ]
       }
     })
 
     // Return the altered config
     return config;
+  },
+
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
   }
+}
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
 }

.storybook/preview.js → .storybook/preview.ts

@@ -1,12 +1,12 @@
 import { setupWorker } from "msw";
-import { withReactIntl } from "storybook-react-intl/dist/cjs/withReactIntl";
 
 import locationFieldHandlers from "../packages/location-field/src/mocks/handlers";
 import itineraryBodyHandlers from "../packages/itinerary-body/src/__mocks__/handlers";
 import geocoderHandlers from "../packages/geocoder/src/test-fixtures/handlers";
 import tileLayerHandlers from '../packages/otp2-tile-overlay/src/mocks/handlers'
 
 import { reactIntl } from './react-intl.js';
+import { Preview } from "@storybook/react";
 
 // Only install worker when running in browser
 if (typeof global.process === "undefined") {
@@ -69,4 +69,22 @@ export const parameters = {
 // Per https://www.npmjs.com/package/@storybook/addon-storyshots,
 // explicitly export the storybook-react-intl decorator
 // so it is included in jest snapshots.
-export const decorators = [withReactIntl];
+// export const decorators = [withReactIntl];
+
+const preview: Preview = {
+  globals: {
+    locale: reactIntl.defaultLocale,
+    locales: {
+      "en-US": { title: "English (US)" },
+      fr: { title: "Français" },
+      es: { title: "Español" },
+      vi: { title: "Tiếng Việt" },
+      ko: { title: "한국어" },
+      zh: { title: "中文" },
+      unknown: { title: "Unsupported locale" }
+    }
+  },
+  parameters
+}
+
+export default preview

.storybook/react-intl.js

@@ -21,11 +21,9 @@ const packages = [
   "location-field",
   "printable-itinerary",
   "map-popup",
-  "stops-overlay",
   "transit-vehicle-overlay",
   "trip-details",
-  "trip-form",
-  "vehicle-rental-overlay"
+  "trip-form"
 ];
 
 /** Messages for all packages AND locales above. */

package.json

@@ -24,17 +24,17 @@
     "@formatjs/cli": "^4.2.32",
     "@graphql-eslint/eslint-plugin": "^3.19.1",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/addon-storyshots": "^6.4.19",
-    "@storybook/addon-storyshots-puppeteer": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addon-viewport": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-actions": "7.6.17",
+    "@storybook/addon-docs": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-storyshots": "7.6.17",
+    "@storybook/addon-storyshots-puppeteer": "7.6.17",
+    "@storybook/addon-storysource": "7.6.17",
+    "@storybook/addon-viewport": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
     "@storybook/storybook-deployer": "^2.8.10",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.0",
@@ -81,7 +81,8 @@
     "semantic-release": "^17.1.1",
     "semantic-release-monorepo": "^7.0.2",
     "semver": "^7.3.2",
-    "storybook-react-intl": "^1.0.5",
+    "storybook": "7.6.17",
+    "storybook-react-intl": "^2.0.10",
     "styled-components": "^5.3.0",
     "stylelint": "^10.1.0",
     "stylelint-config-prettier": "^5.2.0",
@@ -92,7 +93,7 @@
     "typescript": "^4.2.4",
     "webpack": "^4.33.0",
     "yaml-jest": "^1.2.0",
-    "yaml-loader": "^0.6.0",
+    "yaml-loader": "^0.8.1",
     "yaml-sort": "^2.0.0"
   },
   "scripts": {
@@ -106,7 +107,7 @@
     "check-eslint-config": "eslint --print-config jestconfig.js | eslint-config-prettier-check",
     "coverage": "jest --coverage",
     "deploy-storybook": "storybook-to-ghpages",
-    "dev": "start-storybook -s ./public -p 5555",
+    "dev": "storybook dev -s ./public -p 5555",
     "predev": "yarn",
     "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern esm --ignore-pattern lib --ignore-pattern node_modules --ignore-pattern storybook-static --quiet",
     "lint:graphql": "eslint . --ext .graphql --ignore-pattern esm --ignore-pattern lib --ignore-pattern node_modules --ignore-pattern storybook-static",
@@ -271,5 +272,8 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "dependencies": {
+    "@storybook/icons": "^1.2.9"
   }
 }

packages/building-blocks/src/index.ts

@@ -2,4 +2,4 @@ import blue from "./colors/blue";
 import red from "./colors/red";
 import grey from "./colors/grey";
 
-export { blue, red, grey };
+export default { blue, red, grey };

packages/building-blocks/src/stories/index.story.tsx

@@ -1,14 +1,18 @@
 import React, { ReactElement } from "react";
+import { Meta } from "@storybook/react";
 import ColorPalette from "./ColorPalette";
 
 import grey from "../colors/grey";
 import blue from "../colors/blue";
 import red from "../colors/red";
 
-export default {
-  title: "Building-Blocks/Colors"
+const meta: Meta<typeof ColorPalette> = {
+  title: "Building-Blocks/Colors",
+  component: ColorPalette
 };
 
+export default meta;
+
 export const Grey = (): ReactElement => {
   return <ColorPalette color={grey} />;
 };

packages/building-blocks/tsconfig.json

@@ -8,6 +8,5 @@
     "lib": ["es2019", "dom"],
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }

packages/core-utils/tsconfig.json

@@ -8,6 +8,5 @@
     "lib": ["es2019", "dom"],
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }

packages/otp2-tile-overlay/src/mocks/handlers.js

@@ -3,9 +3,12 @@ import { rest } from "msw";
 
 import tilejson from "./tilejson.json";
 
-import seventy from "!url-loader!./4770-6206.pbf";
-import seventyOne from "!url-loader!./4771-6206.pbf";
-import seventyTwo from "!url-loader!./4772-6206.pbf";
+// import seventy from "./4770-6206.pbf";
+// import seventyOne from "./4771-6206.pbf";
+// import seventyTwo from "./4772-6206.pbf";
+const seventy = new URL("./4770-6206.pbf", import.meta.url);
+const seventyOne = new URL("./4771-6206.pbf", import.meta.url);
+const seventyTwo = new URL("./4772-6206.pbf", import.meta.url);
 
 export default [
   rest.get(

packages/vehicle-rental-overlay/src/VehicleRentalOverlay.story.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import { boolean } from "@storybook/addon-knobs";
+// import { boolean } from "@storybook/addon-knobs";
 
 import { Company, Station } from "@opentripplanner/types";
 import bikeRentalStations from "../__mocks__/bike-rental-stations.json";
@@ -41,7 +41,7 @@ type StoryProps = {
   getStationName?: (configCompanies: Company[], station: Station) => string;
   refreshVehicles: () => void;
   stations: Station[];
-  visible?: boolean;
+  // visible?: boolean;
 };
 
 const ZoomControlledMapWithVehicleRentalOverlay = ({
@@ -82,16 +82,16 @@ export const RentalBicycles = () => (
 );
 
 export const RentalBicyclesVisibilityControlledByKnob = () => {
-  const isOverlayVisible = boolean(
-    "Toggle visibility of vehicle rental overlay",
-    false
-  );
+  // const isOverlayVisible = boolean(
+  //   "Toggle visibility of vehicle rental overlay",
+  //   false
+  // );
   return (
     <ZoomControlledMapWithVehicleRentalOverlay
       companies={["BIKETOWN"]}
       refreshVehicles={action("refresh bicycles")}
       stations={bikeRentalStations}
-      visible={isOverlayVisible}
+      // visible={isOverlayVisible}
     />
   );
 };

tsconfig.json

@@ -11,5 +11,12 @@
     "jsx": "react",
     "noEmit": false
   },
-  "exclude": ["**/*.test.ts", "**/*.story.tsx", "node_modules", "lib", "esm"]
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.story.tsx",
+    "node_modules",
+    "lib",
+    "esm",
+    "**/__tests__/**/*"
+  ]
 }