open-index/open-npm huggingface dataset:
npm package: @martanara/id-generator
Description: Generates unique ids that are a combination of lowercase letters, uppercase letters and numbers
Author: Marta Nara
Latest version: 1.0.1

Generates unique ids that are a combination of lowercase letters, uppercase letters and numbers

# Install
Install with [npm](https://www.npmjs.com/):

```
$ npm install --save @martanara/id-generator
```

Install with [yarn](https://yarnpkg.com/):
```
$ yarn add @martanara/id-generator
```

# Usage
Works with numbers


```javascript
const randomId = require('@martanara/id-generator');

console.log(randomId(10)); // outputs: hd7C8nkXU3
console.log(randomId(15)); // outputs: oVCylmnMWvbpCHs
console.log(randomId(33)); // outputs: Fwjkqdkpf02TZ8EKs0T99uCEzQk4LDNSn
```

# Author
Marta Nara
* [GitHub](https://github.com/martanara)

# License
Copyright © 2022, Marta Nara. Released under the MIT License.
npm package: @marte2050/my-webcomponents
Description: Stencil Component Starter
Latest version: 0.0.2

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)



# My Components

[🇧🇷 Leia em Português](docs/readme-ptbr.md)  

## About the Project

This project was created for my landing page to provide structure, a consistent and reusable design, and to be framework-agnostic. It was built using TypeScript, Tailwind CSS, and Stencil.

## List of Developed Components

Below is the list of components developed so far:

- Button — Button component with color, size, and icon variations.
- MyIcon - Component for displaying SVG icons;
- MyNavbar - Navigation bar component;
- MyNavbarItem - Component for navigation items within MyNavbar;
- MySection - Component for page sections;
- MyWrapper - Component to wrap other components and apply layout styles;
- MyCarousel - Carousel component to display slides;

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
npm package: @martel/create-hyperapp
Description: Create Hyperapps with no build configuration
Author: Brandon Martel
Latest version: 0.4.12

# Create Hyperapp

Create Hyperapps with no build configuration.

- [Creating an App](#creating-an-app) – How to create a new app.

Create Hyperapp works on macOS, Windows, and Linux with Node.js >= 8.

## Quick Overview

```sh
npx create-hyperapp my-app
cd my-app
npm start
```

Then open [http://localhost:3000](http://localhost:3000) to see your app.
When you’re ready to deploy to production, create a minified bundle with `npm run build`.

## Creating an App

To create a new app, you may choose one of the following methods:

### npx

```sh
npx create-hyperapp my-app
```

([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher.)

### npm

```sh
npm init hyperapp my-app
```

_`npm init <initializer>` is available in npm 6+_

### Yarn

```sh
yarn create hyperapp my-app
```

_`yarn create` is available in Yarn 0.25+_

It will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install dependencies:

```
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.png
│   ├── index.html
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
```

No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can open your project folder:

```sh
cd my-app
```

Inside the newly created project, you can run some built-in commands:

### `npm start` or `yarn start`

Runs the app in development mode.

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

### `npm test` or `yarn test`

Runs the test watcher in an interactive mode. By default only tests related to files changed since the last commit are run.

[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests)

### `npm run build` or `yarn build`

Builds the app for production to the `build` folder. It bundles in production mode and optimizes the build for the best performance. The build is minified and the filenames include unique hashes based on the contents. Your app is ready to be [deployed](https://facebook.github.io/create-react-app/docs/deployment).

## License

Create Hyperapp is MIT licensed. See [LICENSE](LICENSE.md).
npm package: @martel/ctrlv
Description: A lightweight client for ctrlv.io; a simpler passwordless auth solution.
Author: Brandon Martel
Latest version: 0.2.9

# Ctrlv

A lightweight client for ctrlv.io; a simpler passwordless auth solution.

```js
npm i @martel/ctrlv
```

## Create a client instance

```js
import { Auth } from "@martel/ctrlv"

const auth = new Auth("your-issuer-url", "your-app-id");
```

## Bind automatic auth handling

```js
auth.restoreAuthState()
```

## Login user

```js
auth.login()
```

## Logout user

Pass `true` to the function to logout the current user from all sessions to your application

```js
auth.logout()
```

## Register for events

```js
auth.on('change', ({ user, token }) => {})
auth.on('refresh', () => {})
```

## TODO
 - More documentation of features

## License

[MIT](LICENSE).
npm package: @martel/hyperapp-devtools
Description: Expose Hyperapp v2 applications via redux devtools using a transformation layer
Author: Brandon Martel
Latest version: 0.1.7

# `@martel/hyperapp-devtools`

Expose Hyperapp v2 applications via redux devtools using a transformation layer.

## Usage

```
import { app, h } from 'hyperapp'

const appConfig = {
  init: {},
  view: state => h('div'),
  node: document.querySelector('#root')
}

if (process.env.NODE_ENV !== 'production') {
  const withDevtools = require('@martel/hyperapp-devtools')
  withDevtools(app)(appConfig)
} else {
  app(appConfig)
}
```
npm package: @martel/hyperapp-fx
Description: Effects for use with Hyperapp
Author: Wolfgang Wedemeyer
Latest version: 2.0.0-beta.4

# Hyperapp FX

[![Build Status](https://travis-ci.org/okwolf/hyperapp-fx.svg?branch=master)](https://travis-ci.org/okwolf/hyperapp-fx)
[![codecov](https://codecov.io/gh/okwolf/hyperapp-fx/branch/master/graph/badge.svg)](https://codecov.io/gh/okwolf/hyperapp-fx)
[![npm](https://img.shields.io/npm/v/hyperapp-fx.svg)](https://www.npmjs.org/package/hyperapp-fx)
[![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com "Join us")

A handy set of effects for use with [Hyperapp](https://github.com/jorgebucaran/hyperapp).

## Getting Started

Here's a taste of how to use a common effect for making HTTP requests. The app displays inspiring quotes about design, fetching a new quote each time the user clicks on the current one. Go ahead and [try it online here](https://codepen.io/okwolf/pen/vPbMaa?editors=0010).

```js
import { h, app } from "hyperapp"
import { Http } from "hyperapp-fx"

const GetQuote = () => [
  "...",
  Http({
    url:
      "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
    action: (_, [{ content }]) => content
  })
]

app({
  init: "Click here for quotes",
  view: quote => <h1 onclick={GetQuote}>{quote}</h1>,
  container: document.body
})
```

More [examples](https://codepen.io/collection/ArmxQj) are available to show other effects in action.

## Installation

<pre>
npm i <a href=https://www.npmjs.com/package/hyperapp-fx/v/next>hyperapp-fx@next</a>
</pre>

Then with a module bundler like [Rollup](https://rollupjs.org) or [Webpack](https://webpack.js.org), use as you would anything else.

```js
import { Http } from "hyperapp-fx"
```

If you don't want to set up a build environment, you can download Hyperapp FX from a CDN like [unpkg.com](https://unpkg.com/hyperapp-fx@next) and it will be globally available through the <samp>window.hyperappFx</samp> object. We support all ES5-compliant browsers, including Internet Explorer 10 and above. Use of the [`Http`](api.md#module_fx.exports.Http) effect requires a polyfill.

```html
<script src="https://unpkg.com/hyperapp-fx@next"></script>
```

## [API documentation](api.md)

## License

Hyperapp FX is MIT licensed. See [LICENSE](LICENSE.md).
npm package: @martel/hyperapp-scripts
Description: Hyperapp expansion pack for create-react-app
Author: Brandon Martel
Latest version: 0.5.7

# Zero-configuration [create-react-app](https://github.com/facebook/create-react-app) style projects with [Hyperapp](https://github.com/hyperapp/hyperapp)

This package offers a wrapper around the `start`, `build`, and `test` scripts from [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) with customizations to make them work with Hyperapp.

Note: if you want to quickly get started with Hyperapp, you probably want [`create-hyperapp`](https://github.com/okwolf/create-hyperapp) instead.

## Starting a new project from scratch

Start by creating a new folder for your awesome new Hyperapp project and initialize a new project with [npm](https://nodejs.org/en/download).

```console
mkdir my-awesome-project
cd my-awesome-project
mkdir public src
npm init -y
```

Install your dependencies (they're good for your health).

```console
npm i hyperapp
npm i -D hyperapp-scripts
```

Then open your `package.json` in your favorite text editor and add your scripts.

```diff
"scripts": {
+  "start": "hyperapp-scripts",
+  "build": "hyperapp-scripts build",
+  "test": "hyperapp-scripts test"
},
```

Create a `public/index.html` file.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My awesome app!</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

Next create a `src/index.js` file with a basic hello world app.

```jsx
import { h, app } from "hyperapp";

const state = { title: "Hi." };
const view = state => <h1>{state.title}</h1>;

app({
  init: () => state,
  view,
  node: document.getElementById("app")
});
```

Finally start your app and gaze upon its glory.

```console
npm start
```

Congratulations! Your app is now ready to make even more awesome! 😎
npm package: @martel/hyperapp-snowpack
Description: [![npm version](https://badge.fury.io/js/%40martel%2Fhyperapp-snowpack.svg)](https://badge.fury.io/js/%40martel%2Fhyperapp-snowpack)
Latest version: 0.1.9

# New Hyperapp Project
[![npm version](https://badge.fury.io/js/%40martel%2Fhyperapp-snowpack.svg)](https://badge.fury.io/js/%40martel%2Fhyperapp-snowpack)

> ✨ Bootstrapped with Create Snowpack App (CSA).

Create a new project with:
```
npx create-snowpack-app app-name --template @martel/hyperapp-snowpack
```

## Available Scripts

### npm start

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

### npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

### npm run build

Builds the app for production to the `build/` folder.

**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your `snowpack.config.json` config file.

### Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
npm package: @martel/hyperload
Description: Dynamically imported components for Hyperapp
Author: Wolfgang Wedemeyer
Latest version: 0.0.1

# Hyperload

[![npm](https://img.shields.io/npm/v/hyperload.svg)](https://www.npmjs.org/package/hyperload)

A higher-order app and component for dynamic import of [Hyperapp v2](https://github.com/jorgebucaran/hyperapp) components. Requires support (or polyfill) for [dynamic imports](https://caniuse.com/#feat=es6-module-dynamic-import).

## Installation

### Node.js

Install with npm / Yarn.

<pre>
npm i <a href=https://www.npmjs.com/package/hyperload>hyperload</a>
</pre>

Then with a module bundler like [rollup](https://github.com/rollup/rollup) or [webpack](https://github.com/webpack/webpack), use as you would anything else.

```js
import { withHyperload, Hyperload } from "hyperload";
```

Or using require.

```js
const { withHyperload, Hyperload } = require("hyperload");
```

### Browser

Download the minified library from the [CDN](https://unpkg.com/hyperload).

```html
<script src="https://unpkg.com/hyperload"></script>
```

You can find the library in `window.hyperload`.

## Example

```js
import { app, h } from "hyperapp";
import { withHyperload, Hyperload } from "hyperload";

const Loading = ({ error, otherProp }) => (
  <span>{error ? `Error! ${error}` : `loading ${otherProps}...`}</span>
);

withHyperload(app)({
  view: () => (
    <main>
      <Hyperload
        // These are the required props
        key="my-component"
        module={() => import("./my-component")}
        loading={Loading}
        otherProps="will be passed to the loading and imported components"
      />
    </main>
  ),
  container: document.body
});
```

Both the `loading` component and the dynamically imported module will receive the props that you pass to the `Hyperload` component. Errors encountered while importing your module will be passed to your `loading` component as the `error` prop.

## License

Hyperload is MIT licensed. See [LICENSE](LICENSE.md).
npm package: @martel/hyperstatic
Description: Hyperapp static site framework
Author: Brandon Martel
Latest version: 0.2.35

# Hyperstatic

Hyperstatic is a Hyperapp based static site generator with a code-splitting and navigation layer. It's goal is to be a simpler, lighter and faster GatsbyJS, that uses Hyperapp instead of React.

It's codebase also has an inherently smaller footprint by using Puppeteer for pre-rendering and Parcel for code-splitting.

See the demo site here: https://hyperstatic.dev/



# Starter template 🚀

To easiest way to get started is to use this [starter template](https://github.com/bmartel/hyperstatic-starter).

---  

#### Installation in an existing Hyperapp 2.0 project:  

1. `npm i hyperstatic`

2. Create a `routes.js` file with your routes in it.   
[Example](https://github.com/bmartel/hyperstatic-starter/blob/master/src/app/routes.js)



3. Replace hyperapp's `app` call with `hyperstatic`. Add the extra `routes` attribute that is needed.   
[Example](https://github.com/bmartel/hyperstatic-starter/blob/master/src/app.js#L18)  



4. Link to your pages using the `<Link>` component.   
[Example](https://github.com/bmartel/hyperstatic-starter/blob/master/src/app/view.jsx#L7)

5. (Optional) For pre-rendering, create a `render-pages.js`, list your URLs and call `renderPages` with them.   
[Example](https://github.com/bmartel/hyperstatic-starter/blob/master/render-pages.js)

Then add this helper command in your package.json scripts:  

```
"scripts": {
  "render-pages": "npm run build && node ./render-pages.js"
}
```


#### That should be it!


Pull requests are welcome!
npm package: @martel/micro-cookie
Description: Parses out cookies in micro requests and populates req.cookies
Author: Brandon Martel
Latest version: 1.2.0

<p align="center"><img src='https://raw.githubusercontent.com/alexfreska/micro-cookie/master/cookie.png'></p>
<h2 align="center">micro-cookie</h2>
<p align="center">cookie parser for <a href="https://github.com/zeit/micro">zeit's</a> micro</p>

<p align="center"><i>Parses request cookies and puts the object in req.cookies</a></i></p>

## Installation
```sh
yarn add micro-cookie
```

## Usage
```javascript
const parseCookies = require('micro-cookie')

module.exports = parseCookies(async function(req, res) {
  return 'Hello World!'
})
```

## With other micro plugins

```javascript
const visualize = require('micro-visualize')
const cors = require('micro-cors')
const cookieParse = require('micro-cookie')
const { send } = require('micro')

module.exports = visualize(cors(cookieParse(async function(req, res) {
  const responseMessage = {
    message: 'hello world!',
    cookies: req.cookies
  }
  send(res, 200, responseMessage)
})))
```
npm package: @martel/react-color
Description: A Collection of Color Pickers from Sketch, Photoshop, Chrome & more
Author: case
Latest version: 2.19.3

# [React Color](http://bmartel.github.io/react-color/)

[![Npm Version][npm-version-image]][npm-version-url]
[![Build Status][travis-svg]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

* **13 Different Pickers** - Sketch, Photoshop, Chrome and many more

* **Make Your Own** - Use the building block components to make your own

## Demo

![Demo](https://media.giphy.com/media/26FfggT53qE304CwE/giphy.gif)

[**Live Demo**](http://bmartel.github.io/react-color/)

## Installation & Usage

```sh
npm install react-color --save
```

### Include the Component

```js
import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}
```
You can import `AlphaPicker` `BlockPicker` `ChromePicker` `CirclePicker` `CompactPicker` `GithubPicker` `HuePicker` `MaterialPicker` `PhotoshopPicker` `SketchPicker` `SliderPicker` `SwatchesPicker` `TwitterPicker` respectively.

> 100% inline styles via [ReactCSS](http://reactcss.com/)

[travis-svg]: https://travis-ci.org/bmartel/react-color.svg
[travis-url]: https://travis-ci.org/bmartel/react-color
[license-image]: http://img.shields.io/npm/l/react-color.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-color.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-color
[npm-version-image]: https://img.shields.io/npm/v/react-color.svg
[npm-version-url]: https://www.npmjs.com/package/react-color
npm package: @martenbiehl/protopie-watcher
Description: Watch ProtoPie Files for changes and upload to ProtoPie Connect
Latest version: 1.0.4

# protopie-watcher

This small script can be used to upload changed ProtoPie files (pies) to ProtoPie Connect.

## Installation

`npm install -g protopie-watcher`

## Usage

Navigate to a folder with pies and execute `protopie-watcher`. It will ask to create a new configuration file for localhost and ask if it should scan for pies. Check the configuration file and add the pieid's from ProtoPie Connect. If they have not been uploaded yet start again with `protopie-watcher --upload-on-start`, else start with `protopie-watcher`.

```
Usage: protopie-watcher [options]

Watch ProtoPie Files for changes and upload to ProtoPie Connect

Options:
  -V, --version              output the version number
  -c, --config <file>        config file to use (default: "./protopie-watcher.json")
  -d, --debounce <debounce>  (in ms) how long do we wait until a change gets uploaded again? (default: 2000)
  -u, --upload-on-start      upload all pies when starting
  -h, --help                 display help for command
```