@sisense/sdk-shared-ui 0.1.0 → 1.27.0

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

@@ -0,0 +1,90 @@
+@import '_variables';
+@import 'colors';
+@import 'fonts';
+
+@mixin ellipsis($whiteSpace: nowrap) {
+  text-overflow: ellipsis;
+  white-space: $whiteSpace;
+  overflow: hidden;
+}
+
+@mixin smallBold {
+  font-size: $sizeSmall;
+  font-family: $fontFamily;
+  font-weight: bold;
+}
+
+@mixin mediumBold {
+  font-size: $sizeMedium;
+  font-family: $fontFamily;
+  font-weight: bold;
+}
+
+@mixin largeBold {
+  font-size: $sizeLarge;
+  font-family: $fontFamily;
+  font-weight: bold;
+}
+
+@mixin smallText {
+  font-size: $sizeSmall;
+  font-family: $fontFamily;
+}
+
+@mixin mediumText {
+  font-size: $sizeMedium;
+  font-family: $fontFamily;
+}
+
+@mixin largeText {
+  font-size: $sizeLarge;
+  font-family: $fontFamily;
+}
+
+@mixin smallHeader {
+  font-size: $sizeSmall;
+  font-family: $fontHeader;
+}
+
+@mixin mediumHeader {
+  font-size: $sizeMedium;
+  font-family: $fontHeader;
+}
+
+@mixin largeHeader {
+  font-size: $sizeLarge;
+  font-family: $fontHeader;
+}
+
+@mixin flexCenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// A workaround for Safari where there is a system tooltip enable by default
+// https://stackoverflow.com/questions/20974276/prevent-safari-from-showing-tooltip-when-text-overflow-is-hidden-with-ellipsis
+@mixin disabledSafariSystemTooltip {
+  &:after {
+    content: '';
+    display: block;
+  }
+}
+
+@mixin boxShadow($opacity: 0.2) {
+  box-shadow: 0 -1px 5px 1px rgba(58, 67, 86, $opacity);
+}
+
+@mixin CSS_ANIMATE($properties, $duration: $NORMAL_ANIMATION_TIME) {
+  -webkit-transition-duration: $duration;
+  -moz-transition-duration: $duration;
+  transition-duration: $duration;
+  -webkit-transition-property: $properties;
+  -moz-transition-property: $properties;
+  transition-property: $properties;
+}
+
+@mixin disabled($color: $lineSeparator, $background: $color-gray-4) {
+  color: $color;
+  background: $background;
+}

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

@@ -0,0 +1 @@
+export { sfColors, siColors, stEffects } from './siColors';

package/src/lib/themes/colors/siColors.ts

