@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/Tooltip/Tooltip.tsx

@@ -1,34 +0,0 @@
-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/themes/tooltipTheme.ts

@@ -1,30 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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/themes/typographyTheme.tsx

@@ -1,170 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-
-// import { injectStylesWithWrapper } from '@sbi/styleguide';
-
-// import { calcStyles } from './uiCustomization';
-import { siColors } from '../../themes';
-
-// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    titleHero: true;
-    titleBig: true;
-    titleMedium: true;
-    titleSmall: true;
-    subTitle: true;
-    bodyLabel: true;
-    laccent: true;
-    bodyParagraph: true;
-    paccent: true;
-    bodyUI: true;
-    overline: true;
-    caption: true;
-    annotation: true;
-    code: true;
-  }
-}
-
-export const typographyTheme = createTheme({
-  components: {
-    MuiTypography: {
-      variants: [
-        {
-          props: { variant: 'titleHero' },
-          style: {
-            fontWeight: 600,
-            fontSize: 30,
-            lineHeight: '36px',
-            letterSpacing: -0.5,
-          },
-        },
-        {
-          props: { variant: 'titleBig' },
-          style: {
-            fontWeight: 400,
-            fontSize: 21,
-            lineHeight: '24px',
-            letterSpacing: -0.2,
-          },
-        },
-        {
-          props: { variant: 'titleMedium' },
-          style: {
-            fontWeight: 600,
-            fontSize: '18px',
-            lineHeight: '24px',
-          },
-        },
-        {
-          props: { variant: 'titleSmall' },
-          style: {
-            fontWeight: 600,
-            fontSize: '15px',
-            lineHeight: '20px',
-          },
-        },
-        {
-          props: { variant: 'subTitle' },
-          style: {
-            fontWeight: 700,
-            fontSize: '13px',
-            lineHeight: '16px',
-            letterSpacing: '0.2px',
-          },
-        },
-        {
-          props: { variant: 'bodyLabel' },
-          style: {
-            fontWeight: 400,
-            fontSize: '13px',
-            lineHeight: '16px',
-            letterSpacing: '0.1px',
-          },
-        },
-        {
-          props: { variant: 'laccent' },
-          style: {
-            fontWeight: 600,
-            fontSize: '13px',
-            lineHeight: '16px',
-            letterSpacing: '0.1px',
-          },
-        },
-        {
-          props: { variant: 'bodyParagraph' },
-          style: {
-            fontWeight: 400,
-            fontSize: '13px',
-            lineHeight: '18px',
-          },
-        },
-        {
-          props: { variant: 'paccent' },
-          style: {
-            fontWeight: 600,
-            fontSize: '13px',
-            lineHeight: '18px',
-          },
-        },
-        {
-          props: { variant: 'bodyUI' },
-          style: {
-            fontWeight: 400,
-            fontSize: '13px',
-            lineHeight: '20px',
-            letterSpacing: '0.3px',
-          },
-        },
-        {
-          props: { variant: 'overline' },
-          style: {
-            fontWeight: 400,
-            fontSize: '11px',
-            lineHeight: '16px',
-            letterSpacing: '1.5px',
-          },
-        },
-        {
-          props: { variant: 'caption' },
-          style: {
-            fontWeight: 700,
-            fontSize: '11px',
-            lineHeight: '14px',
-            letterSpacing: '0.5px',
-          },
-        },
-        {
-          props: { variant: 'annotation' },
-          style: {
-            fontWeight: 400,
-            fontSize: '11px',
-            lineHeight: '16px',
-            letterSpacing: '0.3px',
-          },
-        },
-        {
-          props: { variant: 'code' },
-          style: {
-            fontFamily: 'Hack',
-            fontWeight: 400,
-            fontSize: '13px',
-            lineHeight: '20px',
-          },
-        },
-      ],
-      styleOverrides: {
-        root: {
-          display: 'inline-block',
-          fontFamily: 'Open Sans',
-          color: siColors.StTextColors.content,
-          '::first-letter': {
-            textTransform: 'capitalize',
-          },
-        },
-      },
-    },
-  },
-});
-
-export type TypographyTheme = typeof typographyTheme;

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

@@ -1,10 +0,0 @@
-export {};
-
-// import { CalcStyles, DesignSettings } from '@sbi/styleguide';
-//
-// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
-//     '.MuiTypography-root': {
-//         fontFamily: designSettings.typography.fontFamily,
-//         color: designSettings.typography.primaryTextColor,
-//     },
-// });

package/src/lib/constants/styleguideConstants.ts

