open-index/open-npm huggingface dataset:
npm package: @s-ui/jest
Description: CLI that abstracts away all configuration for Jest
Latest version: 1.3.0

# sui-jest

This is a CLI that abstracts away all configuration for [Jest](https://jestjs.io/).

## Installation

```sh
npm install -D @s-ui/jest
```

## Usage

This CLI exposes a bin called `sui-jest` with all options that [Jest CLI Options](https://jestjs.io/docs/cli) supports.

**From node**

```sh
node ./node_modules/.bin/sui-jest [Jest CLI Options]
```

**From npm script**

```json
// package.json
{
  "scripts": {
    "test:jest": "sui-jest"
  }
}
```

```sh
npm run test:jest -- [Jest CLI Options]
```

### Overriding Config

`sui-jest` allows you to specify your own configuration. There are various ways that it works, but basically if you want to have your own config for something, just add the configuration and `sui-jest` will use it instead of its own internal config.

**Specific**

From CLI using the `--config` flag with the path of the specific jest config file.

```sh
node ./node_modules/.bin/sui-jest --config jest.config.[*]
```

**Automatic**

Create a `jest.config.[*]` config file in your root project or within the `packages/*`, and `sui-jest` will use the jest config file closest to where it has been executed.

```js
// jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  testMatch: ['**/__tests__/**/*.test.js']
  // ...
}
```

_In construction_

In addition, `sui-jest` will expose its basic configuration so you can use it and override only the parts of the config you need to.

## Inspiration

This is inspired by [kcd-scripts](https://github.com/kentcdodds/kcd-scripts).
npm package: @s-ui/js-compiler
Description: JavaScript & TypeScript Compiler
Latest version: 1.30.0

# @s-ui/js-compiler

> Compile your JavaScript and JSX files to be compatible with the browsers

It provides:

- Unified code transformation.
- Usage of SWC to compile files faster.

## Installation

```sh
$ npm install @s-ui/js-compiler --save-dev
```

## Usage

### Via `package.json` (Recommended)

```json
"scripts": {
  "prepublishOnly": "sui-js-compiler"
}
```

### Via CLI

```sh
$ ./node_modules/.bin/sui-js-compiler
```

### Options

| Option     | Type           | Default | Description                                                               |
| ---------- | -------------- | ------- | ------------------------------------------------------------------------- |
| `--ignore` | string \| glob | -       | Takes all the pattern comma separated and ignore them during compilation. |
| `--modern` | boolean        | -       | Transpile using modern browser targets.                                   |

```sh
$ ./node_modules/.bin/sui-js-compiler --ignore=./src/**/*.test.js
```

```sh
$ ./node_modules/.bin/sui-js-compiler --modern
```

#### Compiling TypeScript files and generating type declarations

This tools lets you compile **TS files** and generate their **type declarations** in your packages out of the box. It will do it if the package itself has a `tsconfig.json` placed in its root folder.

## Requirements

Automatically, `@s-ui/js-compiler` searches for `/src` folder and outputs the compiled files to `/lib`.

## Contributing

Please refer to the [main repo contributing info](https://github.com/SUI-Components/sui/blob/master/CONTRIBUTING.md).
npm package: @s-ui/performance
Description: > Performance utilities to make your web application go fast ⚡️
Latest version: 1.2.0

# @s-ui/performance

> Performance utilities to make your web application go fast ⚡️

## Installation

```sh
npm install @s-ui/performance
```

## Usage

### Delay code execution

Use this function to delay the execution of an expensive operation and prioritize user actions. Keep in mind that it only delays the response by a maximum of 1 frame, an average of 8ms, which is too little for a human to notice for the types of major actions where you’d use this function.

```jsx
import {delayTask} from '@s-ui/performance';

export default function Example() {
  const [counter, setCounter] = useState(0)

  const handleClick = async () => {
    setCounter(counter => counter + 1)

    await delayTask()

    work() // expensive work
  }

  return <button onClick={handleClick}>{counter}</button>
}
```

### Delay code execution until urgent

Use this function to delay the execution of an expensive operation while the main thread is idle, using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback), and to prioritize user actions. This method ensures the execution is completed before the user leaves the page. It is especially useful for delaying tracking execution.

The `delayTaskUntilUrgent` function optionally receives an options object. The documentation can be found [here](https://github.com/redbus-labs/idlefy/tree/main?tab=readme-ov-file#methods) ([idlefy](https://github.com/redbus-labs/idlefy/tree/main) is used under the hood).

```jsx
import {delayTaskUntilUrgent} from '@s-ui/performance';

export default function Example() {
  const [counter, setCounter] = useState(0)

  const handleClick = async () => {
    setCounter(counter => counter + 1)

    await delayTaskUntilUrgent()

    track() // expensive work
  }

  return <button onClick={handleClick}>{counter}</button>
}
```
npm package: @s-ui/polyfills
Description: Common polyfills for your project
Latest version: 1.24.0

# sui-polyfills
> Set of polyfills for your app

## Motivation
**sui-polyfills** offers you a list of polyfills used abroad all our projects:
* It uses core-js Standard library: https://github.com/zloirock/core-js
* It doesn't matter the project you're working on, you will know exactly which polyfills you could use.
* Better way to handle and keep polyfills used on our projects.
* Polyfills are global, so your third-party dependencies can use them as well.

## Installation

```sh
npm install @s-ui/polyfills --save
```
npm package: @s-ui/precommit
Description: Effortless SUI precommit rules integration in your project
Latest version: 3.4.0

# sui-precommit

> Effortless SUI precommit rules integration in your project

Installs git hooks to ensure quality rules are executed before any commit (test, linting, consistent commit, etc).

It provides:

* Assurance that all code is compliant with Adevinta's standards.
* Centralize precommit rule: quality rules can be improved and seemlessly inherited by all projects.

## Installation

```sh
$ npm install @s-ui/precommit --save-dev
```

## Git Worktree Support

`@s-ui/precommit` automatically detects and supports git worktrees. Whether you're working in a normal git repository or a worktree, the hooks will be installed in the correct location automatically.

When used in a worktree, hooks are installed in the main repository's worktree-specific hooks directory, ensuring proper git hook execution.

## CLI

### `$ sui-precommit`

Installs git hooks. This command is executed automatically when you install `@s-ui/precommit` as dependency thanks to a `postinstall` npm hook.

Executes **3** actions:

1. Add `commit-msg`, `pre-commit`, and `pre-push` hooks to the `.git/hooks` folder.
2. Add `pre-commit` and `pre-push` npm scripts to the `package.json`.
3. Add `lint` and `test` npm scripts in case they're not present.
**Note:** *If scripts are already present, it doesn't overwrite them (as some packages might not need executing `sui-lint sass` or `sui-lint js` or you could have a specific config).*

Your package.json might be altered like that:

```json
{
  "scripts": {
    "lint": "sui-lint js && sui-lint sass",
    "test": "echo \"Error: no test specified\" && exit 1",
    "pre-commit": "npm run lint",
    "pre-push": "npm run test"
  }
}
```
npm package: @s-ui/react-ad-blocker-extension-detector
Description: > This component has only the logic of show content (i.e banner or message) through children when user has adblock. If you are using adblock just right now you should see a placeholder sentence like: <<"If you see this message you are using adblock extens
Latest version: 1.6.0

# AdExtensionAdBlockDetector

> This component has only the logic of show content (i.e banner or message) through children when user has adblock. If you are using adblock just right now you should see a placeholder sentence like: <<"If you see this message you are using adblock extension">> in [demo page](/workbench/ad/blockerExtensionDetector/demo). But if you are not using adblock or this extension is not enabled for this page, you won't see anything and this component won't render any kind of HTML layer, like div.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-ad-blocker-extension-detector --save
```

## Usage
This component will receive by children the content that have to show when adblock extension is enabled in browser. For example could be a banner message. But at the same time maybe business dept could be interested in show a diferent page when adblock is enabled instead a banner.

## How it works technically?
This component render twice. The first time is for get the offsetHeight of div with class adsbox.
```html
<div class="adsbox">nbsp;</div> 
```
This class is the key because if offseight is equal to 0 is when adblock is enabled. Then we set the state through this condition, this causes a second rendering that will show our children content or anything depending if adblock is enabled.

### Basic usage

#### Display a simple message:
```js
import AdBlockerExtensionDetector from '@s-ui/react-ad-blocker-extension-detector'

return (<AdBlockerExtensionDetector> 
          <p>Simple message</p>
        </AdBlockerExtensionDetector>)
```

#### Display your custom component:
```js
import AdBlockerExtensionDetector from '@s-ui/react-ad-blocker-extension-detector'

return (<AdBlockerExtensionDetector> 
          <CustomComponent/>
        </AdBlockerExtensionDetector>)
```

> **Find full description and more examples in the [demo page](/workbench/ad/blockerExtensionDetector/demo).**
npm package: @s-ui/react-atom-action-button
Description: SUI Atom ActionButton
Latest version: 1.11.0

# AtomActionButton

SUI Atom ActionButton

## Installation

```sh
$ npm install @s-ui/react-atom-action-button
```

## Usage

### Basic usage

```js
import AtomActionButton from '@s-ui/react-atom-action-button'

const Icon = () => {
  return (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.3506 6.3506 2.649 2.649h-6v-6l1.938 1.938c1.842-1.849 4.347-2.938 7.062-2.938 5.515 0 10 4.486 10 10h-2c0-4.411-3.588-8-8-8-2.172 0-4.176.872-5.649 2.351zm11.2988 11.2988-2.649-2.649h6v6l-1.938-1.939c-1.842 1.85-4.347 2.939-7.062 2.939-5.515 0-10-4.486-10-10h2c0 4.411 3.588 8 8 8 2.172 0 4.176-.872 5.649-2.351z" /></svg>
  )
}

return (<div>
  <AtomActionButton icon={Icon}>Normal</AtomActionButton>
  <AtomActionButton icon={Icon} focused>Focused</AtomActionButton>
  <AtomActionButton icon={Icon} size='large' disabled>Disabled, Large</AtomActionButton>
</div>)

```

#### Import package and use the component

```js
import AtomActionButton from '@s-ui/react-atom-action-button'

const Icon = () => {
  return (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.3506 6.3506 2.649 2.649h-6v-6l1.938 1.938c1.842-1.849 4.347-2.938 7.062-2.938 5.515 0 10 4.486 10 10h-2c0-4.411-3.588-8-8-8-2.172 0-4.176.872-5.649 2.351zm11.2988 11.2988-2.649-2.649h6v6l-1.938-1.939c-1.842 1.85-4.347 2.939-7.062 2.939-5.515 0-10-4.486-10-10h2c0 4.411 3.588 8 8 8 2.172 0 4.176-.872 5.649-2.351z" /></svg>
  )
}

return (<AtomActionButton icon={Icon} />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/react-atom-action-button/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-back-to-top
Description: AtomBackToTop is a component that handles the scroll of a container and that it will be displayed only when needed
Latest version: 2.4.0

# AtomBackToTop

AtomBackToTop is a component that handles the scroll of a container and that it will be displayed only when needed

## Installation

```sh
$ npm install @s-ui/react-atom-back-to-top --save
```

## Usage

After importing the component `AtomBackToTop` like this

```javascript
import AtomBackToTop, {backToTopStyles} from '@s-ui/react-atom-back-to-top'
```

### Basic usage

```javascript
<div id="container">
  <p>Very looong text...</p>
  <AtomBackToTop
    iconTop={iconTop}
    textTop="TOP"
    refContainer="container"
  />
</div>
```

### Styles DARK (default) or LIGHT

```javascript
<div id="container">
  <p>Very looong text...</p>
  <AtomBackToTop
    iconTop={iconTop}
    textTop="TOP"
    refContainer="container"
    style={backToTopStyles.LIGHT}
  />
</div>
```

### Customizing minimum height when back to top button become visible → 1000px

```javascript
<div id="container">
  <p>Very looong text...</p>
  <AtomBackToTop
    iconTop={iconTop}
    textTop="TOP"
    refContainer="container"
    minHeight={1000}
  />
</div>
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/backToTop/demo).**
npm package: @s-ui/react-atom-badge
Description: > Atom Element: SUI badge
Latest version: 2.5.0

# AtomBadge

> Atom Element: SUI badge

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/badge/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,badge)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-badge?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-badge)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Abadge&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Abadge)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-badge)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/badge/LICENSE.md)

## Installation

```sh
npm install @s-ui/react-atom-badge --save
```

## Usage

```js
import Badge, { atomBadgeTypes, atomBadgeSizes } from '@s-ui/react-atom-badge'

render {
  return (
    <Badge
      size={atomBadgeSizes.SMALL}
      type={atomBadgeTypes.SUCCESS}
      label='Hello SUI-Badge!'
    />
  )
}

```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/badge).**
npm package: @s-ui/react-atom-badge-counter
Description: > Atom Element: SUI badgeCounter
Latest version: 1.5.0

# AtomBadgeCounter

> Atom Element: SUI badgeCounter

## Installation

```sh
npm install @s-ui/react-atom-badge-counter --save
```

## Usage

```js
import BadgeCounter from '@s-ui/react-atom-badge-counter'

render {
  return (
    <BadgeCounter />
  )
}

```

**Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-card
Description: AtomCard is a component that structures two main containers (media & info for example), with the purpose of giving  information about a product/client/article and linking to more detailed information about it.
Latest version: 2.1.0

# AtomCard

AtomCard is a component that structures two main containers (media & info for example), with the purpose of giving  information about a product/client/article and linking to more detailed information about it.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/card/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,card)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-card?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-card)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Acard&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Acard)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-card)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/card/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-card --save
```

## Usage

```
import AtomCard from '@s-ui/react-atom-card'

const srcImageCar = 'http://images.com/my_image.jpg'
const urlTarget = 'https://www.coches.net/'

const CarImage = () => <AtomImage src={srcImageCar} alt="" />
const CarInfo = () => (
  <div>
    <h2>My Title</h2>
    <p>My Description</p>
  </div>
)
```

### Basic usage
```js
<AtomCard
  media={CarImage}
  content={CarInfo}
  href={urlTarget}
/>
```

### Vertical mode
```js
<AtomCard
  media={CarImage}
  content={CarInfo}
  vertical
/>
```

### With `highlight`
```js
<AtomCard
  media={CarImage}
  content={CarInfo}
  highlight
/>
```


> **Find full description and more examples in the [demo page](/workbench/atom/card).**
npm package: @s-ui/react-atom-checkbox
Description: AtomCheckbox is a component that displays an input checkbox w/ its expected behavior
Latest version: 3.11.0

# AtomCheckbox

AtomCheckbox is a component that displays an input checkbox w/ its expected behavior

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/checkbox/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,checkbox)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-checkbox?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-checkbox)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Acheckbox&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Acheckbox)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-checkbox)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/checkbox/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-checkbox --save
```

## Usage

```js
import AtomCheckbox from '@s-ui/react-atom-checkbox'
```

### Basic usage

```js
<AtomCheckbox />
```

### Checked

```js
<AtomCheckbox checked />
```

### Disabled

```js
<AtomCheckbox disabled />
```

### w/ onChange handler

```js
<AtomCheckbox onChange={console.log} />
```

> **Find full description and more examples in the [demo page](/workbench/atom/checkbox).**
npm package: @s-ui/react-atom-help-text
Description: > Help Text is a feedback that the system gives users to make them clearly understand which information is required
Latest version: 1.14.0

# AtomHelpText

> Help Text is a feedback that the system gives users to make them clearly understand which information is required

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/helpText/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,helpText)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-help-text?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-help-text)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AhelpText&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AhelpText)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-help-text)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/helpText/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-help-text --save
```

## Usage

### Basic usage
```js
import AtomHelpText from '@s-ui/react-atom-help-text'

return (
  <div>
    <input style={input}
      type='text'
    />
    <AtomHelpText text='hello help text'/>
  </div>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/helpText/demo).**
npm package: @s-ui/react-atom-icon
Description: > Atom Element: Icon
Latest version: 1.22.0

# AtomIcon

> Atom Element: Icon

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/icon/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,icon)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-icon?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-icon)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Aicon&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Aicon)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-icon)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/icon/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-icon --save
```

## Usage

`<AtomIcon>` wraps a `<svg>` that follows the rules defined on the UX Definition and give you some colors, sizes and interesting features like lazy-load rendering.

### Basic usage
```js
import AtomIcon, {
  ATOM_ICON_COLORS,
  ATOM_ICON_SIZES,
  ATOM_ICON_RENDERS
} from '@s-ui/react-atom-icon'

const check = <svg viewBox="0 0 24 24">
  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>

return (
  <>
    <AtomIcon>{check}</AtomIcon>
    <AtomIcon size={ATOM_ICON_SIZES.large}>{check}</AtomIcon>
    <AtomIcon color={ATOM_ICON_COLORS.primary}>{check}</AtomIcon>
    <AtomIcon render={ATOM_ICON_RENDERS.lazy}>{check}</AtomIcon>
  </>
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/icon/demo).**
npm package: @s-ui/react-atom-kbd
Description: > The keyboard key component exists to show which key or combination of keys performs a given action.
Latest version: 1.1.0

# AtomKbd

> The keyboard key component exists to show which key or combination of keys performs a given action.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/kbd/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,kbd)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-kbd?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-kbd)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Akbd&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Akbd)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-kbd)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/kbd/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-kbd --save
```

## Usage

### Basic usage
```js
import Kbd from '@s-ui/react-atom-kbd'

return (
  <AtomKbd>
    A
  </AtomKbd>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/kbd/demo).**
npm package: @s-ui/react-atom-label
Description: > The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.
Latest version: 1.34.0

# AtomLabel

> The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/label/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,label)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-label?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-label)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Alabel&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Alabel)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-label)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/label/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-label --save
```

## Usage

### Basic usage
Labels are shown on top of the input form elements by default due to their block type display. Use `inline = 'left'` or `inline = 'right'` props to make them inline. 
```js
import AtomLabel from '@s-ui/react-atom-label'

return (
  <div>
    <AtomLabel
      name='atomLabelName'
      for='labelName'
      text='Hello label'
      optional='(optional text)'
      inline='( left || right )'
      type='alert' />

    <input id='atomLabelName' type='text' />
  </div>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/label/demo).**
npm package: @s-ui/react-atom-panel
Description: > Just a background for your component, can be a color or an image with background/overlay
Latest version: 1.23.0

# AtomPanel

> Just a background for your component, can be a color or an image with background/overlay

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/panel/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,panel)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-panel?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-panel)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Apanel&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Apanel)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-panel)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/panel/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-panel --save
```

## Usage

### Basic usage
```js
import AtomPanel, {
  atomPanelAlpha,
  atomPanelColors,
  atomPanelHorizontalAlign,
  atomPanelVerticalAlign
} from '@s-ui/react-atom-panel'

return (
  <div>
    <AtomPanel
      alpha={atomPanelAlpha.OVERLAY_D4}
      color={atomPanelColors.CONTRAST}
    >
      {content}
    </AtomPanel>
    <AtomPanel
      src={'https://picsum.photos/250/200'}
      horizontalAlign={atomPanelHorizontalAlign.LEFT}
      verticalAlign={atomPanelVerticalAlign.TOP}
    >
      {content}
    </AtomPanel>
  </div>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/panel/demo).**
npm package: @s-ui/react-atom-pin-input
Description: PinInput is a component that handles the use of a code input in diferent input boxes, creating a beautiful visual effect for the user and providing an easy way to handle the code for the developer.
Latest version: 1.11.0

# PinInput

PinInput is a component that handles the use of a code input in diferent input boxes, creating a beautiful visual effect for the user and providing an easy way to handle the code for the developer.

## Installation

```sh
$ npm install @s-ui/react-atom-pin-input
```

## Usage

```js
import PinInput, {PinInputField} from '@s-ui/react-atom-pin-input'

return (
  <div>
    <PinInput onChange={onChangeHandler} defaultValue={code} />
  </div>
)
```

### Basic usage

```js
<PinInput onChange={onChangeHandler} defaultValue={code} />
```

### Placeholder usage

```js
<PinInput placeholder="A" onChange={onChangeHandler} defaultValue={code} />
```

### Password filter usage

```js
<PinInput isPassword onChange={onChangeHandler} defaultValue={code} />
```

### Sizes usage

```js
<PinInput size="medium" onChange={onChangeHandler} defaultValue={code} />
```

### Length usage

```js
<PinInput lenth={6} onChange={onChangeHandler} defaultValue={code} />
```

### Mask usage

```js
<PinInput mask="NUMBER" onChange={onChangeHandler} defaultValue={code} />
```

### Disabled usage

```js
<PinInput disabled onChange={onChangeHandler} defaultValue={code} />
```

### Status usage

```js
<PinInput status="error" onChange={onChangeHandler} defaultValue={code} />
```

### Children usage

```js
<PinInput onChange={onChangeHandler} defaultValue={code}>
  -
</PinInput>
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-atom-pin-input/lib/index';
```

> **Find full description and more examples in the [demo page](https://sui-components.vercel.app//workbench/atom/validationCode/demo).**
npm package: @s-ui/react-atom-polymorphic-element
Description: > Render a basic polymorphic element capable of rendering a specified html tag or component when passed as a property.
Latest version: 1.4.0

# PolymorphicElement

> Render a basic polymorphic element capable of rendering a specified html tag or component when passed as a property.

This package is no-longer maintained. Please use `@s-ui/react-primitive-polymorphic-element`

## Installation

```sh
$ npm install @s-ui/react-atom-polymorphic-element
```

## Usage

### Basic usage

#### Import package and use the component

```js
import PolymorphicElement from 'components/atom/polymorphicElement/lib/index.js'

function Component() {}

return (
<>
  <PolymorphicElement as="div"/>
  <PolymorphicElement as="h1"/>
  <PolymorphicElement as={Component}/>
</>
)
```

### Properties

| Property | Type | Default | Description |
|---|---|---|---|
| as | string \| function | 'span' | Render the passed value as the correspondent HTML tag or the component if a function is passed. |

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-popover
Description: AtomPopover is a component that wraps an element and shows a popover around it.
Latest version: 3.18.0

# AtomPopover

AtomPopover is a component that wraps an element and shows a popover around it.

## Installation

```sh
$ npm install @s-ui/react-atom-popover --save
```

## Usage

### Basic usage
```js
import AtomPopover, { atomPopoverPositions } from '@s-ui/react-atom-popover'

```

```js
<AtomPopover
  placement={atomPopoverPositions.BOTTOM}
  onClose={() => console.log("CLOSE POPOVER!")}
  content={
    <>
      Hello <strong>world</strong>!
    </>
  }
>
  <div>
    Show Popover
  </div>
</AtomPopover>

```

Some times you may need to programmatically recalculate the `AtomPopover` position in order to fix visual inconsistencies (i.e. a change on the popover content could change the popover size, and therefore recalculating the position may be needed to ensure that popover is displayed as expected). To do so, it's possible to provide a component in the `AtomPopover`'s `content` property, this component will receive a function inside a property named `update`, calling this function will result on a popover's position recalculation.

```js
<AtomPopover
  placement={atomPopoverPositions.BOTTOM}
  onClose={() => console.log("CLOSE POPOVER!")}
  content={({update}) =>
    <>
      Hello <strong>world</strong>!
      <button onClick={update}>Click me to recalculate the popover position!</button>
    </>
  }
>
  <div>
    Show Popover
  </div>
</AtomPopover>

```

The `update` prop is a function provided by `Popper` (v1), which is the library in charge of rendering and positioning the popover component. You can get more information about this function here: https://popper.js.org/docs/v1/#Popper.scheduleUpdate


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/popover/demo).**
npm package: @s-ui/react-atom-progress-bar
Description: A Progress bar is a visual representation of a specified wait time or the current status of a process.
Latest version: 2.19.0

# AtomProgressBar

A Progress bar is a visual representation of a specified wait time or the current status of a process.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/progressBar/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,progressBar)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-label?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-progress-bar)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AprogressBar&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AprogressBar)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-progress-bar)](https://github.com/SUI-Components/sui-components/blob/main/components/progressBar/label/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-progress-bar --save
```

## Usage

After importing the component `AtomProgressBar` like this

```javascript
import AtomProgressBar from '@s-ui/react-atom-progress-bar'
```

### Basic usage

```javascript
<AtomProgressBar percentage={25} />
```

### Indicator text at Bottom

```javascript
<AtomProgressBar percentage={25} indicatorBottom />
```

### Indicator style (75/100)

```javascript
<AtomProgressBar percentage={25} indicatorTotal />
```

### Line double bar

```javascript
<AtomProgressBar
  mainBarPercentage={25}
  extraBarPercentage={50}
  type="lineDoubleBar"
/>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/progressBar/demo).**
npm package: @s-ui/react-atom-radio-button
Description: AtomRadioButton is a component that displays an input radio w/ its expected behavior
Latest version: 1.13.0

# AtomRadioButton

AtomRadioButton is a component that displays an input radio w/ its expected behavior

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/radioButton/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,radioButton)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-radio-button?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-radio-button)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AradioButton&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AradioButton)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-radio-button)](https://github.com/SUI-Components/sui-components/blob/main/components/radioButton/label/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-radio-button --save
```

## Usage

```js
import AtomRadioButton from '@s-ui/react-atom-radio-button'
```

### Basic usage

```js
<AtomRadioButton />
```

### Checked

```js
<AtomRadioButton checked />
```

### Disabled

```js
<AtomRadioButton disabled />
```

### w/ onChange handler

```js
<AtomRadioButton onChange={console.log} />
```

> **Find full description and more examples in the [demo page](/workbench/atom/radioButton).**
npm package: @s-ui/react-atom-skeleton
Description: Display the loading state of a component while avoiding layout shift
Latest version: 1.7.0

# AtomSkeleton

> Skeleton is used to display the loading state of a component while avoiding layout shift.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/skeleton/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,skeleton)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-skeleton?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-skeleton)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Askeleton&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Askeleton)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-skeleton)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/skeleton/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-skeleton
```

## Usage

### Basic usage

#### Import package and use the component

```js
import AtomSkeleton from '@s-ui/react-atom-skeleton'

