@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/focus-sheet/components/focus-sheet.tsx

@@ -0,0 +1,335 @@
+import {
+  Icon as TablerIcon,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+  IconX,
+} from '@tabler/icons-react';
+import {
+  Button,
+  Separator,
+  Sheet,
+  Sidebar,
+  Spinner,
+  Tabs,
+  Tooltip,
+} from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+const FocusSheetContext = createContext<{
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: (isSidebarOpen: boolean) => void;
+  activeSideTab?: string | null;
+  setActiveSideTab?: (activeSideTab: string | null) => void;
+  hasSidebar?: boolean;
+  setHasSidebar?: (hasSidebar: boolean) => void;
+} | null>(null);
+
+export const useFocusSheet = () => {
+  const context = useContext(FocusSheetContext);
+  if (!context) {
+    throw new Error('useFocusSheet must be used within a FocusSheetProvider');
+  }
+  return context;
+};
+
+const FocusSheetRoot = ({ ...props }: React.ComponentProps<typeof Sheet>) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [hasSidebar, setHasSidebar] = useState(false);
+  const [activeSideTab, setActiveSideTab] = useState<string | null>(null);
+  return (
+    <FocusSheetContext.Provider
+      value={{
+        isSidebarOpen,
+        setIsSidebarOpen,
+        activeSideTab,
+        setActiveSideTab,
+        hasSidebar,
+        setHasSidebar,
+      }}
+    >
+      <Sheet {...props} />
+    </FocusSheetContext.Provider>
+  );
+};
+
+const FocusSheetView = ({
+  className,
+  loading,
+  error,
+  notFound,
+  children,
+  errorState,
+  notFoundState,
+  ...props
+}: React.ComponentProps<typeof Sheet.View> & {
+  loading?: boolean;
+  error?: boolean;
+  notFound?: boolean;
+  children?: React.ReactNode;
+  errorState?: React.ReactNode;
+  notFoundState?: React.ReactNode;
+}) => {
+  const { activeSideTab } = useFocusSheet();
+  return (
+    <Sheet.View
+      className={cn(
+        'p-0 transition-[width] flex flex-col gap-0 overflow-hidden sm:max-w-screen-2xl md:w-[calc(100vw-(--spacing(4)))] lg:w-3/4',
+        !!activeSideTab && 'lg:w-[calc(100vw-(--spacing(4)))]',
+        className,
+      )}
+      {...props}
+    >
+      {(loading || error || notFound) && (
+        <Sheet.Title className="sr-only">
+          {loading ? 'Loading' : error ? 'Error' : 'Not found'}
+        </Sheet.Title>
+      )}
+      {loading && <Spinner />}
+      {!loading && error && errorState}
+      {!loading && !error && notFound && notFoundState}
+      {!loading && !error && !notFound && children}
+    </Sheet.View>
+  );
+};
+
+const FocusSheetContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Sheet.Content>) => {
+  return (
+    <Sheet.Content
+      className={cn(
+        'flex border-b-0 rounded-b-none overflow-y-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+const FocusSheetSideBar = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Sidebar>) => {
+  const { isSidebarOpen, setHasSidebar } = useFocusSheet();
+  useEffect(() => {
+    setHasSidebar?.(true);
+  }, [setHasSidebar]);
+
+  if (!isSidebarOpen) {
+    return null;
+  }
+  return (
+    <Sidebar
+      collapsible="none"
+      className={cn('flex-none w-64 border-r', className)}
+      {...props}
+    />
+  );
+};
+FocusSheetSideBar.displayName = 'FocusSheetSideBar';
+
+const FocusSheetSidebarTrigger = () => {
+  const { isSidebarOpen, setIsSidebarOpen } = useFocusSheet();
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+    >
+      {isSidebarOpen ? (
+        <IconLayoutSidebarLeftCollapse />
+      ) : (
+        <IconLayoutSidebarLeftExpand />
+      )}
+    </Button>
+  );
+};
+
+const FocusSheetSideTabs = forwardRef<
+  React.ElementRef<typeof Tabs>,
+  React.ComponentProps<typeof Tabs>
+>(({ className, ...props }, ref) => {
+  const { activeSideTab } = useFocusSheet();
+
+  return (
+    <Tabs
+      ref={ref}
+      className={cn('flex', className)}
+      orientation="horizontal"
+      value={activeSideTab || undefined}
+      {...props}
+    />
+  );
+});
+
+FocusSheetSideTabs.displayName = 'FocusSheetSideTabs';
+
+const FocusSheetSideContent = forwardRef<
+  React.ElementRef<typeof Tabs.Content>,
+  React.ComponentProps<typeof Tabs.Content>
+>(({ className, children, ...props }, ref) => {
+  const { activeSideTab } = useFocusSheet();
+
+  if (!activeSideTab) {
+    return null;
+  }
+
+  return (
+    <Tabs.Content
+      ref={ref}
+      className={cn(
+        'data-[state=active]:border-l data-[state=active]:min-w-80 w-full transition-all data-[state=active]:flex flex-col overflow-hidden bg-sidebar',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Tabs.Content>
+  );
+});
+FocusSheetSideContent.displayName = 'FocusSheetSideContent';
+
+const FocusSheetSideContentHeader = forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentProps<'div'> & {
+    Icon?: TablerIcon;
+    label?: string;
+    hideSeparator?: boolean;
+  }
+>(({ className, Icon, label, children, hideSeparator, ...props }, ref) => {
+  return (
+    <>
+      <div
+        ref={ref}
+        className={cn(
+          'h-11 px-5 flex items-center gap-2 flex-none bg-background',
+          className,
+        )}
+        {...props}
+      >
+        {!!Icon && (
+          <Icon className="size-4 flex-none text-primary" strokeWidth={3} />
+        )}
+        <div className="mr-auto font-medium text-primary capitalize">
+          {label}
+        </div>
+        {children}
+      </div>
+      {!hideSeparator && <Separator />}
+    </>
+  );
+});
+FocusSheetSideContentHeader.displayName = 'FocusSheetSideContentHeader';
+
+const FocusSheetSideTabsList = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof Tabs.List>
+>(({ className, ...props }, ref) => {
+  return (
+    <Tabs.List
+      ref={ref}
+      className={cn(
+        'w-16 flex-none border-l bg-sidebar h-full py-3 flex flex-col items-center justify-start gap-3 border-b-0',
+        className,
+      )}
+      {...props}
+    >
+      <Tooltip.Provider>{props.children}</Tooltip.Provider>
+    </Tabs.List>
+  );
+});
+FocusSheetSideTabsList.displayName = 'FocusSheetSideTabsList';
+
+const FocusSheetSideTabsTrigger = forwardRef<
+  React.ElementRef<typeof Tabs.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Tabs.Trigger> & {
+    label?: string;
+    Icon?: TablerIcon;
+    value: string;
+  }
+>(({ className, Icon, label, value, onClick, ...props }, ref) => {
+  const { activeSideTab, setActiveSideTab } = useFocusSheet();
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Tabs.Trigger
+          ref={ref}
+          className={cn(
+            'size-10 bg-sidebar data-[state=active]:bg-primary/10 data-[state=active]:text-foreground data-[state=active]:shadow-none [&_svg]:size-5 data-[state=active]:after:hidden [&_svg]:text-primary hover:bg-primary/10 data-[state=active]:hover:bg-primary/10 rounded group/side-tabs-trigger',
+            className,
+          )}
+          value={value}
+          onClick={(e) => {
+            onClick?.(e);
+            setActiveSideTab?.(activeSideTab === value ? null : value);
+          }}
+          {...props}
+        >
+          {!!Icon && (
+            <Icon
+              className={cn(
+                'size-5 flex-none',
+                activeSideTab === value &&
+                  'group-hover/side-tabs-trigger:hidden',
+              )}
+            />
+          )}
+          {activeSideTab === value && (
+            <IconX className="size-5 flex-none hidden group-hover/side-tabs-trigger:block" />
+          )}
+        </Tabs.Trigger>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content side="left">{label}</Tooltip.Content>
+    </Tooltip>
+  );
+});
+FocusSheetSideTabsTrigger.displayName = 'FocusSheetSideTabsTrigger';
+
+const FocusSheetHeader = ({
+  className,
+  children,
+  title,
+  description,
+  ...props
+}: React.ComponentProps<typeof Sheet.Header> & {
+  title?: string;
+  description?: string;
+}) => {
+  const { hasSidebar } = useFocusSheet();
+  return (
+    <Sheet.Header className={cn('gap-2', className)} {...props}>
+      {hasSidebar && <FocusSheetSidebarTrigger />}
+      <div className="flex flex-col">
+        <Sheet.Title>{title}</Sheet.Title>
+        <Sheet.Description className={cn(!description && 'sr-only')}>
+          {description || title}
+        </Sheet.Description>
+      </div>
+      {children}
+      <Sheet.Close />
+    </Sheet.Header>
+  );
+};
+FocusSheetHeader.displayName = 'FocusSheetHeader';
+
+export const FocusSheet = Object.assign(FocusSheetRoot, {
+  Header: FocusSheetHeader,
+  View: FocusSheetView,
+  Content: FocusSheetContent,
+  SideBar: FocusSheetSideBar,
+  SidebarTrigger: FocusSheetSidebarTrigger,
+  SideTabs: FocusSheetSideTabs,
+  SideContent: FocusSheetSideContent,
+  SideContentHeader: FocusSheetSideContentHeader,
+  SideTabsList: FocusSheetSideTabsList,
+  SideTabsTrigger: FocusSheetSideTabsTrigger,
+});

package/src/modules/hotkey/components/PopoverScoped.tsx

@@ -0,0 +1,77 @@
+import { Popover, type PopoverProps } from 'erxes-ui/components';
+import { usePreviousHotkeyScope } from '../hooks/usePreviousHotkeyScope';
+import {
+  UseHotkeysOptionsWithoutBuggyOptions,
+  useScopedHotkeys,
+} from 'erxes-ui/modules/hotkey/hooks/useScopedHotkeys';
+import { Key } from 'erxes-ui/types';
+import { useState } from 'react';
+import { currentHotkeyScopeState } from 'erxes-ui/modules/hotkey/states/internal/currentHotkeyScopeState';
+import { useAtomValue } from 'jotai';
+
+export const PopoverScoped = ({
+  scope,
+  onOpenChange,
+  onEnter,
+  closeOnEnter,
+  dependencies,
+  options,
+  open,
+  ...props
+}: Omit<PopoverProps, 'onOpenChange'> & {
+  onOpenChange?: (open: boolean, reason?: 'enter' | 'close') => void;
+  scope?: string;
+  onEnter?: () => void;
+  closeOnEnter?: boolean;
+  dependencies?: unknown[];
+  options?: UseHotkeysOptionsWithoutBuggyOptions;
+}) => {
+  const [_open, _setOpen] = useState(false);
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+  const currentHotkeyScope = useAtomValue(currentHotkeyScopeState);
+  const isOpen = open ?? _open;
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      if (!isOpen) {
+        return;
+      }
+      onEnter?.();
+      if (closeOnEnter) {
+        _setOpen(false);
+        onOpenChange?.(false, 'enter');
+      }
+      if (scope) {
+        goBackToPreviousHotkeyScope();
+      }
+    },
+    scope ? scope + '.Popover' : currentHotkeyScope.scope,
+    [isOpen, ...(dependencies || [])],
+    {
+      enableOnFormTags: closeOnEnter,
+      preventDefault: isOpen && closeOnEnter,
+      ...options,
+    },
+  );
+
+  return (
+    <Popover
+      modal
+      {...props}
+      open={isOpen}
+      onOpenChange={(op) => {
+        _setOpen(op);
+        onOpenChange?.(op, 'close');
+        if (scope) {
+          op
+            ? setHotkeyScopeAndMemorizePreviousScope(scope + '.Popover')
+            : goBackToPreviousHotkeyScope();
+        }
+      }}
+    />
+  );
+};

package/src/modules/hotkey/constants/defaultHotkeysScopeCustomScopes.ts

@@ -0,0 +1,6 @@
+import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
+
+export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
+  commandMenu: true,
+  sidebar: true,
+};