@@ -0,0 +1,143 @@
+const sfColors = {
+  $ABBEY: ' #45464a',
+  $ALABASTER: ' #f7f7f7',
+  $ALTO: ' #d3d3d3',
+  $ALTO2: ' #dadada',
+  $ALUMINIUM: ' #a4a8b0',
+  $ATHENS_GRAY_DARK: ' #edeef1',
+  $ATHENS_GRAY_DARK2: ' #e3e5ea',
+  $ATHENS_GRAY_LIGHT: ' #f9f9fb',
+  $ATHENS_GRAY: ' #f4f4f8',
+  $BLACK: ' #000000',
+  $BRIGHT_GRAY: ' #373c48',
+  $CARNATION: ' #fa5556',
+  $CHARADE: ' #272a34',
+  $DODGER_BLUE: ' #1faff3',
+  $EMPEROR: ' #4f4f4f',
+  $EBONY: ' #080e18',
+  $EBONY_CLAY: ' #272d39',
+  $FRENCH_GRAY: ' #bdc1c7',
+  $GALLERY_DARK: ' #ebebeb',
+  $GALLERY: ' #efefef',
+  $GHOST2: ' #c6c9ce',
+  $GRAY_CHATEAU: ' #9ea2ab',
+  $HALF_AND_HALF: ' #ffffde',
+  $MAKO: ' #444a55',
+  $MERCURY: ' #e5e5e5',
+  $MISCHKA: ' #d1d1d7',
+  $NEVADA: ' #686a6c',
+  $NOBEL: ' #b6b6b6',
+  $OSLO_GRAY: ' #888c92',
+  $OXFORD_BLUE: ' #3a4356',
+  $PALE_CANERY: ' #ffff9c',
+  $PALE_SKY: ' #6e7785',
+  $PORCELAIN: 'rgba(165, 168, 173, 0.25)',
+  $PROCELAIN_GRAY: ' #e7e8ea',
+  $POWDER_BLUE: ' #b1e4d7',
+  $REGENT_GREY: ' #7f899c',
+  $SEASHELL: ' #f1f1f1',
+  $SELECTIVE_YELLOW: ' #fbbc04',
+  $SELECTIVE_YELLOW2: ' #f2b900',
+  $SHARK: ' #23252d',
+  $SHUTTLE_GRAY_DARK: ' #5b6372',
+  $SHUTTLE_GRAY: ' #5c6372',
+  $SILVER: ' #bbbbbb',
+  $SILVER2: ' #c5c5c5',
+  $SILVER_CHALICE: ' #acacac',
+  $SUPERNOVA_YELLOW: ' #ffcb05',
+  $TURQUOISE: ' #35d7be',
+  $TROPICAL_BLUE: ' #c1e1f6',
+  $TROUT: ' #515866',
+  $WILD_SAND: ' #f5f5f5',
+  $WISTFUL: ' #a4a4d5',
+  $WHITE: ' #ffffff',
+  $GHOST: ' #c7c9d5',
+  $SCIENCE_BLUE: ' #0065e3',
+  $ALABASTER_DARK: '#f7f7f7',
+  $EASTERN_BLUE: '#22ab9f',
+  $HONEY_FLOWER: '#53206b',
+  $MANATEE: '#9898a4',
+  $MIRAGE: '#131326',
+  $RUM: '#735482',
+  $STORM_GRAY: '#6a6a7c',
+  $TUNA: '#363649',
+  $MORTAR: '#463a4c',
+  $SPARTAN_GRAY: '#e0e1eb',
+  $LIGHT_WISTERIA: '#bface1',
+  $EAST_SIDE: '#a087cd',
+  $MOON_RAKER: '#cbb7ef',
+  $DULL_LAVENDAR: '#b297e3',
+};
+
+const siColors = {
+  StTextColors: {
+    active: 'rgba(38, 46, 61, 1)',
+    content: 'rgba(38, 46, 61, 0.8)',
+    secondary: 'rgba(38, 46, 61, 0.55)',
+    link: 'rgba(54, 163, 217, 1)',
+    accented: 'rgba(12, 14, 18, 1)',
+    disabled: 'rgba(38, 46, 61, 0.3)',
+  },
+  StTextColorsDark: {
+    active: 'rgba(235, 239, 247, 1)',
+    content: 'rgba(235, 239, 247, 0.8)',
+    secondary: 'rgba(235, 239, 247, 0.55)',
+    disabled: 'rgba(235, 239, 247, 0.3)',
+    accented: 'rgba(255, 255, 255, 1)',
+  },
+  StUiColors: {
+    default: 'rgba(38, 46, 61, 0.67)',
+    additional: 'rgba(38, 46, 61, 0.4)',
+    guiding: 'rgba(38, 46, 61, 0.1)',
+  },
+  StUiColorsDark: {
+    default: 'rgba(235, 239, 247, 0.67)',
+    additional: 'rgba(235, 239, 247, 0.35)',
+    guiding: 'rgba(235, 239, 247, 0.17)',
+  },
+  StBackgroundColors: {
+    workspace: '#FFFFFF',
+    supporting: '#F9F9FB',
+    priority: '#F4F4F8',
+    themeAgnostic: 'rgba(174, 174, 180, 0.3)',
+  },
+  StBackgroundColorsDark: {
+    workspace: 'rgba(20, 21, 23, 1)',
+    supporting: 'rgba(10, 10, 11, 1)',
+    priority: 'rgba(9, 9, 10, 1)',
+  },
+  StPrimaryColors: {
+    primary: '#FFC805',
+  },
+  StInteractionColors: {
+    defaultHover: 'rgba(12, 14, 18, 0.07)',
+    guidingHover: 'rgba(38, 46, 61, 0.17)',
+    linkHovered: 'rgba(50, 147, 197, 1)',
+    primaryHovered: 'rgba(242, 185, 0, 1)',
+  },
+  StInteractionColorsDark: {
+    defaultHover: 'rgba(255, 255, 255, 0.15)',
+    guidingHover: 'rgba(235, 239, 247, 0.17)',
+    linkHovered: 'rgba(54, 163, 217, 1)',
+  },
+  StSemanticColors: {
+    info: 'rgba(52, 150, 200, 1)',
+    success: 'rgba(34, 195, 195, 1)',
+    warning: 'rgba(242, 185, 0, 1)',
+    error: 'rgba(231, 71, 39, 1)',
+    infoBG: 'rgba(52, 150, 200, 0.1)',
+    successBG: 'rgba(34, 195, 195, 0.1)',
+    warningBG: 'rgba(242, 185, 0, 0.1)',
+    errorBG: 'rgba(231, 71, 39, 0.1)',
+  },
+};
+
+const stEffects = {
+  Shadows: {
+    level1: '0px 1px 2px rgba(9, 9, 10, 0.1), 0px 2px 4px rgba(9, 9, 10, 0.1)',
+    level2:
+      'drop-shadow(0px 1px 4px rgba(9, 9, 10, 0.1)) drop-shadow(0px 1px 8px rgba(9, 9, 10, 0.15))',
+  },
+};
+
+export { siColors, sfColors, stEffects };