@@ -1,8 +0,0 @@
-export const styleguideConstants = Object.freeze({
-  SISENSE_NAMESPACE: 'sis-scope',
-  TEXT_PRIMARY: 'slf-text-primary',
-  TEXT_SECONDARY: 'slf-text-secondary',
-  TEXT_SECONDARY_HOVER: 'slf-text-secondary-hov',
-  TEXT_HREF: 'slf-text-href',
-  TEXT_HREF_HOVER: 'slf-text-href-hov',
-});

package/src/lib/styles/colors.module.scss

@@ -1,10 +0,0 @@
-// For colors that are not available in sisense-styleguide.
-// Placeholder names from: https://chir.ag/projects/name-that-color
-
-$ATHENS_GRAY: #f4f4f8;
-$BLUE_RIBBON: #0765e3;
-$DODGER_BLUE: #1eaff3;
-$PORCELAIN: #e7e8ea;
-$COLOR-TEXT: #5b6372;
-$COLOR-TEXT-SECONDARY: #9ea2ab;
-$MISCHKA: #dee1e7;

package/src/lib/styles/sisenseStyleguideReactColors.scss

@@ -1,57 +0,0 @@
-/* texts */
-$commonLinkBlue: #1eaff4;
-$fore: #7f899c;
-$wizardFore: #5b6372;
-$foreDisabled: #b3b3b3;
-$foreHeader: #2c3342;
-$foreSubtitle: #b3b3b3;
-$forePlaceholder: #bec1c6;
-$foreNonchosen: #56535b;
-$foreHover: #3a4356;
-$textSearch: #2c3344;
-$stepCaption: #9ea2ab;
-$captionUnder: #cbced7;
-
-/* backgrounds */
-$back: #fff;
-$backHover: #ffff9c;
-$backDisabled: #f9f9f9;
-$backHeader: #cbcfd7;
-$backToolbar: #fafafa;
-$separator: #e4e4e4;
-$wizardSeparator: #edeef1;
-$lightSeparator: #ededed;
-
-/* borders */
-$border: #e9eaed;
-$borderSearch: #3a4356;
-
-/* buttons */
-$buttonCancel: #e7e7e7;
-$buttonCancelText: #7c7c7c;
-$buttonOk: #ffd617;
-$buttonOkText: #866b02;
-$buttonNext: #ffcb05;
-$buttonOkHovered: #ffe981;
-
-$hyperlink: #1faff3;
-$hyperlinkHovered: #0065e3;
-
-/* states */
-$errRed: #fa7573;
-$negativeSign: #fa5656;
-$positiveSign: #35d7be;
-$noResults: #b7b5b5;
-$selectedItem: #3a4356;
-$selectedItemBackground: #f9f9fb;
-$highlight: #5c6372;
-$highlightListItem: #f4f4f8;
-$highlightOrange: #eca80b;
-
-/*tags*/
-$color1: $highlightListItem;
-$color2: #2c779b;
-$color3: #6cb8cd;
-$color4: #a3b866;
-$color5: #e7a927;
-$color6: #d04a15;

package/src/lib/styles/style_styleguide_react/_variables.deprecated.scss

