@orfium/ictinus 5.43.0 → 5.43.2

package/src/components/Navigation/Directory/MenuItem/MenuItem.tsx

@@ -1,115 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { NavLink } from 'react-router-dom';
-
-import { vars } from '@orfium/tokens';
-import ExpandCollapse from 'components/ExpandCollapse';
-import Icon from 'components/Icon';
-import type { NavigationMenuItem } from 'components/Navigation/types';
-import {
-  arrowContainerStyle,
-  menuIconStyle,
-  menuItemStyle,
-  menuItemTextStyle,
-  menuLinkStyle,
-  subMenuIconStyle,
-  subMenuLinkStyle,
-} from '../Directory.style';
-
-export type MenuItemProps = {
-  /** Defines the current menu item whose submenu item is currently selected */
-  isCurrent: boolean;
-  /** Defines if the menu item is expanded */
-  isExpanded: boolean;
-  toggleMenuItem: (newUrl: string) => void;
-} & NavigationMenuItem;
-
-const MenuItem: React.FCC<MenuItemProps> = memo(
-  ({ isCurrent, isExpanded, name, url, iconName, options, toggleMenuItem, state: linkState }) => {
-    const hasSubMenus = useMemo(() => options.length > 0, [options.length]);
-
-    const MenuItemContent = (
-      <React.Fragment>
-        <div css={arrowContainerStyle(isExpanded, hasSubMenus)}>
-          <Icon name="triangleRight" color={vars.color.text.default.primary} size={20} />
-        </div>
-        <div css={menuIconStyle()}>
-          <Icon
-            name={iconName}
-            color={isCurrent ? vars.color.text.default.active : vars.color.text.default.primary}
-            size={20}
-          />
-        </div>
-        <span className="menu-item-text" css={menuItemTextStyle(isCurrent)}>
-          {name}
-        </span>
-      </React.Fragment>
-    );
-
-    return (
-      <React.Fragment>
-        {hasSubMenus ? (
-          <ExpandCollapse
-            // @ts-ignore
-            isExpanded={isExpanded}
-            onChange={() => toggleMenuItem(url)}
-            textAndControl={(handleClick) => {
-              return (
-                <button type="button" css={menuItemStyle()} data-testid={url} onClick={handleClick}>
-                  {MenuItemContent}
-                </button>
-              );
-            }}
-          >
-            {() => {
-              return (
-                <React.Fragment>
-                  {options.map(
-                    (subMenuItem) =>
-                      subMenuItem.isVisible && (
-                        <NavLink
-                          to={subMenuItem.url}
-                          state={subMenuItem.state}
-                          data-testid={subMenuItem.url}
-                          className={({ isActive, isPending }) =>
-                            isPending ? 'pending' : isActive ? 'active' : ''
-                          }
-                          key={subMenuItem.url}
-                          css={subMenuLinkStyle()}
-                          id="submenu-item-link"
-                        >
-                          <div css={subMenuIconStyle()}>
-                            <Icon
-                              name={subMenuItem.iconName}
-                              color={vars.color.text.default.primary}
-                              size={20}
-                            />
-                          </div>
-                          <span className="submenu-item-text">{subMenuItem.name}</span>
-                        </NavLink>
-                      )
-                  )}
-                </React.Fragment>
-              );
-            }}
-          </ExpandCollapse>
-        ) : (
-          <NavLink
-            to={url}
-            state={linkState}
-            data-testid={url}
-            className={({ isActive, isPending }) =>
-              isPending ? 'pending' : isActive ? 'active' : ''
-            }
-            key={url}
-            css={menuLinkStyle()}
-          >
-            {MenuItemContent}
-          </NavLink>
-        )}
-      </React.Fragment>
-    );
-  }
-);
-
-MenuItem.displayName = 'MenuItem';
-export default MenuItem;

package/src/components/Navigation/Directory/index.ts

@@ -1 +0,0 @@
-export { default } from './Directory';

package/src/components/Navigation/Navigation.style.ts

@@ -1,22 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-import { transition } from 'theme/functions';
-
-export const navigationContainerStyle = (
-  isExpanded: boolean,
-  isDesktop: boolean,
-  isSmallDesktop: boolean
-): SerializedStyles => css`
-  ${transition(0.2)};
-  width: ${isExpanded ? rem('308px') : isDesktop ? rem('112px') : rem('0px')};
-  background-color: ${vars.color.background.default};
-  overflow: hidden;
-  flex-grow: 0;
-  flex-shrink: 0;
-  height: 100%;
-  min-height: 100%;
-  z-index: 100;
-  position: ${isSmallDesktop ? 'absolute' : 'relative'};
-  border-right: ${rem(1)} solid ${vars.color['border-color'].decorative.default};
-`;

