Initial commit for editor

apps/web/src/components/ui/report/AppReport.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { Value } from 'platejs';
+import { AppReport } from './AppReport';
+
+const meta: Meta<typeof AppReport> = {
+  title: 'UI/report/AppReport',
+  component: AppReport,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [
+    (Story) => (
+      <div className="relative overflow-hidden p-18">
+        <div className="h-full min-h-[250px] overflow-hidden rounded-lg border">
+          <Story />
+        </div>
+      </div>
+    )
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default']
+    },
+    readonly: {
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      control: { type: 'text' }
+    },
+    className: {
+      control: { type: 'text' }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Example value structure for Plate.js
+const exampleValue: Value = [
+  {
+    id: '1',
+    type: 'p',
+    children: [
+      {
+        text: 'This is an example report with some content. You can edit this text if readonly is set to false.'
+      }
+    ]
+  },
+  {
+    id: '2',
+    type: 'p',
+    children: [{ text: 'This component uses Plate.js for rich text editing capabilities.' }]
+  }
+];
+
+export const Default: Story = {
+  args: {
+    value: exampleValue,
+    placeholder: 'Start typing your report...',
+    readonly: false,
+    variant: 'default'
+  }
+};

apps/web/src/components/ui/report/AppReport.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Value } from 'platejs';
+import { Plate, usePlateEditor } from 'platejs/react';
+import { BoldPlugin, ItalicPlugin, UnderlinePlugin } from '@platejs/basic-nodes/react';
+import { EditorContainer } from './EditorContainer';
+import { EditorContent } from './EditorContent';
+
+interface AppReportProps {
+  value: Value;
+  placeholder?: string;
+  readonly?: boolean;
+  variant?: 'default';
+  className?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+export const AppReport = React.memo(
+  ({
+    value,
+    placeholder,
+    readonly,
+    variant = 'default',
+    className,
+    style,
+    disabled = false
+  }: AppReportProps) => {
+    const editor = usePlateEditor({
+      plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin],
+      value: []
+    });
+
+    return (
+      <Plate editor={editor}>
+        {/* <FixedToolbar className="justify-start rounded-t-lg">
+          <MarkToolbarButton nodeType="bold" tooltip="Bold (⌘+B)">
+            B
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType="italic" tooltip="Italic (⌘+I)">
+            I
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType="underline" tooltip="Underline (⌘+U)">
+            U
+          </MarkToolbarButton>
+        </FixedToolbar> */}
+        <EditorContainer
+          variant={variant}
+          readonly={readonly}
+          disabled={disabled}
+          className={className}>
+          <EditorContent style={style} placeholder={placeholder} disabled={disabled} />
+        </EditorContainer>
+      </Plate>
+    );
+  }
+);
+
+AppReport.displayName = 'AppReport';

apps/web/src/components/ui/report/EditorContainer.tsx

@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils';
+import { PlateContainer } from 'platejs/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+interface EditorContainerProps {
+  className?: string;
+  variant?: 'default';
+  readonly?: boolean;
+  disabled?: boolean;
+}
+
+const editorContainerVariants = cva('relative cursor-text h-full p-4', {
+  variants: {
+    variant: {
+      default: 'bg-background'
+    },
+    readonly: {
+      true: 'cursor-not-allowed'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
+
+export function EditorContainer({
+  className,
+  variant,
+  readonly,
+  disabled,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof editorContainerVariants> &
+  EditorContainerProps) {
+  return (
+    <PlateContainer className={cn(editorContainerVariants({ variant }), className)} {...props} />
+  );
+}

apps/web/src/components/ui/report/EditorContent.tsx

@@ -0,0 +1,30 @@
+import { PlateContent } from 'platejs/react';
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const editorContentVariants = cva('pb-42', {
+  variants: {
+    variant: {
+      default: 'bg-background'
+    }
+  }
+});
+
+export function EditorContent({
+  style,
+  placeholder,
+  disabled,
+  variant,
+  ...props
+}: React.ComponentProps<typeof PlateContent> & { variant?: 'default' }) {
+  return (
+    <PlateContent
+      {...props}
+      style={style}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={cn(editorContentVariants({ variant }))}
+      //disableDefaultStyles
+    />
+  );
+}

apps/web/src/components/ui/report/FixedToolbar.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import { Toolbar } from './Toolbar';
+
+export function FixedToolbar({ className, ...props }: React.ComponentProps<typeof Toolbar>) {
+  return (
+    <Toolbar
+      {...props}
+      className={cn(
+        'scrollbar-hide border-b-border bg-background/95 supports-backdrop-blur:bg-background/60 sticky top-0 left-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b p-1 backdrop-blur-sm',
+        className
+      )}
+    />
+  );
+}

apps/web/src/components/ui/report/MarkToolbarButtons.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+
+import { useMarkToolbarButton, useMarkToolbarButtonState } from 'platejs/react';
+
+import { ToolbarButton } from './Toolbar';
+import { AppTooltip } from '../tooltip';
+
+export function MarkToolbarButton({
+  clear,
+  nodeType,
+  ...props
+}: React.ComponentProps<typeof ToolbarButton> & {
+  nodeType: string;
+  clear?: string[] | string;
+}) {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props: buttonProps } = useMarkToolbarButton(state);
+
+  return <ToolbarButton {...props} {...buttonProps} />;
+}

apps/web/src/components/ui/report/Toolbar.tsx

@@ -0,0 +1,364 @@
+'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 '../icons';
+
+import {
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator
+} from '@/components/ui/dropdown-menu';
+import { Separator } from '@/components/ui/separator';
+import { AppTooltip, TooltipBase as Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+export function Toolbar({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
+  return (
+    <ToolbarPrimitive.Root
+      className={cn('relative flex items-center select-none', className)}
+      {...props}
+    />
+  );
+}
+
+export function ToolbarToggleGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToolbarPrimitive.ToolbarToggleGroup>) {
+  return (
+    <ToolbarPrimitive.ToolbarToggleGroup
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+export function ToolbarLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToolbarPrimitive.Link>) {
+  return (
+    <ToolbarPrimitive.Link
+      className={cn('font-medium underline underline-offset-4', className)}
+      {...props}
+    />
+  );
+}
+
+export function ToolbarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToolbarPrimitive.Separator>) {
+  return (
+    <ToolbarPrimitive.Separator
+      className={cn('bg-border mx-2 my-1 w-px shrink-0', className)}
+      {...props}
+    />
+  );
+}
+
+// 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 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<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'asChild' | 'value'> &
+  VariantProps<typeof toolbarButtonVariants>;
+
+export const ToolbarButton = withTooltip(function ToolbarButton({
+  children,
+  className,
+  isDropdown,
+  pressed,
+  size = 'sm',
+  variant,
+  ...props
+}: ToolbarButtonProps) {
+  return typeof pressed === 'boolean' ? (
+    <ToolbarToggleGroup disabled={props.disabled} value="single" type="single">
+      <ToolbarToggleItem
+        className={cn(
+          toolbarButtonVariants({
+            size,
+            variant
+          }),
+          isDropdown && 'justify-between gap-1 pr-1',
+          className
+        )}
+        value={pressed ? 'single' : ''}
+        {...props}>
+        {isDropdown ? (
+          <>
+            <div className="flex flex-1 items-center gap-2 whitespace-nowrap">{children}</div>
+            <div className="text-muted-foreground size-3.5">
+              <ChevronDown data-icon />
+            </div>
+          </>
+        ) : (
+          children
+        )}
+      </ToolbarToggleItem>
+    </ToolbarToggleGroup>
+  ) : (
+    <ToolbarPrimitive.Button
+      className={cn(
+        toolbarButtonVariants({
+          size,
+          variant
+        }),
+        isDropdown && 'pr-1',
+        className
+      )}
+      {...props}>
+      {children}
+    </ToolbarPrimitive.Button>
+  );
+});
+
+export function ToolbarSplitButton({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToolbarButton>) {
+  return (
+    <ToolbarButton
+      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}
+      {...props}
+    />
+  );
+}
+
+type ToolbarSplitButtonPrimaryProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+  'value'
+> &
+  VariantProps<typeof toolbarButtonVariants>;
+
+export function ToolbarSplitButtonPrimary({
+  children,
+  className,
+  size = 'sm',
+  variant,
+  ...props
+}: ToolbarSplitButtonPrimaryProps) {
+  return (
+    <span
+      className={cn(
+        toolbarButtonVariants({
+          size,
+          variant
+        }),
+        'rounded-r-none',
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+        className
+      )}
+      {...props}>
+      {children}
+    </span>
+  );
+}
+
+export function ToolbarSplitButtonSecondary({
+  className,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'> & VariantProps<typeof dropdownArrowVariants>) {
+  return (
+    <span
+      className={cn(
+        dropdownArrowVariants({
+          size,
+          variant
+        }),
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+        className
+      )}
+      onClick={(e) => e.stopPropagation()}
+      role="button"
+      {...props}>
+      <div className="text-muted-foreground size-3.5">
+        <ChevronDown data-icon />
+      </div>
+    </span>
+  );
+}
+
+export function ToolbarToggleItem({
+  className,
+  size = 'sm',
+  variant,
+  ...props
+}: React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
+  VariantProps<typeof toolbarButtonVariants>) {
+  return (
+    <ToolbarPrimitive.ToggleItem
+      className={cn(toolbarButtonVariants({ size, variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export function ToolbarGroup({ children, className }: React.ComponentProps<'div'>) {
+  return (
+    <div className={cn('group/toolbar-group', 'relative hidden has-[button]:flex', className)}>
+      <div className="flex items-center">{children}</div>
+
+      <div className="mx-1.5 py-0.5 group-last/toolbar-group:hidden!">
+        <Separator orientation="vertical" />
+      </div>
+    </div>
+  );
+}
+
+type TooltipProps<T extends React.ElementType> = {
+  tooltip?: React.ReactNode;
+  tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
+  tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'children'>;
+  tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
+} & React.ComponentProps<T>;
+
+function withTooltip<T extends React.ElementType>(Component: T) {
+  return function ExtendComponent({
+    tooltip,
+    tooltipContentProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    ...props
+  }: TooltipProps<T>) {
+    const [mounted, setMounted] = React.useState(false);
+
+    React.useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    const component = <Component {...(props as React.ComponentProps<T>)} />;
+
+    if (tooltip && mounted) {
+      return (
+        <AppTooltip title={tooltip} side="top">
+          {component}
+        </AppTooltip>
+        // <Tooltip {...tooltipProps}>
+        //   <TooltipTrigger asChild {...tooltipTriggerProps}>
+        //     {component}
+        //   </TooltipTrigger>
+
+        //   <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+        // </Tooltip>
+      );
+    }
+
+    return component;
+  };
+}
+
+function TooltipContent({
+  children,
+  className,
+  // CHANGE
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        className={cn(
+          'bg-primary text-primary-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className
+        )}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}>
+        {children}
+        {/* CHANGE */}
+        {/* <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-primary fill-primary" /> */}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export function ToolbarMenuGroup({
+  children,
+  className,
+  label,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup> & { label?: string }) {
+  return (
+    <>
+      <DropdownMenuSeparator
+        className={cn(
+          'hidden',
+          'mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
+        )}
+      />
+
+      <DropdownMenuRadioGroup
+        {...props}
+        className={cn(
+          'hidden',
+          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemradio]]:block has-[[role=option]]:block',
+          className
+        )}>
+        {label && (
+          <DropdownMenuLabel className="text-muted-foreground text-xs font-semibold select-none">
+            {label}
+          </DropdownMenuLabel>
+        )}
+        {children}
+      </DropdownMenuRadioGroup>
+    </>
+  );
+}

apps/web/src/components/ui/tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React from 'react';
 import { KeyboardShortcutPill } from '../pills/KeyboardShortcutPills';
 import {
-  Tooltip as TooltipBase,
+  TooltipBase,
   TooltipContent as TooltipContentBase,
   TooltipProvider,
   TooltipTrigger
@@ -41,8 +41,10 @@ export const Tooltip = React.memo(
       if (!title || (!title && !shortcuts?.length)) return children;
 
       return (
-        <TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
-          <TooltipBase open={open}>
+        <TooltipBase
+          open={open}
+          delayDuration={delayDuration}
+          skipDelayDuration={skipDelayDuration}>
           <TooltipTrigger asChild>
             <span ref={ref} className={triggerClassName}>
               {children}
@@ -56,7 +58,6 @@ export const Tooltip = React.memo(
             <TooltipContent title={title} shortcut={shortcuts} />
           </TooltipContentBase>
         </TooltipBase>
-        </TooltipProvider>
       );
     }
   ),

apps/web/src/components/ui/tooltip/TooltipBase.tsx

@@ -4,19 +4,46 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function TooltipBase({
+  delayDuration,
+  skipDelayDuration,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  delayDuration?: number;
+  skipDelayDuration?: number;
+}) {
+  return (
+    <TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 7, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
+      data-slot="tooltip-content"
       sideOffset={sideOffset}
       className={cn(
         'bg-popover text-popover-foreground',
@@ -31,4 +58,4 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { TooltipBase, TooltipTrigger, TooltipContent, TooltipProvider };

apps/web/src/components/ui/tooltip/index.ts

@@ -1,4 +1,5 @@
 export * from './Tooltip';
+export { TooltipBase, TooltipContent, TooltipProvider, TooltipTrigger } from './TooltipBase';
 
 import { Tooltip } from './Tooltip';
 

apps/web/src/styles/tailwind.css

@@ -118,7 +118,7 @@
   --primary: var(--color-primary);
   --primary-foreground: var(--color-primary);
   --secondary: var(--color-gray-dark);
-  --muted: var(--color-gray-light);
+  --muted: var(--color-item-hover);
   --muted-foreground: var(--color-gray-dark);
   --accent: var(--color-primary);
   --accent-foreground: var(--color-primary);
@@ -131,8 +131,8 @@
 
 /* mostly used for tailwind extension */
 @theme inline {
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--color-item-hover);
+  --color-accent-foreground: var(--foreground);
   --color-destructive: var(--destructive);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);