flarecms 0.1.0 → 0.1.2

package/src/client/components/ui/icon-picker.tsx

@@ -1,485 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from './popover';
-import { Button } from './button';
-import { Input } from './input';
-import { cn } from '../../lib/utils';
-import type { LucideProps, LucideIcon } from 'lucide-react';
-import {
-  DynamicIcon,
-  dynamicIconImports,
-  type IconName,
-} from 'lucide-react/dynamic';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from './tooltip';
-import { iconsData } from './icons-data';
-import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
-import { Skeleton } from './skeleton';
-import Fuse from 'fuse.js';
-import { useDebounceValue } from 'usehooks-ts';
-
-export type IconData = (typeof iconsData)[number];
-
-interface IconPickerProps extends Omit<
-  React.ComponentPropsWithoutRef<typeof PopoverTrigger>,
-  'onSelect' | 'onOpenChange'
-> {
-  value?: IconName;
-  defaultValue?: IconName;
-  onValueChange?: (value: IconName) => void;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  triggerPlaceholder?: string;
-  iconsList?: IconData[];
-  categorized?: boolean;
-  modal?: boolean;
-}
-
-const IconRenderer = React.memo(({ name }: { name: IconName }) => {
-  return <Icon name={name} />;
-});
-IconRenderer.displayName = 'IconRenderer';
-
-const IconsColumnSkeleton = () => {
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <Skeleton className="h-4 w-1/2 rounded-md" />
-      <div className="grid grid-cols-5 gap-2 w-full">
-        {Array.from({ length: 40 }).map((_, i) => (
-          <Skeleton key={i} className="h-10 w-10 rounded-md" />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const useIconsData = () => {
-  const [icons, setIcons] = useState<IconData[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadIcons = async () => {
-      setIsLoading(true);
-
-      const { iconsData } = await import('./icons-data');
-      if (isMounted) {
-        setIcons(
-          iconsData.filter((icon: IconData) => {
-            return icon.name in dynamicIconImports;
-          }),
-        );
-        setIsLoading(false);
-      }
-    };
-
-    loadIcons();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  return { icons, isLoading };
-};
-
-const IconPicker = React.forwardRef<
-  React.ComponentRef<typeof PopoverTrigger>,
-  IconPickerProps
->(
-  (
-    {
-      value,
-      defaultValue,
-      onValueChange,
-      open,
-      defaultOpen,
-      onOpenChange,
-      children,
-      searchable = true,
-      searchPlaceholder = 'Search for an icon...',
-      triggerPlaceholder = 'Select an icon',
-      iconsList,
-      categorized = true,
-      modal = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const [selectedIcon, setSelectedIcon] = useState<IconName | undefined>(
-      defaultValue,
-    );
-    const [isOpen, setIsOpen] = useState(defaultOpen || false);
-    const [search, setSearch] = useDebounceValue('', 100);
-    const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-    const { icons } = useIconsData();
-    const [isLoading, setIsLoading] = useState(true);
-
-    const iconsToUse = useMemo(() => iconsList || icons, [iconsList, icons]);
-
-    const fuseInstance = useMemo(() => {
-      return new Fuse(iconsToUse, {
-        keys: ['name', 'tags', 'categories'],
-        threshold: 0.3,
-        ignoreLocation: true,
-        includeScore: true,
-      });
-    }, [iconsToUse]);
-
-    const filteredIcons = useMemo(() => {
-      if (search.trim() === '') {
-        return iconsToUse;
-      }
-
-      const results = fuseInstance.search(search.toLowerCase().trim());
-      return results.map((result) => result.item);
-    }, [search, iconsToUse, fuseInstance]);
-
-    const categorizedIcons = useMemo(() => {
-      if (!categorized || search.trim() !== '') {
-        return [{ name: 'All Icons', icons: filteredIcons }];
-      }
-
-      const categories = new Map<string, IconData[]>();
-
-      filteredIcons.forEach((icon) => {
-        if (icon.categories && icon.categories.length > 0) {
-          icon.categories.forEach((category) => {
-            if (!categories.has(category)) {
-              categories.set(category, []);
-            }
-            categories.get(category)!.push(icon);
-          });
-        } else {
-          const category = 'Other';
-          if (!categories.has(category)) {
-            categories.set(category, []);
-          }
-          categories.get(category)!.push(icon);
-        }
-      });
-
-      return Array.from(categories.entries())
-        .map(([name, icons]) => ({ name, icons }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-    }, [filteredIcons, categorized, search]);
-
-    const virtualItems = useMemo(() => {
-      const items: Array<{
-        type: 'category' | 'row';
-        categoryIndex: number;
-        rowIndex?: number;
-        icons?: IconData[];
-      }> = [];
-
-      categorizedIcons.forEach((category, categoryIndex) => {
-        items.push({ type: 'category', categoryIndex });
-
-        const rows = [];
-        for (let i = 0; i < category.icons.length; i += 5) {
-          rows.push(category.icons.slice(i, i + 5));
-        }
-
-        rows.forEach((rowIcons, rowIndex) => {
-          items.push({
-            type: 'row',
-            categoryIndex,
-            rowIndex,
-            icons: rowIcons,
-          });
-        });
-      });
-
-      return items;
-    }, [categorizedIcons]);
-
-    const categoryIndices = useMemo(() => {
-      const indices: Record<string, number> = {};
-
-      virtualItems.forEach((item, index) => {
-        if (item.type === 'category') {
-          indices[categorizedIcons[item.categoryIndex]!.name] = index;
-        }
-      });
-
-      return indices;
-    }, [virtualItems, categorizedIcons]);
-
-    const parentRef = React.useRef<HTMLDivElement>(null);
-
-    const virtualizer = useVirtualizer({
-      count: virtualItems.length,
-      getScrollElement: () => parentRef.current,
-      estimateSize: (index) =>
-        virtualItems[index]?.type === 'category' ? 25 : 40,
-      paddingEnd: 2,
-      gap: 10,
-      overscan: 5,
-    });
-
-    const handleValueChange = useCallback(
-      (icon: IconName) => {
-        if (value === undefined) {
-          setSelectedIcon(icon);
-        }
-        onValueChange?.(icon);
-      },
-      [value, onValueChange],
-    );
-
-    const handleOpenChange = useCallback(
-      (newOpen: boolean) => {
-        setSearch('');
-        if (open === undefined) {
-          setIsOpen(newOpen);
-        }
-        onOpenChange?.(newOpen);
-
-        setIsPopoverVisible(newOpen);
-
-        if (newOpen) {
-          setTimeout(() => {
-            virtualizer.measure();
-            setIsLoading(false);
-          }, 1);
-        }
-      },
-      [open, onOpenChange, virtualizer],
-    );
-
-    const handleIconClick = useCallback(
-      (iconName: IconName) => {
-        handleValueChange(iconName);
-        setIsOpen(false);
-        setSearch('');
-      },
-      [handleValueChange],
-    );
-
-    const handleSearchChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearch(e.target.value);
-
-        if (parentRef.current) {
-          parentRef.current.scrollTop = 0;
-        }
-
-        virtualizer.scrollToOffset(0);
-      },
-      [virtualizer],
-    );
-
-    const scrollToCategory = useCallback(
-      (categoryName: string) => {
-        const categoryIndex = categoryIndices[categoryName];
-
-        if (categoryIndex !== undefined && virtualizer) {
-          virtualizer.scrollToIndex(categoryIndex, {
-            align: 'start',
-            behavior: 'smooth',
-          });
-        }
-      },
-      [categoryIndices, virtualizer],
-    );
-
-    const categoryButtons = useMemo(() => {
-      if (!categorized || search.trim() !== '') return null;
-
-      return categorizedIcons.map((category) => (
-        <Button
-          key={category.name}
-          variant={'outline'}
-          size="sm"
-          className="text-xs"
-          onClick={(e) => {
-            e.stopPropagation();
-            scrollToCategory(category.name);
-          }}
-        >
-          {category.name.charAt(0).toUpperCase() + category.name.slice(1)}
-        </Button>
-      ));
-    }, [categorizedIcons, scrollToCategory, categorized, search]);
-
-    const renderIcon = useCallback(
-      (icon: IconData) => (
-        <TooltipProvider key={icon.name}>
-          <Tooltip>
-            <TooltipTrigger
-              className={cn(
-                'p-2 rounded-md border hover:bg-foreground/10 transition',
-                'flex items-center justify-center',
-              )}
-              onClick={() => handleIconClick(icon.name as IconName)}
-            >
-              <IconRenderer name={icon.name as IconName} />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{icon.name}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ),
-      [handleIconClick],
-    );
-
-    const renderVirtualContent = useCallback(() => {
-      if (filteredIcons.length === 0) {
-        return <div className="text-center text-gray-500">No icon found</div>;
-      }
-
-      return (
-        <div
-          className="relative w-full overscroll-contain"
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-          }}
-        >
-          {virtualizer.getVirtualItems().map((virtualItem: VirtualItem) => {
-            const item = virtualItems[virtualItem.index];
-
-            if (!item) return null;
-
-            const itemStyle = {
-              position: 'absolute' as const,
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`,
-            };
-
-            if (item.type === 'category') {
-              return (
-                <div
-                  key={virtualItem.key}
-                  style={itemStyle}
-                  className="top-0 bg-background z-10"
-                >
-                  <h3 className="font-medium text-sm capitalize">
-                    {categorizedIcons[item.categoryIndex]!.name}
-                  </h3>
-                  <div className="h-[1px] bg-foreground/10 w-full" />
-                </div>
-              );
-            }
-
-            return (
-              <div
-                key={virtualItem.key}
-                data-index={virtualItem.index}
-                style={itemStyle}
-              >
-                <div className="grid grid-cols-5 gap-2 w-full">
-                  {item.icons!.map(renderIcon)}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      );
-    }, [
-      virtualizer,
-      virtualItems,
-      categorizedIcons,
-      filteredIcons,
-      renderIcon,
-    ]);
-
-    React.useEffect(() => {
-      if (isPopoverVisible) {
-        setIsLoading(true);
-        const timer = setTimeout(() => {
-          setIsLoading(false);
-          virtualizer.measure();
-        }, 10);
-
-        const resizeObserver = new ResizeObserver(() => {
-          virtualizer.measure();
-        });
-
-        if (parentRef.current) {
-          resizeObserver.observe(parentRef.current);
-        }
-
-        return () => {
-          clearTimeout(timer);
-          resizeObserver.disconnect();
-        };
-      }
-    }, [isPopoverVisible, virtualizer]);
-
-    return (
-      <Popover
-        open={open ?? isOpen}
-        onOpenChange={handleOpenChange}
-        modal={modal}
-      >
-        <PopoverTrigger asChild ref={ref} {...props}>
-          {children || (
-            <Button variant="outline">
-              {value || selectedIcon ? (
-                <>
-                  <Icon name={(value || selectedIcon)!} />{' '}
-                  {value || selectedIcon}
-                </>
-              ) : (
-                triggerPlaceholder
-              )}
-            </Button>
-          )}
-        </PopoverTrigger>
-        <PopoverContent className="w-64 p-2">
-          {searchable && (
-            <Input
-              placeholder={searchPlaceholder}
-              onChange={handleSearchChange}
-              className="mb-2"
-            />
-          )}
-          {categorized && search.trim() === '' && (
-            <div className="flex flex-row gap-1 mt-2 overflow-x-auto pb-2">
-              {categoryButtons}
-            </div>
-          )}
-          <div
-            ref={parentRef}
-            className="max-h-60 overflow-auto"
-            style={{ scrollbarWidth: 'thin' }}
-          >
-            {isLoading ? <IconsColumnSkeleton /> : renderVirtualContent()}
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-IconPicker.displayName = 'IconPicker';
-
-interface IconProps extends Omit<LucideProps, 'ref'> {
-  name: IconName;
-}
-
-const Icon = React.forwardRef<React.ComponentRef<LucideIcon>, IconProps>(
-  ({ name, ...props }, ref) => {
-    return <DynamicIcon name={name} {...props} ref={ref} />;
-  },
-);
-Icon.displayName = 'Icon';
-
-export { IconPicker, Icon, type IconName };