package/src/components/Navigation/Navigation.test.tsx

@@ -1,53 +0,0 @@
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import { fireEvent, render } from '~/test';
-import { menuItems } from '~/utils/common';
-import Navigation from './Navigation';
-
-describe('Navigation', () => {
-  let queries: any;
-  let isExpanded = true;
-
-  beforeEach(async () => {
-    queries = render(
-      <Router>
-        <Navigation
-          isExpanded={isExpanded}
-          menuItems={menuItems}
-          setExpanded={() => {
-            isExpanded = false;
-          }}
-        />
-      </Router>
-    );
-  });
-
-  test('that menu items are rendering', async () => {
-    for (const menuItem of menuItems) {
-      // menu item is visible
-      expect(queries.getByText(menuItem.name)).toBeVisible();
-      //sub menu items are not visible
-      for (const subMenuItem of menuItem.options) {
-        expect(queries.getByText(subMenuItem.name)).not.toBeVisible();
-      }
-    }
-  });
-
-  test('that submenu items are displayed when menu item is clicked', async () => {
-    const testingMenuItem = menuItems[0];
-    fireEvent.click(queries.getByText(testingMenuItem.name));
-    for (const subMenuItem of testingMenuItem.options) {
-      expect(queries.getByText(subMenuItem.name)).toBeVisible();
-    }
-  });
-
-  test('that submenu navigation is working', async () => {
-    const testingMenuItem = menuItems[0];
-    const testingSubMenuItem = testingMenuItem.options[3];
-    expect(queries.getByText(testingSubMenuItem.name)).not.toBeVisible();
-    fireEvent.click(queries.getByText(testingMenuItem.name)); // open menu item
-    expect(queries.getByText(testingSubMenuItem.name)).toBeVisible();
-    fireEvent.click(queries.getByText(testingSubMenuItem.name));
-    expect(location.pathname).toBe(testingSubMenuItem.url);
-  });
-});

package/src/components/Navigation/Navigation.tsx

@@ -1,37 +0,0 @@
-import useBreakpoints from 'hooks/useBreakpoints';
-import { omit } from 'lodash-es';
-import React from 'react';
-
-import Directory from './Directory';
-import { navigationContainerStyle } from './Navigation.style';
-import type { NavigationMenuItem } from './types';
-
-export type NavigationProps = {
-  /** Defines if the navigation is expanded */
-  isExpanded: boolean;
-  /** Changes if the navigation is expanded */
-  setExpanded: (v: boolean) => void;
-  /** The menu items to be displayed in the navigation */
-  menuItems: NavigationMenuItem[];
-  /** Render prop function to display something over the Navigation */
-  renderHeader?: () => React.ReactNode;
-};
-
-const Navigation: React.FC<NavigationProps> = (props) => {
-  const breakpoints = useBreakpoints();
-  const isSmallDesktop = breakpoints.des1200 && !breakpoints.des1440;
-
-  return (
-    <div
-      css={navigationContainerStyle(props.isExpanded, breakpoints.des1200, !breakpoints.des1440)}
-      onMouseEnter={() => isSmallDesktop && props.setExpanded(true)}
-      onMouseLeave={() => isSmallDesktop && props.setExpanded(false)}
-      data-testid="sidebar"
-    >
-      {props.renderHeader?.()}
-      <Directory {...omit(props, 'renderHeader')} />
-    </div>
-  );
-};
-
-export default Navigation;

package/src/components/Navigation/index.ts

@@ -1,3 +0,0 @@
-export { default } from './Navigation';
-export * from './Navigation';
-export * from './types';

package/src/components/Navigation/types.ts

@@ -1,17 +0,0 @@
-import type { Location } from 'history';
-import type { Params } from 'react-router-dom';
-
-import type { AcceptedIconNames } from 'components/Icon';
-
-export type NavigationMenuItem = {
-  name: string;
-  url: string;
-  state?: Record<string, any> | null;
-  isVisible: boolean;
-  iconName: AcceptedIconNames;
-  isActive?<S = Location['state']>(
-    params: Readonly<Params<string>>,
-    location: Location<S>
-  ): boolean;
-  options: NavigationMenuItem[];
-};

package/src/components/Select/storyUtils.ts

