open-index/open-npm huggingface dataset:
npm package: @speakapbv/dough-component-library
Description: DOUGH: Speakap React Component Library
Author: Speakap
Latest version: 10.12.3

# Dough React Component Library

> SHOWCASE: http://developer.speakap.io/dough-studio

```
## Install latest
npm install @speakapbv/dough-component-library
yarn add @speakapbv/dough-component-library

# Install specific version
npm install @speakapbv/dough-component-library@9.0.0
yarn add @speakapbv/dough-component-library@9.0.0
```

## Usage

```jsx
import React from "react";
import { Button } from "@speakapbv/dough-component-library";

const Example = () => {
    return <Button {...props} />;
};
```

## License

MIT © [SpeakapBV](https://github.com/SpeakapBV)
npm package: @speakapbv/dough-component-library-tokens
Description: Dough Component Library Design Token Variables
Latest version: 1.9.0

# Dough Component Library Design Tokens

Dough component library shared design tokens

## Install

```bash
$ npm install @speakapbv/dough-component-library-tokens
$ yarn add @speakapbv/dough-component-library-tokens
```

## Usage (SCSS)
@import (~@speakapbv/dough-component-library-tokens/dough-tokens.scss)

## Development

1. Based on entity that you want to add
   1. For icons that should always look the same independent of the context 
      1. add corresponding `svg` to the `assets/icon/file` directory with `-icon` suffix 
      2. extend `design-tokens/icons.json`  with new definition 
   2. For icons that are context dependant (for example can change size and/or color)
      1. add corresponding `svg` to `assets/icon/icon-svgs` with `-icons` suffix
   3. Design tokens
      1. find relevant `.json` in `design-tokens` directory
      2. extend it with new definition
2. Run `yarn generate` command. 
Command creates all of the assets which are not stored in the repository and 
it will also update `index.ts` and `icons.ts` with extended definitions.
3. Create PR with those changes.

## Release
1. Create new branch with changes that you want to see in release
2. Create commit message following semantic release (the easiest is to use `yarn cm`)
3. Merge PR. The release will happen automatically, if the commit name falls into new release category.
npm package: @speakapbv/dough-extended-components-for-speakap
Description: DOUGH Extended for Speakap: Speakap Specific Components based on Dough
Author: Speakap
Latest version: 8.2.1

# Dough Extended Componentns for Speakap

```
## Install latest
npm install @speakapbv/dough-extended-components-for-speakap
yarn add @speakapbv/dough-extended-components-for-speakap

# Install specific version
npm install @speakapbv/dough-extended-components-for-speakap@1.0.0
yarn add @speakapbv/dough-extended-components-for-speakap@1.0.0
```

## Usage

```jsx
import React from "react";
import { ApplicationFrame } from "@speakapbv/dough-extended-components-for-speakap";

const Example = () => {
    return <ApplicationFrame {...props} />;
};
```

## License

MIT © [SpeakapBV](https://github.com/SpeakapBV)
npm package: @speakapbv/dough-rte
Description: DOUGH RTE: CKEditor5 based rich text editor for Speakap
Author: Speakap
Latest version: 21.7.6

# Dough RTE

> SHOWCASE: http://developer.speakap.io/dough

```
## Install latest
npm install @speakapbv/dough-component-library
yarn add @speakapbv/dough-component-library

# Install specific version
npm install @speakapbv/dough-component-library@0.0.80
yarn add @speakapbv/dough-component-library@0.0.80
```

## Usage

```jsx
import React from "react";
import { Button } from "@speakapbv/dough-component-library";

const Example = () => {
    return <Button {...props} />;
};
```

## License

MIT © [SpeakapBV](https://github.com/SpeakapBV)
npm package: @speakeasy-sdks/nextra-theme-docs
Description: A Nextra theme for documentation sites.
Author: Shu Ding
Latest version: 2.13.3

# nextra-theme-docs

A documentation site theme for [Nextra](https://github.com/shuding/nextra).

## Example

[nextra.vercel.app](https://nextra.vercel.app/)
npm package: @speaker-ender/js-position-helpers
Description: Basic JS Position Tools For HTML Elements
Author: 3nder
Latest version: 0.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# JS-Position-Helpers

### [DEMO](https://js-position-helpers.vercel.app)
### Basic JS Position Tools For HTML Elements
Provides safe cross-browser support for fetching positional information about html elements

## Functions

### `documentHeight()`
Fetches the maximum height of your webpage by using the document body and the html element.  
Returns `0` if the document or html element do not exist.

### `windowWidth()`
Fetches the width of the window.  
Returns `0` if the window and document element do not exist

### `windowHeight()`
Fetches the height of the window.  
Returns `0` if the window and document element do not exist

### `scrollTop()`
Fetches the distance of the viewport from the top of the page.  
Returns `0` if the window and document element do not exist

### `scrollLeft(element)`
Fetches the distance of the viewport from the left of the page or the distance of the left side of `element` from the left side of the viewport.  
Returns `0` if the window and document element do not exist

### `height(element)`
Fetches the height of the element passed to the function

### `height(element)`
Fetches the width of the element passed to the function

### `topPosition(element)`
Fetches the distance of the top of the element passed to the function from the top of the viewport

### `relativeTopPosition(element)`
Fetches the distance of the top of the element passed to the function from the top of the page

### `bottomPosition(element)`
Fetches the distance of the bottom of the element passed to the function from the top of the viewport

### `relativebottomPosition(element)`
Fetches the distance of the bottom of the element passed to the function from the top of the page

### `leftPosition(element, container)`
Fetches the distance of the left edge of the element passed to the function from the left of the viewport

### `rightPosition(element)`
Fetches the distance of the right edge of the element passed to the function from the right of the viewport

### `inViewport(element)`
Returns `true` if all edges of the element passed to the function are inside of the viewport
npm package: @speaker-ender/react-position-tools
Description: React Position Tools For HTML Elements
Author: 3nder
Latest version: 0.2.3

# React-Position-Tools

### React Hooks and Contexts for DOM Positions

### [DEMO](https://react-position-tools.vercel.app/)

## Included Tools

### `<WindowContextProvider />`

This element can be used to provide window element measurements to any of it's chidlren

### `useWindowContext()`

This will allow you to hook into the WindowContext so you can get the current height and width of the viewport

### `<CursorContextProvider />`

This will allow you to hook into the CursorContext so you can track the cursor from anywhere

### `useCursorContext()`

This is a hook for tracking the current cursor position relative to the viewport

### `useCursorTracking()`

This is a hook for tracking the current cursor position relative to any element

### `useIsCursorActive()`

This is a hook that keeps track how long it has been since the cursor has moved and will return false if the cursor has not been moved in more than 1 second

### `useElementTracking()`

Keeps track of an element's position attributes with callbacks for when it updates

### `useElementTrackingState()`

Manage an element's position in state instead of just through callbacks