Enable code formatting in CI pipeline (#60)

* Add formatting configuration and format codebase

* remove vendor from biome

Author: spencerstock

.github/workflows/main.yml

@@ -29,6 +29,29 @@ jobs:
       - name: Lint
         run: yarn lint
 
+  format:
+    name: Format Check
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Checkout node action
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache-dependency-path: 'yarn.lock'
+
+      - name: 'Setup'
+        uses: ./.github/actions/setup
+
+      - name: Format Check
+        run: yarn format:check
+
   typecheck:
     name: Type Check
     runs-on: ubuntu-latest

CONTRIBUTING.md

@@ -74,6 +74,13 @@ Use `yarn dev` to start the example app and build the package with hot reloading
 
 This project uses [Biome](https://github.com/biomejs/biome) for linting and formatting. See the [Biome docs](https://biomejs.dev/guides/editors/first-party-extensions/) for more information on how to configure your editor to use Biome.
 
+Available commands:
+- `yarn lint` - Run linting checks on all workspaces
+- `yarn format` - Format all files in all workspaces
+- `yarn format:check` - Check if all files are properly formatted without making changes
+
+It's recommended to run `yarn format` before committing your changes to ensure consistent code formatting across the project.
+
 ### Signing Commits
 
 All commits need to be signed with a GPG key. This adds a second factor of authentication that proves that it came from

biome.json

@@ -27,7 +27,7 @@
 			"**/build",
 			"**/dist",
 			"**/node_modules",
-			"**/src/vendor-js",
+			"**/vendor-js/**",
 			"**/*-css.ts",
 			"**/*-svg.ts"
 		]
@@ -163,7 +163,6 @@
 			"**/dist",
 			"**/node_modules",
 			"**/vendor-js/**",
-			"**/src/vendor-js/**",
 			"**/*.json"
 		]
 	},

examples/testapp/config/headers.js

@@ -1,17 +1,17 @@
 function getCrossOriginOpenerPolicyHeaders() {
-    return {
-        source: "/",
-        headers: [
-          {
-            key: "Cross-Origin-Opener-Policy",
-            value: "same-origin", 
-            },
-        ]
-    }
+  return {
+    source: '/',
+    headers: [
+      {
+        key: 'Cross-Origin-Opener-Policy',
+        value: 'same-origin',
+      },
+    ],
+  };
 }
 
-// To test these headers in your local environment, 
+// To test these headers in your local environment,
 // create a next.config and add the following rules to the next.config.js headers property.
 module.exports = {
-    getCrossOriginOpenerPolicyHeaders
-}
+  getCrossOriginOpenerPolicyHeaders,
+};

examples/testapp/package.json

@@ -7,6 +7,8 @@
     "dev": "next dev --port 3001",
     "export": "yarn build && touch ./out/.nojekyll",
     "lint": "biome lint .",
+    "format": "biome format . --write",
+    "format:check": "biome check . --formatter-enabled=true --linter-enabled=false --organize-imports-enabled=false",
     "start": "next start",
     "test": "vitest",
     "typecheck": "tsc --noEmit"

examples/testapp/src/components/EventListeners/EventListenersCard.tsx

@@ -5,16 +5,12 @@ import { ProviderConnectInfo } from 'viem';
 import { useEIP1193Provider } from '../../context/EIP1193ProviderContextProvider';
 
 export function EventListenersCard() {
-  const [connect, setConnect] = React.useState<ProviderConnectInfo | null>(
-    null
-  );
+  const [connect, setConnect] = React.useState<ProviderConnectInfo | null>(null);
   const [disconnect, setDisconnect] = React.useState<{
     code: number;
     message: string;
   } | null>(null);
-  const [accountsChanged, setAccountsChanged] = React.useState<string[] | null>(
-    null
-  );
+  const [accountsChanged, setAccountsChanged] = React.useState<string[] | null>(null);
   const [chainChanged, setChainChanged] = React.useState<string | null>(null);
 
   const { provider } = useEIP1193Provider();
@@ -23,12 +19,9 @@ export function EventListenersCard() {
     setConnect(info);
   }, []);
 
