From 7f30a7c33f8bc3cd7b50e9b42aeab0dcc94af402 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 1 Aug 2025 17:56:02 -0600 Subject: [PATCH] fix toolbar imports --- .../report/elements/FixedToolbarButtons.tsx | 2 +- .../ui/report/elements/FloatingToolbar.tsx | 2 +- .../elements/FloatingToolbarButtons.tsx | 2 +- .../report/elements/InsertToolbarButton.tsx | 2 +- .../ui/report/elements/ListToolbarButton.tsx | 2 +- .../ui/report/elements/MediaToolbarButton.tsx | 2 +- .../components/ui/report/elements/Toolbar.tsx | 332 ------------------ .../report/elements/TurnIntoToolbarButton.tsx | 2 +- .../web/src/components/ui/toolbar/Toolbar.tsx | 111 +++--- 9 files changed, 58 insertions(+), 399 deletions(-) delete mode 100644 apps/web/src/components/ui/report/elements/Toolbar.tsx diff --git a/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx b/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx index db0129296..45e2fd5db 100644 --- a/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx +++ b/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx @@ -24,7 +24,7 @@ import { LinkToolbarButton } from './LinkToolbarButton'; import { MarkToolbarButton } from './MarktoolbarButton'; import { MoreToolbarButton } from './MoreToolbarButton'; import { SuggestionToolbarButton } from './SuggestionToolbarButton'; -import { ToolbarGroup } from './Toolbar'; +import { ToolbarGroup } from '@/components/ui/toolbar/Toolbar'; import { TurnIntoToolbarButton } from './TurnIntoToolbarButton'; import { UndoToolbarButton, RedoToolbarButton } from './UndoToolbarButton'; import { ExportToolbarButton } from './ExportToolbarButton'; diff --git a/apps/web/src/components/ui/report/elements/FloatingToolbar.tsx b/apps/web/src/components/ui/report/elements/FloatingToolbar.tsx index 248be8a86..4c1a8ba97 100644 --- a/apps/web/src/components/ui/report/elements/FloatingToolbar.tsx +++ b/apps/web/src/components/ui/report/elements/FloatingToolbar.tsx @@ -15,7 +15,7 @@ import { useEditorId, useEventEditorValue, usePluginOption } from 'platejs/react import { cn } from '@/lib/utils'; -import { Toolbar } from './Toolbar'; +import { Toolbar } from '@/components/ui/toolbar/Toolbar'; export function FloatingToolbar({ children, diff --git a/apps/web/src/components/ui/report/elements/FloatingToolbarButtons.tsx b/apps/web/src/components/ui/report/elements/FloatingToolbarButtons.tsx index 4ff146997..6d4ddd0a2 100644 --- a/apps/web/src/components/ui/report/elements/FloatingToolbarButtons.tsx +++ b/apps/web/src/components/ui/report/elements/FloatingToolbarButtons.tsx @@ -28,7 +28,7 @@ import { LinkToolbarButton } from './LinkToolbarButton'; import { MarkToolbarButton } from './MarktoolbarButton'; import { MoreToolbarButton } from './MoreToolbarButton'; import { SuggestionToolbarButton } from './SuggestionToolbarButton'; -import { ToolbarGroup } from './Toolbar'; +import { ToolbarGroup } from '@/components/ui/toolbar/Toolbar'; import { TurnIntoToolbarButton } from './TurnIntoToolbarButton'; export function FloatingToolbarButtons() { diff --git a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx index c2d0272a6..943f35ee6 100644 --- a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx @@ -38,7 +38,7 @@ import { } from '@/components/ui/dropdown-menu'; import { insertBlock, insertInlineElement } from './transforms'; -import { ToolbarButton, ToolbarMenuGroup } from './Toolbar'; +import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar'; type Group = { group: string; diff --git a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx index 15f80ca07..024a79565 100644 --- a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx @@ -20,7 +20,7 @@ import { ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary -} from './Toolbar'; +} from '@/components/ui/toolbar/Toolbar'; export function BulletedListToolbarButton() { const editor = useEditorRef(); diff --git a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx index 40284bf92..83a667bd2 100644 --- a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx @@ -34,7 +34,7 @@ import { ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary -} from './Toolbar'; +} from '@/components/ui/toolbar/Toolbar'; const MEDIA_CONFIG: Record< string, diff --git a/apps/web/src/components/ui/report/elements/Toolbar.tsx b/apps/web/src/components/ui/report/elements/Toolbar.tsx deleted file mode 100644 index f00d876a4..000000000 --- a/apps/web/src/components/ui/report/elements/Toolbar.tsx +++ /dev/null @@ -1,332 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; -import * as TooltipPrimitive from '@radix-ui/react-tooltip'; -import { type VariantProps, cva } from 'class-variance-authority'; -import { ChevronDown } from '@/components/ui/icons'; - -import { - DropdownMenuLabel, - DropdownMenuRadioGroup, - DropdownMenuSeparator -} from '@/components/ui/dropdown-menu'; -import { Separator } from '@/components/ui/separator'; -import { Tooltip } from '@/components/ui/tooltip'; -import { cn } from '@/lib/utils'; - -export const Toolbar = React.forwardRef< - HTMLDivElement, - React.ComponentProps ->(function Toolbar({ className, ...props }, ref) { - return ( - - ); -}); - -Toolbar.displayName = 'Toolbar'; - -export const ToolbarToggleGroup = React.forwardRef< - React.ElementRef, - React.ComponentProps ->(function ToolbarToggleGroup({ className, ...props }, ref) { - return ( - - ); -}); - -export function ToolbarLink({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -export function ToolbarSeparator({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -// From toggleVariants -const toolbarButtonVariants = cva( - "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", - { - defaultVariants: { - size: 'default', - variant: 'default' - }, - variants: { - size: { - default: 'h-9 min-w-9 px-2', - lg: 'h-10 min-w-10 px-2.5', - sm: 'h-8 min-w-8 px-1.5' - }, - variant: { - default: 'bg-transparent', - outline: - 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground' - } - } - } -); - -const dropdownArrowVariants = cva( - cn( - 'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors disabled:pointer-events-none disabled:opacity-50' - ), - { - defaultVariants: { - size: 'sm', - variant: 'default' - }, - variants: { - size: { - default: 'h-9 w-6', - lg: 'h-10 w-8', - sm: 'h-8 w-4' - }, - variant: { - default: - 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground', - outline: - 'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground' - } - } - } -); - -type ToolbarButtonProps = { - isDropdown?: boolean; - pressed?: boolean; -} & Omit, 'asChild' | 'value'> & - VariantProps; - -export const ToolbarButton = withTooltip( - React.forwardRef(function ToolbarButton( - { children, className, isDropdown, pressed, size = 'sm', variant, ...props }, - ref - ) { - return typeof pressed === 'boolean' ? ( - - - {isDropdown ? ( - <> -
{children}
-
- -
- - ) : ( - children - )} - - - ) : ( - - {children} - - ); - }) -); - -export function ToolbarSplitButton({ - className, - ...props -}: React.ComponentPropsWithoutRef) { - return ( - - ); -} - -type ToolbarSplitButtonPrimaryProps = Omit< - React.ComponentPropsWithoutRef, - 'value' -> & - VariantProps; - -export function ToolbarSplitButtonPrimary({ - children, - className, - size = 'sm', - variant, - ...props -}: ToolbarSplitButtonPrimaryProps) { - return ( - - {children} - - ); -} - -export function ToolbarSplitButtonSecondary({ - className, - size, - variant, - ...props -}: React.ComponentPropsWithoutRef<'span'> & VariantProps) { - return ( - e.stopPropagation()} - role="button" - {...props}> -
- -
- - ); -} - -export const ToolbarToggleItem = React.forwardRef< - React.ElementRef, - React.ComponentProps & - VariantProps ->(function ToolbarToggleItem({ className, size = 'sm', variant, ...props }, ref) { - return ( - - ); -}); - -export function ToolbarGroup({ children, className }: React.ComponentProps<'div'>) { - return ( - - ); -} - -type TooltipProps = { - tooltip?: React.ReactNode; -} & React.ComponentProps; - -function withTooltip(Component: T) { - const ExtendComponent = React.forwardRef>( - ({ tooltip, tooltipContentProps, tooltipProps, tooltipTriggerProps, ...props }, ref) => { - const [mounted, setMounted] = React.useState(false); - - React.useEffect(() => { - setMounted(true); - }, []); - - const componentProps = { - ...props, - ref - }; - - const component = React.createElement(Component, componentProps); - - if (tooltip && mounted) { - return {component}; - } - - return component; - } - ); - - ExtendComponent.displayName = `withTooltip`; - - return ExtendComponent; -} - -export function ToolbarMenuGroup({ - children, - className, - label, - ...props -}: React.ComponentProps & { label?: string }) { - return ( - <> - - - - {label && ( - - {label} - - )} - {children} - - - ); -} diff --git a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx index 8542beebb..13215b42f 100644 --- a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx @@ -34,7 +34,7 @@ import { } from '@/components/ui/dropdown-menu'; import { getBlockType, setBlockType } from './transforms'; -import { ToolbarButton, ToolbarMenuGroup } from './Toolbar'; +import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar'; const turnIntoItems = [ { diff --git a/apps/web/src/components/ui/toolbar/Toolbar.tsx b/apps/web/src/components/ui/toolbar/Toolbar.tsx index 0676bfb85..ddf5d623f 100644 --- a/apps/web/src/components/ui/toolbar/Toolbar.tsx +++ b/apps/web/src/components/ui/toolbar/Toolbar.tsx @@ -16,53 +16,53 @@ import { Separator } from '@/components/ui/separator'; import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; -export function Toolbar({ +export const Toolbar = ({ className, ...props -}: React.ComponentProps) { +}: React.ComponentProps) => { return ( ); -} +}; -export function ToolbarToggleGroup({ +export const ToolbarToggleGroup = ({ className, ...props -}: React.ComponentProps) { +}: React.ComponentProps) => { return ( ); -} +}; -export function ToolbarLink({ +export const ToolbarLink = ({ className, ...props -}: React.ComponentProps) { +}: React.ComponentProps) => { return ( ); -} +}; -export function ToolbarSeparator({ +export const ToolbarSeparator = ({ className, ...props -}: React.ComponentProps) { +}: React.ComponentProps) => { return ( ); -} +}; // From toggleVariants const toolbarButtonVariants = cva( @@ -115,21 +115,18 @@ const dropdownArrowVariants = cva( type ToolbarButtonProps = { isDropdown?: boolean; pressed?: boolean; -} & Omit, 'asChild' | 'value'> & + tooltip?: string | React.ReactNode; +} & Omit, 'asChild' | 'value'> & VariantProps; -export const ToolbarButton = withTooltip(function ToolbarButton({ - children, - className, - isDropdown, - pressed, - size = 'sm', - variant, - ...props -}: ToolbarButtonProps) { +export const ToolbarButton = React.forwardRef< + React.ElementRef, + ToolbarButtonProps +>(({ children, className, isDropdown, pressed, size = 'sm', variant, tooltip, ...props }, ref) => { return typeof pressed === 'boolean' ? ( ) : ( >} className={cn( toolbarButtonVariants({ size, @@ -168,17 +166,19 @@ export const ToolbarButton = withTooltip(function ToolbarButton({ ); }); -export function ToolbarSplitButton({ +ToolbarButton.displayName = 'ToolbarButton'; + +export const ToolbarSplitButton = ({ className, ...props -}: React.ComponentPropsWithoutRef) { +}: React.ComponentPropsWithoutRef) => { return ( ); -} +}; type ToolbarSplitButtonPrimaryProps = Omit< React.ComponentPropsWithoutRef, @@ -186,13 +186,13 @@ type ToolbarSplitButtonPrimaryProps = Omit< > & VariantProps; -export function ToolbarSplitButtonPrimary({ +export const ToolbarSplitButtonPrimary = ({ children, className, size = 'sm', variant, ...props -}: ToolbarSplitButtonPrimaryProps) { +}: ToolbarSplitButtonPrimaryProps) => { return ( ); -} +}; -export function ToolbarSplitButtonSecondary({ - className, - size, - variant, - ...props -}: React.ComponentPropsWithoutRef<'span'> & VariantProps) { +export const ToolbarSplitButtonSecondary = React.forwardRef< + HTMLSpanElement, + React.ComponentPropsWithoutRef<'span'> & VariantProps +>(({ className, size, variant, ...props }, ref) => { return ( ); -} +}); -export function ToolbarToggleItem({ - className, - size = 'sm', - variant, - ...props -}: React.ComponentProps & - VariantProps) { +export const ToolbarToggleItem = React.forwardRef< + React.ElementRef, + React.ComponentProps & + VariantProps +>(({ className, size = 'sm', variant, ...props }, ref) => { return ( ); -} +}); -export function ToolbarGroup({ children, className }: React.ComponentProps<'div'>) { +export const ToolbarGroup = ({ children, className }: React.ComponentProps<'div'>) => { return ( ); -} +}; -export function ToolbarMenuGroup({ +export const ToolbarMenuGroup = ({ children, className, label, ...props -}: React.ComponentProps & { label?: string }) { +}: React.ComponentProps & { label?: string }) => { return ( <> ); -} +}; type TooltipProps = { tooltip?: React.ReactNode; @@ -303,14 +300,8 @@ type TooltipProps = { tooltipTriggerProps?: React.ComponentPropsWithoutRef; } & React.ComponentProps; -function withTooltip(Component: T) { - return function ExtendComponent({ - tooltip, - tooltipContentProps, - tooltipProps, - ref, - ...props - }: TooltipProps) { +const withTooltip = (Component: T) => { + return ({ tooltip, tooltipContentProps, tooltipProps, ref, ...props }: TooltipProps) => { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { @@ -330,15 +321,15 @@ function withTooltip(Component: T) { return component; }; -} +}; -function TooltipContent({ +const TooltipContent = ({ children, className, // CHANGE sideOffset = 4, ...props -}: React.ComponentProps) { +}: React.ComponentProps) => { return ( ); -} +};