frappe · safwansamsudeen · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -1,4 +1,6 @@
 # Ran prettier on source
 # after adding tailwind plugin
 54563d9deba9d95c1212c1be2217ce8fa181162b
-8e07a190aff0eba2a3e072f9857a654dca6fa0e1
+8e07a190aff0eba2a3e072f9857a654dca6fa0e1
+72f8c1b0735361a80910e196a60dd705f5b2145e
+c0f9e8108e4e7c29b44c0ef0b7faf2e3711f93ca
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
@@ -0,0 +1,22 @@
+name: Format Check
+
+on:
+  pull_request:
+    push:
+      branches: [main]
+
+jobs:
+  oxfmt:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: yarn install --frozen-lockfile
+
+      - name: Check formatting
+        run: yarn format:check
diff --git a/.husky/.gitignore b/.husky/.gitignore
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "quoteProps": "consistent",
+  "objectWrap": "preserve",
+  "sortImports": {
+    "newlinesBetween": true,
+    "groups": [["builtin"], "external", ["parent", "sibling", "index"], "unknown"]
+  },
+  "sortTailwindcss": true,
+  "ignorePatterns": ["node_modules/**", "dist/**"]
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "env": {
+    "builtin": true
+  },
+  "rules": {
+    "no-empty": ["warn", { "allowEmptyCatch": true }],
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-null": "off",
+    "typescript/no-explicit-any": "warn",
+    "typescript/consistent-type-imports": ["warn", { "prefer": "type-imports" }]
+  },
+  // Relax rules that are overly strict in test code:
+  //  - no-shadow: callback params like (q) => and (doc) => shadow outer imports — unavoidable
+  //  - no-explicit-any: catch (e: any) and controller hook stubs legitimately need any
+  //  - consistent-function-scoping: helper closures inside describe blocks are fine
+  "overrides": [
+    {
+      "files": ["tests/**/*.ts"],
+      "rules": {
+        "no-shadow": "off",
+        "typescript/no-explicit-any": "off",
+        "unicorn/consistent-function-scoping": "off"
+      }
+    }
+  ],
+  "ignorePatterns": ["node_modules", "dist"]
+}
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/404.html b/404.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="refresh" content="0; url=./index.html">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; url=./index.html" />
     <script>
-        // JavaScript redirect as a fallback
-        const path = window.location.pathname;
-        window.location.href = `/?route=${path}`;
+      // JavaScript redirect as a fallback
+      const path = window.location.pathname
+      window.location.href = `/?route=${path}`
     </script>
-</head>
-<body>
-</body>
-</html>
+  </head>
+  <body></body>
+</html>
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -5,6 +5,4 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {
-
-}
+declare global {}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -16,7 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 import './setup'
-
 import { mount } from 'cypress/vue'
 
 // Augment the Cypress namespace to include type definitions for

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,11 +1,13 @@
+import fs from 'fs'
+import path from 'path'
+
+import { transformerStyleToClass } from '@shikijs/transformers'
 import { defineConfig } from 'vitepress'
+
 import { lucideIcons } from '../../vite/lucideIcons'
-import path from 'path'
 import { meta } from './meta'
-import { getComponentItems } from './utils'
-import { transformerStyleToClass } from '@shikijs/transformers'
 import componentTransformer from './plugins/componentTransformer'
