feat: storybook updates

packages/website/.storybook/main.js

@@ -7,6 +7,9 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    'storybook-addon-next-router',
+    '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
     {
       name: '@storybook/addon-postcss',
       options: {
@@ -19,4 +22,7 @@ module.exports = {
       },
     },
   ],
+  features: {
+    interactionsDebugger: true, // 👈 Enable playback controls
+  },
 }

packages/website/.storybook/preview.js

@@ -1,6 +1,10 @@
 // .storybook/preview.js
+import { RouterContext } from 'next/dist/shared/lib/router-context'
 import '../styles/global.css'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  nextRouter: {
+    Provider: RouterContext.Provider,
+  },
 }

packages/website/.storybook/webpack.config.js

@@ -0,0 +1,10 @@
+const path = require('path')
+
+module.exports = ({ config }) => {
+  config.resolve.modules = [
+    ...(config.resolve.modules || []),
+    path.resolve(__dirname, '../'),
+    path.resolve(__dirname, '../src'),
+  ]
+  return config
+}

packages/website/components/button/button.stories.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import Button from '.'
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: Button,
+  title: 'Button',
+  parameters: {
+    layout: 'centered',
+    controls: {
+      sort: 'requiredFirst',
+    },
+  },
+  argTypes: {
+    type: {
+      options: ['button', 'submit', 'reset'],
+      control: { type: 'select' },
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      control: 'text',
+      default: 'Button',
+      name: 'label',
+    },
+    variant: {
+      options: ['light', 'dark', 'tag', 'caution'],
+      control: { type: 'select' },
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    small: {
+      control: 'boolean',
+    },
+    hologram: {
+      control: 'boolean',
+      default: true,
+    },
+  },
+}
+
+const Template = (
+  /** @type {{
+   * children: JSX.Element | string | 'Button';
+   * }} */
+  args
+) => {
+  const label = args.children || 'Button'
+  return <Button {...args}>{label}</Button>
+}
+
+export const Default = Template.bind({})

packages/website/components/button.js → packages/website/components/button/index.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
 
-import Link from './link'
+import Link from '../link'
 import clsx from 'clsx'
