From 19572a06583c16cb8a6a00a3f269fbba9723abc9 Mon Sep 17 00:00:00 2001 From: Juliano Sill Date: Thu, 27 Nov 2025 00:32:24 -0300 Subject: [PATCH 01/10] feat(components): migrate dialog from radix to base-ui --- package-lock.json | 172 ----------------------- package.json | 1 - src/components/ui/dialog.tsx | 158 +++++++++++++++++++++ src/components/ui/dialog/close.tsx | 30 ---- src/components/ui/dialog/container.tsx | 43 ------ src/components/ui/dialog/content.tsx | 8 -- src/components/ui/dialog/description.tsx | 15 -- src/components/ui/dialog/footer.tsx | 16 --- src/components/ui/dialog/header.tsx | 36 ----- src/components/ui/dialog/index.tsx | 31 ---- src/components/ui/dialog/title.tsx | 15 -- src/components/ui/dialog/trigger.tsx | 27 ---- 12 files changed, 158 insertions(+), 394 deletions(-) create mode 100644 src/components/ui/dialog.tsx delete mode 100644 src/components/ui/dialog/close.tsx delete mode 100644 src/components/ui/dialog/container.tsx delete mode 100644 src/components/ui/dialog/content.tsx delete mode 100644 src/components/ui/dialog/description.tsx delete mode 100644 src/components/ui/dialog/footer.tsx delete mode 100644 src/components/ui/dialog/header.tsx delete mode 100644 src/components/ui/dialog/index.tsx delete mode 100644 src/components/ui/dialog/title.tsx delete mode 100644 src/components/ui/dialog/trigger.tsx diff --git a/package-lock.json b/package-lock.json index cc5357f3..8a927227 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "@base-ui-components/react": "1.0.0-beta.6", "@hookform/resolvers": "5.0.1", "@radix-ui/react-checkbox": "1.2.2", - "@radix-ui/react-dialog": "1.1.14", "@radix-ui/react-dropdown-menu": "2.1.15", "@radix-ui/react-popover": "1.1.14", "@radix-ui/react-radio-group": "1.3.6", @@ -2613,177 +2612,6 @@ } } }, - "node_modules/@radix-ui/react-dialog": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz", - "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==", - "license": "MIT", - "dependencies": { - "@radix-ui/primitive": "1.1.2", - "@radix-ui/react-compose-refs": "1.1.2", - "@radix-ui/react-context": "1.1.2", - "@radix-ui/react-dismissable-layer": "1.1.10", - "@radix-ui/react-focus-guards": "1.1.2", - "@radix-ui/react-focus-scope": "1.1.7", - "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-portal": "1.1.9", - "@radix-ui/react-presence": "1.1.4", - "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-slot": "1.2.3", - "@radix-ui/react-use-controllable-state": "1.2.2", - "aria-hidden": "^1.2.4", - "react-remove-scroll": "^2.6.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz", - "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==", - "dependencies": { - "@radix-ui/primitive": "1.1.2", - "@radix-ui/react-compose-refs": "1.1.2", - "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-use-callback-ref": "1.1.1", - "@radix-ui/react-use-escape-keydown": "1.1.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz", - "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.2", - "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-use-callback-ref": "1.1.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": { - "version": "1.1.9", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz", - "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==", - "dependencies": { - "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-use-layout-effect": "1.1.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz", - "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.2", - "@radix-ui/react-use-layout-effect": "1.1.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", - "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", - "dependencies": { - "@radix-ui/react-slot": "1.2.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", - "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.2" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-direction": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz", diff --git a/package.json b/package.json index 7b050219..1ed24539 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@base-ui-components/react": "1.0.0-beta.6", "@hookform/resolvers": "5.0.1", "@radix-ui/react-checkbox": "1.2.2", - "@radix-ui/react-dialog": "1.1.14", "@radix-ui/react-dropdown-menu": "2.1.15", "@radix-ui/react-popover": "1.1.14", "@radix-ui/react-radio-group": "1.3.6", diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 00000000..91875b17 --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,158 @@ +import { Dialog as BaseDialog } from '@base-ui-components/react/dialog' +import type { VariantProps } from 'class-variance-authority' +import { type LucideIcon, XIcon } from 'lucide-react' + +import { cn } from '@/utils/class-name-merge' + +import { buttonVariants } from './button' + +interface DialogProps extends React.ComponentProps { + children: React.ReactNode +} +export function Dialog({ children, ...props }: Readonly) { + return {children} +} + +type DialogTriggerProps = React.ComponentProps & + VariantProps +export function DialogTrigger({ + variant, + size, + className, + ...props +}: Readonly) { + return ( + + ) +} + +export function DialogContainer({ + className, + children, + ...props +}: Readonly>) { + return ( + + + + + + + {children} + + + ) +} + +interface DialogHeaderProps extends React.ComponentProps<'div'> { + icon?: React.ReactNode +} +export function DialogHeader({ + icon, + className, + ...props +}: Readonly) { + return ( +
+ {icon && icon} +
+
+ ) +} + +interface DialogIconProps extends React.ComponentProps<'div'> { + icon: LucideIcon +} +export function DialogIcon({ + icon: Icon, + className, +}: Readonly) { + return ( + + ) +} + +export function DialogTitle({ + className, + ...props +}: Readonly>) { + return ( + + ) +} + +export function DialogDescription({ + className, + ...props +}: Readonly>) { + return ( + + ) +} + +export function DialogContent({ + className, + ...props +}: Readonly>) { + return ( +