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

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

@@ -1,264 +0,0 @@
-'use client';
-
-import { useCallback, useState, type ComponentProps } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { CheckIcon, ChevronRightIcon } from 'lucide-react';
-import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export const dropdownMenuItemVariants = cva(
-  cn(
-    'no-focus-ring relative flex cursor-pointer select-none items-center gap-2 rounded-md align-middle text-sm transition-bg-ease data-disabled:pointer-events-none data-disabled:opacity-50',
-    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground',
-    'text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground'
-  ),
-  {
-    defaultVariants: {
-      size: 'default',
-      variant: 'default'
-    },
-    variants: {
-      size: {
-        default: 'mx-1 h-[28px] w-[calc(100%-8px)] px-2.5',
-        none: ''
-      },
-      variant: {
-        default: 'focus:bg-accent focus:text-accent-foreground',
-        none: ''
-      }
-    }
-  }
-);
-
-const dropdownMenuLabelVariants = cva(
-  cn(
-    'mt-1.5 mb-2 cursor-default select-none px-[14px] font-medium text-muted-foreground text-xs'
-  ),
-  {
-    variants: {
-      inset: {
-        true: 'pl-8'
-      }
-    }
-  }
-);
-
-export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
-
-export function DropdownMenu(props: DropdownMenuProps) {
-  return <DropdownMenuPrimitive.Root {...props} />;
-}
-
-export function DropdownMenuTrigger(
-  props: DropdownMenuPrimitive.DropdownMenuTriggerProps
-) {
-  return <DropdownMenuPrimitive.Trigger {...props} />;
-}
-
-export function DropdownMenuGroup(
-  props: DropdownMenuPrimitive.DropdownMenuGroupProps
-) {
-  return <DropdownMenuPrimitive.Group className="py-1.5" {...props} />;
-}
-
-export function DropdownMenuPortal(
-  props: DropdownMenuPrimitive.DropdownMenuPortalProps
-) {
-  return <DropdownMenuPrimitive.Portal {...props} />;
-}
-
-export function DropdownMenuSub(
-  props: DropdownMenuPrimitive.DropdownMenuSubProps
-) {
-  return <DropdownMenuPrimitive.Sub {...props} />;
-}
-
-export function DropdownMenuRadioGroup(
-  props: DropdownMenuPrimitive.DropdownMenuRadioGroupProps
-) {
-  return <DropdownMenuPrimitive.RadioGroup {...props} />;
-}
-
-export function DropdownMenuSubTrigger({
-  children,
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      className={cn(
-        'mx-1 flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
-        'no-focus-ring',
-        'data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-        inset && 'pl-8',
-        className
-      )}
-      {...props}>
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-}
-
-export function DropdownMenuSubContent({
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      className={cn(
-        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-32 overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[state=closed]:animate-out data-[state=open]:animate-in',
-        className
-      )}
-      {...props} />
-  );
-}
-
-export function DropdownMenuContent({
-  className,
-  portal,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Content> & {
-  portal?: boolean;
-}) {
-  const content = (
-    <DropdownMenuPrimitive.Content
-      className={cn(
-        'no-focus-ring z-50 min-w-32 max-w-[100vw] overflow-hidden rounded-lg bg-popover p-0 text-popover-foreground text-sm shadow-floating',
-        'data-[state=closed]:hidden 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',
-        className
-      )}
-      sideOffset={4}
-      {...props} />
-  );
-
-  if (portal) {
-    return (
-      <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>
-    );
-  }
-
-  return content;
-}
-
-export function DropdownMenuItem({
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Item>
-  & VariantProps<typeof dropdownMenuItemVariants>) {
-  return (
-    <DropdownMenuPrimitive.Item
-      className={cn(dropdownMenuItemVariants(), className)}
-      {...props} />
-  );
-}
-
-export function DropdownMenuCheckboxItem({
-  children,
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      className={cn(
-        'no-focus-ring relative flex select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 transition-bg-ease focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4',
-        'mx-1 h-[28px] cursor-pointer px-2.5 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground',
-        className
-      )}
-      {...props}>
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-}
-
-export function DropdownMenuRadioItem({
-  children,
-  className,
-  hideIcon,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
-  hideIcon?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      className={cn(
-        'no-focus-ring relative flex select-none items-center rounded-sm pr-2 pl-8 transition-bg-ease focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        'mx-1 h-[28px] cursor-pointer gap-2 px-2.5 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4',
-        className
-      )}
-      {...props}>
-      {!hideIcon && (
-        <span className="absolute right-2 flex size-3.5 items-center justify-center">
-          <DropdownMenuPrimitive.ItemIndicator>
-            <CheckIcon />
-          </DropdownMenuPrimitive.ItemIndicator>
-        </span>
-      )}
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-export function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      className={cn(dropdownMenuLabelVariants({ inset }), className)}
-      {...props} />
-  );
-}
-
-export function DropdownMenuSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      className={cn('-mx-1 my-1 h-px bg-muted', className)}
-      {...props} />
-  );
-}
-
-export function DropdownMenuShortcut({
-  className,
-  ...props
-}: ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props} />
-  );
-}
-
-export const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
-
-export function useOpenState() {
-  const [open, setOpen] = useState(false);
-
-  const onOpenChange = useCallback(
-    (_value = !open) => {
-      setOpen(_value);
-    },
-    [open]
-  );
-
-  return {
-    open,
-    onOpenChange
-  };
-}

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

