open-index/open-npm huggingface dataset:
npm package: @saasquatch/surepayroll-components
Description: Stencil is a compiler for building fast web apps using Web Components.
Author: SaaSquatch Team
Latest version: 1.0.0

# Stencil App Starter

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.

Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

## Getting Started

To start a new project using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
```

and run:

```bash
npm install
npm start
```

To view the build, start an HTTP server inside of the `/www` directory.

To watch for file changes during development, run:

```bash
npm run dev
```

To build the app for production, run:

```bash
npm run build
```

To run the unit tests once, run:

```
npm test
```

To run the unit tests and watch for file changes during development, run:

```
npm run test.watch
```
npm package: @saasquatch/surepayroll-components-grapesjs
Description: GrapesJS Starter Plugin
Author: SaaSquatch
Latest version: 1.0.2

# GrapesJS Plugin Boilerplate


<span><a href="https://david-dm.org/artf/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>

This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://github.com/artf/grapesjs/wiki/Creating-plugins). Sections below are also used as boilerplate for your README, follow steps

### Usage
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git`
1. Replace in all files `YOUR-PLUGIN-NAME` with your plugin name
1. Update `package.json`
1. Install dependencies `npm i` and run the local server `npm start`
1. Start creating your plugin from `src/index.js`
1. Show some gif/demo if possible
1. Update README
1. When you're ready update the production file `npm run build`
1. Publish




## Summary

* Plugin name: `YOUR-PLUGIN-NAME`
* Components
  * `new-component1`
  * `new-component2`
* Blocks
  * `new-block1`
  * `new-block1`
...





## Options

|Option|Description|Default|
|-|-|-
|`option1`|Description option|`default value`|





## Download

* CDN
  * `https://unpkg.com/YOUR-PLUGIN-NAME`
* NPM
  * `npm i YOUR-PLUGIN-NAME`
* GIT
  * `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`





## Usage

```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['YOUR-PLUGIN-NAME'],
      pluginsOpts: {
        'YOUR-PLUGIN-NAME': {
          // options
        }
      }
  });
</script>
```





## Development

Clone the repository

```sh
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME
```

Install dependencies

```sh
$ npm i
```

The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)

```sh
$ npm i grapesjs --no-save
```

Start the dev server

```sh
$ npm start
```





## License

BSD 3-Clause
npm package: @saasquatch/swingeducation-components
Description: Stencil is a compiler for building fast web apps using Web Components.
Author: SaaSquatch Team
Latest version: 0.0.3

# Stencil App Starter

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.

Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

## Getting Started

To start a new project using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
```

and run:

```bash
npm install
npm start
```

To view the build, start an HTTP server inside of the `/www` directory.

To watch for file changes during development, run:

```bash
npm run dev
```

To build the app for production, run:

```bash
npm run build
```

To run the unit tests once, run:

```
npm test
```

To run the unit tests and watch for file changes during development, run:

```
npm run test.watch
```
npm package: @saasquatch/swingeducation-components-grapesjs
Description: GrapesJS Starter Plugin
Author: SaaSquatch
Latest version: 0.0.2

# GrapesJS Plugin Boilerplate


<span><a href="https://david-dm.org/artf/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>

This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://github.com/artf/grapesjs/wiki/Creating-plugins). Sections below are also used as boilerplate for your README, follow steps

### Usage
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git`
1. Replace in all files `YOUR-PLUGIN-NAME` with your plugin name
1. Update `package.json`
1. Install dependencies `npm i` and run the local server `npm start`
1. Start creating your plugin from `src/index.js`
1. Show some gif/demo if possible
1. Update README
1. When you're ready update the production file `npm run build`
1. Publish




## Summary

* Plugin name: `YOUR-PLUGIN-NAME`
* Components
  * `new-component1`
  * `new-component2`
* Blocks
  * `new-block1`
  * `new-block1`
...





## Options

|Option|Description|Default|
|-|-|-
|`option1`|Description option|`default value`|





## Download

* CDN
  * `https://unpkg.com/YOUR-PLUGIN-NAME`
* NPM
  * `npm i YOUR-PLUGIN-NAME`
* GIT
  * `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`





## Usage

```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['YOUR-PLUGIN-NAME'],
      pluginsOpts: {
        'YOUR-PLUGIN-NAME': {
          // options
        }
      }
  });
</script>
```





## Development

Clone the repository

```sh
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME
```

Install dependencies

```sh
$ npm i
```

The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)

```sh
$ npm i grapesjs --no-save
```

Start the dev server

```sh
$ npm start
```





## License

BSD 3-Clause
npm package: @saasquatch/universal-hooks
Description: An interface and a swappable implementation that can be used to implement universal custom hooks on top of hooks.
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.1

# Universal Hooks

This library aims to provide a common interface for React-like hooks to plug into. Simply plug in an implementation and your hooks are reusable across different implementations.

## Usage

