@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/TableV4/types.ts

@@ -1,94 +0,0 @@
-import type React from 'react';
-import type { TooltipPlacement } from '~/components/Tooltip/Tooltip.types';
-
-export type ContentComponent<T> = (data: Cell<T>) => React.ReactNode;
-export type Cell<T> = {
-  /** the content of the cell to be displayed. You can pass also custom component. `ContentComponent: (data: Cell<T>) => React.ReactNode`. The type defines that will be a function that returns cell to use cell data.  */
-  content: number | string | ContentComponent<T>;
-  /** the truncated tooltip content, you can override it or it will take the content @default content */
-  tooltipContent?: string;
-  /** show or not the truncated tooltip @default true if the text is truncated */
-  hasTruncatedTooltip?: boolean;
-  /** the colSpan of the cell to be displayed */
-  colSpan?: number;
-  /** the type of the cell to be displayed @default normal */
-  type?: 'financial' | 'normal';
-  /** the alignment of the cell to be displayed */
-  align?: 'left' | 'right';
-  /** the width of the cell to be displayed */
-  widthPercentage?: number;
-};
-
-export type Row<T> = {
-  /** the id of the row */
-  id: string | number;
-  /** the cells of the row, see Cell type for each */
-  cells: Cell<T>[];
-  /** the expanded content of the row, if its expandable */
-  expanded?: ({
-    row,
-    isSelected,
-    isExpanded,
-  }: {
-    row: Row<T>;
-    isSelected: boolean;
-    isExpanded: boolean;
-  }) => React.ReactNode;
-  rowSpan?: number;
-};
-
-export type Selection = string | number;
-
-export type TableType = 'normal' | 'nested-header';
-
-export type TablePropsV4<T> = {
-  /** The data for the table that needs to display. */
-  data: Row<T>[];
-  /** An array of titles or objects to define columns. */
-  columns: (string | ExtendedColumn)[];
-  /** Boolean defining if the header is fixed or not. */
-  hasFixedHeader?: boolean;
-  /** Boolean defining if the CTA's container is fixed or not. */
-  hasFixedCTA?: boolean;
-  /** Type of the table which determine the headers display. */
-  type?: TableType;
-  /** Boolean defining the padding all over the table cells and rows. */
-  isPadded?: boolean;
-  /** Function that once provided on each check will return the selection. */
-  onCheck?: (data: Selection[]) => void;
-  /** Function that once provided will provide the currently selected sorting configuration */
-  onSort?: (column: string, order: SortingOrder) => void;
-  /** Initial sorting column and order. Should be provided along with onSort */
-  initialSort?: Sort;
-  /** If provided sort will only work with this option (asc or desc only). By default supports bidirectional sort*/
-  sortDir?: SortingOrder;
-  /** Top left text on the table - showing a counter, text etc. */
-  topLeftText?: string | React.ReactElement;
-  /** Top right area to define a custom component for buttons or other usage. */
-  topRightArea?: (data: Row<T>[], selectionData?: Selection[]) => React.ReactNode;
-  /** Action cell width for Table with Expandable Rows (in %)*/
-  actionWidth?: number;
-  /** If true, table's expandable rows will be expanded on initial render. */
-  isInitiallyExpanded?: boolean;
-  /** Data test id prefix for all th/td elements */
-  dataTestIdPrefix?: string;
-};
-
-export type SortingOrder = 'asc' | 'desc';
-
-export type ExtendedColumn = {
-  content: {
-    label: string;
-    sortingKey: string;
-  };
-  tooltip?: {
-    content: string;
-    placement?: TooltipPlacement;
-  };
-  isSortable?: boolean;
-};
-
-export type Sort = {
-  column: string;
-  order: SortingOrder;
-};

package/src/components/TableV4/utils/TableStoryComponents.tsx

@@ -1,12 +0,0 @@
-import type React from 'react';
-
-import type { Cell, ExtendedColumn, Row } from '../types';
-
-/** This is just a dummy component to be used in Storybook for showing the Row type on props */
-export const RowStory: React.FC<Row<unknown>> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the Cell type on props */
-export const CellStory: React.FC<Cell<unknown>> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the ExtendedColumn type on props */
-export const ExtendedColumnStory: React.FC<ExtendedColumn> = () => null;

package/src/components/TableV4/utils/index.ts

@@ -1 +0,0 @@
-export * from './utils';

package/src/components/TableV4/utils/utils.ts

@@ -1,10 +0,0 @@
-import { vars } from '@orfium/tokens';
-import type { ExtendedColumn } from '../types';
-
-export const isItemString = (prop: string | ExtendedColumn): prop is string =>
-  typeof prop === 'string';
-
-export const hasTooltipOrSortingKey = (prop: ExtendedColumn): boolean =>
-  Boolean(prop.isSortable || prop.tooltip);
-
-export const getBorderColor = (): string => vars.color['border-color'].decorative.default;

