@sisense/sdk-shared-ui 0.1.0 → 1.26.0

package/src/lib/TablePagination/TablePagination.tsx

@@ -0,0 +1,148 @@
+import React, { ForwardedRef } from 'react';
+import MuiTablePagination, {
+  type TablePaginationProps as MuiTablePaginationProps,
+} from '@mui/material/TablePagination';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+import { useMeasure } from 'react-use';
+import { UsePaginationProps } from '@mui/material/usePagination/usePagination';
+
+import { TablePaginationContext } from './TablePaginationContext';
+import {
+  getCurrentBreakpoint,
+  RESPONSIVE_TABLE_PAGINATION_CLASS,
+  tablePaginationResponsiveWidth,
+} from './themes/tablePaginationResponsiveDesign';
+import { PaginationActionsComponent } from './PaginationActionsComponent';
+import { Typography } from '../Typography';
+import { Icon, type IconProps } from '../Icon';
+
+import { siColors } from '../themes';
+import { tablePaginationTheme, type TablePaginationTheme } from './themes';
+
+type MuiSelectDisplayProps = React.HTMLAttributes<HTMLDivElement> & {
+  'data-testid'?: string;
+};
+
+export type TablePaginationProps = Omit<
+  MuiTablePaginationProps,
+  'onPageChange' | 'ActionsComponent' | 'labelRowsPerPage' | 'onRowsPerPageChange'
+> & {
+  displayedLabelRows: { conjunction: string; result: string };
+  onRowsPerPageChange: (rowsPerPage: number) => void;
+  onPageChange: (page: number) => void;
+  theme?: TablePaginationTheme;
+  labelRowsPerPage: string;
+  labelRowsPerPageShort?: string;
+  dataTestId?: string;
+};
+
+const PAGE_START_ZERO_BASE_INDEX = 1;
+
+const TablePagination = React.forwardRef(
+  // eslint-disable-next-line max-lines-per-function
+  (
+    {
+      count,
+      page,
+      rowsPerPage,
+      onRowsPerPageChange,
+      displayedLabelRows,
+      onPageChange,
+      labelRowsPerPage,
+      labelRowsPerPageShort = 'Rows',
+      rowsPerPageOptions = [10, 25, 50, 75],
+      theme = tablePaginationTheme,
+      dataTestId,
+      style,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+      ...rest
+    }: TablePaginationProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    // React sensor hook that tracks dimensions of an HTML element using the Resize Observer API
+    const [measureRef, { width }] = useMeasure<HTMLDivElement>();
+    const breakpointIsLessThanLg = width < tablePaginationResponsiveWidth.lg;
+
+    const handleLabelDisplayedRows = ({
+      from,
+      to,
+      count,
+    }: {
+      from: number;
+      to: number;
+      count: number;
+    }) => {
+      const msg = breakpointIsLessThanLg
+        ? `${from}-${to} / ${count}`
+        : `${from}-${to} ${displayedLabelRows.conjunction} ${count} ${displayedLabelRows.result}`;
+
+      return (
+        <Typography variant={'bodyParagraph'} sx={{ color: siColors.StTextColors.secondary }}>
+          {msg}
+        </Typography>
+      );
+    };
+
+    const handleOnPageChange = (event: React.MouseEvent<HTMLButtonElement> | null, page: number) =>
+      onPageChange(page);
+
+    const handleOnRowsPerPage = (
+      event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+    ) => onRowsPerPageChange(Number(event.target.value));
+
+    const breakpoint = getCurrentBreakpoint(width);
+    const paginationProps: UsePaginationProps = {
+      siblingCount: breakpointIsLessThanLg ? 0 : 1,
+    };
+
+    return (
+      <ThemeProvider theme={theme}>
+        <TablePaginationContext.Provider value={paginationProps}>
+          <div className={`${RESPONSIVE_TABLE_PAGINATION_CLASS} ${breakpoint}`} ref={measureRef}>
+            <MuiTablePagination
+              ref={ref}
+              component={'div'}
+              count={count}
+              page={page - PAGE_START_ZERO_BASE_INDEX}
+              ActionsComponent={PaginationActionsComponent}
+              onPageChange={handleOnPageChange}
+              onRowsPerPageChange={handleOnRowsPerPage}
+              rowsPerPage={rowsPerPage}
+              rowsPerPageOptions={rowsPerPageOptions}
+              labelDisplayedRows={handleLabelDisplayedRows}
+              slotProps={{
+                select: {
+                  SelectDisplayProps: {
+                    'data-testid': 'TablePaginationSelect',
+                  } as MuiSelectDisplayProps,
+                  IconComponent: (props: IconProps) => (
+                    <Icon {...props} name="general-arrow-big-down" />
+                  ),
+                  renderValue: (value: unknown) => (
+                    <Typography variant={'bodyParagraph'}>{String(value)}</Typography>
+                  ),
+                  MenuProps: {
+                    sx: {
+                      '.MuiPaper-root': {
+                        fontFamily: style?.fontFamily,
+                      },
+                    },
+                  },
+                },
+              }}
+              labelRowsPerPage={
+                <Typography variant={'bodyParagraph'}>
+                  {breakpointIsLessThanLg ? labelRowsPerPageShort : labelRowsPerPage}
+                </Typography>
+              }
+              data-testid={dataTestId}
+            />
+          </div>
+        </TablePaginationContext.Provider>
+      </ThemeProvider>
+    );
+  },
+);
+
+export default TablePagination;
+export { TablePagination };

