@sisense/sdk-shared-ui 0.1.0 → 1.26.0

package/.storybook/main.ts

@@ -0,0 +1,44 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
+
+const getAbsolutePath = (value: string): string =>
+  dirname(require.resolve(join(value, 'package.json')));
+
+const config: StorybookConfig = {
+  framework: '@storybook/react-vite',
+
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [getAbsolutePath('@storybook/addon-docs'), getAbsolutePath('@storybook/addon-a11y')],
+
+  core: {
+    builder: {
+      options: {},
+      name: '@storybook/builder-vite',
+    },
+  },
+
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      resolve: {
+        alias: [
+          {
+            find: '@sbi/styleguide',
+            replacement: '@sbi/styleguide/dist/styleguide',
+          },
+        ],
+      },
+      css: {
+        modules: {
+          scopeBehaviour: 'local',
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
+        },
+      },
+    });
+  },
+
+  typescript: { reactDocgen: false },
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
+/>

package/.storybook/preview.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { type Preview } from '@storybook/react';
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Inputs',
+          'Data Display',
+          'Feedback',
+          'Date - Time',
+          'Surfaces',
+          'Navigation',
+          'Layout',
+          'Utils',
+          'Deprecated',
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return <Story />;
+    },
+  ],
+};
+
+(function loadStories() {
+  document.body.className += 'sis-scope';
+})();
+
+export default preview;

package/dist/index.js

@@ -1,4 +1,42 @@
-import { D as E } from "./DEPRECATED_Icon-DOJjCTy7.js";
+import { D as e } from "./DEPRECATED_Icon-Dr-otczK.js";
+import { D as a } from "./DEPRECATED_Button-BBgeRQQS.js";
+import { C as s } from "./CheckableList-BXBenie6.js";
+import { C as x } from "./Checkbox-BExvupXC.js";
+import { D } from "./DEPRECATED_Checkbox-DX-zZXxW.js";
+import { D as E } from "./DEPRECATED_Toggle-Knx8IocQ.js";
+import { D as i } from "./DEPRECATED_Tooltip-fKwCi88g.js";
+import { I as P } from "./Icon-BZDpDssQ.js";
+import { I as l } from "./Input-CEdd88_6.js";
+import { L as R } from "./LazyLoader-CqpdOYRZ.js";
+import { A as y } from "./align.interface-DdWsijrT.js";
+import { P as c } from "./Popover-B1WGdIWU.js";
+import { R as _ } from "./RadioButton-2eH2Eo7p.js";
+import { T as L, t as d } from "./Tooltip-BWlLbI8K.js";
+import { T as M, t as B } from "./Typography-C6xMXGff.js";
+import { T as w } from "./TablePagination-CsM1YXiW.js";
+import { a as j, M as q, i as F } from "./Menu-O-faXiam.js";
+import { D as H } from "./Dropdown-DGLLDuhv.js";
 export {
-  E as DEPRECATED_Icon
+  y as AlignPoints,
+  s as CheckableList,
+  x as Checkbox,
+  a as DEPRECATED_Button,
+  D as DEPRECATED_Checkbox,
+  e as DEPRECATED_Icon,
+  E as DEPRECATED_Toggle,
+  i as DEPRECATED_Tooltip,
+  H as Dropdown,
+  P as Icon,
+  l as Input,
+  R as LazyLoader,
+  j as Menu,
+  q as MenuItem,
+  c as Popover,
+  _ as RadioButton,
+  w as TablePagination,
+  L as Tooltip,
+  M as Typography,
+  F as itemTypes,
+  d as tooltipTheme,
+  B as typographyTheme
 };

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/sisense/compose-sdk-monorepo",
     "directory": "packages/sdk-shared-ui"
   },
-  "version": "0.1.0",
+  "version": "1.26.0",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -23,6 +23,86 @@
       "import": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.js",
       "require": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.cjs",
       "types": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.d.ts"