-import fs from 'fs'
+import { getComponentItems } from './utils'
 
 // needed for transforming shiki inline styles to classes
 const toClass = transformerStyleToClass({
@@ -32,10 +34,7 @@ export default defineConfig({
   head: [
     // newsreader font
     ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
-    [
-      'link',
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-    ],
+    ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
     [
       'link',
       {
@@ -92,9 +91,7 @@ export default defineConfig({
       { text: 'Blog', link: '/blog' },
     ],
     // sidebar: sidebarConfig,
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/frappe/frappe-ui' },
-    ],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/frappe/frappe-ui' }],
   },
   vite: {
     plugins: [lucideIcons()],

diff --git a/docs/.vitepress/meta.ts b/docs/.vitepress/meta.ts
@@ -1,5 +1,5 @@
 export const meta = {
-	name: 'Frappe UI',
-	github: 'https://github.com/frappe/frappe-ui',
-	description: 'An UI component library based on the Frappe design system ',
+  name: 'Frappe UI',
+  github: 'https://github.com/frappe/frappe-ui',
+  description: 'An UI component library based on the Frappe design system ',
 }
diff --git a/docs/.vitepress/plugins/componentTransformer.ts b/docs/.vitepress/plugins/componentTransformer.ts
@@ -1,6 +1,7 @@
-import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
 import { dirname, resolve } from 'node:path'
 
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
+
 export default function (md: MarkdownRenderer) {
   md.core.ruler.after('inline', 'component-preview', (state) => {
     const previewRegex =
@@ -22,9 +23,10 @@ export default function (md: MarkdownRenderer) {
         token.content = `<script setup>\n${importStr}\n</script>\n`
         state.tokens.unshift(token)
       } else {
-        state.tokens[scriptIdx].content = state.tokens[
-          scriptIdx
-        ].content.replace('</script>', `${importStr}\n</script>`)
+        state.tokens[scriptIdx].content = state.tokens[scriptIdx].content.replace(
+          '</script>',
+          `${importStr}\n</script>`,
+        )
       }
 
       const idx = state.tokens.findIndex((i) => i.content.match(previewRegex))
@@ -48,8 +50,7 @@ export default function (md: MarkdownRenderer) {
     })
 
     // Handle PropsTable
-    const propsRegex =
-      /<PropsTable\s+name=["']([^"']+)["']\s+:data='([^']+)'\/>/g
+    const propsRegex = /<PropsTable\s+name=["']([^"']+)["']\s+:data='([^']+)'\/>/g
 
     state.src = state.src.replace(propsRegex, (match, name, data) => {
       const typesPath = `../../../../src/components/${name}/types.ts`
@@ -58,8 +59,7 @@ export default function (md: MarkdownRenderer) {
       if (idx !== -1) {
         const { realPath, path: _path } = state.env as MarkdownEnv
 
-        state.tokens[idx].content =
-          `<PropsTable name="${name}" :data='${data}'><template #code>`
+        state.tokens[idx].content = `<PropsTable name="${name}" :data='${data}'><template #code>`
 
         const code = new state.Token('fence', 'code', 0)
         code.info = 'typescript'

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,8 @@
 import type { Theme } from 'vitepress'
-import "../../../src/fonts/Inter/inter.css"
-import "../../css/style.css"
-import "../../css/shiki.css"
+
+import '../../../src/fonts/Inter/inter.css'
+import '../../css/style.css'
+import '../../css/shiki.css'
 import Demo from '../../components/Docs/Demo.vue'
 import Layout from '../../components/Layout.vue'
 
@@ -10,7 +11,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 export default {
-	Layout,
+  Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
   },

diff --git a/docs/components/Docs/Demo.vue b/docs/components/Docs/Demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Tabs } from 'frappe-ui'
-import LucidePreview from '~icons/lucide/square-mouse-pointer'
+import { ref } from 'vue'
 import LucideCode from '~icons/lucide/code'
+import LucidePreview from '~icons/lucide/square-mouse-pointer'
 
 interface ComponentPreviewProps {
   name: string
@@ -19,12 +19,19 @@ const tabs = [
 </script>
 
 <template>
-  <div class="grid gap-5 not-prose">
-    <Tabs :tabs="tabs" v-model="state" class="[&>[role=tablist]]:border-0 [&>[role=tablist]]:gap-4 [&>[role=tablist]]:px-0">
+  <div class="not-prose grid gap-5">
+    <Tabs
+      :tabs="tabs"
+      v-model="state"
+      class="[&>[role=tablist]]:gap-4 [&>[role=tablist]]:border-0 [&>[role=tablist]]:px-0"
+    >
       <template #tab-panel="{ tab }">
         <div
           v-if="tab.label === 'Preview'"
-          :class='["border border-outline-gray-2 p-5 rounded overflow-auto scrollbar mt-3 flex gap-3 items-center", css]'
+          :class="[
+            'scrollbar mt-3 flex items-center gap-3 overflow-auto rounded border border-outline-gray-2 p-5',
+            css,
+          ]"
         >
           <slot />
         </div>

diff --git a/docs/components/Docs/EmitsTable.vue b/docs/components/Docs/EmitsTable.vue
@@ -15,16 +15,14 @@ defineProps<Props>()
 </script>
 
 <template>
-  <table class="overflow-auto scrollbar not-prose w-full">
+  <table class="scrollbar not-prose w-full overflow-auto">
     <colgroup>
       <col class="w-[50%]" />
       <col class="w-[50%]" />
     </colgroup>
 
-    <tbody
-      class="[&_td]:px-3 [&_th]:px-3 [&_td]:p-2 [&_th]:p-2 [&_td]:align-top"
-    >
-      <tr class="text-left *:bg-surface-gray-2 text-ink-gray-6 *:font-semibold">
+    <tbody class="[&_td]:p-2 [&_td]:px-3 [&_td]:align-top [&_th]:p-2 [&_th]:px-3">
+      <tr class="text-left text-ink-gray-6 *:bg-surface-gray-2 *:font-semibold">
         <th class="rounded-l">Event</th>
         <th class="rounded-r">Payload</th>
       </tr>
@@ -36,12 +34,12 @@ defineProps<Props>()
           </Badge>
         </td>
 
-        <td class="flex flex-wrap h-fit gap-2">
+        <td class="flex h-fit flex-wrap gap-2">
           <span class="text-sm font-semibold">
             {{ x.type }}
           </span>
 
-          <p class="text-sm text-ink-gray-5 leading-relaxed w-full">
+          <p class="w-full text-sm leading-relaxed text-ink-gray-5">
             {{ x.description }}
           </p>
         </td>
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ @@
     //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
     //     }
     //   }
-    // }
+    // }