From 2746f558b3c8347e174db10b7f9ff134c140357f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Louren=C3=A7o?= Date: Mon, 23 Mar 2026 14:50:40 -0300 Subject: [PATCH 1/3] docs(readme): add missing components --- README.md | 9 ++++++++- apps/docs/stories/intro.mdx | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8361e1b..a42bb4a 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,7 @@ To learn more about the available components, take a look at: https://periscope. All components live in `@signozhq/ui`. Import by subpath: ```ts +import { AlertDialog } from '@signozhq/ui'; import { AnnouncementBanner } from '@signozhq/ui'; import { Badge } from '@signozhq/ui'; import { Button } from '@signozhq/ui'; @@ -65,17 +66,23 @@ import { Callout } from '@signozhq/ui'; import { Checkbox } from '@signozhq/ui'; import { Combobox } from '@signozhq/ui'; import { Command } from '@signozhq/ui'; +import { DatePicker } from '@signozhq/ui'; import { Dialog } from '@signozhq/ui'; import { Drawer } from '@signozhq/ui'; +import { DropdownMenu } from '@signozhq/ui'; import { Input } from '@signozhq/ui'; import { Pagination } from '@signozhq/ui'; +import { PinList } from '@signozhq/ui'; +import { Popover } from '@signozhq/ui'; import { RadioGroup } from '@signozhq/ui'; import { ResizablePanelGroup } from '@signozhq/ui'; -import { Toaster } from '@signozhq/ui'; import { Switch } from '@signozhq/ui'; import { Table } from '@signozhq/ui'; +import { Tabs } from '@signozhq/ui'; +import { Toaster } from '@signozhq/ui'; import { Toggle } from '@signozhq/ui'; import { ToggleGroup } from '@signozhq/ui'; +import { Tooltip } from '@signozhq/ui'; ``` ## Contributing diff --git a/apps/docs/stories/intro.mdx b/apps/docs/stories/intro.mdx index 79da3f7..2d43b40 100644 --- a/apps/docs/stories/intro.mdx +++ b/apps/docs/stories/intro.mdx @@ -61,6 +61,7 @@ To learn more about the available components, take a look at: https://periscope. All components live in `@signozhq/ui`. Import by subpath: ```ts +import { AlertDialog } from '@signozhq/ui'; import { AnnouncementBanner } from '@signozhq/ui'; import { Badge } from '@signozhq/ui'; import { Button } from '@signozhq/ui'; @@ -69,15 +70,21 @@ import { Callout } from '@signozhq/ui'; import { Checkbox } from '@signozhq/ui'; import { Combobox } from '@signozhq/ui'; import { Command } from '@signozhq/ui'; +import { DatePicker } from '@signozhq/ui'; import { Dialog } from '@signozhq/ui'; import { Drawer } from '@signozhq/ui'; +import { DropdownMenu } from '@signozhq/ui'; import { Input } from '@signozhq/ui'; import { Pagination } from '@signozhq/ui'; +import { PinList } from '@signozhq/ui'; +import { Popover } from '@signozhq/ui'; import { RadioGroup } from '@signozhq/ui'; import { ResizablePanelGroup } from '@signozhq/ui'; -import { Toaster } from '@signozhq/ui'; import { Switch } from '@signozhq/ui'; import { Table } from '@signozhq/ui'; +import { Tabs } from '@signozhq/ui'; +import { Toaster } from '@signozhq/ui'; import { Toggle } from '@signozhq/ui'; import { ToggleGroup } from '@signozhq/ui'; +import { Tooltip } from '@signozhq/ui'; ``` From 1c3def942d3837f723608ab539b787017e3e3022 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Louren=C3=A7o?= Date: Mon, 23 Mar 2026 15:00:55 -0300 Subject: [PATCH 2/3] feat(deps): remove unused deps & remove tailwind --- packages/ui/package.json | 15 ++---- packages/ui/src/callout/callout.module.scss | 4 +- packages/ui/src/callout/callout.tsx | 21 ++------ packages/ui/src/lib/utils.ts | 3 +- packages/ui/src/table/example.module.scss | 48 +++++++++++++++++ packages/ui/src/table/example.tsx | 44 ++++++---------- pnpm-lock.yaml | 57 ++++++++------------- 7 files changed, 95 insertions(+), 97 deletions(-) create mode 100644 packages/ui/src/table/example.module.scss diff --git a/packages/ui/package.json b/packages/ui/package.json index b2c2332..631a190 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -34,17 +34,14 @@ }, "devDependencies": { "@repo/typescript-config": "workspace:*", - "@signozhq/tailwind-config": "workspace:*", - "@tailwindcss/postcss": "^4.1.4", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.0.1", "@types/node": "^22.5.5", "@types/react": "^18.2.61", + "@vitejs/plugin-react": "^5.1.4", "jsdom": "^28.1.0", - "postcss": "^8.4.47", "publint": "^0.3.17", - "sass-embedded": "^1.97.3", - "tailwindcss": "^4.1.4", + "vite": "npm:rolldown-vite@7.3.1", "vitest": "^4.0.18" }, "dependencies": { @@ -66,7 +63,6 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.1.1", - "date-fns": "^4.1.0", "dayjs": "^1.11.10", "lodash-es": "^4.17.21", "lucide-react": "^0.445.0", @@ -76,15 +72,12 @@ "nuqs": "^2.8.9", "react-day-picker": "^9.8.1", "react-resizable-panels": "^4.7.1", - "sonner": "^2.0.7", - "tailwind-merge": "^3.5.0" + "sonner": "^2.0.7" }, "peerDependencies": { "@signozhq/icons": "^0.1.0", "react": "^18.2.0", - "react-dom": "^18.2.0", - "tailwindcss": "^4.1.4", - "tailwindcss-animate": "^1.0.7" + "react-dom": "^18.2.0" }, "publishConfig": { "access": "public" diff --git a/packages/ui/src/callout/callout.module.scss b/packages/ui/src/callout/callout.module.scss index 181a6b2..be4d6f0 100644 --- a/packages/ui/src/callout/callout.module.scss +++ b/packages/ui/src/callout/callout.module.scss @@ -6,7 +6,7 @@ display: flex; gap: var(--spacing-4, 0.5rem); align-items: flex-start; - + --callout-icon-color: currentColor; --callout-title-color: var(--text-card-foreground); --callout-description-color: var(--text-muted-foreground); @@ -177,4 +177,4 @@ color: var(--callout-title-color); } } -} +} \ No newline at end of file diff --git a/packages/ui/src/callout/callout.tsx b/packages/ui/src/callout/callout.tsx index 2b72387..cb097bd 100644 --- a/packages/ui/src/callout/callout.tsx +++ b/packages/ui/src/callout/callout.tsx @@ -154,32 +154,17 @@ function Callout({ {iconComponent}
{title && ( -
+
{title}
)} {children && action !== 'expandable' && ( -
+
{children}
)} {children && action === 'expandable' && isExpanded && ( -
+
{children}
)} diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts index 0f9c160..18cb934 100644 --- a/packages/ui/src/lib/utils.ts +++ b/packages/ui/src/lib/utils.ts @@ -1,8 +1,7 @@ import { type ClassValue, clsx } from 'clsx'; -import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return clsx(inputs); } // https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts diff --git a/packages/ui/src/table/example.module.scss b/packages/ui/src/table/example.module.scss new file mode 100644 index 0000000..e2ba1f1 --- /dev/null +++ b/packages/ui/src/table/example.module.scss @@ -0,0 +1,48 @@ +.example { + display: flex; + flex-direction: column; + gap: 2rem; + + &__section { + border: 1px solid var(--border-color, hsl(var(--border))); + border-radius: 0.5rem; + padding: 1.5rem; + background: var(--bg-ink-500); + } + + &__title { + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-vanilla-100); + } + + &__description { + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--text-vanilla-400); + margin-bottom: 1rem; + } + + &__buttons { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + } + + &__button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + background: var(--bg-robin-500); + color: var(--text-ink-500); + border-radius: 0.25rem; + border: none; + cursor: pointer; + + &:hover { + background: color-mix(in srgb, var(--bg-robin-500) 90%, transparent); + } + } +} diff --git a/packages/ui/src/table/example.tsx b/packages/ui/src/table/example.tsx index 5899a58..9b7fad6 100644 --- a/packages/ui/src/table/example.tsx +++ b/packages/ui/src/table/example.tsx @@ -1,6 +1,7 @@ import type { ColumnDef } from '@tanstack/react-table'; import * as React from 'react'; import { DataTable } from './data-table.js'; +import styles from './example.module.scss'; // Define the type for our data type Person = { @@ -145,33 +146,22 @@ export function ExampleTable() { }; return ( -
-
-

