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

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

@@ -1,626 +0,0 @@
-'use client';
-
-import {
-  memo, useCallback, type ComponentPropsWithoutRef, type ReactElement, type ReactNode
-} from 'react';
-
-import {
-  type IEmojiFloatingLibrary,
-  type UseEmojiPickerType, useEmojiDropdownMenuState
-} from '@platejs/emoji/react';
-
-import {
-  type Emoji,
-  type EmojiCategoryList,
-  type EmojiIconList,
-  EmojiSettings,
-  type GridRow
-} from '@platejs/emoji';
-
-import {
-  AppleIcon,
-  ClockIcon,
-  CompassIcon,
-  DeleteIcon,
-  FlagIcon,
-  LeafIcon,
-  LightbulbIcon,
-  MusicIcon,
-  SearchIcon,
-  SmileIcon,
-  StarIcon,
-  XIcon
-} from 'lucide-react';
-import { Popover } from 'radix-ui';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Button } from './button';
-import { ToolbarButton } from './toolbar';
-
-export function EmojiPopover({
-  children,
-  control,
-  isOpen,
-  setIsOpen
-}: {
-  children: ReactNode;
-  control: ReactNode;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-}) {
-  return (
-    <Popover.Root onOpenChange={setIsOpen} open={isOpen}>
-      <Popover.Trigger asChild>{control}</Popover.Trigger>
-
-      <Popover.Portal>
-        <Popover.Content className="z-100">{children}</Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
-export function EmojiPicker({
-  clearSearch,
-  emoji,
-  emojiLibrary,
-  focusedCategory,
-  hasFound,
-  i18n,
-  icons = {
-    categories: emojiCategoryIcons,
-    search: emojiSearchIcons
-  },
-  isSearching,
-  refs,
-  searchResult,
-  searchValue,
-  setSearch,
-  settings = EmojiSettings,
-  visibleCategories,
-  handleCategoryClick,
-  onMouseOver,
-  onSelectEmoji
-}: Omit<UseEmojiPickerType, 'icons'> & {
-  icons?: EmojiIconList<ReactElement>;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex flex-col rounded-xl bg-popover text-popover-foreground',
-        'h-[23rem] w-80 border shadow-md'
-      )}>
-      <EmojiPickerNavigation
-        emojiLibrary={emojiLibrary}
-        focusedCategory={focusedCategory}
-        i18n={i18n}
-        icons={icons}
-        onClick={handleCategoryClick} />
-      <EmojiPickerSearchBar
-        i18n={i18n}
-        searchValue={searchValue}
-        setSearch={setSearch}>
-        <EmojiPickerSearchAndClear
-          clearSearch={clearSearch}
-          i18n={i18n}
-          searchValue={searchValue} />
-      </EmojiPickerSearchBar>
-      <EmojiPickerContent
-        emojiLibrary={emojiLibrary}
-        i18n={i18n}
-        isSearching={isSearching}
-        onMouseOver={onMouseOver}
-        onSelectEmoji={onSelectEmoji}
-        refs={refs}
-        searchResult={searchResult}
-        settings={settings}
-        visibleCategories={visibleCategories} />
-      <EmojiPickerPreview
-        emoji={emoji}
-        hasFound={hasFound}
-        i18n={i18n}
-        isSearching={isSearching} />
-    </div>
-  );
-}
-
-const EmojiButton = memo(
-  ({
-    emoji,
-    index,
-    onMouseOver,
-    onSelect
-  }: {
-    emoji: Emoji;
-    index: number;
-    onMouseOver: (emoji?: Emoji) => void;
-    onSelect: (emoji: Emoji) => void;
-  }) => (
-    <button
-      aria-label={emoji.skins[0].native}
-      className="group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none"
-      data-index={index}
-      onClick={() => onSelect(emoji)}
-      onMouseEnter={() => onMouseOver(emoji)}
-      onMouseLeave={() => onMouseOver()}
-      tabIndex={-1}
-      type="button">
-      <div
-        aria-hidden="true"
-        className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100" />
-      <span
-        className="relative"
-        data-emoji-set="native"
-        style={{
-          fontFamily:
-            '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
-        }}>
-        {emoji.skins[0].native}
-      </span>
-    </button>
-  )
-);
-
-const RowOfButtons = memo(
-  ({
-    emojiLibrary,
-    row,
-    onMouseOver,
-    onSelectEmoji
-  }: {
-    row: GridRow;
-  } & Pick<
-    UseEmojiPickerType,
-    'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'
-  >) => (
-    <div className="flex" data-index={row.id} key={row.id}>
-      {row.elements.map((emojiId, index) => (
-        <EmojiButton
-          emoji={emojiLibrary.getEmoji(emojiId)}
-          index={index}
-          key={emojiId}
-          onMouseOver={onMouseOver}
-          onSelect={onSelectEmoji} />
-      ))}
-    </div>
-  )
-);
-
-function EmojiSearchList({
-  emojiLibrary,
-  getRowWidth,
-  i18nSearchResult,
-  searchResult,
-  onSelectEmoji,
-  onMouseOver
-}: {
-  emojiLibrary: UseEmojiPickerType['emojiLibrary'];
-  getRowWidth: number;
-  i18nSearchResult: string;
-  searchResult: UseEmojiPickerType['searchResult'];
-  onSelectEmoji: UseEmojiPickerType['onSelectEmoji'];
-  onMouseOver: UseEmojiPickerType['onMouseOver'];
-}) {
-  return (
-    <div data-id="search" style={{ width: getRowWidth }}>
-      <div className="-top-px sticky z-1 bg-popover/90 p-1 py-2 font-semibold text-card-foreground text-sm backdrop-blur-xs">
-        {i18nSearchResult}
-      </div>
-      <div className="relative flex flex-wrap">
-        {searchResult.map((emoji: Emoji, index: number) => (
-          <EmojiButton
-            emoji={emojiLibrary.getEmoji(emoji.id)}
-            index={index}
-            key={emoji.id}
-            onMouseOver={onMouseOver}
-            onSelect={onSelectEmoji} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function EmojiPickerContent({
-  emojiLibrary,
-  i18n,
-  isSearching = false,
-  refs,
-  searchResult,
-  settings = EmojiSettings,
-  visibleCategories,
-  onMouseOver,
-  onSelectEmoji
-}: Pick<
-  UseEmojiPickerType,
-  | 'emojiLibrary'
-  | 'i18n'
-  | 'isSearching'
-  | 'onMouseOver'
-  | 'onSelectEmoji'
-  | 'refs'
-  | 'searchResult'
-  | 'settings'
-  | 'visibleCategories'
->) {
-  const getRowWidth = settings.perLine.value * settings.buttonSize.value;
-
-  const isCategoryVisible = useCallback(
-    (categoryId: any) => visibleCategories.has(categoryId) ? visibleCategories.get(categoryId) : false,
-    [visibleCategories]
-  );
-
-  const EmojiList = useCallback(
-    () => emojiLibrary
-      .getGrid()
-      .sections()
-      .map(({ id: categoryId }) => {
-        const section = emojiLibrary.getGrid().section(categoryId);
-        const { buttonSize } = settings;
-
-        return (
-          <div
-            data-id={categoryId}
-            key={categoryId}
-            ref={section.root}
-            style={{ width: getRowWidth }}>
-            <div className="-top-px sticky z-1 bg-popover/90 p-1 py-2 font-semibold text-sm backdrop-blur-xs">
-              {i18n.categories[categoryId]}
-            </div>
-            <div
-              className="relative flex flex-wrap"
-              style={{ height: section.getRows().length * buttonSize.value }}>
-              {isCategoryVisible(categoryId)
-                && section
-                  .getRows()
-                  .map((row: GridRow) => (
-                    <RowOfButtons
-                      emojiLibrary={emojiLibrary}
-                      key={row.id}
-                      onMouseOver={onMouseOver}
-                      onSelectEmoji={onSelectEmoji}
-                      row={row} />
-                  ))}
-            </div>
-          </div>
-        );
-      }),
-    [
-      emojiLibrary,
-      getRowWidth,
-      i18n.categories,
-      isCategoryVisible,
-      onSelectEmoji,
-      onMouseOver,
-      settings
-    ]
-  );
-
-  return (
-    <div
-      className={cn(
-        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',
-        '[&::-webkit-scrollbar]:w-4',
-        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',
-        ':hover:[&::-webkit-scrollbar-thumb]:bg-[#f3f4f6]',
-        '[&::-webkit-scrollbar-thumb]:min-h-[65px] [&::-webkit-scrollbar-thumb]:rounded-2xl [&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-white',
-        '[&::-webkit-scrollbar-track]:border-0'
-      )}
-      data-id="scroll"
-      ref={refs.current.contentRoot}>
-      <div className="h-full" ref={refs.current.content}>
-        {isSearching ? (
-          <EmojiSearchList
-            emojiLibrary={emojiLibrary}
-            getRowWidth={getRowWidth}
-            i18nSearchResult={i18n.searchResult}
-            onMouseOver={onMouseOver}
-            onSelectEmoji={onSelectEmoji}
-            searchResult={searchResult} />
-        ) : EmojiList()}
-      </div>
-    </div>
-  );
-}
-
-function EmojiPickerSearchBar({
-  children,
-  i18n,
-  searchValue,
-  setSearch
-}: {
-  children: ReactNode;
-} & Pick<UseEmojiPickerType, 'i18n' | 'searchValue' | 'setSearch'>) {
-  return (
-    <div className="flex items-center px-2">
-      <div className="relative flex grow items-center">
-        <input
-          aria-label="Search"
-          autoComplete="off"
-          className="block w-full appearance-none rounded-full border-0 bg-muted px-10 py-2 text-sm outline-hidden placeholder:text-muted-foreground focus-visible:outline-hidden"
-          onChange={event => setSearch(event.target.value)}
-          placeholder={i18n.search}
-          type="text"
-          value={searchValue} />
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function EmojiPickerSearchAndClear({
-  clearSearch,
-  i18n,
-  searchValue
-}: Pick<UseEmojiPickerType, 'clearSearch' | 'i18n' | 'searchValue'>) {
-  return (
-    <div className="flex items-center">
-      <div
-        className={cn(
-          '-translate-y-1/2 absolute top-1/2 left-3 z-10 flex size-5 items-center justify-center'
-        )}>
-        <SearchIcon className="size-4" />
-      </div>
-      {searchValue && (
-        <Button
-          aria-label="Clear"
-          className={cn(
-            '-translate-y-1/2 absolute top-1/2 right-1 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent'
-          )}
-          onClick={clearSearch}
-          size="icon"
-          title={i18n.clear}
-          type="button"
-          variant="ghost">
-          <DeleteIcon className="size-4" />
-        </Button>
-      )}
-    </div>
-  );
-}
-
-function EmojiPreview({ emoji }: Pick<UseEmojiPickerType, 'emoji'>) {
-  return (
-    <div className="flex h-20 items-center border-muted border-t p-2">
-      <div
-        className="flex items-center justify-center text-2xl"
-        style={{
-          fontFamily:
-            '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
-        }}>
-        {emoji?.skins[0].native}
-      </div>
-      <div className="overflow-hidden pl-2">
-        <div className="truncate text-sm">{emoji?.name}</div>
-        <div className="truncate text-xs">{`:${emoji?.id}:`}</div>
-      </div>
-    </div>
-  );
-}
-
-function NoEmoji({ i18n }: Pick<UseEmojiPickerType, 'i18n'>) {
-  return (
-    <div className="flex h-20 items-center border-muted border-t p-2">
-      <div className="flex items-center justify-center text-2xl">&#x1F622;</div>
-      <div className="overflow-hidden pl-2">
-        <div className="truncate font-semibold text-primary text-sm">
-          {i18n.searchNoResultsTitle}
-        </div>
-        <div className="truncate text-xs">{i18n.searchNoResultsSubtitle}</div>
-      </div>
-    </div>
-  );
-}
-
-function PickAnEmoji({ i18n }: Pick<UseEmojiPickerType, 'i18n'>) {
-  return (
-    <div className="flex h-20 items-center border-muted border-t p-2">
-      <div className="flex items-center justify-center text-2xl">&#x261D;&#xFE0F;</div>
-      <div className="overflow-hidden pl-2">
-        <div className="truncate font-semibold text-sm">{i18n.pick}</div>
-      </div>
-    </div>
-  );
-}
-
-function EmojiPickerPreview({
-  emoji,
-  hasFound = true,
-  i18n,
-  isSearching = false,
-  ...props
-}: Pick<UseEmojiPickerType, 'emoji' | 'hasFound' | 'i18n' | 'isSearching'>) {
-  const showPickEmoji = !emoji && !(isSearching && !hasFound);
-  const showNoEmoji = isSearching && !hasFound;
-  const showPreview = emoji;
-
-  return (
-    <>
-      {showPreview && <EmojiPreview emoji={emoji} {...props} />}
-      {showPickEmoji && <PickAnEmoji i18n={i18n} {...props} />}
-      {showNoEmoji && <NoEmoji i18n={i18n} {...props} />}
-    </>
-  );
-}
-
-const getBarProperty = (
-  emojiLibrary: IEmojiFloatingLibrary,
-  focusedCategory?: EmojiCategoryList
-) => {
-  let width = 0;
-  let position = 0;
-
-  if (focusedCategory) {
-    width = 100 / emojiLibrary.getGrid().size;
-    position = focusedCategory ? emojiLibrary.indexOf(focusedCategory) * 100 : 0;
-  }
-
-  return { position, width };
-};
-
-function EmojiPickerNavigation({
-  emojiLibrary,
-  focusedCategory,
-  i18n,
-  icons,
-  onClick
-}: {
-  onClick: (id: EmojiCategoryList) => void;
-} & Pick<
-  UseEmojiPickerType,
-  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'
->) {
-  const { position, width } = getBarProperty(emojiLibrary, focusedCategory);
-
-  return (
-    <nav
-      className="mb-2.5 border-0 border-b border-b-border border-solid p-3"
-      id="emoji-nav">
-      <div className="relative flex items-center">
-        {emojiLibrary
-          .getGrid()
-          .sections()
-          .map(({ id }) => (
-            <Button
-              aria-label={i18n.categories[id]}
-              className={cn(
-                'size-6 grow fill-current text-muted-foreground hover:bg-transparent hover:text-foreground',
-                id === focusedCategory
-                && 'pointer-events-none fill-current text-primary'
-              )}
-              key={id}
-              onClick={() => onClick(id)}
-              size="icon"
-              title={i18n.categories[id]}
-              type="button"
-              variant="ghost">
-              <span className="size-5">{icons.categories[id].outline}</span>
-            </Button>
-          ))}
-        <div
-          className="-bottom-3 absolute left-0 h-0.5 w-full rounded-t-lg bg-primary opacity-100 transition-transform duration-200"
-          style={{
-            transform: `translateX(${position}%)`,
-            visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
-            width: `${width}%`
-          }} />
-      </div>
-    </nav>
-  );
-}
-
-export const emojiCategoryIcons: Record<
-  EmojiCategoryList,
-  { outline: ReactElement; solid: ReactElement }
-> = {
-  activity: {
-    outline: (
-      <svg
-        className="size-full"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" />
-        <path d="M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1" />
-        <path d="m5 4.9 14 14.2" />
-        <path d="M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3" />
-      </svg>
-    ),
-    solid: (
-      <svg
-        className="size-full"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" />
-        <path d="M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1" />
-        <path d="m5 4.9 14 14.2" />
-        <path d="M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3" />
-      </svg>
-    )
-  },
-
-  custom: {
-    outline: <StarIcon className="size-full" />,
-    solid: <StarIcon className="size-full" />
-  },
-
-  flags: {
-    outline: <FlagIcon className="size-full" />,
-    solid: <FlagIcon className="size-full" />
-  },
-
-  foods: {
-    outline: <AppleIcon className="size-full" />,
-    solid: <AppleIcon className="size-full" />
-  },
-
-  frequent: {
-    outline: <ClockIcon className="size-full" />,
-    solid: <ClockIcon className="size-full" />
-  },
-
-  nature: {
-    outline: <LeafIcon className="size-full" />,
-    solid: <LeafIcon className="size-full" />
-  },
-
-  objects: {
-    outline: <LightbulbIcon className="size-full" />,
-    solid: <LightbulbIcon className="size-full" />
-  },
-
-  people: {
-    outline: <SmileIcon className="size-full" />,
-    solid: <SmileIcon className="size-full" />
-  },
-
-  places: {
-    outline: <CompassIcon className="size-full" />,
-    solid: <CompassIcon className="size-full" />
-  },
-
-  symbols: {
-    outline: <MusicIcon className="size-full" />,
-    solid: <MusicIcon className="size-full" />
-  }
-};
-
-const emojiSearchIcons = {
-  delete: <XIcon className="size-4 text-current" />,
-  loupe: <SearchIcon className="size-4 text-current" />
-};
-
-export function EmojiToolbarButton({
-  options,
-  ...props
-}: {
-  options?: any;
-} & ComponentPropsWithoutRef<typeof ToolbarButton>) {
-  const { emojiPickerState, isOpen, setIsOpen }
-    = useEmojiDropdownMenuState(options);
-
-  return (
-    <EmojiPopover
-      control={
-        <ToolbarButton pressed={isOpen} tooltip="Emoji" isDropdown {...props}>
-          <SmileIcon />
-        </ToolbarButton>
-      }
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}>
-      <EmojiPicker
-        {...emojiPickerState}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        settings={options?.settings} />
-    </EmojiPopover>
-  );
-}