open-index/open-npm huggingface dataset:
npm package: @fuzionchain/uikit
Description: Set of UI components for fuzion projects
Latest version: 0.62.0

# 🥞 Fuzion UIkit

[![Version](https://img.shields.io/npm/v/@fuzionchain/uikit)](https://www.npmjs.com/package/@fuzionchain/uikit) [![Size](https://img.shields.io/bundlephobia/min/@fuzionchain/uikit)](https://www.npmjs.com/package/@fuzionchain/uikit)

Fuzion UIkit is a set of React components and hooks used to build pages on Fuzion's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add@fuzionchain/uikit`

## Setup

### Theme

Before using Fuzion UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@fuzionchain/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@fuzionchain/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://fuzionchain.github.io/fuzion-uikit/)
npm package: @fuzionx/player
Description: FuzionX WebRTC Player SDK — Viewer & Publisher
Author: FuzionX
Latest version: 0.1.69

# @fuzionx/player

FuzionX WebRTC Player SDK — **3줄 코드**로 라이브 방송 시청/송출.

## Install

```bash
npm install @fuzionx/player
```

## Usage

### 시청자 (Viewer)

```javascript
import { FuzionXViewer } from '@fuzionx/player';

const viewer = new FuzionXViewer({
  url: 'wss://media.example.com:50002',
  channelId: 'my-channel',
  mode: 'broadcast', // or 'videochat'
});

viewer.on('stream', (stream, slotIndex) => {
  document.getElementById('video').srcObject = stream;
});

viewer.on('chat', ({ nickname, text }) => {
  console.log(`${nickname}: ${text}`);
});

viewer.connect();
```

### 송출자 (Publisher) — 카메라

```javascript
import { FuzionXPublisher } from '@fuzionx/player';

const pub = new FuzionXPublisher({
  url: 'wss://media.example.com:50002',
  channelId: 'my-channel',
  mode: 'broadcast',
  nickname: '방송자',
  media: { video: true, audio: true },
});

pub.on('ready', () => console.log('Live!'));
pub.connect();
```

### 송출자 (Publisher) — WHIP (OBS)

```javascript
import { FuzionXPublisher } from '@fuzionx/player';

const pub = new FuzionXPublisher({
  whipUrl: 'https://media.example.com:7777/whip/my-channel',
  token: 'your-jwt',
});

pub.on('ready', () => console.log('WHIP Connected!'));
pub.connect();
```

### 화상회의 (VideoChat)

```javascript
import { FuzionXPublisher } from '@fuzionx/player';

const participant = new FuzionXPublisher({
  url: 'wss://media.example.com:50002',
  channelId: 'meeting-room',
  mode: 'videochat',
  nickname: '참가자1',
});

// 내 카메라
participant.on('media', (localStream) => {
  document.getElementById('local').srcObject = localStream;
});

// 다른 참가자 스트림 수신
participant.on('stream', (stream, slotIndex) => {
  document.getElementById(`remote-${slotIndex}`).srcObject = stream;
});

participant.on('slot', ({ slotIndex, nickname }) => {
  console.log(`Slot ${slotIndex}: ${nickname}`);
});

participant.connect();
```

## CDN (Script Tag)

```html
<script src="https://unpkg.com/@fuzionx/player/dist/fuzionx-player.umd.js"></script>
<script>
  const { FuzionXViewer } = FuzionXPlayer;
  const viewer = new FuzionXViewer({ ... });
</script>
```

## API

### FuzionXViewer

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `url` | string | — | WebSocket URL |
| `channelId` | string | — | 채널 ID |
| `mode` | string | `'broadcast'` | `'broadcast'` or `'videochat'` |
| `nickname` | string | — | 닉네임 |
| `token` | string | — | 인증 토큰 |
| `autoReconnect` | boolean | `true` | 자동 재연결 |

**Events**: `stream`, `slot`, `slot_remove`, `chat`, `error`, `close`, `connected`

### FuzionXPublisher

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `url` | string | — | WebSocket URL (WS 방식) |
| `whipUrl` | string | — | WHIP URL (단방향) |
| `channelId` | string | — | 채널 ID |
| `mode` | string | `'broadcast'` | `'broadcast'` or `'videochat'` |
| `media` | object | `{video:true, audio:true}` | getUserMedia 제약 |
| `stream` | MediaStream | — | 외부 스트림 |

**Events**: `ready`, `media`, `stream`, `slot`, `slot_remove`, `chat`, `error`, `close`

## License

MIT
npm package: @fuzo-chat/chat-window
Description: FuzoChat Chat Window
Author: admin@fuzochat.com
Latest version: 0.0.2

# Fuzo Chat

This repo contains the code for the chat window that is rendered in an iframe in the FuzoChat chat widget.

## Getting Started

Run the development server with:

```bash
npm run dev
```

This will start the app at [http://localhost:8080](http://localhost:8080).

You can start editing the page by modifying the components in the `/components` directory. The page auto-updates as you edit the file.

## Development

You'll notice when you start up the code from scratch that nothing gets rendered initially. This is because this component requires certain query params to be set in order to render.

The easiest way to develop within this repo is by running it alongside the `@fuzo-chat/chat-widget` package.
npm package: @fuzzco/flex-height
Description: Flexible height wrapper for Vue.
Latest version: 1.0.3

Flexible height transition for Vue. [Demo](https://fuzzco.github.io/flex-height/)

`npm i @fuzzco/flex-height`

[Register component in Vue](https://vuejs.org/v2/guide/components-registration.html), then:

```html
<template>
    <main>
        <flex-height>
            <!-- Any component with varying height can go here. -->
            <!-- flex-height will wrap that component and adjust its height accordingly.-->
            <!-- Make sure you key the contents so the change registers! -->
            <img
                :src="imageSizes[imageSizes.length % currentIndex]"
                :key="currentIndex"
            />
        </flex-height>

        <button @click="currentIndex++">Next Image</button>
    </main>
</template>

<script>
    export default {
        data() {
            return {
                currentIndex: 0,
                imageSizes: ['300x300', '300x400', '300x500']
            }
        }
    }
</script>
```

## Options

| Prop        | Type    | Default | Notes                                                                                                                                                                                                   |
| ----------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `wrapper`   | String  | `div`   | Wrapper element for the entire `flex-height` component.<br/><br/>Structure goes: `<wrapper> -> <div.internal> -> <transition> -> <slot>`, where `div.internal` is the component that is actually sized. |
| `leaveTime` | Number  | 200     | ms to fade out when transitioning.                                                                                                                                                                      |
| `appear`    | Boolean | `false` | Whether or not the animation should run on mount.                                                                                                                                                       |
npm package: @fuzzco/fragment-shader
Description: Start drawing fragment shaders right away.
Latest version: 1.1.4

Vue component to drop in a WebGL shader anywhere for <10kb. [Demo](https://fuzzco.github.io/fragment-shader/)

```html
<!-- Add the `fragment-shader` component to start the shader -->
<fragment-shader>
    <!-- Add a `shader/fragment` script to include a fragment shader -->
    <script type="shader/fragment">
        precision highp float;

        // Available uniforms
        uniform float uTime; // ms since start
        uniform vec2 uResolution; // { x: width, y: height }

        void main() {
            vec2 uv = gl_FragCoord.xy / uResolution.xy;
            gl_FragColor = vec4(uv.x, 0.2, 0.2, 1.);
        }
    </script>
</fragment-shader>
```

## Table of Contents

## TODO

-   Common replacements with [THREE.js #include convention](https://github.com/SaFrMo/vue-three-wrap/blob/master/example/FragmentShader.vue#L9)
    -   snoise
    -   rotate2d
npm package: @fuzzco/full-canvas
Description: Auto-resizing canvas for Vue.
Author: Fuzzco
Latest version: 1.1.0

Auto-resizing canvas. [Demo](https://fuzzco.github.io/full-canvas/)

`npm i @fuzzco/full-canvas`

[Register component in Vue](https://vuejs.org/v2/guide/components-registration.html), then:

```html
<template>
    <main>
        <!-- canvas that resizes to fit its container (positions: absolute, top/right/bottom/left: 0) -->
        <full-canvas />

        <!-- lower rect-throttle value for smoother resizing, at the cost of more expensive calculations -->
        <full-canvas rect-throttle="20" />
    </main>
</template>
```

## Options

| Prop            | Type             | Default | Notes                                      |
| --------------- | ---------------- | ------- | ------------------------------------------ |
| `rect-throttle` | [String, Number] | 150     | How often the canvas resizes itself, in ms |

## Events

| Event          | Params     | Notes                                                                                                                                                    |
| -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `canvas-ready` | `(canvas)` | Fires after all initialization has completed and canvas is ready. Looking for the canvas before this point doesn't guarantee that the canvas will exist. |
npm package: @fuzzco/in-view
Description: Vue mixin for smooth and robust enter/leave viewport handling.
Latest version: 1.2.4

`npm i @fuzzco/in-view`

[Demo](https://fuzzco.github.io/in-view/)

In your Vue component:

```html
<script>
    import inView from '../src'

    export default {
        mixins: [inView],
        mounted() {
            // call the `inView` method and specify a selector
            this.inView('p')

            // or a selector and delay in ms if multiple enter the viewport at once
            this.inView('p', 100)

            // can also pass an object of opts (see below for defaults)
            this.inView({
                selector: 'p',
                once: true
            })
        }
    }
</script>
```

## Defaults

```js
{
    // pass in DOM node(s) to use directly
    // (doing so ignores `selector`)
    // el for a single node...
    el: null,
    // ...els for an array of nodes
    els: null,

    // single selector - see below
    selector: '',

    // array of selectors for this group
    // if "selector" is set, will create an array from "selector"
    selectors: [],

    // delay between callbacks if multiple instances of this group come in view at once
    delay: 0,

    // run immediately on initialization
    run: true,

    // each callback accepts one parameter, the element in view
    // the defaults set the class to `above-view`, `in-view`, or `below-view`
    onEnter: el => {},
    onLeaveTop: el => {},
    onLeaveBottom: el => {},

    // run in-view callback only once per node
    once: false
}
```

See `demo/App.vue` for usage.

## Methods

| Name           | Params                      | Notes                                                                                                                                                                                                               |
| -------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inView`       | `(options = {}, delay = 0)` | <ul><li>`options` can be a string or object.</li><li> `delay` is overridden by `options.delay` if provided.</li></ul>Register an element or group of elements for `in-view` events. See above for `options` values. |
| `updateInView` | None                        | Recalculate items in view. Called automatically on `scroll`, `mousewheel`, and `resize`, but can also be called manually.                                                                                           |
npm package: @fuzzco/scrub-wrap
Description: Get scroll progress of wrapped contents.
Latest version: 1.1.1

Get a section's scroll progress. Useful for animations like [this one](https://www.synack.com/red-team/) (scroll down to the "Do you have what it takes?" section), for example. [Demo](https://fuzzco.github.io/scrub-wrap/)

`npm i @fuzzco/scrub-wrap`

[Register component in Vue](https://vuejs.org/v2/guide/components-registration.html), then:

```html
<template>
    <main>
        <!-- get scroll progress -->
        <scrub-wrap @progress="progress = $event">
            <div class="scroll-area" />
        </scrub-wrap>
    </main>
</template>

<script>
    export default {
        data() {
            return {
                progress: 0
            }
        }
    }
</script>
```

## Options

| Prop        | Type             | Default | Notes                                                                                                             |
| ----------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `component` | String           | `div`   | Wrapper element.                                                                                                  |
| `height`    | [Number, String] | -1      | Height of the wrapper in px. Useful for making the wrapper extend past the viewport, for example. `-1` to ignore. |
| `top` }     | [Number, String] | -1      | Top of the internal content. `-1` to ignore.                                                                      |

## Events

| Name       | Parameters        | Notes                                                                                                                                            |
| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `progress` | `(value: number)` | The percentage scrolled. 0 = 0% = the element's top is at the top of the screen, 1 = 100% = the element's bottom is at the bottom of the screen. |
npm package: @fuzzco/smart-columns
Description: Columns using display: grid and CSS vars.
Author: Sander Moolin, Fuzzco
Latest version: 1.0.1

Make columns that flow like this:

```
item one    item four
item two    item five
item three
```

with CSS like this:

```css
.your-list {
    display: grid;
    grid-template-rows: repeat(var(--row-count), auto);
    grid-auto-flow: column;
}
```

## Install

### NPM

1. `npm install smart-columns`
1. In your JS:

    ```
    import smartColumns from 'smart-columns'

    smartColumns()
    ```

### Script include

1. In your HTML:
    ```
    <script src="//unpkg.com/@fuzzco/smart-columns"></script>
    <script type="text/javascript">
        smartColumns()
    </script>
    ```

## Options

```js
smartColumns({
    // number of columns. default 2
    columns: 2,

    // CSS selector. default 'ol, ul'
    selector: 'ol, ul'
})
```

`smartColumns` sets a var called `--row-count` on each element it finds with the given `selector`. Run `smartColumns` again whenever the content changes to recalculate.

## Todo

-   Update when content changes - some kind of watcher?
npm package: @fuzzco/vue-marquee
Description: Reliable, accessible, bare-bones marquee in Vue.
Latest version: 1.0.2

VueMarquee gives you a reliable, accessible, bare-bones marquee in Vue. You provide the content and the styling, this component provides the rest. [Demo](https://fuzzco.github.io/vue-marquee/)

## Usage

`npm i @fuzzco/vue-marquee`

[Register component in Vue](https://vuejs.org/v2/guide/components-registration.html), then:

```html
<template>
    <main>
        <!-- standard options -->
        <vue-marquee>
            <p>
                <code>VueMarquee</code> gives you a reliable, accessible,
                bare-bones marquee. You provide the content and the styling,
                this component provides the rest.
            </p>
        </vue-marquee>

        <!-- custom props -->
        <vue-marquee :groups="10" :speed="150">
            <p>
                Your content will be repeated 10 times here and scroll at
                150px/second.
            </p>
        </vue-marquee>
    </main>
</template>
```

## Options

| Prop     | Type   | Default | Notes                                                                                                                                                                                 |
| -------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `groups` | Number | 5       | How many times the text will be repeated. All repetitions after the first have `aria-hidden` set to true. Add more repetitions if your content isn't reaching the edge of the screen. |
| `speed`  | Number | 75      | Target scroll speed in pixels per second.                                                                                                                                             |
npm package: @fuzzfinance/eslint-config-fuzz
Description: Eslint config for FuzzSwap
Author: RabbitDoge
Latest version: 1.2.1

# eslint-config-pancake

Pancake Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @pancakeswap/eslint-config-pancake
```

Add `"extends": "@pancakeswap/eslint-config-pancake"` to your eslint config file.
npm package: @fuzzfinance/sdk
Description: 🛠 An SDK for building applications on top of FuzzSwap.
Latest version: 1.1.8

# FuzzSwap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/fuzzfinance/fuzz-swap-sdk.git
```

Move into the fuzzswap-sdk working directory

```sh
cd fuzz-swap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @fuzzfinance/uikit
Description: Set of UI components for fuzz projects
Latest version: 0.4.8

# 🥞 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/)