@@ -1,48 +0,0 @@
-import type { SelectOption } from './types';
-
-export const options = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'citrus2', label: 'Citrus2' },
-  { value: 'citrus3', label: 'Citrus3' },
-  { value: 'citrus4', label: 'Citrus4' },
-  { value: 'vanilla', label: 'Vanilla', isDisabled: true },
-] as SelectOption[];
-export const optionsWithHelperInDisabled = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'citrus', label: 'Citrus' },
-  { value: 'why_Disabled', label: 'Why Disabled?', helperText: 'this is why!', isDisabled: true },
-] as SelectOption[];
-export const groupOptions = [
-  {
-    value: 'Sweet',
-    label: 'Sweets',
-    options: [
-      { value: '1', label: 'Chocolate' },
-      { value: '2', label: 'Option 2' },
-    ],
-  },
-  {
-    value: 'Sour',
-    label: 'Sour',
-    options: [{ value: '3', label: 'Option 3' }],
-  },
-  { value: '4', label: 'Option 4' },
-  {
-    value: 'group5',
-    label: 'Group 5',
-    options: [
-      { value: '5', label: 'Option 7' },
-      { value: '6', label: 'Option 8' },
-    ],
-  },
-  {
-    value: 'group6',
-    label: 'Group 6',
-    options: [{ value: '7', label: 'Option 9' }],
-  },
-] as SelectOption[];
-export const defaultValue = options[0];

package/src/components/TabStepper/constants.tsx

@@ -1,46 +0,0 @@
-import type { TabOrientation } from 'index';
-import { TextArea, TextField } from 'index';
-
-import { Radio, RadioGroup } from '../Controls';
-
-export const getContent = (key: string, orientation: TabOrientation) => {
-  if (key === 'step_1') {
-    return (
-      <div
-        css={{
-          display: 'flex',
-          padding: '16px',
-          flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-          gap: '16px',
-        }}
-      >
-        <TextField label="First Name" isRequired />
-        <TextField label="Middle Name" />
-        <TextField label="Last Name" isRequired />
-      </div>
-    );
-  }
-
-  if (key === 'step_2') {
-    return (
-      <RadioGroup
-        sx={{
-          display: 'flex',
-          flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-          gap: '32px',
-          padding: '16px',
-        }}
-      >
-        <Radio value="option 1">Option 1</Radio>
-        <Radio value="option 2">Option 2</Radio>
-        <Radio value="option 3">Option 3</Radio>
-      </RadioGroup>
-    );
-  }
-
-  return (
-    <div css={{ padding: '16px' }}>
-      <TextArea label="Comments" />
-    </div>
-  );
-};

package/src/components/Tabs/constants.tsx

@@ -1,54 +0,0 @@
-import { options } from '../Filter/constants';
-import Tag from '../Tag';
-import { showcaseContent } from './Tabs.style';
-import type { TabOrientation } from './types';
-
-export const getItems = (hasCounter = false) => {
-  return [
-    {
-      id: 'geller',
-      label: 'Geller',
-      ...(hasCounter ? { counter: 4 } : {}),
-    },
-    {
-      id: 'bing',
-      label: 'Bing',
-      ...(hasCounter ? { counter: '3k' } : {}),
-    },
-    {
-      id: 'tribbiani',
-      label: 'Tribbiani',
-      ...(hasCounter ? { counter: 2 } : {}),
-    },
-    {
-      id: 'green',
-      label: 'Green',
-      ...(hasCounter ? { counter: 3 } : {}),
-    },
-    {
-      id: 'buffay',
-      label: 'Buffay',
-      ...(hasCounter ? { counter: 0 } : {}),
-    },
-  ];
-};
-
-export const getContent = (orientation: TabOrientation) => {
-  const getTags = (selectedName: string) => {
-    return options
-      .filter((option) => option.label.toLowerCase().includes(selectedName))
-      .map((name) => (
-        <Tag key={name.value} color="blue">
-          {name.label}
-        </Tag>
-      ));
-  };
-
-  return {
-    geller: <div css={showcaseContent(orientation)}>{getTags('geller')}</div>,
-    bing: <div css={showcaseContent(orientation)}>{getTags('bing')}</div>,
-    tribbiani: <div css={showcaseContent(orientation)}>{getTags('tribbiani')}</div>,
-    green: <div css={showcaseContent(orientation)}>{getTags('green')}</div>,
-    buffay: <div css={showcaseContent(orientation)}>Empty state (0)</div>,
-  };
-};

