Chromatic 3/8/22 build

.env.local.sample

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_GOERLI_ALCHEMY_KEY=
 NEXT_PUBLIC_MAINNET_ALCHEMY_KEY=
-NEXT_PUBLIC_MERKLE_SERVER_URL=http://localhost:8080
+NEXT_PUBLIC_MAINNET_SERVER_ALCHEMY_KEY=
+NEXT_PUBLIC_GOERLI_ALCHEMY_KEY=

.eslintrc

@@ -18,6 +18,13 @@
         "no-undef": ["off"],
         "react-hooks/exhaustive-deps": "error"
       }
+    },
+    // js files in the root dir can use `const ... = require(...)`
+    {
+      "files": ["./*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
     }
   ],
   "rules": {

.github/workflows/chromatic.yml

@@ -0,0 +1,29 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: "Chromatic"
+
+# Event for the workflow
+on:
+  pull_request:
+    branches:
+      - chromatic-tests
+
+# List of jobsq
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm ci
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -15,4 +15,7 @@ storybook-static/
 .eslintcache
 
 # coverage files created by Jest
-coverage/
+coverage/
+
+# storybook build log
+build-storybook.log

.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
     "storybook-color-picker",
   ],
 };

.storybook/preview.js

@@ -1,5 +1,18 @@
+import * as NextImage from "next/image";
+import { addDecorator } from "@storybook/react";
+import { withA11y } from "@storybook/addon-a11y";
 import "../styles/globals.css";
 
+// Chromatic storybook testing doesn't work well with the default optimized images from next/image.
+// Rather than accounting for this in each component, we'll just override next/image import
+// and force all consumers to be default unoptimized when storybook runs.
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+});
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -36,3 +49,5 @@ export const parameters = {
     values: [{ name: "Light", value: "#FAF9F9" }],
   },
 };
+
+addDecorator(withA11y);

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "cSpell.words": [
+    "commify",
+    "defi",
+    "ELFI",
+    "ELFIverse",
+    "headlessui",
+    "heroicons",
+    "Jazzicon",
+    "pedersen",
+    "semibold",
+    "ttag"
+  ]
+}

jest-environment-jsdom.js

@@ -2,7 +2,6 @@
 // and https://github.com/firebase/firebase-js-sdk/issues/3096#issuecomment-827741103
 // Overcomes error from jest internals...: https://github.com/facebook/jest/issues/7780
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const JSDOMEnvironment = require("jest-environment-jsdom");
 
 class MyEnvironment extends JSDOMEnvironment {

next.config.js

@@ -1,3 +1,5 @@
+const svgrTemplate = require("./svgr-template");
+
 const nextConfig = {
   eslint: {
     dirs: ["pages", "src"],
@@ -13,6 +15,34 @@ const nextConfig = {
       http: false,
       https: false,
     };
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      // https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+      oneOf: [
+        // To import an svg as a url (to be used as an img src), add ?url to
+        // the end of the import path.
+        // Example:
+        //   import sampleIconSrc from "path/to/sampleIcon.svg?url"
+        //   <Image src={sampleIconSrc}
+        {
+          resourceQuery: /url/,
+          type: "asset",
+        },
+        {
+          loader: "@svgr/webpack",
+          // https://react-svgr.com/docs/options/
+          options: {
+            template: svgrTemplate,
+            svgo: true,
+            // https://github.com/svg/svgo#configuration
+            svgoConfig: {
+              plugins: [{ name: "removeViewBox", active: false }],
+            },
+          },
+        },
+      ],
+    });
     return config;
   },
 };