open-index/open-npm huggingface dataset:
npm package: @muzamint/microbundle-ts-ava
Description: A TypeScript npm package skeleton/starter project with microbundle, AVA and XO
Author: Hugo
Latest version: 0.0.4

![Build](https://github.com/HugoDF/buttondown/workflows/Build%20&%20test/badge.svg)

microbundle-ts-pkg: A TypeScript npm package skeleton/starter project with microbundle, AVA and XO

Comes with:

- [SAMPLE_README.md](./SAMPLE_README.md) and [USE_CASES.md](./USE_CASES.md) for documentation.
- AVA for testing (see [./tests](./tests))
- XO for linting/formatting
- microbundle for compiling TypeScript to UMD, ESM, CJS

## Requirements

- Node 10
- Yarn 1.x or npm

## Setup

1. Clone the repository
2. Run `yarn` or `npm install` installs all required dependencies.
3. Run `yarn build` to build from TypeScript to common JavaScript distribution formats.
4. Run `yarn test` to run all tests :D.

## npm scripts

> Equivalent `npm run <script>` should also work

- `yarn test` run tests against **built output** with [ava](https://github.com/avajs/ava). **Important**: runs against build output so run `yarn build` beforehand.
- `yarn build` run build from TypeScript to UMD, CJS, ESM with [microbundle](https://github.com/developit/microbundle)
- `yarn watch` runs build in watch mode with [microbundle](https://github.com/developit/microbundle)
- `yarn lint` will lint all of the files with [xo](https://github.com/xojs/xo)
- `yarn format` will run lint with `--fix` option on all the examples files (and tests).
- `yarn release`, run clean, production build and release with `np`.

# About

This package is maintained by Hugo from [Code with Hugo](https://codewithhugo.com) and [Alpine.js Weekly](https://alpinejs.codewithhugo.com/newsletter).

## Acknowledgments


Special thanks to:

- The developers behind
  - [ava](https://avajs.dev)
  - [esm](https://github.com/standard-things/esm#readme)
  - [microbundle](https://github.com/developit/microbundle#readme)
  - [np](https://github.com/sindresorhus/np#readme)
  - [xo](https://github.com/xojs/xo#readme)

# LICENSE

Code is licensed under the [MIT License](./LICENSE).
npm package: @muzamint/storybook-prebuilt
Description: A prebuilt storybook version for web components
Author: open-wc
Latest version: 0.0.1-alpha.4

# Storybook prebuilt

A build of storybook and all it's dependencies, bundled as es modules. 

This package is included in [`@web/dev-server-storybook`](https://modern-web.dev/docs/dev-server/plugins/storybook/), a [web dev server](https://modern-web.dev/guides/dev-server/getting-started/) plugin.
npm package: @muzamint/superfluid-react
Description: connect metamask and superfluid
Author: Ming-der Wang
Latest version: 0.0.3

# my-crl

> Made with create-react-library

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

## Install

```bash
npm install --save @muzamint/superfluid-react
```

## Usage

```tsx
import React from 'react'

import { ExampleComponent } from '@muzamint/superfluid-react'
import '@muzamint/superfluid-react/dist/index.css'

const App = () => {
  return <ExampleComponent text="SuperFluid Example 😄" />
}

export default App
```

## License

MIT © [IPDID](https://github.com/IPDID)
npm package: @muze-nl/jsfs
Description: A filesystem abstraction for remote storage
Author: auke@muze.nl
Latest version: 0.3.5

[![GitHub License](https://img.shields.io/github/license/muze-nl/jsfs)](https://github.com/muze-nl/jsfs/blob/main/LICENSE)
[![GitHub package.json version](https://img.shields.io/github/package-json/v/muze-nl/jsfs)]()
[![NPM Version](https://img.shields.io/npm/v/@muze-nl/jsfs)](https://www.npmjs.com/package/@muze-nl/jsfs)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@muze-nl/jsfs)](https://www.npmjs.com/package/@muze-nl/jsfs)
[![Project stage: Experimental][project-stage-badge: Experimental]][project-stage-page]

# JSFS: a light-weight javascript filesystem abstraction

```javascript
import '@muze-nl/jsfs'

const client = jsfs.fs(
	new jsfs.adapters.https('https://example.org/')
)
```

## Table of Contents
1. [Introduction](#introduction)
2. [Usage](#usage)
3. [Adapters](#adapters)
4. [Contributing](CONTRIBUTING.md)
4. [License](#license)

<a name="introduction"></a>
## Introduction

JSFS is a light-weight filesystem abstraction for javascript, inspired by PHP's Flysystem. Unlike other solutions, like ZenFS, it has a minimal API. Just these functions:

- `cd`
- `read`
- `write`
- `delete`
- `exists`
- `list`

There is no support for streaming reads or writes yet.

<a name="usage"></a>
## Usage

```bash
npm install @muze-nl/jsfs
```

In the browser, using a cdn:

```html
<script src="https://cdn.jsdelivr.net/npm/@muze-nl/jsfs/dist/browser.js"></script>
```

Using ES6 modules, in the browser or Node (or Deno, or...):
```javascript
import '@muze-nl/jsfs'

const client = jsfs.fs(new jsfs.adapters.https('https://example.org/'))
```

<a name="adapters"></a>
## Adapters

Using Adapters, you can connect any filesystem-like API. By default JSFS comes with an HttpAdapter, that fetches HTML pages and parses them to extract filesystem data. Any site that is compatible with Apaches default directory listing will work. Calling `write()` results in a PUT request to the given path. Similarly `delete()` will send a DELETE request. `exists()` will send a HEAD request.

In a separate package, you can get an Adapter written for Solid PODs (see https://solidproject.org/). Check out [@muze-nl/jsfs-solid](https://github.com/muze-nl/jsfs-solid/) for more information.

To write a new Adapter, you must implement this interface:

```javascript
{
	get name()
	get path()
	supportsWrite()
	cd(path)
	async write(path, contents, metadata=null)
	async read(path)
	async exists(path)
	async delete(path)
	async list(path)
}
```

The `list` method must return an array of objects with at least these properties:
```javascript
{
	filename,
	path,
	name
}
```

The `read` method must return an object with at least these properties:
```javascript
{
	type,
	name,
	contents,
}
```

<a name="license"></a>
## License

This software is licensed under MIT open source license. See the [License](./LICENSE) file.

[project-stage-badge: Experimental]: https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg
[project-stage-page]: https://blog.pother.ca/project-stages/
npm package: @muze-nl/jsontag-types
Description: tagged json types
Author: auke@muze.nl
Latest version: 0.1.1

# JSONTag Types: Tagged JSON Types

This library provides a set of classes that implement the types defined in [JSONTag](https://github.com/poef/jsontag).

The purpose of the type classes provided here is mostly documentary. It is to document in code what the semantics, the workings of each type is supposed to be. So they have been kept purposely small and simple. They are also immutable by default, following the [value object](https://en.wikipedia.org/wiki/Value_object) paradigm from Domain-Driven Design (DDD)

## Install / Usage

```shell
npm install @muze-nl/JSONTagTypes
```

In the browser:

```html
<script src="/node_modules/JSONTagTypes/dist/browser.js"></script>
<script>

</script>
```

In node:
```javascript
import JSONTagTypes from '@muze-nl/jsontag-types'

```

## API


### reviver

> `JSONTag.reviver(key, value, meta)`

This method can be supplied to `JSONTag.parse` to instantiate the JSONTag provided classes: `UUID`, `Link`, `Date`, `Time`, `Datetime`, `Decimal` and `Money`. 

```javascript
let s = `{
	"id": <uuid>"03d971b8-1d72-4b52-872d-21bd004d6df8",
	"name": "Joe",
	"dob": <date>"1972-09-20"
}`
let r = JSONTag.parse(s, JSONTag.reviver)
let year = r.dob.getFullYear() // 1972
```
npm package: @muze-nl/metro-oidc
Description: oidc client middleware for @muze-nl/metro
Author: auke@muze.nl
Latest version: 0.6.0

# Metro OpenID Connect middleware

[![Project stage: Experimental][project-stage-badge: Experimental]][project-stage-page]

The OpenID Connect middleware allows you to configure a [metro client](https://github.com/muze-nl/metro) to handle authorization and authentication using OpenID Connect:

```javascript
import oidc from '@muze-nl/metro-oidc'

const client = metro.client('https://oauth2api.example.com')
.with( oidc.oidcmw({
	client_info: {
		client_name: 'My Client',
		redirect_uris: [
			'https://www.example.com/my_app.html'
		]
	},
	issuer: 'https://solidcommunity.net/'
}) )

async function fetchMovies() {
	return await client.get('https://example.solidcommunity.net/movies/')
}
````

_Note_: If your client has more than 1 possible `redirect_uri`, all will be used to register that client, but the first one will be used for this session. So make sure to put the `redirect_uri` you want to use now at `redirect_uris[0]``.

The OIDC middleware will automatically discover the configuration of the issuer, as well as do a dynamic client registration, if you haven't set a `client_info.client_id`.
It will then configure the correct OAuth2 settings and handle the request with [metro oauth2](https://github.com/muze-nl/metro-oauth2) middleware. It may redirect the browser to let the user login with the OIDC issuer. You can skip the automatic configuration step, if you provide the `openid_configuration` parameter set yourself. If you don't, the oidcmw middleware will only run the discovery process once, and store the information in localStorage. The same with the client_info and dynamic registration.

## Security features

metro.oidc uses OAuth2.1 by default, including PKCE and DPoP. The Keypair used in DPoP is created non-extractable, so they cannot be leaked. This means that the access_token and refresh_token, even if leaked, cannot be used anywhere else.

You can disable PKCE by setting `options.client_info.code_verifier` to false.
You can disable DPoP by setting `options.use_dpop` to false.

## id_token

The metro oidc middleware doesn't use the id_token, or verify any of its contents. This is left up to you, if you need it. You can retrieve the id_token by calling the `idToken` function, after the user is logged in:

```javascript
	import oidc from '@muze-nl/metro-oidc'

	let id_token = oidc.idToken({issuer:"oidc issuer url"})
```

`idToken()` expects either the store or the issuer option that you passed on to the `oidcmw()` function.


[project-stage-badge: Experimental]: https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg
[project-stage-page]: https://blog.pother.ca/project-stages/
npm package: @muze-nl/metro-oldm
Description: linked data middleware for @muze-nl/metro
Author: auke@muze.nl
Latest version: 0.3.4

[![GitHub License](https://img.shields.io/github/license/muze-nl/metro-oldm)](https://github.com/muze-nl/metro-oldm/blob/main/LICENSE)
[![GitHub package.json version](https://img.shields.io/github/package-json/v/muze-nl/metro-oldm)]()
[![NPM Version](https://img.shields.io/npm/v/@muze-nl/metro-oldm)](https://www.npmjs.com/package/@muze-nl/metro-oldm)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@muze-nl/metro-oldm)](https://www.npmjs.com/package/@muze-nl/metro-oldm)
[![Project stage: Experimental][project-stage-badge: Experimental]][project-stage-page]

# Metro OLDM (Linked Data) middleware

The OLDM middleware allows you to configure a [metro client](https://github.com/muze-nl/metro) to handle automatic parsing and writing of Linked Data formats:

```javascript
import oldmmw from '@muze-nl/metro-oldm'

const client = metro.client('https://oauth2api.example.com')
	.with( oldmmw({
		prefixes: {
			'ldp': 'http://www.w3.org/ns/ldp#'
			'schema': 'https://schema.org/'
		}
	}) )

async function fetchMovies() {
	return await client.get('https://example.solidcommunity.net/movies/')
}
````

See the [OLDM](https://github.com/muze-nl/oldm) documentation for information on how to use OLDM data.

[project-stage-badge: Experimental]: https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg
[project-stage-page]: https://blog.pother.ca/project-stages/
npm package: @muze-nl/od-jsontag
Description: On Demand JSONTag: parse/serialize large datastructures on demand, useful for sharing data between threads
Author: Auke van Slooten
Latest version: 0.4.5

# od-jsontag: On Demand JSONTag

This library implements a parser and stringifier for a variant of [JSONTag](https://github.com/muze-nl/jsontag/) which is optimized so that you only need to parse objects that you use and skip parsing any other objects.
This is especially useful to share data between threads or other workers using sharedArrayBuffers, the only shared memory option in javascript currently.

The parser creates in memory Proxy objects that trigger parsing only when accessed. You can use the data as normal objects for most use-cases. The format supports non-enumerable 
properties, which aren't part of the normal JSONTag format. The parse function expects an ArrayBuffer a input.

The stringify function creates a sharedArrayBuffer, which represents a file with one object per line. Each line is prefixed with a byte counter that indicates the length of the line. References to other objects are encoded as ~n, where n is the line number (starting at 0).

The parser doesn't build an id index, because that requires parsing all objects. Instead the stringify function builds or updates the id index. It isn't included in the string result.

In addition to the normal meta options, as defined in the [JSONTag library](https://github.com/muze-nl/jsontag/), od-jsontag adds the `meta.access` option. This must be a function like:

```
parser.meta.access = (object, property, method) => true | false
```

If `parser.meta.access` returns true, access to that property is allowed. Otherwise access is disallowed and the property value returned is `undefined`.

The `method` parameter is one of `set`,`get`,`has`,`deleteProperty`,`defineProperty`.

Add the access function in the meta parameter of the `parse` method:

```
import Parser from 'od-jsontag'

const parser = new Parser()
parser.meta.access: (object, property, method) => {
	return property=='name'
}
const root = parser.parse(string)
```
npm package: @muzeke.npm/sprestjs
Description: SharePoint Online REST Web Services Library
Author: Zeke Sebulino
Latest version: 1.1.0

<a target="_blank" href="https://www.npmjs.com/package/@muzeke.npm/sprestjs"> ![npm](https://img.shields.io/npm/v/@muzeke.npm/sprestjs.svg) </a>
<a href="https://github.com/muzeke/spRestJs/blob/master/LICENSE">![GitHub](https://img.shields.io/github/license/muzeke/spRestJs.svg)</a>
<a href="#">![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/muzeke/spRestJs.svg)</a>

# spRestJs
SharePoint Online REST Web Services Library
npm package: @muzeke.npm/tiny
Description: Removes all spaces from a string
Latest version: 3.0.0

![npm](https://img.shields.io/npm/v/tiny.svg)
![npm bundle size](https://img.shields.io/bundlephobia/min/tiny.svg)

Removes all spaces from a string.

Install
$ npm install @muzeke.npm/tiny
Usage
const tiny = require("@muzeke.npm/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
npm package: @muzikanto/cropper
Description: image crop component
Latest version: 1.0.1

## Cropper

[![npm version](https://badge.fury.io/js/%40muzikanto%2Fcropper.svg)](https://badge.fury.io/js/%40muzikanto%2Fcropper)
[![downloads](https://img.shields.io/npm/dm/@muzikanto/cropper.svg)](https://www.npmjs.com/package/@muzikanto/cropper)
[![dependencies Status](https://david-dm.org/muzikanto/cropper/status.svg)](https://david-dm.org/muzikanto/cropper)
[![size](https://img.shields.io/bundlephobia/minzip/@muzikanto/cropper)](https://bundlephobia.com/result?p=@muzikanto/cropper)

<!-- TOC -->

-  [Introduction](#introduction)
-  [Installation](#installation)
-  [Examples](#examples)
-  [Use](#use)
-  [License](#license)

<!-- /TOC -->

## Introduction

Peer dependencies: 
    `react`, `react-dom`,
    `material-ui/core`, `material-ui/styles`, `material-ui/icons`

## Installation

```sh
npm i @muzikanto/cropper
# or
yarn add @muzikanto/cropper
```

### Introduction

if you are interested in the package, please create an issue in github with your wishes, and then I will make changes

### new features

- add cross browser
- add easy customizing styles
- add light theme
- add transition effects
- add filters tab
- add resize original tab
- add limited selection
- add easy use CropManager

## Examples

[Example in storybook](https://muzikanto.github.io/cropper)

### Use

```typescript jsx
function Component() {
    const [base64, setBase64] = React.useState('');
    
  return (
      <>
          <BaseCropper
              src="https://github.com/Muzikanto/cropper/blob/master/src/test.jpg"
              onChange={(v) => setBase64(v)}
    
              flippedX={true} // show flip x button
              flippedY={true} // show flip y button
              rotatedLeft={true} // show rotate left button
              rotatedRight={true} // show rotate right button
              rotateToAngle={true} // show bottom rotate line
              sizePreview={true} // show size preview
              aspectRatio={[
                  'free', 'square', 'landscape', 'portrait',
                  {icon: <CustomIcon/>, value: 13 / 10, label: 'custom'},
              ]} // list of aspects
              // aspectRatio={ 16 / 10 } one value => hide select aspectRatio
          />
          <img src={base64}/>
      </>
  );
}
```

## License

[MIT](LICENSE)
npm package: @muzikanto/form-tools
Description: create form manager
Latest version: 1.0.1

<h1 align="center">Form tools</h1>

<div align="center">

[![npm version](https://badge.fury.io/js/%40muzikanto%2Fform-tools.svg)](https://badge.fury.io/js/%40muzikanto%2Fform-tools)
[![downloads](https://img.shields.io/npm/dm/@muzikanto/form-tools.svg)](https://www.npmjs.com/package/@muzikanto/form-tools)
[![size](https://img.shields.io/bundlephobia/minzip/@muzikanto/form-tools)](https://bundlephobia.com/result?p=@muzikanto/form-tools)
[![dependencies Status](https://david-dm.org/muzikanto/form-tools/status.svg)](https://david-dm.org/muzikanto/form-tools)
[![Coverage Status](https://img.shields.io/codecov/c/github/muzikanto/form-tools/master.svg)](https://codecov.io/gh/muzikanto/form-tools/branch/master)
[![type](https://badgen.net/npm/types/@muzikanto/form-tools)](https://badgen.net/npm/types/@muzikanto/form-tools)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/muzikanto/form-tools/blob/master/LICENSE)
![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

</div>

<!-- TOC -->

-  [Introduction](#introduction)
-  [Installation](#installation)
-  [License](#license)

<!-- /TOC -->

## Introduction

Its base package for

| Package     |                                             Version                                              |                                                                                                Downloads |
| ----------- | :----------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------: |
| apollo-form | [![npm version](https://badge.fury.io/js/apollo-form.svg)](https://badge.fury.io/js/apollo-form)| [![downloads](https://img.shields.io/npm/dm/apollo-form.svg)](https://www.npmjs.com/package/apollo-form)|
| @muzikanto/redux-form | [![npm version](https://badge.fury.io/js/%40muzikanto%2Fredux-form.svg)](https://badge.fury.io/js/%40muzikanto%2Fredux-form)| [![downloads](https://img.shields.io/npm/dm/@muzikanto/redux-form.svg)](https://www.npmjs.com/package/@muzikanto/redux-form)|


-  create form manager for Redux, Apollo
-  partial render form
-  easy and fast create forms
-  form validation
-  create form fields
-  create form array fields

## Installation

```sh
npm i form-tools
# or
yarn add form-tools

require `react` and `react-dom`
```

## License

[MIT](LICENSE)
npm package: @muzikanto/picture
Description: image component
Latest version: 1.3.1

## Picture (material-ui)

[![npm version](https://badge.fury.io/js/%40muzikanto%2Fpicture.svg)](https://badge.fury.io/js/%40muzikanto%2Fpicture)
[![downloads](https://img.shields.io/npm/dm/@muzikanto/picture.svg)](https://www.npmjs.com/package/@muzikanto/picture)
[![dependencies Status](https://david-dm.org/muzikanto/picture/status.svg)](https://david-dm.org/muzikanto/picture)
[![size](https://img.shields.io/bundlephobia/minzip/@muzikanto/picture)](https://bundlephobia.com/result?p=@muzikanto/picture)

<!-- TOC -->

-  [Introduction](#introduction)
-  [Installation](#installation)
-  [Preview](#preview)
-  [Examples](#examples)
   -  [base](#base)
   -  [advanced](#advanced)
-  [API](#api)
-  [License](#license)

<!-- /TOC -->

![](https://github.com/Muzikanto/picture/blob/master/picture.gif?raw=true)

## Introduction

Peer dependencies: 
    `react`, `react-dom`,
    `material-ui/core`, `material-ui/styles`

## Installation

```sh
npm i @muzikanto/picture
# or
yarn add @muzikanto/picture
```

## Examples

[Example in storybook](https://muzikanto.github.io/picture)

### Base

```typescript jsx
function Component() {
  return (
     <Picture
        src={"your image url"}
        aspectRatio={16 / 9}
       />
  )
}
```

### use image aspectRatio

```typescript jsx
function Component() {
    const [aspectRatio, setAspectRatio] = React.useState(16 / 10);
    
  return (
     <Picture
        src={"your image url"}
        aspectRatio={aspectRatio}
        onLoad={e => {
            setAspectRatio(e.currentTarget.naturalWidth / e.currentTarget.naturalHeight);
        }}
     />
  )
}
```

### Advanced

```typescript jsx

const StyledPicture = withStyles(() => ({
    error: {
        color: 'red',
        fontSize: 50,
    },
}))(Picture)

function Component() {
  return (
     <Picture
        src={"your image url"}
        aspectRatio={16 / 9}
        onClick={(e) => alert('onClick')}
        onLoad={(e) => alert('onLoad')}
        onError={(e) => alert('onError')}
          
        renderLoading={() => ...Custom Loading Component}
        renderError={() => ...Custom Error Component}
       />
  )
}

```

## License

[MIT](LICENSE)