package/src/components/Tooltip/utils.ts

@@ -1,11 +0,0 @@
-import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-export const hoverOnTooltips = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  const canvas = within(canvasElement);
-  const buttons = canvas.getAllByTestId('tooltip-button');
-
-  buttons.forEach((button) => {
-    userEvent.hover(button, { delay: 300 });
-  });
-};

package/src/hooks/__tests__/useSearchQueryParams.test.ts

@@ -1,29 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useLocation } from 'react-router-dom';
-import type { Mock } from 'vitest';
-import { vi } from 'vitest';
-import { useSearchQueryParams } from '..';
-
-vi.mock('react-router-dom', () => ({
-  useLocation: vi.fn(),
-}));
-
-describe('useSearchQueryParams', () => {
-  it('returns the search query params as an object of key / value strings (Record<string, string>)', () => {
-    (useLocation as Mock).mockReturnValue({
-      search: 'page=1&size=12&library=react&testing=yolo',
-    });
-    const { result } = renderHook(() => useSearchQueryParams());
-
-    expect(result.current).toEqual({ page: '1', size: '12', library: 'react', testing: 'yolo' });
-  });
-
-  it('returns an empty object ({}) if the search query params is an empty string', () => {
-    (useLocation as Mock).mockReturnValue({
-      search: '',
-    });
-    const { result } = renderHook(() => useSearchQueryParams());
-
-    expect(result.current).toEqual({});
-  });
-});

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { default as useSearchQueryParams } from './useSearchQueryParams';

package/src/hooks/storyUtils/DemoUseSearchQueryParams.tsx

@@ -1,30 +0,0 @@
-import type { FCC } from 'react';
-import { useEffect } from 'react';
-import type { RouterProps } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
-
-import { useSearchQueryParams } from '..';
-
-const DemoUseSearchQueryParams: FCC<{ initialEntries: string } & RouterProps> = (props) => {
-  const searchQueryParams = useSearchQueryParams();
-  const navigate = useNavigate();
-  const url = decodeURIComponent(props.initialEntries.replace(/&amp;/g, '&'));
-
-  useEffect(() => {
-    navigate(decodeURI(url));
-  }, [navigate, url]);
-
-  return (
-    <div>
-      <h1>useSearchQueryParams hook</h1>
-      <p style={{ padding: '1.4rem', background: '#fff' }}>
-        Given the url <code>{url}</code> the result of this hook is:
-        <pre>
-          <code>{JSON.stringify(searchQueryParams, null, 2)}</code>
-        </pre>
-      </p>
-    </div>
-  );
-};
-
-export default DemoUseSearchQueryParams;

package/src/hooks/useLocationToGetCurrentMenuItem.ts

@@ -1,29 +0,0 @@
-import type { NavigationMenuItem } from 'components/Navigation/types';
-import { type Dispatch, type SetStateAction, useLayoutEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-
-const useLocationToGetCurrentMenuItem = (
-  menuItems: NavigationMenuItem[],
-  setOpenMenuItems: Dispatch<SetStateAction<string[]>>
-): [string | undefined] => {
-  const location = useLocation();
-  const [currentMenuItem, setCurrentMenuItem] = useState<string>();
-
-  // we need to show an indication on the currently selected option
-  // we get that information from the current URL and then comparing it with the urls of each menuItem
-  useLayoutEffect(() => {
-    menuItems.forEach((menuItem) => {
-      const menuItemUrls = menuItem.options.map((subMenuItem) => subMenuItem.url);
-      const isUrlFound =
-        menuItemUrls.includes(location.pathname) || menuItem.url === location.pathname;
-      if (isUrlFound) {
-        setCurrentMenuItem(menuItem.url);
-        setOpenMenuItems([menuItem.url]); // expand the current menu item
-      }
-    });
-  }, [location.pathname, menuItems, setOpenMenuItems]);
-
-  return [currentMenuItem];
-};
-
-export default useLocationToGetCurrentMenuItem;

package/src/hooks/useSearchQueryParams.ts

@@ -1,16 +0,0 @@
-import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-
-const useSearchQueryParams = (): Record<string, string> => {
-  const { search } = useLocation();
-  const urlSearchParams = useMemo(() => new URLSearchParams(search), [search]);
-  const result: Record<string, string> = {};
-
-  urlSearchParams.forEach((value, key) => {
-    result[key] = value;
-  });
-
-  return result;
-};
-
-export default useSearchQueryParams;