open-index/open-npm huggingface dataset:
npm package: @s-ui/react-thumbnail-list
Description: > List of thumbnail-basic
Latest version: 1.15.0

# ThumbnailList

> List of thumbnail-basic

## Installation

```sh
$ npm install @s-ui/react-thumbnail-list --save
```

## Usage

### Basic usage
```js
import ThumbnailList from '@s-ui/react-thumbnail-list'

return (
  <ThumbnailList
    items={items}
    captionText='Show!'
    placeholder={
      src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM3NzciLz4KPC9zdmc+',
      alt: 'placeholder'
    }
    fallback={
      src: 'https://satyr.io/50',
      alt: '50x50 image'
    }
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/thumbnail/list/demo).**
npm package: @s-ui/react-title-multisize
Description: #### Provides a group of up to 3 title segments, each one with a customizable font size.
Latest version: 1.15.0


### TitleMultisize

#### Provides a group of up to 3 title segments, each one with a customizable font size.

Useful when we intend to have a main title with a word that must be highlighted among the other (i.e. having a bigger font size).

The titles can be displayed in horizontal or vertical direction, though "orientation" property:
- horizontal: All titles in the same line when possible.
- vertical: one title above the other.

The available sizes are:
- xl : H1 Tag.
- l  : H2 Tag.
- m  : H3 Tag.
- s  : H4 Tag.
- xs : H5 Tag.


This component is built with the following the structure:

````html
<h3>pre-title</h3><h1>TITLE</h1><h3>post-title</h3>
````
where first and last parts of title are optional.
npm package: @s-ui/react-tracking-view
Description: Tracking view is a component which purpose is to load our desired tracking library if wasn't loaded before and call the method of our tracking library that have the responsibility of do a pageView. For example: `utag.view`
Latest version: 1.12.0

# TrackingView

Tracking view is a component which purpose is to load our desired tracking library if wasn't loaded before and call the method of our tracking library that have the responsibility of do a pageView. For example:
`utag.view`

### Who defines the method to call?

The component will not be responsible to call the tracking library, it just will implement the track method that was defined in our props.

### Must I define the properties on each component instantiation?

You must, in order to load the library. What we recomend to do is to wrap this component in another one that holds that variables and was the one coupled to your desired library avoiding to pass it in the future, for example.

```javascript
<TealiumTrackingView>

// The render of the tealium tracking view will be the one to hold the src and maybe also the useCase (is up to you)
render(){
 return <TrackingView
        src='url'
        track={() =>domain.get('usecase').execute(trackingDataObject)}
        isAsync={false}
        verifier={() => window && window.utag}
        />
}

// So you can use TealiumTrackingView abstracted from URL, verifier and even usecase
```

## Installation

```sh
$ npm install @s-ui/react-tracking-view --save
```

## Usage

### Basic usage

```js
import TrackingView from "@s-ui/react-tracking-view";

return (
  <TrackingView
    src="http://tags.tiqcdn.com/utag/tealium/main/prod/utag.js"
    isAsync={false}
    verifier={() => window && window.utag}
    track={() =>
      domain.get("my_tracking_usecase").execute({
        data_blabla: "test"
      })
    }
  />
);
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/studio-create
Description:  CLI to create studios for React Components development.
Latest version: 4.25.0

# sui-studio-create

> CLI to create studios for sui components development.


## Installation

```sh
$ npm install -g @s-ui/studio-create
```

## Usage


```sh
$ sui-studio-create my-awesome-studio
$ cd my-awesome-studio
$ sui-studio start
```

And you're ready to go !

## CLI

### `$ sui-studio-create <project-name>`

Creates a studio with minimum files and config for a studio:
* Creates package.json
* Installs precommit rules (with git hook)
* Installs sui-studio
npm package: @s-ui/sui-deploy
Description:  CLI to deploy of sui-based projects
Author: David Almeida
Latest version: 1.3.0

# sui-deploy

> CLI to deploy of sui-based projects.


It provides:
* Common way to deploy our projects
* SPA deployments


## Installation

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

## CLI

When installed, a new CLI `sui-deploy` (node_modules/.bin/sui-deploy) is automatically available to deploy your projects.

