bun + prettier

.github/workflows/continuous-integration.yml

@@ -9,62 +9,35 @@ jobs:
   prettier:
     name: Prettier
     runs-on: ubuntu-latest
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-    strategy:
-      matrix:
-        node-version: [20]
     steps:
       - uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
         with:
-          version: 9
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          bun-version: latest
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: bun install
       - name: Run prettier
-        run: pnpm run fmt
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: Apply formatting changes
-          branch: ${{ github.head_ref }}
+        run: bun run fmt:check
 
   playwright-tests:
     name: Playwright tests
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20]
     steps:
       - uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          bun-version: latest
       - uses: actions/cache@v3
         id: playwright-cache
         with:
           path: |
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/bun.lockb') }}
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: bun install
       - name: Install Playwright dependencies
-        run: |
-          pnpm exec playwright install --with-deps
+        run: bunx playwright install --with-deps
       - name: Run tests
-        run: |
-          pnpm exec playwright test
+        run: bunx playwright test

eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
-  }
+  },
 );

playwright-tests/storage-states/admin-connected.json

@@ -24,4 +24,4 @@
     }
   ],
   "sessionStorage": []
-}
+}

playwright-tests/storage-states/wallet-connected.json

@@ -24,4 +24,4 @@
     }
   ],
   "sessionStorage": []
-}
+}

playwright-tests/tests/example.spec.ts

@@ -1,18 +1,20 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("has title", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
 
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle(/Playwright/);
 });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("get started link", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
 
   // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+  await page.getByRole("link", { name: "Get started" }).click();
 
   // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Installation" }),
+  ).toBeVisible();
 });

src/App.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
-import { getProposal, type Proposal } from './lib/sdk';
-import { Navbar } from './components/Navbar';
-import { ProposalHeader } from './components/ProposalHeader';
-import { ProposalContent } from './components/ProposalContent';
-import { ProposalSidebar } from './components/ProposalSidebar';
+import { useEffect, useState } from "react";
+import { getProposal, type Proposal } from "./lib/sdk";
+import { Navbar } from "./components/Navbar";
+import { ProposalHeader } from "./components/ProposalHeader";
+import { ProposalContent } from "./components/ProposalContent";
+import { ProposalSidebar } from "./components/ProposalSidebar";
 
 export default function App() {
   const [proposal, setProposal] = useState<Proposal | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getProposal('267')
+    getProposal("267")
       .then(setProposal)
       .finally(() => setLoading(false));
   }, []);
@@ -38,7 +38,7 @@ export default function App() {
         <div className="bg-white rounded-lg shadow overflow-hidden">
           <div className="p-6">
             <ProposalHeader proposal={proposal} />
-            
+
             {/* Mobile: Sidebar appears first */}
             <div className="lg:hidden mt-8">
               <ProposalSidebar proposal={proposal} />
@@ -63,4 +63,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}

src/components/ApprovalModal.tsx

@@ -1,52 +1,54 @@
-import { Dialog } from '@headlessui/react';
-import { useEffect } from 'react';
-import confetti from 'canvas-confetti';
-import { Button } from './ui/Button';
+import { Dialog } from "@headlessui/react";
+import { useEffect } from "react";
+import confetti from "canvas-confetti";
+import { Button } from "./ui/Button";
 
 interface ApprovalModalProps {
   isOpen: boolean;
   onClose: () => void;
   onCreateInvoice: () => void;
 }
 