package/src/lib/themes/index.ts

@@ -0,0 +1,2 @@
+export { siColors, sfColors, stEffects } from './colors/siColors';
+export type { SisenseTheme } from './types';

package/src/lib/themes/types/SisenseTheme.ts

@@ -0,0 +1,12 @@
+import { sfColors } from '../colors';
+
+export type SisenseTheme = {
+  gray: string;
+  brand: string;
+  faded: string;
+  border: string;
+  grayText: string;
+  shadow: string;
+  shadowHover: string;
+  sf: typeof sfColors;
+};

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

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

package/tsconfig.lib.json

@@ -15,7 +15,8 @@
     "**/*.spec.jsx",
     "**/*.test.jsx",
     "dist",
-    "node_modules"
+    "node_modules",
+    "**/*.stories.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

package/vite.config.ts

@@ -10,7 +10,6 @@ import { configDefaults } from 'vitest/config';
 import * as fs from 'fs';
 import { join, resolve, relative } from 'path';
 import { env } from 'process';
-import { c } from 'vite/dist/node/types.d-aGj9QkWt';
 
 const THRESHOLD_LINES = parseInt(env.DEV_APP_THRESHOLD_LINES || '70', 10);
 const THRESHOLD_FUNCTIONS = parseInt(env.DEV_APP_THRESHOLD_FUNCTIONS || '50', 10);
@@ -117,6 +116,24 @@ export default defineConfig(({ mode }) => ({
         'src/lib/index.ts',
         'src/lib/**/index.ts',
         'src/lib/@types/**/*',
+        'src/**/*.stories.tsx',
+        '.storybook/**/*',
+        'src/lib/Checkbox/**/*',
+        'src/lib/themes/**/*',
+        'src/lib/DEPRECATED_Toggle/**/*',
+        'src/lib/DEPRECATED_Tooltip/**/*',
+        'src/lib/constants/**/*',
+        'src/lib/Icon/**/*',
+        'src/lib/LazyLoader/**/*',
+        'src/lib/Popover/**/*',
+        'src/lib/RadioButton/**/*',
+        'src/lib/Tooltip/**/*',
+        'src/lib/Typography/**/*',
+        'src/lib/TablePagination/**/*',
+        'src/lib/Menu/**/*',
+        '!src/lib/Menu/**/MenuItem/MenuItem.test.tsx',
+        'src/lib/Dropdown/**/*',
+        '!src/lib/Dropdown/**/DropdownButtonBody/DropdownButtonBody.test.tsx',
       ],
     },
   },