package/src/components/Tabs/Tabs.style.ts

@@ -1,19 +0,0 @@
-import { css } from '@emotion/react';
-
-import { vars } from '@orfium/tokens';
-import type { TabOrientation } from './types';
-
-export const tagStyles = (isActive = false) => css`
-  border: none;
-  background: ${vars.color.palette[isActive ? 'primary' : 'primary-alt'].contrast};
-  color: ${vars.color.text[isActive ? 'inverted' : 'default'].primary};
-  transition: background 0.2s;
-  transition: color 0.2s;
-`;
-
-export const showcaseContent = (orientation: TabOrientation) => css`
-  display: flex;
-  flex-direction: ${orientation === 'horizontal' ? 'row' : 'column'};
-  gap: ${vars.spacing['7']};
-  padding: ${`${vars.spacing['5']} ${orientation === 'horizontal' ? 0 : vars.spacing['7']}`};
-`;

package/src/components/Tabs/Tabs.test.tsx

@@ -1,81 +0,0 @@
-import { vi } from 'vitest';
-import { render, screen } from '~/test';
-import Tabs from './Tabs';
-
-describe('<Tabs />', () => {
-  const mockItems = [
-    {
-      id: 'test-tab',
-      label: 'Test Tab',
-    },
-  ];
-
-  const mockOnSelectionChange = vi.fn();
-
-  it('displays counter when counter is 0', () => {
-    const items = [{ ...mockItems[0], counter: 0 }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.getByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).toBeInTheDocument();
-    expect(counterElement).toHaveTextContent('0');
-  });
-
-  it('displays counter when counter is "0"', () => {
-    const items = [{ ...mockItems[0], counter: '0' }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.getByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).toBeInTheDocument();
-    expect(counterElement).toHaveTextContent('0');
-  });
-
-  it('displays counter when counter is 123', () => {
-    const items = [{ ...mockItems[0], counter: 123 }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.getByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).toBeInTheDocument();
-    expect(counterElement).toHaveTextContent('123');
-  });
-
-  it('displays counter when counter is "1.2K"', () => {
-    const items = [{ ...mockItems[0], counter: '1.2K' }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.getByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).toBeInTheDocument();
-    expect(counterElement).toHaveTextContent('1.2K');
-  });
-
-  it('hides counter when counter is empty string', () => {
-    const items = [{ ...mockItems[0], counter: '' }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.queryByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).not.toBeInTheDocument();
-  });
-
-  it('hides counter when counter is null', () => {
-    const items = [{ ...mockItems[0], counter: null }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.queryByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).not.toBeInTheDocument();
-  });
-
-  it('hides counter when counter is undefined', () => {
-    const items = [{ ...mockItems[0], counter: undefined }];
-
-    render(<Tabs items={items} selectedKey="test-tab" onSelectionChange={mockOnSelectionChange} />);
-
-    const counterElement = screen.queryByTestId('ictinus_tab_test-tab_counter_tag_container');
-    expect(counterElement).not.toBeInTheDocument();
-  });
-});

package/src/components/Tabs/Tabs.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import Tag from '../Tag';
-import { Tab, TabList, TabsContainer } from './components';
-import { tagStyles } from './Tabs.style';
-import { type TabsProps } from './types';
-
-const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
-  const {
-    orientation = 'horizontal',
-    selectedKey,
-    onSelectionChange,
-    items,
-    dataTestPrefixId = 'ictinus',
-    children,
-    sx,
-  } = props;
-
-  return (
-    <TabsContainer
-      orientation={orientation}
-      selectedKey={selectedKey}
-      onSelectionChange={onSelectionChange}
-      ref={ref}
-      sx={sx?.tabsContainer}
-    >
-      <TabList aria-label={props['aria-label']} sx={sx?.tabList}>
-        {items.map((item) => {
-          const { id, label, counter = null } = item;
-          const hasCounterTag = counter !== null && counter !== undefined && counter !== '';
-          const isActive = id === selectedKey;
-
-          return (
-            <Tab key={id} id={id} data-testid={`${dataTestPrefixId}_tab_${id}`} sx={sx?.tab}>
-              <span>{label}</span>
-              {hasCounterTag && (
-                <Tag
-                  css={tagStyles(isActive)}
-                  dataTestPrefixId={`${dataTestPrefixId}_tab_${id}_counter`}
-                >
-                  {counter}
-                </Tag>
-              )}
-            </Tab>
-          );
-        })}
-      </TabList>
-      {children}
-    </TabsContainer>
-  );
-});
-
-Tabs.displayName = 'Tabs';
-
-export default Tabs;

