@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/internal/plate-editor/plate-ui/menu.tsx

@@ -1,539 +0,0 @@
-'use client';
-
-import {
-  createContext, use, useEffect, useRef, useState, type ComponentProps, type ReactNode
-} from 'react';
-
-import * as Ariakit from '@ariakit/react';
-import { useComposedRef } from 'platejs/react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { CornerDownLeftIcon } from 'lucide-react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { useOnClickOutside } from '../hooks/use-on-click-outside';
-
-export type Action = {
-  filterItems?: boolean;
-  focusEditor?: boolean;
-  group?: string;
-  icon?: ReactNode;
-  items?: Action[];
-  keywords?: string[];
-  label?: string;
-  shortcut?: string;
-  value?: string;
-};
-
-export type ActionGroup = {
-  group?: string;
-  value?: string;
-};
-
-const SearchableContext = createContext(false);
-
-const MenuContext = createContext<{
-  isRootMenu: boolean;
-  open: boolean;
-}>({
-  isRootMenu: false,
-  open: false
-});
-
-export type MenuProps = Ariakit.MenuProviderProps & {
-  trigger?: ReactNode;
-  value?: string;
-  onOpenChange?: Ariakit.MenuProviderProps['setOpen'];
-  onRootMenuClose?: () => void;
-  onValueChange?: Ariakit.ComboboxProviderProps['setValue'];
-  onValuesChange?: Ariakit.MenuProviderProps['setValues'];
-};
-
-export function Menu({
-  children,
-  trigger,
-  value,
-  onOpenChange,
-  onRootMenuClose: _onRootMenuClose,
-  onValueChange = () => {},
-  onValuesChange,
-  ...props
-}: MenuProps) {
-  const isRootMenu = !Ariakit.useMenuContext();
-  const [open, setOpen] = useState(false);
-
-  const searchable = !!onValuesChange || isRootMenu;
-
-  const content = (
-    <Ariakit.MenuProvider
-      open={open}
-      setOpen={(v) => {
-        if (props.open === undefined) {
-          setOpen(v);
-        }
-
-        onOpenChange?.(v);
-      }}
-      setValues={onValuesChange}
-      showTimeout={100}
-      {...props}>
-      {trigger}
-
-      <MenuContext value={{ isRootMenu, open: props.open ?? open }}>
-        <SearchableContext value={searchable}>
-          {children}
-        </SearchableContext>
-      </MenuContext>
-    </Ariakit.MenuProvider>
-  );
-
-  return searchable ? (
-    <Ariakit.ComboboxProvider
-      includesBaseElement={false}
-      resetValueOnHide
-      setValue={onValueChange}
-      value={value}>
-      {content}
-    </Ariakit.ComboboxProvider>
-  ) : (
-    content
-  );
-}
-
-export function MenuTrigger({
-  children,
-  icon,
-  label,
-  ...props
-}: ComponentProps<typeof Ariakit.MenuButton> & {
-  icon?: ReactNode;
-  label?: ReactNode;
-}) {
-  return (
-    <Ariakit.MenuButton render={(children as any) ?? <MenuItem />} {...props}>
-      {icon}
-      {label && <span>{label}</span>}
-      <Ariakit.MenuButtonArrow className="ml-auto text-muted-foreground/80" />
-    </Ariakit.MenuButton>
-  );
-}
-
-const menuVariants = cva(
-  cn(
-    'group/menu',
-    'z-50 flex h-full min-w-[180px] max-w-[calc(100vw-24px)] flex-col p-0 text-popover-foreground',
-    'data-[state=closed]:hidden'
-  ),
-  {
-    defaultVariants: {
-      animateZoom: false,
-      variant: 'default'
-    },
-    variants: {
-      animateZoom: {
-        false: 'data-[state=open]:animate-popover',
-        true: 'data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=open]:animate-zoom'
-      },
-      variant: {
-        ai: 'w-full px-12 sm:px-[max(64px,calc(50%-350px))]',
-        aiSub: 'max-h-[70vh] w-[220px] rounded-xl bg-popover shadow-floating',
-        default:
-          'max-h-[70vh] w-[260px] overflow-y-auto rounded-xl bg-popover shadow-floating'
-      }
-    }
-  }
-);
-
-export type MenuContentProps = Ariakit.MenuProps
-  & VariantProps<typeof menuVariants> & {
-    animateZoom?: boolean;
-    onClickOutside?: (event: globalThis.MouseEvent) => void;
-  };
-
-export function MenuContent({
-  animateZoom,
-  children,
-  className,
-  ref,
-  variant,
-  onClickOutside,
-  ...props
-}: MenuContentProps) {
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  const { open } = use(MenuContext);
-  const side = useMenuSide();
-
-  useOnClickOutside(menuRef, onClickOutside);
-
-  return (
-    <Ariakit.Menu
-      className={cn(menuVariants({ animateZoom, variant }), className)}
-      data-side={side}
-      data-state={open ? 'open' : 'closed'}
-      fitViewport={true}
-      flip
-      gutter={4}
-      ref={useComposedRef(ref, menuRef)}
-      unmountOnHide
-      {...props}>
-      {children}
-    </Ariakit.Menu>
-  );
-}
-
-export function MenuSeparator(
-  props: ComponentProps<typeof Ariakit.MenuSeparator>
-) {
-  return <Ariakit.MenuSeparator {...props} className={cn(props.className)} />;
-}
-
-export function MenuGroup({
-  label,
-  ...props
-}: ComponentProps<typeof Ariakit.MenuGroup> & {
-  label?: ReactNode;
-}) {
-  return (
-    <>
-      <MenuSeparator
-        className={cn(
-          'hidden',
-          'peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
-        )} />
-
-      <Ariakit.MenuGroup
-        {...props}
-        className={cn(
-          'hidden',
-          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=option]]:block',
-          props.className
-        )}>
-        {label && (
-          <Ariakit.MenuGroupLabel className="select-none px-[14px] pt-1.5 pb-2 font-medium text-muted-foreground text-xs">
-            {label}
-          </Ariakit.MenuGroupLabel>
-        )}
-        {props.children}
-      </Ariakit.MenuGroup>
-    </>
-  );
-}
-
-export function MenuShortcut({ ...props }: ComponentProps<'span'>) {
-  return (
-    <span
-      {...props}
-      className={cn('text-muted-foreground/80 text-xs', props.className)} />
-  );
-}
-
-const menuItemVariants = cva(
-  'group/menu-item relative flex min-h-[28px] select-none items-center justify-between gap-2 px-2.5 text-accent-foreground text-sm outline-hidden transition-bg-ease data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4',
-  {
-    defaultVariants: {
-      isEmpty: false,
-      variant: 'default'
-    },
-    variants: {
-      isEmpty: {
-        false:
-          'cursor-pointer hover:bg-accent aria-expanded:bg-accent aria-selected:bg-accent data-active-item:bg-accent data-active-item:text-accent-foreground',
-        true: 'text-muted-foreground'
-      },
-      variant: {
-        default: 'mx-1 w-[calc(100%-8px)] rounded-sm'
-      }
-    }
-  }
-);
-
-export type MenuItemProps = Omit<Ariakit.ComboboxItemProps, 'store'> & {
-  checked?: boolean;
-  group?: string;
-  icon?: ReactNode;
-  label?: string;
-  name?: string;
-  parentGroup?: string;
-  preventClose?: boolean;
-  shortcut?: ReactNode;
-  shortcutEnter?: boolean;
-  value?: string;
-} & VariantProps<typeof menuItemVariants>;
-
-export function MenuItem({
-  checked,
-  className,
-  group,
-  icon,
-  isEmpty,
-  label,
-  name,
-  parentGroup,
-  preventClose,
-  shortcut,
-  shortcutEnter,
-  variant,
-  ...props
-}: Omit<Ariakit.ComboboxItemProps, 'store'> & {
-  checked?: boolean;
-  group?: string;
-  icon?: ReactNode;
-  label?: string;
-  name?: string;
-  parentGroup?: string;
-  preventClose?: boolean;
-  shortcut?: ReactNode;
-  shortcutEnter?: boolean;
-  value?: string;
-} & VariantProps<typeof menuItemVariants>) {
-  const menu = Ariakit.useMenuContext();
-
-  if (!menu) throw new Error('MenuItem should be used inside a Menu');
-
-  const searchable = use(SearchableContext);
-
-  const hasShortcut = !!shortcut || shortcutEnter;
-
-  const baseProps: MenuItemProps = {
-    blurOnHoverEnd: false,
-    focusOnHover: true,
-    label,
-    ...props,
-    className: cn(
-      menuItemVariants({ isEmpty, variant }),
-      !!hasShortcut && 'justify-between',
-      className
-    ),
-    group: parentGroup,
-    name: group
-  };
-
-  baseProps.children = (
-    <>
-      <div className="flex w-full items-center gap-2 whitespace-nowrap">
-        {icon && (
-          <span className="menu-item-icon text-subtle-foreground">{icon}</span>
-        )}
-        {baseProps.children ?? label}
-      </div>
-
-      {(hasShortcut || checked) && (
-        <div className="flex shrink-0 items-center justify-end">
-          {checked && <Ariakit.MenuItemCheck checked={checked} />}
-          {hasShortcut && (
-            <MenuShortcut>
-              {shortcut ?? (
-                <CornerDownLeftIcon className="hidden group-data-[active-item='true']/menu-item:inline-block" />
-              )}
-            </MenuShortcut>
-          )}
-          {checked && searchable && (
-            <Ariakit.VisuallyHidden>
-              {checked ? 'checked' : 'not checked'}
-            </Ariakit.VisuallyHidden>
-          )}
-        </div>
-      )}
-    </>
-  );
-
-  if (!searchable) {
-    if (!!name && props.value !== null) {
-      const radioProps = {
-        ...baseProps,
-        hideOnClick: true,
-        name,
-        value: props.value as any
-      };
-
-      return <Ariakit.MenuItemRadio {...radioProps} />;
-    }
-
-    return <Ariakit.MenuItem {...baseProps} />;
-  }
-
-  const hideOnClick: Ariakit.ComboboxItemProps['hideOnClick'] = (event) => {
-    const expandable = event.currentTarget.hasAttribute('aria-expanded');
-
-    if (expandable) return false;
-    if (preventClose) return false;
-
-    menu.hideAll();
-
-    return false;
-  };
-
-  return <Ariakit.ComboboxItem {...baseProps} hideOnClick={hideOnClick} />;
-}
-
-export const comboboxVariants = cva('', {
-  defaultVariants: {
-    variant: 'default'
-  },
-  variants: {
-    variant: {
-      ai: 'min-w-[280px] max-w-[calc(100vw-24px)] rounded-xl bg-popover py-0.5 shadow-toolbar',
-      default: 'mx-3 pt-3.5 pb-1.5'
-    }
-  }
-});
-
-export function ComboboxContent({
-  className,
-  variant = 'default',
-  ...props
-}: ComponentProps<'div'> & VariantProps<typeof comboboxVariants>) {
-  return (
-    <div className={cn(comboboxVariants({ variant }), className)} {...props} />
-  );
-}
-
-const comboboxListVariants = cva(
-  cn(
-    'group/combobox-list',
-    'h-full max-h-[70vh] grow overflow-y-auto rounded-lg [&:has(>:last-child:not([role=group]))]:pb-1.5',
-    'hidden has-[[role=option]]:block'
-  ),
-  {
-    defaultVariants: {
-      variant: 'default'
-    },
-    variants: {
-      variant: {
-        ai: 'my-1 h-full max-h-[min(40vh,320px)] w-fit min-w-[280px] max-w-[320px] overflow-y-auto bg-popover p-0 shadow-floating',
-        default: ''
-      }
-    }
-  }
-);
-
-export function ComboboxList({
-  className,
-  variant = 'default',
-  ...props
-}: ComponentProps<typeof Ariakit.ComboboxList>
-  & VariantProps<typeof comboboxListVariants>) {
-  return (
-    <Ariakit.ComboboxList
-      className={cn(comboboxListVariants({ variant }), className)}
-      {...props} />
-  );
-}
-
-export function ComboboxInput({
-  children,
-  ...props
-}: ComponentProps<typeof Ariakit.Combobox>) {
-  return <Ariakit.Combobox autoSelect render={children as any} {...props} />;
-}
-
-export function ComboboxEmpty() {
-  return (
-    <div className="py-1.5 group-has-[[role=option]]/combobox-list:hidden">
-      <div
-        className={cn(menuItemVariants({ isEmpty: true }), '')}
-        role="menuitem">
-        No results
-      </div>
-    </div>
-  );
-}
-
-// biome-ignore lint/performance/noBarrelFile: intentional re-export
-export * as Ariakit from '@ariakit/react';
-
-export function filterMenuItems(
-  { items = [], ...group }: Action,
-  searchValue: string
-): Action[] {
-  if (!searchValue) return items;
-  if (
-    [group.label, ...(group.keywords || [])]
-      .join(' ')
-      .toLowerCase()
-      .includes(searchValue.toLowerCase())
-  ) {
-    return items;
-  }
-
-  return items.filter(
-    item => item.filterItems
-      || [item.label, item.value, ...(item.keywords || [])]
-        .join(' ')
-        .toLowerCase()
-        .includes(searchValue.toLowerCase())
-  );
-}
-
-export function filterMenuGroups(
-  menuGroups: Action[],
-  searchValue: string
-): Action[] {
-  if (!searchValue) return menuGroups;
-
-  return menuGroups.reduce<Action[]>((acc, group) => {
-    const filteredItems = filterMenuItems(group, searchValue);
-
-    if (filteredItems.length > 0) {
-      acc.push({
-        ...group,
-        items: filteredItems
-      });
-    }
-
-    return acc;
-  }, []);
-}
-
-export function useComboboxValueState(): readonly [string, (value: string) => void] {
-  const store = Ariakit.useComboboxContext();
-  const searchValue = store?.useState('value') ?? '';
-
-  return [searchValue, store!.setValue as (value: string) => void] as const;
-}
-
-export function useMenuSide() {
-  const store = Ariakit.useMenuStore();
-  const currentPlacement = store?.useState('currentPlacement').split('-')[0];
-
-  return currentPlacement;
-}
-
-export function useContextMenu(anchorRect: { x: number; y: number }): {
-  store: any;
-  getAnchorRect: () => { x: number; y: number };
-  show: () => void;
-} {
-  const menu = Ariakit.useMenuStore();
-
-  useEffect(() => {
-    if (anchorRect) {
-      menu.render();
-    }
-  }, [anchorRect, menu]);
-
-  return {
-    store: menu as any,
-    getAnchorRect: () => anchorRect,
-    show: () => {
-      menu.show();
-      menu.setAutoFocusOnShow(true);
-    }
-  };
-}
-
-export function useMenuStore(): {
-  store: any;
-  show: (anchorElement: HTMLElement) => void;
-} {
-  const menu = Ariakit.useMenuStore();
-
-  return {
-    store: menu as any,
-    show: (anchorElement: HTMLElement) => {
-      menu.setAnchorElement(anchorElement);
-      menu.show();
-      menu.setAutoFocusOnShow(true);
-    }
-  };
-}