+    },
+    "./DEPRECATED_Button": {
+      "import": "./dist/lib/DEPRECATED_Button/DEPRECATED_Button.js",
+      "require": "./dist/lib/DEPRECATED_Button/DEPRECATED_Button.cjs",
+      "types": "./dist/lib/DEPRECATED_Button/DEPRECATED_Button.d.ts"
+    },
+    "./CheckableList": {
+      "import": "./dist/lib/CheckableList/CheckableList.js",
+      "require": "./dist/lib/CheckableList/CheckableList.cjs",
+      "types": "./dist/lib/CheckableList/CheckableList.d.ts"
+    },
+    "./Checkbox": {
+      "import": "./dist/lib/Checkbox/Checkbox.js",
+      "require": "./dist/lib/CheckableList/Checkbox.cjs",
+      "types": "./dist/lib/Checkbox/Checkbox.d.ts"
+    },
+    "./DEPRECATED_Checkbox": {
+      "import": "./dist/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.js",
+      "require": "./dist/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.cjs",
+      "types": "./dist/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.d.ts"
+    },
+    "./DEPRECATED_Toggle": {
+      "import": "./dist/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.js",
+      "require": "./dist/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.cjs",
+      "types": "./dist/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.d.ts"
+    },
+    "./DEPRECATED_Tooltip": {
+      "import": "./dist/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.js",
+      "require": "./dist/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.cjs",
+      "types": "./dist/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.d.ts"
+    },
+    "./Icon": {
+      "import": "./dist/lib/Icon/Icon.js",
+      "require": "./dist/lib/Icon/Icon.cjs",
+      "types": "./dist/lib/Icon/Icon.d.ts"
+    },
+    "./Input": {
+      "import": "./dist/lib/Input/Input.js",
+      "require": "./dist/lib/Input/Input.cjs",
+      "types": "./dist/lib/Input/Input.d.ts"
+    },
+    "./LazyLoader": {
+      "import": "./dist/lib/LazyLoader/LazyLoader.js",
+      "require": "./dist/lib/LazyLoader/LazyLoader.cjs",
+      "types": "./dist/lib/LazyLoader/LazyLoader.d.ts"
+    },
+    "./Popover": {
+      "import": "./dist/lib/Popover/Popover.js",
+      "require": "./dist/lib/Popover/Popover.cjs",
+      "types": "./dist/lib/Popover/Popover.d.ts"
+    },
+    "./RadioButton": {
+      "import": "./dist/lib/RadioButton/RadioButton.js",
+      "require": "./dist/lib/RadioButton/RadioButton.cjs",
+      "types": "./dist/lib/RadioButton/RadioButton.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./dist/lib/Tooltip/Tooltip.js",
+      "require": "./dist/lib/Tooltip/Tooltip.cjs",
+      "types": "./dist/lib/Tooltip/Tooltip.d.ts"
+    },
+    "./Typography": {
+      "import": "./dist/lib/Typography/Typography.js",
+      "require": "./dist/lib/Typography/Typography.cjs",
+      "types": "./dist/lib/Typography/Typography.d.ts"
+    },
+    "./TablePagination": {
+      "import": "./dist/lib/TablePagination/TablePagination.js",
+      "require": "./dist/lib/TablePagination/TablePagination.cjs",
+      "types": "./dist/lib/TablePagination/TablePagination.d.ts"
+    },
+    "./Menu": {
+      "import": "./dist/lib/Menu/Menu.js",
+      "require": "./dist/lib/Menu/Menu.cjs",
+      "types": "./dist/lib/Menu/Menu.d.ts"
+    },
+    "./Dropdown": {
+      "import": "./dist/lib/Dropdown/Dropdown.js",
+      "require": "./dist/lib/Dropdown/Dropdown.cjs",
+      "types": "./dist/lib/Dropdown/Dropdown.d.ts"
     }
   },
   "typesVersions": {
@@ -35,6 +115,7 @@
   "scripts": {
     "dev": "vite",
     "type-check": "tsc --noEmit",
+    "lint": "eslint src/ --quiet",
     "build": "run type-check && vite build --mode development",
     "build:prod": "run type-check && vite build",
     "clean": "rm -rf dist coverage tsconfig.build.tsbuildinfo tsconfig.prod.tsbuildinfo",
@@ -43,12 +124,18 @@
     "vitest": "run -T vitest",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:coverage": "run vitest run --coverage"
+    "test:coverage": "run vitest run --coverage",
+    "storybook:dev": "storybook dev"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/builder-vite": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.1",
+    "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^2.1.4",
@@ -58,6 +145,8 @@
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "rollup-plugin-copy": "^3.5.0",
+    "sass": "^1.83.0",
+    "storybook": "^8.4.7",
     "typescript": "4.8.4",
     "vite": "^5.4.11",
     "vite-plugin-css-injected-by-js": "^3.5.1",
@@ -68,5 +157,13 @@
     "classnames": "^2.3.1",
     "react": "^17.0.0 || ^18.3.1",
     "react-dom": "^17.0.0 || ^18.3.1"
+  },
+  "dependencies": {
+    "@mui/material": "^6.2.1",
+    "classnames": "^2.5.1",
+    "prop-types": "^15.8.1",
+    "rc-tooltip": "^6.3.2",
+    "react-custom-scrollbars": "^4.2.1",
+    "react-use": "^17.6.0"
   }
 }

