Merge pull request #469 from psteinroe/refactor/biome

refactor: drop linter and replace prettier with biome formatter

.github/workflows/ci.yml

@@ -44,26 +44,7 @@ jobs:
 
       - name: 🦺 Check Format and Lint
         id: static
-        run: pnpm run turbo format:check lint:report
-        continue-on-error: true
-
-      - name: 💍 Merge lint reports
-        run: |
-          shopt -s globstar
-          jq -s '[.[]]|flatten' ./**/lint-results/*.json &> eslint_report.json
-
-      - name: 👸 Annotate Code Linting Results
-        uses: ataylorme/eslint-annotate-action@v2
-        with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          report-json: "eslint_report.json"
-        continue-on-error: true
-
-      - name: ☁️ Upload ESLint report
-        uses: actions/upload-artifact@v4
-        with:
-          name: eslint_report.json
-          path: eslint_report.json
+        run: pnpm run check
         continue-on-error: true
 
       - name: 📦 Build Packages
@@ -118,6 +99,6 @@ jobs:
           flags: storage-react-query
           fail_ci_if_error: false
 
-      - name: ⚠️ Check for error
+      - name: Check for error
         if: steps.static.outcome != 'success' || steps.build.outcome != 'success' || steps.test.outcome != 'success'
         run: exit 1

README.md

@@ -47,7 +47,6 @@ The cache helpers are split up into reusable libraries.
 
 These are not meant for direct usage.
 
-- `eslint-config-custom`: `eslint` configurations
 - `jest-presets`: `jest` presets
 - `postgrest-core`: shared logic for [postgrest-js](https://github.com/supabase/postgrest-js)
 - `storage-core`: shared logic for [storage-js](https://github.com/supabase/storage-js) operations

biome.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": ["**/.next", "node_modules"]
+  },
+  "linter": {
+    "enabled": false
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double"
+    }
+  }
+}

docs/next.config.js

@@ -3,9 +3,9 @@ const nextConfig = {
   reactStrictMode: true,
 };
 
-const withNextra = require("nextra")({
-  theme: "nextra-theme-docs",
-  themeConfig: "./theme.config.jsx",
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx',
 });
 
 module.exports = withNextra(nextConfig);

docs/package.json

@@ -6,28 +6,23 @@
     "dev": "next dev --port 3002",
     "build": "next build",
     "start": "next start",
-    "clean": "rm -rf .turbo && rm -rf lint-results && rm -rf .nyc_output && rm -rf node_modules && rm -rf dist",
-    "lint": "next lint",
-    "typecheck": "tsc --pretty --noEmit",
-    "format:write": "prettier --write \"pages/**/*.{ts,tsx,mdx}\"",
-    "format:check": "prettier --check \"pages/**/*.{ts,tsx,mdx}\""
+    "clean": "rm -rf .turbo && rm -rf .nyc_output && rm -rf node_modules && rm -rf dist",
+    "typecheck": "tsc --pretty --noEmit"
   },
   "dependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "^18.0.7",
     "@vercel/analytics": "^1.0.0",
-    "eslint": "8.54.0",
-    "eslint-config-next": "14.2.0",
     "next": "14.2.0",
     "nextra": "2.13.2",
     "nextra-theme-docs": "2.13.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.4.2"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",
+    "typescript": "5.4.2",
+    "@types/node": "^20.0.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "^18.0.7",
     "postcss": "^8.4.14",
     "tailwindcss": "3.4.0"
   }

docs/pages/_app.tsx

@@ -1,5 +1,5 @@
-import type { AppProps } from "next/app";
-import { Analytics } from "@vercel/analytics/react";
+import { Analytics } from '@vercel/analytics/react';
+import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

docs/tailwind.config.js

@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        "./app/**/*.{js,ts,jsx,tsx}",
-        "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
-        "./components/**/*.{js,ts,jsx,tsx}",
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,md,mdx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 };

docs/theme.config.jsx

@@ -1,9 +1,9 @@
-import { useRouter } from "next/router";
+import { useRouter } from 'next/router';
 
 export default {
   logo: <span>Supabase Cache Helpers</span>,
   project: {
-    link: "https://github.com/psteinroe/supabase-cache-helpers",
+    link: 'https://github.com/psteinroe/supabase-cache-helpers',
   },
   head: (
     <>
@@ -33,17 +33,17 @@ export default {
     </>
   ),
   docsRepositoryBase:
-    "https://github.com/psteinroe/supabase-cache-helpers/blob/core/docs",
+    'https://github.com/psteinroe/supabase-cache-helpers/blob/core/docs',
   useNextSeoProps() {
     const { asPath } = useRouter();
-    if (asPath !== "/") {
+    if (asPath !== '/') {
       return {
-        titleTemplate: "%s – Supabase Cache Helpers",
+        titleTemplate: '%s – Supabase Cache Helpers',
       };
     }
   },
   banner: {
-    key: "v1.0-release",
+    key: 'v1.0-release',
     text: (
       <a href="https://twitter.com/psteinroe" target="_blank" rel="noreferrer">
         🎉 We are hiring! You want to work on a larger-scale Supabase project?
@@ -54,7 +54,7 @@ export default {
   footer: {
     text: (
       <span>
-        MIT {new Date().getFullYear()} ©{" "}
+        MIT {new Date().getFullYear()} ©{' '}
         <a
           href="https://supabase-cache-helpers.vercel.app"
           target="_blank"

examples/react-query/components/contact/contact-cards.tsx

@@ -1,30 +1,32 @@
-import { FC, PropsWithChildren } from "react"
-import { useFileUrl } from "@supabase-cache-helpers/storage-react-query"
-import { useSupabaseClient } from "@supabase/auth-helpers-react"
+import { useFileUrl } from '@supabase-cache-helpers/storage-react-query';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import type { FC, PropsWithChildren } from 'react';
 
-import { Database } from "@/types/database"
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
+import type { Database } from '@/types/database';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 export const ContactCards: FC<PropsWithChildren> = ({ children }) => (
   <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">{children}</div>
-)
+);
 
 export type ContactCardProps = {
   contact: Pick<
-    Database["public"]["Tables"]["contact"]["Row"],
-    "id" | "username" | "continent"
-  >
-  onClick: () => void
-}
+    Database['public']['Tables']['contact']['Row'],
+    'id' | 'username' | 'continent'
+  >;
+  onClick: () => void;
+};
 
 export const ContactCard: FC<ContactCardProps> = ({ contact, onClick }) => {
-  const supabase = useSupabaseClient()
+  const supabase = useSupabaseClient();
   const { data: avatarUrl } = useFileUrl(
-    supabase.storage.from("contact_avatars"),
+    supabase.storage.from('contact_avatars'),
     contact.id,
-    "public",
-    { ensureExistence: true }
-  )
+    'public',
+    {
+      ensureExistence: true,
+    },
+  );
 
   return (
     <div className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400">
@@ -44,5 +46,5 @@ export const ContactCard: FC<ContactCardProps> = ({ contact, onClick }) => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};