Replace ESLint, Stylelint, and Prettier with Biome

.github/renovate.json

@@ -1,6 +1,3 @@
 {
-    "extends": [
-        "config:base",
-        "github>prezly/renovate-presets:themes-nextjs"
-    ]
+    "extends": ["config:base", "github>prezly/renovate-presets:themes-nextjs"]
 }

README.md

@@ -5,7 +5,7 @@ Lena Prezly Theme is based on [Next.js] 12+ framework.
 - Data-fetching is handled by [Prezly Theme Kit] and [Prezly SDK].
 - Multi-language is powered by [React Intl] and [Prezly Themes Translations].
 - Analytics powered by [Prezly Analytics].
-- Code-style is ensured by [ESLint], [StyleLint] and [Prettier].
+- Code-style is ensured by [Biome].
 - Search is powered by [Algolia]
 - Error-logging with [Sentry].
 
@@ -59,7 +59,7 @@ This repo is configured with GitHub workflows to run linter checks on every push
 npm run check
 ```
 
-Prettier is configured to be managed by ESLint, but you can always run it separately with `npm run prettier` to check code-style, or with `npm run prettier:fix` to auto-fix code-style issues in the project.
+To auto-fix code style issues in the project, run `npm run lint:fix`.
 
 ## Documentation
 
@@ -97,10 +97,8 @@ Made with ♥ by [Prezly](https://www.prezly.com/developers)
 [Prezly SDK]: https://github.com/prezly/javascript-sdk
 [Prezly Theme Kit]: https://github.com/prezly/theme-kit-nextjs
 [Typescript]: https://www.typescriptlang.org
-[ESLint]: https://eslint.org
+[Biome]: https://biomejs.dev
 [Algolia]: https://algolia.com
-[StyleLint]: https://stylelint.io
-[Prettier]: https://prettier.io
 [React Intl]: https://www.npmjs.com/package/react-intl
 [Algolia Search]: https://www.npmjs.com/package/algoliasearch
 [Prezly Content React Renderer]: https://www.npmjs.com/package/@prezly/content-renderer-react-js

biome.json

@@ -0,0 +1,52 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "files": {
+        "ignoreUnknown": true,
+        "ignore": [".next", "build", "node_modules", "README.md", "next-env.d.ts"]
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 100
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "single",
+            "semicolons": "always",
+            "trailingCommas": "all"
+        }
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true,
+            "a11y": {
+                "useKeyWithClickEvents": "off",
+                "useSemanticElements": "off",
+                "useValidAnchor": "off",
+                "useValidAriaRole": "off"
+            },
+            "complexity": {
+                "noBannedTypes": "off",
+                "noForEach": "off",
+                "useOptionalChain": "off"
+            },
+            "correctness": {
+                "useExhaustiveDependencies": "off"
+            },
+            "security": {
+                "noDangerouslySetInnerHtml": "off"
+            },
+            "style": {
+                "noNonNullAssertion": "off",
+                "useNodejsImportProtocol": "off"
+            },
+            "suspicious": {
+                "noExplicitAny": "off",
+                "noImplicitAnyLet": "off",
+                "noShadowRestrictedNames": "off"
+            }
+        }
+    }
+}

components/CategoriesBar/CategoriesBar.tsx

@@ -27,7 +27,7 @@ function CategoriesBar() {
 
         const { paddingLeft, paddingRight } = getComputedStyle(containerRef.current);
         const containerWidthWithoutPadding =
-            containerWidth - parseInt(paddingLeft) - parseInt(paddingRight);
+            containerWidth - Number.parseInt(paddingLeft) - Number.parseInt(paddingRight);
 
         if (containerRef.current.scrollWidth <= containerWidthWithoutPadding) {
             return [categories, []];

components/ContentRenderer/components/Attachment/utils.ts

@@ -4,7 +4,7 @@ const UNITS = ['bytes', 'Kb', 'Mb', 'Gb'];
 // Convert byte amounts to meaningful text
 export function formatBytes(bytes: number | string): string {
     let l = 0;
-    let n = typeof bytes === 'number' ? bytes : parseInt(bytes, 10) || 0;
+    let n = typeof bytes === 'number' ? bytes : Number.parseInt(bytes, 10) || 0;
 
     while (n >= 1024) {
         n /= 1024;

components/ContentRenderer/components/Gallery.tsx

@@ -1,4 +1,4 @@
-import { DOWNLOAD, useAnalytics, VIEW } from '@prezly/analytics-nextjs';
+import { DOWNLOAD, VIEW, useAnalytics } from '@prezly/analytics-nextjs';
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { GalleryNode } from '@prezly/story-content-format';
 

components/ContentRenderer/components/Image.tsx

@@ -1,4 +1,4 @@
-import { DOWNLOAD, useAnalytics, VIEW } from '@prezly/analytics-nextjs';
+import { DOWNLOAD, VIEW, useAnalytics } from '@prezly/analytics-nextjs';
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { ImageNode } from '@prezly/story-content-format';
 import type { PropsWithChildren } from 'react';

components/NotificationsBar/LinkedText.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 interface Props {
     links: Link[];

components/NotificationsBar/NotificationsBar.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { useRef, useState } from 'react';
 
-import { useOnResize } from './lib';
 import { LinkedText } from './LinkedText';
+import { useOnResize } from './lib';
 
 import styles from './NotificationsBar.module.scss';
 

components/RichText/Html.tsx

@@ -1,5 +1,5 @@
 import { Elements } from '@prezly/content-renderer-react-js';
-import { type HtmlNode } from '@prezly/story-content-format';
+import type { HtmlNode } from '@prezly/story-content-format';
 
 import styles from './styles.module.scss';
 

modules/Gallery/Gallery.tsx

@@ -24,7 +24,7 @@ export default function Gallery({ gallery }: Props) {
     const metaDescription = useGalleryPageMetaDescription(gallery);
 
     useEffect(() => {
-        if (typeof window !== undefined) {
+        if (typeof window !== 'undefined') {
             setUrl(window.location.href);
         }
     }, []);

modules/Layout/Header/CategoriesDropdown/CategoriesDropdown.tsx

@@ -39,21 +39,18 @@ function CategoriesDropdown({
 
     return (
         <>
-            {showAllCategoriesOnMobile && (
-                <>
-                    {filteredCategories.map((category) => (
-                        <li
-                            key={category.id}
-                            className={classNames(navigationItemClassName, styles.mobileCategory)}
-                        >
-                            <CategoryButton
-                                category={category}
-                                navigationButtonClassName={navigationButtonClassName}
-                            />
-                        </li>
-                    ))}
-                </>
-            )}
+            {showAllCategoriesOnMobile &&
+                filteredCategories.map((category) => (
+                    <li
+                        key={category.id}
+                        className={classNames(navigationItemClassName, styles.mobileCategory)}
+                    >
+                        <CategoryButton
+                            category={category}
+                            navigationButtonClassName={navigationButtonClassName}
+                        />
+                    </li>
+                ))}
             <li
                 className={classNames(navigationItemClassName, {
                     [styles.desktopCategories]: showAllCategoriesOnMobile,

modules/Layout/Header/Header.tsx

@@ -102,7 +102,7 @@ function Header({ hasError }: Props) {
             })}
         >
             <div className="container">
-                <nav role="navigation" className={styles.header}>
+                <nav className={styles.header}>
                     <Link
                         href="/"
                         locale={getLinkLocaleSlug()}

modules/Layout/Header/LanguagesDropdown/LanguagesDropdown.tsx

@@ -1,5 +1,5 @@
 import { ACTIONS, useAnalytics } from '@prezly/analytics-nextjs';
-import { getLanguageDisplayName, getUsedLanguages, LocaleObject } from '@prezly/theme-kit-core';
+import { LocaleObject, getLanguageDisplayName, getUsedLanguages } from '@prezly/theme-kit-core';
 import {
     useCurrentLocale,
     useCurrentStory,

modules/Search/components/Hit.tsx

@@ -7,8 +7,8 @@ import { Highlight } from 'react-instantsearch-dom';
 import { CategoriesList, StoryImage, StoryPublicationDate } from '@/components';
 import { useThemeSettings } from '@/hooks';
 
-import styles from './Hit.module.scss';
 import cardStyles from '@/components/StoryCards/StoryCard.module.scss';
+import styles from './Hit.module.scss';
 
 interface Props {
     hit: Hit<{ attributes: IndexedStory }>;

modules/Search/components/Results.tsx

@@ -10,9 +10,9 @@ import { Button } from '@/ui';
 import { useAlgoliaState } from './AlgoliaStateContext';
 import Hit from './Hit';
 
-import styles from './Results.module.scss';
 import containerStyles from '@/modules/InfiniteStories/InfiniteStories.module.scss';
 import listStyles from '@/modules/InfiniteStories/StoriesList.module.scss';
+import styles from './Results.module.scss';
 
 type SearchHit = HitType<{ attributes: IndexedStory }>;
 

modules/Search/components/SearchInput.tsx

@@ -1,7 +1,7 @@
 import { ACTIONS, useAnalytics } from '@prezly/analytics-nextjs';
 import { translations } from '@prezly/theme-kit-intl';
 import { useDebouncedCallback } from '@react-hookz/web';
-import { type ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import type { SearchBoxExposed, SearchBoxProvided } from 'react-instantsearch-core';
 import { connectSearchBox } from 'react-instantsearch-dom';
 import { useIntl } from 'react-intl';

modules/Stories/Stories.tsx

@@ -1,4 +1,4 @@
-import { type PaginationProps } from '@prezly/theme-kit-nextjs';
+import type { PaginationProps } from '@prezly/theme-kit-nextjs';
 
 import type { StoryWithImage } from 'types';