@@ -1,40 +0,0 @@
-'use client';
-
-import {
-  Plate, PlateContent, type PlateContentProps, usePlateEditor
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { editorVariants } from './editor';
-
-export function EditorStatic({
-  children,
-  className,
-  editor: editorProp,
-  value,
-  variant,
-  ...props
-}: {
-  editor?: any;
-  value?: any;
-  variant?: 'aiChat' | 'comment' | 'default';
-} & Omit<PlateContentProps, 'editor' | 'value'>) {
-  const localEditor = usePlateEditor({ value });
-  const editor = editorProp ?? localEditor;
-
-  return (
-    <Plate editor={editor as any} readOnly>
-      <PlateContent
-        className={cn(
-          editorVariants({ variant }),
-          'pointer-events-none select-text',
-          className
-        )}
-        readOnly
-        {...props}>
-        {children}
-      </PlateContent>
-    </Plate>
-  );
-}

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

@@ -1,146 +0,0 @@
-'use client';
-
-import { type HTMLAttributes } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import {
-  PlateContainer,
-  PlateContent,
-  type PlateContentProps,
-  useEditorRef
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-const editorContainerVariants = cva(
-  'relative w-full cursor-text overflow-y-auto font-[ui-sans-serif,_-apple-system,_BlinkMacSystemFont,_"Segoe_UI_Variable_Display",_"Segoe_UI",_Helvetica,_"Apple_Color_Emoji",_Arial,_sans-serif,_"Segoe_UI_Emoji",_"Segoe_UI_Symbol"] caret-primary selection:bg-brand/25 focus-visible:outline-hidden [&_.slate-selection-area]:bg-brand/15',
-  {
-    defaultVariants: {
-      variant: 'default'
-    },
-    variants: {
-      variant: {
-        comment: cn(
-          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',
-          'rounded-md border-[1.5px] border-transparent bg-transparent',
-          'has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30',
-          'has-aria-disabled:border-input has-aria-disabled:bg-muted'
-        ),
-        default: 'h-full',
-        demo: 'h-[650px]',
-        select: cn(
-          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
-          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'
-        )
-      }
-    }
-  }
-);
-
-export function EditorContainer({
-  className,
-  variant,
-  ...props
-}: HTMLAttributes<HTMLDivElement> & VariantProps<typeof editorContainerVariants>) {
-  const editor = useEditorRef();
-
-  return (
-    <PlateContainer
-      className={cn(
-        'ignore-click-outside/toolbar',
-        editorContainerVariants({ variant }),
-        className
-      )}
-      onClick={(e) => {
-        if (variant === 'comment') {
-          e.preventDefault();
-          editor.tf.focus({ edge: 'endEditor' });
-        }
-      }}
-      onMouseDown={(e) => {
-        if (variant === 'comment') {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      }}
-      {...props} />
-  );
-}
-
-export const editorVariants = cva(
-  cn(
-    'group/editor pt-4',
-    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',
-    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-hidden',
-    '**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
-    '[&_strong]:font-bold'
-  ),
-  {
-    defaultVariants: {
-      variant: 'default'
-    },
-    variants: {
-      disabled: {
-        true: 'cursor-not-allowed opacity-50'
-      },
-      focused: {
-        true: 'ring-2 ring-ring ring-offset-2'
-      },
-      variant: {
-        ai: 'px-0 text-base md:text-sm',
-        aiChat:
-          'max-h-[min(70vh,320px)] max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
-        comment: cn('rounded-none border-none bg-transparent text-sm'),
-        default:
-          'min-h-full px-[70px] pb-72 text-base sm:px-[max(100px,calc(50%-350px))]',
-        demo: 'h-full px-[70px] pt-4 pb-72 text-base sm:px-[max(100px,calc(50%-350px))]',
-        fullWidth: 'min-h-full px-[70px] pb-72 text-base',
-        select: 'px-3 py-2 text-base data-readonly:w-fit',
-        update: 'px-0 text-sm',
-        versionHistory: 'px-0 pb-[30vh] text-base'
-      }
-    }
-  }
-);
-
-export type EditorProps = PlateContentProps
-  & VariantProps<typeof editorVariants>;
-
-export function Editor({
-  className,
-  disabled,
-  focused,
-  variant,
-  onClick,
-  onMouseDown,
-  ...props
-}: PlateContentProps & VariantProps<typeof editorVariants>) {
-  return (
-    <PlateContent
-      className={cn(
-        editorVariants({
-          disabled,
-          focused,
-          variant
-        }),
-        className
-      )}
-      disableDefaultStyles
-      onClick={(e) => {
-        if (variant === 'comment') {
-          e.stopPropagation();
-        }
-
-        onClick?.(e);
-      }}
-      onMouseDown={(e) => {
-        if (variant === 'comment') {
-          e.stopPropagation();
-        }
-
-        onMouseDown?.(e);
-      }}
-      {...props} />
-  );
-}

package/src/internal/plate-editor/plate-ui/emoji-node.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import { type TElement } from 'platejs';
-
-import {
-  PlateElement,
-  type PlateElementProps
-} from 'platejs/react';
-
-type TEmojiInputElement = TElement & { data?: any[] };
-
-import {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxInput,
-  InlineComboboxItem
-} from './inline-combobox';
-
-export function EmojiInputElement(
-  props: PlateElementProps<TEmojiInputElement>
-) {
-  const { element } = props;
-
-  return (
-    <PlateElement {...props} as="span">
-      <InlineCombobox element={element} trigger=":">
-        <InlineComboboxInput />
-
-        <InlineComboboxContent>
-          <InlineComboboxEmpty>No emoji found.</InlineComboboxEmpty>
-
-          {element.data?.map((emoji: any) => (
-            <InlineComboboxItem
-              key={emoji.id}
-              keywords={emoji.keywords}
-              label={emoji.name}
-              value={emoji.id}>
-              <span className="mr-2">{emoji.skins?.[0]?.native}</span>
-              {emoji.name}
-            </InlineComboboxItem>
-          ))}
-        </InlineComboboxContent>
-      </InlineCombobox>
-      {props.children}
-    </PlateElement>
-  );
-}