-import countly from '../lib/countly'
+import countly from 'lib/countly'
 
 /**
  * @typedef {Object} TrackingProp
@@ -74,7 +74,7 @@ export default function Button({
       'py-2 px-3',
       variant !== 'tag' && hologram && 'hologram chicagoflf',
       small && 'small',
-      disabled ? 'o-60' : 'interactive',
+      disabled ? 'opacity-60' : 'interactive',
       variant
     )
   }

packages/website/components/footer.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import Link from './link'
+import Link from '../components/link'
 import Discord from '../icons/discord'
 import Twitter from '../icons/twitter'
 import Github from '../icons/github'

packages/website/components/hero.js

@@ -1,5 +1,5 @@
 import countly from '../lib/countly'
-import Button from './button.js'
+import Button from './button/index.js'
 
 export default function Hero() {
   return (

packages/website/components/layout.js

@@ -1,7 +1,7 @@
 import Footer from './footer.js'
 import Head from 'next/head'
 import Loading from './loading'
-import Navbar from './navbar.js'
+import Navbar from './navbar/index.js'
 import { getStatusPageSummary } from '../lib/statuspage-api'
 import { getVersion } from '../lib/api'
 import { useQuery } from 'react-query'

packages/website/components/link.js

@@ -13,12 +13,7 @@ import Link from 'next/link'
  */
 const WrappedLink = ({ tabIndex = 0, href = '', children, ...otherProps }) => (
   <Link href={href} {...otherProps}>
-    <a
-      href="replace"
-      {...otherProps}
-      tabIndex={tabIndex}
-      onClick={otherProps.onClick}
-    >
+    <a {...otherProps} tabIndex={tabIndex} onClick={otherProps.onClick}>
       {children}
     </a>
   </Link>

packages/website/components/navbar.js → packages/website/components/navbar/index.js

@@ -1,15 +1,14 @@
 import Router, { useRouter } from 'next/router'
 import { useCallback, useMemo, useRef, useState } from 'react'
-
-import Button from './button.js'
-import Cross from '../icons/cross'
-import Hamburger from '../icons/hamburger'
-import Link from './link'
+import Button from '../button'
+import Cross from '../../icons/cross'
+import Hamburger from '../../icons/hamburger'
+import Link from '../link'
 import clsx from 'clsx'
-import countly from '../lib/countly'
-import { getMagic } from '../lib/magic.js'
+import countly from 'lib/countly'
+import { getMagic } from '../../lib/magic.js'
 import { useQueryClient } from 'react-query'
-import Logo from '../components/logo'
+import Logo from '../logo'
 import { useUser } from 'lib/user.js'
 
 /**
@@ -26,7 +25,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
   const queryClient = useQueryClient()
   const { handleClearUser } = useUser()
   const [isMenuOpen, setMenuOpen] = useState(false)
-  const { query } = useRouter()
+  const { query } = useRouter() || { query: { version: '' } }
   const version = /** @type {string} */ (query.version)
 
   const logout = useCallback(async () => {

packages/website/components/navbar/navbar.stories.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import Navbar from '.'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { UserContext } from 'lib/user'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 60 * 1000 } },
+})
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: Navbar,
+  title: 'Navbar',
+  parameters: {
+    // layout: 'centered',
+  },
+  argTypes: {
+    bgColor: {
+      options: [
+        'bg-orange',
+        'bg-forest',
+        'bg-yellow',
+        'bg-green',
+        'bg-peach',
+        'bg-ltblue',
+      ],
+      defaultValue: 'bg-orange',
+      control: { type: 'select' },
+    },
+    // logo: {
+    //   options: [
+    //     '/images/logo-nft-storage-inline-dark.svg',
+    //     '/images/logo-nft-storage-inline.svg',
+    //   ],
+    //   default: '/images/logo-nft-storage-inline.svg',
+    //   control: { type: 'select' },
+    // },
+    dark: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    user: {
+      control: { type: 'boolean' },
+    },
+  },
+}
+
+const Template = (
+  /** @type {{
+   * bgColor: string;
+   * user: boolean;
+   * dark: boolean;
+   * }} */
+  args
+) => {
+  const userMock = {
+    email: 'foo@bar.com',
+    isMfaEnabled: false,
+    issuer: 'did:ethr:0x6CA660ec2116Bd792AB7Cd5A10e1Eb8310F6f125',
+    phoneNumber: null,
+    publicAddress: '0x6CA660ec2116Bd792AB7Cd5A10e1Eb8310F6f125',
+    tags: {
+      HasAccountRestriction: false,
+      HasPsaAccess: false,
+      HasSuperHotAccess: false,
+    },
+  }
+
+  function handleClearUser() {
+    console.info('clear user fake')
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <UserContext.Provider
+        value={{ user: args.user ? userMock : null, handleClearUser }}
+      >
+        <Navbar
+          logo={{ src: '', isDark: args.dark }}
+          bgColor={args.bgColor}
+          user={args.user ? userMock : null}
+        />
+      </UserContext.Provider>
+    </QueryClientProvider>
+  )
+}
+
+export const Default = Template.bind({})

packages/website/components/tooltip.stories.js → packages/website/components/tooltip/tooltip.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import Tooltip from './tooltip'
-
+import Tooltip from '.'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   component: Tooltip,
@@ -49,3 +50,15 @@ const Template = (
 )
 
 export const Default = Template.bind({})
+export const Active = Template.bind({})
+
+// @ts-ignore
+Active.play = async ({ canvasElement }) => {
+  // Starts querying the component from its root element
+  const canvas = await within(canvasElement).findByRole('button')
+  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  await userEvent.hover(canvas)
+
+  // 👇 Assert DOM structure
+  expect(screen.getByText('Some Tooltip Content')).toBeInTheDocument()
+}

