Improve linting

storybookjs · Jul 17, 2024 · 7b798dc · 7b798dc
1 parent 5a95dc0
commit 7b798dc
Show file tree

Hide file tree

Showing 58 changed files with 789 additions and 832 deletions.
diff --git a/apps/addon-catalog/app/(home)/layout.tsx b/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()) || {};

diff --git a/apps/addon-catalog/app/(home)/page.tsx b/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) => (

diff --git a/apps/addon-catalog/app/(home)/tag/[...name]/page.tsx b/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: {

diff --git a/apps/addon-catalog/app/[...addonName]/page.tsx b/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';

diff --git a/apps/addon-catalog/app/layout.tsx b/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>

diff --git a/apps/addon-catalog/components/addon/addon-hero.tsx b/apps/addon-catalog/components/addon/addon-hero.tsx
@@ -27,20 +27,16 @@ export function AddonHero({ addon }: { addon: Addon }) {
   return (
     <div className="mb-12 flex justify-between border-b border-zinc-300 pb-12 dark:border-b-slate-700">
       <div className="flex flex-col gap-8 md:flex-row">
-        {addon.icon && (
-          <div
+        {addon.icon ? <div
             style={{ backgroundImage: `url('${addon.icon}')` }}
             className="h-20 w-20 bg-contain bg-center bg-no-repeat"
-          />
-        )}
+          /> : 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" />
-              )}
+              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">
@@ -66,7 +62,7 @@ export function AddonHero({ addon }: { addon: Addon }) {
             <a
               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"
+              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
@@ -84,14 +80,12 @@ export function AddonHero({ addon }: { addon: Addon }) {
           </div>
           <div className="text-md">Downloads per week</div>
         </div>
-        {addon.verified && addon.verified === 'official' && (
-          <div className="flex items-center gap-2 rounded bg-blue-900 px-2 py-1.5">
+        {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>
-        )}
+          </div> : null}
       </div>
     </div>
   );

diff --git a/apps/addon-catalog/components/addon/addon-sidebar.tsx b/apps/addon-catalog/components/addon/addon-sidebar.tsx
@@ -18,23 +18,20 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
 
   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">
             Made by
           </div>
           <ul className="mb-6 flex flex-col gap-4">
             {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 h-7 w-7 overflow-hidden rounded-full">
                     <Image
                       src={`https:${author.gravatarUrl}`}
                       alt={author.username}
-                      fill={true}
+                      fill
                     />
-                  </div>
-                )}
+                  </div> : null}
                 {author.username}
               </li>
             ))}