package/src/lib/CheckableList/CheckableList.module.scss

@@ -0,0 +1,13 @@
+.item {
+  margin-bottom: 12px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  cursor: pointer;
+  height: 18px;
+  user-select: none;
+
+  .icon {
+    margin-top: -3px;
+  }
+}

package/src/lib/CheckableList/CheckableList.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, vi, expect } from 'vitest';
+
+import { CheckableList } from './CheckableList';
+
+import '@testing-library/jest-dom';
+
+describe('CheckableList', () => {
+  const items = [
+    { name: 'Item 1', value: 'item1', checked: true, dataTestId: 'item-1' },
+    { name: 'Item 2', value: 'item2', checked: false, dataTestId: 'item-2' },
+  ];
+
+  it('should render all items', () => {
+    render(<CheckableList items={items} onChange={vi.fn()} className="custom-class" />);
+
+    items.forEach((item) => {
+      expect(screen.getByText(item.name)).toBeInTheDocument();
+      expect(screen.getByTestId(item.dataTestId)).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange with the correct value when an item is clicked', () => {
+    const onChangeMock = vi.fn();
+    render(<CheckableList items={items} onChange={onChangeMock} className="custom-class" />);
+
+    const firstItem = screen.getByTestId('item-1');
+    fireEvent.click(firstItem);
+
+    expect(onChangeMock).toHaveBeenCalledWith('item1');
+  });
+
+  it('should render DEPRECATED_Icon for checked items', () => {
+    const { container } = render(
+      <CheckableList items={items} onChange={vi.fn()} className="custom-class" />,
+    );
+
+    const icon = container.querySelector(`.app-icon.app-icon--general-vi-small-white`);
+
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveClass('app-icon app-icon--general-vi-small-white');
+  });
+
+  it('should not render DEPRECATED_Icon for unchecked items', () => {
+    render(<CheckableList items={items} onChange={vi.fn()} className="custom-class" />);
+
+    const uncheckedItem = screen.getByTestId('item-2');
+    const icon = uncheckedItem.querySelector(`.app-icon.app-icon--general-vi-small-white`);
+
+    expect(icon).toBeNull();
+  });
+
+  it('should apply custom className to the container', () => {
+    const { container } = render(
+      <CheckableList items={items} onChange={vi.fn()} className="custom-class" />,
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+});

package/src/lib/CheckableList/CheckableList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
+
+import styles from './CheckableList.module.scss';
+
+type Item = {
+  name: string;
+  value: string;
+  checked: boolean;
+  dataTestId?: string;
+};
+
+export type CheckableListProps = {
+  items: Item[];
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+const CheckableList = ({ items, className, onChange }: CheckableListProps) => {
+  return (
+    <div className={className}>
+      {items.map((item) => (
+        <div
+          key={item.value}
+          className={styles.item}
+          onClick={() => onChange(item.value)}
+          data-testid={item.dataTestId}
+        >
+          <span className={styles.name}>{item.name}</span>
+          {item.checked && (
+            <DEPRECATED_Icon className={styles.icon} name="general-vi-small-white" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CheckableList;
+export { CheckableList };

package/src/lib/CheckableList/index.ts

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

package/src/lib/Checkbox/Checkbox.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+
+import { checkboxTheme, type CheckboxTheme } from './themes';
+
+export type CheckboxProps = {
+  dataTestId?: string;
+  disabled?: boolean;
+  inline?: boolean;
+  onDescriptionClick?: () => void;
+  text?: string;
+  textClassName?: string;
+  title?: string;
+  transparent?: boolean;
+  inputCheckboxClassName?: string;
+} & MuiCheckboxProps & { theme?: CheckboxTheme };
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ theme = checkboxTheme, dataTestId, ...rest }, ref) => (
+    <ThemeProvider theme={theme}>
+      <MuiCheckbox data-testid={dataTestId} ref={ref} {...rest} />
+    </ThemeProvider>
+  ),
+);
+
+export default Checkbox;
+export { Checkbox };

package/src/lib/Checkbox/index.ts

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

package/src/lib/Checkbox/themes/checkboxTheme.ts

@@ -0,0 +1,42 @@
+import createTheme from '@mui/material/styles/createTheme';
+// import { injectStylesWithWrapper } from '@sbi/styleguide';
+//import { calcStyles } from './uiCustomization';
+
+// TODO: review this later
+// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
+import { siColors, type SisenseTheme } from '../../themes';
+
+declare module '@mui/material' {
+  interface Theme {
+    sisense: SisenseTheme;
+  }
+
+  interface ThemeOptions {
+    sisense?: Partial<SisenseTheme>;
+  }
+}
+
+export const checkboxTheme = createTheme({
+  components: {
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          width: '28px',
+          height: '28px',
+          '&.Mui-disabled': {
+            opacity: 0.5,
+          },
+          '&:hover': {
+            backgroundColor: siColors.StInteractionColors.defaultHover,
+          },
+          '& .MuiSvgIcon-root': {
+            fontSize: 14,
+            fill: siColors.StUiColors.default,
+          },
+        },
+      },
+    },
+  },
+});
+
+export type CheckboxTheme = typeof checkboxTheme;

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

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

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

@@ -0,0 +1,28 @@
+// import { CalcStyles, DesignSettings } from '@sbi/styleguide';
+import { siColors } from '../../themes';
+
+export type MuiCheckbox =
+  | {
+      '.MuiCheckbox-root': {
+        color: string;
+        '&:hover': {
+          color: string;
+          borderRadius: string;
+          backgroundColor: string;
+        };
+      };
+    }
+  | Record<string, never>;
+
+export const calcStyles: any /* CalcStyles */ = (
+  designSettings: any /* DesignSettings */,
+): MuiCheckbox => ({
+  '.MuiCheckbox-root': {
+    color: designSettings.general.primaryButtonTextColor,
+    '&:hover': {
+      color: designSettings.typography.primaryTextColor,
+      borderRadius: '50%',
+      backgroundColor: siColors.StBackgroundColors.themeAgnostic,
+    },
+  },
+});

package/src/lib/DEPRECATED_Button/DEPRECATED_Button.module.scss

@@ -0,0 +1,57 @@
+@import '../styles/style_styleguide_react/fonts';
+@import '../styles/style_styleguide_react/colors';
+
+@mixin sharedButtonText {
+  padding: 5px 20px;
+}
+
+:global(.sis-scope) {
+  :global(.btn--dark) {
+    :global(.btn__text) {
+      @include sharedButtonText;
+    }
+  }
+
+  :global(.btn--gray) {
+    background: $buttonCancel;
+
+    &:disabled {
+      background: $buttonCancel;
+      opacity: 1;
+
+      &:hover {
+        background: $buttonCancelHovered;
+      }
+
+      :global(.app-icon),
+      :global(.btn__text) {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .sharedComponentsButton {
+    line-height: $lineHeightMedium;
+  }
+
+  .sharedComponentsButtonText {
+    @include sharedButtonText;
+  }
+
+  :global(.btn).btnSecondary {
+    border: 1px solid $wizardFore;
+    background-color: $buttonSecondary;
+
+    &:hover {
+      background-color: $buttonSecondaryHovered;
+    }
+
+    &:disabled {
+      background-color: $buttonSecondary;
+
+      &:hover {
+        background-color: $buttonSecondary;
+      }
+    }
+  }
+}