@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/sidebar/context.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+
+import { Tooltip } from 'erxes-ui/components/tooltip';
+import { useIsMobile } from 'erxes-ui/hooks/use-mobile';
+import { cn } from 'erxes-ui/lib/utils';
+import { useScopedHotkeys } from 'erxes-ui/modules/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from 'erxes-ui/modules/hotkey/types/AppHotkeyScope';
+import { Key } from 'erxes-ui/types/Key';
+import {
+  nextCollapseState,
+  SIDEBAR_COLLAPSE_COOKIE_NAME,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_COMPACT,
+  SIDEBAR_WIDTH_ICON,
+  type CollapseState,
+} from './constants';
+
+type ISidebarContext = {
+  state: 'expanded' | 'collapsed';
+  collapseState: CollapseState;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<ISidebarContext | null>(null);
+
+export function useOptionalSidebar() {
+  return React.useContext(SidebarContext);
+}
+
+export function useSidebar() {
+  const context = useOptionalSidebar();
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}
+
+export const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    collapseState?: CollapseState;
+    defaultCollapseState?: CollapseState;
+    onCollapseStateChange?: (state: CollapseState) => void;
+    sidebarKeyboardShortcut?: string | false;
+    sidebarWidth?: string;
+    sidebarWidthIcon?: string;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      collapseState: collapseStateProp,
+      defaultCollapseState,
+      onCollapseStateChange,
+      sidebarKeyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT,
+      sidebarWidth = SIDEBAR_WIDTH,
+      sidebarWidthIcon = SIDEBAR_WIDTH_ICON,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    const threeStep =
+      collapseStateProp !== undefined || defaultCollapseState !== undefined;
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const openControlled = openProp ?? _open;
+
+    const [_collapseState, _setCollapseState] = React.useState<CollapseState>(
+      defaultCollapseState ?? (defaultOpen ? 'expanded' : 'collapsed'),
+    );
+    let collapseState: CollapseState;
+    if (threeStep) {
+      collapseState = collapseStateProp ?? _collapseState;
+    } else {
+      collapseState = openControlled ? 'expanded' : 'collapsed';
+    }
+
+    const open = threeStep ? collapseState === 'expanded' : openControlled;
+
+    const setCollapseState = React.useCallback(
+      (value: CollapseState | ((value: CollapseState) => CollapseState)) => {
+        const next = typeof value === 'function' ? value(collapseState) : value;
+        if (onCollapseStateChange) {
+          onCollapseStateChange(next);
+        } else {
+          _setCollapseState(next);
+        }
+        document.cookie = `${SIDEBAR_COLLAPSE_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [onCollapseStateChange, collapseState],
+    );
+
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (threeStep) {
+          setCollapseState(openState ? 'expanded' : 'collapsed');
+          return;
+        }
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open, threeStep, setCollapseState],
+    );
+
+    const toggleSidebar = React.useCallback(() => {
+      if (isMobile) {
+        setOpenMobile((open) => !open);
+        return;
+      }
+      if (threeStep) {
+        setCollapseState((prev) => nextCollapseState(prev));
+        return;
+      }
+      setOpen((open) => !open);
+    }, [isMobile, threeStep, setCollapseState, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+
+    useScopedHotkeys(
+      sidebarKeyboardShortcut
+        ? `${Key.Meta}+${sidebarKeyboardShortcut}`
+        : '__sidebar-shortcut-disabled__',
+      toggleSidebar,
+      AppHotkeyScope.Sidebar,
+    );
+
+    const state = collapseState === 'collapsed' ? 'collapsed' : 'expanded';
+
+    const contextValue = React.useMemo<ISidebarContext>(
+      () => ({
+        state,
+        collapseState,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [
+        state,
+        collapseState,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <Tooltip.Provider delayDuration={0}>
+          <div
+            style={
+              {
+                '--sidebar-width': sidebarWidth,
+                '--sidebar-width-compact': SIDEBAR_WIDTH_COMPACT,
+                '--sidebar-width-icon': sidebarWidthIcon,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </Tooltip.Provider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = 'SidebarProvider';

package/src/components/sidebar/group.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { Slot } from 'radix-ui';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn(
+        'relative flex w-full min-w-0 flex-col px-4 py-3 group-data-[collapsible=icon]:px-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = 'SidebarGroup';
+
+export const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : 'div';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        'flex h-6 shrink-0 items-center rounded-lg px-2 font-sans text-[10px] font-semibold uppercase tracking-wider text-muted-foreground outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 data-[state=open]:hover:bg-accent data-[state=closed]:hover:bg-accent',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+export const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground outline-hidden transition-transform hover:bg-accent focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+export const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn('w-full text-sm', className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = 'SidebarGroupContent';

package/src/components/sidebar/hooks.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export const useComposedRef = <T extends HTMLElement>(
+  forwardedRef: React.ForwardedRef<T>,
+) => {
+  const innerRef = React.useRef<T | null>(null);
+  const setRef = React.useCallback(
+    (node: T | null) => {
+      innerRef.current = node;
+
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return [innerRef, setRef] as const;
+};

package/src/components/sidebar/layout.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import { Input } from 'erxes-ui/components/input';
+import { ScrollArea } from 'erxes-ui/components/scroll-area';
+import { Separator } from 'erxes-ui/components/separator';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        'w-full bg-background shadow-none focus-visible:ring-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+export const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = 'SidebarHeader';
+
+export const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = 'SidebarFooter';
+
+export const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn('w-auto bg-border', className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+
+export const SidebarContent = React.forwardRef<
+  React.ElementRef<typeof ScrollArea>,
+  React.ComponentProps<typeof ScrollArea>
+>(({ className, viewportClassName, ...props }, ref) => {
+  return (
+    <ScrollArea
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      viewportClassName={cn(
+        'min-w-0 [&>div]:block! [&>div]:min-w-0',
+        viewportClassName,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = 'SidebarContent';

package/src/components/sidebar/menu-sub.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { SidebarTreeIndicator } from 'erxes-ui/components/sidebar-tree-indicator';
+import { Slot } from 'radix-ui';
+import { cn } from 'erxes-ui/lib/utils';
+import { useComposedRef } from './hooks';
+
+export const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, children, ...props }, ref) => {
+  const [subRef, setRefs] = useComposedRef(ref);
+
+  return (
+    <ul
+      ref={setRefs}
+      data-sidebar="menu-sub"
+      className={cn(
+        'relative ml-3.5 flex min-w-0 translate-x-px flex-col gap-1 pl-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    >
+      <SidebarTreeIndicator as="li" containerRef={subRef} />
+      {children}
+    </ul>
+  );
+});
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+export const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+export const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded px-2 outline-hidden font-semibold hover:bg-accent focus-visible:ring-2 active:bg-accent disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:font-semibold data-[active=true]:[&>svg]:text-primary data-[active=true]:[&>svg]:animate-icon-pop motion-reduce:[&>svg]:animate-none [&>svg]:transition-transform active:[&>svg]:scale-90',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';

package/src/components/sidebar/menu.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+
+import { VariantProps, cva } from 'class-variance-authority';
+
+import { Skeleton } from 'erxes-ui/components/skeleton';
+import { Slot } from 'radix-ui';
+import { Tooltip } from 'erxes-ui/components/tooltip';
+import { cn } from 'erxes-ui/lib/utils';
+import { useSidebar } from './context';
+
+export const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = 'SidebarMenu';
+
+export const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn('group/menu-item relative min-w-0', className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full min-w-0 max-w-full items-center gap-2 overflow-hidden rounded p-2 text-left font-medium outline-hidden transition-[width,height,padding] hover:bg-accent focus-visible:ring-2 active:bg-accent disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:[&>svg]:text-primary data-[active=true]:[&>svg]:animate-icon-pop motion-reduce:[&>svg]:animate-none [&>svg]:transition-transform active:[&>svg]:scale-90 group-has-data-[sidebar=menu-sub]/menu-item:data-[active=true]:bg-foreground/5 group-has-data-[sidebar=menu-sub]/menu-item:data-[active=true]:text-foreground group-has-data-[sidebar=menu-sub]/menu-item:data-[active=true]:[&>svg]:text-foreground data-[state=open]:hover:bg-accent data-[state=active]:bg-primary/10 data-[state=active]:text-primary group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-accent',
+        outline:
+          'bg-background shadow-[0_0_0_1px_var(--border)] hover:bg-accent  hover:shadow-[0_0_0_1px_var(--accent)]',
+      },
+      size: {
+        default: 'h-7 text-sm',
+        sm: 'h-6 text-xs',
+        lg: 'h-8 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof Tooltip.Content>;
+    tooltipVisibility?: 'collapsed' | 'always';
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = 'default',
+      size = 'default',
+      tooltip,
+      tooltipVisibility = 'collapsed',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot.Root : 'button';
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === 'string') {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <Tooltip.Trigger asChild>{button}</Tooltip.Trigger>
+        <Tooltip.Content
+          side="right"
+          align="center"
+          hidden={
+            isMobile ||
+            (tooltipVisibility === 'collapsed' && state !== 'collapsed')
+          }
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+export const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground outline-hidden transition-transform hover:bg-accent [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+export const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+export const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  const id = React.useId();
+  // Stable width between 50 to 90%, derived from the instance id.
+  const width = React.useMemo(() => {
+    const hash = Array.from(id).reduce(
+      (sum, char) => sum + (char.codePointAt(0) ?? 0),
+      0,
+    );
+
+    return `${(hash % 41) + 50}%`;
+  }, [id]);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';