Turn off typescript check, add material icons, google fonts, and viewport add-on to storybook preview

web/config/storybook.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  addons: ['@storybook/addon-viewport'],
+  typescript: {
+    check: false,
+    // By default, the checker runs asynchronously in dev mode. Force it to run synchronously.
+    checkOptions: { async: false },
+  },
+  previewHead: (head) => `
+  ${head}
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+  <link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap"
+  rel="stylesheet"
+  />
+  <link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+  />
+  <link
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-light.min.css"
+  rel="stylesheet"
+  />
+  `,
+}

web/config/storybook.preview.js

@@ -0,0 +1,8 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+export const parameters = {
+  layout: 'fullscreen',
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+}

web/package.json

@@ -33,6 +33,7 @@
     "sass-loader": "^12.6.0"
   },
   "devDependencies": {
+    "@storybook/addon-viewport": "^6.4.19",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",

yarn.lock

@@ -3937,6 +3937,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-viewport@npm:^6.4.19":
+  version: 6.4.19
+  resolution: "@storybook/addon-viewport@npm:6.4.19"
+  dependencies:
+    "@storybook/addons": 6.4.19
+    "@storybook/api": 6.4.19
+    "@storybook/client-logger": 6.4.19
+    "@storybook/components": 6.4.19
+    "@storybook/core-events": 6.4.19
+    "@storybook/theming": 6.4.19
+    core-js: ^3.8.2
+    global: ^4.4.0
+    memoizerific: ^1.11.3
+    prop-types: ^15.7.2
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 4f8831827f77c554d5c3dc56da764466a6f7030d7b858bf74c1bfc025482d8e68b97945cbab48f2faa236c8acff340916338e612035f85209d5611d0b66ac4a0
+  languageName: node
+  linkType: hard
+
 "@storybook/addons@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/addons@npm:6.4.19"
@@ -23621,6 +23648,7 @@ __metadata:
     "@redwoodjs/forms": ^0.49.0
     "@redwoodjs/router": ^0.49.0
     "@redwoodjs/web": ^0.49.0
+    "@storybook/addon-viewport": ^6.4.19
     autoprefixer: ^10.4.2
     date-fns: ^2.28.0
     filestack-js: ^3.25.0