- Table with Fixed Height and Overflow -

-

+

+
+

Table with Fixed Height and Overflow

+

This table has a fixed height of 300px. When the data exceeds this height, the content becomes scrollable while keeping the headers sticky. You can also scroll to specific users using the buttons below.

-
- - -
@@ -187,32 +177,30 @@ export function ExampleTable() { />
-
-

- Table with Fixed Height and Virtualization -

-

+

+

Table with Fixed Height and Virtualization

+

This table demonstrates how fixedHeight works with virtualization. It has a fixed height of 400px and uses virtualization to efficiently render 1000 rows. The virtualization works seamlessly with the fixed height container, providing smooth scrolling performance. You can also scroll to specific rows using the buttons below.

-
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69a65c4..656f662 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -329,9 +329,6 @@ importers: cmdk: specifier: ^1.1.1 version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - date-fns: - specifier: ^4.1.0 - version: 4.1.0 dayjs: specifier: ^1.11.10 version: 1.11.19 @@ -368,22 +365,10 @@ importers: sonner: specifier: ^2.0.7 version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - tailwind-merge: - specifier: ^3.5.0 - version: 3.5.0 - tailwindcss-animate: - specifier: ^1.0.7 - version: 1.0.7(tailwindcss@4.2.1) devDependencies: '@repo/typescript-config': specifier: workspace:* version: link:../typescript-config - '@signozhq/tailwind-config': - specifier: workspace:* - version: link:../tailwind-config - '@tailwindcss/postcss': - specifier: ^4.1.4 - version: 4.2.1 '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -396,21 +381,18 @@ importers: '@types/react': specifier: ^18.2.61 version: 18.3.28 + '@vitejs/plugin-react': + specifier: ^5.1.4 + version: 5.1.4(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) jsdom: specifier: ^28.1.0 version: 28.1.0 - postcss: - specifier: ^8.4.47 - version: 8.5.8 publint: specifier: ^0.3.17 version: 0.3.18 - sass-embedded: - specifier: ^1.97.3 - version: 1.97.3 - tailwindcss: - specifier: ^4.1.4 - version: 4.2.1 + vite: + specifier: npm:rolldown-vite@7.3.1 + version: rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2) vitest: specifier: ^4.0.18 version: 4.0.18(@types/node@22.19.15)(@vitest/browser-playwright@4.0.18)(jsdom@28.1.0)(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) @@ -6449,6 +6431,7 @@ packages: rolldown-vite@7.3.1: resolution: {integrity: sha512-LYzdNAjRHhF2yA4JUQm/QyARyi216N2rpJ0lJZb8E9FU2y5v6Vk+xq/U4XBOxMefpWixT5H3TslmAHm1rqIq2w==} engines: {node: ^20.19.0 || >=22.12.0} + deprecated: Use this package to migrate from Vite 7 to Vite 8. For the most recent updates, migrate to Vite 8 once you're ready. hasBin: true peerDependencies: '@types/node': ^20.19.0 || >=22.12.0 @@ -7023,9 +7006,6 @@ packages: resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==} engines: {node: ^14.18.0 || >=16.0.0} - tailwind-merge@3.5.0: - resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==} - tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -7870,7 +7850,8 @@ snapshots: dependencies: css-tree: 3.2.1 - '@bufbuild/protobuf@2.11.0': {} + '@bufbuild/protobuf@2.11.0': + optional: true '@chromatic-com/storybook@5.0.1(storybook@10.2.16(@testing-library/dom@10.4.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))': dependencies: @@ -10131,7 +10112,7 @@ snapshots: playwright: 1.58.2 tinyrainbow: 3.0.3 vite: rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2) - vitest: 4.0.18(@types/node@20.5.1)(@vitest/browser-playwright@4.0.18)(jsdom@28.1.0)(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) + vitest: 4.0.18(@types/node@22.19.15)(@vitest/browser-playwright@4.0.18)(jsdom@28.1.0)(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) transitivePeerDependencies: - bufferutil - msw @@ -10146,7 +10127,7 @@ snapshots: pngjs: 7.0.0 sirv: 3.0.2 tinyrainbow: 3.0.3 - vitest: 4.0.18(@types/node@20.5.1)(@vitest/browser-playwright@4.0.18)(jsdom@28.1.0)(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) + vitest: 4.0.18(@types/node@22.19.15)(@vitest/browser-playwright@4.0.18)(jsdom@28.1.0)(rolldown-vite@7.3.1(@types/node@22.19.15)(esbuild@0.25.12)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(yaml@2.8.2)) ws: 8.19.0 transitivePeerDependencies: - bufferutil @@ -10732,7 +10713,8 @@ snapshots: colorette@2.0.20: {} - colorjs.io@0.5.2: {} + colorjs.io@0.5.2: + optional: true comma-separated-tokens@2.0.3: {} @@ -12049,7 +12031,8 @@ snapshots: ignore@6.0.2: {} - immutable@5.1.5: {} + immutable@5.1.5: + optional: true import-cwd@3.0.0: dependencies: @@ -14413,6 +14396,7 @@ snapshots: sass-embedded-unknown-all: 1.97.3 sass-embedded-win32-arm64: 1.97.3 sass-embedded-win32-x64: 1.97.3 + optional: true sass@1.97.3: dependencies: @@ -14817,15 +14801,15 @@ snapshots: sync-child-process@1.0.2: dependencies: sync-message-port: 1.2.0 + optional: true - sync-message-port@1.2.0: {} + sync-message-port@1.2.0: + optional: true synckit@0.11.12: dependencies: '@pkgr/core': 0.2.9 - tailwind-merge@3.5.0: {} - tailwindcss-animate@1.0.7(tailwindcss@4.2.1): dependencies: tailwindcss: 4.2.1 @@ -15277,7 +15261,8 @@ snapshots: validate-npm-package-name@5.0.1: {} - varint@6.0.0: {} + varint@6.0.0: + optional: true vary@1.1.2: {} From aba42c802028038fe2283a2a07df2787810042b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Louren=C3=A7o?= Date: Mon, 23 Mar 2026 15:34:04 -0300 Subject: [PATCH 3/3] fix(signozhq-icons): use updated lib & remove lucide --- apps/docs/.storybook/modeDecorator.tsx | 2 +- apps/docs/components/IconGallery.tsx | 2 +- apps/docs/package.json | 3 +- apps/docs/stories/combobox-simple.stories.tsx | 8 +- apps/docs/stories/combobox.mdx | 12 +- apps/docs/stories/combobox.stories.tsx | 4 +- apps/docs/stories/data-table.stories.tsx | 48 +- .../stories/dropdown-menu-item.stories.tsx | 2 +- .../dropdown-menu-multi-step.stories.tsx | 2 +- .../dropdown-menu-sub-trigger.stories.tsx | 2 +- .../stories/dropdown-menu-sub.stories.tsx | 2 +- apps/docs/stories/pin-list.mdx | 4 +- apps/docs/stories/pin-list.stories.tsx | 10 +- apps/docs/stories/popover.stories.tsx | 2 +- apps/docs/stories/resizable-panel.stories.tsx | 2 +- apps/docs/stories/resizable.stories.tsx | 10 +- apps/docs/stories/table.stories.tsx | 23 +- apps/docs/stories/tabs-root.stories.tsx | 4 +- apps/docs/stories/tabs.mdx | 8 +- apps/docs/stories/tabs.stories.tsx | 17 +- .../stories/toggle-group-item.stories.tsx | 2 +- .../stories/toggle-group-simple.stories.tsx | 2 +- apps/docs/stories/toggle-group.mdx | 2 +- apps/docs/stories/toggle.mdx | 4 +- apps/docs/stories/toggle.stories.tsx | 2 +- package.json | 2 +- .../typescript-config/vite.config.extend.ts | 4 - packages/ui/package.json | 5 +- packages/ui/src/button/button.tsx | 4 +- packages/ui/src/calendar/calendar.tsx | 14 +- packages/ui/src/combobox/combobox.tsx | 2 +- packages/ui/src/command/command.module.scss | 2 +- packages/ui/src/date-picker/date-picker.tsx | 2 +- .../dropdown-menu/dropdown-menu.module.scss | 5 - .../subcomponents/dropdown-menu-back.tsx | 2 +- .../dropdown-menu-checkbox-item.tsx | 2 +- .../subcomponents/dropdown-menu-loading.tsx | 4 +- .../dropdown-menu-multi-step.tsx | 2 +- .../dropdown-menu-radio-item.tsx | 2 +- .../dropdown-menu-sub-trigger.tsx | 2 +- packages/ui/src/input/input.module.scss | 3 +- packages/ui/src/input/input.tsx | 69 +- packages/ui/src/pin-list/pin-list.tsx | 6 +- packages/ui/src/table/data-table.tsx | 38 +- packages/ui/src/tabs/tabs.tsx | 4 +- pnpm-lock.yaml | 650 +----------------- 46 files changed, 209 insertions(+), 794 deletions(-) diff --git a/apps/docs/.storybook/modeDecorator.tsx b/apps/docs/.storybook/modeDecorator.tsx index 182cafd..9afaf93 100644 --- a/apps/docs/.storybook/modeDecorator.tsx +++ b/apps/docs/.storybook/modeDecorator.tsx @@ -1,4 +1,4 @@ -import { ChevronDown, Moon, Palette, Sun } from 'lucide-react'; +import { ChevronDown, Moon, Palette, Sun } from '@signozhq/icons'; import { useCallback, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; diff --git a/apps/docs/components/IconGallery.tsx b/apps/docs/components/IconGallery.tsx index f35b568..7c76784 100644 --- a/apps/docs/components/IconGallery.tsx +++ b/apps/docs/components/IconGallery.tsx @@ -1,5 +1,5 @@ +import { Check, Copy } from '@signozhq/icons'; import { Button, ButtonColor, ButtonSize, ButtonVariant, Input } from '@signozhq/ui'; -import { Check, Copy } from 'lucide-react'; import React, { useMemo, useState } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeGrid as Grid } from 'react-window'; diff --git a/apps/docs/package.json b/apps/docs/package.json index 8801a6d..58614bb 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -16,11 +16,10 @@ "dependencies": { "@radix-ui/react-tabs": "^1.1.3", "@signozhq/design-tokens": "2.1.3", - "@signozhq/icons": "^0.1.0", + "@signozhq/icons": "^0.3.0", "@signozhq/tailwind-config": "workspace:*", "@signozhq/ui": "workspace:*", "@tailwindcss/vite": "^4.2.1", - "lucide-react": "^0.445.0", "motion": "^11.18.2", "nuqs": "^2.8.9", "react": "^18.2.0", diff --git a/apps/docs/stories/combobox-simple.stories.tsx b/apps/docs/stories/combobox-simple.stories.tsx index e7098b1..4529530 100644 --- a/apps/docs/stories/combobox-simple.stories.tsx +++ b/apps/docs/stories/combobox-simple.stories.tsx @@ -1,6 +1,6 @@ +import { Code, Database, GitBranch, Terminal } from '@signozhq/icons'; import { ComboboxSimple } from '@signozhq/ui'; import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Code2, Database, GitBranch, Terminal } from 'lucide-react'; import { useState } from 'react'; const meta: Meta = { @@ -140,7 +140,7 @@ const itemsWithIcons = [ value: 'react', label: ( <> - + React ), @@ -196,7 +196,7 @@ export const WithGroupsAndIcons: Story = { value: 'react', label: ( <> - + React ), @@ -205,7 +205,7 @@ export const WithGroupsAndIcons: Story = { value: 'vue', label: ( <> - + Vue ), diff --git a/apps/docs/stories/combobox.mdx b/apps/docs/stories/combobox.mdx index f57e21d..02acaf3 100644 --- a/apps/docs/stories/combobox.mdx +++ b/apps/docs/stories/combobox.mdx @@ -56,11 +56,11 @@ export default function MyComponent() { ```tsx import { ComboboxSimple } from '@signozhq/ui'; import { useState } from 'react'; -import { Code2, Database } from 'lucide-react'; +import { Code, Database } from '@signozhq/icons'; const items = [ - { value: 'react', label: <>React }, - { value: 'vue', label: <>Vue }, + { value: 'react', label: <>React }, + { value: 'vue', label: <>Vue }, { value: 'postgres', label: <>PostgreSQL }, ]; @@ -83,11 +83,11 @@ export default function MyComponent() { ```tsx import { ComboboxSimple } from '@signozhq/ui'; import { useState } from 'react'; -import { Code2 } from 'lucide-react'; +import { Code } from '@signozhq/icons'; const items = [ - { value: 'react', label: <>React, displayValue: 'React' }, - { value: 'vue', label: <>Vue, displayValue: 'Vue' }, + { value: 'react', label: <>React, displayValue: 'React' }, + { value: 'vue', label: <>Vue, displayValue: 'Vue' }, ]; export default function MyComponent() { diff --git a/apps/docs/stories/combobox.stories.tsx b/apps/docs/stories/combobox.stories.tsx index 6250443..79b6c12 100644 --- a/apps/docs/stories/combobox.stories.tsx +++ b/apps/docs/stories/combobox.stories.tsx @@ -1,3 +1,4 @@ +import { Code, Database, GitBranch, Terminal } from '@signozhq/icons'; import { Combobox, ComboboxCommand, @@ -12,7 +13,6 @@ import { ComboboxTrigger, } from '@signozhq/ui'; import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Code2, Database, GitBranch, Terminal } from 'lucide-react'; import { useState } from 'react'; const meta: Meta = { @@ -595,7 +595,7 @@ export const WithIcons: Story = { { value: 'react', label: 'React', - icon: Code2, + icon: Code, }, { value: 'nodejs', diff --git a/apps/docs/stories/data-table.stories.tsx b/apps/docs/stories/data-table.stories.tsx index 4f8282e..20c840e 100644 --- a/apps/docs/stories/data-table.stories.tsx +++ b/apps/docs/stories/data-table.stories.tsx @@ -1,3 +1,4 @@ +import { CircleAlert, CircleCheck, CircleX, Clock, Eye, Pencil, Trash2 } from '@signozhq/icons'; import { Badge, DataTable as BaseDataTable, @@ -7,8 +8,9 @@ import { type Row, } from '@signozhq/ui'; import type { Meta, StoryObj } from '@storybook/react-vite'; -import type { LucideIcon } from 'lucide-react'; -import { AlertCircle, CheckCircle, Clock, Edit, Eye, Trash2, XCircle } from 'lucide-react'; + +type IconComponent = React.ComponentType<{ className?: string; size?: number }>; + import * as React from 'react'; // Create a properly typed wrapper component @@ -278,16 +280,16 @@ const enhancedColumns: ColumnDef[] = [ const status = row.getValue('status') as User['status']; const statusMap: Record< User['status'], - { label: string; icon: LucideIcon; className: string } + { label: string; icon: IconComponent; className: string } > = { active: { label: 'Active', - icon: CheckCircle, + icon: CircleCheck, className: 'bg-green-100 text-green-800 border-green-200', }, inactive: { label: 'Inactive', - icon: XCircle, + icon: CircleX, className: 'bg-red-100 text-red-800 border-red-200', }, pending: { @@ -297,7 +299,7 @@ const enhancedColumns: ColumnDef[] = [ }, suspended: { label: 'Suspended', - icon: AlertCircle, + icon: CircleAlert, className: 'bg-gray-100 text-gray-800 border-gray-200', }, }; @@ -397,7 +399,7 @@ const enhancedColumns: ColumnDef[] = [
* ``` */ -const InputPassword = React.forwardRef((props, ref) => { - const [showPassword, setShowPassword] = React.useState(false); +const InputPassword = React.forwardRef( + ({ className, ...props }, ref) => { + const [showPassword, setShowPassword] = React.useState(false); - const togglePasswordVisibility = React.useCallback(() => { - setShowPassword((prev) => !prev); - }, []); + const togglePasswordVisibility = React.useCallback(() => { + setShowPassword((prev) => !prev); + }, []); - return ( -