@@ -50,10 +47,8 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
               {`+ ${moreAuthors.length} 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">
             Work with
           </div>
@@ -62,10 +57,8 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
               <Pill noHover>{renderer.displayName}</Pill>
             ))}
           </ul>
-        </>
-      )}
-      {tags && tags.length && (
-        <>
+        </> : null}
+      {tags && tags.length ? <>
           <div className="mb-2 mt-6 flex items-center py-2 text-sm font-bold">
             Tags
           </div>
@@ -76,8 +69,7 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
               </Pill>
             ))}
           </ul>
-        </>
-      )}
+        </> : null}
       <div className="mt-6 flex flex-col gap-4 border-t border-t-zinc-300 pt-6 dark:border-t-slate-700">
         <a
           href="/docs/addons/install-addons"

diff --git a/apps/addon-catalog/components/highlight.tsx b/apps/addon-catalog/components/highlight.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import React, {
-  ComponentProps,
+  type ComponentProps,
   forwardRef,
-  FunctionComponent,
+  type FunctionComponent,
   useEffect,
   useRef,
 } from 'react';

diff --git a/apps/addon-catalog/components/home-wrapper.tsx b/apps/addon-catalog/components/home-wrapper.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { ReactNode, useEffect, useState } from 'react';
-import { TagList } from './tag-list';
+import { type ReactNode, useEffect, useState } from 'react';
 import {
   BookIcon,
   CloseIcon,
@@ -10,10 +9,11 @@ import {
   SearchIcon,
 } from '@storybook/icons';
 import Link from 'next/link';
-import { SearchResults } from './search-results';
-import { fetchSearchData } from '../lib/fetch-search-data';
 import { usePathname } from 'next/navigation';
 import { cn } from '@repo/utils';
+import { fetchSearchData } from '../lib/fetch-search-data';
+import { SearchResults } from './search-results';
+import { TagList } from './tag-list';
 
 interface HomeProps {
   tagLinks?: TagLinkType[];
@@ -49,7 +49,7 @@ export const HomeWrapper = ({ tagLinks, children }: HomeProps) => {
       }
     }, 600);
 
-    return () => clearTimeout(getData);
+    return () => { clearTimeout(getData); };
   }, [search]);
 
   return (
@@ -78,26 +78,24 @@ export const HomeWrapper = ({ tagLinks, children }: HomeProps) => {
               className="h-full w-full rounded-full bg-transparent pl-10 placeholder:text-slate-500 dark:placeholder:text-slate-400"
               placeholder="Search integrations"
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => { setSearch(e.target.value); }}
             />
             {search.length > 0 && (
               <div
                 className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 cursor-pointer items-center justify-center"
-                onClick={() => setSearch('')}
+                onClick={() => { setSearch(''); }}
               >
                 <CloseIcon />
               </div>
             )}
           </div>
-          {tagLinks && <TagList tagLinks={tagLinks} />}
+          {tagLinks ? <TagList tagLinks={tagLinks} /> : null}
         </div>
-        {search && (
-          <SearchResults
+        {search ? <SearchResults
             search={search}
             loading={loading}
             searchResults={searchResults}
-          />
-        )}
+          /> : null}
         {!search && (
           <div className="flex flex-col gap-12 md:flex-row">
             <div className="hidden flex-shrink-0 md:block md:w-[250px]">

diff --git a/apps/addon-catalog/components/preview.tsx b/apps/addon-catalog/components/preview.tsx
@@ -51,13 +51,11 @@ export const Preview = ({ element, orientation, type }: PreviewProps) => {
             className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-md"
             style={{ backgroundColor: element.accentColor || 'transparent' }}
           >
-            {element.icon && (
-              <img
+            {element.icon ? <img
                 src={element.icon}
                 alt={element.name}
                 className="h-10 w-10"
-              />
-            )}
+              /> : null}
           </div>
         )}
         <div>
@@ -68,9 +66,7 @@ export const Preview = ({ element, orientation, type }: PreviewProps) => {
             {'verified' in element &&
               element.verified &&
               ['official', 'integrators'].includes(element.verified) &&
-              element.status !== 'deprecated' && (
-                <VerifiedIcon className="text-blue-500" />
-              )}
+              element.status !== 'deprecated' ? <VerifiedIcon className="text-blue-500" /> : null}
           </div>
           <div className="text-black dark:text-slate-400">
             {element.description}
@@ -95,30 +91,26 @@ export const Preview = ({ element, orientation, type }: PreviewProps) => {
             {isRecipe ? 'Views' : 'Downloads'}
           </div>
         </div>
-        {element.authors && (
-          <div className="flex items-center">
+        {element.authors ? <div className="flex items-center">
             {element.authors.slice(0, 3).map((author) => (
               <div
                 key={author.username}
                 className="relative -ml-2 h-8 w-8 overflow-hidden rounded-full"
               >
-                {author.gravatarUrl && (
-                  <Image
+                {author.gravatarUrl ? <Image
                     src={`https:${author.gravatarUrl}`}
                     alt={author.username || ''}
-                    fill={true}
+                    fill
                     sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                  />
-                )}
+                  /> : null}
               </div>
             ))}
             {element.authors.length > 3 && (
               <div className="ml-2 text-black dark:text-slate-400">
                 + {element.authors.slice(3).length}
               </div>
             )}
-          </div>
-        )}
+          </div> : null}
       </div>
     </Comp>
   );

diff --git a/apps/addon-catalog/components/search-results.tsx b/apps/addon-catalog/components/search-results.tsx
@@ -14,7 +14,7 @@ export const SearchResults = ({
   return (
     <div>
       <h3 className="mb-8 text-2xl font-bold">Search Results for {search}</h3>
-      {loading && <div>Loading...</div>}
+      {loading ? <div>Loading...</div> : null}
       {!loading && searchResults.length === 0 && <div>No results found</div>}
       {!loading && searchResults.length > 0 && (
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">

diff --git a/apps/addon-catalog/components/tag-list.tsx b/apps/addon-catalog/components/tag-list.tsx
@@ -21,12 +21,11 @@ export const TagList = ({ tagLinks }: TagListProps) => {
           <Link href={link}>{name}</Link>
         </Pill>
       ))}
-      {moreTagsVisible &&
-        moreTags.map(({ name, link }) => (
+      {moreTagsVisible ? moreTags.map(({ name, link }) => (
           <Pill key={name} asChild>
             <Link href={link}>{name}</Link>
           </Pill>
-        ))}
+        )) : null}
       {moreTags.length > 0 && !moreTagsVisible && (
         <button
           onClick={() => {

diff --git a/apps/addon-catalog/lib/absolute-links.ts b/apps/addon-catalog/lib/absolute-links.ts
@@ -1,4 +1,4 @@
-import { resolve, format } from 'url';
+import { resolve, format } from 'node:url';
 import { rehype } from 'rehype';
 import rehypeUrls from 'rehype-urls';
 import rehypeStringify from 'rehype-stringify';
@@ -13,7 +13,7 @@ function assetUrl(repositoryUrl: string | null) {
   if (!repositoryUrl) return repositoryUrl;
 
   const repositoryRegex = /github\.com\/(.+\/.+)\//;
-  const parseResult = repositoryUrl.match(repositoryRegex);
+  const parseResult = repositoryRegex.exec(repositoryUrl);
 
   if (parseResult && parseResult[1]) {
     const repository = parseResult[1];
@@ -57,7 +57,7 @@ function absoluteLinksHtml(html: string, opts: Options) {
 }
 
 export function absoluteLinks(opts: Options) {
-  // eslint-disable-next-line
+   
   opts.assetBase = assetUrl(opts.base);
 
   return transform;

diff --git a/apps/addon-catalog/lib/create-markdown-processor.ts b/apps/addon-catalog/lib/create-markdown-processor.ts
@@ -1,8 +1,7 @@
-// eslint-disable-next-line
+ 
 import { remark } from 'remark';
 import remarkGFM from 'remark-gfm';
 import remarkHTML from 'remark-html';
-
 import { absoluteLinks } from './absolute-links';
 
 export function createMarkdownProcessor(absoluteLinkBase: string) {

diff --git a/apps/addon-catalog/lib/fetch-addon-details-data.ts b/apps/addon-catalog/lib/fetch-addon-details-data.ts
@@ -1,10 +1,9 @@
 import { addonFragment, validateResponse } from '@repo/utils';
-import { fetchAddonsQuery, gql } from '../lib/fetch-addons-query';
+import { fetchAddonsQuery, gql } from "./fetch-addons-query";
 import { buildTagLinks } from './build-tag-links';
 import { createMarkdownProcessor } from './create-markdown-processor';
 
-interface AddonValue
-  extends Pick<
+type AddonValue = Pick<
     Addon,
     | 'name'
     | 'displayName'
@@ -22,7 +21,7 @@ interface AddonValue
     | 'repositoryUrl'
     | 'homepageUrl'
     | 'npmUrl'
-  > {}
+  >
 interface AddonData {
   addon: AddonValue;
 }