Add format command and CI (#509)

Co-authored-by: Eric Lau <[email protected]>

Author: CoveMB

.github/workflows/test.yml

@@ -6,7 +6,7 @@ on:
   pull_request: {}
 
 jobs:
-  lint:
+  format-lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -16,6 +16,8 @@ jobs:
           cache: 'yarn'
       - name: Install dependencies
         run: yarn install --network-concurrency 1
+      - name: Check formatting
+        run: yarn format:check
       - name: Run linter
         run: yarn lint
 

.prettierignore

@@ -0,0 +1,15 @@
+*.json
+*.md
+*.map
+*.snap
+*.lock
+*.png
+*.sol
+*.toml
+*tgz
+*.tsbuildinfo
+**/.*
+**/LICENSE
+**/NOTICE
+build/
+public/

.prettierrc

@@ -1,7 +1,10 @@
 {
+  "plugins": [
+    "prettier-plugin-svelte"
+  ],
   "singleQuote": true,
   "arrowParens": "avoid",
   "trailingComma": "all",
   "printWidth": 120,
   "bracketSpacing": true
-}
+}

CONTRIBUTING.md

@@ -40,6 +40,13 @@ From the root directory:
 
 If linting errors or warnings occur, run `yarn lint --fix` to attempt to auto-fix issues.  If there are remaining issues that cannot be auto-fixed, manually address them and re-run the command to ensure it passes.
 
+### Running formater
+From the root directory:
+- ```yarn format:{check|write}```
+
+If formatting errors or warnings occurs when running `yarn format:check`, run `yarn format:write` to attempt to auto-fix issues.
+It is recommended to use automatic formatter in your code editor or run this command before making your merge request as formatting error will fail CI.
+
 ### Running the UI
 From the `packages/ui` directory:
 - Run `yarn dev` to start a local server for the UI.

package.json

@@ -4,6 +4,8 @@
   "scripts": {
     "prepare": "wsrun -m prepare",
     "lint": "eslint",
+    "format:write": "prettier --write \"**/*\"",
+    "format:check": "prettier --check \"**/*\"",
     "dev:ui": "yarn --cwd ./packages/ui dev",
     "dev:api": "yarn --cwd ./packages/ui dev:api",
     "dev": "concurrently --kill-others-on-fail --names \"ui,api\" --prefix-colors \"magenta.bold,green.bold\" \"yarn dev:ui\" \"yarn dev:api\"",
@@ -23,12 +25,13 @@
     "@eslint/js": "^9.21.0",
     "concurrently": "^9.1.2",
     "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-unicorn": "^58.0.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript-eslint": "^8.29.0",
     "wsrun": "^5.2.4"
   }
 }

packages/ui/src/cairo/AccessControlSection.svelte

@@ -34,22 +34,22 @@
   defaultValue="ownable"
   helpContent="Restrict who can access the functions of a contract or when they can do it."
   helpLink="https://docs.openzeppelin.com/contracts-cairo/access"
-  required={required}
+  {required}
 >
   <div class="checkbox-group">
     <label class:checked={access === 'ownable'}>
-      <input type="radio" bind:group={access} value="ownable">
+      <input type="radio" bind:group={access} value="ownable" />
       Ownable
       <HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/access#ownership_and_ownable">
         Simple mechanism with a single account authorized for all privileged actions.
       </HelpTooltip>
     </label>
     <label class:checked={access === 'roles'}>
-      <input type="radio" bind:group={access} value="roles">
+      <input type="radio" bind:group={access} value="roles" />
       Roles
       <HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/access#role_based_accesscontrol">
         Flexible mechanism with a separate role for each privileged action. A role can have many authorized accounts.
       </HelpTooltip>
     </label>
   </div>
-</ExpandableToggleRadio>
+</ExpandableToggleRadio>

packages/ui/src/cairo/AccountControls.svelte

@@ -16,29 +16,28 @@
   export let accountType: Account | undefined;
 </script>
 
-
 <section class="controls-section">
   <h1>Settings</h1>
 
   <label class="labeled-input">
     <span>Name</span>
-    <input bind:value={opts.name} use:error={errors?.name}>
+    <input bind:value={opts.name} use:error={errors?.name} />
   </label>
 </section>
 
 <section class="controls-section">
   <h1>Account Type</h1>
   <div class="checkbox-group">
     <label class:checked={accountType === 'stark'}>
-      <input type="radio" bind:group={opts.type} value="stark">
+      <input type="radio" bind:group={opts.type} value="stark" />
       Starknet
       <HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/accounts#starknet_account">
         Starknet account that uses the STARK curve for signature checking.
       </HelpTooltip>
     </label>
 
     <label class:checked={accountType === 'eth'}>
-      <input type="radio" bind:group={opts.type} value="eth">
+      <input type="radio" bind:group={opts.type} value="eth" />
       Ethereum
       <HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/accounts#ethereum_account">
         Ethereum-flavored account that uses the Secp256k1 curve for signature checking.
@@ -52,35 +51,33 @@
 
   <div class="checkbox-group">
     <label class:checked={opts.outsideExecution}>
-      <input type="checkbox" bind:checked={opts.outsideExecution}>
+      <input type="checkbox" bind:checked={opts.outsideExecution} />
       Outside Execution
       <HelpTooltip link="https://github.com/starknet-io/SNIPs/blob/main/SNIPS/snip-9.md">
         Allows a protocol to submit transactions on behalf of the account, as long as it has the relevant signatures.
       </HelpTooltip>
     </label>
 
     <label class:checked={opts.declare}>
-      <input type="checkbox" bind:checked={opts.declare}>
+      <input type="checkbox" bind:checked={opts.declare} />
       Declarer
       <HelpTooltip link="https://docs.starknet.io/architecture-and-concepts/smart-contracts/contract-classes/">
         Enables the account to declare other contract classes.
       </HelpTooltip>
     </label>
 
     <label class:checked={opts.deploy}>
-      <input type="checkbox" bind:checked={opts.deploy}>
+      <input type="checkbox" bind:checked={opts.deploy} />
       Deployable
       <HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/accounts#deploying_an_account">
         Enables the account to be counterfactually deployed.
       </HelpTooltip>
     </label>
 
     <label class:checked={opts.pubkey}>
-      <input type="checkbox" bind:checked={opts.pubkey}>
+      <input type="checkbox" bind:checked={opts.pubkey} />
       Public Key
-      <HelpTooltip>
-        Enables the account to change its own public key.
-      </HelpTooltip>
+      <HelpTooltip>Enables the account to change its own public key.</HelpTooltip>
     </label>
     <UpgradeabilityField bind:upgradeable={opts.upgradeable} />
   </div>