Deploy a folder as an static SPA:

```sh
$ sui-deploy spa <name-of-project> [build-folder] [--now]
```

As spa is the default command, you can also:
```sh
$ sui-deploy <name-of-project> [build-folder] [--now]
```

## Authentification

**When --now option is set**, `sui-deploy` needs a now token to deploy files. The token is obtain from the env variable `NOW_TOKEN`

You can set your token once with a simple command.

```sh
$ export NOW_TOKEN=my-token-from-now
```

## Help

Run the following command for further options:
```sh
$ sui-deploy help
```

or

```sh
$ sui-deploy spa --help
```

## Example package.json

```json
{
  "name": "@my-scope/test-project",
  "version": "1.0.0",
  "scripts": {
    "build": "sui-bundler build -C",
    "deploy": "sui-deploy test-project --now"
  },
  "devDependencies": {
    "@s-ui/sui-deploy": "1"
  }
}
```

To deploy your project:
```sh
$ npm run build; npm run deploy
```
npm package: @s-ui/sui-google-api-client-loader
Description: Ensures Google API Client Library script is loaded before allowing to render the child content
Latest version: 1.2.0

# GoogleApiClientLoader

Ensures Google API Client Library script is loaded before allowing to render the child content

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

## Installation

```sh
$ npm install @s-ui/sui-google-api-client-loader
```