-export function ApprovalModal({ isOpen, onClose, onCreateInvoice }: ApprovalModalProps) {
+export function ApprovalModal({
+  isOpen,
+  onClose,
+  onCreateInvoice,
+}: ApprovalModalProps) {
   useEffect(() => {
     if (isOpen) {
       // Fire confetti from the left
       confetti({
         particleCount: 100,
         spread: 70,
-        origin: { x: 0, y: 0.6 }
+        origin: { x: 0, y: 0.6 },
       });
 
       // Fire confetti from the right
       confetti({
         particleCount: 100,
         spread: 70,
-        origin: { x: 1, y: 0.6 }
+        origin: { x: 1, y: 0.6 },
       });
     }
   }, [isOpen]);
 
   return (
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      
+
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel className="mx-auto max-w-md rounded-lg bg-white p-6 text-center">
           <Dialog.Title className="text-2xl font-bold text-gray-900 mb-4">
             🎉 Congratulations!
           </Dialog.Title>
-          
+
           <p className="text-gray-600 mb-6">
-            Your funding request has been approved! You can now proceed with creating an invoice to receive your funds.
+            Your funding request has been approved! You can now proceed with
+            creating an invoice to receive your funds.
           </p>
 
           <div className="flex justify-center gap-3">
-            <Button
-              variant="outline"
-              onClick={onClose}
-            >
+            <Button variant="outline" onClick={onClose}>
               Close
             </Button>
             <Button
@@ -63,4 +65,4 @@ export function ApprovalModal({ isOpen, onClose, onCreateInvoice }: ApprovalModa
       </div>
     </Dialog>
   );
-}
+}

src/components/CommentForm.tsx

@@ -1,56 +1,63 @@
-import { useState } from 'react';
-import { Bold, Italic, Link as LinkIcon, Image, Hash, Quote } from 'lucide-react';
-import { Button } from './ui/Button';
-import { cn } from '../lib/utils';
+import { useState } from "react";
+import {
+  Bold,
+  Italic,
+  Link as LinkIcon,
+  Image,
+  Hash,
+  Quote,
+} from "lucide-react";
+import { Button } from "./ui/Button";
+import { cn } from "../lib/utils";
 
 interface CommentFormProps {
   onSubmit: (content: string) => void;
   className?: string;
 }
 
 export function CommentForm({ onSubmit, className }: CommentFormProps) {
-  const [mode, setMode] = useState<'write' | 'preview'>('write');
-  const [content, setContent] = useState('');
+  const [mode, setMode] = useState<"write" | "preview">("write");
+  const [content, setContent] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (content.trim()) {
       onSubmit(content);
-      setContent('');
+      setContent("");
     }
   };
 
   return (
-    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
+    <form onSubmit={handleSubmit} className={cn("space-y-4", className)}>
       <div className="border border-gray-200 rounded-lg overflow-hidden">
         <div className="flex border-b border-gray-200">
           <button
             type="button"
-            onClick={() => setMode('write')}
+            onClick={() => setMode("write")}
             className={cn(
-              'px-4 py-2 text-sm font-medium',
-              mode === 'write'
-                ? 'text-gray-900 bg-white'
-                : 'text-gray-500 hover:text-gray-700 bg-gray-50'
+              "px-4 py-2 text-sm font-medium",
+              mode === "write"
+                ? "text-gray-900 bg-white"
+                : "text-gray-500 hover:text-gray-700 bg-gray-50",
             )}
           >
             Write
           </button>
           <button
             type="button"
-            onClick={() => setMode('preview')}
+            onClick={() => setMode("preview")}
             className={cn(
-              'px-4 py-2 text-sm font-medium',
-              mode === 'preview'
-                ? 'text-gray-900 bg-white'
-                : 'text-gray-500 hover:text-gray-700 bg-gray-50'
+              "px-4 py-2 text-sm font-medium",
+              mode === "preview"
+                ? "text-gray-900 bg-white"
+                : "text-gray-500 hover:text-gray-700 bg-gray-50",
             )}
           >
             Preview
           </button>
         </div>
 
-        {mode === 'write' ? (
+        {mode === "write" ? (
           <>
             <div className="border-b border-gray-200 bg-gray-50 px-3 py-2 flex gap-2">
               <button
@@ -106,13 +113,16 @@ export function CommentForm({ onSubmit, className }: CommentFormProps) {
           </>
         ) : (
           <div className="px-4 py-2 min-h-[150px] bg-gray-50">
-            {content || <span className="text-gray-500">Nothing to preview</span>}
+            {content || (
+              <span className="text-gray-500">Nothing to preview</span>
+            )}
           </div>
         )}
 
         <div className="bg-gray-50 px-4 py-3 text-right border-t border-gray-200 flex items-center justify-between">
           <div className="text-sm text-gray-500">
-            lines: {content.split('\n').length} words: {content.split(/\s+/).filter(Boolean).length}
+            lines: {content.split("\n").length} words:{" "}
+            {content.split(/\s+/).filter(Boolean).length}
           </div>
           <Button type="submit" disabled={!content.trim()}>
             Comment
@@ -121,4 +131,4 @@ export function CommentForm({ onSubmit, className }: CommentFormProps) {
       </div>
     </form>
   );
-}
+}