package/src/internal/plate-editor/plate-ui/mode-toolbar-button.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-
-import { SuggestionPlugin } from '@platejs/suggestion/react';
-import {
-  CheckIcon, EyeIcon, PencilLineIcon, PenIcon
-} from 'lucide-react';
-import { useEditorRef, usePlateState, usePluginOption } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-  type DropdownMenuProps
-} from './dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-export function ModeToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const [readOnly, setReadOnly] = usePlateState('readOnly');
-  const [open, setOpen] = useState(false);
-
-  const isSuggesting = usePluginOption(SuggestionPlugin, 'isSuggesting');
-
-  let value = 'editing';
-
-  if (readOnly) value = 'viewing';
-
-  if (isSuggesting) value = 'suggestion';
-
-  const item: Record<string, { icon: ReactNode; label: string }> = {
-    editing: {
-      icon: <PenIcon />,
-      label: 'Editing'
-    },
-    suggestion: {
-      icon: <PencilLineIcon />,
-      label: 'Suggestion'
-    },
-    viewing: {
-      icon: <EyeIcon />,
-      label: 'Viewing'
-    }
-  };
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
-          {item[value].icon}
-          <span className="hidden lg:inline">{item[value].label}</span>
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <DropdownMenuContent className="min-w-[180px]" align="start">
-          <DropdownMenuRadioGroup
-            value={value}
-            onValueChange={(newValue) => {
-              if (newValue === 'viewing') {
-                setReadOnly(true);
-
-                return;
-              }
-              setReadOnly(false);
-
-              if (newValue === 'suggestion') {
-                editor.setOption(SuggestionPlugin, 'isSuggesting', true);
-
-                return;
-              }
-              editor.setOption(SuggestionPlugin, 'isSuggesting', false);
-
-              if (newValue === 'editing') {
-                editor.tf.focus();
-
-                return;
-              }
-            }}>
-            <DropdownMenuRadioItem
-              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-              value="editing">
-              <Indicator />
-              {item.editing.icon}
-              {item.editing.label}
-            </DropdownMenuRadioItem>
-
-            <DropdownMenuRadioItem
-              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-              value="viewing">
-              <Indicator />
-              {item.viewing.icon}
-              {item.viewing.label}
-            </DropdownMenuRadioItem>
-
-            <DropdownMenuRadioItem
-              className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-              value="suggestion">
-              <Indicator />
-              {item.suggestion.icon}
-              {item.suggestion.label}
-            </DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenu>
-  );
-}
-
-function Indicator() {
-  return (
-    <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <CheckIcon />
-      </DropdownMenuItemIndicator>
-    </span>
-  );
-}