package/src/lib/TablePagination/TablePaginationContext.ts

@@ -0,0 +1,4 @@
+import { UsePaginationProps } from '@mui/material/usePagination/usePagination';
+import { createContext } from 'react';
+
+export const TablePaginationContext = createContext<UsePaginationProps>({});

package/src/lib/TablePagination/index.ts

@@ -0,0 +1,4 @@
+import TablePagination from './TablePagination';
+
+export default TablePagination;
+export * from './TablePagination';

package/src/lib/TablePagination/themes/index.ts

@@ -0,0 +1 @@
+export { tablePaginationTheme, type TablePaginationTheme } from './tablePaginationTheme';

package/src/lib/TablePagination/themes/tablePaginationResponsiveDesign.ts

@@ -0,0 +1,33 @@
+export const RESPONSIVE_TABLE_PAGINATION_CLASS = 'responsive-table-pagination';
+
+// Each breakpoint (a key) matches with a fixed screen width in px:
+export const tablePaginationResponsiveWidth = {
+  xs: 0,
+  sm: 200,
+  md: 439,
+  lg: 600,
+  xl: 1536,
+};
+
+export const getCurrentBreakpoint = (width: number): string => {
+  if (inRange(tablePaginationResponsiveWidth.xs, tablePaginationResponsiveWidth.sm, width)) {
+    return 'xs';
+  }
+
+  if (inRange(tablePaginationResponsiveWidth.sm, tablePaginationResponsiveWidth.md, width)) {
+    return 'sm';
+  }
+
+  if (inRange(tablePaginationResponsiveWidth.md, tablePaginationResponsiveWidth.lg, width)) {
+    return 'md';
+  }
+
+  if (inRange(tablePaginationResponsiveWidth.lg, tablePaginationResponsiveWidth.xl, width)) {
+    return 'lg';
+  }
+
+  return 'xl';
+};
+
+const inRange = (start: number, end: number, point: number): boolean =>
+  point >= start && point < end;

package/src/lib/TablePagination/themes/tablePaginationTheme.tsx