return (<AtomSkeleton />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-atom-skeleton/lib/index';
```

### Variant

Use `variant` prop to shape the skeleton and make it look like the final user interface. Choose between `round`, `square` and `circle`.

```jsx
import AtomSkeleton, {ATOM_SKELETON_VARIANTS} from '@s-ui/react-atom-skeleton'

const VariantStory = () => (
  <>
    <AtomSkeleton variant={ATOM_SKELETON_VARIANTS.circle} />
    <AtomSkeleton variant={ATOM_SKELETON_VARIANTS.round} />
    <AtomSkeleton variant={ATOM_SKELETON_VARIANTS.square} />
  </>
);
```

### Size

While the `width` and `height` props could be set, it was made to be used directly in your components.

```jsx
import AtomSkeleton from '@s-ui/react-atom-skeleton'

const SizeStory = () => (
  <>
    <AtomSkeleton height="16px" />
    <h2>
      <AtomSkeleton />
    </h2>
  </>
);
```

### Animation

Use `animation` prop to choose between `wave` and `pulse` animation, if the prop is set to `false` the component won't have any.

```jsx
import AtomSkeleton, {ATOM_SKELETON_ANIMATIONS} from '@s-ui/react-atom-skeleton'

const AnimationStory = () => (
  <>
    <AtomSkeleton animation={ATOM_SKELETON_ANIMATIONS.wave} />
    <AtomSkeleton animation={ATOM_SKELETON_ANIMATIONS.pulse} />
    <AtomSkeleton animation={false} />
  </>
);
```

### Count

Use `count` prop to display several skeletons

```jsx
const CountStory = () => (
  <>
    <AtomSkeleton count={4} />
  </>
);
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-slider
Description: `AtomSlider` is a component that works as an input that provides a slider a number or a set of two numbers (range)
Latest version: 1.33.0

# AtomSlider

`AtomSlider` is a component that works as an input that provides a slider a number or a set of two numbers (range)

## Installation

```sh
$ npm install @s-ui/react-atom-slider --save
```

## Usage

```js
import AtomSlider from '@s-ui/react-atom-slider'
```

### Basic usage

```js
<AtomSlider/>
```

### Basic usage with custom markers (only first and last position)

```js
<AtomSlider
  min={1}
  max={9}
  marks={['1 km', '9 km']}
/>
```

### Step 25 and default value 50

```js
<AtomSlider step={25} value={50}/>
```

### Disabled

```js
<AtomSlider step={25} value={25} disabled />
```

### Range Basic

```js
<AtomSlider range />
```

### Range Step 10

```js
<AtomSlider range step={10} />
```

### Capturing Value Change

```js
<AtomSlider onChange={ (e, {value}) => console.log(value)} />
```

    

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/slider/demo).**
npm package: @s-ui/react-atom-status-spot
Description: > The status spot can has the success, error and alert color. > We can use the status: high, medium or low to assign the different colors.
Latest version: 1.9.0

