open-index/open-npm huggingface dataset:
npm package: @shoelace-style/animations
Description: Your favorite animate.css effects available as ES modules for use with the Web Animations API.
Author: Cory LaViska
Latest version: 1.2.0

# Shoelace Animations

Your favorite [animate.css](https://animate.style/) effects available as ES modules for use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).

- 🏆 ~100 quality animations
- 🎾 ~30 popular easings
- 🚚 Works with CDNs
- 🌲 Fully tree-shakeable

[Try it on JSFiddle](https://jsfiddle.net/claviska/ohjmkgb1)

This module was built for [Shoelace](https://shoelace.style/), but it works well as a stand-alone library too!

## Installation

```bash
npm install @shoelace-style/animations
```

## Usage

Importing all animations:

```js
import * as animations from '@shoelace-style/animations';
```

Importing individual animations:

```js
import { bounce } from '@shoelace-style/animations';
```

Importing easings:

```js
import { easings } from '@shoelace-style/animations';
```

Animating an element:

```html
<div style="display: block; width: 100px; height: 100px; background: tomato; margin: 2rem;"></div>

<script type="module">
  import { easings, flip } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/animations@1/dist/index.js';

  const box = document.querySelector('div');

  box.animate(flip, {
    duration: 1500,
    iterations: Infinity,
    easing: easings.easeInSine
  });
</script>
```

This example uses the [jsDelivr CDN](https://www.jsdelivr.com/). To import the library locally, install it and make `node_modules/@shoelace-style/animations/dist` available to your app or bundler.

## Developers

This script parses all animation stylesheets found in `node_modules/animate.css` and generates [keyframe objects](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) that you can use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). As animations are tweaked and added to animate.css, the keyframes herein will be kept in sync when rerunning the script.

To build the project, run:

```bash
npm run build
```

This will purge and rebuild the `dist` directory.

Please report all bugs and suggestions to [the issue tracker](https://github.com/shoelace-style/animations/issues).
npm package: @shoelace-style/react
Description: Shoelace web components wrapped up for React.
Author: Cory LaViska
Latest version: 3.0.0

# Shoelace for React

This package is no longer maintained! As of 2.0.0-beta.60, Shoelace bakes React-wrapped components into `@shoelace-style/shoelace`.

You should transition to that package instead of using this one.

[Learn more](https://shoelace.style/frameworks/react)
npm package: @shoelace-style/react-wrapper
Description: A lightweight utility that wraps custom elements ("web components") so they can be used like native React components.
Author: Cory LaViska
Latest version: 1.0.3

# React Wrapper for Shoelace

A lightweight utility that wraps custom elements ("web components") so they can be used like native React components.

## Usage

```jsx
import wrapCustomElement from '@shoelace/react-wrapper';

const ShoelaceButton = wrapCustomElement('sl-button');

return <ShoelaceButton type="primary">Click me</ShoelaceButton>;
```

This utility was built for [Shoelace](https://shoelace.style), but it should work for just about any custom element.

## Why is this necessary?

React and custom elements don't play nicely together. The problem is best described by [Custom Elements Everywhere](https://custom-elements-everywhere.com/#react):

> **Handling data**
>
> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
>
> **Handling events**
>
> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.

This utility solves these problems by exposing a native React component that maps properties and events to the underlying custom element. ✨
npm package: @shoelace-style/shoelace
Description: A forward-thinking library of web components.
Author: Cory LaViska
Latest version: 2.20.1

# Shoelace

A forward-thinking library of web components.

- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
- Includes an official dark theme 🌛
- Built with accessibility in mind ♿️
- Open source 😸

Designed in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska).

---

Documentation: [shoelace.style](https://shoelace.style)

Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)

Twitter: [@shoelace_style](https://twitter.com/shoelace_style)

---

## Shoemakers 🥾

Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.

**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.

If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.

### What are you using to build Shoelace?

Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).

### Forking the Repo

Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.

```bash
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install
```

### Developing

Once you've cloned the repo, run the following command.

```bash
npm start
```

This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.

### Building

To generate a production build, run the following command.

```bash
npm run build
```

### Creating New Components

To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.

```bash
npm run create sl-tag-name
```

This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.

### Contributing

Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.

## License

Shoelace was created by [Cory LaViska](https://twitter.com/cory_laviska) and is available under the terms of the MIT license.

Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾
npm package: @shoelace-style/vue-sl-model
Description: A custom Vue directive that makes two-way binding Shoelace components easier.
Author: Cory LaViska
Latest version: 1.0.1

# Vue Directive for Two-way Binding Shoelace Components

A custom Vue 3 directive that makes two-way binding [Shoelace components](https://shoelace.style) easier.

<details>
<summary>Instructions for Vue 2 users</summary>

If you're looking for a directive that's compatible with Vue 2, install version 1 of this package:

```bash
npm install @shoelace-style/vue-sl-model@1
```

Then [follow these instructions](https://github.com/shoelace-style/vue-sl-model/tree/77cac5afd36bd6e3321b0a738e3c1751ff006158#vue-directive-for-two-way-binding-shoelace-components) instead.

</details>

## Usage

Install the directive with this command.

```sh
npm install @shoelace-style/vue-sl-model
```

Next, import the directive into your app and enable it like this.

```js
import "@shoelace-style/shoelace/dist/themes/light.css"
import "@shoelace-style/shoelace/dist/components/input/input"

import ShoelaceModelDirective from '@shoelace-style/vue-sl-model'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(ShoelaceModelDirective)

app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-')

// If using Vite, the above "isCustomElement" needs to be deleted and defined in vite.config.js
// See below for an example vite.config.js

app.mount('#app')
```

Now you can use the `v-sl-model` directive to keep your data in sync!

```html
<sl-input v-sl-model="name"></sl-input>
```

## Why is this necessary?

Currently, there's [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830) in Vue. You can handle two-way binding manually, but's it rather verbose.

```html
<!-- This doesn't work -->
<sl-input v-model="name"></sl-input>

<!-- This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```

This utility solves this problem by creating a custom directive that works just like `v-model` but for Shoelace components.

## Using Vite

```js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('sl-')
        }
      },
    })
  ]
})
```
npm package: @shoesofprey/three-orbit-controls-es
Description: Orbit Controls for three.js as an es module, with typescript definitions.
Author: Ritwik Roy
Latest version: 0.87.2-4

# three-orbit-controls-es
Orbit Controls for three.js as an es module, with type definitions.

[![NPM](https://nodei.co/npm-dl/three-orbit-controls-es.png)](https://nodei.co/npm-dl/three-orbit-controls-es/)

This is taken from the original OrbitControls example in three.js, but modified so:
1) It uses modules and exports as one, rather than requiring all of three.js
2) It has a dependency on three.js. This means it's tied to a specific verison of three.js.

This package is similar to some existing ones but modified for our needs. Might be useful for others. See [this issue for the rationale](https://github.com/mattdesl/three-orbit-controls/issues/17).

Like the other similar packages - All credit goes to [OrbitControls.js][original_orbitcontrols] contributors. This just exports it as an es module, to make it better suited for our build.

This only works in environments where `import { X } from "y"` works (or is transpiled, e.g with webpack).

```javascript
import { PerspectiveCamera, WebGLRenderer } from "three"
import { OrbitControls } from "three-orbit-controls-es"

// Init THREE scene (add your code)

var camera = new PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 5

var renderer = new WebGLRenderer({ canvas })

var controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.25
controls.enableZoom = false
```

To install:

```bash
npm install three-orbit-controls-es --save
```

Note: If you don't have the same version of three-js, this will have its own. Consider that in your dependency planning (we'll try to keep this updated as we update three.js).

There are other packages similar to this one: [three-orbit-controls], [three-orbitcontrols].

License is the same as [three.js], i.e. [MIT].

[original_orbitcontrols]: https://github.com/mrdoob/three.js/tree/master/examples/js/controls/OrbitControls.js "OrbitControls.js"
[three.js]: http://threejs.org/ "three.js"
[MIT]: https://github.com/mrdoob/three.js/blob/master/LICENSE "three.js license"
[three-orbit-controls]: https://www.npmjs.com/package/three-orbit-controls "three-orbit-controls"
[three-orbitcontrols]: https://www.npmjs.com/package/three-orbit-controls "three-orbitcontrols"
npm package: @shoestrong/build-i18n-lang-config
Description: 构建i18n中lang配置文件，为i18n而生
Author: shoestrong310@gmail.com
Latest version: 1.1.1

# build-i18n-lang-config
构建i18n中lang配置文件

解决在使用vue-i18n中要手动写入每种语言，避免反复人工操作

使用
```
npm install @shoestrong/build-i18n-lang-config --save
```

根目录下index.js
```
const BuildI18nLangConfig = require('@shoestrong/build-i18n-lang-config')

// 可配置
const i18nLang = new BuildI18nLangConfig({
  langs: ['zh_CN', 'zh_TW', 'en'],
  defaultLangs: ['zh_CN', 'en'],
  outPath: './user/langs',
  entryPath: './local'
})
// 设置langs配置，第二个参数确定是否为defaultLangs，两个数组有交集，默认获取交集
i18nLang.setLangs('zh_TW', true)
// 设置出入口路径，第二个参数可设置outPath和entryPath
i18nLang.setPath('./user/langs', 'outPath')
```

运行
```
node index.js
```

在local文件夹中写入json格式，区分各语言，生成模块会以文件名生成
demo.json
```
{
  "message": {
    "zh_CN": "为i18n而生",
    "en": "Born to i18n",
    "zh_TW": "為i18n而生"
  }
}
```

会生成以下文件目录
```
user
  --lang
    --zh_CN
      --demo.js
    --en
      --demo.js
    --zh_TW
      --demo.js
```
文件内容，比如user/lang/zh_CN/demo.js
```
export default {
  "message": "为i18n而生"
}
```
npm package: @shofol/gameswapuikit
Description: Set of UI components for pancake projects
Latest version: 0.10.9

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @shofol/panuikit
Description: Set of UI components for pancake projects
Latest version: 0.40.13

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @shoginn/discordjs-mock
Description: This repository contains mocks for the [Discord.js](https://discord.js.org) library.
Author: @ShoGinn
Latest version: 1.0.11
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Discord.js v14 Mocks

This repository contains mocks for the [Discord.js](https://discord.js.org) library.

I created this repository because I wanted to write tests for my Discord bots, but I didn't want to use the real Discord.js library. I wanted to use a mock library that would allow me to test my code without having to worry about the Discord API. I also wanted to be able to test my code without having to worry about the Discord API.

I found a repository that had this as a good base but I wanted more control over the dependencies and the mocks. So I created this repository.

The source was: [AnswerOverflow](https://github.com/AnswerOverflow/AnswerOverflow) and their [Discord.js Mocks](https://github.com/AnswerOverflow/AnswerOverflow/tree/main/packages/discordjs-mock)

## Example

The example below is using DiscordX and a simple singleton class to create the mocks. This is just an example and you can use any library you want to create the mocks.

```ts
/* eslint-disable @typescript-eslint/no-explicit-any */
import { jest } from '@jest/globals';
import {
  mockClientUser,
  mockGuild,
  mockGuildMember,
  mockTextChannel,
  mockUser,
} from '@shoginn/discordjs-mock';
import { Client, Guild, TextBasedChannel, TextChannel, User } from 'discord.js';
import { Client as ClientX } from 'discordx';
import { singleton } from 'tsyringe';

@singleton()
export class Mock {
  private client!: Client;
  private guild!: Guild;
  private channel!: TextChannel;
  private user!: User;

  getClient(withBots: boolean = false): Client {
    if (withBots) {
      const botUser = mockUser(this.client, { bot: true });
      mockGuildMember({
        client: this.client,
        user: botUser,
        guild: this.guild,
      });
    }
    return this.client;
  }
  getUser(): User {
    return this.user;
  }
  getGuild(): Guild {
    return this.guild;
  }
  getChannel(): TextBasedChannel {
    return this.channel;
  }
  constructor() {
    this.mockClient();
    this.mockGuild();
    this.mockUser();
    this.mockChannel();
  }

  private mockClient(): void {
    this.client = new ClientX({ intents: [], guards: [] });
    mockClientUser(this.client);

    this.client.login = jest.fn(() => Promise.resolve('LOGIN_TOKEN')) as any;
  }

  private mockGuild(): void {
    this.guild = mockGuild(this.client);
  }
  private mockChannel(): void {
    this.channel = mockTextChannel(this.client, this.guild);
  }

  private mockUser(): void {
    this.user = mockUser(this.client);
  }
}
```
npm package: @shogo82148/a1notation
Description: Limit the concurrency of tasks.
Latest version: 0.2.1

# a1notation

This library is designed to parse A1 Notation, commonly used in spreadsheets
like Excel and Google Sheets, and convert it to row and column indices. It also
allows for the reverse operation, converting row and column indices back to A1
Notation.

## Usage

## Parsing A1 Notation

```typescript
import { A1Notation } from "@shogo82148/a1notation";

const a1 = A1Notation.parse("Sheet1!A1:B2");
console.log(a1.sheetName); // "Sheet1"
console.log(a1.left); // 1
console.log(a1.top); // 1
console.log(a1.right); // 2
console.log(a1.bottom); // 2
```

## Generating A1 Notation

```typescript
import { A1Notation } from "@shogo82148/a1notation";

const a1 = new A1Notation("Sheet1", 3, 2);
console.log(`${a1}`); // Sheet1!C2
```
npm package: @shogo82148/limit-concurrency
Description: Limit the concurrency of tasks.
Latest version: 0.1.6

# limit_concurrency

It runs the tasks in parallel but ensures that at any given time, no more than
the specified limit of tasks are being executed concurrently. Once a task
completes, another task (if any remain) is started, maintaining the concurrency
limit until all tasks have been executed.

```ts
import { limitConcurrency } from "./limit-concurrency.ts";

function* taskGenerator(): Generator<() => Promise<void>> {
    for (let i = 0; i < 10; i++) {
        yield async () => {
            // Simulate an asynchronous task
            console.log(`Task ${i} started`);
            await new Promise((resolve) => setTimeout(resolve, 1000));
            console.log(`Task ${i} finished`);
        };
    }
}

const iterator = taskGenerator();
limitConcurrency(iterator, 2); // Limit concurrency to 2
```