package/src/modules/hotkey/constants/initialHotkeysScope.ts

@@ -0,0 +1,12 @@
+import { AppHotkeyScope } from '../types/AppHotkeyScope';
+import { HotkeyScope } from '../types/HotkeyScope';
+
+export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = {
+  scope: AppHotkeyScope.App,
+  customScopes: {
+    commandMenu: true,
+    commandMenuOpen: true,
+    sidebar: true,
+    keyboardShortcuts: true,
+  },
+};

package/src/modules/hotkey/hooks/usePreviousHotkeyScope.tsx

@@ -0,0 +1,59 @@
+import { useAtomCallback } from 'jotai/utils';
+import { useSetHotkeyScope } from './useSetHotkeyScope';
+import { useCallback } from 'react';
+import { previousHotkeyScopeState } from '../states/internal/previousHotkeyScopeState';
+import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState';
+import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
+import { DEBUG_HOTKEY_SCOPE } from './useScopedHotKeysCallback';
+import { logDebug } from 'erxes-ui/utils/logDebug';
+
+export const usePreviousHotkeyScope = () => {
+  const setHotKeyScope = useSetHotkeyScope();
+
+  const goBackToPreviousHotkeyScope = useAtomCallback(
+    useCallback(
+      (get) => {
+        const previousHotkeyScope = get(previousHotkeyScopeState);
+
+        if (!previousHotkeyScope) {
+          return;
+        }
+
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug('DEBUG: goBackToPreviousHotkeyScope', previousHotkeyScope);
+        }
+
+        setHotKeyScope(
+          previousHotkeyScope.scope,
+          previousHotkeyScope.customScopes,
+        );
+      },
+      [setHotKeyScope],
+    ),
+  );
+
+  const setHotkeyScopeAndMemorizePreviousScope = useAtomCallback(
+    useCallback(
+      (get, set, scope: string, customScopes?: CustomHotkeyScopes) => {
+        const currentHotkeyScope = get(currentHotkeyScopeState);
+
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug('DEBUG: setHotkeyScopeAndMemorizePreviousScope', {
+            currentHotkeyScope,
+            scope,
+            customScopes,
+          });
+        }
+
+        setHotKeyScope(scope, customScopes);
+        set(previousHotkeyScopeState, currentHotkeyScope);
+      },
+      [setHotKeyScope],
+    ),
+  );
+
+  return {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  };
+};

package/src/modules/hotkey/hooks/useScopedHotKeysCallback.tsx

@@ -0,0 +1,83 @@
+import {
+  Hotkey,
+  OptionsOrDependencyArray,
+} from 'react-hotkeys-hook/dist/types';
+import { useAtomCallback } from 'jotai/utils';
+import { useCallback } from 'react';
+import { internalHotkeysEnabledScopesState } from '../states/internal/internalHotkeysEnabledScopeState';
+import { logDebug } from 'erxes-ui/utils/logDebug';
+
+export const DEBUG_HOTKEY_SCOPE = true;
+
+export const useScopedHotKeysCallback = (
+  dependencies?: OptionsOrDependencyArray,
+) => {
+  const dependencyArray = Array.isArray(dependencies) ? dependencies : [];
+
+  return useAtomCallback(
+    useCallback(
+      (
+        get,
+        set,
+        {
+          callback,
+          hotkeysEvent,
+          keyboardEvent,
+          scope,
+          preventDefault,
+        }: {
+          keyboardEvent: KeyboardEvent;
+          hotkeysEvent: Hotkey;
+          callback: (
+            keyboardEvent: KeyboardEvent,
+            hotkeysEvent: Hotkey,
+          ) => void;
+          scope: string;
+          preventDefault?: boolean;
+        },
+      ) => {
+        const currentHotkeyScopes = get(internalHotkeysEnabledScopesState);
+
+        if (!currentHotkeyScopes.includes(scope)) {
+          if (DEBUG_HOTKEY_SCOPE) {
+            logDebug(
+              `DEBUG: %cI can't call hotkey (${
+                hotkeysEvent.keys
+              }) because I'm in scope [${scope}] and the active scopes are : [${currentHotkeyScopes.join(
+                ', ',
+              )}]`,
+              'color: gray; ',
+            );
+          }
+          return;
+        }
+
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug(
+            `DEBUG: %cI can call hotkey (${
+              hotkeysEvent.keys
+            }) because I'm in scope [${scope}] and the active scopes are : [${currentHotkeyScopes.join(
+              ', ',
+            )}]`,
+            'color: green;',
+          );
+        }
+
+        if (preventDefault === true) {
+          if (DEBUG_HOTKEY_SCOPE) {
+            logDebug(
+              `DEBUG: %cI prevent default for hotkey (${hotkeysEvent.keys})`,
+              'color: gray;',
+            );
+          }
+          keyboardEvent.stopPropagation();
+          keyboardEvent.preventDefault();
+          keyboardEvent.stopImmediatePropagation();
+        }
+
+        callback(keyboardEvent, hotkeysEvent);
+      },
+      [dependencyArray],
+    ),
+  );
+};

