TypeScript 7, oxlint and oxfmt

.github/pull_request_template.md

@@ -63,8 +63,8 @@ Closes #<!-- issue number -->
 ## Code quality checklist
 
 - [ ] **Code style**: Follows project conventions
-- [ ] **ESLint**: No linting errors
-- [ ] **Prettier**: Code is properly formatted
+- [ ] **Oxlint**: No linting errors
+- [ ] **Oxfmt**: Code is properly formatted
 - [ ] **TypeScript**: Full type coverage
 - [ ] **Imports**: Uses correct import paths (`@/components/...`)
 - [ ] **Performance**: No unnecessary re-renders or heavy computations

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ concurrency:
 
 jobs:
     check:
-        name: "type-check, lint, prettier"
+        name: "type-check, lint, format"
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
@@ -24,8 +24,8 @@ jobs:
             - name: Install dependencies
               run: bun install --frozen-lockfile
 
-            # tsc (with the Vite template's unused-code checks), eslint with the rules
-            # create-next-app enables, and prettier. Components are copied into users'
+            # tsc (with the Vite template's unused-code checks), oxlint with the rules
+            # create-next-app's ESLint config enables, and oxfmt. Components are copied into users'
             # projects, so anything this catches would otherwise land there.
             - name: Check
               run: bun run test

.oxfmtrc.json

@@ -0,0 +1,34 @@
+{
+    "printWidth": 160,
+    "tabWidth": 4,
+    "sortPackageJson": false,
+    "sortTailwindcss": {
+        "stylesheet": "./styles/globals.css",
+        "functions": ["sortCx", "cx"]
+    },
+    "ignorePatterns": ["package.json"],
+    "sortImports": {
+        "newlinesBetween": false,
+        "customGroups": [
+            {
+                "groupName": "react",
+                "elementNamePattern": ["react"]
+            },
+            {
+                "groupName": "react-dom",
+                "elementNamePattern": ["react-dom"]
+            },
+            {
+                "groupName": "alias",
+                "elementNamePattern": ["@/**"]
+            }
+        ],
+        "groups": [
+            "react",
+            "react-dom",
+            ["builtin", "external", "type-external", "unknown"],
+            "alias",
+            ["parent", "sibling", "index", "type-parent", "type-sibling", "type-index"]
+        ]
+    }
+}

.oxlintrc.json