# AtomStatusSpot

> The status spot can has the success, error and alert color.
> We can use the status: high, medium or low to assign the different colors.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-atom-status-spot --save
```

## Usage

### Basic usage
```js
import AtomStatusSpot from '@s-ui/react-atom-status-spot'

return (<AtomStatusSpot />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-switch
Latest version: 2.3.0

# AtomSwitch


The switch is the radio button when there’re only 2 exclusive options. “On/off” is a common and clear example for explaining this component.

In order to collect the result of this switch there is a callback `onToggle`, this callback receives a flag on `true` if select is active. If you're using a `select` type of this component, `false` means the first option and `true` the second one.

There are several two sizes for this component: `default` and `large`.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/switch/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,switch)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-switch?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-switch)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Aswitch&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Aswitch)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-switch)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/switch/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-switch --save
```

## Usage

### Basic usage - Uncontrolled component

```js
import AtomSwitch from '@s-ui/react-atom-switch'

return (
  <AtomSwitch
    disabled={false}
    initialValue={false}
    isFitted={false}
    isLoading={true}
    label="Label"
    labelLeft="Off"
    labelOptionalText="Optional label"
    labelRight="On"
    onToggle={flag => console.log(`Switch value is ${flag}`)}
    size="default"
    type="toggle"
  />
)
```

### Basic usage - Controlled component

```js
import AtomSwitch from '@s-ui/react-atom-switch'