@@ -1,107 +0,0 @@
-//----------------------- Colors ---------------------------
-
-$font-color-1: #56535b;
-$font-color-2: #9f9e9e;
-$font-color-3: #212633;
-$font-color-4: #c7c7c7;
-$delete: #fc7470;
-$gray-0: #f9f9f9;
-$gray-1: #f5f5f5;
-$gray-2: #e6e6e6;
-$gray-3: #e5e5e5;
-$gray-4: #dcdcdc;
-$gray-5: #dadada;
-$gray-6: #d8d8d8;
-$gray-7: #d5d5d5;
-$gray-8: #cdcdcd;
-$gray-9: #aaa;
-$gray-10: #999;
-$gray-11: #979797;
-$gray-12: #bababa;
-$gray-13: #3f4a5a;
-$gray-14: #56535b;
-$gray-15: #f2f2f2;
-$gray-16: #777;
-$gray-17: #e8e8e8;
-$gray-18: #56635b;
-$gray-19: #b8b8b8;
-$gray-20: #6d6d6d;
-$gray-21: #666;
-$gray-22: #7d7d7d;
-$gray-24: #747474;
-
-$back-revision: #444f67;
-$green-0: #6ed956;
-
-$turquoise-blue: #00b9c5;
-$turquoise-light-blue: #00daeb;
-
-$scroll-back: #c8c8c8;
-$scroll-back-hover: #56535b;
-
-$default-svg-color: #56535b;
-$default-svg-color-cancel: #ff8c9a;
-$default-svg-color-save: #65d049;
-$default-svg-color-add: #00daeb;
-$default-svg-color-login: #2c3342;
-
-$baaaase-color: #2c3342;
-
-// background
-
-$back: #fff;
-$back-zone: $gray-15;
-$back-container: #fff;
-$back-hover: #ffff9c;
-
-$back-alternating: #f8f8f8;
-$back-cancel: #cecece;
-$back-cancel-hover: #fc7571;
-$back-cancel-accented: #fa8a8a;
-$back-ok: #6ed855;
-$back-ok-hover: #6ee555;
-$back-header: #e7e7e7;
-$back-toolbar: #fafafa;
-
-$button-yes: #57ba3e;
-$button-no: #fe746e;
-$button-yes-hovered: #6ad44f;
-$button-no-hovered: #fb9995;
-
-$border-ltgray: $gray-2;
-
-$border-toolbar: $gray-9;
-$background-toolbar: #f6f6f6;
-
-// foregound
-
-$fore: #272a34;
-$fore-disabled: #b3b3b3;
-$fore-header: $baaaase-color;
-$fore-subtitle: $fore-disabled;
-$fore-placeholder: #ececec;
-$fore-nonchosen: $gray-14;
-$x-blue: #00dae9;
-$common-link-blue: #008db8;
-$err-red: #fa7573;
-$selected-item: #01cbd9;
-
-//----------------------- Sizing ---------------------------
-
-$size-header-xl: 24px;
-$size-header-l: 16px;
-$size-header-m: 15px;
-$size-header-s: 13px;
-$size-exception-mn: 14px;
-$size-body-xl: 16px;
-$size-body-l: 13px;
-$size-body-m: 12.5px;
-$size-body-s: 12px;
-$size-body-xs: 11px;
-$size-fl-icon: 24px;
-
-$button-ok-cancel-height: 36px;
-
-$scroll-width: 8px;
-
-$border-elements: 1px solid $gray-7;

package/src/lib/styles/style_styleguide_react/_variables.scss

@@ -1,100 +0,0 @@
-@import '_variables.deprecated';
-
-// Variables
-//
-// This section describes base colors
-//
-// Styleguide 1.0
-
-// Base colors
-//
-// $color-text                  - Base text color
-// $color-text-secondary        - Secondary text color
-// $color-text-selected-hover   - Base text color selected/hover
-// $color-brand                 - Brand color
-// $color-placeholder           - Placeholder color (input placeholder text)
-// $color-error-cancel          - Error/cancel color
-// $color-apply-approve         - Aply/aprrove color
-// $color-hyperlinks            - Hyperinks color
-// <br/>
-// Add class with the same name as variable to apply color. Like &lt;div class="color-brand"&gt;Some text&lt;/div&gt;
-//
-// markup:
-// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
-// <div style="color: {$modifiers}">Text color {$modifiers}</div>
-//
-// Styleguide 1.1
-$color-text: #5b6372 !default;
-$color-text-secondary: #9ea2ab !default;
-$color-text-selected-hover: #3a4356 !default;
-$color-brand: #ffcb05 !default;
-$color-placeholder: #b3b3b3 !default;
-
-$color-error-cancel: #fa5656 !default;
-$color-apply-approve: #35d7be !default;
-$color-hyperlinks: #1faff3 !default;
-$color-hover-on-grey: #dee1e7 !default;
-
-// Gray colors
-//
-// $color-gray-1    - Gray color (Divider scroll bar labeld)
-// $color-gray-2    - Gray color (Scroll bars hover)
-// $color-gray-3    - Gray color (Divider on gray small dividers toolip shadow)
-// $color-gray-4    - Gray color (Hover state for menus / Panes)
-// $color-gray      - Base gray color
-// $color-bg        - White space
-// $color-login-icon-dark - Sisense logo color for light background
-//
-// markup:
-// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
-// <div class="{$modifiers}">{$modifiers}</div>
-//
-// Styleguide 1.2
-$color-gray-1: #edeef1 !default;
-$color-gray-2: #d1d1d7 !default;
-$color-gray-3: #cbced7 !default;
-$color-gray-4: #f4f4f8 !default;
-$color-gray: #edeef1 !default;
-$color-bg: #fff !default;
-$color-login-icon-dark: #2c3342 !default;
-
-// Common
-//
-// <b>$styleguide-anchor-class -</b>    Anchor class name for all components; <br />
-// <b>$app-icon-size-default -</b>      SVG icons default size; <br />
-// <b>$toolbar-height -</b>             Toolbar element height; <br />
-//
-// Styleguide 1.3
-$styleguide-anchor-class: sis-scope !default;
-$app-icon-size-default: 24px !default;
-$toolbar-height: 48px !default;
-
-// Text
-//
-// <b>$font-family -</b>            Default font family; <br />
-// <b>$font-size-main -</b>         Default font size; <br />
-// <b>$font-size-header -</b>       Default header font size; <br />
-// <b>$font-size-semibig -</b>      Default semi big font size; <br />
-// <b>$font-size-big -</b>          Default big font size; <br />
-// <b>$line-height-main -</b>       Default line height; <br />
-// <b>$text-color-primary -</b>     Default text color; <br />
-// <b>$text-color-secondary -</b>   Secondary text color; <br />
-//
-// Styleguide 1.4
-
-$font-family: 'Open Sans' !default;
-$font-size-main: 13px !default;
-$font-size-header: 15px !default;
-$font-size-semibig: 20px !default;
-$font-size-big: 25px !default;
-$line-height-main: normal !default;
-$text-color-primary: $color-text !default;
-$text-color-secondary: $color-text-secondary !default;
-
-// export css variables to be used in js styles
-:export {
-  loginDarkColor: $color-login-icon-dark;
-  darkBtnHoverColor: $color-gray-4;
-  greyHoverColor: $color-hover-on-grey;
-  defaultBackgroundColor: $color-bg;
-}

