Merge pull request #207 from storybookjs/improve-linting

Improve linting

apps/addon-catalog/app/(home)/layout.tsx

@@ -1,7 +1,7 @@
+import { type ReactNode } from 'react';
 import { HomeWrapper } from '../../components/home-wrapper';
 import { buildTagLinks } from '../../lib/build-tag-links';
 import { fetchHomeData } from '../../lib/fetch-home-data';
-import { ReactNode } from 'react';
 
 export default async function Layout({ children }: { children: ReactNode }) {
   const { trendingTags = [] } = (await fetchHomeData()) || {};

apps/addon-catalog/app/(home)/page.tsx

@@ -11,14 +11,12 @@ export default async function Page() {
   return (
     <>
       <h3 className="mb-8 text-2xl font-bold">New to Storybook 8</h3>
-      {vta && (
-        <Preview
+      {vta ? <Preview
           key={vta.name}
           orientation="horizontal"
           element={vta}
           type="addon"
-        />
-      )}
+        /> : null}
       <h3 className="mb-8 mt-12 text-2xl font-bold">Popular addons</h3>
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">
         {popularAddons.map((addon) => (

apps/addon-catalog/app/(home)/tag/[...name]/page.tsx

@@ -1,6 +1,6 @@
+import { notFound } from 'next/navigation';
 import { Preview } from '../../../../components/preview';
 import { fetchTagDetailsData } from '../../../../lib/fetch-tag-details-data';
-import { notFound } from 'next/navigation';
 
 interface TagDetailsProps {
   params: {

apps/addon-catalog/app/[...addonName]/page.tsx

@@ -1,6 +1,6 @@
-import { fetchAddonDetailsData } from '../../lib/fetch-addon-details-data';
 import { SubHeader } from '@repo/ui';
 import { cn } from '@repo/utils';
+import { fetchAddonDetailsData } from '../../lib/fetch-addon-details-data';
 import { AddonHero } from '../../components/addon/addon-hero';
 import { AddonSidebar } from '../../components/addon/addon-sidebar';
 import { Highlight } from '../../components/highlight';
@@ -35,7 +35,7 @@ export default async function AddonDetails({ params }: AddonDetailsProps) {
             <Highlight withHTMLChildren={false}>
               <div
                 /**
-                 * These are copied from @repo/ui/src/components/mdx/...
+                 * These are copied from \@repo/ui/src/components/mdx/...
                  *
                  * TODO: Tweak these styles
                  */

apps/addon-catalog/app/layout.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from 'next';
 import { cn, fetchGithubCount } from '@repo/utils';
 import { Nunito_Sans as nunitoSans } from 'next/font/google';
 import { Header, Footer, Container } from '@repo/ui';
-import { Providers } from './providers';
 import { GoogleAnalytics } from '@next/third-parties/google';
+import { Providers } from './providers';
 
 import '@docsearch/css';
 import './globals.css';
@@ -43,7 +43,7 @@ export default async function RootLayout({
         )}
       >
         <Header
-          algoliaApiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+          algoliaApiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY!}
           githubCount={githubCount}
         />
         <Providers>

apps/addon-catalog/components/addon/addon-hero.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Image from 'next/image';
 import {
   CheckIcon,
   CopyIcon,
@@ -12,48 +11,50 @@ import copy from 'copy-to-clipboard';
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { StorybookIcon } from '@repo/ui';
+import { type Addon } from '../../types';
 
 export function AddonHero({ addon }: { addon: Addon }) {
   const [state, setState] = useState(false);
 
   const onClick = () => {
-    copy(`npx install ${addon.name}`);
+    copy(`npx install ${addon.name ?? ''}`);
     setState(true);
     setTimeout(() => {
       setState(false);
     }, 2000);
   };
 
   return (
-    <div className="mb-12 flex justify-between border-b border-zinc-300 pb-12 dark:border-b-slate-700">
+    <div className="flex justify-between pb-12 mb-12 border-b border-zinc-300 dark:border-b-slate-700">
       <div className="flex flex-col gap-8 md:flex-row">
-        {addon.icon && (
+        {addon.icon ? (
           <div
             style={{ backgroundImage: `url('${addon.icon}')` }}
-            className="h-20 w-20 bg-contain bg-center bg-no-repeat"
+            className="w-20 h-20 bg-center bg-no-repeat bg-contain"
           />
-        )}
+        ) : null}
         <div className="flex flex-col items-start">
           <div className="flex items-center gap-2">
             <h1 className="text-2xl font-bold">{addon.displayName}</h1>
             {addon.verified &&
-              ['official', 'integrators'].includes(addon.verified) &&
-              addon.status !== 'deprecated' && (
-                <VerifiedIcon className="text-blue-500" />
-              )}
+            ['official', 'integrators'].includes(addon.verified) &&
+            addon.status !== 'deprecated' ? (
+              <VerifiedIcon className="text-blue-500" />
+            ) : null}
           </div>
           <p className="mb-4">{addon.description}</p>
           <div className="flex flex-col gap-6 md:flex-row md:items-center">
             <button
-              className="relative flex cursor-pointer items-center gap-4 rounded bg-zinc-100 px-4 py-2 dark:bg-slate-800 dark:text-slate-300"
+              className="relative flex items-center gap-4 px-4 py-2 rounded cursor-pointer bg-zinc-100 dark:bg-slate-800 dark:text-slate-300"
               onClick={onClick}
+              type="button"
             >
               npm install {addon.name} <CopyIcon />
               <AnimatePresence>
                 {state ? (
                   <motion.div
                     animate={{ opacity: 1 }}
-                    className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-zinc-100 text-black dark:bg-slate-800 dark:text-slate-300"
+                    className="absolute top-0 left-0 flex items-center justify-center w-full h-full gap-2 text-black bg-zinc-100 dark:bg-slate-800 dark:text-slate-300"
                     exit={{ opacity: 0 }}
                     initial={{ opacity: 0 }}
                     transition={{ duration: 0.2 }}
@@ -64,34 +65,35 @@ export function AddonHero({ addon }: { addon: Addon }) {
               </AnimatePresence>
             </button>
             <a
-              href={addon.repositoryUrl || ''}
+              href={addon.repositoryUrl ?? ''}
               target="_blank"
               className="flex items-center gap-2 text-sm text-black transition-colors hover:text-blue-500 dark:text-slate-400"
+              rel="noopener"
             >
               <GithubIcon />
               View on Github
             </a>
           </div>
         </div>
       </div>
-      <div className="hidden flex-col pr-8 lg:flex">
-        <div className="mb-4 flex flex-col">
+      <div className="flex-col hidden pr-8 lg:flex">
+        <div className="flex flex-col mb-4">
           <div className="text-3xl text-blue-400">
-            {humanFormat(addon.weeklyDownloads || 0, {
+            {humanFormat(addon.weeklyDownloads ?? 0, {
               decimals: 0,
               separator: '',
             })}
           </div>
           <div className="text-md">Downloads per week</div>
         </div>
-        {addon.verified && addon.verified === 'official' && (
+        {addon.verified && addon.verified === 'official' ? (
           <div className="flex items-center gap-2 rounded bg-blue-900 px-2 py-1.5">
             <StorybookIcon size={16} />
             <span className="text-xs font-bold text-white">
               Made by Storybook
             </span>
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );

apps/addon-catalog/components/addon/addon-sidebar.tsx

@@ -5,36 +5,35 @@ import { BookIcon, EditIcon } from '@storybook/icons';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
-
-
+import { type AddonWithTagLinks } from '../../types';
 
 export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
   const [moreAuthorsVisible, setMoreAuthorsVisible] = useState(false);
-  const authors = addon?.authors || [];
+  const authors = addon?.authors ?? [];
   const listOfAuthors = moreAuthorsVisible ? authors : authors.slice(0, 6);
   const moreAuthors = authors.slice(6);
-  const renderers = addon?.compatibility || [];
+  const renderers = addon?.compatibility ?? [];
   const tags = addon?.tags || [];
 
   return (
     <div className="flex-shrink-0 md:w-[250px]">
-      {listOfAuthors && listOfAuthors.length > 0 && (
+      {listOfAuthors && listOfAuthors.length > 0 ? (
         <>
-          <div className="mb-4 flex items-center py-2 text-sm font-bold">
+          <div className="flex items-center py-2 mb-4 text-sm font-bold">
             Made by
           </div>
-          <ul className="mb-6 flex flex-col gap-4">
+          <ul className="flex flex-col gap-4 mb-6">
             {listOfAuthors.map((author) => (
               <li className="flex items-center gap-2" key={author.username}>
-                {author.gravatarUrl && (
-                  <div className="relative h-7 w-7 overflow-hidden rounded-full">
+                {author.gravatarUrl ? (
+                  <div className="relative overflow-hidden rounded-full h-7 w-7">
                     <Image
                       src={`https:${author.gravatarUrl}`}
                       alt={author.username}
-                      fill={true}
+                      fill
                     />
                   </div>
-                )}
+                ) : null}
                 {author.username}
               </li>
             ))}
@@ -47,38 +46,40 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
               type="button"
               className="flex text-sm transition-colors hover:text-blue-500"
             >
-              {`+ ${moreAuthors.length} more`}
+              {`+ ${moreAuthors.length.toString()} more`}
             </button>
           )}
         </>
-      )}
-      {renderers && renderers.length > 0 && (
+      ) : null}
+      {renderers && renderers.length > 0 ? (
         <>
-          <div className="mb-2 mt-6 flex items-center py-2 text-sm font-bold">
+          <div className="flex items-center py-2 mt-6 mb-2 text-sm font-bold">
             Work with
           </div>
           <ul className="flex flex-wrap gap-2">
             {renderers.map((renderer) => (
-              <Pill noHover>{renderer.displayName}</Pill>
+              <Pill key={renderer.name} noHover>
+                {renderer.displayName}
+              </Pill>
             ))}
           </ul>
         </>
-      )}
-      {tags && tags.length && (
+      ) : null}
+      {tags?.length ? (
         <>
-          <div className="mb-2 mt-6 flex items-center py-2 text-sm font-bold">
+          <div className="flex items-center py-2 mt-6 mb-2 text-sm font-bold">
             Tags
           </div>
-          <ul className="mb-6 flex flex-wrap gap-2">
+          <ul className="flex flex-wrap gap-2 mb-6">
             {tags.map(({ link, name }) => (
-              <Pill>
+              <Pill key={name}>
                 <Link href={link}>{name}</Link>
               </Pill>
             ))}
           </ul>
         </>
-      )}
-      <div className="mt-6 flex flex-col gap-4 border-t border-t-zinc-300 pt-6 dark:border-t-slate-700">
+      ) : null}
+      <div className="flex flex-col gap-4 pt-6 mt-6 border-t border-t-zinc-300 dark:border-t-slate-700">
         <a
           href="/docs/addons/install-addons"
           className="flex items-center gap-2 text-sm transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500"

apps/addon-catalog/components/highlight.tsx

@@ -1,34 +1,24 @@
 'use client';
 
 import React, {
-  ComponentProps,
+  type ComponentProps,
   forwardRef,
-  FunctionComponent,
+  type FunctionComponent,
   useEffect,
   useRef,
 } from 'react';
-import Prism from 'prismjs';
+import Prism, { highlightAllUnder } from 'prismjs';
 
 if (typeof document !== 'undefined') {
-  // @ts-ignore
   global.Prism = Prism;
-  // @ts-ignore
   require('prismjs/components/prism-bash');
-  // @ts-ignore
   require('prismjs/components/prism-javascript');
-  // @ts-ignore
   require('prismjs/components/prism-typescript');
-  // @ts-ignore
   require('prismjs/components/prism-json');
-  // @ts-ignore
   require('prismjs/components/prism-css');
-  // @ts-ignore
   require('prismjs/components/prism-yaml');
-  // @ts-ignore
   require('prismjs/components/prism-markdown');
-  // @ts-ignore
   require('prismjs/components/prism-jsx');
-  // @ts-ignore
   require('prismjs/components/prism-tsx');
 }
 
@@ -37,6 +27,8 @@ const HighlightBlock = forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >((props, ref) => <div ref={ref} {...props} />);
 
+HighlightBlock.displayName = 'HighlightBlock';
+
 /**
  * TODO: This is how the Highlight component applies the theme.
  *       Not sure how to do this without styled components.
@@ -102,21 +94,21 @@ const languageMap = {
   tsx: 'tsx',
 } as const;
 
-interface Props {
+interface HighlightProps {
   language?: keyof typeof languageMap;
   withHTMLChildren?: boolean;
 }
 
 export const Highlight: FunctionComponent<
-  Props & ComponentProps<typeof HighlightBlock>
+  HighlightProps & ComponentProps<typeof HighlightBlock>
 > = ({
   children,
   language: inputLanguage,
   withHTMLChildren = true,
   ...rest
 }) => {
   const language =
-    (inputLanguage && languageMap[inputLanguage]) || inputLanguage;
+    (inputLanguage && languageMap[inputLanguage]) ?? inputLanguage;
   const codeBlock = withHTMLChildren ? (
     <div dangerouslySetInnerHTML={{ __html: children as string }} />
   ) : (
@@ -126,7 +118,7 @@ export const Highlight: FunctionComponent<
 
   useEffect(() => {
     if (domNode.current) {
-      Prism.highlightAllUnder(domNode.current);
+      highlightAllUnder(domNode.current);
     }
   });