packages/website/components/trustedByLogos.js → packages/website/components/trustedByLogos/index.js

@@ -1,4 +1,4 @@
-import Img from '../components/cloudflareImage'
+import Img from '../cloudflareImage'
 
 /**
  * Logo Component
@@ -26,9 +26,9 @@ export const TrustedBy = ({ logos }) => {
     <div className="max-w-4xl mx-auto py-8 px-6 sm:px-16">
       <h2 className="text-center mt-0 chicagoflf">Trusted by</h2>
       <div className="grid grid-cols-2 sm:grid-cols-[repeat(auto-fit,_minmax(150px,_1fr))] gap-4 p-5 justify-center mx-auto">
-        {logos.map((logo) => (
+        {logos.map((logo, index) => (
           <Logo
-            key={`marketplace-logo-${logo.src}`}
+            key={`marketplace-logo-${index}`}
             src={logo.src}
             alt={logo.alt}
           />

packages/website/components/trustedByLogos.stories.js → packages/website/components/trustedByLogos/trustedByLogos.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TrustedBy } from './trustedByLogos'
+import { TrustedBy } from '.'
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {

packages/website/lib/__tests__/statsUtils.test.js

@@ -39,6 +39,6 @@ describe('Stats Utils unit tests', () => {
     const stats = calculateStats(infinityData.data)
 
     // passing in 0/0 should return 0, not infinity
-    expect(stats.growthRate).toBe(0)
+    expect(stats.growthRate).toBe('0')
   })
 })

packages/website/package.json

@@ -9,13 +9,14 @@
     "build": "yarn workspace nft.storage prepare && next build && next-sitemap && next export",
     "start": "next start",
     "test": "eslint './**/*.js' && tsc --build",
-    "test:jest": "jest",
+    "test:jest": "npx jest --watch",
     "test:e2e": "npx playwright test",
     "test:ci": "jest --runInBand --maxWorkers=4",
     "lint:fix": "eslint './**/*.js' --fix-dry-run",
     "analyze": "ANALYZE=true next build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test-storybook": "test-storybook"
   },
   "dependencies": {
     "@magic-ext/oauth": "^0.11.2",
@@ -48,13 +49,17 @@
     "@next/bundle-analyzer": "^12.0.7",
     "@playwright/test": "^1.20.1",
     "@sentry/nextjs": "^6.17.7",
+    "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.0-alpha.64",
     "@storybook/addon-essentials": "^6.5.0-alpha.64",
-    "@storybook/addon-interactions": "^6.5.0-alpha.64",
+    "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-links": "^6.5.0-alpha.64",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-storyshots": "^6.5.9",
+    "@storybook/jest": "^0.0.10",
     "@storybook/react": "^6.5.0-alpha.64",
-    "@storybook/testing-library": "^0.0.10--canary.9d5661e.0",
+    "@storybook/test-runner": "^0.3.0",
+    "@storybook/testing-library": "^0.0.13",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
@@ -71,6 +76,9 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "git-rev-sync": "^3.0.1",
+    "jest": "27",
+    "jest-environment-jsdom": "^28.1.2",
+    "jest-playwright-preset": "^1.7.2",
     "jscodeshift": "^0.13.1",
     "next": "^12.0.7",
     "next-sitemap": "^1.6.203",
@@ -80,6 +88,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.3.3",
     "sass-loader": "^12.6.0",
+    "storybook-addon-next-router": "^3.1.1",
     "style-loader": "^3.3.1",
     "typescript": "4.4.4"
   },

packages/website/pages/blog/subscribe.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import Button from '../../components/button.js'
+import Button from '../../components/button/index.js'
 import countly from '../../lib/countly.js'
 import { subscribe } from '../../lib/subscribe.js'
 import { useRouter } from 'next/router'