@gientech/modual 1.3.0 → 1.3.1

package/src/modules/search/components/Editor/ui/command.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import type { DialogProps } from '@radix-ui/react-dialog';
-
-import { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';
-import { Command as CommandPrimitive } from 'cmdk';
-
-import { Icons } from './icons';
-
-import { Dialog, DialogContent } from './dialog';
-
-export const Command = withCn(
-  CommandPrimitive,
-  'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'
-);
-
-export function CommandDialog({ children, ...props }: DialogProps) {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export const CommandInput = withRef<typeof CommandPrimitive.Input>(
-  ({ className, ...props }, ref) => (
-    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-      <Icons.search className="mr-2 size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        className={cn(
-          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    </div>
-  )
-);
-
-export const CommandList = withCn(
-  CommandPrimitive.List,
-  'max-h-[500px] overflow-y-auto overflow-x-hidden'
-);
-
-export const CommandEmpty = withCn(
-  CommandPrimitive.Empty,
-  'py-6 text-center text-sm'
-);
-
-export const CommandGroup = withCn(
-  CommandPrimitive.Group,
-  'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'
-);
-
-export const CommandSeparator = withCn(
-  CommandPrimitive.Separator,
-  '-mx-1 h-px bg-border'
-);
-
-export const CommandItem = withCn(
-  CommandPrimitive.Item,
-  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50'
-);
-
-export const CommandShortcut = withCn(
-  createPrimitiveElement('span'),
-  'ml-auto text-xs tracking-widest text-muted-foreground'
-);

package/src/modules/search/components/Editor/ui/comment-avatar.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { CommentsPlugin } from '@udecode/plate-comments/react';
-import { useEditorPlugin } from '@udecode/plate-common/react';
-
-import { Avatar, AvatarFallback, AvatarImage } from './avatar';
-
-export function CommentAvatar({ userId }: { userId: null | string }) {
-  const { useOption } = useEditorPlugin(CommentsPlugin);
-  const user = useOption('userById', userId);
-
-  if (!user) return null;
-
-  return (
-    <Avatar className="size-5">
-      <AvatarImage alt={user.name} src={user.avatarUrl} />
-      <AvatarFallback>{user.name?.[0]}</AvatarFallback>
-    </Avatar>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-create-form.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  CommentNewSubmitButton,
-  CommentNewTextarea,
-  CommentsPlugin,
-} from '@udecode/plate-comments/react';
-import { useEditorPlugin } from '@udecode/plate-common/react';
-
-import { buttonVariants } from './button';
-import { CommentAvatar } from './comment-avatar';
-import { inputVariants } from './input';
-
-export function CommentCreateForm() {
-  const { useOption } = useEditorPlugin(CommentsPlugin);
-
-  const myUserId = useOption('myUserId');
-
-  return (
-    <div className="flex w-full space-x-2">
-      <CommentAvatar userId={myUserId} />
-
-      <div className="flex grow flex-col items-end gap-2">
-        <CommentNewTextarea className={inputVariants()} />
-
-        <CommentNewSubmitButton
-          className={cn(buttonVariants({ size: 'sm' }), 'w-[90px]')}
-        >
-          Comment
-        </CommentNewSubmitButton>
-      </div>
-    </div>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-item.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  CommentProvider,
-  CommentsPlugin,
-  useCommentItemContentState,
-} from '@udecode/plate-comments/react';
-import { useEditorPlugin } from '@udecode/plate-common/react';
-import { formatDistance } from 'date-fns';
-
-import { CommentAvatar } from './comment-avatar';
-import { CommentMoreDropdown } from './comment-more-dropdown';
-import { CommentResolveButton } from './comment-resolve-button';
-import { CommentValue } from './comment-value';
-
-type PlateCommentProps = {
-  commentId: string;
-};
-
-function CommentItemContent() {
-  const {
-    comment,
-    commentText,
-    editingValue,
-    isMyComment,
-    isReplyComment,
-    user,
-  } = useCommentItemContentState();
-
-  return (
-    <div>
-      <div className="relative flex items-center gap-2">
-        <CommentAvatar userId={comment.userId} />
-
-        <h4 className="text-sm font-semibold leading-none">{user?.name}</h4>
-
-        <div className="text-xs leading-none text-muted-foreground">
-          {formatDistance(comment.createdAt, Date.now())} ago
-        </div>
-
-        {isMyComment && (
-          <div className="absolute -right-0.5 -top-0.5 flex space-x-1">
-            {isReplyComment ? null : <CommentResolveButton />}
-
-            <CommentMoreDropdown />
-          </div>
-        )}
-      </div>
-
-      <div className="mb-4 pl-7 pt-0.5">
-        {editingValue ? (
-          <CommentValue />
-        ) : (
-          <div className="whitespace-pre-wrap text-sm">{commentText}</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function CommentItem({ commentId }: PlateCommentProps) {
-  const { useOption } = useEditorPlugin(CommentsPlugin);
-  const comment = useOption('commentById', commentId);
-
-  if (!comment) return null;
-
-  return (
-    <CommentProvider id={commentId} key={commentId}>
-      <CommentItemContent />
-    </CommentProvider>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-leaf.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { TCommentText } from '@udecode/plate-comments';
-
-import { cn } from '@udecode/cn';
-import {
-  useCommentLeaf,
-  useCommentLeafState,
-} from '@udecode/plate-comments/react';
-import { PlateLeaf, type PlateLeafProps } from '@udecode/plate-common/react';
-
-export function CommentLeaf({
-  className,
-  ...props
-}: PlateLeafProps<TCommentText>) {
-  const { children, leaf, nodeProps } = props;
-
-  const state = useCommentLeafState({ leaf });
-  const { props: rootProps } = useCommentLeaf(state);
-
-  if (!state.commentCount) return <>{children}</>;
-
-  let aboveChildren = <>{children}</>;
-
-  if (!state.isActive) {
-    for (let i = 1; i < state.commentCount; i++) {
-      aboveChildren = <span className="bg-primary/20">{aboveChildren}</span>;
-    }
-  }
-
-  return (
-    <PlateLeaf
-      {...props}
-      className={cn(
-        'border-b-2 border-b-primary/40',
-        state.isActive ? 'bg-primary/40' : 'bg-primary/20',
-        className
-      )}
-      nodeProps={{
-        ...rootProps,
-        ...nodeProps,
-      }}
-    >
-      {aboveChildren}
-    </PlateLeaf>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-more-dropdown.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  useCommentDeleteButton,
-  useCommentDeleteButtonState,
-  useCommentEditButton,
-  useCommentEditButtonState,
-} from '@udecode/plate-comments/react';
-
-import { Icons } from './icons';
-
-import { Button } from './button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-
-export function CommentMoreDropdown() {
-  const editButtonState = useCommentEditButtonState();
-  const { props: editProps } = useCommentEditButton(editButtonState);
-  const deleteButtonState = useCommentDeleteButtonState();
-  const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);
-
-  return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button className={cn('h-6 p-1 text-muted-foreground')} variant="ghost">
-          <Icons.more className="size-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem {...editProps}>Edit comment</DropdownMenuItem>
-        <DropdownMenuItem {...deleteProps}>Delete comment</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-reply-items.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  SCOPE_ACTIVE_COMMENT,
-  useCommentReplies,
-} from '@udecode/plate-comments/react';
-
-import { CommentItem } from './comment-item';
-
-export function CommentReplyItems() {
-  const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);
-
-  return (
-    <>
-      {Object.keys(commentReplies).map((id) => (
-        <CommentItem commentId={id} key={id} />
-      ))}
-    </>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-resolve-button.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  CommentResolveButton as CommentResolveButtonPrimitive,
-  useComment,
-} from '@udecode/plate-comments/react';
-
-import { Icons } from './icons';
-
-import { buttonVariants } from './button';
-
-export function CommentResolveButton() {
-  const comment = useComment()!;
-
-  return (
-    <CommentResolveButtonPrimitive
-      className={cn(
-        buttonVariants({ variant: 'ghost' }),
-        'h-6 p-1 text-muted-foreground'
-      )}
-    >
-      {comment.isResolved ? (
-        <Icons.refresh className="size-4" />
-      ) : (
-        <Icons.check className="size-4" />
-      )}
-    </CommentResolveButtonPrimitive>
-  );
-}

package/src/modules/search/components/Editor/ui/comment-value.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  CommentEditActions,
-  CommentEditTextarea,
-} from '@udecode/plate-comments/react';
-
-import { buttonVariants } from './button';
-import { inputVariants } from './input';
-
-export function CommentValue() {
-  return (
-    <div className="my-2 flex flex-col items-end gap-2">
-      <CommentEditTextarea className={cn(inputVariants(), 'min-h-[60px]')} />
-
-      <div className="flex space-x-2">
-        <CommentEditActions.CancelButton
-          className={buttonVariants({ size: 'xs', variant: 'outline' })}
-        >
-          Cancel
-        </CommentEditActions.CancelButton>
-
-        <CommentEditActions.SaveButton
-          className={buttonVariants({ size: 'xs', variant: 'default' })}
-        >
-          Save
-        </CommentEditActions.SaveButton>
-      </div>
-    </div>
-  );
-}

package/src/modules/search/components/Editor/ui/comments-popover.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  CommentProvider,
-  CommentsPositioner,
-  SCOPE_ACTIVE_COMMENT,
-  useFloatingCommentsContentState,
-  useFloatingCommentsState,
-} from '@udecode/plate-comments/react';
-import { PortalBody } from '@udecode/plate-common/react';
-
-import { CommentCreateForm } from './comment-create-form';
-import { CommentItem } from './comment-item';
-import { CommentReplyItems } from './comment-reply-items';
-import { popoverVariants } from './popover';
-
-export type FloatingCommentsContentProps = {
-  disableForm?: boolean;
-};
-
-export function CommentsPopoverContent(props: FloatingCommentsContentProps) {
-  const { disableForm } = props;
-
-  const { activeCommentId, hasNoComment, myUserId, ref } =
-    useFloatingCommentsContentState();
-
-  return (
-    <CommentProvider
-      id={activeCommentId!}
-      key={activeCommentId}
-      scope={SCOPE_ACTIVE_COMMENT}
-    >
-      <div className={cn(popoverVariants(), 'relative w-[310px]')} ref={ref}>
-        {!hasNoComment && (
-          <>
-            <CommentItem commentId={activeCommentId!} key={activeCommentId} />
-
-            <CommentReplyItems />
-          </>
-        )}
-
-        {!!myUserId && !disableForm && <CommentCreateForm />}
-      </div>
-    </CommentProvider>
-  );
-}
-
-export function CommentsPopover() {
-  const { activeCommentId, loaded } = useFloatingCommentsState();
-
-  if (!loaded || !activeCommentId) return null;
-
-  return (
-    <PortalBody>
-      <CommentsPositioner className="absolute z-50 w-[418px] pb-4">
-        <CommentsPopoverContent />
-      </CommentsPositioner>
-    </PortalBody>
-  );
-}

package/src/modules/search/components/Editor/ui/date-element.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { cn, withRef } from '@udecode/cn';
-import { setNodes } from '@udecode/plate-common';
-import { PlateElement, findNodePath } from '@udecode/plate-common/react';
-
-import { Calendar } from './calendar';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-
-export const DateElement = withRef<typeof PlateElement>(
-  ({ children, className, ...props }, ref) => {
-    const { editor, element } = props;
-
-    return (
-      <PlateElement
-        className={cn('inline-block', className)}
-        contentEditable={false}
-        ref={ref}
-        {...props}
-      >
-        <Popover>
-          <PopoverTrigger asChild>
-            <span
-              className={cn(
-                'w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground'
-              )}
-              contentEditable={false}
-            >
-              {element.date ? (
-                (() => {
-                  const today = new Date();
-                  const elementDate = new Date(element.date as string);
-                  const isToday =
-                    elementDate.getDate() === today.getDate() &&
-                    elementDate.getMonth() === today.getMonth() &&
-                    elementDate.getFullYear() === today.getFullYear();
-
-                  const isYesterday =
-                    new Date(
-                      today.setDate(today.getDate() - 1)
-                    ).toDateString() === elementDate.toDateString();
-                  const isTomorrow =
-                    new Date(
-                      today.setDate(today.getDate() + 2)
-                    ).toDateString() === elementDate.toDateString();
-
-                  if (isToday) return 'Today';
-                  if (isYesterday) return 'Yesterday';
-                  if (isTomorrow) return 'Tomorrow';
-
-                  return elementDate.toLocaleDateString(undefined, {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  });
-                })()
-              ) : (
-                <span>Pick a date</span>
-              )}
-            </span>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
-            <Calendar
-              initialFocus
-              mode="single"
-              onSelect={(date) => {
-                if (!date) return;
-
-                setNodes(
-                  editor,
-                  { date: date.toDateString() },
-                  { at: findNodePath(editor, element) }
-                );
-              }}
-              selected={new Date(element.date as string)}
-            />
-          </PopoverContent>
-        </Popover>
-        {children}
-      </PlateElement>
-    );
-  }
-);

package/src/modules/search/components/Editor/ui/dialog.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';
-
-import { Icons } from './icons';
-
-export const Dialog = DialogPrimitive.Root;
-
-export const DialogTrigger = DialogPrimitive.Trigger;
-
-export const DialogPortal = DialogPrimitive.Portal;
-
-export const DialogClose = DialogPrimitive.Close;
-
-export const DialogOverlay = withCn(
-  DialogPrimitive.Overlay,
-  'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
-);
-
-export const DialogContent = withRef<typeof DialogPrimitive.Content>(
-  ({ children, className, ...props }, ref) => (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        className={cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          className
-        )}
-        ref={ref}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <Icons.close className="size-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-);
-
-export const DialogHeader = withCn(
-  createPrimitiveElement('div'),
-  'flex flex-col space-y-1.5 text-center sm:text-left'
-);
-
-export const DialogFooter = withCn(
-  createPrimitiveElement('div'),
-  'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'
-);
-
-export const DialogTitle = withCn(
-  DialogPrimitive.Title,
-  'text-lg font-semibold leading-none tracking-tight'
-);
-
-export const DialogDescription = withCn(
-  DialogPrimitive.Description,
-  'text-sm text-muted-foreground'
-);