@@ -0,0 +1,128 @@
+import createTheme from '@mui/material/styles/createTheme';
+
+// import { injectStylesWithWrapper, themeService } from '@sbi/styleguide';
+
+import { siColors, stEffects } from '../../themes';
+// import { calcStyles } from './uiCustomization';
+import { tablePaginationResponsiveWidth } from './tablePaginationResponsiveDesign';
+
+// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
+export const tablePaginationTheme = createTheme({
+  breakpoints: {
+    values: tablePaginationResponsiveWidth,
+  },
+  components: {
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%',
+        },
+        toolbar: {
+          '&.MuiTablePagination-toolbar': {
+            display: 'flex',
+            flexDirection: 'row',
+            padding: '0px 20px 0 20px',
+            alignItems: 'center',
+            height: '30px',
+            width: '100%',
+          },
+          '.Mui-selected': {
+            margin: 0,
+          },
+        },
+        spacer: {
+          display: 'none',
+        },
+        displayedRows: {
+          whiteSpace: 'nowrap',
+        },
+        selectLabel: {
+          order: 4,
+          paddingLeft: '20px',
+        },
+        input: {
+          order: 5,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          borderRadius: '4px',
+          marginRight: '0',
+        },
+        select: {
+          '&.MuiTablePagination-select': {
+            background: 'transparent',
+          },
+        },
+        selectIcon: {
+          position: 'absolute',
+          top: '8%',
+        },
+        menuItem: {
+          paddingLeft: '10px',
+          '&.MuiTablePagination-menuItem.Mui-selected': {
+            position: 'relative',
+            background: 'transparent',
+            // '&:hover': {
+            //     backgroundColor:
+            //         themeService.getDesignSettings().typography.primaryTextColor,
+            //     color: themeService.getDesignSettings().typography.primaryTextColor,
+            // },
+            '&:after': {
+              marginLeft: '15px',
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              width: '24px',
+              height: '24px',
+              top: '3px',
+              backgroundImage:
+                "url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2604 8.58124L10.9174 16.0615L7 12.1442L7.70711 11.4371L10.7898 14.5197L15.4467 8L16.2604 8.58124Z' fill='%235B6372'/%3E%3C/svg%3E%0A\")",
+            },
+          },
+          '&.MuiTablePagination-menuItem': {
+            fontFamily: 'inherit',
+            fontWeight: '400',
+            fontSize: '13px',
+            lineHeight: '18px',
+            color: siColors.StTextColors.content,
+          },
+          '&:hover': {
+            backgroundColor: siColors.StBackgroundColors.priority,
+          },
+        },
+        actions: {
+          marginLeft: 0,
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          padding: '4px 0px',
+          gap: '4px',
+          marginTop: '4px',
+          background: siColors.StBackgroundColors.workspace,
+          boxShadow: stEffects.Shadows.level1,
+          borderRadius: '4px',
+        },
+      },
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          width: '100%',
+        },
+      },
+    },
+  },
+});
+
+export type TablePaginationTheme = typeof tablePaginationTheme;

package/src/lib/TablePagination/themes/uiCustomization.ts

@@ -0,0 +1,50 @@
+export {};
+// import { CalcStyles, DesignSettings, utils } from '@sbi/styleguide';
+// import { RESPONSIVE_TABLE_PAGINATION_CLASS } from './tablePaginationResponsiveDesign';
+//
+// const DEFAULT_OPACITY = 0.1;
+//
+// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
+//     [`.${RESPONSIVE_TABLE_PAGINATION_CLASS}`]: {
+//         '&.sm, &.xs': {
+//             '.MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows, .MuiInputBase-root':
+//                 {
+//                     display: 'none',
+//                 },
+//             '.MuiTablePagination-toolbar': {
+//                 padding: 0,
+//             },
+//         },
+//         '&.xs': {
+//             '.MuiPaginationItem-page, .MuiPaginationItem-ellipsis': {
+//                 display: 'none',
+//             },
+//             '.Mui-selected, .MuiPaginationItem-firstLast': {
+//                 display: 'block',
+//                 padding: 0,
+//             },
+//             '.MuiPaginationItem-previousNext': {
+//                 width: '26px',
+//             },
+//         },
+//         width: '100%',
+//     },
+//     '.MuiTablePagination-root': {
+//         backgroundColor: utils.makeASlightlyDifferentColor(
+//             designSettings.general.backgroundColor,
+//             DEFAULT_OPACITY,
+//         ),
+//     },
+//     '.MuiTablePagination-select.MuiTablePagination-select': {
+//         backgroundColor: designSettings.general.backgroundColor,
+//     },
+//     '.MuiTablePagination-select': {
+//         color: designSettings.typography.primaryTextColor,
+//     },
+//     '.MuiTablePagination-selectIcon': {
+//         color: utils.makeASlightlyDifferentColor(
+//             designSettings.typography.secondaryTextColor,
+//             DEFAULT_OPACITY,
+//         ),
+//     },
+// });

