Migration from rome to biome

rome.json → biome.json

@@ -1,7 +1,9 @@
 {
-    "$schema": "./node_modules/rome/configuration_schema.json",
+    "$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
     "files": {
-        "ignore": ["./.next/*"]
+        "ignore": [
+            "./.next/*"
+        ]
     },
     "linter": {
         "enabled": true,
@@ -12,6 +14,6 @@
     "formatter": {
         "enabled": true,
         "indentStyle": "space",
-        "indentSize": 4
+        "indentWidth": 4
     }
 }

components/CodeBlock.tsx

@@ -1,13 +1,13 @@
+import { Code, useColorMode } from "@chakra-ui/react";
 import type {
     CodeComponent,
     ReactMarkdownNames,
 } from "react-markdown/lib/ast-to-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore
-import oneLight from "react-syntax-highlighter/dist/cjs/styles/prism/one-light";
-// @ts-ignore
 import oneDark from "react-syntax-highlighter/dist/cjs/styles/prism/one-dark";
-import { Code, useColorMode } from "@chakra-ui/react";
+// @ts-ignore
+import oneLight from "react-syntax-highlighter/dist/cjs/styles/prism/one-light";
 
 export const CodeBlock: CodeComponent | ReactMarkdownNames = ({
     inline,

components/Footer.tsx

@@ -1,11 +1,11 @@
-import { Divider, VStack, HStack, LinkBox } from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Divider, HStack, LinkBox, VStack } from "@chakra-ui/react";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import {
     faBookOpen,
     faHandHoldingHeart,
 } from "@fortawesome/free-solid-svg-icons";
-import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { LinkOverlay } from "~/components/Link";
 

components/Header.tsx

@@ -1,19 +1,19 @@
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import {
+    Center,
     Flex,
     IconButton,
-    useColorMode,
-    useColorModeValue,
-    Spacer,
     Image,
     LinkBox,
-    Center,
+    Spacer,
+    useColorMode,
+    useColorModeValue,
 } from "@chakra-ui/react";
-import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { useRouter } from "next/router";
 
-import UserMenu from "~/components/UserMenu";
-import Search from "~/components/Search";
 import { Link, LinkOverlay } from "~/components/Link";
+import Search from "~/components/Search";
+import UserMenu from "~/components/UserMenu";
 
 export default function Header(): JSX.Element {
     const router = useRouter();

components/InfoColumn.tsx

@@ -1,28 +1,28 @@
-import { Package, User } from "~/utils/types";
+import { CalendarIcon, LinkIcon } from "@chakra-ui/icons";
 import {
     Avatar,
     Button,
     Code,
     HStack,
     StackDivider,
     Text,
-    useClipboard,
     VStack,
+    useClipboard,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { BASE_API_URL } from "~/utils/constants";
-import InfoColumnItem from "~/components/InfoColumnItem";
-import { CalendarIcon, LinkIcon } from "@chakra-ui/icons";
-import { format } from "timeago.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import {
     faClipboard,
     faClipboardCheck,
     faFileCode,
     faScaleBalanced,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import { format } from "timeago.js";
+import InfoColumnItem from "~/components/InfoColumnItem";
 import { Link } from "~/components/Link";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { BASE_API_URL } from "~/utils/constants";
+import { Package, User } from "~/utils/types";
 
 interface Props {
     package: Package;

components/InfoColumnItem.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
 import { Code, HStack, Text, VStack } from "@chakra-ui/react";
+import { ReactElement } from "react";
 
 interface Props {
     title: string;

components/Layout.tsx

@@ -1,8 +1,8 @@
 import { VStack } from "@chakra-ui/react";
 import type { ReactElement } from "react";
 
-import Header from "~/components/Header";
 import Footer from "~/components/Footer";
+import Header from "~/components/Header";
 
 export default function Layout({
     children,

components/Link.tsx

@@ -1,12 +1,12 @@
 // ref: https://github.com/chakra-ui/chakra-ui/discussions/3152#discussioncomment-309850
 
-import type { LinkProps, LinkOverlayProps } from "@chakra-ui/react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import type { LinkOverlayProps, LinkProps } from "@chakra-ui/react";
 import {
-    forwardRef,
     Link as ChakraLink,
     LinkOverlay as ChakraLinkOverlay,
+    forwardRef,
 } from "@chakra-ui/react";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
 import NextLink from "next/link";
 
 type LinkCompoundType = LinkProps & {

components/Package.tsx

@@ -1,6 +1,6 @@
 import {
-    Heading,
     HStack,
+    Heading,
     LinkBox,
     Spacer,
     Tag,

components/PackageDetails.tsx

@@ -1,7 +1,7 @@
 import {
     Code,
-    Heading,
     HStack,
+    Heading,
     ListItem,
     Tab,
     TabList,
@@ -13,21 +13,21 @@ import {
     UnorderedList,
     VStack,
 } from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faArrowUpRightFromSquare,
     faFileLines,
     faLink,
     faTags,
 } from "@fortawesome/free-solid-svg-icons";
-import ReactMarkdown from "react-markdown";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
+import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { CodeBlock } from "~/components/CodeBlock";
-import type { Package } from "~/utils/types";
-import { Link } from "~/components/Link";
 import InfoColumn from "~/components/InfoColumn";
+import { Link } from "~/components/Link";
+import type { Package } from "~/utils/types";
 
 interface InfoMainProps {
     package: Package;

components/Search.tsx

@@ -1,13 +1,13 @@
+import { SearchIcon } from "@chakra-ui/icons";
 import {
     Container,
     Input,
     InputGroup,
     InputRightElement,
 } from "@chakra-ui/react";
-import { SearchIcon } from "@chakra-ui/icons";
+import { useRouter } from "next/router";
 import type { ChangeEvent, KeyboardEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
-import { useRouter } from "next/router";
 
 export default function Search(): JSX.Element {
     const router = useRouter();

components/SearchPagination.tsx

@@ -8,9 +8,9 @@ import {
     usePagination,
 } from "@ajna/pagination";
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { useRouter } from "next/router";
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect } from "react";
-import { useRouter } from "next/router";
 
 import type { Position } from "~/utils/types";
 

components/SearchResult.tsx

@@ -1,18 +1,18 @@
-import type { ChangeEvent, Dispatch, SetStateAction } from "react";
-import { useCallback, useState } from "react";
 import { Center, HStack, Select, Spacer, Text, VStack } from "@chakra-ui/react";
+import { faListOl, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSort, faListOl } from "@fortawesome/free-solid-svg-icons";
 import humanizeString from "humanize-string";
 import { useRouter } from "next/router";
+import type { ChangeEvent, Dispatch, SetStateAction } from "react";
+import { useCallback, useState } from "react";
 
-import type { PackageOverview, Position } from "~/utils/types";
-import SearchPagination from "~/components/SearchPagination";
 import Package from "~/components/Package";
+import SearchPagination from "~/components/SearchPagination";
+import type { PackageOverview, Position } from "~/utils/types";
 
 const perPageSelections = [5, 10, 30, 50, 100] as const;
 const sortSelections = ["relevance", "newlyPublished"] as const;
-export type Sort = typeof sortSelections[number];
+export type Sort = (typeof sortSelections)[number];
 
 interface SortSelectionProps {
     sort: Sort;

components/UserMenu.tsx

@@ -1,15 +1,15 @@
+import { ChevronDownIcon } from "@chakra-ui/icons";
 import {
     Avatar,
-    Center,
-    Text,
     Button,
+    Center,
     Menu,
     MenuButton,
-    MenuList,
-    MenuItem,
     MenuDivider,
+    MenuItem,
+    MenuList,
+    Text,
 } from "@chakra-ui/react";
-import { ChevronDownIcon } from "@chakra-ui/icons";
 import { useCallback } from "react";
 
 // import LoginButton from "~/components/LoginButton";
@@ -21,11 +21,11 @@ interface User {
     id: string;
     app_metadata: {
         provider?: string;
-        // rome-ignore lint/suspicious: intended
+        // biome-ignore lint/suspicious: intended
         [key: string]: any;
     };
     user_metadata: {
-        // rome-ignore lint/suspicious: intended
+        // biome-ignore lint/suspicious: intended
         [key: string]: any;
     };
     aud: string;

package.json

@@ -7,8 +7,8 @@
     "build": "next build",
     "postbuild": "next-sitemap",
     "start": "next start",
-    "lint": "rome check .",
-    "fmt": "rome format . --write"
+    "lint": "biome check .",
+    "fmt": "biome format . --write"
   },
   "dependencies": {
     "@ajna/pagination": "^1.4.19",
@@ -36,13 +36,13 @@
     "truncate": "^3.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.4.1",
     "@types/node": "20.10.2",
     "@types/randomstring": "^1.1.11",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
     "@types/react-syntax-highlighter": "^15.5.10",
     "next-sitemap": "^4.2.3",
-    "rome": "^12.1.3",
-    "typescript": "5.3.2"
+    "typescript": "^5.3.3"
   }
 }

pages/404.tsx

@@ -1,4 +1,4 @@
-import { Heading, HStack, Center } from "@chakra-ui/react";
+import { Center, HStack, Heading } from "@chakra-ui/react";
 
 import Meta from "~/components/Meta";
 

pages/_app.tsx

@@ -1,8 +1,8 @@
-import "../styles/globals.css";
-import type { AppProps } from "next/app";
 import { ChakraProvider } from "@chakra-ui/react";
-import NextNProgress from "nextjs-progressbar";
 import { Analytics } from "@vercel/analytics/react";
+import type { AppProps } from "next/app";
+import NextNProgress from "nextjs-progressbar";
+import "../styles/globals.css";
 
 import Layout from "~/components/Layout";
 import theme from "~/utils/theme";

pages/_document.tsx

@@ -1,6 +1,6 @@
-import type { DocumentContext, DocumentInitialProps } from "next/document";
-import Document, { Html, Head, Main, NextScript } from "next/document";
 import { ColorModeScript } from "@chakra-ui/react";
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document, { Head, Html, Main, NextScript } from "next/document";
 
 import theme from "~/utils/theme";
 

pages/index.tsx

@@ -1,9 +1,9 @@
-import type { NextPage } from "next";
-import { VStack, Heading, Button, HStack } from "@chakra-ui/react";
 import { DownloadIcon, InfoIcon } from "@chakra-ui/icons";
+import { Button, HStack, Heading, VStack } from "@chakra-ui/react";
+import type { NextPage } from "next";
 
-import Search from "~/components/Search";
 import Meta from "~/components/Meta";
+import Search from "~/components/Search";
 
 const Home: NextPage = () => {
     return (

pages/packages/[group]/[name]/[version].tsx

@@ -1,9 +1,9 @@
-import type { GetStaticProps, GetStaticPaths } from "next";
+import type { GetStaticPaths, GetStaticProps } from "next";
 
-import type { Package } from "~/utils/types";
-import PackageDetails from "~/components/PackageDetails";
 import Meta from "~/components/Meta";
+import PackageDetails from "~/components/PackageDetails";
 import { BASE_API_URL } from "~/utils/constants";
+import type { Package } from "~/utils/types";
 
 interface VersionProps {
     package: Package;

pages/packages/[group]/[name]/index.tsx

@@ -1,9 +1,9 @@
-import type { GetStaticProps, GetStaticPaths } from "next";
+import type { GetStaticPaths, GetStaticProps } from "next";
 
-import type { Package } from "~/utils/types";
-import PackageDetails from "~/components/PackageDetails";
 import Meta from "~/components/Meta";
+import PackageDetails from "~/components/PackageDetails";
 import { BASE_API_URL } from "~/utils/constants";
+import type { Package } from "~/utils/types";
 
 interface NameProps {
     package: Package;

pages/search.tsx

@@ -1,10 +1,10 @@
-import type { GetServerSideProps } from "next";
 import { Center, Text } from "@chakra-ui/react";
+import type { GetServerSideProps } from "next";
 
-import type { PackageOverview } from "~/utils/types";
-import SearchResult from "~/components/SearchResult";
 import Meta from "~/components/Meta";
+import SearchResult from "~/components/SearchResult";
 import { BASE_API_URL, PER_PAGE } from "~/utils/constants";
+import type { PackageOverview } from "~/utils/types";
 
 interface SearchProps {
     packages?: PackageOverview[];

utils/types.ts

@@ -20,7 +20,7 @@ export interface Package {
     authors: string[];
     repository: string;
     license: string;
-    // rome-ignore lint/suspicious/noExplicitAny: intended
+    // biome-ignore lint/suspicious/noExplicitAny: intended
     metadata: Record<string, any>;
     readme?: string;
 }