## Usage
[Google API Client Library for JavaScript documentation](https://github.com/google/google-api-javascript-client)

#### Import package and use the component

```js
import GoogleApiClientLoader from '@s-ui/sui-google-api-client-loader'

return (<GoogleOneTapLoader render={() => 'You can use Google API client library now!'}/>)
```



> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/sui-input-copy
Description: > Component that combines an input with a button to copy the value of the input.
Latest version: 1.3.0

# InputCopy

> Component that combines an input with a button to copy the value of the input.

## Installation

```sh
$ npm install @s-ui/sui-input-copy
```

## Usage

### Basic usage

#### Import package and use the component

**PROPS**
  * **buttonProps**: Object for pass props to the button.
  * **buttonText**: Literal for the button before copied.
  * **buttonTextAfterCopied**: Literal for the button after copying.
  * **isCopied**: Variable for control the component from outside.
  * **labelText**: Literal for label
  * **onCopy**: Function to execute after the text has been copied
  * **textToCopy**: Literal to be copied.
  * **timeoutReactivateButton**: Number of miliseconds to reactivate button (0 prevent the execution).

```js
import InputCopy from '@s-ui/sui-input-copy'

return (<InputCopy />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/sui-input-copy/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/sui-login-footer
Description: Footer for login layout
Latest version: 1.2.0

# LoginFooter

Footer for login layout

![](./assets/preview.png)

## Installation

```sh
$ npm install @s-ui/sui-login-footer
```

## Usage

### Basic usage

#### Import package and use the component

```js
import LoginFooter from '@s-ui/sui-login-footer'

return (<LoginFooter companyLogo={logo} links={links} />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/sui-login-footer/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/sui-login-header
Description: Header for login layout
Latest version: 1.4.0

# LoginHeader

Header for login layout

![](./assets/preview.png)

## Installation

```sh
$ npm install @s-ui/sui-login-header
```

## Usage

### Basic usage

#### Import package and use the component

```js
import LoginHeader from '@s-ui/sui-login-header'

const button = {
  text: 'Help',
  props: { // AtomButton props
    href: 'http://www.adevinta.es'
  }
}

const logo = 'https://statics.awesomecdn.com/images/adevinta.svg'

return (<LoginHeader button={button} logo={logo} />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/sui-login-header/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/sui-molecule-notification
Description: > Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.
Latest version: 1.2.0
Deprecated: This package will not longer get updates as the name is incorrect. You should use @s-ui/react-molecule-notification instead.

# MoleculeNotification

> Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.

## Installation

```sh
$ npm install @s-ui/sui-molecule-notification --save
```

## Usage

### Basic usage
```js
import MoleculeNotification from '@s-ui/sui-molecule-notification'

// sui-atom-button
const BUTTONS = [
  {
    type: 'secondary',
    children: 'Secondary',
    negative: true
  },
  {
    type: 'primary',
    children: 'Primary',
    negative: true
  }
]

return (
  <MoleculeNotification 
    text='Lorem fistrum'
    type='success',
    autoclose='short'
    buttons={BUTTONS} 
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/notification).**
npm package: @s-ui/sui-share-social-media-buttons-group
Description: > Component to share in the different social medias
Latest version: 1.4.0

# ShareSocialMediaButtonsGroup

> Component to share in the different social medias

## Installation

```sh
$ npm install @s-ui/sui-share-social-media-buttons-group
```

## Usage

### Basic usage

#### Import package and use the component

**PROPS**
  * **buttonsToShow**: Array that contains the keys to choose which buttons to display and their order.
  * **onShare**: Func to execute after share.
  * **paramsUrlString**: Parameters to send to the social media url.
  * **socialMediaDictionary**: Dictionary for setting the social media buttons.

```js
import ShareSocialMediaButtonsGroup from '@s-ui/sui-share-social-media-buttons-group'

return (<ShareSocialMediaButtonsGroup />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/sui-share-social-media-buttons-group/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/svg
Description: Converts svg files into React Components
Latest version: 3.28.0

# sui-svg

> Converts your SVG files into React Components wrapped with [@s-ui/atom-icon](https://sui-components.now.sh/workbench/atom/icon/demo).

Features:
- Building the components
- Showing up a demo locally

## Installation

```sh
$ npm i -SE @s-ui/svg
```

## Usage

Add bundling scripts to your **package.json**

```json
{
  "name": "my-awesome-package",
  "version": "1.0.0",
  "scripts": {
    "prepublishOnly": "sui-svg build",
    "start": "npm run prepare && sui-svg demo"
  }
}
```

## Expected folder structure

A `src` folder with all the `.svg` files to be converted inside.

## Output

A `lib` folder with the generated components will be created/overridden.

**⚠️ Advice:** no `index.js` will be generated inside the lib folder, each component should be imported independently for performance reasons.

## How to use the generated lib

```jsx
import YourIcon from 'your-svg-repo/lib/YourIcon'

const YourAwesomeComponent = () =>
  <div>
    <YourIcon />
    <p>Awesome text/<p>
  </div>
```

Also, keep in mind, you need to import the needed styles for the icons at least once in your app:

```scss
@import 'your-svg-repo/lib/index';
```

## Template

Every icon svg will be wrapped using an `<AtomIcon>` that means you could use [all the props accepted by the component](https://sui-components.now.sh/workbench/atom/icon/documentation/api).

The wrapped code is minimal, in order to avoid performance penalties. You could check it [here](templates/).
npm package: @s-ui/theme
Description: Generic theme to add styles to all SUI components
Latest version: 8.134.0

# SUI Components Theme

This repository contains:

- Generic variables to initialize default values and component styles.
- A set of placeholders ready to style your component (buttons, tabs, forms, grid system...).
- Functions and mixins helpers.

## Usage

Install `sui-theme` in your project:

```bash
npm install @s-ui/theme --save
```

Import `sui-theme` into your sui-component including the path in `index.scss`:

```scss
@import '~@s-ui/theme/lib/index';
```

If you want to customize your components, create your own theme and add it to your component just **before** the sui-theme import.

```scss
@import '../custom-settings';
@import '~@s-ui/theme/lib/index';
```

## Upgrade from theme-basic@7

Compatibility variables are still available to import manually.

**Import only what you need, in inheritance order**

For instance:

```scss
@import '../custom-settings';
@import '~@s-ui/theme/lib/settings-compat-v7/color';
@import '~@s-ui/theme/lib/settings-compat-v7/spacing';
@import '~@s-ui/theme/lib/index';
```

Find below the compat varible groups available:

- [settings-compat-v7/color](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_color.scss)
- [settings-compat-v7/font](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_font.scss)
- [settings-compat-v7/spacing](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_spacing.scss)
- [settings-compat-v7/box-style](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_box-style.scss)
- [settings-compat-v7/animation](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_animation.scss)
- [settings-compat-v7/layout](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_layout.scss)
- [settings-compat-v7/components](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_components.scss)

**Also, if you need it all for older components, you can do**

```scss
@import '~@s-ui/theme/lib/settings-compat-v7/index';
@import '~@s-ui/theme/lib/index';
```

## Media queries and breakpoints

### Rules & Definitions

- Breakpoints must be exactly `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
- For new implementations, the only allowed media query is `media-breakpoint-up`
- `media-breakpoint-down`, `media-breakpoint-only` and `media-breakpoint-between` are deprecated and only kept for legacy reasons.

### Reason

- We want to create all our components `mobile first`

### Legacy components

- Keep in mind that refactoring legacy components in order to make it rules compliant would suppose a breaking change, so a new major must be released.

### Links

- [SUI Breakpoints](https://github.com/SUI-Components/sui-theme/blob/master/src/layout/_breakpoints.scss) implementation
- [SUI Media Query](https://github.com/SUI-Components/sui-theme/blob/master/src/utils/_breakpoints.scss) implementation
npm package: @s-ui/tokens
Description: Tool for manipulate @s-ui tokens.
Latest version: 0.9.0

# sui-tokens
> Generates the semantic tokens styles file by a simple config file.

## Installation

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

## Configuration
The configuration files might follow the next structure:
[tokens.config.ts](https://github.com/SUI-Components/sui-components/blob/master/utils/sui-tokens/src/default.tokens.config.ts)

## Usage

By default, it generates the styles in native CSS format.

To see the resulting configuration, you can run the following command:
```sh
$ tokens -c <config.manifest.file.js>
```

To export the result on css format you can use the css script
```sh
$ tokens -c <config.manifest.file.js> -o <output.json>
```

```sh 

To export the result on json format you can use the JSON script

```sh
$ tokens json -c <config.manifest.file.js> -o <output.json>
```

To export the result on SCSS format you can use the scss script

```sh
$ tokens scss -c <config.manifest.file.js> -o <output.scss>
```

To see other configurations you can use the -h flag

```sh
$ tokens -h
```

...or use it on each script

```sh
$ tokens json -h
```

```shell
$ tokens scss -h
```
npm package: @s-yue/yue-ui
Description: Vue and Bootstrap Component Library.
Author: sy
Latest version: 1.0.0

# yue-ui

> Vue and Bootstrap Component Library.

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build yue-ui.min.js for production with minification
npm run build:all

# build lib for production with minification
npm run build:lib

# build css for production with minification
npm run build:style

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test
```
npm package: @s.a.g.a/reset-css
Description: A CSS reset library for building static websites without UI frameworks
Author: saga-web-engineer
Latest version: 0.2.0

# @s.a.g.a/reset-css

A CSS reset library for building static websites without UI frameworks.

This is my personal CSS reset library, designed for use when writing CSS without UI frameworks to create static websites.

## Installation

```bash
npm install @s.a.g.a/reset-css
```

**Windows PowerShell:**
```powershell
npm install "@s.a.g.a/reset-css"
```

## Usage

### Using with CSS/SCSS

**With @import:**
```css
@import "@s.a.g.a/reset-css";

/* Write your styles here */
.your-styles {
  /* ... */
}
```

**With Dart Sass (@use):**
```scss
@use "@s.a.g.a/reset-css";

/* Write your styles here */
.your-styles {
  /* ... */
}
```

### Using with JavaScript/TypeScript

```javascript
import "@s.a.g.a/reset-css";
```

## Contributing

Bug reports and feature requests are welcome! Please feel free to open an issue on [Issues](https://github.com/saga-web-engineer/saga-reset-css/issues).

## License

MIT License - See [LICENSE](LICENSE) file for details.

## Author

**saga-web-engineer**
- GitHub: [@saga-web-engineer](https://github.com/saga-web-engineer)

---

Made with ❤️ for better web development experience.
npm package: @s.shinohara/strapi-plugin-github-projects
Description: This is the description of the plugin.
Author: A Strapi developer
Latest version: 1.0.1

# "Github Projects" - plugin for Strapi 4

This plugin allows to automatically generate "Projects" from public Github repositories, meant to be then exposed via a public API, e.g. to be shown on a front-end application with the aim to showcase a developer's portfolio.
It is meant mostly for educational purposes, being built step by step in the "Strapi Complete Course" by Artcoded, so it's not tested in production.

## How to install

```bash
# yarn
yarn add @s.shinohara/strapi-plugin-github-projects

# npm
npm i @s.shinohara/strapi-plugin-github-projects
```

## Initial configuration

In order to use this plugin, you need to generate a new personal token [on Github](https://github.com/settings/tokens).
The generated API key must then be set up for your Strapi app as an environment variable called `GITHUB_TOKEN` (add it to your `.env` file).

## Submit issues

Click [here](https://github.com/artcoded-net/strapi-plugin-github-projects/issues/new) to submit an issue

## About us

I'm Jib, full-stack developer and instructor. Artcoded is my JS-teaching brand, under which I published the [Complete Strapi Course](https://artcoded.net/strapi), as well as free tutorials about Strapi and more on my [YouTube channel](https://www.youtube.com/c/ArtcodedNet) and [blog](https://artcoded.net)

## Disclaimer

We are not endorsed or affiliate in any way with Strapi nor with Github. The names and/or logos of such third-parties are or may be used just to describe the functionality of this plugin.
npm package: @s0/node-tcnet
Description: Implements the TC-Supply TCNet protocol used by ShowKontrol and ProDJLink Bridge app from Pioneer
Latest version: 0.5.1

# node-tcnet

> Note: This repo is a fork of this upstream repo:
> https://github.com/chdxD1/node-tcnet

This library tries implements the TCNet procotol of Showkontrol / Event Imagineering Group / Pioneer DJ described here: https://www.tc-supply.com/tcnet

It requires either Showkontrol / Beatkontrol (https://www.tc-supply.com/home) to be running on a Mac or PRO DJ LINK Bridge on Windows / Mac (https://www.pioneerdj.com/en/product/software/pro-dj-link-bridge/software/)

## Features

- [x] Connecting to a TCNet network
- [x] Listening to status events
- [x] Requesting song metadata of layers seperately
- [x] Requesting song metrics of layers
- [x] Receiving Timestamp information
- [ ] Time Sync (similar to NTP/PTP) / BPM capabilities of TCNet
- [ ] Other request packets like Beat Grid, Wave Form
- [ ] Control capabilities (like stopping layers) from TCNet

**This has only been tested against the Bridge software with NO DJMs or CDJs attached. Bascially this is an implementation solely on the protocol documentation. Testing on real equipment is needed.**

## Example
```typescript
import { TCNetConfiguration, PioneerDJTCClient, LayerIndex } from "@s0/node-tcnet"

async function main() {
    // Init new TCNet configuration
    const config = new TCNetConfiguration();

    // Linux
    config.broadcastInterface = "eth0";
    // Windows
    config.broadcastInterface = "Ethernet";
    
    // Init new client for Pioneer DJ TCNet
    const client = new TCNetClient(config);
    
    // Wait for connect
    await client.connect();

    // Wait for data packets
    client.on("data", (packet: TCNetDataPacket) => {
        console.log("data", packet);
    });

    client.on("broadcast", (packet: TCNetPacket) => {
        if (packet instanceof TCNetOptInPacket) {
            // Don't log these packets
            return;
        }
        console.log("broadcast", packet);
    });
}

main();
```

## Comparable work
- Directly implementing ProDJLink: Implements the native protocol of Pioneer DJ players/mixers by emulating a CDJ in the network. This has the downside of trying to reverse-engineer an unknown protocol from Pioneer, with no documentation. However these libraries have some better support for other devices like the XDJ-XZ. Using TCNet has the benefit of a clear seperation between the productive Pro DJ Link network and a documented protocol.
  1. prolink-connect (JS) by @EvanPurkhiser https://github.com/EvanPurkhiser/prolink-connect
  2. dysentery (Java) by @Deep-Symmetry https://github.com/Deep-Symmetry/dysentery

## Disclaimer

This work has not been sponsored or endorsed by Pioneer DJ or Event Imagineering Group. All product and company names are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.