open-index/open-npm huggingface dataset:
npm package: @sjkey/eslint-config-vue
Description: My ESlint configuration, based on [antfu/eslint-config](https://github.com/antfu/eslint-config)
Author: sjkey
Latest version: 0.3.5

# @sjkey/eslint-config-vue

My ESlint configuration, based on [antfu/eslint-config](https://github.com/antfu/eslint-config)

This package is designed for **Nuxt** and **Vue** projects using the new [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new)

It provides a custom ESLint configuration, `@sjkey/eslint-config-vue`, to help you maintain consistent code style and enforce best practices in your projects including:

- TypeScript
- Vue
- Tailwind
- Prettier
- Sorted imports
- Unicorn
- Yaml
- and more ...

## Installation
```shell
pnpm i -D @sjkey/eslint-config-vue
```
## Configuration

1. Create a `eslint.config.ts` file in the root directory.
2. Open the `eslint.config.ts` file and add the following code:

   ```javascript
   import sjkeyConfig from '@sjkey/eslint-config-vue'

   export default sjkeyConfig()
   ```

3. Sometimes a **reload** is required in VS Code

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @sjmatta/react-loading
Description: React loading component
Author: Cezary Wojtkowski
Latest version: 0.0.9

# react-loading

Easy to use loading animations for React projects. Uses SVG animations from Brent Jackson's [loading](https://github.com/jxnblk/loading) project.

## Installation

```
npm install react-loading
```

## Demo

http://cezary.github.io/react-loading/

## Loading Types

* blank
* balls
* bars
* bubbles
* cubes
* cylon
* spin
* spinningBubbles
* spokes

## Example

```javascript
var React = require('react');
var Loading = require('react-loading');

var Component = React.createClass({
  render: function() {
    return (
      <Loading type='balls' color='#e3e3e3' />
    );
  }
});
```

## License

MIT
npm package: @sjmc11/tourguidejs
Description: A customizable tour guide library for front-end applications.
Author: JC
Latest version: 0.0.27

<p style="text-align: center" align="center">
<img src="tg-logo.svg" width="100"/>
</p>
<h1 align="center" style="text-align: center">TourGuide JS</h1>
<p align="center" style="text-align: center">
Intuitive and customisable tours for user application onboarding
<br />
<a href="https://tourguidejs.com/docs/"><strong>Explore the docs »</strong></a>
  
<p align="center"><a href="https://www.buymeacoffee.com/sjmc11h" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a></p>

<p align="center">If this library saved you time or helped your project, consider buying me a coffee — it fuels more features, faster fixes, and better support! ☕✨</p>
</p>


----


<p align="center">
<img src="https://tourguidejs.com/tourguidejs-demo.gif" width="624">
</p>

## QuickStart
### Installation
```
npm i @sjmc11/tourguidejs
```

### Usage
Include the tourGuide script and style in your project. A CDN method is supported.
```
// Style
import "@sjmc11/tourguidejs/src/scss/tour.scss"
// JS
import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour"
```

### Declare steps
Add the [data-tg-tour] attribute to elements that you want to include in your tour. This attribute should contain the relevant text for the tour guide step.
```
<div data-tg-tour="Welcome aboard 👋> ... </div>
```

### Create a tour
```
const tg = new TourGuideClient({} : TourGuideOptions)
```

### Start the tour
```
tg.start()
```

----

#### TourGuide JS uses Floating-Ui for intelligent dialog positioning
See [Floating UI](https://floating-ui.com/) for more information.