package/src/lib/Tooltip/Tooltip.module.scss

@@ -0,0 +1,125 @@
+@use 'sass:math';
+@import '../styles/style_styleguide_react/base';
+
+$tooltip-max-width: 432px;
+
+:global {
+  @import 'rc-tooltip/assets/bootstrap_white';
+
+  $arrow-size: 8px;
+  $arrow-depth: 6px; // Math.ceil(sqrt(2) * $arrow-size / 2)
+
+  .rc-tooltip {
+    padding: 0;
+    background-color: transparent;
+    opacity: 1;
+
+    &.hide-arrow {
+      .rc-tooltip-arrow,
+      .rc-tooltip-content:before {
+        display: none;
+      }
+
+      &.rc-tooltip-placement-top,
+      &.rc-tooltip-placement-bottom,
+      &.rc-tooltip-placement-left,
+      &.rc-tooltip-placement-right {
+        padding: 0;
+      }
+
+      .rc-tooltip-inner {
+        padding: 0;
+      }
+    }
+  }
+
+  .rc-tooltip-content {
+    position: relative;
+  }
+
+  .rc-tooltip-inner {
+    padding: 6px 12px;
+    min-height: 0;
+    border: 0;
+    border-radius: 4px;
+    @include boxShadow;
+    pointer-events: none;
+    color: $fore;
+    font-size: $sizeDefault;
+  }
+
+  .rc-tooltip-arrow {
+    border-width: 0 !important;
+    width: $arrow-size;
+    height: $arrow-size;
+    background-color: $back;
+    @include boxShadow;
+    z-index: -1;
+    transform: rotate(45deg);
+  }
+
+  .rc-tooltip-content:before {
+    content: '';
+    position: absolute;
+    width: $arrow-size;
+    height: $arrow-size;
+    background-color: $back;
+    transform: rotate(45deg);
+  }
+
+  .rc-tooltip-placement-top {
+    padding-bottom: $arrow-depth;
+
+    .rc-tooltip-arrow,
+    .rc-tooltip-content:before {
+      left: 50%;
+      margin-left: math.div(-$arrow-size, 2);
+      bottom: math.div(-$arrow-size, 2);
+    }
+  }
+
+  .rc-tooltip-placement-bottom {
+    padding-top: $arrow-depth;
+
+    .rc-tooltip-arrow,
+    .rc-tooltip-content:before {
+      left: 50%;
+      margin-left: math.div(-$arrow-size, 2);
+      top: math.div(-$arrow-size, 2);
+    }
+  }
+
+  .rc-tooltip-placement-right {
+    padding-left: $arrow-depth;
+
+    .rc-tooltip-arrow,
+    .rc-tooltip-content:before {
+      top: 50%;
+      margin-top: math.div(-$arrow-size, 2);
+      left: math.div(-$arrow-size, 2);
+    }
+  }
+
+  .rc-tooltip-placement-left {
+    padding-right: $arrow-depth;
+
+    .rc-tooltip-arrow,
+    .rc-tooltip-content:before {
+      top: 50%;
+      margin-top: math.div(-$arrow-size, 2);
+      right: math.div(-$arrow-size, 2);
+    }
+  }
+}
+
+.breakLongWord {
+  word-break: break-all;
+}
+
+.semanticText {
+  max-width: $tooltip-max-width;
+}
+
+:global(.sis-scope).tooltip {
+  padding: 12px 16px;
+}