-  const handleDisconnect = useCallback(
-    (error: { code: number; message: string }) => {
-      setDisconnect({ code: error.code, message: error.message });
-    },
-    []
-  );
+  const handleDisconnect = useCallback((error: { code: number; message: string }) => {
+    setDisconnect({ code: error.code, message: error.message });
+  }, []);
 
   const handleAccountsChanged = useCallback((accounts: string[]) => {
     setAccountsChanged(accounts);
@@ -53,13 +46,7 @@ export function EventListenersCard() {
       provider?.removeListener('accountsChanged', handleAccountsChanged);
       provider?.removeListener('chainChanged', handleChainChanged);
     };
-  }, [
-    provider,
-    handleConnect,
-    handleDisconnect,
-    handleAccountsChanged,
-    handleChainChanged,
-  ]);
+  }, [provider, handleConnect, handleDisconnect, handleAccountsChanged, handleChainChanged]);
 
   return (
     <Card shadow="lg">
@@ -71,14 +58,7 @@ export function EventListenersCard() {
             </Heading>
           </Flex>
           {accountsChanged && (
-            <Code
-              mt={2}
-              as="pre"
-              p={4}
-              wordBreak="break-word"
-              whiteSpace="pre-wrap"
-              w="100%"
-            >
+            <Code mt={2} as="pre" p={4} wordBreak="break-word" whiteSpace="pre-wrap" w="100%">
               {JSON.stringify(accountsChanged, null, 2)}
             </Code>
           )}
@@ -90,14 +70,7 @@ export function EventListenersCard() {
             </Heading>
           </Flex>
           {chainChanged && (
-            <Code
-              mt={2}
-              as="pre"
-              p={4}
-              wordBreak="break-word"
-              whiteSpace="pre-wrap"
-              w="100%"
-            >
+            <Code mt={2} as="pre" p={4} wordBreak="break-word" whiteSpace="pre-wrap" w="100%">
               {JSON.stringify(chainChanged, null, 2)}
             </Code>
           )}
@@ -109,14 +82,7 @@ export function EventListenersCard() {
             </Heading>
           </Flex>
           {connect && (
-            <Code
-              mt={2}
-              as="pre"
-              p={4}
-              wordBreak="break-word"
-              whiteSpace="pre-wrap"
-              w="100%"
-            >
+            <Code mt={2} as="pre" p={4} wordBreak="break-word" whiteSpace="pre-wrap" w="100%">
               {JSON.stringify(connect, null, 2)}
             </Code>
           )}
@@ -128,14 +94,7 @@ export function EventListenersCard() {
             </Heading>
           </Flex>
           {disconnect && (
-            <Code
-              mt={2}
-              as="pre"
-              p={4}
-              wordBreak="break-word"
-              whiteSpace="pre-wrap"
-              w="100%"
-            >
+            <Code mt={2} as="pre" p={4} wordBreak="break-word" whiteSpace="pre-wrap" w="100%">
               {JSON.stringify(disconnect, null, 2)}
             </Code>
           )}

examples/testapp/src/hooks/useEventListeners.test.tsx

@@ -48,7 +48,10 @@ describe('useEventListeners', () => {
 
     expect(mockProvider.removeListener).toHaveBeenCalledTimes(4);
     expect(mockProvider.removeListener).toHaveBeenCalledWith('connect', expect.any(Function));
-    expect(mockProvider.removeListener).toHaveBeenCalledWith('accountsChanged', expect.any(Function));
+    expect(mockProvider.removeListener).toHaveBeenCalledWith(
+      'accountsChanged',
+      expect.any(Function)
+    );
     expect(mockProvider.removeListener).toHaveBeenCalledWith('chainChanged', expect.any(Function));
     expect(mockProvider.removeListener).toHaveBeenCalledWith('disconnect', expect.any(Function));
   });

examples/testapp/tsconfig.json

@@ -17,5 +17,5 @@
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"],
   "references": [],
-  "types": ["node", "vitest/globals", "@testing-library/jest-dom"],
+  "types": ["node", "vitest/globals", "@testing-library/jest-dom"]
 }

package.json

@@ -16,6 +16,8 @@
     "deploy": "yarn build:packages && yarn workspace sdk-playground export",
     "dev": "yarn workspaces foreach -A -ipv run dev",
     "lint": "yarn workspaces foreach -A -pt run lint",
+    "format": "yarn workspaces foreach -A -pt run format",
+    "format:check": "yarn workspaces foreach -A -pt run format:check",
     "test": "yarn workspaces foreach -A -ipv run test",
     "typecheck": "yarn workspaces foreach -A -pt run typecheck"
   },

packages/account-sdk/package.json

@@ -45,6 +45,8 @@
     "dev": "yarn build && tsc --watch & nodemon --watch dist --delay 1 --exec tsc-alias",
     "typecheck": "tsc --noEmit",
     "lint": "biome lint .",
+    "format": "biome format . --write",
+    "format:check": "biome check . --formatter-enabled=true --linter-enabled=false --organize-imports-enabled=false",
     "size": "size-limit"
   },
   "dependencies": {