open-index/open-npm huggingface dataset:
npm package: @samrobbins/admonition-components
Description: React components for admonitions
Author: Sam Robbins
Latest version: 3.1.0

# Admonition components

React components for admonitions

## Definition

```jsx
<Definition name="Definition name">

Definition text

</Definition>
```

This will generate a component that looks like this 

![Definition](https://res.cloudinary.com/samrobbins/image/upload/v1602436048/notes/definition_nisu7f.png)

## Corollary

I've never needed to add a title, so this just takes a child

```jsx
<Corollary>

Definition text

</Corollary>
```

Which looks like this:

![Corollary](https://res.cloudinary.com/samrobbins/image/upload/v1602436233/notes/corollary_hyzvmi.png)

## Example

The example component keeps the main text hidden until you toggle it. This keeps the amount of text on the page down, while allowing for more detail

```jsx
<Example title="Title">

Content

</Example>
```

Closed this looks like:

![Example Close](https://res.cloudinary.com/samrobbins/image/upload/v1602438447/notes/example_close_k1rocp.png)

Then on pressing the toggle it looks like:

![Example Open](https://res.cloudinary.com/samrobbins/image/upload/v1602438446/notes/example_open_wuspk2.png)

# Important

Important is for important notes, so doesn't take a title

```jsx
<Important>

An important note

</Important>
```

This looks like this:

![Important](https://res.cloudinary.com/samrobbins/image/upload/v1602438584/notes/important_zbljhl.png)

# Lemma

This doesn't have a title, but might need one at some point, raise an issue if it's required

Implemented like this

```jsx
<Lemma>

Lemma text

</Lemma>
```

![Lemma](https://res.cloudinary.com/samrobbins/image/upload/v1602438712/notes/lemma_q2lk8i.png)

# Problem

This is defined differently to the others, as all decision problems follow the same structure

```jsx
<Problem name="k-colourability" instance="A graph G" question="Is there a colouring of G using at most k colours?"/>
```

And looks like this:

![Problem](https://res.cloudinary.com/samrobbins/image/upload/v1602438851/notes/problem_wxobt3.png)

# Theorem

Theorem has the option of `name` for adding a title, and takes the main content as a child like so:

```jsx
<Theorem name="Theorem name">

Theorem content

</Theorem>
```

And looks like this:

![Theorem](https://res.cloudinary.com/samrobbins/image/upload/v1602439796/notes/theorem_qyxdiz.png)
npm package: @samrobbins/custom-typography
Description: A Tailwind CSS plugin based on the official Typography plugin, but with a variety of customizations
Author: Sam Robbins
Latest version: 1.2.0

## Custom Typography

A Tailwind CSS plugin based on the official Typography plugin, but with a variety of customizations

- Dark mode
- Syntax Highlighting
- Serif mode (inspired by Tufte.css and LaTeX.css)

This introduces two base classes:

- `prose` - the basic styling, always include this class
- `prose-serif` - serif styling, also needs the `prose` class applying

and two light classes:

- `prose-light` - light text matching with the `prose` class
- `prose-serifLight` light text matching with the `prose-serif` class

So the class list for normal font with dark mode would be

```
prose dark:prose-light
```

and the class list for serif font with dark mode would be

```
prose prose-serif dark:prose-light dark:prose-serifLight
```
npm package: @samrobbins/iconify-license
Description: Get all the licenses of iconify icons on your website
Author: Sam Robbins
Latest version: 1.1.1

# Iconify License Checker

If you're using [iconify](https://iconify.design/) for icons, this helps you to check the licenses of all the icon sets on your site, so you can check for things like attribution requirements.

## Usage

```
npx @samrobbins/iconify-license https://example.com
```
npm package: @samrobbins/tailwind-col-count
Description: A Tailwind CSS plugin to add the column-count CSS property to Tailwind CSS.
Author: Sam Robbins
Latest version: 1.0.2

# Tailwind Column Count

This is a Tailwind CSS plugin to add the [column-count](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) CSS property to Tailwind CSS.
npm package: @samrock5000/xecjs
Description: A JavaScript library for working with eCash and eTokens
Author: Ethan Quintera
Latest version: 0.0.1

# xec-js

[![Version](https://img.shields.io/npm/v/xec-js)](https://www.npmjs.com/package/xec-js)
[![Downloads/week](https://img.shields.io/npm/dw/xec-js)](https://npmjs.org/package/xec-js)
[![License](https://img.shields.io/npm/l/@xec-js)](https://github.com/ethanmackie/xec-js/blob/main/LICENSE.md)
[![js-standard-style](https://img.shields.io/badge/javascript-standard%20code%20style-green.svg?style=flat-square)](https://github.com/feross/standard)

[xec-js](https://www.npmjs.com/package/xec-js) is a JavaScript npm library for creating web and mobile apps that can interact with the eCash (XEC) blockchain.

### Quick Links

- [npm Library](https://www.npmjs.com/package/xec-js)
- [Documentation](https://ethanmackie.github.io/xec-js-documentation/)
- [rest.kingbch.com](https://rest.kingbch.com) - The eCash REST API this library talks to by default.
- [FullStack.cash](https://fullstack.cash) - cloud-based infrastructure for application developers.
- [Permissionless Software Foundation](https://psfoundation.cash) - The organization that maintains the original library that this is forked from.

### Quick Notes

- Install library: `npm install xec-js`

- Instantiate the library in your code:

```
const XECJS = require("xec-js")
let xecjs = new XECJS() // Defaults to the XEC network.
```

This library is intended to be paired with the 
the [xec-api](https://rest.kingbch.com/) REST API. The `restURL` property can be changed to work with different eCash XEC networks:

- Default eCash REST API server: https://rest.kingbch.com/v4/
- PSF's ABC Mainnet REST API server: https://abc.fullstack.cash/v5/


## New eCash Features

- transaction-builder can now directly take in an eCash address as part of adding tx outputs without the need for cash address conversion beforehand
> See [buildXecTx.js](https://github.com/ethanmackie/xec-js/blob/main/examples/buildXecTx.js) example

- Address.toHash160() can now directly take in an eCash address for conversion to a hash160 public key hash
> See [addrToHash160.js](https://github.com/ethanmackie/xec-js/blob/main/examples/addrToHash160.js) example

- Address.toCashAddress() can now directly take in an eCash address for conversion to a cash address


## License

[MIT](LICENSE.md)
npm package: @samrodev/react-big-calendar
Description: Calendar! with events
Author: samrodev
Latest version: 0.19.21

# react-big-calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

[**DEMO and Docs**](http://intljusticemission.github.io/react-big-calendar/examples/index.html)

Inspired by [Full Calendar](http://fullcalendar.io/).

## Use and Setup

`npm install react-big-calendar --save`

Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
element has a height, or the calendar won't be visible.

## Starters

* [react-big-calendar](https://github.com/arecvlohe/rbc-starter)
* [react-big-calendar with drag and drop](https://github.com/arecvlohe/rbc-with-dnd-starter)

## Run examples locally

```
$ git clone git@github.com:intljusticemission/react-big-calendar.git
$ cd react-big-calendar
$ npm install
$ npm run examples
```

* Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).

### Localization and Date Formatting

`react-big-calendar` includes two options for handling the date formatting and culture localization, depending
on your preference of DateTime libraries. You can use either the [Moment.js](http://momentjs.com/) or [Globalize.js](https://github.com/jquery/globalize) localizers.

Regardless of your choice, you **must** choose a localizer to use this library:

#### Moment.js

```js
import BigCalendar from 'react-big-calendar'
import moment from 'moment'

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment))
```

#### Globalize.js v0.1.1

```js
import BigCalendar from 'react-big-calendar'
import globalize from 'globalize'

BigCalendar.setLocalizer(BigCalendar.globalizeLocalizer(globalize))
```

## Join us on Reactiflux Discord

Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.
npm package: @samrose3/codemods
Description: This project is a test project bootstrapped with [CodeshiftCommunity 🚚](https://www.codeshiftcommunity.com/). Please see the [external packages guide](https://www.codeshiftcommunity.com/docs/external-packages) for more information on how to work with thi
Latest version: 0.5.6

# Codemods

This project is a test project bootstrapped with [CodeshiftCommunity 🚚](https://www.codeshiftcommunity.com/). Please see the [external packages guide](https://www.codeshiftcommunity.com/docs/external-packages) for more information on how to work with this repo.

![CodeshiftCommunity logo](https://www.codeshiftcommunity.com/img/logo.svg)

## Scripts

### `npm run dev`

Runs the codeshift CLI useful for testing transform files as if they have been published

**example:** `npm run dev -t codemods/10.0.0/transform.ts`

Alternatively, you can run `npm run dev` to see an interactive list of codemods to choose from.

See the [cli reference](https://www.codeshiftcommunity.com/docs/cli) for more information.

### `npm run test`

Launches the test runner in interactive watch mode.

See the [testing guide](https://www.codeshiftcommunity.com/docs/testing) for more information.

### `npm run validate`

Checks the validity of your `codeshift.config.js` file.

See the [configuration options](https://www.codeshiftcommunity.com/docs/configuration) for more information.

### `npm run build`

Builds the app for production to the `dist` folder.

## Publishing

This package can be published to npm via the normal commands `npm version` and `npm publish`

## Build tooling

Feel free to replace the preinstalled build tooling & dependencies to suit your needs. The only requirement is that there is a valid `codeshift.config.js` in your project root, `/src` or `/codemods` directories.
npm package: @samrum/create-vite-plugin-web-extension
Description: An easy way to start a Vite Web Extension project using @samrum/vite-plugin-web-extension
Author: Ruben Medina
Latest version: 2.1.0

# @samrum/create-vite-plugin-web-extension

[![npm version](https://img.shields.io/npm/v/@samrum/create-vite-plugin-web-extension)](https://www.npmjs.com/package/@samrum/create-vite-plugin-web-extension)
[![node compatibility](https://img.shields.io/node/v/@samrum/create-vite-plugin-web-extension)](https://nodejs.org/en/about/releases/)

An easy way to start a Vite Web Extension project

## Available Project Options

- Manifest V2, Manifest V3, or Both
- TypeScript
- Choice of framework including:
  - Preact
  - React
  - Solid
  - Svelte
  - Vanilla
  - Vue

## Usage

```sh
npm init @samrum/vite-plugin-web-extension@latest
```

Check the readme in the generated project for more usage instructions.

## Credits

- Project generation code from [create-vue](https://github.com/vuejs/create-vue)
npm package: @samsam2233/dom-inspector
Description: dom inspect like chrom dev tools.
Author: luoye
Latest version: 1.1.1

DomInspector
--------------------------------

Dom inspector like chrome dev tools.

![](https://s10.mogucdn.com/mlcdn/c45406/180622_884j6ci4c4j747e3j3eihiilbif43_736x472.gif)

## Usage

#### Install `dom-inspector`

```bash
npm install dom-inspector --save
```

```html
<script type="text/javascript" src="./dist/dom-inspector.min.js"></script>
```

```js
const DomInspector = require('dom-inspector');
```

```js
import DomInspector from 'dom-inspector';
```

#### New instance

```js
const inspector = new DomInspector();
```

#### Instance options

```js
const inspector = new DomInspector({
	root: 'body',
	exclude: ['#exclude>div', document.querySelector('.exclude')],
  theme: 'you-custom-theme-class',
  maxZIndex: '', // max z index, if blank, will auto get document.all max z index
});
```

* root

	Dom inspector root element. `String` or `Dom`, default `body`.

* exclude

	Not inspect some elements. `String` or `Dom` Array.

* theme

	Inspector overlay style. You can custom overlay background color as follow.

	```css
	.you-custom-theme-class .margin {
		background-color: blue;
	}

	.you-custom-theme-class .border {
		background-color: red;
	}

	.you-custom-theme-class .padding {
		background-color: green;
	}

	.you-custom-theme-class .content {
		background-color: gray;
	}

	```

	Don`t forget background color opacity. ^_^

#### Attribute list

* `inspector.target`

	Inspecting element.

#### API list

* `inspector.enable()`

	Display overlay `block` and addEventListener `mousemove`.

* `inspector.pause()`

	RemoveEventListener `mousemove`, pause inspector.

* `inspector.disable()`

	RemoveEventListener `mousemove`, display overlay `none`.

* `inspector.destroy()`

	`disable()` and remove overlay.

* `inspector.getXPath([ele])`

	Return ele XPath.

* `inspector.getSelector([ele])`

	Return ele selector.
	
	`html>body>div:nth-of-type(9)`

* `inspector.getElementInfo([ele])`

	```js
	return {
		top: '',
		left: '',
		width: '',
		height: '',
		'padding-top': '',
		'padding-right': '',
		'padding-bottom': '',
		'padding-left': '',
		'border-top-width': '',
		'border-right-width': '',
		'border-bottom-width': '',
		'border-left-width': '',
		'margin-top': '',
		'margin-right': '',
		'margin-bottom': '',
		'margin-left': ''
	};
	```