@@ -0,0 +1,124 @@
+{
+    "$schema": "./node_modules/oxlint/configuration_schema.json",
+    "plugins": [],
+    "categories": {
+        "correctness": "off"
+    },
+    "env": {
+        "builtin": true
+    },
+    "ignorePatterns": ["node_modules/*", "storybook-addon-pixel-perfect/dist"],
+    "overrides": [
+        {
+            "files": ["**/*.{js,jsx,ts,tsx}"],
+            "rules": {
+                "react/display-name": "off",
+                "react/jsx-key": "warn",
+                "react/jsx-no-comment-textnodes": "error",
+                "react/jsx-no-duplicate-props": "error",
+                "react/jsx-no-target-blank": "error",
+                "react/jsx-no-undef": "error",
+                "react/no-children-prop": "error",
+                "react/no-danger-with-children": "error",
+                "react/no-direct-mutation-state": "error",
+                "react/no-find-dom-node": "error",
+                "react/no-is-mounted": "error",
+                "react/no-render-return-value": "error",
+                "react/no-string-refs": "error",
+                "react/no-unescaped-entities": "off",
+                "react/no-unknown-property": [
+                    "error",
+                    {
+                        "ignore": ["fill"]
+                    }
+                ],
+                "react/no-unsafe": "off",
+                "react/react-in-jsx-scope": "off",
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        "patterns": [
+                            {
+                                "group": ["@react-types/*"],
+                                "message": "Import types from react-aria or react-aria-components instead; @react-types/* is not a declared dependency."
+                            },
+                            {
+                                "group": ["@storybook/nextjs", "@storybook/nextjs/*", "@storybook/react", "@storybook/react/*"],
+                                "message": "Import from @storybook/nextjs-vite instead; it is the declared Storybook framework package."
+                            }
+                        ]
+                    }
+                ],
+                "prefer-const": "error",
+                "no-unused-vars": [
+                    "error",
+                    {
+                        "argsIgnorePattern": "^_",
+                        "varsIgnorePattern": "^_"
+                    }
+                ],
+                "no-redeclare": "warn",
+                "jsx-a11y/alt-text": "error",
+                "nextjs/no-img-element": "off",
+                "nextjs/no-html-link-for-pages": "off",
+                "react/rules-of-hooks": "error",
+                "react/exhaustive-deps": "warn",
+                "react/static-components": "error",
+                "react/use-memo": "error",
+                "react/void-use-memo": "error",
+                "react/preserve-manual-memoization": "error",
+                "react/incompatible-library": "warn",
+                "react/immutability": "error",
+                "react/globals": "error",
+                "react/refs": "error",
+                "react/set-state-in-effect": "error",
+                "react/error-boundaries": "error",
+                "react/purity": "error",
+                "react/set-state-in-render": "error",
+                "react/unsupported-syntax": "warn",
+                "typescript/no-explicit-any": "error",
+                "typescript/no-empty-object-type": "error",
+                "typescript/consistent-type-imports": [
+                    "error",
+                    {
+                        "prefer": "type-imports",
+                        "fixStyle": "separate-type-imports",
+                        "disallowTypeAnnotations": true
+                    }
+                ]
+            },
+            "plugins": ["react", "typescript", "nextjs", "jsx-a11y"]
+        },
+        {
+            "files": ["**/*.stories.{ts,tsx,js,jsx,mjs,cjs}", "**/*.story.{ts,tsx,js,jsx,mjs,cjs}"],
+            "rules": {
+                "storybook/await-interactions": "error",
+                "storybook/context-in-play-function": "error",
+                "storybook/default-exports": "error",
+                "storybook/hierarchy-separator": "warn",
+                "storybook/no-redundant-story-name": "warn",
+                "storybook/no-renderer-packages": "error",
+                "storybook/prefer-pascal-case": "warn",
+                "storybook/story-exports": "error",
+                "storybook/use-storybook-expect": "error",
+                "storybook/use-storybook-testing-library": "error",
+                "import/no-anonymous-default-export": "off",
+                "react/rules-of-hooks": "off"
+            },
+            "jsPlugins": ["eslint-plugin-storybook"],
+            "plugins": ["react", "import"]
+        },
+        {
+            "files": [".storybook/main.{js,cjs,mjs,ts}"],
+            "rules": {
+                "storybook/no-uninstalled-addons": "error"
+            },
+            "jsPlugins": ["eslint-plugin-storybook"]
+        }
+    ],
+    "settings": {
+        "react": {
+            "version": "19.2"
+        }
+    }
+}

CONTRIBUTING.md

@@ -148,8 +148,8 @@ components/category/component-name/
 
     ```bash
     bun run build      # TypeScript compilation
-    bun run lint       # ESLint checks
-    bun run prettier   # Code formatting
+    bun run lint       # Oxlint checks
+    bun run format     # Code formatting (oxfmt)
     ```
 
 2. **Test in Storybook**
@@ -209,7 +209,7 @@ Closes #123
 - **Performance** - No unnecessary re-renders or heavy computations
 - **API Design** - Consistent with existing components
 - **Documentation** - Clear stories and examples
-- **Code Quality** - TypeScript, ESLint, and Prettier compliant
+- **Code Quality** - TypeScript, Oxlint, and Oxfmt compliant
 
 ## 🎨 Design guidelines
 
@@ -271,7 +271,6 @@ className = "text-[19px] font-[650] leading-[1.4]";
 // ✅ Correct - Use path aliases
 import { Button } from "@/components/base/buttons/button";
 import { cx } from "@/utils/cx";
-
 // ❌ Wrong - Relative imports
 import { Button } from "../../../base/buttons/button";
 import { cx } from "../../../utils/cx";