return (
  <AtomSwitch
    labelLeft="Off"
    labelRight="On"
    onToggle={value => handleChangeFromParent(value)}
    type="toggle"
    value={value}
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/switch/demo).**
npm package: @s-ui/react-atom-table
Description: > Atom Table to show tabular information.
Latest version: 1.17.0

# AtomTable

> Atom Table to show tabular information.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/table/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,table)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-table?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-table)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Atable&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Atable)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-table)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/table/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-table --save
```

## Usage

### Basic usage

#### CSS

```scss
@import '@s-ui/react-atom-table/lib/index';
```

#### Javascript

```js
import AtomTable from '@s-ui/react-atom-table'

const contentHead = [
  'Versión',
  'Año',
  'Combustible',
  'Potencia',
  'Precio',
  ''
]

const contentBody = [
  [
    {
      content: 'Volkswagen Golf Edition 1.0 TSI 85kW',
      type: 'th',
      isNowrap: true
    },
    {content: '2019'},
    {content: 'Gasolina'},
    {content: '115vc'},
    {content: 'Desde 24.000€'},
    {content: 'Más información'}
  ],
  [
    {
      content: 'Volkswagen Golf Edition 1.0 TSI 85kW',
      type: 'th',
      isNowrap: true
    },
    {content: '2019'},
    {content: 'Gasolina'},
    {content: '115vc'},
    {content: 'Desde 24.000€'},
    {content: 'Más información'}
  ]
]

return <AtomTable head={contentHead} body={contentBody} />
  
> **Find full description and more examples in the [demo page](#).**
```