@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/sidebar/panel.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+
+import { IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react';
+import { useAtom, useAtomValue } from 'jotai';
+
+import { Button } from 'erxes-ui/components/button';
+import { Separator } from 'erxes-ui/components/separator';
+import { cn } from 'erxes-ui/lib/utils';
+import { createPortal } from 'react-dom';
+import { sidebarPanelOpenState } from 'erxes-ui/state/sidebarPanelState';
+import { useComposedRef } from './hooks';
+import { useTranslation } from 'react-i18next';
+
+const SIDEBAR_PANEL_SLOT = '[data-sidebar-panel-slot]';
+
+const findSidebarPanelSlot = (panel: HTMLElement | null) => {
+  let node = panel?.parentElement ?? null;
+
+  while (node) {
+    const slot = node.querySelector<HTMLElement>(SIDEBAR_PANEL_SLOT);
+
+    if (slot) {
+      return slot;
+    }
+
+    node = node.parentElement;
+  }
+
+  return null;
+};
+
+const useSidebarPanelSlot = (
+  panelRef: React.RefObject<HTMLDivElement | null>,
+  open: boolean,
+) => {
+  const [slot, setSlot] = React.useState<HTMLElement | null>(null);
+  const [claimed, setClaimed] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    if (open) {
+      return;
+    }
+
+    const found = findSidebarPanelSlot(panelRef.current);
+
+    if (!found) {
+      setSlot(null);
+      setClaimed(false);
+      return;
+    }
+
+    const owner = found.dataset.sidebarPanelSlot === '';
+
+    if (owner) {
+      found.dataset.sidebarPanelSlot = 'claimed';
+    }
+
+    setSlot(found);
+    setClaimed(owner);
+
+    return () => {
+      if (owner) {
+        found.dataset.sidebarPanelSlot = '';
+      }
+    };
+  }, [open, panelRef]);
+
+  return { slot: open ? null : slot, claimed };
+};
+
+export const SidebarPanelTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const [open, setOpen] = useAtom(sidebarPanelOpenState);
+  const { t } = useTranslation('common', { keyPrefix: 'navigation' });
+  const toggleLabel = open
+    ? t('collapse-sidebar', 'Collapse sidebar')
+    : t('expand-sidebar', 'Expand sidebar');
+
+  return (
+    <Button
+      ref={ref}
+      aria-expanded={open}
+      aria-label={toggleLabel}
+      className={cn('size-6 shrink-0 rounded-md', className)}
+      size="icon"
+      title={toggleLabel}
+      variant="ghost"
+      onClick={(event) => {
+        onClick?.(event);
+        setOpen(!open);
+      }}
+      {...props}
+    >
+      {open ? <IconChevronsLeft /> : <IconChevronsRight />}
+    </Button>
+  );
+});
+SidebarPanelTrigger.displayName = 'SidebarPanelTrigger';
+
+export const SidebarPanel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    label?: React.ReactNode;
+    actions?: React.ReactNode;
+  }
+>(({ className, children, label, actions, ...props }, ref) => {
+  const open = useAtomValue(sidebarPanelOpenState);
+  const [panelRef, setRefs] = useComposedRef(ref);
+  const { slot, claimed } = useSidebarPanelSlot(panelRef, open);
+
+  return (
+    <div
+      ref={setRefs}
+      data-sidebar="panel"
+      data-state={open ? 'expanded' : 'collapsed'}
+      className={cn(
+        'relative flex h-full w-60 flex-col overflow-hidden bg-sidebar text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+        className,
+        !open && 'w-0! overflow-visible border-0!',
+      )}
+      {...props}
+    >
+      {slot &&
+        claimed &&
+        createPortal(
+          <>
+            <SidebarPanelTrigger className="size-7" />
+            <Separator.Inline />
+          </>,
+          slot,
+        )}
+      {!open && !slot && (
+        <div className="absolute top-2 left-2 z-20">
+          <SidebarPanelTrigger className="size-7 border bg-background shadow-xs" />
+        </div>
+      )}
+      {open && label && (
+        <div className="flex shrink-0 items-center gap-1 pt-3 pr-3 pl-4">
+          <span className="min-w-0 flex-1 truncate px-2 font-mono text-xs font-semibold uppercase text-accent-foreground">
+            {label}
+          </span>
+          {actions}
+          <SidebarPanelTrigger />
+        </div>
+      )}
+      <div
+        hidden={!open}
+        className={cn(
+          'flex min-h-0 flex-1 flex-col overflow-y-auto',
+          label && '[&>[data-sidebar=group]:first-child]:pt-0',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+SidebarPanel.displayName = 'SidebarPanel';

package/src/components/sidebar/root.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+
+import { SIDEBAR_WIDTH_MOBILE } from './constants';
+import { Sheet } from 'erxes-ui/components/sheet';
+import { cn } from 'erxes-ui/lib/utils';
+import { useSidebar } from './context';
+
+export const SidebarRoot = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    mobileClassName?: string;
+  }
+>(
+  (
+    {
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      className,
+      mobileClassName,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, collapseState, openMobile, setOpenMobile } =
+      useSidebar();
+
+    let dataCollapsible = '';
+    if (collapseState === 'compact') {
+      dataCollapsible = 'compact';
+    } else if (state === 'collapsed') {
+      dataCollapsible = collapsible;
+    }
+
+    if (collapsible === 'none') {
+      return (
+        <div
+          className={cn(
+            'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-foreground',
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <Sheet.View
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className={cn(
+              'w-(--sidebar-width) border-r-0 bg-sidebar p-0 text-foreground [&>button]:hidden',
+              mobileClassName,
+            )}
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </Sheet.View>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-foreground md:block"
+        data-state={state}
+        data-collapsible={dataCollapsible}
+        data-variant={variant}
+        data-side={side}
+      >
+        <div
+          className={cn(
+            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
+            'group-data-[collapsible=offcanvas]:w-0',
+            'group-data-[collapsible=compact]:w-(--sidebar-width-compact)',
+            'group-data-[side=right]:rotate-180',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+          )}
+        />
+        <div
+          className={cn(
+            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] md:flex',
+            'group-data-[collapsible=compact]:w-(--sidebar-width-compact)',
+            side === 'left'
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+SidebarRoot.displayName = 'SidebarRoot';
+
+export const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'>
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = 'SidebarRail';
+
+export const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'main'>
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = 'SidebarInset';

package/src/components/sidebar/trigger.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { Button } from 'erxes-ui/components/button';
+import { cn } from 'erxes-ui/lib/utils';
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+} from '@tabler/icons-react';
+import { useSidebar } from './context';
+
+export const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar, collapseState } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('h-7 w-7', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      {collapseState === 'collapsed' ? (
+        <IconLayoutSidebarLeftExpand />
+      ) : (
+        <IconLayoutSidebarLeftCollapse />
+      )}
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';

package/src/components/sidebar-tree-indicator.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { cn } from 'erxes-ui/lib/utils';
+
+type TIndicatorPosition = { top: number; height: number };
+
+export type TFindActiveTreeItem = (
+  container: HTMLElement,
+) => HTMLElement | null;
+
+export const findActiveSubItem: TFindActiveTreeItem = (container) =>
+  container.querySelector<HTMLElement>(
+    ':scope > li > [data-sidebar=menu-sub-button][data-active=true]',
+  );
+
+const getOffsetWithin = (element: HTMLElement, container: HTMLElement) => {
+  let top = 0;
+  let current: HTMLElement | null = element;
+
+  while (current && current !== container) {
+    top += current.offsetTop;
+    current = current.offsetParent as HTMLElement | null;
+  }
+
+  return current === container ? top : null;
+};
+
+const measure = (
+  container: HTMLElement,
+  findActive: TFindActiveTreeItem,
+): TIndicatorPosition | null => {
+  const active = findActive(container);
+
+  if (!active || active.offsetHeight === 0) {
+    return null;
+  }
+
+  const closedAncestor = active.parentElement?.closest('[data-state=closed]');
+
+  if (closedAncestor && container.contains(closedAncestor)) {
+    return null;
+  }
+
+  const top = getOffsetWithin(active, container);
+
+  return top === null ? null : { top, height: active.offsetHeight };
+};
+
+export const SidebarTreeIndicator = ({
+  as: Element = 'span',
+  containerRef,
+  findActive = findActiveSubItem,
+}: Readonly<{
+  as?: 'li' | 'span';
+  containerRef: React.RefObject<HTMLElement | null>;
+  findActive?: TFindActiveTreeItem;
+}>) => {
+  const [position, setPosition] = React.useState<TIndicatorPosition | null>(
+    null,
+  );
+  const [animate, setAnimate] = React.useState(false);
+  const visibleRef = React.useRef(false);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    let frame = 0;
+
+    const update = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const next = measure(container, findActive);
+
+        setAnimate(visibleRef.current && next !== null);
+        visibleRef.current = next !== null;
+        setPosition((previous) =>
+          previous?.top === next?.top && previous?.height === next?.height
+            ? previous
+            : next,
+        );
+      });
+    };
+
+    update();
+
+    const mutationObserver = new MutationObserver(update);
+    mutationObserver.observe(container, {
+      attributes: true,
+      attributeFilter: ['data-active', 'data-state'],
+      childList: true,
+      subtree: true,
+    });
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(container);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, findActive]);
+
+  if (!position) {
+    return null;
+  }
+
+  return (
+    <Element
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute top-0 -left-[1.5px] w-0.5 list-none rounded-full bg-primary will-change-transform',
+        animate &&
+          'transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+      )}
+      style={{
+        height: position.height - 8,
+        transform: `translateY(${position.top + 4}px)`,
+      }}
+    />
+  );
+};

package/src/components/sidebar.tsx

@@ -0,0 +1,66 @@
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInput,
+  SidebarSeparator,
+} from './sidebar/layout';
+import {
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+} from './sidebar/group';
+import { SidebarInset, SidebarRail, SidebarRoot } from './sidebar/root';
+import {
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+} from './sidebar/menu';
+import {
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from './sidebar/menu-sub';
+import { SidebarPanel, SidebarPanelTrigger } from './sidebar/panel';
+import {
+  SidebarProvider,
+  useOptionalSidebar,
+  useSidebar,
+} from './sidebar/context';
+
+import { SidebarTreeIndicator } from './sidebar-tree-indicator';
+import { SidebarTrigger } from './sidebar/trigger';
+
+export const Sidebar = Object.assign(SidebarRoot, {
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupAction: SidebarGroupAction,
+  GroupContent: SidebarGroupContent,
+  GroupLabel: SidebarGroupLabel,
+  Header: SidebarHeader,
+  Input: SidebarInput,
+  Inset: SidebarInset,
+  Panel: SidebarPanel,
+  PanelTrigger: SidebarPanelTrigger,
+  Menu: SidebarMenu,
+  MenuAction: SidebarMenuAction,
+  MenuBadge: SidebarMenuBadge,
+  MenuButton: SidebarMenuButton,
+  MenuItem: SidebarMenuItem,
+  MenuSkeleton: SidebarMenuSkeleton,
+  Sub: SidebarMenuSub,
+  TreeIndicator: SidebarTreeIndicator,
+  SubButton: SidebarMenuSubButton,
+  SubItem: SidebarMenuSubItem,
+  Provider: SidebarProvider,
+  Rail: SidebarRail,
+  Separator: SidebarSeparator,
+  Trigger: SidebarTrigger,
+  useOptionalSidebar,
+  useSidebar,
+});

package/src/components/skeleton.tsx

@@ -0,0 +1,29 @@
+import { cn } from '../lib/utils';
+
+export const Skeleton = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-accent', className)}
+      {...props}
+    />
+  );
+};
+
+export const SkeletonArray = ({
+  className,
+  count,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  count: number;
+}) => {
+  return Array.from({ length: count }).map((_, index) => (
+    <div
+      key={index}
+      className={cn('animate-pulse rounded-md bg-accent', className)}
+      {...props}
+    />
+  ));
+};

package/src/components/slider.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
+
+import { cn } from 'erxes-ui/lib';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    hideThumb?: boolean;
+  }
+>(({ className, hideThumb, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    {!hideThumb && (
+      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    )}
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };