@qoretechnologies/reqore 0.38.8 → 0.40.0

package/src/components/Sidebar/item.tsx

@@ -1,264 +0,0 @@
-import classnames from 'classnames';
-import map from 'lodash/map';
-import { useMount } from 'react-use';
-import { IQorusSidebarItem } from '.';
-import { ReqorePopover, useReqoreTheme } from '../..';
-import { IReqoreTheme } from '../../constants/theme';
-import { getMainColor, getReadableColor } from '../../helpers/colors';
-import { isActiveMulti } from '../../helpers/sidebar';
-import ReqoreIcon from '../Icon';
-
-export interface SidebarItemProps {
-  itemData: IQorusSidebarItem;
-  isCollapsed?: boolean;
-  subItem?: boolean;
-  onSectionToggle?: (sectionId: string) => any;
-  isExpanded?: boolean;
-  isActive?: boolean;
-  tooltip?: string;
-  children?: any;
-  expandedSection?: string;
-  onFavoriteClick?: (id: string) => void;
-  onUnfavoriteClick?: (id: string) => void;
-  favoriteItems?: any;
-  formatItemName?: (itemName: string) => string;
-  currentPath?: string;
-  sectionName?: string;
-  hasFavorites?: boolean;
-  useNativeTitle?: boolean;
-  bookmarks?: string[];
-  onClick(): void;
-}
-
-export interface ISidebarTooltipProps {
-  isCollapsed?: boolean;
-  children: any;
-  itemData: IQorusSidebarItem;
-  isActive?: boolean;
-  isSubcategory?: boolean;
-  isSubitem?: boolean;
-  onClick?: any;
-  useNativeTitle?: boolean;
-}
-
-const SidebarItemTooltip = ({
-  isCollapsed,
-  children,
-  itemData,
-  isActive,
-  isSubitem,
-  isSubcategory,
-  onClick,
-  useNativeTitle,
-}: ISidebarTooltipProps) => {
-  const Element = itemData.as || 'div';
-
-  if (useNativeTitle) {
-    return (
-      <Element
-        {...itemData.props}
-        onClick={(e) => {
-          itemData.props?.onClick?.(e);
-          onClick?.(e);
-        }}
-        className={classnames('sidebarItem', 'sidebarLink', {
-          sidebarSubItem: isSubitem,
-          active: isActive,
-          submenuCategory: isSubcategory,
-        })}
-        title={itemData.name}
-      >
-        {children}
-      </Element>
-    );
-  }
-
-  return (
-    <ReqorePopover
-      component={Element}
-      componentProps={{
-        ...itemData.props,
-        onClick: (e) => {
-          itemData.props?.onClick?.(e);
-          onClick?.(e);
-        },
-        className: classnames('sidebarItem', 'sidebarLink', {
-          sidebarSubItem: isSubitem,
-          active: isActive,
-          submenuCategory: isSubcategory,
-        }),
-      }}
-      content={itemData.name}
-      placement='right'
-      isReqoreComponent
-      show={isCollapsed}
-    >
-      {children}
-    </ReqorePopover>
-  );
-};
-
-const SidebarItem = ({
-  itemData,
-  isCollapsed,
-  subItem,
-  onSectionToggle,
-  isExpanded,
-  onFavoriteClick,
-  onUnfavoriteClick,
-  formatItemName,
-  currentPath,
-  sectionName,
-  hasFavorites,
-  useNativeTitle,
-  onClick,
-}: SidebarItemProps) => {
-  const handleFavoriteClick = (event) => {
-    event.persist();
-    event.stopPropagation();
-    event.preventDefault();
-
-    if (onFavoriteClick) {
-      onFavoriteClick(itemData.id);
-    }
-  };
-
-  const handleUnfavoriteClick = (event) => {
-    event.persist();
-    event.stopPropagation();
-    event.preventDefault();
-
-    if (onUnfavoriteClick) {
-      onUnfavoriteClick(itemData.id);
-    }
-  };
-
-  const isActive = isActiveMulti(
-    itemData.activePaths || [itemData.props?.href],
-    currentPath,
-    itemData.exact
-  );
-
-  const getItemName: (itemName: string) => string = (itemName) =>
-    formatItemName ? formatItemName(itemName) : itemName;
-
-  return (
-    <>
-      <SidebarItemTooltip
-        isCollapsed={isCollapsed}
-        itemData={itemData}
-        isActive={isActive}
-        isSubitem={subItem}
-        useNativeTitle={useNativeTitle}
-        onClick={
-          onSectionToggle
-            ? () => {
-                onSectionToggle(itemData.name);
-              }
-            : () => void onClick?.()
-        }
-      >
-        <ReqoreIcon icon={itemData.icon} margin={isCollapsed ? undefined : 'right'} />{' '}
-        {!isCollapsed && getItemName(itemData.name)}
-        {itemData.submenu && (
-          <ReqoreIcon
-            icon={isExpanded ? 'ArrowUpSFill' : 'ArrowDownSFill'}
-            className='submenuExpand'
-          />
-        )}
-        {!itemData.submenu && !isCollapsed && hasFavorites ? (
-          <>
-            {sectionName === '_qorusBookmarks' ? (
-              <ReqoreIcon
-                icon='Bookmark3Fill'
-                className='favorite'
-                onClick={handleUnfavoriteClick}
-              />
-            ) : (
-              <ReqoreIcon icon='Bookmark3Line' className='favorite' onClick={handleFavoriteClick} />
-            )}
-          </>
-        ) : null}
-      </SidebarItemTooltip>
-    </>
-  );
-};
-
-const SidebarItemWrapper = ({
-  itemData,
-  isCollapsed,
-  onSectionToggle,
-  expandedSection,
-  favoriteItems,
-  currentPath,
-  onFavoriteClick,
-  onUnfavoriteClick,
-  hasFavorites,
-  sectionName,
-  useNativeTitle,
-  onClick,
-}: SidebarItemProps) => {
-  const theme: IReqoreTheme = useReqoreTheme();
-
-  useMount(() => {
-    if (
-      !itemData.element &&
-      isActiveMulti(itemData.activePaths || [itemData.props?.href], currentPath, itemData.exact)
-    ) {
-      onSectionToggle(itemData.name);
-    }
-  });
-
-  if (itemData.element) {
-    const { element: Element } = itemData;
-
-    return (
-      <Element
-        isCollapsed={isCollapsed}
-        backgroundColor={theme.sidebar?.main || theme.main}
-        textColor={
-          theme.sidebar?.color ||
-          getReadableColor(theme, undefined, undefined, true, getMainColor(theme, 'sidebar'))
-        }
-      />
-    );
-  }
-
-  return (
-    <>
-      <SidebarItem
-        itemData={itemData}
-        isCollapsed={isCollapsed}
-        onSectionToggle={itemData.submenu && onSectionToggle}
-        isExpanded={expandedSection === itemData.name}
-        currentPath={currentPath}
-        favoriteItems={favoriteItems}
-        onFavoriteClick={onFavoriteClick}
-        onUnfavoriteClick={onUnfavoriteClick}
-        sectionName={sectionName}
-        hasFavorites={hasFavorites}
-        useNativeTitle={useNativeTitle}
-        onClick={onClick}
-      />
-      {expandedSection === itemData.name &&
-        map(itemData.submenu, (subItemData: any, key: number) => (
-          <SidebarItem
-            itemData={subItemData}
-            key={key}
-            isCollapsed={isCollapsed}
-            subItem
-            currentPath={currentPath}
-            favoriteItems={favoriteItems}
-            onFavoriteClick={onFavoriteClick}
-            onUnfavoriteClick={onUnfavoriteClick}
-            sectionName={sectionName}
-            hasFavorites={hasFavorites}
-            useNativeTitle={useNativeTitle}
-            onClick={onClick}
-          />
-        ))}
-    </>
-  );
-};
-
-export default SidebarItemWrapper;

package/src/helpers/sidebar.ts

@@ -1,89 +0,0 @@
-import { reduce, size } from 'lodash';
-import { IQorusSidebarCustomItem, IQorusSidebarItems } from '../components/Sidebar';
-
-export const transformMenu = (
-  menu: IQorusSidebarItems,
-  bookmarks: string[],
-  customItems?: IQorusSidebarCustomItem[]
-) => {
-  let newMenu: IQorusSidebarItems = { ...menu };
-  let _qorusCustomElements;
-  let _qorusBookmarks;
-
-  if (size(bookmarks)) {
-    _qorusBookmarks = {
-      title: 'Bookmarks',
-      items: [],
-    };
-
-    newMenu = reduce(
-      newMenu,
-      (cur, menuSection, name: string) => {
-        const newSection = { ...menuSection };
-
-        newSection.items = [...newSection.items]
-          .map((newSectionItem) => {
-            const copySectionItem = { ...newSectionItem };
-
-            if (copySectionItem.submenu) {
-              copySectionItem.submenu = copySectionItem.submenu.filter((submenuItem) => {
-                const isItemInSubmenu = bookmarks.find(
-                  (favoriteItem) => favoriteItem === submenuItem.id
-                );
-
-                if (isItemInSubmenu) {
-                  _qorusBookmarks.items.push(submenuItem);
-                }
-
-                return !isItemInSubmenu;
-              });
-
-              if (size(copySectionItem.submenu)) {
-                return copySectionItem;
-              } else {
-                return undefined;
-              }
-            } else {
-              if (!bookmarks.find((favoriteItem) => favoriteItem === copySectionItem.id)) {
-                return copySectionItem;
-              } else {
-                _qorusBookmarks.items.push(copySectionItem);
-                return undefined;
-              }
-            }
-          })
-          .filter((newSectionItem) => newSectionItem);
-
-        return { ...cur, [name]: newSection };
-      },
-      {}
-    );
-
-    newMenu = { _qorusBookmarks, ...newMenu };
-  }
-
-  if (size(customItems)) {
-    _qorusCustomElements = {
-      items: customItems,
-    };
-
-    newMenu = { _qorusCustomElements, ...newMenu };
-  }
-
-  return newMenu;
-};
-
-export const isActive = (to: string, currentPath: string, exact?: boolean): boolean =>
-  exact ? currentPath === to : currentPath.startsWith(to);
-
-export const isActiveMulti = (to: string[], currentPath: string, exact?: boolean): boolean => {
-  let active: boolean = false;
-
-  to.forEach((path: string) => {
-    if (isActive(path, currentPath, exact)) {
-      active = true;
-    }
-  });
-
-  return active;
-};

package/src/stories/Sidebar/Sidebar.stories.tsx

@@ -1,97 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import { IQorusSidebarProps } from '../../components/Sidebar';
-import { ReqorePanel, ReqoreSidebar } from '../../index';
-import { qorusSidebarItems } from '../../mock/menu';
-import { StoryMeta } from '../utils';
-import { FlatArg, NoContentArg, argManager } from '../utils/args';
-
-const { disableArg, createArg } = argManager<IQorusSidebarProps>();
-
-const meta = {
-  title: 'Navigation/Sidebar/Stories',
-  component: ReqoreSidebar,
-  args: {
-    path: '/',
-    floating: false,
-    bordered: false,
-    isOpen: false,
-    position: 'left',
-    withoutContent: true,
-  },
-  argTypes: {
-    ...disableArg('items'),
-    ...FlatArg,
-    ...createArg('path', {
-      defaultValue: '/',
-      name: 'Path',
-      description: 'Mock location path',
-      type: 'string',
-    }),
-    ...createArg('floating', {
-      control: 'boolean',
-      defaultValue: false,
-      name: 'Floating',
-      description: 'If the sidebar should be floating',
-    }),
-    ...createArg('bordered', {
-      control: 'boolean',
-      defaultValue: false,
-      name: 'Bordered',
-      description: 'If the sidebar should be bordered',
-    }),
-    ...createArg('isOpen', {
-      control: 'boolean',
-      defaultValue: false,
-      name: 'Is Open',
-      description: 'If the sidebar should be shown when floating',
-    }),
-    ...createArg('position', {
-      control: 'select',
-      options: ['left', 'right'],
-      defaultValue: 'left',
-      name: 'Sidebar position',
-      description: 'Sidebar positions - this decides which border is drawn',
-    }),
-    ...NoContentArg,
-  },
-} as StoryMeta<typeof ReqoreSidebar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IQorusSidebarProps> = (args: IQorusSidebarProps) => {
-  return (
-    <ReqoreSidebar
-      {...args}
-      items={qorusSidebarItems}
-      bookmarks={['submenu-item-2', 'another-item-1']}
-      onBookmarksChange={noop}
-      customItems={[
-        {
-          element: () => (
-            <div style={{ padding: '10px' }}>
-              <ReqorePanel intent='info' flat opacity={0.5}>
-                Hello I am a custom element!
-              </ReqorePanel>
-            </div>
-          ),
-        },
-      ]}
-    />
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Floating: Story = {
-  render: Template,
-
-  args: {
-    floating: true,
-    isOpen: true,
-    hasFloatingBackdrop: true,
-  },
-};