chore: setup import ordering with Biome

.github/workflows/ci.yml

@@ -50,10 +50,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - name: Run Lint
-        run: pnpm run lint
-      - name: Run Format Check
-        run: pnpm run format:check
+      - name: Run Biome Check
+        run: pnpm run check
       - name: Run Types Check
         run: pnpm run typecheck
       - name: Run License Check
@@ -98,10 +96,8 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Build Docs
         run: pnpm run docs:build
-      - name: Lint Generated Docs
-        run: pnpm run docs:lint
-      - name: Format Generated Docs
-        run: pnpm run docs:format
+      - name: Check Generated Docs
+        run: pnpm run docs:check
       - name: Check for uncommitted docs changes
         run: |
           if ! git diff --exit-code docs/docs/api/; then
@@ -112,7 +108,7 @@ jobs:
             echo ""
             echo "To fix this:"
             echo "  1. Run: pnpm docs:build"
-            echo "  2. Run: pnpm docs:format"
+            echo "  2. Run: pnpm docs:check:fix"
             echo "  3. Review and commit the changes"
             echo ""
             exit 1

apps/clean-app/eslint.config.js

@@ -1,9 +1,9 @@
 import js from "@eslint/js";
-import globals from "globals";
+import { defineConfig, globalIgnores } from "eslint/config";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),

