Feat: Linting and formatting

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps maintain consistent coding styles across various editors and IDEs
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false 

.eslintrc.js

@@ -1,10 +1,7 @@
 module.exports = {
+  // This project uses Biome instead of ESLint
+  // Keep this file for backwards compatibility only
   root: true,
-  // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ["custom"],
-  settings: {
-    next: {
-      rootDir: ["apps/*/"],
-    },
-  },
+  extends: [],
+  rules: {},
 };

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore everything
+* 

.vscode/settings.json

@@ -1,3 +1,48 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+
+  // Disable Prettier for this project
+  "prettier.enable": false,
+  "prettier.requireConfig": true,
+
+  // Additional Biome settings
+  "biome.lspBin": "node_modules/@biomejs/biome/bin/biome",
+  "biome.enabled": true,
+
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    "source.fixAll.biome": "explicit"
+  },
+
+  // Disable other formatters/linters to avoid conflicts
+  "eslint.enable": false,
+
+  "workbench.colorCustomizations": {
+    // This project uses Biome for formatting and linting
+  }
 }

README.md

@@ -44,6 +44,18 @@ function App() {
 }
 ```
 
+## Code Formatting
+
+This project uses [Biome](https://biomejs.dev/) for code formatting and linting instead of Prettier and ESLint.
+
+### VS Code Setup
+
+1. Install the [Biome VS Code extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
+2. Disable Prettier for this project (or uninstall the Prettier plugin):
+   - Open VS Code settings (File > Preferences > Settings)
+   - Search for "prettier enable"
+   - Uncheck "Prettier: Enable" or add this project to the exclusion list
+
 ## Component Categories
 
 ### Layout

biome.jsonc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn"
+      },
+      "style": {
+        "useConst": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "asNeeded"
+    }
+  }
+}

package.json

@@ -5,24 +5,34 @@
     "build": "turbo build",
     "build:apsara": "turbo build --filter=@raystack/apsara",
     "dev": "turbo dev --filter=@raystack/apsara",
-    "lint": "turbo lint --filter=@raystack/apsara",
     "clean": "turbo clean --filter=@raystack/apsara",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "ci:build": "turbo build --filter=@raystack/apsara",
-    "ci:release": "turbo release --filter=@raystack/apsara -- --ci --no-increment"
+    "ci:release": "turbo release --filter=@raystack/apsara -- --ci --no-increment",
+    "lint": "biome check .",
+    "format": "biome format . --write"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@parcel/packager-ts": "2.9.2",
     "@parcel/transformer-typescript-types": "2.9.2",
     "@turbo/gen": "^1.9.7",
+    "concurrently": "^9.1.2",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^2.5.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.0",
     "process": "^0.11.10",
     "turbo": "2.3.1",
-    "typescript": "4.7",
-    "concurrently": "^9.1.2"
+    "typescript": "4.7"
   },
   "packageManager": "pnpm@9.3.0",
-  "name": "apsara"
+  "name": "apsara",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json}": ["biome format --write", "biome lint"]
+  }
 }

packages/eslint-config-custom/index.js

@@ -15,3 +15,5 @@ module.exports = {
     },
   },
 };
+
+// TODO: Remove this or convert this to biome based sub project.

packages/raystack/accordion/accordion.module.css

@@ -1,6 +1,6 @@
 .item {
   flex: 1;
-  border-bottom: 1px solidvar(--border-base);
+  border-bottom: 1px solid var(--border-base);
   font-size: 12px;
   letter-spacing: 0.4px;
   margin-left: 24px;
@@ -12,8 +12,6 @@
   display: flex;
   font-size: 12px;
   line-height: 16px;
-
-
 }
 
 .trigger {
@@ -37,13 +35,13 @@
   transition: color 250ms ease-out;
 }
 
-.trigger[data-state='open'] {
+.trigger[data-state="open"] {
   font-weight: 700;
   color: #1e1f36;
   padding-bottom: 12px;
 }
 
-.trigger[data-state='open'] > .svg {
+.trigger[data-state="open"] > .svg {
   transform: rotate(-90deg);
 }
 
@@ -59,18 +57,16 @@
   padding: var(--pd-4) 0;
 }
 
-.content[data-state='open'] {
+.content[data-state="open"] {
   animation: slideDown 350ms ease-out;
   margin: 16px 0;
   letter-spacing: 0.4px;
 }
 
-.content[data-state='closed'] {
+.content[data-state="closed"] {
   animation: slideUp 350ms ease-out;
 }
 
-
-
 @keyframes slideDown {
   from {
     height: 0;
@@ -98,4 +94,4 @@
 
     width: 400px;
   }
-}
+}