package/src/internal/plate-editor/plate-ui/more-toolbar-button.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { BlockMenuPlugin } from '@platejs/selection/react';
-import { MoreHorizontal } from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-
-import { useOpenState } from './dropdown-menu';
-import { ToolbarButton } from './toolbar';
-
-export function MoreToolbarButton() {
-  const editor = useEditorRef();
-  const openState = useOpenState();
-
-  return (
-    <ToolbarButton
-      data-plate-prevent-overlay
-      onClick={(e) => {
-        const blockAbove = editor.api.block()?.[0];
-
-        if (!blockAbove) return;
-
-        editor
-          .getApi(BlockMenuPlugin)
-          .blockMenu.showContextMenu(blockAbove.id as string, {
-            x: e.clientX,
-            y: e.clientY
-          });
-      }}
-      pressed={openState.open}
-      tooltip="More">
-      <MoreHorizontal />
-    </ToolbarButton>
-  );
-}

package/src/internal/plate-editor/plate-ui/paragraph-node-static.tsx

@@ -1,15 +0,0 @@
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function ParagraphElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement
-      {...props}
-      className="my-px px-0.5 py-[3px]"
-      style={{
-        backgroundColor: props.element.backgroundColor as any
-      }}>
-      {props.children}
-    </SlateElement>
-  );
-}