feat: reexport shadcn components and theme

chore: fixup

Author: MarioCadenas

apps/dev-playground/client/package-lock.json

@@ -25,7 +25,8 @@
     "react-dom": "^19.1.1",
     "recharts": "^3.4.1",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
@@ -41,7 +42,8 @@
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
     "shiki": "^3.15.0",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
     "vite": "npm:[email protected]"

apps/dev-playground/client/package.json

@@ -1,10 +1,6 @@
-import path from "node:path";
-
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
-
 export default {
   plugins: {
-    tailwindcss: { config: path.resolve(__dirname, "./tailwind.config.ts") },
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
 };

apps/dev-playground/client/postcss.config.js

@@ -3,7 +3,7 @@ import "@databricks/app-kit-ui/react";
 
 declare module "@databricks/app-kit-ui/react" {
   interface PluginRegistry {
-    reconnect: {
+    "reconnect": {
       "/": {
           message: string;
       };
@@ -15,7 +15,7 @@ declare module "@databricks/app-kit-ui/react" {
           content: string;
       };
     }
-    analytics: {
+    "analytics": {
       "/users/me/query/:query_key": {
           chunk_index: number;
           row_offset: number;
@@ -32,6 +32,7 @@ declare module "@databricks/app-kit-ui/react" {
   }
 
   interface QueryRegistry {
+
     apps_list: {
         id: string;
         name: string;
@@ -61,5 +62,4 @@ declare module "@databricks/app-kit-ui/react" {
         total_cost_usd: number;
     }[];
   }
-
 }

apps/dev-playground/client/src/appKitTypes.d.ts

@@ -2,14 +2,14 @@ import { DatabricksLogo } from "./databricks-logo";
 
 export function AnalyticsHeader() {
   return (
-    <header className="bg-white border-b border-gray-200 p-4">
+    <header className="bg-background border-b border-gray-200 p-4">
       <div className="max-w-7xl mx-auto flex items-center justify-between">
         <div className="flex items-center gap-4 items-center">
           <DatabricksLogo />
-          <p className="leading-7">Apps Cost Insights</p>
+          <p className="leading-7 text-foreground">Apps Cost Insights</p>
         </div>
-        <div className="w-8 h-8 bg-databricks-red rounded-full flex items-center justify-center">
-          <span className="text-white text-sm font-medium">S</span>
+        <div className="w-8 h-8 bg-destructive rounded-full flex items-center justify-center">
+          <span className="text-foreground text-sm font-medium">S</span>
         </div>
       </div>
     </header>

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

@@ -1,12 +1,13 @@
-import { Card, CardContent } from "@/components/ui/card";
+import type { Aggregation, DashboardFilters } from "@/lib/types";
 import {
+  Card,
+  CardContent,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import type { Aggregation, DashboardFilters } from "@/lib/types";
+} from "@databricks/app-kit-ui/react";
 
 interface FilterBarProps {
   filters: DashboardFilters;

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

@@ -3,8 +3,8 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+  Skeleton,
+} from "@databricks/app-kit-ui/react";
 import type { Aggregation, DashboardFilters } from "@/lib/types";
 
 interface SummaryCardsProps {

apps/dev-playground/client/src/components/analytics/summary-cards.tsx

@@ -1,12 +1,15 @@
-import { BarChart } from "@databricks/app-kit-ui/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
+  BarChart,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@databricks/app-kit-ui/react";
 
 interface TopContributorsChartProps {
   groupBy: "app" | "user";

apps/dev-playground/client/src/components/analytics/top-contributors-chart.tsx

@@ -5,7 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@databricks/app-kit-ui/react";
 
 interface UntaggedApp {
   id: string;

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

@@ -1,12 +1,15 @@
 import { BarChart } from "@databricks/app-kit-ui/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@databricks/app-kit-ui/react";
 
 interface UsageTrendsChartProps {
   groupBy: "default" | "app" | "user";