Replace @punkbit/cui with @clickhouse/click-ui package (#1642)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: elizabetdev <2750668+elizabetdev@users.noreply.github.com>

Author: Copilot

agent_docs/click-ui-migration-notes.md

@@ -1,13 +1,13 @@
 # Click UI Migration Notes
 
-This document tracks issues and limitations encountered when replacing Mantine UI components with Click UI (`@punkbit/cui`) components.
+This document tracks issues and limitations encountered when replacing Mantine UI components with Click UI (`@clickhouse/click-ui`) components.
 
 ## Import Path
 
-Import directly from `@punkbit/cui`:
+Import directly from `@clickhouse/click-ui`:
 
 ```typescript
-import { Button, IconButton, Popover, TextAreaField } from '@punkbit/cui';
+import { Button, IconButton, Popover, TextAreaField } from '@clickhouse/click-ui';
 // Note: Select is NOT migrated - use Mantine Select
 ```
 
@@ -200,7 +200,7 @@ Additionally, `Popover.Trigger` always wraps children in an internal `<div>`, ev
 
 ```typescript
 // ❌ Click UI Select - dropdown doesn't open
-import { Select } from '@punkbit/cui';
+import { Select } from '@clickhouse/click-ui';
 <Select options={[...]} onSelect={...} />
 
 // ✅ Mantine Select - works correctly
@@ -253,5 +253,5 @@ When Click UI releases fixes for these issues, search for these tags to find aff
 
 ## Version Info
 
-- `@punkbit/cui`: `0.0.248-rc.1`
+- `@clickhouse/click-ui`: `0.0.248-rc.1`
 - `styled-components`: `^6.3.5` (installed) - Note: Click UI requests `6.2.1-prerelease.0` but `6.3.5` works

packages/app/package.json

@@ -24,6 +24,7 @@
     "knip": "knip"
   },
   "dependencies": {
+    "@clickhouse/click-ui": "0.0.251-rc.16",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.7.0",
     "@dagrejs/dagre": "^1.1.5",
@@ -40,7 +41,6 @@
     "@mantine/notifications": "^7.17.8",
     "@mantine/spotlight": "^7.17.8",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@punkbit/cui": "0.0.251-rc.16",
     "@tabler/icons-react": "^3.5.0",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",

packages/app/src/AutocompleteInput.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
-import { Popover, TextAreaField } from '@punkbit/cui';
+import { Popover, TextAreaField } from '@clickhouse/click-ui';
 
 import { useQueryHistory } from '@/utils';
 

packages/app/src/DBSearchPage.tsx

@@ -61,7 +61,7 @@ import {
   useDocumentVisibility,
 } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { Button, Select as CUISelect } from '@punkbit/cui';
+import { Button, Select as CUISelect } from '@clickhouse/click-ui';
 import {
   IconBolt,
   IconCirclePlus,

packages/app/src/ThemeWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
-import { ClickUIProvider } from '@punkbit/cui';
+import { ClickUIProvider } from '@clickhouse/click-ui';
 
 import { ClickUIThemeVars } from './theme/ClickUIThemeVars';
 import { makeTheme, theme as defaultTheme } from './theme/mantineTheme';

packages/app/src/components/TimePicker/TimePicker.tsx

@@ -21,7 +21,7 @@ import {
 } from '@mantine/core';
 import { DateInput, DateInputProps } from '@mantine/dates';
 import { useDisclosure } from '@mantine/hooks';
-import { TextField } from '@punkbit/cui';
+import { TextField } from '@clickhouse/click-ui';
 import { IconBolt, IconCalendarFilled } from '@tabler/icons-react';
 
 import { useUserPreferences } from '@/useUserPreferences';

packages/app/src/theme/ClickUIThemeVars.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useCUITheme } from '@punkbit/cui';
+import { useCUITheme } from '@clickhouse/click-ui';
 
 /**
  * Component that injects Click UI theme values as CSS variables.

yarn.lock

@@ -3139,6 +3139,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@clickhouse/click-ui@npm:0.0.251-rc.16":
+  version: 0.0.251-rc.16
+  resolution: "@clickhouse/click-ui@npm:0.0.251-rc.16"
+  dependencies:
+    "@h6s/calendar": "npm:2.0.1"
+    "@radix-ui/react-accordion": "npm:1.2.12"
+    "@radix-ui/react-avatar": "npm:1.1.1"
+    "@radix-ui/react-checkbox": "npm:1.1.2"
+    "@radix-ui/react-context-menu": "npm:2.2.2"
+    "@radix-ui/react-dialog": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-dropdown-menu": "npm:2.1.2"
+    "@radix-ui/react-hover-card": "npm:1.1.2"
+    "@radix-ui/react-popover": "npm:1.1.2"
+    "@radix-ui/react-popper": "npm:1.2.1"
+    "@radix-ui/react-radio-group": "npm:1.2.1"
+    "@radix-ui/react-separator": "npm:1.1.1"
+    "@radix-ui/react-switch": "npm:1.1.1"
+    "@radix-ui/react-tabs": "npm:1.1.1"
+    "@radix-ui/react-toast": "npm:1.2.2"
+    "@radix-ui/react-tooltip": "npm:1.1.2"
+    lodash: "npm:^4.17.21"
+    react-sortablejs: "npm:^6.1.4"
+    react-syntax-highlighter: "npm:^16.1.0"
+    react-virtualized-auto-sizer: "npm:^1.0.20"
+    react-window: "npm:^1.8.9"
+    sortablejs: "npm:^1.15.0"
+    styled-components: "npm:^6.1.11"
+  peerDependencies:
+    dayjs: ^1.11.13
+    react: ^18.3.1 || ^19.0.0
+    react-dom: ^18.3.1 || ^19.0.0
+    styled-components: ^6.1.11
+  checksum: 10c0/d52ba465dc9adb60ccc18fc893be8dbd3f420ea1826eb03177c2091a69cae0fc480d8019129230828883f824d2b46c08732d706c81865203a8c406e7edcd9ea2
+  languageName: node
+  linkType: hard
+
 "@clickhouse/client-common@npm:1.12.1, @clickhouse/client-common@npm:^1.12.1":
   version: 1.12.1
   resolution: "@clickhouse/client-common@npm:1.12.1"
@@ -4352,6 +4389,7 @@ __metadata:
   resolution: "@hyperdx/app@workspace:packages/app"
   dependencies:
     "@chromatic-com/storybook": "npm:^4.1.3"
+    "@clickhouse/click-ui": "npm:0.0.251-rc.16"
     "@codemirror/lang-json": "npm:^6.0.1"
     "@codemirror/lang-sql": "npm:^6.7.0"
     "@dagrejs/dagre": "npm:^1.1.5"
@@ -4372,7 +4410,6 @@ __metadata:
     "@mantine/spotlight": "npm:^7.17.8"
     "@microsoft/fetch-event-source": "npm:^2.0.1"
     "@playwright/test": "npm:^1.57.0"
-    "@punkbit/cui": "npm:0.0.251-rc.16"
     "@storybook/addon-docs": "npm:^10.1.4"
     "@storybook/addon-links": "npm:^10.1.4"
     "@storybook/addon-styling-webpack": "npm:^3.0.0"
@@ -7998,43 +8035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@punkbit/cui@npm:0.0.251-rc.16":
-  version: 0.0.251-rc.16
-  resolution: "@punkbit/cui@npm:0.0.251-rc.16"
-  dependencies:
-    "@h6s/calendar": "npm:2.0.1"
-    "@radix-ui/react-accordion": "npm:1.2.12"
-    "@radix-ui/react-avatar": "npm:1.1.1"
-    "@radix-ui/react-checkbox": "npm:1.1.2"
-    "@radix-ui/react-context-menu": "npm:2.2.2"
-    "@radix-ui/react-dialog": "npm:1.1.2"
-    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
-    "@radix-ui/react-dropdown-menu": "npm:2.1.2"
-    "@radix-ui/react-hover-card": "npm:1.1.2"
-    "@radix-ui/react-popover": "npm:1.1.2"
-    "@radix-ui/react-popper": "npm:1.2.1"
-    "@radix-ui/react-radio-group": "npm:1.2.1"
-    "@radix-ui/react-separator": "npm:1.1.1"
-    "@radix-ui/react-switch": "npm:1.1.1"
-    "@radix-ui/react-tabs": "npm:1.1.1"
-    "@radix-ui/react-toast": "npm:1.2.2"
-    "@radix-ui/react-tooltip": "npm:1.1.2"
-    lodash: "npm:^4.17.21"
-    react-sortablejs: "npm:^6.1.4"
-    react-syntax-highlighter: "npm:^16.1.0"
-    react-virtualized-auto-sizer: "npm:^1.0.20"
-    react-window: "npm:^1.8.9"
-    sortablejs: "npm:^1.15.0"
-    styled-components: "npm:^6.1.11"
-  peerDependencies:
-    dayjs: ^1.11.13
-    react: ^18.3.1 || ^19.0.0
-    react-dom: ^18.3.1 || ^19.0.0
-    styled-components: ^6.1.11
-  checksum: 10c0/c99ab05396b4b03a05dd77f298fbc31abf316bbfee1253955fbc79d4d7aa7f915dfd8364c7fe2263683b971bc9856923d1319da073f762e11f5cd2ae2f1b5e71
-  languageName: node
-  linkType: hard
-
 "@radix-ui/primitive@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/primitive@npm:1.1.0"