package/src/lib/Tooltip/Tooltip.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+import MuiTooltip, { type TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+import classnames from 'classnames';
+
+import { tooltipTheme, type TooltipTheme } from './themes';
+import { styleguideConstants } from '../constants/styleguideConstants';
+import styles from './Tooltip.module.scss';
+
+export type TooltipProps = MuiTooltipProps & { theme?: TooltipTheme };
+
+const Tooltip = forwardRef(
+  ({ title, children, arrow, theme = tooltipTheme, ...rest }: TooltipProps, ref) => {
+    const { classes: customClasses = {} } = rest;
+    const classes = {
+      ...customClasses,
+      tooltip: classnames(
+        styles.tooltip,
+        customClasses.tooltip,
+        styleguideConstants.SISENSE_NAMESPACE,
+      ),
+    };
+    return (
+      <ThemeProvider theme={theme}>
+        <MuiTooltip {...rest} title={title} arrow={arrow} ref={ref} classes={classes}>
+          {children}
+        </MuiTooltip>
+      </ThemeProvider>
+    );
+  },
+);
+
+export default Tooltip;
+export { Tooltip };

package/src/lib/Tooltip/index.ts

@@ -0,0 +1,5 @@
+import Tooltip from './Tooltip';
+
+export default Tooltip;
+export * from './Tooltip';
+export { tooltipTheme, type TooltipTheme } from './themes';

package/src/lib/Tooltip/themes/index.ts

@@ -0,0 +1 @@
+export { tooltipTheme, type TooltipTheme } from './tooltipTheme';

package/src/lib/Tooltip/themes/tooltipTheme.ts

@@ -0,0 +1,30 @@
+import createTheme from '@mui/material/styles/createTheme';
+import { siColors } from '../../themes';
+
+export const tooltipTheme = createTheme({
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        arrow: {
+          color: siColors.StBackgroundColors.workspace,
+        },
+        tooltip: {
+          color: siColors.StTextColors.content,
+          maxWidth: '432px',
+          borderRadius: '4px',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '12px 16px',
+          gap: '10px',
+          backgroundColor: siColors.StBackgroundColors.workspace,
+          filter:
+            'drop-shadow(0px 1px 4px rgba(9, 9, 10, 0.1)) drop-shadow(0px 4px 12px rgba(9, 9, 10, 0.2));',
+        },
+      },
+    },
+  },
+});
+
+export type TooltipTheme = typeof tooltipTheme;

package/src/lib/Typography/Typography.tsx

@@ -0,0 +1,28 @@
+import React, { ForwardedRef } from 'react';
+import MuiTypography, {
+  type TypographyProps as MuiTypographyProps,
+} from '@mui/material/Typography';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+
+import { typographyTheme, type TypographyTheme } from './themes';
+
+export type TypographyProps = MuiTypographyProps & {
+  theme?: TypographyTheme;
+  dataTestId?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+
+const Typography = React.forwardRef(
+  (
+    { children, theme = typographyTheme, dataTestId, ...rest }: TypographyProps,
+    ref: ForwardedRef<HTMLSpanElement>,
+  ) => (
+    <ThemeProvider theme={theme}>
+      <MuiTypography ref={ref} {...rest} data-testid={dataTestId}>
+        {children}
+      </MuiTypography>
+    </ThemeProvider>
+  ),
+);
+
+export default Typography;
+export { Typography };

package/src/lib/Typography/index.ts

@@ -0,0 +1,5 @@
+import Typography from './Typography';
+
+export default Typography;
+export * from './Typography';
+export { typographyTheme, type TypographyTheme } from './themes';

package/src/lib/Typography/themes/index.ts

@@ -0,0 +1 @@
+export { typographyTheme, type TypographyTheme } from './typographyTheme';