Set up storybook for component testing

Fix issue with QuestionMark viewbox

.eslintignore

@@ -1,4 +1,6 @@
 node_modules
 dist
 coverage
-tailwind.config.js
+tailwind.config.js
+postcss.config.js
+src/stories/**/*.stories.tsx

.storybook/main.js

@@ -0,0 +1,22 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          // When you have splitted your css over multiple files
+          // and use @import('./other-styles.css')
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  framework: '@storybook/react',
+};

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="/styles.css" rel="stylesheet" />

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/styles.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -8,15 +8,29 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
     "@hyperlane-xyz/sdk": "1.0.0",
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack4": "^6.5.15",
+    "@storybook/manager-webpack4": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
+    "babel-loader": "^8.3.0",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
+    "postcss": "^8.4.21",
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,6 +41,8 @@
   "files": [
     "/dist"
   ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://www.hyperlane.xyz",
   "keywords": [
     "Hyperlane",
@@ -36,7 +52,6 @@
     "Typescript"
   ],
   "license": "Apache-2.0",
-  "main": "dist/index.js",
   "packageManager": "[email protected]",
   "repository": {
     "type": "git",
@@ -48,7 +63,8 @@
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "clean": "rm -rf dist cache",
     "lint": "eslint . --ext .ts",
-    "prettier": "prettier --write ./src"
-  },
-  "types": "dist/index.d.ts"
+    "prettier": "prettier --write ./src",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+}

src/icons/ChainLogo.tsx

@@ -60,14 +60,14 @@ const CHAIN_TO_COLOR_ICON = {
   [chainMetadata.polygon.id]: PolygonColor,
 };
 
-interface Props {
+export interface ChainLogoProps {
   chainId?: number;
   size?: number;
   color?: boolean;
   background?: boolean;
 }
 
-function _ChainLogo({ chainId, size = 32, color = true, background = false }: Props) {
+function _ChainLogo({ chainId, size = 32, color = true, background = false }: ChainLogoProps) {
   const iconSet = color ? CHAIN_TO_COLOR_ICON : CHAIN_TO_MONOCHROME_ICON;
   const hasIcon = !!(chainId && iconSet[chainId]);
   const imageSrc = hasIcon ? iconSet[chainId] : '';

src/icons/QuestionMark.tsx

@@ -11,9 +11,15 @@ interface Props {
 
 function _QuestionMarkIcon({ width, height, color, classes }: Props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className={classes}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="13.7 6 20.65 38"
+      className={classes}
+    >
       <path
-        d="M21.55 31.5q.05-3.6.825-5.25.775-1.65 2.925-3.6 2.1-1.9 3.225-3.525t1.125-3.475q0-2.25-1.5-3.75t-4.2-1.5q-2.6 0-4 1.475T17.9 14.95l-4.2-1.85q1.1-2.95 3.725-5.025T23.95 6q5 0 7.7 2.775t2.7 6.675q0 2.4-1.025 4.35-1.025 1.95-3.275 4.1-2.45 2.35-2.95 3.6t-.55 4Zm2.4 12.5q-1.45 0-2.475-1.025Q20.45 41.95 20.45 40.5q0-1.45 1.025-2.475Q22.5 37 23.95 37q1.45 0 2.475 1.025Q27.45 39.05 27.45 40.5q0 1.45-1.025 2.475Q25.4 44 23.95 44Z"
+        d="M21.55 31.5q.05-3.6.82-5.25.78-1.65 2.93-3.6 2.1-1.9 3.23-3.52t1.12-3.48q0-2.25-1.5-3.75t-4.2-1.5q-2.6 0-4 1.48t-2.05 3.07l-4.2-1.85q1.1-2.95 3.73-5.03T23.95 6q5 0 7.7 2.77t2.7 6.68q0 2.4-1.02 4.35-1.03 1.95-3.28 4.1-2.45 2.35-2.95 3.6t-.55 4Zm2.4 12.5q-1.45 0-2.48-1.02-1.02-1.03-1.02-2.48t1.02-2.48Q22.5 37 23.95 37t2.48 1.02q1.02 1.03 1.02 2.48t-1.02 2.48Q25.4 44 23.95 44Z"
         fill={color || Color.Black}
       />
     </svg>

src/stories/ChainLogo.stories.tsx

@@ -0,0 +1,55 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { ChainLogo } from '../icons/ChainLogo';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'ChainLogo',
+  component: ChainLogo,
+} as ComponentMeta<typeof ChainLogo>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof ChainLogo> = (args) => <ChainLogo {...args} />;
+
+export const ColorChain = Template.bind({});
+ColorChain.args = {
+  chainId: 1,
+  color: true,
+  background: false,
+};
+
+export const ColorNoChain = Template.bind({});
+ColorNoChain.args = {
+  chainId: 0,
+  color: true,
+  background: false,
+};
+
+export const NoColorChain = Template.bind({});
+NoColorChain.args = {
+  chainId: 1,
+  color: false,
+  background: false,
+};
+
+export const NoColorNoChain = Template.bind({});
+NoColorNoChain.args = {
+  chainId: 0,
+  color: false,
+  background: false,
+};
+
+export const BackgroundColorChain = Template.bind({});
+BackgroundColorChain.args = {
+  chainId: 1,
+  color: true,
+  background: true,
+};
+
+export const BackgroundColorNoChain = Template.bind({});
+BackgroundColorNoChain.args = {
+  chainId: 0,
+  color: true,
+  background: true,
+};

tsconfig.json

@@ -5,6 +5,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": false,
+    "isolatedModules": true,
     "jsx": "react",
     "lib": ["es2020", "dom"],
     "module": "commonjs",
@@ -25,6 +26,7 @@
     "target": "es6",
   },
   "include": ["./src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx"],
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs"