Create shared UI library - @workspace/ui (#7855)

created a @workspace/ui package - shared by dashboard and playground. for now it only has button component for testing

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `postcss` and `tailwind` configurations across multiple applications to centralize styles in the `@workspace/ui` package, along with various updates to components and layouts.

### Detailed summary
- Deleted `postcss.config.js` files and replaced them with `postcss.config.mjs` referencing `@workspace/ui`.
- Updated CSS imports to use `@workspace/ui/global.css`.
- Added `tailwindcss` configuration in `@workspace/ui` and updated references.
- Introduced new utility functions in `packages/ui/src/lib/utils.ts`.
- Modified component imports to utilize centralized components from `@workspace/ui`.
- Updated `package.json` files to include `@workspace/ui` as a dependency.
- Refactored button components to use a centralized button definition in `@workspace/ui`.
- Adjusted TypeScript configurations to align with the new structure.
- Enhanced global styles and configurations across multiple applications to ensure consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Added a shared UI package and unified Button component used across apps.

- Style
  - Apps now load shared global styles and animations from the UI package; global CSS and theme tokens consolidated.

- Bug Fixes
  - AI chat header uses a safe fallback when the client ID is missing.

- Refactor
  - Replaced local UI implementations with shared re-exports and composed Tailwind configs.

- Chores
  - Added UI package dependencies, PostCSS delegation, and enabled Next.js transpilation for the UI package; lint/scan ignore lists updated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/knip.json

@@ -10,8 +10,11 @@
   "ignoreDependencies": [
     "@thirdweb-dev/service-utils",
     "@thirdweb-dev/vault-sdk",
+    "thirdweb",
     "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "@workspace/ui",
+    "tailwindcss-animate"
   ],
   "next": true,
   "project": ["src/**"]

apps/dashboard/next.config.ts

@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
 
 const baseNextConfig: NextConfig = {
+  transpilePackages: ["@workspace/ui"],
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -196,7 +197,6 @@ const baseNextConfig: NextConfig = {
       ]),
     ];
   },
-  serverExternalPackages: ["pino-pretty"],
 };
 
 function getConfig(): NextConfig {

apps/dashboard/package.json

@@ -28,6 +28,7 @@
     "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
     "abitype": "1.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/dashboard/postcss.config.js

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

apps/dashboard/postcss.config.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+import type { ThirdwebClient } from "thirdweb";
 import { analyticsServerProxy } from "@/actions/proxies";
 import {
   type SponsoredTransaction,

apps/dashboard/src/@/components/sponsored-transactions-table/SponsoredTransactionsTable.tsx

@@ -1,83 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
-        lg: "h-11 rounded-md px-8",
-        sm: "h-9 rounded-md px-3",
-      },
-      variant: {
-        default: "bg-foreground text-background hover:bg-foreground/90",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
-        secondary:
-          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
-        upsell:
-          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
-      },
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-
-    // "button" elements automatically handle the `disabled` attribute.
-    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
-    // to visually convey the disabled state and prevent user interaction.
-    // We do that by conditionally adding the same utility classes that the
-    // `disabled:` pseudo-variant would normally apply and by setting
-    // `aria-disabled` for accessibility.
-    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
-
-    const btnOnlyProps =
-      Comp === "button"
-        ? {
-            type:
-              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
-              ("button" as const),
-          }
-        : undefined;
-
-    return (
-      <Comp
-        aria-disabled={disabled ? true : undefined}
-        className={cn(
-          buttonVariants({ className, size, variant }),
-          disabledClass,
-        )}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-        {...btnOnlyProps}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+"use client";
+export type { ButtonProps } from "@workspace/ui/components/button";
+export { Button, buttonVariants } from "@workspace/ui/components/button";

apps/dashboard/src/@/components/ui/button.tsx

@@ -1,5 +1,4 @@
-// FIXME: export listing status type
-import type { ListingStatus } from "thirdweb/dist/types/extensions/marketplace/types";
+import type { ListingStatus } from "thirdweb/extensions/marketplace";
 
 export const LISTING_STATUS: Record<ListingStatus, string> = {
   ACTIVE: "Active",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/types.ts

@@ -5,13 +5,12 @@ import {
   toUnits,
 } from "thirdweb";
 import { getContract } from "thirdweb/contract";
-import type { OverrideEntry } from "thirdweb/dist/types/utils/extensions/drops/types";
-import type { Prettify } from "thirdweb/dist/types/utils/type-utils";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { download } from "thirdweb/storage";
+import type { OverrideEntry } from "thirdweb/utils";
 import { maxUint256 } from "thirdweb/utils";
 import type { z } from "zod";
 import type {
@@ -26,20 +25,15 @@ type SnapshotEntry = {
   currencyAddress?: string | undefined;
 };
 
-type CombinedClaimCondition = Prettify<
-  Omit<
-    LegacyClaimCondition,
-    "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
-  > & {
-    price: bigint;
-    currencyMetadata: Omit<
-      LegacyClaimCondition["currencyMetadata"],
-      "value"
-    > & {
-      value: bigint;
-    };
-  }
->;
+type CombinedClaimCondition = Omit<
+  LegacyClaimCondition,
+  "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
+> & {
+  price: bigint;
+  currencyMetadata: Omit<LegacyClaimCondition["currencyMetadata"], "value"> & {
+    value: bigint;
+  };
+};
 
 type Options =
   | {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/hooks.ts

@@ -1,4 +1,4 @@
-import "../../global.css";
+import "@workspace/ui/global.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";