There are two ways to plug in an implementation. You can supply a module at runtime or you can replace Universal Hooks at compile time.

### Provide an implementation at runtime

```javascript
// Set an implementation for the hooks
setImplementation(haunted)
// OR
setImplementation(React)
// OR
setImplementation(Preact)

// Use the hooks like normal
function useCounter() {
    const [counter, setCounter] = useState(0);

    const increment = () => setCounter((c) => c + 1)
    const decrement = () => setCounter((c) => c - 1)

    return {counter, increment, decrement}
}
```

### Provide an implementation via bundlers

Rollup, Webpack and other bundlers allow compile-time replacement of implementations.

E.g. with the Rollup `alias` plugin https://github.com/rollup/plugins/tree/master/packages/alias

To swap in React
```js
entries: [
  { find: '@saasquatch/universal-hooks', replacement: 'React' },
];
```

To swap in Haunted
```js
entries: [
  { find: '@saasquatch/universal-hooks', replacement: 'haunted' },
];
```


## API

Most common hooks are supported, except for `useContext`.

- useState
- useMemo
- useCallback
- useEffect
- useReducer
- useRef
npm package: @saasquatch/universal-hooks-testing-library
Description: A testing library for universal-hooks
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.1

# Universal Hooks Testing Library

This library provides an interface to test hooks written with Universal Hooks. You simply plug an implementation in and continue testing as usual. The API is based off of React Hooks Testing Library.

## Usage

First, you plug in an implementation. Here's an example with React:

```javascript
import * as React from "react";
import * as ReactTestLib from "@testing-library/react-hooks";

setImplementation(React);
setTestImplementation(ReactTestLib);
```

Or with haunted:

```javascript
import * as haunted from "haunted";
import * as hauntedTestingLib from "@saasquatch/haunted-hooks-testing-library";

setImplementation(haunted);
setTestImplementation(hauntedTestingLib);
```

Then, use it like usual.

```javascript
import { useState } from "@saasquatch/universal-hooks";
import { act, renderHook, setTestImplementation } from "@saasquatch/universal-hooks-testing-library";

test("example", () => {
  function useHook() {
    const [counter, setCounter] = useState(0);
    const inc = setCounter((c) => c + 1);
    return { counter, inc };
  }

  let result;
  act(() => {
    ({ result } = renderHook(useHook));
  });
  expect(result.current.counter).toBe(0);

  act(() => {
    result.current.inc();
  });
  expect(result.current.counter).toBe(1);
});
```
npm package: @saasquatch/vacay-partner-components
Description: Partner Vanilla component library for the SaaSquatch platform
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.0

# Vacay Partner Components

- Contains a built version of Vanilla Components that are compatible with the Partner Program for Vacay.

- The original source code for this build is not recoverable, therefore only the build itself is committed.
npm package: @saasquatch/vacay-vip-components
Description: VIP Vanilla component library for the SaaSquatch platform
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.0

# Vacay VIP Components

- Contains a built version of Vanilla Components that are compatible with the VIP Program for Vacay.

- The original source code for this build is not recoverable, therefore only the build itself is committed.
npm package: @saasquatch/vanilla-components-grapesjs
Description: GrapesJS Plugin Boilerplate
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.24

# GrapesJS Plugin Boilerplate


<span><a href="https://david-dm.org/artf/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>

This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://github.com/artf/grapesjs/wiki/Creating-plugins). Sections below are also used as boilerplate for your README, follow steps

### Usage
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git`
1. Replace in all files `YOUR-PLUGIN-NAME` with your plugin name
1. Update `package.json`
1. Install dependencies `npm i` and run the local server `npm start`
1. Start creating your plugin from `src/index.js`
1. Show some gif/demo if possible
1. Update README
1. When you're ready update the production file `npm run build`
1. Publish




## Summary

* Plugin name: `YOUR-PLUGIN-NAME`
* Components
  * `new-component1`
  * `new-component2`
* Blocks
  * `new-block1`
  * `new-block1`
...





## Options

|Option|Description|Default|
|-|-|-
|`option1`|Description option|`default value`|





## Download

* CDN
  * `https://unpkg.com/YOUR-PLUGIN-NAME`
* NPM
  * `npm i YOUR-PLUGIN-NAME`
* GIT
  * `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`





## Usage

```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['YOUR-PLUGIN-NAME'],
      pluginsOpts: {
        'YOUR-PLUGIN-NAME': {
          // options
        }
      }
  });
</script>
```





## Development

Clone the repository

```sh
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME
```

Install dependencies

```sh
$ npm i
```

The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)

```sh
$ npm i grapesjs --no-save
```

Start the dev server

```sh
$ npm start
```
npm package: @saasquatch/vip-vanilla-components
Description: VIP Vanilla component library for the SaaSquatch platform
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.0

# VIP Vanilla Components

- Contains a built version of Vanilla Components that are compatible with the VIP Program.