apps/clean-app/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({

apps/dev-playground/client/src/components/analytics/filter-bar.tsx

@@ -1,4 +1,3 @@
-import type { Aggregation, DashboardFilters } from "@/lib/types";
 import {
   Card,
   CardContent,
@@ -8,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@databricks/appkit-ui/react";
+import type { Aggregation, DashboardFilters } from "@/lib/types";
 
 interface FilterBarProps {
   filters: DashboardFilters;

apps/dev-playground/client/src/components/analytics/untagged-apps-table.tsx

@@ -1,11 +1,11 @@
-import { AppsDataTable } from "@/components/apps-data-table";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "@databricks/appkit-ui/react";
+import { AppsDataTable } from "@/components/apps-data-table";
 
 interface UntaggedApp {
   id: string;

apps/dev-playground/client/src/components/analytics/usage-trends-chart.tsx

@@ -1,6 +1,6 @@
 import { sql } from "@databricks/appkit-ui/js";
-import { BarChart } from "@databricks/appkit-ui/react";
 import {
+  BarChart,
   Card,
   CardContent,
   CardHeader,

apps/dev-playground/client/src/components/error-component.tsx

@@ -1,11 +1,11 @@
-import { type ErrorComponentProps, Link } from "@tanstack/react-router";
 import {
   Button,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@databricks/appkit-ui/react";
+import { type ErrorComponentProps, Link } from "@tanstack/react-router";
 
 export function ErrorComponent({ error }: { error: ErrorComponentProps }) {
   return (

apps/dev-playground/client/src/components/layout/header.tsx

@@ -1,9 +1,9 @@
-import { InfoIcon } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@databricks/appkit-ui/react";
+import { InfoIcon } from "lucide-react";
 
 export function Header({
   title,

apps/dev-playground/client/src/components/reconnect/page-header.tsx

@@ -1,9 +1,9 @@
-import { InfoIcon } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@databricks/appkit-ui/react";
+import { InfoIcon } from "lucide-react";
 
 export function PageHeader() {
   return (

apps/dev-playground/client/src/components/theme-selector.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
-import { MoonIcon, SunIcon, MonitorIcon } from "lucide-react";
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@databricks/appkit-ui/react";
-import { Button } from "@databricks/appkit-ui/react";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 
 type Theme = "light" | "dark" | "system";
 

apps/dev-playground/client/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { Button, TooltipProvider } from "@databricks/appkit-ui/react";
 import {
   CatchBoundary,
   createRootRoute,
@@ -6,7 +7,6 @@ import {
   useLocation,
 } from "@tanstack/react-router";
 import { ErrorComponent } from "@/components/error-component";
-import { Button, TooltipProvider } from "@databricks/appkit-ui/react";
 import { ThemeSelector } from "@/components/theme-selector";
 
 export const Route = createRootRoute({

apps/dev-playground/client/src/routes/arrow-analytics.route.tsx

@@ -1,4 +1,3 @@
-import { AnalyticsHeader } from "@/components/analytics";
 import { sql } from "@databricks/appkit-ui/js";
 import {
   AreaChart,
@@ -14,6 +13,7 @@ import {
   PieChart,
 } from "@databricks/appkit-ui/react";
 import { createFileRoute, retainSearchParams } from "@tanstack/react-router";
+import { AnalyticsHeader } from "@/components/analytics";
 
 export const Route = createFileRoute("/arrow-analytics")({
   component: ArrowAnalyticsRoute,

apps/dev-playground/client/src/routes/data-visualization.route.tsx

@@ -1,4 +1,3 @@
-import { Header } from "@/components/layout/header";
 import { sql } from "@databricks/appkit-ui/js";
 import {
   AreaChart,
@@ -17,6 +16,7 @@ import {
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { codeToHtml } from "shiki";
+import { Header } from "@/components/layout/header";
 
 export const Route = createFileRoute("/data-visualization")({
   component: DataVisualizationRoute,

apps/dev-playground/client/src/routes/index.tsx

@@ -1,9 +1,9 @@
+import { Button, Card } from "@databricks/appkit-ui/react";
 import {
   createFileRoute,
   retainSearchParams,
   useNavigate,
 } from "@tanstack/react-router";
-import { Button, Card } from "@databricks/appkit-ui/react";
 import { ThemeSelector } from "@/components/theme-selector";
 
 export const Route = createFileRoute("/")({

apps/dev-playground/client/src/routes/sql-helpers.route.tsx

@@ -1,13 +1,13 @@
 import { sql } from "@databricks/appkit-ui/js";
 import {
-  useAnalyticsQuery,
   Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
   Input,
+  useAnalyticsQuery,
 } from "@databricks/appkit-ui/react";
 import { createFileRoute, retainSearchParams } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";

apps/dev-playground/client/src/routes/telemetry.route.tsx

@@ -1,7 +1,7 @@
-import { createFileRoute, retainSearchParams } from "@tanstack/react-router";
 import { Button, Card } from "@databricks/appkit-ui/react";
-import { useState } from "react";
+import { createFileRoute, retainSearchParams } from "@tanstack/react-router";
 import { Activity, Loader2 } from "lucide-react";
+import { useState } from "react";
 
 export const Route = createFileRoute("/telemetry")({
   component: TelemetryRoute,

apps/dev-playground/server/telemetry-example-plugin.ts

@@ -3,15 +3,15 @@
  */
 
 import {
-  Plugin,
-  toPlugin,
   type BasePluginConfig,
   CacheManager,
-  SpanStatusCode,
-  type Span,
   type Counter,
   type Histogram,
+  Plugin,
   SeverityNumber,
+  type Span,
+  SpanStatusCode,
+  toPlugin,
 } from "@databricks/appkit";
 import type { Request, Response, Router } from "express";
 

docs/docusaurus.config.ts

@@ -1,9 +1,9 @@
-import { themes as prismThemes } from "prism-react-renderer";
 import path from "node:path";
-import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
-import webpack from "webpack";
+import type { Config } from "@docusaurus/types";
 import type { PluginOptions } from "@signalwire/docusaurus-plugin-llms-txt/public";
+import { themes as prismThemes } from "prism-react-renderer";
+import webpack from "webpack";
 
 function appKitAliasPlugin() {
   return {

docs/scripts/build-appkit-ui-styles.ts

@@ -1,8 +1,8 @@
-import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import postcss from "postcss";
 import tailwindcss from "@tailwindcss/postcss";
+import postcss from "postcss";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 

docs/src/components/DocExample/IframePreview.tsx

@@ -1,7 +1,7 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import type React from "react";
-import { useEffect, useRef, useState, type RefObject } from "react";
+import { type RefObject, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 import { Toaster } from "sonner";
 import { PortalContainerProvider } from "../../../../packages/appkit-ui/src/react/portal-container-context";
 

docs/src/components/DocExample/index.tsx

@@ -1,5 +1,5 @@
 import CodeBlock from "@theme/CodeBlock";
-import { examples, type AppKitExampleKey } from "./examples.gen";
+import { type AppKitExampleKey, examples } from "./examples.gen";
 import { IframePreview } from "./IframePreview";
 
 interface DocExampleProps {

docs/src/components/HomepageFeatures/index.tsx

@@ -1,11 +1,11 @@
-import type { ReactNode } from "react";
-import clsx from "clsx";
 import Heading from "@theme/Heading";
-import styles from "./styles.module.css";
-import LayersIcon from "./icons/layers.svg";
+import clsx from "clsx";
+import type { ReactNode } from "react";
 import CodeIcon from "./icons/code.svg";
-import SparklesIcon from "./icons/sparkles.svg";
+import LayersIcon from "./icons/layers.svg";
 import PuzzleIcon from "./icons/puzzle.svg";
+import SparklesIcon from "./icons/sparkles.svg";
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;

docs/src/pages/index.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import type { ReactNode } from "react";
 
 import styles from "./index.module.css";
 

package.json

@@ -20,8 +20,10 @@
     "docs:build": "pnpm --filter=docs build",
     "docs:serve": "pnpm --filter=docs serve",
     "docs:clean": "pnpm --filter=docs clean",
-    "docs:format": "biome format --write docs/",
-    "docs:lint": "biome lint --write docs/",
+    "docs:check:fix": "biome check --write docs/",
+    "docs:check": "biome check docs/",
+    "docs:format": "biome format docs/",
+    "docs:lint": "biome lint docs/",
     "format:check": "biome format .",
     "format": "biome format --write .",
     "lint:fix": "biome lint --write .",
@@ -39,8 +41,7 @@
   },
   "lint-staged": {
     "(*.ts|*.tsx|*.js|*.jsx|*.json|*.md|*.yml|*.yaml|*.css)": [
-      "biome lint --write .",
-      "biome format --write ."
+      "biome check --write --no-errors-on-unmatched"
     ]
   },
   "devDependencies": {

packages/appkit-ui/src/js/arrow/arrow-client.ts

@@ -6,9 +6,9 @@ import {
 } from "../constants";
 import {
   getArrowModule,
-  initializeTypeIdSets,
-  getTypeIdSets,
   getDecimalTypeId,
+  getTypeIdSets,
+  initializeTypeIdSets,
 } from "./lazy-arrow";
 
 // Re-export for backward compatibility

packages/appkit-ui/src/js/arrow/lazy-arrow.ts

@@ -7,7 +7,7 @@
  * loaded once, even if multiple components request it simultaneously.
  */
 
-import type { Table, Field } from "apache-arrow";
+import type { Field, Table } from "apache-arrow";
 
 // Re-export types for convenience (types don't add to bundle size)
 export type { Table, Field };

packages/appkit-ui/src/react/charts/index.ts

@@ -18,9 +18,9 @@ export { ScatterChart } from "./scatter";
 // ============================================================================
 
 export {
-  useChartData,
   type UseChartDataOptions,
   type UseChartDataResult,
+  useChartData,
 } from "../hooks/use-chart-data";
 export { BaseChart, type BaseChartProps } from "./base";
 export { createChart } from "./create-chart";
@@ -31,9 +31,9 @@ export { ChartWrapper, type ChartWrapperProps } from "./wrapper";
 // ============================================================================
 
 export {
+  type NormalizedHeatmapData,
   normalizeChartData,
   normalizeHeatmapData,
-  type NormalizedHeatmapData,
 } from "./normalize";
 
 // ============================================================================
@@ -48,13 +48,13 @@ export {
   CHART_COLOR_VARS_SEQUENTIAL,
   // Field detection patterns
   DATE_FIELD_PATTERNS,
-  METADATA_DATE_PATTERNS,
-  NAME_FIELD_PATTERNS,
   // Fallback colors
   FALLBACK_COLORS,
   FALLBACK_COLORS_CATEGORICAL,
   FALLBACK_COLORS_DIVERGING,
   FALLBACK_COLORS_SEQUENTIAL,
+  METADATA_DATE_PATTERNS,
+  NAME_FIELD_PATTERNS,
 } from "./constants";
 
 // ============================================================================

packages/appkit-ui/src/react/charts/normalize.ts

@@ -1,5 +1,5 @@
-import { ArrowClient } from "@/js";
 import type { Table } from "apache-arrow";
+import { ArrowClient } from "@/js";
 import { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS } from "./constants";
 import type {
   ChartData,