package/src/lib/styles/style_styleguide_react/base.scss

@@ -1,9 +0,0 @@
-@import 'colors';
-@import 'fonts';
-@import 'mixins';
-
-$appHeaderHeight: 48px;
-
-$modalBorderRadious: 4px;
-$notificationVerticalSpacing: 9px;
-$notificationHorisontalSpacing: 16px;

package/src/lib/styles/style_styleguide_react/colors.scss

@@ -1,71 +0,0 @@
-/* texts */
-$commonLinkBlue: #1eaff4;
-$fore: #7f899c;
-$wizardFore: #5b6372;
-$foreDisabled: #b3b3b3;
-$foreHeader: #2c3342;
-$foreSubtitle: #b3b3b3;
-$forePlaceholder: #bec1c6;
-$foreNonchosen: #56535b;
-$foreHover: #3a4356;
-$textSearch: #2c3344;
-$stepCaption: #9ea2ab;
-$captionUnder: #cbced7;
-$title: #999;
-$textCode: #1d1d1b;
-
-/* backgrounds */
-$back: #fff;
-$backHover: #ffff9c;
-$backDisabled: #f9f9f9;
-$backHeader: #cbcfd7;
-$backToolbar: #fafafa;
-$separator: #e4e4e4;
-$wizardSeparator: #edeef1;
-$lightSeparator: #ededed;
-$lineSeparator: #bdc1c7;
-$listItemHover: rgba(91, 99, 114, 0.1);
-
-/* borders */
-$border: #e9eaed;
-$borderSearch: #3a4356;
-$borderSeparator: #5b6373;
-$borderJaqlEditor: #e7e8ea;
-
-/*scrollbar*/
-$scrollbarHovered: #9da1aa;
-
-/* buttons */
-$buttonCancel: #f4f4f8;
-$buttonCancelHovered: #d1d1d7;
-$buttonCancelText: #7c7c7c;
-$buttonOk: #ffd617;
-$buttonOkText: #866b02;
-$buttonNext: #ffcb05;
-$buttonOkHovered: #ffe981;
-$buttonSecondary: #ffffff;
-$buttonSecondaryHovered: #f4f4f8;
-$buttonSecondaryDisabled: #bdc1c7;
-
-$hyperlink: #1faff3;
-$hyperlinkHovered: #0065e3;
-
-/* states */
-$errRed: #fa7573;
-$negativeSign: #fa5656;
-$positiveSign: #35d7be;
-$noResults: #b7b5b5;
-$selectedItem: #3a4356;
-$selectedItemBackground: #f9f9fb;
-$highlight: #5c6372;
-$highlightListItem: #f4f4f8;
-$highlightOrange: #eca80b;
-
-/*tags*/
-$color1: $highlightListItem;
-$color2: #2c779b;
-$color3: #6cb8cd;
-$color4: #a3b866;
-$color5: #e7a927;
-$color6: #d04a15;
-$color7: #f4f4f8;