open-index/open-npm huggingface dataset:
npm package: @sentinel-one/singularity-ui
Description: [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![lint with eslint](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://git
Latest version: 15.2.6

# SingularityUi official components for SentinelOne

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![lint with eslint](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/eslint/eslint)
[![lint with stylelint_prettier](https://img.shields.io/badge/style_linted_with-stylelint-263238.svg?style=flat-square)](https://github.com/stylelint/stylelint)
[![Unit Tests](https://github.com/Sentinel-One/singularity-ui/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/Sentinel-One/singularity-ui/actions/workflows/unit-tests.yml)
[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

## Preliminary: Install packages peerDependencies

```angular2html
"@angular/common": ">= 14.0.3",
"@angular/core": ">= 14.0.3",
"@angular/material": ">= 14.0.3",
"@angular/animations": ">= 14.0.3",
"@angular/cdk": ">= 14.0.3",
"chart.js": "^2.9.4",
"@types/chart.js": "^2.9.31",
"@iplab/ngx-color-picker": "^2.2.0",
"@sentinel-one/ngx-monaco-editor": "^9.0.1",
"ngx-uploader": "^11.0.0",
"mark.js": "^8.11.1",
"ngx-device-detector": "^3.0.0",
"angular-imask": "^6.2.2",
"mydatepicker": "^9.0.2",
"mydaterangepicker": "^9.0.0",
"dayjs": "^1.10.4",
"lodash": "^4.17.20",
"ng2-nouislider": "^1.8.3"
```

## Installation

`npm i @sentinel-one/singularity-ui`

## Add Style

Update `angular.json` file by adding `"node_modules/@sentinel-one/singularity-ui/singularity-ui-style/_styles.scss"` to styles

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/@sentinel-one/singularity-ui/singularity-ui-style/_styles.scss"]
          }
        }
      }
    }
  }
}
```

## Install Angular Material

```angular2html
ng add @angular/material
```

### NOTE! once you run the command above you will be asked for:

- Choose a prebuilt theme name, or “custom” for a custom theme? `need to chose Indigo/Pink`
npm package: @sentinel-one/sui-react
Description: Singularity UI React Library
Latest version: 3.6.9

# sui-react

Singularity UI React Library

## Installation SUI React

`npm i @sentinel-one/sui-react`

## Add Style

The following line can be included in your src/index.js or App.tsx file
```shell
import '@sentinel-one/sui-react/styles.css';
import '@sentinel-one/sui-react/index.css';
import '@sentinel-one/sui-react/sui-global-styles.css';
# this is global style for scrollbar. there are cases like in data set where they dont want to use this still  
import '@sentinel-one/sui-react/global-scrollbar.css';
```

## Peer Dependencies
"react-dropzone": "^14.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@types/react": "^18.0.15",
"@emotion/react": ">= 11.9.3",
"@emotion/styled": ">= 11.9.3",
"@mui/material": ">= 5.9.2",
"lodash": ">= 4.17.21",
"notistack": ">= 3.0.1",
"react-window": "^1.8.9",


### Installation Peer Dependencies
```shell
npm install @mui/material @emotion/react @emotion/styled
```