package/src/components/Tabs/components/Tab/Tab.style.ts

@@ -1,12 +0,0 @@
-import { css, type CSSObject } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-
-import { flexCenterVertical } from 'theme/functions';
-
-export const containerStyles = (sx?: CSSObject) => css`
-  cursor: pointer;
-  ${flexCenterVertical};
-  gap: ${vars.spacing['4']};
-  padding: ${vars.spacing['4']};
-  ${sx};
-`;

package/src/components/Tabs/components/Tab/Tab.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Tab as ReactAriaTab } from 'react-aria-components';
-
-import { containerStyles } from './Tab.style';
-import type { TabProps } from '../../types';
-
-const Tab = React.forwardRef<HTMLDivElement, TabProps>((props, ref) => {
-  const { children, sx, ...rest } = props;
-
-  return (
-    <ReactAriaTab css={containerStyles(sx)} {...rest} ref={ref}>
-      {children}
-    </ReactAriaTab>
-  );
-});
-
-Tab.displayName = 'Tab';
-
-export default Tab;

package/src/components/Tabs/components/Tab/index.ts

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

package/src/components/Tabs/components/TabList/TabList.style.ts

@@ -1,85 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-
-import type { Theme } from '~/theme';
-
-export const containerStyles = (sx?: CSSObject) => (theme: Theme) => css`
-  display: flex;
-  [role='tab'] {
-    position: relative;
-    width: fit-content;
-    ${theme.tokens.typography.get('normal.body01')};
-    color: ${vars.color.text.default.primary};
-  }
-
-  [role='tab'][data-selected] {
-    color: ${vars.color.text.default.active};
-    ${theme.tokens.typography.get('normal.label01')};
-  }
-
-  [role='tab'][data-focus-visible]:after {
-    content: '';
-    position: absolute;
-
-    border-radius: ${vars['border-radius']['1']};
-    border: ${vars['border-width']['3']} solid ${vars.color['border-color'].interactive.focused};
-  }
-
-  &[data-orientation='horizontal'] {
-    gap: ${vars.spacing['5']};
-
-    [role='tab'][data-focus-visible]:after {
-      inset: -3px -8px;
-    }
-
-    [role='tab'] {
-      border-bottom: ${vars['border-width']['2']} solid
-        ${vars.color['border-color'].decorative.transparent};
-      transition: color ease-in-out 0.2s;
-      transition: border-bottom 0.2s;
-    }
-
-    [role='tab']:hover {
-      border-color: ${vars.color['border-color'].interactive.default};
-    }
-
-    [role='tab'][data-selected] {
-      color: ${vars.color.text.default.active};
-      ${theme.tokens.typography.get('normal.label01')};
-
-      border-color: ${vars.color['border-color'].interactive.active};
-    }
-  }
-
-  &[data-orientation='vertical'] {
-    flex-direction: column;
-    gap: ${vars.spacing['4']};
-
-    [role='tab'][data-focus-visible]:after {
-      inset: -4px -2px;
-    }
-
-    [role='tab'] {
-      padding: ${vars.spacing['5']} ${vars.spacing['4']};
-
-      box-shadow: inset ${vars['border-width']['2']} 0 0 0
-        ${vars.color['border-color'].decorative.transparent};
-
-      transition: color ease-in-out 0.2s;
-      transition: box-shadow 0.2s;
-    }
-
-    [role='tab']:hover {
-      box-shadow: inset ${vars['border-width']['2']} 0 0 0
-        ${vars.color['border-color'].interactive.default};
-    }
-
-    [role='tab'][data-selected] {
-      box-shadow: inset ${vars['border-width']['2']} 0 0 0
-        ${vars.color['border-color'].interactive.active};
-    }
-  }
-
-  ${sx};
-`;

package/src/components/Tabs/components/TabList/TabList.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { TabList as AriaTabList } from 'react-aria-components';
-
-import { containerStyles } from './TabList.style';
-import type { TabListProps } from '../../types';
-
-const TabList = React.forwardRef<HTMLDivElement, TabListProps>((props, ref) => {
-  const { children, sx, ...rest } = props;
-
-  return (
-    <AriaTabList css={containerStyles(sx)} ref={ref} {...rest}>
-      {children}
-    </AriaTabList>
-  );
-});
-
-TabList.displayName = 'TabList';
-
-export default TabList;

package/src/components/Tabs/components/TabList/index.ts

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

package/src/components/Tabs/components/TabPanel/TabPanel.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { TabPanel as ReactAriaTabPanel } from 'react-aria-components';
-
-import type { TabPanelProps } from '../../types';
-
-const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {
-  const { children, sx, ...rest } = props;
-
-  return (
-    <ReactAriaTabPanel {...rest} ref={ref} css={sx}>
-      {children}
-    </ReactAriaTabPanel>
-  );
-});
-
-TabPanel.displayName = 'TabPanel';
-
-export default TabPanel;