- The original source code for this build is not recoverable, therefore only the build itself is committed.
npm package: @saasquatch/vip-vanilla-components-grapesjs
Description: GrapesJS Plugin Boilerplate
Author: ReferralSaaSquatch.com, Inc.
Latest version: 1.0.0

# GrapesJS Plugin Boilerplate


<span><a href="https://david-dm.org/artf/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>

This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://github.com/artf/grapesjs/wiki/Creating-plugins). Sections below are also used as boilerplate for your README, follow steps

### Usage
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git`
1. Replace in all files `YOUR-PLUGIN-NAME` with your plugin name
1. Update `package.json`
1. Install dependencies `npm i` and run the local server `npm start`
1. Start creating your plugin from `src/index.js`
1. Show some gif/demo if possible
1. Update README
1. When you're ready update the production file `npm run build`
1. Publish




## Summary

* Plugin name: `YOUR-PLUGIN-NAME`
* Components
  * `new-component1`
  * `new-component2`
* Blocks
  * `new-block1`
  * `new-block1`
...





## Options

|Option|Description|Default|
|-|-|-
|`option1`|Description option|`default value`|





## Download

* CDN
  * `https://unpkg.com/YOUR-PLUGIN-NAME`
* NPM
  * `npm i YOUR-PLUGIN-NAME`
* GIT
  * `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`





## Usage

```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['YOUR-PLUGIN-NAME'],
      pluginsOpts: {
        'YOUR-PLUGIN-NAME': {
          // options
        }
      }
  });
</script>
```





## Development

Clone the repository

```sh
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME
```

Install dependencies

```sh
$ npm i
```

The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)

```sh
$ npm i grapesjs --no-save
```

Start the dev server

```sh
$ npm start
```
npm package: @saasquatch/widget-host
Description: Host javascript for SaaSquatch Widgets. The other part of the pair with Squatch.js
Latest version: 0.0.18
Deprecated: Components libraries should not use this, and should include this functionality directly

# widget-host

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe widget-host here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @saassy/audio-react-recorder
Description: Audio / Voice Recorder for React
Author: Josiah Mann / noobieprogrammer
Latest version: 1.0.5

# audio-react-recorder

> Audio / Voice Recorder w/ Audio Wave for React using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

[![NPM](https://img.shields.io/npm/v/audio-react-recorder.svg)](https://www.npmjs.com/package/audio-react-recorder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save audio-react-recorder
```

## DEMO

[AudioReactRecorder demo](https://doppelgunner.github.io/audio-react-recorder/)

## Usage

```jsx
import React, { Component } from 'react'

import AudioReactRecorder, { RecordState } from 'audio-react-recorder'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      recordState: null
    }
  }

  start = () => {
    this.setState({
      recordState: RecordState.START
    })
  }

  stop = () => {
    this.setState({
      recordState: RecordState.STOP
    })
  }

  //audioData contains blob and blobUrl
  onStop = (audioData) => {
    console.log('audioData', audioData)
  }

  render() {
    const { recordState } = this.state

    return (
      <div>
        <AudioReactRecorder state={recordState} onStop={this.onStop} />

        <button onClick={this.start}>Start</button>
        <button onClick={this.stop}>Stop</button>
      </div>
    )
  }
}
```

## Supported props

| Property name   | Type          | Default            | Description                                          |
| --------------- | ------------- | ------------------ | ---------------------------------------------------- |
| state           | string        | RecordState.NONE   | RecordState.(NONE,START,STOP,PAUSE)                  |
| type            | string        | audio/wav          | MIME type of the audio file                          |
| backgroundColor | string        | rgb(200, 200, 200) | Background color of the audio wave / canvas          |
| foregroundColor | string        | rgb(0, 0, 0)       | Foreground color of the audio wave / canvas          |
| canvasWidth     | number,string | 500                | Canvas width (you can use css to make it responsive) |
| canvasHeight    | number,string | 300                | canvas height                                        |

## License

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

## Buy me a coffee or just follow me

[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GCJGP8MTETUYU)

- [My Blog](https://noobieprogrammer.blogspot.com/)
- [Twitter](https://twitter.com/noobieprogrmmer)
- [Youtube](https://www.youtube.com/channel/UCpzMkMzGopmft5welUr8QZg)
npm package: @saastraa/create-base-next-app
Description: Next.js 13 starter template setup with tailwind css
Author: Rahul Singh
Latest version: 0.0.1

# Next.js 13 app setup with tailwind css

Note -

- Inspiration from `https://www.youtube.com/watch?v=UxdSoefSxrA`

## commands

```bash
  npm publish --access=public
```
npm package: @saastraa/create-template
Description: Cli App for creating a base template based on a template
Author: Rahul Singh
Latest version: 0.0.1

# Getting started with `create-template` cli app

```bash
  npx @saastraa/create-template
```

- Frameworks includes
  - Next.js
  - Remix run
  - Astro

Note - This Project is in progress and will receive frequent updates