open-index/open-npm huggingface dataset:
npm package: @swingby-protocol/prettier-config
Description: Prettier config for Swingby's projects
Latest version: 1.0.2

A common Prettier config used in Swingby's projects.

## Quick start

1. Install Prettier and this package.

   ```bash
   yarn add --dev prettier @swingby-protocol/prettier-config
   ```

2. Add the follow config file at the root of your project.

   ```js
   // prettier.config.js
   module.exports = require('@swingby-protocol/prettier-config');
   ```

3. (Optional) Add the following config for EditorConfig.

   ```editorconfig
   # .editorconfig

   root = true

   [*]
   indent_style = space
   indent_size = 2
   end_of_line = lf
   charset = utf-8
   trim_trailing_whitespace = true
   insert_final_newline = true

   [*.md]
   trim_trailing_whitespace = false
   ```
npm package: @swingby-protocol/pulsar
Description: <p align="center"><img src="https://raw.githubusercontent.com/SwingbyProtocol/pulsar/master/docs/logo.png" height="100" alt="Pulsar" /></p>
Latest version: 3.15.3

<p align="center"><img src="https://raw.githubusercontent.com/SwingbyProtocol/pulsar/master/docs/logo.png" height="100" alt="Pulsar" /></p>

Pulsar is a library of [React](https://reactjs.org/) components built with
[styled-components](https://www.styled-components.com/).

## Getting started

1. Install this library with:

   ```bash
   yarn add @swingby-protocol/pulsar react-spring styled-components polished
   yarn add --dev @types/styled-components
   ```

2. Use `<PulsarThemeProvider />` with no props at the root of your app so that you get automatic
   theme switching out of the box. Optionally, you may also use `<PulsarGlobalStyles />`.

   ```tsx
   import React from 'react';
   import {
     PulsarThemeProvider,
     Button,
     PulsarGlobalStyles,
     PulsarToastContainer,
   } from '@swingby-protocol/pulsar';

   export const MyApp = () => {
     return (
       <PulsarThemeProvider>
         {/* Optional, to load the Inter font with `next/head`, `react-helmet`, etc. */}
         <Head>
           <link rel="stylesheet" href={PULSAR_GLOBAL_FONT_HREF} />
         </Head>
         <PulsarGlobalStyles /> {/* Optional */}
         <h1>My cool app</h1>
         <Button variant="primary" size="country">
           Click here!
         </Button>
         <PulsarToastContainer /> {/* Put this somewhere near the root of your app if you are going to use toasts */}
       </PulsarThemeProvider>
     );
   };
   ```

   If you are using Next.js, you should probably use `<PulsarThemeProvider />` in your `_app.tsx`
   file.

### TypeScrip integration

Add a definitions file like the following anywhere in your project.

```tsx
// DefaultTheme.d.ts
import 'styled-components';
import { PulsarThemeProvider } from '@swingby-protocol/pulsar';

declare module 'styled-components' {
  export interface DefaultTheme extends PulsarThemeProvider {}
}
```
npm package: @swingby-protocol/widget
Description: Small util to load Swingby's swap widget in your app.
Latest version: 1.1.1

Small util to load Swingby's swap widget in your app.

## Quick start

### Installation

```bash
yarn add @swingby-protocol/widget @swingby-protocol/sdk
```

### Examples

```tsx
import { createWidget, openPopup } from '@swingby-protocol/widget';

const widget = createWidget({ mode: 'test', resource: 'swap', size: 'big', bridge: 'btc_erc' });
openPopup({ widget });
```

```tsx
import { createWidget, getHtml } from '@swingby-protocol/widget';

const widget = createWidget({ mode: 'test', resource: 'swap', size: 'banner', bridge: 'btc_erc' });
document.querySelector('#my-container').innerHTML = getHtml({ widget });
```

## Widget sizes

⚠️ Note that both the widget and this util use `rem` units.

|        | Height (assuming 1rem = 16px) |
| ------ | ----------------------------- |
| Banner | 76px                          |
| Small  | 375px                         |
| Big    | 510px                         |
npm package: @swingerman/background-progress
Description: Angular directive to display a background progress bar
Latest version: 0.1.4

![npm](https://img.shields.io/npm/dw/@swingerman/background-progress?label=dwonloads&logo=npm&style=for-the-badge) [![Donate](https://img.shields.io/badge/Donate-PayPal-yellowgreen?style=for-the-badge&logo=paypal)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=S6NC9BYVDDJMA&source=url)

## Background Progress Directive

A simple directive for Angular 12+ that renders a linear gradient background on the element simulating a simple progress bar.

The idea was to use it on inputs but can be used for other elements as well.

### Install

```bash
npm i @swingerman/background-progress
```

### Use

```html
<form awmBackgroundProgress [fillPercent]="percent"></form>
```

### Properties

| Name       | Description |
|------------|-------------|
| @Input() <br>backgroundColor: string | Sets the background color of the element             |
| @Input() <br>foregroundColor: string | Sets the progress color                              |
| @input() <br>fillPercentGap: number  | Sets the blur size at the edge of the progress color |
| @input() <br>fillPercent: number     | Sets the actual percent                              |
npm package: @swingtrackr/react-stockcharts
Description: Highly customizable stock charts with ReactJS and d3
Author: Ragu Ramaswamy
Latest version: 0.7.9

## React Stockcharts

[![Join the chat at https://gitter.im/rrag/react-stockcharts](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/rrag/react-stockcharts?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![npm version](https://badge.fury.io/js/react-stockcharts.svg)](https://badge.fury.io/js/react-stockcharts)


Create highly customizable stock charts

Built with [React JS](http://facebook.github.io/react/) and [d3](http://d3js.org/)

If you like this project checkout <a href="https://gocharting.com" target="_blank">gocharting.com</a>
 - integrates multiple charttypes
 - over 60 technical indicators and overlays
 - drawing objects

Multiple [quick start examples](https://github.com/rrag/react-stockcharts-examples2)

- svg and canvas for improved performance. 
- pan and zoom, on touch devices too

#### Chart types

- Scatter
- Area
- Line
- Candlestick
- OHLC
- HeikenAshi
- Renko
- Kagi
- Point & Figure

#### Indicators

- EMA, SMA, WMA, TMA
- Bollinger band
- SAR
- MACD
- RSI
- ATR
- Stochastic (fast, slow, full)
- ForceIndex
- ElderRay
- Elder Impulse

(more to come), 

and it is simple to create your own indicator too

#### Interactive Indicators

- Trendline
- Fibonacci Retracements
- Gann Fan
- Channel
- Linear regression channel

---

### Installation
```sh
npm install  --save react-stockcharts
```

### Documentation

[Documentation](http://rrag.github.io/react-stockcharts)

[Ready to use Examples](https://github.com/rrag/react-stockcharts-examples2)

### Contributing

Refer to [CONTRIBUTING.md](./CONTRIBUTING.md)

### Stability

This is alpha state software, the api will change with each minor version.

### Roadmap

[Roadmap](./docs/md/COMING-SOON.md)

### LICENSE

[MIT](./LICENSE)
npm package: @swinte/common
Description: [![CI](https://github.com/StefanWin/swinte-common/actions/workflows/ci.yml/badge.svg)](https://github.com/StefanWin/swinte-common/actions/workflows/ci.yml) [![Release](https://github.com/StefanWin/swinte-common/actions/workflows/release.yml/badge.svg)](ht
Author: Stefan Wintergerst
Latest version: 0.1.7

# `@swinte/common`

[![CI](https://github.com/StefanWin/swinte-common/actions/workflows/ci.yml/badge.svg)](https://github.com/StefanWin/swinte-common/actions/workflows/ci.yml)
[![Release](https://github.com/StefanWin/swinte-common/actions/workflows/release.yml/badge.svg)](https://github.com/StefanWin/swinte-common/actions/workflows/release.yml)

A collection of utility functions.

### Install
- `pnpm add @swinte/common`
npm package: @swintt/game-events
Description: Front-end library that adds SWINTT specific game events.
Author: swintt
Latest version: 1.0.7

# Swintt Game Events

A front-end library for adding extra events to games specific for swintt integrations.

## Installation

You can install `@swintt/game-events` using npm:

```sh
npm install @swintt/game-events --save
```

## Usage

Import the relevant game event from the library, and call the event method with the expected parameters.

The following example will show the `notifyMessage` event usage.

```ts
import { notifyMessage, NotifyMessageEvent } from "@swintt/game-events"

notifyMessage({
    event: NotifyMessageEvent.INSUFFICIENT_FUNDS,
    message: "Test message",
}, "*")

```
npm package: @swinv/react-draft-editor
Description: The draft-js utility function for customized editor implementation
Author: samick
Latest version: 0.0.12

# react-draft-editor

## Usage

```javascript
import { DraftEditor } from '@swinv/react-draft-editor';
import {
    EditorState,
    convertToRaw,
    convertFromRaw,
    RichUtils,
    Modifier,
    CompositeDecorator,
} from 'draft-js';

const draftUtils = DraftEditor.Utils.create({
    EditorState,
    convertToRaw,
    convertFromRaw,
    RichUtils,
    Modifier,
    CompositeDecorator,
});
````

## License

MIT © [samick17](https://github.com/samick17)