package/src/components/Tabs/components/TabPanel/index.ts

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

package/src/components/Tabs/components/TabsContainer/TabsContainer.style.ts

@@ -1,12 +0,0 @@
-import { css, type CSSObject } from '@emotion/react';
-
-import type { TabOrientation } from '../../types';
-
-export const tabsContainerStyles = (orientation: TabOrientation, sx?: CSSObject) => css`
-  display: flex;
-  flex-direction: ${orientation === 'horizontal' ? 'column' : 'row'};
-
-  ${orientation === 'horizontal' && `width: fit-content;`}
-  ${orientation === 'vertical' && `height: fit-content;`}
-  ${sx};
-`;

package/src/components/Tabs/components/TabsContainer/TabsContainer.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Tabs as AriaTabs } from 'react-aria-components';
-
-import { tabsContainerStyles } from './TabsContainer.style';
-import type { TabsContainerProps } from '../../types';
-
-const TabsContainer = React.forwardRef<HTMLDivElement, TabsContainerProps>((props, ref) => {
-  const { selectedKey, onSelectionChange, orientation = 'horizontal', sx, children } = props;
-
-  return (
-    <AriaTabs
-      css={tabsContainerStyles(orientation, sx)}
-      orientation={orientation}
-      selectedKey={selectedKey}
-      onSelectionChange={onSelectionChange}
-      ref={ref}
-    >
-      {children}
-    </AriaTabs>
-  );
-});
-
-TabsContainer.displayName = 'TabsContainer';
-
-export default TabsContainer;

package/src/components/Tabs/components/TabsContainer/index.ts

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

package/src/components/Tabs/components/index.ts

@@ -1,4 +0,0 @@
-export { default as Tab } from './Tab';
-export { default as TabList } from './TabList';
-export { default as TabsContainer } from './TabsContainer';
-export { default as TabPanel } from './TabPanel';

package/src/components/Tabs/index.ts

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

package/src/components/Tabs/types.ts

@@ -1,74 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import type { AriaAttributes } from 'react';
-import type { Orientation as TabOrientation } from 'react-aria';
-import type { Key as TabKey } from 'react-aria-components';
-
-import type { TestProps } from '~/utils/types';
-
-export type { Orientation as TabOrientation } from 'react-aria';
-export type { Key as TabKey } from 'react-aria-components';
-
-export type TabItem = {
-  /** A unique id for the tab item */
-  id: string;
-  /** The label of the tab */
-  label: string;
-  /** Optional counter */
-  counter?: number | string;
-};
-
-export type TabsStylesOverrides = {
-  tabsContainer?: CSSObject;
-  tabList?: CSSObject;
-  tab?: CSSObject;
-};
-
-export type TabsProps = {
-  /** The orientation of the Tab */
-  orientation?: TabOrientation;
-  /** The id of the selected tab */
-  selectedKey: TabKey;
-  /** Callback to change the selected tab */
-  onSelectionChange: (key: TabKey) => void;
-  /** The items (tabs) */
-  items: TabItem[];
-  children?: any;
-  /** Style overrides for Tabs */
-  sx?: TabsStylesOverrides;
-} & AriaAttributes &
-  TestProps;
-
-export type TabsContainerProps = {
-  /** The orientation of the Tab */
-  orientation?: TabOrientation;
-  /** The id of the selected tab */
-  selectedKey: TabKey;
-  /** Callback to change the selected tab */
-  onSelectionChange: (key: TabKey) => void;
-  children: any;
-  /** Style overrides for TabContainer */
-  sx?: CSSObject;
-} & AriaAttributes;
-
-export type TabProps = {
-  /** The id of the tab; it's also used as an indicator of the tab when using selection state */
-  id: string;
-  children: any;
-  /** Style overrides for Tab */
-  sx?: CSSObject;
-};
-
-export type TabListProps = {
-  /** Style overrides for Tabs */
-  sx?: CSSObject;
-  children: any;
-} & AriaAttributes;
-
-export type TabPanelProps = {
-  /** The id of the tab the content corresponds to */
-  id: string;
-  /** The content of the tab panel */
-  children: any;
-  /** Style overrides for TabList */
-  sx?: CSSObject;
-};

package/src/components/Tabs/utils/TabsStoryComponents.tsx

@@ -1,8 +0,0 @@
-import type React from 'react';
-import type { TabItem, TabsStylesOverrides } from '../types';
-
-/** This is just a dummy component to be used in Storybook for showing the TabItem type on props */
-export const TabItemStory: React.FC<TabItem> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the TabsStylesOverrides type on props */
-export const TabsStylesOverridesStory: React.FC<TabsStylesOverrides> = () => null;