package/src/modules/hotkey/hooks/useScopedHotkeys.tsx

@@ -0,0 +1,61 @@
+import { isDefined } from 'erxes-ui/utils/isDefined';
+import { useAtom } from 'jotai';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { HotkeyCallback, Keys, Options } from 'react-hotkeys-hook/dist/types';
+import { pendingHotkeyState } from '../states/internal/pendingHotkeyState';
+import { useScopedHotKeysCallback } from './useScopedHotKeysCallback';
+
+export type UseHotkeysOptionsWithoutBuggyOptions = Omit<Options, 'enabled'>;
+
+export const useScopedHotkeys = (
+  keys: Keys,
+  callback: HotkeyCallback,
+  scope: string,
+  dependencies?: unknown[],
+  options?: UseHotkeysOptionsWithoutBuggyOptions,
+) => {
+  const [pendingHotkey, setPendingHotkey] = useAtom(pendingHotkeyState);
+
+  const callScopedHotkeyCallback = useScopedHotKeysCallback(dependencies);
+
+  const enableOnContentEditable = isDefined(options?.enableOnContentEditable)
+    ? options.enableOnContentEditable
+    : true;
+
+  const enableOnFormTags = isDefined(options?.enableOnFormTags)
+    ? options.enableOnFormTags
+    : false;
+
+  const preventDefault = isDefined(options?.preventDefault)
+    ? options.preventDefault === true
+    : true;
+
+  const ignoreModifiers = isDefined(options?.ignoreModifiers)
+    ? options.ignoreModifiers === true
+    : false;
+
+  return useHotkeys(
+    keys,
+    (keyboardEvent, hotkeysEvent) =>
+      callScopedHotkeyCallback({
+        keyboardEvent,
+        hotkeysEvent,
+        callback: () => {
+          if (!pendingHotkey) {
+            callback(keyboardEvent, hotkeysEvent);
+            return;
+          }
+          setPendingHotkey(null);
+        },
+        scope,
+        preventDefault,
+      }),
+    {
+      enableOnContentEditable,
+      enableOnFormTags,
+      ignoreModifiers,
+      ...options,
+    },
+    dependencies,
+  );
+};